/**
 * Mega Nav — frontend styles
 *
 * BEM-ish class structure:
 *   .mega-nav               → the <nav> wrapper
 *   .mega-nav__item         → top-level <li>
 *   .mega-nav__panel        → the floating sub-menu panel
 *   .mega-nav__dropdown     → plain dropdown list
 *   .mega-nav__panel--mega  → mega menu panel
 *   .mega-nav__columns      → CSS-grid column container
 *   .mega-nav__column       → single column <li>
 *   .mega-nav__accordion    → accordion wrapper
 *   .mega-nav__panel--slider → slider panel
 */

/* ============================================================
   DESIGN TOKENS — customise via Appearance → Customize → Mega Nav
   All colours below are the defaults; the Customizer outputs
   overrides into <head> when a value is saved.
   ============================================================ */
:root {
  /* Nav bar */
  --mega-nav-bar-bg:           transparent;
  --mega-nav-bar-text:         inherit;

  /* Top-level links — hover */
  --mega-nav-hover-text:       #0073aa;
  --mega-nav-hover-bg:         transparent;

  /* Top-level links — active / current page */
  --mega-nav-active-text:      #0073aa;
  --mega-nav-active-bg:        transparent;

  /* Sub-menu panel */
  --mega-nav-panel-bg:         #ffffff;
  --mega-nav-panel-border:     #e5e5e5;
  --mega-nav-panel-text:       #333333;
  --mega-nav-panel-radius:     4px;
  --mega-nav-panel-shadow:     0 8px 24px rgba(0, 0, 0, 0.10);

  /* Sub-menu links — hover */
  --mega-nav-sub-hover-text:   #0073aa;
  --mega-nav-sub-hover-bg:     #f5f5f5;

  /* Accent (column heading underlines, accordion icons) */
  --mega-nav-accent:           #0073aa;

  /* Slider — active / centred slide */
  --mega-nav-slider-active-bg:   #0073aa;
  --mega-nav-slider-active-text: #ffffff;

  /* Button themes — customise via Appearance → Customize → Mega Nav → Button Themes */
  /* Theme 1 — Primary */
  --mega-nav-btn-1-bg:          #0073aa;
  --mega-nav-btn-1-text:        #ffffff;
  --mega-nav-btn-1-border:      #0073aa;
  --mega-nav-btn-1-hover-bg:    transparent;
  --mega-nav-btn-1-hover-text:  #0073aa;
  /* Theme 2 — Outline */
  --mega-nav-btn-2-bg:          transparent;
  --mega-nav-btn-2-text:        #0073aa;
  --mega-nav-btn-2-border:      #0073aa;
  --mega-nav-btn-2-hover-bg:    #0073aa;
  --mega-nav-btn-2-hover-text:  #ffffff;
  /* Theme 3 — Ghost */
  --mega-nav-btn-3-bg:          rgba(0, 0, 0, 0.06);
  --mega-nav-btn-3-text:        #333333;
  --mega-nav-btn-3-border:      #333333;
  --mega-nav-btn-3-hover-bg:    rgba(0, 0, 0, 0.12);
  --mega-nav-btn-3-hover-text:  #333333;
  /* Theme 1 — shape & typography */
  --mega-nav-btn-1-radius:          4px;
  --mega-nav-btn-1-margin-top:      0px;
  --mega-nav-btn-1-margin-right:    0px;
  --mega-nav-btn-1-margin-bottom:   0px;
  --mega-nav-btn-1-margin-left:     0px;
  --mega-nav-btn-1-text-transform:  none;
  /* Theme 2 — shape & typography */
  --mega-nav-btn-2-radius:          4px;
  --mega-nav-btn-2-margin-top:      0px;
  --mega-nav-btn-2-margin-right:    0px;
  --mega-nav-btn-2-margin-bottom:   0px;
  --mega-nav-btn-2-margin-left:     0px;
  --mega-nav-btn-2-text-transform:  none;
  /* Theme 3 — shape & typography */
  --mega-nav-btn-3-radius:          4px;
  --mega-nav-btn-3-margin-top:      0px;
  --mega-nav-btn-3-margin-right:    0px;
  --mega-nav-btn-3-margin-bottom:   0px;
  --mega-nav-btn-3-margin-left:     0px;
  --mega-nav-btn-3-text-transform:  none;
  /* Themes 4-6 (default to theme 1 style; customise via Customizer) */
  --mega-nav-btn-4-bg:           #0073aa;
  --mega-nav-btn-4-text:         #ffffff;
  --mega-nav-btn-4-border:       #0073aa;
  --mega-nav-btn-4-hover-bg:     transparent;
  --mega-nav-btn-4-hover-text:   #0073aa;
  --mega-nav-btn-4-radius:          4px;
  --mega-nav-btn-4-margin-top:      0px;
  --mega-nav-btn-4-margin-right:    0px;
  --mega-nav-btn-4-margin-bottom:   0px;
  --mega-nav-btn-4-margin-left:     0px;
  --mega-nav-btn-4-text-transform:  none;
  --mega-nav-btn-5-bg:           #0073aa;
  --mega-nav-btn-5-text:         #ffffff;
  --mega-nav-btn-5-border:       #0073aa;
  --mega-nav-btn-5-hover-bg:     transparent;
  --mega-nav-btn-5-hover-text:   #0073aa;
  --mega-nav-btn-5-radius:          4px;
  --mega-nav-btn-5-margin-top:      0px;
  --mega-nav-btn-5-margin-right:    0px;
  --mega-nav-btn-5-margin-bottom:   0px;
  --mega-nav-btn-5-margin-left:     0px;
  --mega-nav-btn-5-text-transform:  none;
  --mega-nav-btn-6-bg:           #0073aa;
  --mega-nav-btn-6-text:         #ffffff;
  --mega-nav-btn-6-border:       #0073aa;
  --mega-nav-btn-6-hover-bg:     transparent;
  --mega-nav-btn-6-hover-text:   #0073aa;
  --mega-nav-btn-6-radius:          4px;
  --mega-nav-btn-6-margin-top:      0px;
  --mega-nav-btn-6-margin-right:    0px;
  --mega-nav-btn-6-margin-bottom:   0px;
  --mega-nav-btn-6-margin-left:     0px;
  --mega-nav-btn-6-text-transform:  none;
}

