/* ═══════════════════════════════════════════════════════════
   ALLEGORY NAV STYLE v1.5.0
   
   CHANGES v1.4.0 → v1.5.0:
   - §4: Desktop dropdown padding reduced so submenu text 
         aligns flush-left with parent nav text
   - §5: Mobile drawer REWRITTEN using #mobile-menu selector
         (confirmed working pattern via Karada House reference)
         Centered layout, SA teal branding, large font
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
    --sa-teal-main:  #005555;
    --sa-teal-mid:   #007070;
    --sa-teal-light: #249ea0;
    --sa-orange-main:#fd5901;
    --sa-white:      #ffffff;
    --sa-radius:     6px;

    --sa-underline-height: 4px;
    --sa-underline-offset: 4px;
    --sa-underline-color:  var(--sa-white);
    --sa-underline-speed:  0.3s;
}


/* ═══════════════════════════════════════════════════════════
   §0  KADENCE RESET – Kill all built-in nav decoration
   ═══════════════════════════════════════════════════════════ */

.header-navigation[class*="header-navigation-style-underline"] .header-menu-container.primary-menu-container > ul > li > a:after {
    display: none !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a,
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus,
.main-navigation .primary-menu-container > ul > li.menu-item > a:active,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current_page_parent > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current_page_ancestor > a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a::before {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   §1  DROPDOWN ARROW TOGGLE – Collapse to zero width
   ═══════════════════════════════════════════════════════════ */

.main-navigation .primary-menu-container > ul > li.menu-item > a .dropdown-nav-toggle,
.main-navigation .primary-menu-container > ul > li.menu-item > a .dropdown-nav-special-toggle {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a .nav-drop-title-wrap {
    display: inline !important;
}


/* ═══════════════════════════════════════════════════════════
   §2  DESKTOP UNDERLINE – Center-out, square corners
   ═══════════════════════════════════════════════════════════ */

.main-navigation .primary-menu-container > ul > li.menu-item > a {
    position: relative;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a .sa-nav-text {
    display: inline-block;
    position: relative;
}

/* Center-out underline */
.main-navigation .primary-menu-container > ul > li.menu-item > a .sa-nav-text::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(-1 * var(--sa-underline-offset));
    width: 0;
    height: var(--sa-underline-height);
    background-color: var(--sa-underline-color);
    border-radius: 0;
    transition: width var(--sa-underline-speed) ease;
    pointer-events: none;
}

/* Hover */
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover .sa-nav-text::after,
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus .sa-nav-text::after {
    width: 100%;
}

/* Current page / ancestor */
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a .sa-nav-text::after,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a .sa-nav-text::after,
.main-navigation .primary-menu-container > ul > li.menu-item.current_page_parent > a .sa-nav-text::after,
.main-navigation .primary-menu-container > ul > li.menu-item.current_page_ancestor > a .sa-nav-text::after {
    width: 100%;
}

/* Prevent false positive on href="#" items */
.main-navigation .primary-menu-container > ul > li.menu-item-type-custom.menu-item-object-custom[class*="current-menu-item"] > a[href="#"] .sa-nav-text::after {
    width: 0;
}
.main-navigation .primary-menu-container > ul > li.menu-item-type-custom.menu-item-object-custom[class*="current-menu-item"] > a[href="#"]:hover .sa-nav-text::after {
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════
   §3  FALLBACK – If sa-nav-text span doesn't exist
   ═══════════════════════════════════════════════════════════ */

.main-navigation .primary-menu-container > ul > li.menu-item > a:not(:has(.sa-nav-text)) {
    display: inline-flex;
    position: relative;
    width: fit-content;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:not(:has(.sa-nav-text))::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(-1 * var(--sa-underline-offset));
    width: 0;
    height: var(--sa-underline-height);
    background-color: var(--sa-underline-color);
    border-radius: 0;
    transition: width var(--sa-underline-speed) ease;
    pointer-events: none;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:not(:has(.sa-nav-text)):hover::after {
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════
   §4  DESKTOP SUBMENU DROPDOWN
   
   v1.5.0: Submenu text aligns flush-left with parent text.
   Padding reduced from 24px to 0. The submenu container 
   positions itself under the parent <li>, so the text 
   starts at the same X as the parent link text.
   ═══════════════════════════════════════════════════════════ */

/* Container */
.header-navigation .header-menu-container ul ul.sub-menu {
    background: var(--sa-teal-main) !important;
    border-radius: 0 0 var(--sa-radius) var(--sa-radius) !important;
    overflow: hidden;
    animation: sa-dropdown-in 0.25s ease forwards;
    margin-left: 0 !important;
    padding: 4px 0 !important;
}

@keyframes sa-dropdown-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Submenu items — minimal horizontal padding for text alignment */
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 18px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item.current-menu-item > a {
    background: var(--sa-teal-mid) !important;
    color: var(--sa-white) !important;
    padding: 10px 12px !important;
}

/* Kill underlines on submenu items */
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a::after,
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a::before,
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a .sa-nav-text::after {
    display: none !important;
}

/* Submenu separator lines */
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
}
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item:last-child {
    border-bottom: none !important;
}


/* ═══════════════════════════════════════════════════════════
   §5  MOBILE DRAWER – Using #mobile-menu
   
   v1.5.0: Complete rewrite targeting the <ul> ID directly,
   following the proven Karada House / Kadence pattern.
   Centered layout with Studio Allegory teal branding.
   ═══════════════════════════════════════════════════════════ */

/* ── 5a. Drawer background ── */
#mobile-drawer,
#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-content {
    background-color: var(--sa-teal-main) !important;
}

#mobile-drawer .drawer-header .drawer-toggle {
    color: var(--sa-white) !important;
}

/* ── 5b. Menu container – centered ── */
#mobile-menu,
#mobile-menu.menu {
    text-align: center !important;
}

#mobile-menu > li {
    text-align: center !important;
}

/* ── 5c. Top-level links ── */
#mobile-menu > li > a,
#mobile-menu > li > .drawer-nav-drop-wrap {
    justify-content: center !important;
}

