/*
 * ALKU Mega Menu — Stylesheet
 * All selectors are namespaced with .alku-mega-* to avoid theme conflicts.
 *
 * Breakpoints:
 *   Desktop  ≥ 992px   (hover mega menu)
 *   Mobile   < 992px   (hamburger + accordion)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --alku-red:          #D62128;
  --alku-red-dark:     #c41530;
  --alku-black:        #1a1a1a;
  --alku-gray-dark:    #333333;
  --alku-gray-mid:     #666666;
  --alku-gray-light:   #f4f4f4;
  --alku-white:        #ffffff;
  --alku-border:       #e0e0e0;
  --alku-divider:      #cccccc;

  --alku-nav-height:       64px;
  --alku-panel-width:      825px;   /* max width of the mega dropdown */
  --alku-category-width:   260px;   /* left tab column */
  --alku-transition:       200ms ease;
  --alku-font:             'Poppins', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET / BASE
   ═══════════════════════════════════════════════════════════════════════════ */
.alku-mega-nav *,
.alku-mega-nav *::before,
.alku-mega-nav *::after {
  box-sizing: border-box;
}

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

.alku-mega-nav a,
.alku-mega-nav button {
  font-family: var(--alku-font);
  text-decoration: none;
  cursor:      pointer;
  border:      none;
  background:  transparent;
  padding:     0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP — HORIZONTAL NAV BAR
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {

  /* ── Nav container ─────────────────────────────────────────────────────── */
  .alku-mega-nav {
    position:   relative;
    background: var(--alku-white);
  }

  /* ── Top-level list ────────────────────────────────────────────────────── */
  .alku-mega-menu-list {
    display:         flex;
    align-items:     center;
    gap:             0;
    margin:          0;
    padding:         0;
    list-style:      none;
  }

  /* ── Top-level item ────────────────────────────────────────────────────── */
  .alku-mega-menu-list > .menu-item {
    position:  relative;
  }

  /* ── Top-level link ────────────────────────────────────────────────────── */
  .alku-mega-menu-list > .menu-item > a {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       0 20px;
    height:        var(--alku-nav-height);
    font-size:     16px;
    font-weight:   500;
    color:         var(--alku-black);
    white-space:   nowrap;
    transition:    color var(--alku-transition);
    max-height: 46px;
    border-radius: 8px !important;
  }

  .alku-mega-menu-list > .menu-item > a:hover,
  .alku-mega-menu-list > .menu-item.alku-mega-open > a {
    color: var(--alku-red);
  }

  /* Active / current item */
  .alku-mega-menu-list > .current-menu-item > a,
  .alku-mega-menu-list > .current-menu-ancestor > a {
    color: var(--alku-red);
  }

  /* ── Chevron arrow (pseudo-element on the <a>, no span needed) ─────────── */
  .alku-mega-parent > a::after {
    content:        '';
    display:        inline-block;
    width:          10px;
    height:         10px;
    background:     url('img/arrow.png') center / contain no-repeat;
    transform:      rotate(90deg);
    transition:     transform var(--alku-transition);
    flex-shrink:    0;
  }

  .alku-mega-parent.alku-mega-open > a::after {
    transform: rotate(-90deg);
  }

  /* ── Standard dropdown (non-mega) ──────────────────────────────────────── */
  .alku-mega-menu-list > .menu-item > .sub-menu {
    display:    none;
    position:   absolute;
    top:        100%;
    left:       0;
    background: var(--alku-white);
    border:     1px solid var(--alku-border);
    border-top: 3px solid var(--alku-red);
    min-width:  180px;
    padding:    8px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index:    9999;
  }

  .alku-mega-menu-list > .menu-item:hover > .sub-menu {
    display: block;
  }

  .sub-menu .menu-item a {
    display:    block;
    padding:    10px 20px;
    font-size:  14px;
    color:      var(--alku-gray-dark);
    transition: color var(--alku-transition), background var(--alku-transition);
  }

  .sub-menu .menu-item a:hover {
    color:      var(--alku-red);
    background: var(--alku-gray-light);
  }

  /* ════════════════════════════════════════════════════════════════════════
     MEGA MENU PANEL — shared container
     ════════════════════════════════════════════════════════════════════════ */
  .alku-mega-menu {
    display:    none;
    position:   absolute;
    top:        70px !important;
    left:       0;      /* overridden by JS to align with nav bar */
    z-index:    9999;
    background: var(--alku-white);
    box-shadow: 0 12px 40px rgba(0,0,0,.15);
    min-width:  var(--alku-panel-width);
    animation:  alkuFadeSlide var(--alku-transition) forwards;
  }

  /* CSS :hover is the fallback; JS adds .alku-is-open with a close delay
     so the panel stays visible while the cursor crosses any gap. */
  .alku-mega-parent:hover > .alku-mega-menu,
  .alku-mega-parent.alku-is-open > .alku-mega-menu,
  .alku-mega-parent.alku-mega-open > .alku-mega-menu {
    display: block;
  }

  /* Invisible bridge: extends the hover area downward to fill any gap
     between the <li> bottom and the mega panel top. */
  .alku-mega-parent::after {
    content:  '';
    display:  block;
    position: absolute;
    top:      100%;
    left:     0;
    right:    0;
    height:   24px;
    z-index:  9998;
  }

  .alku-mega-inner {
    display:    flex;
    align-items: stretch;
  }

  @keyframes alkuFadeSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ════════════════════════════════════════════════════════════════════════
     LAYOUT: PANEL-SWITCH  (Business Solutions)
     ════════════════════════════════════════════════════════════════════════ */

  /* Left column wrapper — holds optional header + tab list */
  .alku-mega-cats-col {
    flex:         0 0 var(--alku-category-width);
    width:        var(--alku-category-width);
    background:   #f4f6f8;
    display:      flex;
    flex-direction: column;
  }

  /* Optional title + description above the tab list */
  .alku-mega-cat-header {
    padding:       24px 20px 16px;
    border-bottom: 1px solid var(--alku-border);
  }

  .alku-mega-cat-title {
    font-size:   14px;
    font-weight: 700;
    color:       var(--alku-black);
    margin:      0 0 6px;
    line-height: 1.3;
  }

  .alku-mega-cat-desc {
    font-size:   13px;
    color:       var(--alku-gray-dark);
    margin:      0;
    line-height: 1.5;
    font-style:  italic;
  }

  /* Left — category tabs */
  .alku-mega-categories {
    flex:    1;
    padding: 20px 0;
  }

  .alku-category-item {
    border-left: 3px solid transparent;
    transition:  border-color var(--alku-transition), background var(--alku-transition);
  }

  /*.alku-category-item.alku-active {
    border-left-color: var(--alku-red);
    background:        var(--alku-white);
  }*/

  .alku-category-item button {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     18px 20px 18px 16px;
    font-size:   16px;
    font-weight: 400;
    color:       var(--alku-gray-dark);
    text-align:  left;
    background:  transparent;
    border:      none;
    cursor:      pointer;
    transition:  color var(--alku-transition);
    line-height: 1.3;
  }

  .alku-category-item button:hover {
    color: var(--alku-black);
  }

  .alku-category-item.alku-active button {
    color:       var(--alku-black);
    font-weight: 600;
  }

  /* Right-pointing arrow — pseudo-element on button, no span needed */
  .alku-category-item button::before {
    content:          '';
    display:          inline-block;
    flex-shrink:      0;
    width:            10px;
    height:           16px;
    background:       url('img/arrow.png') center / contain no-repeat;
    opacity:          0.5;
    transition:       opacity var(--alku-transition), filter var(--alku-transition);
  }

  .alku-category-item.alku-active button::before,
  .alku-category-item button:hover::before {
    opacity: 1;
    filter: invert(18%) sepia(96%) saturate(2600%) hue-rotate(345deg) brightness(90%);
  }

  /* Right — content panels */
  .alku-mega-panels {
    flex:       1;
    position:   relative;
    padding:    40px 48px !important;
    min-width:  0;
    text-align: left;
  }

  .alku-panel {
    display: none;
  }

  .alku-panel.alku-active {
    display:   block;
    animation: alkuFadeSlide var(--alku-transition) forwards;
  }

  /* ════════════════════════════════════════════════════════════════════════
     LAYOUT: COLUMNS  (For Job Seekers, About ALKU, Insights & Resources)
     ════════════════════════════════════════════════════════════════════════ */
  .alku-mega-columns {
    display: flex;
    flex:    1;
    gap:     0;
    padding: 0;
  }

  .alku-mega-column {
    flex:           1;
    display:        flex;
    flex-direction: column;
    padding:        28px 28px;
    border-right:   1px solid var(--alku-border);
    text-align:     left;
  }

  .alku-mega-column:first-child {
    border-right: none;
    padding: 40px 20px 40px 40px;
  }

  .alku-mega-column:nth-child(2) {
    border-right: none;
    padding: 40px 20px 40px 20px;
  }

  .alku-mega-column:last-child {
    border-right: none;
    padding: 40px 40px 40px 20px;
  }


  /* Column CTA — pinned to bottom, styled to Figma spec */
  .alku-column-cta {
    display:         inline-flex !important;
    align-items:     center;
    justify-content: center;
    align-self:      flex-start;
    margin-top:      auto;
    margin-bottom:   0;
    padding:         9px 15px !important;
    min-width:       150px;
    min-height:      44px;
    border-radius:   5px !important;
    font-size:       14px;
    gap:             10px;
    background:     #d62128 !important;
  }

  /* ════════════════════════════════════════════════════════════════════════
     SHARED PANEL / COLUMN CONTENT STYLES
     ════════════════════════════════════════════════════════════════════════ */

  /* Heading — italic bold to match Figma */
  .alku-panel-title,
  .alku-column-title {
    font-size:   20px;
    color:       var(--alku-black);
    margin:      0 0 14px;
    line-height: 1.3;
    text-align:  left;
  }

  .alku-panel-title {
   font-style:  italic;
   font-weight: 600;
   border-bottom: 1px solid #1111114D;
   padding-bottom: 24px;
   margin-bottom: 0;
  }

  .alku-column-title {
    font-weight: 600;
    margin:      0 0 6px;
  }

  .alku-column-subtitle {
    font-size:   16px;
    font-weight: 300;
    color:       var(--alku-gray-mid);
    font-style:  italic;
    line-height: 1.5;
    text-align:  left;
  }

  /* Column background image sits behind content */
  .alku-mega-column {
    background-repeat:   no-repeat;
    background-size:     cover;
    background-position: center;
  }

  /* Sub-heading (description) */
  .alku-panel-description,
  .alku-column-description {
    font-size:   14px;
    color:       var(--alku-gray-mid);
    margin:      0 0 12px;
    font-style:  italic;
    line-height: 1.5;
    text-align:  left;
  }

  /* Horizontal rule */
  .alku-panel-divider,
  .alku-column-divider {
    border:     none;
    margin:     0 0 20px;
  }

  /* Link list */
  .alku-panel-links,
  .alku-column-links {
    list-style: none;
    margin:     0 0 16px;
    padding:    0;
    flex:       1;
  }

  .alku-panel-links li,
  .alku-column-links li {
    margin: 0;
  }

  .alku-panel-links li a,
  .alku-column-links li a {
    display:         block;
    padding:         13px 0;
    font-size:       16px;
    color:           var(--alku-gray-dark);
    text-decoration: none;
    transition:      color var(--alku-transition);
    line-height:     1.3;
    text-align:      left;
    white-space:     nowrap;
  }

  .alku-panel-links li a:hover,
  .alku-column-links li a:hover {
    color:           var(--alku-red);
    text-decoration: none;
  }

  /* Multi-column link groups inside a panel */
  .alku-link-groups {
    display: grid;
    gap:     24px;
    margin-bottom: 16px;
  }

  .alku-link-cols-2 {
    grid-template-columns: 1fr 1fr;
  }

  .alku-link-cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .alku-link-group-heading {
    display:        block;
    font-size:      16px;
    font-weight:    600;
    text-transform: none;
    letter-spacing: 0;
    color:          var(--alku-black);
    margin-bottom:  16px;
    text-align:     left;
  }

  .alku-link-group .alku-panel-links,
  .alku-link-group .alku-column-links {
    margin-bottom: 0;
  }

  /* Red highlighted links (matches Figma accents) */
  .alku-link-highlight {
    color: var(--alku-red) !important;
  }

  /* CTA Buttons */
  .alku-panel-cta,
  .alku-column-cta {
    display:         inline-block;
    margin-top:      20px;
    padding:         10px 22px;
    background:      var(--alku-red);
    color:           var(--alku-white) !important;
    font-size:       16px;
    font-weight:     700;
    border-radius:   3px;
    text-decoration: none;
    transition:      background var(--alku-transition);
    white-space:     nowrap;
  }

  .alku-panel-cta:hover,
  .alku-column-cta:hover {
    background: var(--alku-red-dark);
  }

  /* ── Nav CTA button ───────────────────────────────────────────────────── */
  .alku-nav-cta-item {
    margin-left: 8px;
  }

  .alku-nav-cta {
    display:         inline-flex !important;
    align-items:     center !important;
    padding:         10px 22px !important;
    background:      var(--alku-red) !important;
    color:           var(--alku-white) !important;
    font-size:       14px !important;
    font-weight:     600 !important;
    border-radius:   3px !important;
    text-decoration: none !important;
    white-space:     nowrap !important;
    transition:      background var(--alku-transition) !important;
    line-height:     1 !important;
    border:          none !important;
    box-shadow:      none !important;
    width: 252px;
    justify-content: center;
  }

  .alku-nav-cta:hover {
    background:      var(--alku-red-dark) !important;
    color:           var(--alku-white) !important;
    text-decoration: none !important;
  }

  /* ── Mobile toggle hidden on desktop ──────────────────────────────────── */
  .alku-mobile-toggle {
    display: none;
  }

  .alku-mobile-overlay {
    display: none;
  }

} /* end @media ≥992px */

/* ── Mobile-only elements: shown on mobile, hidden on desktop ─────────── */
@media (min-width: 992px) {
  .alku-mobile-nav-header,
  .alku-mobile-nav-footer,
  .alku-mobile-utility-list,
  .alku-mobile-cta           { display: none !important; }
}

/* ── Utility bar: hidden on mobile (Locations/Contact live in the drawer) */
@media (max-width: 991px) {
  .alku-utility-bar          { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE  < 992px  — hamburger + slide-in drawer + accordion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Hamburger button (sits in the main header bar) ───────────────────── */
  .alku-mobile-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    padding:         8px;
    margin-left:     auto; /* push to right end of the header bar */
    flex-shrink:     0;
    /* No elevated z-index — overlay (9998) will cover it when nav opens */
  }

  .alku-hamburger-icon {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    width:           24px;
    height:          18px;
  }

  .alku-hamburger-icon span {
    display:          block;
    width:            100%;
    height:           2px;
    background:       var(--alku-black);
    border-radius:    2px;
    transition:       transform 250ms ease, opacity 250ms ease;
    transform-origin: center;
  }

  /* ── Overlay ───────────────────────────────────────────────────────────── */
  .alku-mobile-overlay {
    display:        block;
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,.5);
    z-index:        9998;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 250ms ease;
  }

  .alku-mobile-overlay.alku-visible {
    opacity:        1;
    pointer-events: auto;
  }

  /* ── Nav drawer (slides in from right) ────────────────────────────────── */
  /* overflow:hidden on the outer panel — only the menu list scrolls,
     so the header and footer always remain visible. */
  .alku-mega-nav {
    display:        flex;
    flex-direction: column;
    position:       fixed;
    top:            0;
    right:          0;
    bottom:         0;
    width:          100%;
    background:     var(--alku-white);
    z-index:        9999;
    overflow:       hidden;
    transform:      translateX(100%);
    transition:     transform 280ms cubic-bezier(.4,0,.2,1);
    box-shadow:     -4px 0 24px rgba(0,0,0,.18);
  }

  /* Offset for WordPress admin bar */
  .admin-bar .alku-mega-nav { top: 46px; }
  @media screen and (min-width: 783px) {
    .admin-bar .alku-mega-nav { top: 32px; }
  }

  .alku-mega-nav.alku-mobile-open {
    transform: translateX(0);
  }

  /* ── Mobile nav header: logo + ✕ close button ─────────────────────────── */
  .alku-mobile-nav-header {
    display:         flex !important; /* override any theme rule */
    align-items:     center;
    justify-content: space-between;
    padding:         14px 20px;
    border-bottom:   1px solid var(--alku-border);
    flex-shrink:     0;
    background:      var(--alku-white);
    /* No position:sticky — unreliable inside CSS-transformed containers */
  }

  .alku-mobile-nav-logo-link {
    display:         flex;
    align-items:     center;
    text-decoration: none;
  }

  .alku-mobile-nav-logo {
    display:   block;
    width:     auto;
    max-width: 140px;
  }

  .alku-mobile-close {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    color:           var(--alku-gray-dark);
    padding:         0;
    flex-shrink:     0;
    transition:      color var(--alku-transition);
  }

  .alku-mobile-close:hover { color: var(--alku-black); }

  /* ── Top-level list — this is the ONLY scrollable region ──────────────── */
  /* min-height:0 overrides the default min-height:auto on flex items,
     allowing the list to shrink below its content so the footer
     is always visible regardless of how many items are present. */
  .alku-mega-menu-list {
    display:    block;
    padding:    0;
    margin:     0;
    list-style: none;
    flex:       1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ── Top-level items ───────────────────────────────────────────────────── */
  .alku-mega-menu-list > .menu-item {
    border-bottom: 1px solid var(--alku-border);
  }

  .alku-mega-menu-list > .menu-item > a {
    display:         flex;
    align-items:     center;
    justify-content: flex-start; /* arrow left, text follows */
    gap:             10px;
    padding:         16px 20px;
    font-size:       15px;
    font-weight:     600;
    color:           var(--alku-black);
    text-decoration: none;
  }

  .alku-mega-menu-list > .menu-item.current-menu-item > a,
  .alku-mega-menu-list > .menu-item.current-menu-ancestor > a {
    color: var(--alku-red);
  }

  /* ── Chevron: pseudo-element on <a>, sits before the label ──────────── */
  .alku-mega-parent > a::before {
    content:          '';
    display:          inline-block;
    flex-shrink:      0;
    width:            10px;
    height:           10px;
    margin-right:     6px;
    background:       url('img/arrow.png') center / contain no-repeat;
    transform:        rotate(0deg);
    transition:       transform var(--alku-transition);
  }

  .alku-mega-parent.alku-mobile-open > a::before {
    transform: rotate(90deg);
  }

  /* ── Mega panel (accordion expand) ────────────────────────────────────── */
  .alku-mega-menu {
    display:    none;
    background: var(--alku-gray-light);
    border-top: 1px solid var(--alku-border);
  }

  .alku-mega-parent.alku-mobile-open > .alku-mega-menu {
    display: block;
  }

  .alku-mega-inner {
    display: block;
  }

  /* ── Panel-switch: reset column wrapper + flat list ────────────────────── */
  .alku-mega-cats-col {
    flex:      none;
    width:     auto;
    border-right: none;
  }

  .alku-mega-cat-header {
    padding:       16px 20px 12px;
    border-bottom: 1px solid var(--alku-border);
  }

  .alku-mega-categories {
    display:    block;
    padding:    0;
    margin:     0;
    list-style: none;
  }

  .alku-category-item {
    border-bottom: 1px solid var(--alku-border);
  }

  .alku-category-item:last-child {
    border-bottom: none;
  }

  .alku-category-item button {
    display:    block;
    width:      100%;
    padding:    13px 28px;
    font-size:  14px;
    color:      var(--alku-gray-dark);
    text-align: left;
    background: transparent;
    border:     none;
    cursor:     pointer;
  }

  .alku-category-item.alku-mobile-cat-open button {
    color:       var(--alku-red);
    font-weight: 600;
  }

  .alku-category-arrow { display: none; }

  .alku-panel {
    display:    none;
    padding:    12px 28px 16px;
    background: var(--alku-white);
    border-top: 1px solid var(--alku-border);
  }

  .alku-panel.alku-mobile-panel-open { display: block; }

  /* ── Columns: stacked ─────────────────────────────────────────────────── */
  .alku-mega-columns { display: block; padding: 0; }

  .alku-mega-column,
  .alku-mega-column:first-child,
  .alku-mega-column:nth-child(2),
  .alku-mega-column:last-child {
    padding:       20px;
    border-bottom: 1px solid var(--alku-border);
  }

  .alku-mega-column:last-child { border-bottom: none; }

  /* ── Shared panel/column content ──────────────────────────────────────── */
  .alku-panel-title,
  .alku-column-title {
    font-size:   14px;
    font-weight: 600;
    color:       var(--alku-black);
    margin:      0 0 8px;
  }

  .alku-column-subtitle {
    font-size:  13px;
    color:      var(--alku-gray-mid);
    font-style: italic;
    margin:     0 0 10px;
  }

  .alku-panel-description,
  .alku-column-description {
    font-size:  13px;
    color:      var(--alku-gray-mid);
    margin:     0 0 6px;
    font-style: italic;
  }

  .alku-panel-divider,
  .alku-column-divider {
    border:     none;
    margin:     0 0 10px;
  }

  .alku-panel-links,
  .alku-column-links {
    list-style: none;
    margin:     0 0 10px;
    padding:    0;
  }

  .alku-panel-links li a,
  .alku-column-links li a {
    display:   block;
    padding:   8px 0;
    font-size: 14px;
    color:     var(--alku-gray-dark);
  }

  .alku-link-groups {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin-bottom:  10px;
  }

  .alku-link-group-heading {
    display:       block;
    font-size:     16px;
    font-weight:   600;
    color:         var(--alku-black);
    margin-bottom: 8px;
  }

  .alku-link-group .alku-panel-links,
  .alku-link-group .alku-column-links { margin-bottom: 0; }

  .alku-link-highlight { color: var(--alku-red) !important; }

  .alku-panel-cta,
  .alku-column-cta {
    display:       inline-block;
    margin-top:    8px;
    padding:       10px 20px;
    background:    var(--alku-red);
    color:         var(--alku-white) !important;
    font-size:     13px;
    font-weight:   600;
    border-radius: 3px;
  }

  /* ── Standard submenu ─────────────────────────────────────────────────── */
  .sub-menu {
    display:    none;
    background: var(--alku-gray-light);
    border-top: 1px solid var(--alku-border);
  }

  .menu-item-has-children.alku-mobile-open > .sub-menu { display: block; }

  .sub-menu .menu-item a {
    display:       block;
    padding:       12px 28px;
    font-size:     14px;
    color:         var(--alku-gray-dark);
    border-bottom: 1px solid var(--alku-border);
  }

  /* ── Mobile nav footer: utility links + CTA ───────────────────────────── */
  /* flex-shrink:0 keeps the footer always visible; the menu list above scrolls */
  .alku-mobile-nav-footer {
    display:        flex;
    flex-direction: column;
    flex-shrink:    0;
    border-top:     1px solid var(--alku-border);
    padding-bottom: 20px;
  }

  .alku-mobile-utility-list {
    display:        flex !important;
    flex-direction: column;
    list-style:     none !important;
    margin:         0 !important;
    padding:        0 !important;
  }

  /* Utility links — identical visual treatment to top-level menu items */
  .alku-mobile-utility-link {
    display:         flex !important;
    align-items:     center !important;
    gap:             10px !important;
    padding:         16px 20px !important;
    font-size:       15px !important;
    font-weight:     600 !important;
    color:           var(--alku-black) !important;
    text-decoration: none !important;
    border-bottom:   1px solid var(--alku-border) !important;
    background:      transparent !important;
    box-shadow:      none !important;
    line-height:     1.3 !important;
  }

  .alku-mobile-utility-list li:last-child .alku-mobile-utility-link {
    border-bottom: none !important;
  }

  .alku-mobile-utility-link .alku-utility-icon {
    width:       14px !important;
    height:      14px !important;
    flex-shrink: 0 !important;
    color:       var(--alku-black) !important;
  }

  /* CTA — full-width red button, padded to match the side margins */
  .alku-mobile-cta {
    display:         block !important;
    margin:          16px 20px 0 !important;
    padding:         14px 20px !important;
    background:      var(--alku-red) !important;
    color:           var(--alku-white) !important;
    font-size:       15px !important;
    font-weight:     600 !important;
    text-align:      center !important;
    text-decoration: none !important;
    border-radius:   3px !important;
    border:          none !important;
    box-sizing:      border-box;
    transition:      background var(--alku-transition);
  }

  .alku-mobile-cta:hover { background: var(--alku-red-dark) !important; }

  /* ── Nav CTA item hidden on mobile (replaced by footer CTA) ──────────── */
  .alku-nav-cta-item { display: none; }

} /* end @media <992px */

/* ═══════════════════════════════════════════════════════════════════════════
   CLICK TRIGGER MODE  (added by JS when trigger = 'click')
   Overrides CSS :hover so only JS-driven .alku-click-open shows the panel.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {

  .alku-trigger-click .alku-mega-parent:hover > .alku-mega-menu {
    display: none;
  }

  .alku-trigger-click .alku-mega-parent.alku-click-open > .alku-mega-menu {
    display: block;
  }

  .alku-trigger-click .alku-mega-menu-list > .menu-item:hover > .sub-menu {
    display: none;
  }

  .alku-trigger-click .alku-mega-menu-list > .menu-item.alku-click-open > .sub-menu {
    display: block;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   FULL SITE HEADER  ([alku_header] shortcode / alku_render_full_header())
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base reset ─────────────────────────────────────────────────────────── */
.alku-site-header *,
.alku-site-header *::before,
.alku-site-header *::after { box-sizing: border-box; }

.alku-site-header ul {
  margin:     0;
  padding:    0;
  list-style: none;
  justify-content: flex-end;
}

/* ── Outer wrapper ──────────────────────────────────────────────────────── */
.alku-site-header {
  position:   relative;
  z-index:    1000;
  margin-top: 0 !important;
}

.alku-site-header.is-sticky {
  position: sticky;
  top:      0;
}

/* WordPress admin bar pushes body down 32px (46px on small screens).
   Shift the sticky header so it sits flush under the admin bar. */
.admin-bar .alku-site-header.is-sticky {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .alku-site-header.is-sticky {
    top: 46px;
  }
}

.alku-site-header.is-scrolled .alku-header-main {
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
}

/* ── Utility bar ────────────────────────────────────────────────────────── */
.alku-utility-bar { background: var(--alku-black); }

.alku-utility-inner {
  margin:          0 auto;
  padding:         0;
  display:         flex;
  justify-content: flex-end;
}

.alku-utility-list {
  display:     flex;
  align-items: center;
}

.alku-utility-item { margin: 0; }

.alku-utility-link {
  display:         flex;
  align-items:     center;
  gap:             6px;
  padding:         8px 0 8px 14px;
  font-size:       10px;
  font-weight:     600;
  color:           rgba(255,255,255,.8);
  text-decoration: none;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  font-family:     var(--alku-font);
  white-space:     nowrap;
  transition:      color 150ms;
  line-height:     1;
  text-align:      left;
}

.alku-utility-link:hover,
.alku-utility-link[aria-expanded="true"] { color: #ffffff; }

.alku-utility-icon {
  width:       13px;
  height:      13px;
  flex-shrink: 0;
}

/* ── Main nav bar ───────────────────────────────────────────────────────── */
.alku-header-main {
  background:    var(--alku-white);
  border-bottom: 1px solid var(--alku-border);
  position:      relative; /* mega panels anchor here for full-width drops */
}

.alku-header-inner {
  justify-content: space-between;
  margin:      0 auto;
  padding:     0;
  display:     flex;
  align-items: center;
  height:      var(--alku-nav-height);
  gap:         16px;
}

/* ── Desktop-only: nav positioning + mega panel sizing ─────────────────
   These MUST live inside a min-width query so mobile position:fixed
   (set by the mobile section) isn't overridden by higher specificity. */
@media (min-width: 992px) {
  /* Nav sits statically in the flex row; panels anchor to .alku-header-main */
  .alku-header-inner .alku-mega-nav {
    flex:      1;
    min-width: 0;
    position:  static;
  }

  /* Mega panels: fixed width; left is set by JS to keep them centered */
  .alku-header-main .alku-mega-menu {
    top:       var(--alku-nav-height);
    left:      0;
    width:     var(--alku-panel-width) !important;
    max-width: var(--alku-panel-width) !important;
  }
}

/* ── Logo ───────────────────────────────────────────────────────────────── */
.alku-header-logo-link {
  display:         flex;
  align-items:     center;
  flex-shrink:     0;
  text-decoration: none;
}

.alku-header-logo {
  display:   block;
  width:     auto;
  max-width: 200px;   /* guard against oversized SVGs with no intrinsic size */
  flex-shrink: 0;
}

/* ── Search overlay ─────────────────────────────────────────────────────── */
.alku-search-overlay {
  position:       absolute;
  top:            100%;
  left:           0;
  right:          0;
  background:     var(--alku-white);
  border-bottom:  1px solid var(--alku-border);
  box-shadow:     0 8px 24px rgba(0,0,0,.12);
  z-index:        9997;
  opacity:        0;
  transform:      translateY(-6px);
  pointer-events: none;
  transition:     opacity 180ms ease, transform 180ms ease;
}

.alku-search-overlay.is-open {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

.alku-search-overlay-inner {
  margin:  0 auto;
  padding: 16px 24px;
}

.alku-search-form {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.alku-search-icon-wrap {
  display:     flex;
  align-items: center;
  color:       var(--alku-gray-mid);
  flex-shrink: 0;
}

.alku-search-icon-wrap svg { width: 20px; height: 20px; }

.alku-search-input {
  flex:        1;
  border:      none;
  outline:     none;
  font-size:   18px;
  font-family: var(--alku-font);
  color:       var(--alku-black);
  background:  transparent;
  padding:     8px 0;
  text-align:  left;
}

.alku-search-input::placeholder { color: var(--alku-gray-mid); }

.alku-search-close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  color:           var(--alku-gray-mid);
  flex-shrink:     0;
  padding:         0;
  transition:      color 150ms;
}

.alku-search-close:hover { color: var(--alku-black); }
.alku-search-close svg   { width: 14px; height: 14px; }

.alku-search-submit {
  flex-shrink:   0;
  padding:       10px 24px;
  background:    var(--alku-red);
  color:         var(--alku-white);
  border:        none;
  border-radius: 3px;
  font-size:     14px;
  font-weight:   600;
  font-family:   var(--alku-font);
  cursor:        pointer;
  transition:    background 150ms;
}

.alku-search-submit:hover { background: var(--alku-red-dark); }

/* Mobile adjustments for the search overlay */
@media (max-width: 991px) {
  .alku-search-overlay {
    position:   relative;
    top:        auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
    display:    none;
    opacity:    1;
    transform:  none;
    transition: none;
  }

  .alku-search-overlay.is-open { display: block; }

  .alku-search-input   { font-size: 15px; }
  .alku-search-submit  { padding: 8px 16px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTICE (admin only, no menu set)
   ═══════════════════════════════════════════════════════════════════════════ */
.alku-mega-menu-notice {
  padding:       12px 16px;
  background:    #fff3cd;
  border:        1px solid #ffc107;
  border-radius: 4px;
  font-size:     13px;
  color:         #856404;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE-SPECIFIC OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Custom width for specific mega menus */
#menu-item-12012 .alku-mega-menu {
  max-width: 670px !important;
  min-width: 670px !important;
}

#menu-item-12013 .alku-mega-menu {
  max-width: 767px !important;
  min-width: 767px !important;
}

#menu-item-12014 .alku-mega-menu {
  max-width: 661px !important;
  min-width: 661px !important;
}

/* Custom background size */
#menu-item-12012 .alku-mega-menu .alku-mega-column {
  background-size: 96px !important;
  background-position: right 60% !important;
}

/* Custom width for columns */
#menu-item-12003 .alku-mega-cats-col:first-child {
  flex: 0 0 350px;
}

#menu-item-12013 .alku-mega-column:first-child {
  flex: 0 0 210px;
}

#menu-item-12014 .alku-mega-column:first-child {
  flex: 0 0 200px;
}

#menu-item-12014 .alku-mega-column:nth-child(2) {
  flex: 0 0 240px;
}

/* Custom mega menu positioning */
#menu-item-12003 .alku-mega-menu {
  left: 15px !important;
}

#menu-item-12013 .alku-mega-menu {
  left: -360px !important;
}

/* Custom column padding */
#menu-item-12012 .alku-mega-column:last-child {
  padding: 40px;
}

ul.alku-mega-categories {
  padding: 40px;
}

@media (max-width: 991px) {
  ul.alku-mega-categories {
    padding: 20px;
  }

  .alku-category-item button {
    padding: 13px 0;
  }

  #menu-item-12012 .alku-mega-column:last-child {
    padding: 20px;
  }

  #menu-item-12012 .alku-mega-menu .alku-mega-column {
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  .alku-category-item {
    border-bottom: none;
  }

  #menu-item-12012 .alku-column-cta {
    display: none;
  }
}