/* ============================================================
   RESET HELPERS
   ============================================================ */
.mega-nav,
.mega-nav *,
.mega-nav *::before,
.mega-nav *::after {
  box-sizing: border-box;
}

.mega-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Hard reset — override any theme rules targeting ul/li/a inside
 * the plugin wrapper (e.g. `.top-bar ul`, `.top-bar li`, `.menu ul`).
 *
 * Selector strategy:
 *   .mega-nav.mega-nav  →  doubles the class for specificity (0,2,0)
 *   + element selectors  →  final specificity (0,2,1) beats (0,1,1)
 *   !important           →  beats anything using a single !important at
 *                           lower specificity
 *
 * The panel <div> itself also gets an explicit background so the
 * theme cannot bleed a UL background through it.
 */

/* Every UL and LI anywhere inside the plugin, at any depth */
.mega-nav.mega-nav ul,
.mega-nav.mega-nav li {
  background: transparent !important;
  color: inherit !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Panel containers — restore the correct panel background */
.mega-nav.mega-nav .mega-nav__panel,
.mega-nav.mega-nav .mega-nav__dropdown {
  background: var(--mega-nav-panel-bg, #ffffff) !important;
  color: var(--mega-nav-panel-text, #333333) !important;
}

/* Top-level nav bar UL — must stay transparent / bar colour */
.mega-nav.mega-nav > ul {
  background: transparent !important;
  color: inherit !important;
}

/* ============================================================
   TOP-LEVEL NAV BAR
   ============================================================ */
.mega-nav {
  background: var(--mega-nav-bar-bg, transparent);
  color: var(--mega-nav-bar-text, inherit);
  position: relative;
  overflow: visible;
}

.mega-nav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  position: relative;
  overflow: visible;
}

.mega-nav__item {
  position: relative;
  overflow: visible;
}

.mega-nav__item > a {
  display: block;
  position: relative;
  padding: 0.75rem 2.25rem 0.75rem 1rem; /* extra right space for caret */
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--mega-nav-font-size-1, inherit);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mega-nav__item > a:hover,
.mega-nav__item > a:focus {
  color: var(--mega-nav-hover-text, #0073aa);
  background-color: var(--mega-nav-hover-bg, transparent);
  outline: none;
}

/* Active / current page */
.mega-nav__item.current-menu-item > a,
.mega-nav__item.current-menu-ancestor > a,
.mega-nav__item.current-menu-parent > a {
  color: var(--mega-nav-active-text, #0073aa);
  background-color: var(--mega-nav-active-bg, transparent);
}

/* Caret for items with a sub-menu */
.mega-nav__item.menu-item-has-children > a {
  padding-right: 1.75rem;
}

.mega-nav__item.menu-item-has-children > a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.mega-nav__item.menu-item-has-children.is-open > a::after {
  transform: translateY(-50%) scaleY(-1);
}

/* ============================================================
   PANELS — shared
   ============================================================ */
.mega-nav__panel,
.mega-nav__dropdown {
  display: block; /* override any theme `nav ul ul { display:none }` */
  position: absolute;
  top: calc(100% + var(--mega-nav-panel-offset, 0px));
  left: 0;
  z-index: 9999;
  background: var(--mega-nav-panel-bg, #ffffff);
  border: 1px solid var(--mega-nav-panel-border, #e5e5e5);
  border-radius: 0 0 var(--mega-nav-panel-radius, 4px) var(--mega-nav-panel-radius, 4px);
  box-shadow: var(--mega-nav-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.1));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  min-width: 200px;
}

.mega-nav__item.is-open > .mega-nav__panel,
.mega-nav__item.is-open > .mega-nav__dropdown {
  display: block !important; /* defeat any theme display:none on the open state */
  opacity: 1;
  visibility: visible !important;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ============================================================
   DROPDOWN
   ============================================================ */
.mega-nav__dropdown {
  padding: 0.5rem 0;
}

.mega-nav__dropdown li a {
  display: block;
  padding: 0.5rem 1.25rem;
  color: var(--mega-nav-panel-text, #333333);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--mega-nav-font-size-2, inherit);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mega-nav__dropdown li a:hover,
.mega-nav__dropdown li a:focus {
  background-color: var(--mega-nav-sub-hover-bg, #f5f5f5);
  color: var(--mega-nav-sub-hover-text, #0073aa);
  outline: none;
}

/* ============================================================
   MEGA MENU PANEL
   ============================================================ */
.mega-nav__panel--mega {
  left: 0; /* JS overrides this to snap to the viewport left edge */
  transform: translateY(6px);
  width: 100vw;
  padding: 1.5rem;
}

.mega-nav__item.is-open > .mega-nav__panel--mega {
  transform: translateY(0);
}

/* CSS Grid columns — number of columns set via inline CSS custom properties by the walker */
.mega-nav__columns {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(var(--mega-nav-cols-xxlarge, 3), 1fr);
}

/* Fallback modifier classes (legacy / backwards compat) */
.mega-nav__columns--2 { grid-template-columns: repeat(2, 1fr); }
.mega-nav__columns--3 { grid-template-columns: repeat(3, 1fr); }
.mega-nav__columns--4 { grid-template-columns: repeat(4, 1fr); }
.mega-nav__columns--5 { grid-template-columns: repeat(5, 1fr); }
.mega-nav__columns--6 { grid-template-columns: repeat(6, 1fr); }
/* Responsive overrides (xlarge / desktop) are output dynamically by output_css()
   using the configurable breakpoint values from Customize → Mega Nav → Breakpoints. */

/* Column headings */
.mega-nav__column > .mega-nav__column-link,
.mega-nav__column > .mega-nav__accordion-toggle {
  display: block;
  font-weight: 600;
  padding: 0 0 0.5rem;
  color: var(--mega-nav-panel-text, #333333);
  text-decoration: none;
  border-bottom: 2px solid var(--mega-nav-accent, #0073aa);
  margin-bottom: 0.5rem;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: var(--mega-nav-font-size-2, inherit);
  font-family: inherit;
}

.mega-nav__column > .mega-nav__column-link:hover,
.mega-nav__column > .mega-nav__column-link:focus,
.mega-nav__column > .mega-nav__accordion-toggle:hover,
.mega-nav__column > .mega-nav__accordion-toggle:focus {
  color: var(--mega-nav-accent, #0073aa);
  outline: none;
}

/* ============================================================
   ACCORDION (depth-2 items inside mega columns)
   ============================================================ */
.mega-nav__accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mega-nav__accordion-icon {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0.5em;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.2s ease;
}

.mega-nav__accordion-toggle[aria-expanded='true'] .mega-nav__accordion-icon {
  transform: scaleY(-1);
}

.mega-nav__accordion-list {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.mega-nav__accordion.is-open > .mega-nav__accordion-list {
  max-height: 600px;
}

/* Accordion toggle inside a plain dropdown — styled to match dropdown link rows */
.mega-nav__dropdown > li > .mega-nav__accordion-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  padding: 0.5rem 1.25rem;
  color: var(--mega-nav-panel-text, #333333);
  font-size: var(--mega-nav-font-size-2, inherit);
  font-family: inherit;
  font-weight: normal;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mega-nav__dropdown > li > .mega-nav__accordion-toggle:hover,
.mega-nav__dropdown > li > .mega-nav__accordion-toggle:focus {
  background-color: var(--mega-nav-sub-hover-bg, #f5f5f5);
  color: var(--mega-nav-sub-hover-text, #0073aa);
  outline: none;
}

/* Nested accordion-list items inside a dropdown — indent to show hierarchy */
.mega-nav__dropdown .mega-nav__accordion-list li a {
  padding: 0.35rem 1.25rem 0.35rem 2rem;
  border-left: none;
  font-size: var(--mega-nav-font-size-2, inherit);
}

.mega-nav__accordion-list li a {
  display: block;
  padding: 0.35rem 0 0.35rem 0.75rem;
  color: var(--mega-nav-panel-text, #333333);
  text-decoration: none;
  font-size: var(--mega-nav-font-size-3, 0.9em);
  transition: color 0.15s ease, border-color 0.15s ease;
  border-left: 2px solid transparent;
}

.mega-nav__accordion-list li a:hover,
.mega-nav__accordion-list li a:focus {
  color: var(--mega-nav-sub-hover-text, #0073aa);
  border-left-color: var(--mega-nav-accent, #0073aa);
  outline: none;
}

/* ============================================================
   SUB-LIST (plain list display within mega columns)
   ============================================================ */
.mega-nav__sub-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

/* 2-column list variant */
.mega-nav__sub-list--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.5rem;
}

.mega-nav__sub-list li a {
  display: block;
  padding: 0.35rem 0 0.35rem 0.75rem;
  color: var(--mega-nav-panel-text, #333333);
  text-decoration: none;
  font-size: var(--mega-nav-font-size-3, 0.9em);
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mega-nav__sub-list li a:hover,
.mega-nav__sub-list li a:focus {
  color: var(--mega-nav-sub-hover-text, #0073aa);
  border-left-color: var(--mega-nav-accent, #0073aa);
  outline: none;
}

/* Accordion toggle button nested inside a sub-list item */
.mega-nav__sub-list li .mega-nav__accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.35rem 0.25rem 0.35rem 0.75rem;
  color: var(--mega-nav-panel-text, #333333);
  font-size: var(--mega-nav-font-size-3, 0.9em);
  font-weight: 600;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mega-nav__sub-list li .mega-nav__accordion-toggle:hover,
.mega-nav__sub-list li .mega-nav__accordion-toggle:focus {
  color: var(--mega-nav-sub-hover-text, #0073aa);
  border-left-color: var(--mega-nav-accent, #0073aa);
  outline: none;
}

/* Level 4 — items inside an accordion that is itself within a sub-list */
.mega-nav__sub-list .mega-nav__accordion-list li a {
  font-size: var(--mega-nav-font-size-4, 0.85em);
}

/* ============================================================
   SLIDER PANEL (Splide.js)
   ============================================================ */
.mega-nav__panel--slider {
  left: 0; /* JS overrides this to snap to the viewport left edge */
  transform: translateY(6px);
  width: 100vw;
  padding: 1rem;
}

.mega-nav__item.is-open > .mega-nav__panel--slider {
  transform: translateY(0);
}

.mega-nav__slide-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--mega-nav-panel-text, #333333);
  padding: 0.5rem;
  border-radius: var(--mega-nav-panel-radius, 4px);
  transition: background-color 0.15s ease;
}

.mega-nav__slide-link:hover,
.mega-nav__slide-link:focus {
  background-color: var(--mega-nav-sub-hover-bg, #f5f5f5);
  outline: none;
}

/* Active / centred slide highlight */
.mega-nav__splide .splide__slide.is-active .mega-nav__slide-link {
  background-color: var(--mega-nav-slider-active-bg, #0073aa);
  color: var(--mega-nav-slider-active-text, #ffffff);
}

.mega-nav__slide-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  margin: 0 auto 0.5rem;
}

.mega-nav__slide-title {
  display: block;
  font-size: var(--mega-nav-font-size-5, 0.85em);
  text-align: center;
}

/* ============================================================
   BUTTON THEMES — per menu item link styling
   Assign via Appearance → Menus → item → Button style.
   Add / customise themes via Appearance → Customize → Mega Nav → Button Themes.
   ============================================================ */

/* Shared base: override the default block display so buttons sit inline */
.mega-nav__btn {
  display: inline-block !important;
  line-height: 1.4;
  text-align: center !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease !important;
}

/* ------------------------------------------------------------------
   Theme 1 — Primary (default: solid fill, white text, inverts on hover)
------------------------------------------------------------------ */
.mega-nav__btn--1 {
  padding: 0.4em 1.1em;
  background-color: var(--mega-nav-btn-1-bg);
  color: var(--mega-nav-btn-1-text) !important;
  border: 2px solid var(--mega-nav-btn-1-border);
  border-radius: var(--mega-nav-btn-1-radius);
  text-transform: var(--mega-nav-btn-1-text-transform);
  font-weight: 700;
}
.mega-nav__btn--1:hover,
.mega-nav__btn--1:focus {
  background-color: var(--mega-nav-btn-1-hover-bg) !important;
  color: var(--mega-nav-btn-1-hover-text) !important;
  border-color: var(--mega-nav-btn-1-border) !important;
}

/* ------------------------------------------------------------------
   Theme 2 — Outline (default: transparent bg, accent border/text, fills on hover)
------------------------------------------------------------------ */
.mega-nav__btn--2 {
  padding: 0.4em 1.1em;
  background-color: var(--mega-nav-btn-2-bg);
  color: var(--mega-nav-btn-2-text) !important;
  border: 2px solid var(--mega-nav-btn-2-border);
  border-radius: var(--mega-nav-btn-2-radius);
  text-transform: var(--mega-nav-btn-2-text-transform);
  font-weight: 600;
}
.mega-nav__btn--2:hover,
.mega-nav__btn--2:focus {
  background-color: var(--mega-nav-btn-2-hover-bg) !important;
  color: var(--mega-nav-btn-2-hover-text) !important;
  border-color: var(--mega-nav-btn-2-border) !important;
}

/* ------------------------------------------------------------------
   Theme 3 — Ghost (default: translucent fill, dashed border, inherits text)
------------------------------------------------------------------ */
.mega-nav__btn--3 {
  padding: 0.4em 1.1em;
  background-color: var(--mega-nav-btn-3-bg);
  color: var(--mega-nav-btn-3-text) !important;
  border: 2px dashed var(--mega-nav-btn-3-border);
  border-radius: var(--mega-nav-btn-3-radius);
  text-transform: var(--mega-nav-btn-3-text-transform);
  font-weight: 400;
  font-style: italic;
}
.mega-nav__btn--3:hover,
.mega-nav__btn--3:focus {
  background-color: var(--mega-nav-btn-3-hover-bg) !important;
  color: var(--mega-nav-btn-3-hover-text) !important;
  border-color: var(--mega-nav-btn-3-border) !important;
}

/* ------------------------------------------------------------------
   Theme 4 (custom — configure via Customize → Mega Nav → Button Themes)
------------------------------------------------------------------ */
.mega-nav__btn--4 {
  padding: 0.4em 1.1em;
  background-color: var(--mega-nav-btn-4-bg);
  color: var(--mega-nav-btn-4-text) !important;
  border: 2px solid var(--mega-nav-btn-4-border);
  border-radius: var(--mega-nav-btn-4-radius);
  text-transform: var(--mega-nav-btn-4-text-transform);
  font-weight: 700;
}
.mega-nav__btn--4:hover,
.mega-nav__btn--4:focus {
  background-color: var(--mega-nav-btn-4-hover-bg) !important;
  color: var(--mega-nav-btn-4-hover-text) !important;
  border-color: var(--mega-nav-btn-4-border) !important;
}

/* ------------------------------------------------------------------
   Theme 5 (custom — configure via Customize → Mega Nav → Button Themes)
------------------------------------------------------------------ */
.mega-nav__btn--5 {
  padding: 0.4em 1.1em;
  background-color: var(--mega-nav-btn-5-bg);
  color: var(--mega-nav-btn-5-text) !important;
  border: 2px solid var(--mega-nav-btn-5-border);
  border-radius: var(--mega-nav-btn-5-radius);
  text-transform: var(--mega-nav-btn-5-text-transform);
  font-weight: 700;
}
.mega-nav__btn--5:hover,
.mega-nav__btn--5:focus {
  background-color: var(--mega-nav-btn-5-hover-bg) !important;
  color: var(--mega-nav-btn-5-hover-text) !important;
  border-color: var(--mega-nav-btn-5-border) !important;
}

/* ------------------------------------------------------------------
   Theme 6 (custom — configure via Customize → Mega Nav → Button Themes)
------------------------------------------------------------------ */
.mega-nav__btn--6 {
  padding: 0.4em 1.1em;
  background-color: var(--mega-nav-btn-6-bg);
  color: var(--mega-nav-btn-6-text) !important;
  border: 2px solid var(--mega-nav-btn-6-border);
  border-radius: var(--mega-nav-btn-6-radius);
  text-transform: var(--mega-nav-btn-6-text-transform);
  font-weight: 700;
}

/* Desktop padding on the <li> wrapper for each button theme.
   Tablet / mobile overrides are output dynamically by output_css().
   Prefixed with .mega-nav.mega-nav to beat the blanket li { padding: 0 !important } reset. */
.mega-nav.mega-nav .mega-nav__btn-item--1 { padding-top: var(--mega-nav-btn-1-padding-top, 0px) !important; padding-right: var(--mega-nav-btn-1-padding-right, 0px) !important; padding-bottom: var(--mega-nav-btn-1-padding-bottom, 0px) !important; padding-left: var(--mega-nav-btn-1-padding-left, 0px) !important; }
.mega-nav.mega-nav .mega-nav__btn-item--2 { padding-top: var(--mega-nav-btn-2-padding-top, 0px) !important; padding-right: var(--mega-nav-btn-2-padding-right, 0px) !important; padding-bottom: var(--mega-nav-btn-2-padding-bottom, 0px) !important; padding-left: var(--mega-nav-btn-2-padding-left, 0px) !important; }
.mega-nav.mega-nav .mega-nav__btn-item--3 { padding-top: var(--mega-nav-btn-3-padding-top, 0px) !important; padding-right: var(--mega-nav-btn-3-padding-right, 0px) !important; padding-bottom: var(--mega-nav-btn-3-padding-bottom, 0px) !important; padding-left: var(--mega-nav-btn-3-padding-left, 0px) !important; }
.mega-nav.mega-nav .mega-nav__btn-item--4 { padding-top: var(--mega-nav-btn-4-padding-top, 0px) !important; padding-right: var(--mega-nav-btn-4-padding-right, 0px) !important; padding-bottom: var(--mega-nav-btn-4-padding-bottom, 0px) !important; padding-left: var(--mega-nav-btn-4-padding-left, 0px) !important; }
.mega-nav.mega-nav .mega-nav__btn-item--5 { padding-top: var(--mega-nav-btn-5-padding-top, 0px) !important; padding-right: var(--mega-nav-btn-5-padding-right, 0px) !important; padding-bottom: var(--mega-nav-btn-5-padding-bottom, 0px) !important; padding-left: var(--mega-nav-btn-5-padding-left, 0px) !important; }
.mega-nav.mega-nav .mega-nav__btn-item--6 { padding-top: var(--mega-nav-btn-6-padding-top, 0px) !important; padding-right: var(--mega-nav-btn-6-padding-right, 0px) !important; padding-bottom: var(--mega-nav-btn-6-padding-bottom, 0px) !important; padding-left: var(--mega-nav-btn-6-padding-left, 0px) !important; }
.mega-nav__btn--6:hover,
.mega-nav__btn--6:focus {
  background-color: var(--mega-nav-btn-6-hover-bg) !important;
  color: var(--mega-nav-btn-6-hover-text) !important;
  border-color: var(--mega-nav-btn-6-border) !important;
}

/* Back button — hidden on desktop, injected by JS into mobile panels */
.mega-nav__back {
  display: none;
}

/* Back-item <li> wrapper — hidden on desktop */
.mega-nav__back-item {
  display: none;
}

/* "View All" link — hidden on desktop, injected by JS into mobile sub-panels */
.mega-nav__view-all {
  display: none;
}

/* The mobile drill-down @media block is output dynamically by output_css()
   so the breakpoint is configurable via Customize -> Mega Nav -> Breakpoints. */