#mobile-menu > li > a,
#mobile-menu > li > .drawer-nav-drop-wrap > a {
    color: var(--sa-white) !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    padding-top: 0.6em !important;
    padding-bottom: 0.6em !important;
}

/* ── 5d. Dropdown toggle – styled, arrow hidden ── */
#mobile-menu > li.menu-item-has-children .drawer-sub-toggle {
    border: none !important;
    border-left: none !important;
}

#mobile-menu > li.menu-item-has-children .drawer-sub-toggle svg {
    display: none !important;
}

/* ── 5d-ii. Active/open state – persistent highlight ── */
#mobile-menu > li.menu-item-has-children.sa-submenu-open > .drawer-nav-drop-wrap {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ── 5d-ii. Kill border-left on mobile items ── */
#mobile-menu > li,
#mobile-menu > li > a,
#mobile-menu > li > .drawer-nav-drop-wrap,
#mobile-menu > li > .drawer-nav-drop-wrap > a,
#mobile-menu .sub-menu li,
#mobile-menu .sub-menu li a {
    border-left: none !important;
}

/* ── 5e. Submenu items – centered ── */
#mobile-menu .sub-menu {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

#mobile-menu .sub-menu li {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
}

#mobile-menu .sub-menu li a {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#mobile-menu .sub-menu li a:hover {
    color: var(--sa-white) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ── 5f. Separators ── */
#mobile-menu > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
#mobile-menu > li:last-child {
    border-bottom: none !important;
}

/* ── 5g. Kill underline animations in mobile ── */
#mobile-menu .sa-nav-text::after,
#mobile-drawer .sa-nav-text::after {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   §6  ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

/* Desktop focus */
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus-visible {
    outline: 2px solid var(--sa-white);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Submenu focus */
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a:focus-visible {
    outline: 2px solid var(--sa-orange-main);
    outline-offset: -2px;
}

/* Mobile focus */
#mobile-drawer a:focus-visible,
#mobile-drawer button:focus-visible,
#mobile-menu a:focus-visible,
#mobile-menu button:focus-visible {
    outline: 2px solid var(--sa-teal-light) !important;
    outline-offset: 2px !important;
}