/**
 * ENNU Navigation System - Luxury Gold/Navy Theme
 * Matching ENNU Public Booking Kiosk Design
 * Version: 4.2.0 - Faster transitions for snappier dropdown close
 *
 * Design System: Luxury Gold/Navy Kiosk Theme
 * Font: Josefin Sans
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES - Luxury Gold/Navy Theme
   Matching ennu-public-booking/assets/css/public-booking.css
   ========================================================================== */
:root {
    /* Primary Brand - Luxury Gold */
    --nav-gold: #C9A962;
    --nav-gold-light: #E5D4A1;
    --nav-gold-dark: #A68B4B;
    --nav-gold-gradient: linear-gradient(135deg, #C9A962 0%, #E5D4A1 50%, #C9A962 100%);
    
    /* Secondary - Deep Navy */
    --nav-navy: #1A2744;
    --nav-navy-light: #2D3E5F;
    --nav-navy-dark: #0F1829;
    
    /* Neutrals - Warm Cream */
    --nav-cream: #FAF8F5;
    --nav-white: #FFFFFF;
    --nav-charcoal: #2C3E50;
    --nav-slate: #5D6D7E;

    /* Semantic */
    --nav-success: #2E7D5A;
    --nav-success-light: #E8F5EE;
    --nav-error: #B8505A;
    --nav-error-light: #FDEDEF;
    
    /* Text */
    --nav-text: var(--nav-navy);
    --nav-text-secondary: var(--nav-charcoal);
    --nav-text-muted: var(--nav-slate);
    --nav-text-placeholder: #A0AEC0;
    
    /* Borders */
    --nav-border: rgba(201, 169, 98, 0.2);
    --nav-border-strong: rgba(201, 169, 98, 0.4);
    --nav-border-hairline: 1px solid rgba(201, 169, 98, 0.2);
    
    /* Layout */
    --nav-radius-sm: 10px;
    --nav-radius-md: 12px;
    --nav-radius-lg: 16px;
    --nav-radius-xl: 20px;
    --nav-radius-full: 9999px;
    
    /* Shadows - Luxury Gold Theme */
    --nav-shadow-subtle: 0 1px 3px rgba(26, 39, 68, 0.04);
    --nav-shadow-card: 0 4px 16px rgba(26, 39, 68, 0.06);
    --nav-shadow-elevated: 0 8px 32px rgba(26, 39, 68, 0.10);
    --nav-shadow-gold: 0 4px 20px rgba(201, 169, 98, 0.25);
    --nav-shadow-gold-hover: 0 8px 32px rgba(201, 169, 98, 0.4);
    --nav-shadow-focus: 0 0 0 4px rgba(201, 169, 98, 0.15);
    --nav-shadow-emboss: 
        0 1px 1px rgba(26, 39, 68, 0.04),
        0 2px 4px rgba(26, 39, 68, 0.04),
        0 4px 8px rgba(26, 39, 68, 0.04),
        0 8px 16px rgba(26, 39, 68, 0.03);

    /* Animation - Snappy transitions for responsive feel */
    --nav-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --nav-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --nav-ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-duration-fast: 100ms;
    --nav-duration-normal: 150ms;
    --nav-duration-smooth: 200ms;

    /* Typography - Josefin Sans */
    --nav-font: 'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --nav-font-size-sm: 13px;
    --nav-font-size-base: 14px;
    --nav-font-size-lg: 15px;
    --nav-font-weight-normal: 400;
    --nav-font-weight-medium: 500;
    --nav-font-weight-semibold: 600;

    /* Header dimensions */
    --nav-header-height: 72px;
    --nav-header-height-mobile: 64px;
    
    /* Z-index layers - HIGH values to ensure menus appear above all content */
    --nav-z-header: 99990;
    --nav-z-dropdown: 99995;
    --nav-z-nested-1: 99996;
    --nav-z-nested-2: 99997;
    --nav-z-nested-3: 99998;
    --nav-z-nested-4: 99999;
    --nav-z-overlay: 100000;
    --nav-z-drawer: 100001;
}

/* ==========================================================================
   RESET & BASE - Override parent theme conflicts
   ========================================================================== */

/* Critical: Override Pixfort parent theme sub-menu hide */
.ennu-header .sub-menu,
.ennu-header .ennu-dropdown,
.ennu-nav .sub-menu,
.ennu-nav .ennu-dropdown,
.ennu-nav__list .sub-menu,
.ennu-nav__item .sub-menu {
    display: block !important; /* Override parent theme display:none */
}

/* Ensure dropdowns are positioned correctly */
.ennu-header .ennu-nav__item {
    position: relative !important;
}

/* Override any parent theme menu-item-has-children::before/after */
.ennu-header .menu-item-has-children::before,
.ennu-nav .menu-item-has-children::before {
    display: none !important;
}

.ennu-header *,
.ennu-header *::before,
.ennu-header *::after,
.ennu-drawer *,
.ennu-drawer *::before,
.ennu-drawer *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ennu-header button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ennu-header a {
    color: inherit;
    text-decoration: none;
}

.ennu-header ul,
body.ennu-portal ul,
body.ennu-portal--aesthetics-patient ul {
    list-style: none !important;
    list-style-type: none !important;
}

.ennu-header nav ul,
.ennu-header .ennu-nav ul,
.ennu-header .ennu-nav__list,
.ennu-drawer nav ul,
.ennu-drawer .ennu-drawer__list {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   PANEL TOP BAR - Black utility bar above main header
   Supports full wp_nav_menu with dropdowns via ENNU_Nav_Walker
   ========================================================================== */
.ennu-topbar {
    background: #000000;
    font-family: var(--nav-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    z-index: calc(var(--nav-z-header) + 1);
}

.ennu-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100%;
    padding: 0 24px;
    gap: 0;
}

.ennu-topbar__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

.ennu-topbar__list,
ul.ennu-topbar__list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ennu-topbar__list li {
    list-style: none !important;
}

.ennu-topbar .ennu-nav__item {
    position: relative;
}

.ennu-topbar .ennu-nav__link {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: var(--nav-font-weight-medium);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.ennu-topbar .ennu-nav__link:hover,
.ennu-topbar .ennu-nav__link:focus-visible {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.1);
}

.ennu-topbar .ennu-nav__link[aria-current="page"] {
    color: var(--nav-gold);
    background: rgba(201, 169, 98, 0.12);
}

.ennu-topbar .ennu-nav__arrow {
    width: 10px;
    height: 10px;
    color: rgba(255, 255, 255, 0.5);
}

/* Topbar dropdowns inherit the main dropdown styling */
.ennu-topbar .ennu-dropdown {
    top: 100%;
    margin-top: 4px;
}

/* Topbar bottom edge - subtle gold line */
.ennu-topbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(201, 169, 98, 0.15);
}

/* Adjust main header when topbar is present */
body.ennu-portal .ennu-header {
    top: 0;
}

/* Sticky behavior: topbar scrolls away, header stays */
.ennu-topbar + .ennu-header {
    position: sticky;
    top: 0;
}

/* Admin bar offset */
body.admin-bar .ennu-topbar + .ennu-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .ennu-topbar + .ennu-header {
        top: 46px;
    }
}

/* Responsive: Hide topbar on mobile, show in drawer instead */
@media (max-width: 768px) {
    .ennu-topbar {
        display: none;
    }
}

/* Tablet: Compact topbar */
@media (min-width: 769px) and (max-width: 1024px) {
    .ennu-topbar__inner {
        padding: 0 16px;
        height: 36px;
    }

    .ennu-topbar .ennu-nav__link {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* ==========================================================================
   HEADER - Navy Background with Gold Accent
   ========================================================================== */
.ennu-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--nav-z-header);
    height: var(--nav-header-height);
    background: var(--nav-navy);
    font-family: var(--nav-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-bottom: 4px solid transparent;
    background-image: linear-gradient(var(--nav-navy), var(--nav-navy)), var(--nav-gold-gradient);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    /* Create new stacking context to contain dropdowns properly */
    isolation: isolate;
    /* NOTE: Removed transform: translateZ(0) and will-change: transform
       These created a containing block that clipped position:fixed dropdowns */
}

/* Aesthetics Patient Portal - Navy Header */
.ennu-header--aesthetics-patient {
    background: var(--nav-navy);
    border-bottom: 4px solid transparent;
    background-image: linear-gradient(var(--nav-navy), var(--nav-navy)), var(--nav-gold-gradient);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

/* Aesthetics Patient Portal - Force White Text on Navy Header */
/* Double specificity to override dynamically generated Customizer CSS */
.ennu-header.ennu-header--aesthetics-patient .ennu-nav__link,
.ennu-header--aesthetics-patient .ennu-nav__list .ennu-nav__link,
.ennu-header--aesthetics-patient .ennu-nav__link {
    color: #FFFFFF !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.ennu-header.ennu-header--aesthetics-patient .ennu-nav__link:hover,
.ennu-header.ennu-header--aesthetics-patient .ennu-nav__link:focus-visible,
.ennu-header--aesthetics-patient .ennu-nav__link:hover,
.ennu-header--aesthetics-patient .ennu-nav__link:focus-visible {
    color: #C9A962 !important;
    color: var(--nav-gold-light) !important;
}

.ennu-header.ennu-header--aesthetics-patient .ennu-nav__link[aria-current="page"],
.ennu-header--aesthetics-patient .ennu-nav__link[aria-current="page"] {
    color: #C9A962 !important;
    color: var(--nav-gold) !important;
}

.ennu-header.ennu-header--aesthetics-patient .ennu-nav__arrow,
.ennu-header--aesthetics-patient .ennu-nav__item .ennu-nav__arrow,
.ennu-header--aesthetics-patient .ennu-nav__arrow {
    color: #FFFFFF !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.ennu-header.ennu-header--aesthetics-patient .ennu-user__name,
.ennu-header--aesthetics-patient .ennu-user__trigger .ennu-user__name,
.ennu-header--aesthetics-patient .ennu-user__name {
    color: #FFFFFF !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.ennu-header.ennu-header--aesthetics-patient .ennu-user__arrow,
.ennu-header--aesthetics-patient .ennu-user__trigger .ennu-user__arrow,
.ennu-header--aesthetics-patient .ennu-user__arrow {
    color: #FFFFFF !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.ennu-header.ennu-header--aesthetics-patient .ennu-hamburger__line,
.ennu-header--aesthetics-patient .ennu-hamburger__line {
    background: #C9A962 !important;
    background: var(--nav-gold) !important;
}

/* Logo badge text for Patient Portal */
.ennu-header.ennu-header--aesthetics-patient .ennu-logo__badge,
.ennu-header--aesthetics-patient .ennu-logo__badge {
    color: #1A2744 !important;
}

.ennu-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 24px;
    gap: 16px;
    /* Allow dropdowns to escape - they use absolute positioning with high z-index */
    overflow: visible;
}

/* ==========================================================================
   HEADER - Left Section (Logo + Nav - takes remaining space)
   ========================================================================== */
.ennu-header__left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 24px;
    /* Allow nav to scroll, dropdowns escape via fixed positioning */
    overflow: visible;
    position: relative;
    /* Ensure scroll fade indicators are positioned correctly */
    isolation: isolate;
}

/* ==========================================================================
   HEADER - Center Section (Navigation)
   Scrollable nav for large menus - dropdowns use fixed positioning via JS
   ========================================================================== */
.ennu-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    /* Enable horizontal scrolling for large menus on all screen sizes */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    position: relative;
    z-index: 10;
    /* Smooth scrolling */
    scroll-behavior: smooth;
    /* Padding for scroll fade effect */
    padding-right: 20px;
}

/* Hide scrollbar for Chrome/Safari/Opera */
.ennu-nav::-webkit-scrollbar {
    display: none;
}

/* Nav list should not wrap */
.ennu-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: max-content;
    padding: 8px 0;
}

.ennu-nav__item {
    flex-shrink: 0;
    position: relative;
}

/* Scroll fade indicators - visual hint that more content exists */
.ennu-header__left::before,
.ennu-header__left::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Left fade - indicates more content to the left */
.ennu-header__left::before {
    left: 200px; /* After logo */
    background: linear-gradient(to right, var(--nav-navy, #1A2744) 0%, transparent 100%);
}

/* Right fade - indicates more content to the right */
.ennu-header__left::after {
    right: 0;
    background: linear-gradient(to left, var(--nav-navy, #1A2744) 0%, transparent 100%);
}

/* Show fades when scrollable via JS-added classes */
.ennu-header__left.has-scroll-left::before {
    opacity: 1;
}

.ennu-header__left.has-scroll-right::after {
    opacity: 1;
}

/* Logo */
.ennu-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    max-width: 200px; /* Prevent logo from being too wide */
}

.ennu-logo__link {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity var(--nav-duration-fast) var(--nav-ease);
}

.ennu-logo__link:hover {
    opacity: 0.9;
}

.ennu-logo__image {
    height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.ennu-logo__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--nav-gold-gradient);
    border-radius: var(--nav-radius-full);
    font-size: 11px;
    font-weight: var(--nav-font-weight-semibold);
    color: var(--nav-navy);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: var(--nav-shadow-gold);
}

/* ==========================================================================
   LOGO DIVISION SWITCHER - Hover dropdown with other division logos
   ========================================================================== */
.ennu-logo--has-switcher {
    position: relative;
}

.ennu-logo-switcher {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    min-width: 200px;
    background: rgba(26, 39, 68, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(201, 169, 98, 0.2);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35),
                0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
    z-index: 100;
    pointer-events: none;
}

.ennu-logo--has-switcher:hover .ennu-logo-switcher,
.ennu-logo-switcher:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.ennu-logo-switcher::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.ennu-logo-switcher__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 150ms ease;
}

.ennu-logo-switcher__item:hover {
    background: rgba(201, 169, 98, 0.12);
}

.ennu-logo-switcher__img {
    height: 22px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 150ms ease;
}

.ennu-logo-switcher__item:hover .ennu-logo-switcher__img {
    opacity: 1;
}

.ennu-logo-switcher__label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    transition: color 150ms ease;
}

.ennu-logo-switcher__item:hover .ennu-logo-switcher__label {
    color: #C9A962;
}

/* Hide switcher on mobile (< 768px) */
@media (max-width: 767px) {
    .ennu-logo-switcher {
        display: none;
    }
}

/* ==========================================================================
   QUICK ADD BUTTON - Staff Header Action
   Pill button with hover dropdown for quick creation actions
   ========================================================================== */
.ennu-quick-add {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 8px;
}

.ennu-quick-add__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #FFFFFF !important;
    border: 1px solid rgba(201, 169, 98, 0.4);
    border-radius: var(--nav-radius-full);
    color: #1A2744 !important;
    font-family: var(--nav-font);
    font-size: 13px;
    font-weight: var(--nav-font-weight-semibold);
    cursor: pointer;
    transition: all var(--nav-duration-fast) var(--nav-ease);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(26, 39, 68, 0.1);
}

.ennu-quick-add__trigger:hover {
    background: #FAF8F5 !important;
    border-color: #C9A962;
    box-shadow: var(--nav-shadow-gold);
    transform: translateY(-1px);
}

.ennu-quick-add__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #A68B4B !important;
}

.ennu-quick-add__text {
    display: inline;
    color: #1A2744 !important;
}

.ennu-quick-add__arrow {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    opacity: 0.7;
    color: #A68B4B !important;
    transition: transform var(--nav-duration-fast) var(--nav-ease);
}

.ennu-quick-add:hover .ennu-quick-add__arrow,
.ennu-quick-add.is-open .ennu-quick-add__arrow {
    transform: rotate(180deg);
}

/* Quick Add Dropdown */
.ennu-quick-add__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 260px;
    background: var(--nav-white);
    border-radius: var(--nav-radius-lg);
    border: 1px solid rgba(201, 169, 98, 0.25);
    box-shadow: 
        0 4px 6px -1px rgba(26, 39, 68, 0.08),
        0 10px 20px -2px rgba(26, 39, 68, 0.12),
        0 20px 40px -4px rgba(26, 39, 68, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.97);
    transform-origin: top left;
    z-index: var(--nav-z-dropdown);
    isolation: isolate;
    transition: 
        opacity 120ms var(--nav-ease-luxury),
        transform 120ms var(--nav-ease-luxury),
        visibility 0s linear 120ms;
}

/* Gold accent bar at top of dropdown */
.ennu-quick-add__dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--nav-gold-gradient);
    border-radius: var(--nav-radius-lg) var(--nav-radius-lg) 0 0;
}

/* Show dropdown on hover OR when toggled open (touch support) */
.ennu-quick-add:hover .ennu-quick-add__dropdown,
.ennu-quick-add.is-open .ennu-quick-add__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    box-shadow:
        0 8px 16px -2px rgba(26, 39, 68, 0.12),
        0 20px 40px -4px rgba(26, 39, 68, 0.15),
        0 0 0 1px rgba(201, 169, 98, 0.15);
    transition:
        opacity 150ms var(--nav-ease-luxury),
        transform 150ms var(--nav-ease-luxury),
        visibility 0s linear 0s;
}

.ennu-quick-add__dropdown-inner {
    padding: 8px;
}

.ennu-quick-add__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: var(--nav-font-size-base);
    font-weight: var(--nav-font-weight-normal);
    color: var(--nav-navy);
    border-radius: var(--nav-radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    transition: all var(--nav-duration-fast) var(--nav-ease);
}

.ennu-quick-add__link:hover {
    background: var(--nav-cream);
    color: var(--nav-gold-dark);
    border-color: rgba(201, 169, 98, 0.2);
    transform: translateX(4px);
}

.ennu-quick-add__link:active {
    transform: translateX(4px) scale(0.99);
}

.ennu-quick-add__link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--nav-gold-dark);
    opacity: 0.8;
}

.ennu-quick-add__link:hover .ennu-quick-add__link-icon {
    opacity: 1;
}

.ennu-quick-add__link-text {
    flex: 1;
}

/* Responsive - Hide text on smaller screens */
@media (max-width: 1200px) {
    .ennu-quick-add__text {
        display: none;
    }
    
    .ennu-quick-add__trigger {
        padding: 8px 12px;
    }
}

/* Mobile Quick Add - Show compact button next to hamburger */
@media (max-width: 768px) {
    .ennu-quick-add {
        display: flex;
        position: absolute;
        right: 64px;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
    }
    
    .ennu-quick-add__trigger {
        padding: 10px;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
    
    .ennu-quick-add__text,
    .ennu-quick-add__arrow {
        display: none !important;
    }
    
    .ennu-quick-add__icon {
        width: 20px;
        height: 20px;
    }
    
    .ennu-quick-add__dropdown {
        right: 0;
        left: auto;
        transform-origin: top right;
    }
}

/* ==========================================================================
   DRAWER QUICK ADD - Mobile Quick Actions Grid
   ========================================================================== */
.ennu-drawer__quick-add {
    padding: 16px 20px;
    background: var(--nav-navy);
    border-bottom: 3px solid transparent;
    background-image: linear-gradient(var(--nav-navy), var(--nav-navy)), var(--nav-gold-gradient);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

.ennu-drawer__quick-add .ennu-drawer__section-title {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: var(--nav-font-weight-semibold);
    color: var(--nav-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ennu-drawer__quick-add-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ennu-drawer__quick-add-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(201, 169, 98, 0.25);
    border-radius: var(--nav-radius-md);
    color: var(--nav-white);
    text-decoration: none;
    transition: all var(--nav-duration-fast) var(--nav-ease);
    min-height: 70px;
}

.ennu-drawer__quick-add-btn:hover,
.ennu-drawer__quick-add-btn:active {
    background: rgba(201, 169, 98, 0.2);
    border-color: var(--nav-gold);
    transform: scale(1.02);
}

.ennu-drawer__quick-add-icon {
    width: 22px;
    height: 22px;
    color: var(--nav-gold);
    flex-shrink: 0;
}

.ennu-drawer__quick-add-label {
    font-size: 11px;
    font-weight: var(--nav-font-weight-medium);
    text-align: center;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive adjustments for smaller phones */
@media (max-width: 360px) {
    .ennu-drawer__quick-add-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ennu-drawer__quick-add-btn {
        min-height: 60px;
        padding: 10px 6px;
    }
    
    .ennu-drawer__quick-add-icon {
        width: 20px;
        height: 20px;
    }
    
    .ennu-drawer__quick-add-label {
        font-size: 10px;
    }
}

/* ==========================================================================
   DESKTOP NAVIGATION - Gold Accent Style
   ========================================================================== */
.ennu-nav__list,
ul.ennu-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.ennu-nav__item {
    position: relative;
}

.ennu-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: var(--nav-font-size-base);
    font-weight: var(--nav-font-weight-medium);
    color: rgba(255, 255, 255, 0.85);
    border-radius: var(--nav-radius-sm);
    text-decoration: none;
    transition: all var(--nav-duration-fast) var(--nav-ease);
    white-space: nowrap;
}

.ennu-nav__text {
    flex: 1;
}

.ennu-nav__link:hover,
.ennu-nav__link:focus-visible {
    color: var(--nav-gold-light);
    background: rgba(201, 169, 98, 0.15);
}

.ennu-nav__link[aria-current="page"] {
    color: var(--nav-gold);
    background: rgba(201, 169, 98, 0.12);
}

/* Dropdown Arrow */
.ennu-nav__arrow {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    flex-shrink: 0;
    color: var(--nav-gold-light);
    transition: transform var(--nav-duration-fast) var(--nav-ease),
                opacity var(--nav-duration-fast) var(--nav-ease);
}

.ennu-nav__item:hover > .ennu-nav__link .ennu-nav__arrow,
.ennu-nav__link[aria-expanded="true"] .ennu-nav__arrow {
    opacity: 1;
    transform: rotate(180deg);
}

/* ==========================================================================
   DROPDOWN MENU - Luxury Card Style (Fixed hover reliability + z-index)
   ========================================================================== */
.ennu-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(0.95);
    min-width: 260px;
    max-width: 340px;
    background: var(--nav-white);
    border-radius: var(--nav-radius-lg);
    border: 1px solid rgba(201, 169, 98, 0.25);
    box-shadow:
        0 4px 6px -1px rgba(26, 39, 68, 0.08),
        0 10px 20px -2px rgba(26, 39, 68, 0.12),
        0 20px 40px -4px rgba(26, 39, 68, 0.08),
        0 0 0 1px rgba(201, 169, 98, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* HIGH z-index to always appear above page content */
    z-index: var(--nav-z-dropdown);
    transform-origin: top center;
    padding-top: 8px; /* Visual gap without breaking hover */
    /* Snappy hide transition - faster for responsive feel */
    transition:
        opacity 80ms ease-out,
        transform 80ms ease-out,
        visibility 0s linear 80ms;
    /* Allow nested dropdowns to escape */
    overflow: visible;
}

/* Gold accent bar at top of dropdown */
.ennu-dropdown::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--nav-gold-gradient);
    border-radius: var(--nav-radius-lg) var(--nav-radius-lg) 0 0;
}

/* Hover bridge - invisible area to maintain hover state while moving to dropdown */
.ennu-nav__item--has-children::after,
.ennu-nav__item.menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 20px;
    pointer-events: none;
    z-index: calc(var(--nav-z-dropdown) - 1);
}

.ennu-nav__item:hover::after,
.ennu-nav__item--open::after,
.ennu-nav__item.is-open::after {
    pointer-events: auto;
}

/* Show dropdown - JS class + hover hybrid for reliability */
.ennu-header .ennu-nav__item--open > .ennu-dropdown,
.ennu-header .ennu-nav__item.is-open > .ennu-dropdown,
.ennu-header .ennu-nav__item:hover > .ennu-dropdown,
.ennu-nav .ennu-nav__item--open > .ennu-dropdown,
.ennu-nav .ennu-nav__item:hover > .ennu-dropdown,
.ennu-nav__item--open > .ennu-dropdown,
.ennu-nav__item.is-open > .ennu-dropdown,
.ennu-nav__item:hover > .ennu-dropdown,
.ennu-nav__link[aria-expanded="true"] + .ennu-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1);
    box-shadow: 
        0 8px 16px -2px rgba(26, 39, 68, 0.12),
        0 20px 40px -4px rgba(26, 39, 68, 0.15),
        0 0 0 1px rgba(201, 169, 98, 0.2),
        0 0 60px -10px rgba(201, 169, 98, 0.15);
    /* Snappy show transition - fast but smooth */
    transition:
        opacity 120ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 120ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

.ennu-dropdown__inner {
    position: relative;
    padding: 6px;
    background: var(--nav-white);
    border-radius: var(--nav-radius-lg);
    /* No overflow clipping - nested dropdowns use fixed positioning via JS */
    overflow: visible;
}

/* Items with nested children must allow overflow for nested dropdowns to appear */
.ennu-dropdown__item--has-children {
    overflow: visible !important;
}

/* Custom scrollbar for dropdown */
.ennu-dropdown__inner::-webkit-scrollbar {
    width: 5px;
}

.ennu-dropdown__inner::-webkit-scrollbar-track {
    background: var(--nav-cream);
    border-radius: 3px;
}

.ennu-dropdown__inner::-webkit-scrollbar-thumb {
    background: var(--nav-gold-light);
    border-radius: 3px;
}

.ennu-dropdown__inner::-webkit-scrollbar-thumb:hover {
    background: var(--nav-gold);
}

.ennu-dropdown__item {
    margin: 2px 0;
}

.ennu-dropdown__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    font-size: var(--nav-font-size-base);
    font-weight: var(--nav-font-weight-normal);
    color: var(--nav-navy);
    border-radius: var(--nav-radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1.4;
    transition: 
        background-color var(--nav-duration-fast) var(--nav-ease),
        color var(--nav-duration-fast) var(--nav-ease),
        border-color var(--nav-duration-fast) var(--nav-ease),
        transform var(--nav-duration-fast) var(--nav-ease);
}

.ennu-dropdown__text {
    flex: 1;
    min-width: 0;
    /* Prevent text overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ennu-dropdown__link:hover {
    background: var(--nav-cream);
    color: var(--nav-gold-dark);
    border-color: rgba(201, 169, 98, 0.2);
    transform: translateX(3px);
}

.ennu-dropdown__link:active {
    transform: translateX(3px) scale(0.99);
}

.ennu-dropdown__link[aria-current="page"],
.ennu-dropdown__item--current .ennu-dropdown__link {
    background: rgba(201, 169, 98, 0.12);
    color: var(--nav-gold-dark);
    font-weight: var(--nav-font-weight-medium);
    border-left: 3px solid var(--nav-gold);
    padding-left: 11px;
}

/* External link indicator */
.ennu-dropdown__item--external .ennu-dropdown__link {
    padding-right: 12px;
}

.ennu-dropdown__link--external {
    gap: 8px;
}

/* ==========================================================================
   HEADER - Right Section (User)
   ========================================================================== */
.ennu-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-shrink: 0;
}

/* User Menu */
.ennu-user {
    position: relative;
}

.ennu-user__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 10px;
    background: rgba(201, 169, 98, 0.15);
    border: 1px solid rgba(201, 169, 98, 0.3);
    border-radius: var(--nav-radius-full);
    transition: all var(--nav-duration-fast) var(--nav-ease);
}

.ennu-user__trigger:hover {
    background: rgba(201, 169, 98, 0.25);
    border-color: var(--nav-gold);
}

.ennu-user__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nav-gold-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--nav-font-weight-semibold);
    color: var(--nav-navy);
    border: 2px solid var(--nav-gold-light);
}

.ennu-user__name {
    font-size: var(--nav-font-size-sm);
    font-weight: var(--nav-font-weight-medium);
    color: rgba(255, 255, 255, 0.9);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ennu-user__arrow {
    width: 12px;
    height: 12px;
    color: var(--nav-gold-light);
    transition: transform var(--nav-duration-fast) var(--nav-ease);
}

.ennu-user.is-open .ennu-user__arrow {
    transform: rotate(180deg);
}

/* User Dropdown */
.ennu-user__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: var(--nav-white);
    border-radius: var(--nav-radius-lg);
    border: 1px solid rgba(201, 169, 98, 0.25);
    box-shadow: 
        0 4px 6px -1px rgba(26, 39, 68, 0.08),
        0 10px 20px -2px rgba(26, 39, 68, 0.12),
        0 20px 40px -4px rgba(26, 39, 68, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.97);
    transform-origin: top right;
    /* HIGH z-index for user dropdown */
    z-index: var(--nav-z-dropdown);
    isolation: isolate;
    transition: 
        opacity 120ms var(--nav-ease-luxury),
        transform 120ms var(--nav-ease-luxury),
        visibility 0s linear 120ms;
}

/* Gold accent bar */
.ennu-user__dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--nav-gold-gradient);
    border-radius: var(--nav-radius-lg) var(--nav-radius-lg) 0 0;
}

.ennu-user.is-open .ennu-user__dropdown,
.ennu-user:hover .ennu-user__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    box-shadow: 
        0 8px 16px -2px rgba(26, 39, 68, 0.12),
        0 20px 40px -4px rgba(26, 39, 68, 0.15),
        0 0 0 1px rgba(201, 169, 98, 0.15);
    transition: 
        opacity 150ms var(--nav-ease-luxury),
        transform 150ms var(--nav-ease-luxury),
        visibility 0s linear 0s;
}

.ennu-user__dropdown-inner {
    padding: 8px;
}

.ennu-user__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: var(--nav-font-size-base);
    color: var(--nav-navy);
    border-radius: var(--nav-radius-sm);
    border: 1px solid transparent;
    transition: all var(--nav-duration-fast) var(--nav-ease);
}

.ennu-user__link:hover {
    background: var(--nav-cream);
    color: var(--nav-gold-dark);
    border-color: var(--nav-border);
    transform: translateX(4px);
}

.ennu-user__link--danger {
    color: var(--nav-error);
}

.ennu-user__link--danger:hover {
    background: var(--nav-error-light);
    color: var(--nav-error);
    border-color: rgba(184, 80, 90, 0.2);
}

/* Portal switcher link */
.ennu-user__link--portal {
    background: var(--nav-cream);
    border: 1px solid var(--nav-border);
}

.ennu-user__link--portal:hover {
    background: rgba(201, 169, 98, 0.1);
    border-color: var(--nav-gold);
}

/* Section headers in user dropdown */
.ennu-user__section {
    padding: 4px 8px;
}

.ennu-user__section-title {
    display: block;
    padding: 8px 8px 4px;
    font-size: 11px;
    font-weight: var(--nav-font-weight-semibold);
    color: var(--nav-slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ennu-user__link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
}

.ennu-user__divider {
    height: 1px;
    margin: 8px 0;
    background: var(--nav-border);
}

/* ==========================================================================
   MOBILE HAMBURGER BUTTON
   ========================================================================== */
.ennu-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--nav-radius-sm);
    transition: background-color var(--nav-duration-fast) var(--nav-ease);
}

.ennu-hamburger:hover {
    background: rgba(201, 169, 98, 0.15);
}

.ennu-hamburger__box {
    position: relative;
    width: 22px;
    height: 16px;
}

.ennu-hamburger__line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--nav-gold);
    border-radius: 1px;
    transition: transform var(--nav-duration-normal) var(--nav-ease),
                opacity var(--nav-duration-fast) var(--nav-ease);
}

.ennu-hamburger__line:nth-child(1) { top: 0; }
.ennu-hamburger__line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.ennu-hamburger__line:nth-child(3) { bottom: 0; }

.ennu-hamburger.is-active .ennu-hamburger__line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.ennu-hamburger.is-active .ennu-hamburger__line:nth-child(2) {
    opacity: 0;
}
.ennu-hamburger.is-active .ennu-hamburger__line:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* ==========================================================================
   MOBILE DRAWER - Luxury Style
   ========================================================================== */
.ennu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 39, 68, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--nav-z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: all var(--nav-duration-smooth) var(--nav-ease);
}

.ennu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.ennu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 100vw - 48px);
    background: var(--nav-white);
    z-index: var(--nav-z-drawer);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--nav-duration-smooth) var(--nav-ease-out),
                visibility var(--nav-duration-smooth) var(--nav-ease);
    display: flex;
    flex-direction: column;
    font-family: var(--nav-font);
    -webkit-font-smoothing: antialiased;
    box-shadow: -8px 0 32px rgba(26, 39, 68, 0.15);
}

.ennu-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

/* Drawer Header - Navy with Gold accent */
.ennu-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--nav-navy);
    border-bottom: 4px solid transparent;
    background-image: linear-gradient(var(--nav-navy), var(--nav-navy)), var(--nav-gold-gradient);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    flex-shrink: 0;
}

.ennu-drawer__title {
    font-size: 18px;
    font-weight: var(--nav-font-weight-semibold);
    color: var(--nav-white);
    letter-spacing: 0.02em;
}

.ennu-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--nav-radius-sm);
    color: var(--nav-gold-light);
    border: 1px solid rgba(201, 169, 98, 0.3);
    transition: all var(--nav-duration-fast) var(--nav-ease);
}

.ennu-drawer__close:hover {
    background: rgba(201, 169, 98, 0.15);
    color: var(--nav-gold);
    border-color: var(--nav-gold);
}

.ennu-drawer__close-icon {
    width: 22px;
    height: 22px;
}

/* Drawer Content */
.ennu-drawer__content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--nav-cream);
}

.ennu-drawer__nav {
    padding: 16px 0;
}

.ennu-drawer__list {
    display: flex;
    flex-direction: column;
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* Drawer Items */
.ennu-drawer__item {
    border-bottom: 1px solid var(--nav-border);
}

.ennu-drawer__item:last-child {
    border-bottom: none;
}

.ennu-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    font-size: var(--nav-font-size-lg);
    font-weight: var(--nav-font-weight-medium);
    color: var(--nav-navy);
    text-decoration: none;
    border-left: 4px solid transparent;
    transition: all var(--nav-duration-fast) var(--nav-ease);
}

.ennu-drawer__text {
    flex: 1;
}

.ennu-drawer__link:hover,
.ennu-drawer__link:active {
    background: var(--nav-white);
    border-left-color: var(--nav-gold);
    color: var(--nav-gold-dark);
}

.ennu-drawer__link[aria-current="page"] {
    color: var(--nav-gold-dark);
    font-weight: var(--nav-font-weight-semibold);
    background: var(--nav-white);
    border-left-color: var(--nav-gold);
}

/* ==========================================================================
   DRAWER - Link Row (Split: Link + Toggle Button)
   Mobile-optimized with proper touch targets
   ========================================================================== */
.ennu-drawer__link-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.ennu-drawer__link-main {
    flex: 1;
    min-width: 0;
}

.ennu-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    min-height: 56px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--nav-border);
    color: var(--nav-slate);
    cursor: pointer;
    transition: all var(--nav-duration-fast) var(--nav-ease);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.ennu-drawer__toggle:hover,
.ennu-drawer__toggle:active {
    background: rgba(201, 169, 98, 0.1);
    color: var(--nav-gold-dark);
}

.ennu-drawer__toggle[aria-expanded="true"] {
    background: rgba(201, 169, 98, 0.15);
    color: var(--nav-gold-dark);
}

.ennu-drawer__arrow {
    width: 20px;
    height: 20px;
    transition: transform var(--nav-duration-fast) var(--nav-ease);
}

.ennu-drawer__toggle[aria-expanded="true"] .ennu-drawer__arrow {
    transform: rotate(180deg);
}

/* ==========================================================================
   DRAWER - Submenu (Accordion Style)
   ========================================================================== */
.ennu-drawer__submenu {
    display: none;
    background: var(--nav-white);
}

/* When parent is expanded, show the submenu */
.ennu-drawer__item--expanded > .ennu-drawer__submenu,
.ennu-drawer__subitem--expanded > .ennu-drawer__submenu,
.ennu-drawer__item--expanded > .ennu-drawer__link-row + .ennu-drawer__submenu,
.ennu-drawer__subitem--expanded > .ennu-drawer__link-row + .ennu-drawer__submenu,
/* Direct class on submenu (set by JS) */
.ennu-drawer__submenu.is-open {
    display: block;
}

.ennu-drawer__submenu-inner {
    padding: 8px 0;
    border-top: 1px solid var(--nav-border);
}

/* Level 1 Submenu */
.ennu-drawer__submenu--level-1 {
    background: #F8F6F3;
}

.ennu-drawer__submenu--level-1 .ennu-drawer__submenu-inner {
    padding-left: 12px;
}

/* Level 2 Submenu (sub-sub-menu) */
.ennu-drawer__submenu--level-2 {
    background: #F3F1EE;
}

.ennu-drawer__submenu--level-2 .ennu-drawer__submenu-inner {
    padding-left: 12px;
}

/* Level 3+ Submenu */
.ennu-drawer__submenu--level-3,
.ennu-drawer__submenu--level-4 {
    background: #EEEBE8;
}

.ennu-drawer__submenu--level-3 .ennu-drawer__submenu-inner,
.ennu-drawer__submenu--level-4 .ennu-drawer__submenu-inner {
    padding-left: 12px;
}

/* ==========================================================================
   DRAWER - Subitem (Items inside submenus)
   ========================================================================== */
.ennu-drawer__subitem {
    margin: 0;
    border-bottom: 1px solid rgba(26, 39, 68, 0.08);
}

.ennu-drawer__subitem:last-child {
    border-bottom: none;
}

/* Subitem link row */
.ennu-drawer__subitem .ennu-drawer__link-row {
    background: transparent;
}

.ennu-drawer__subitem .ennu-drawer__toggle {
    width: 52px;
    min-height: 52px;
    border-left-color: rgba(26, 39, 68, 0.08);
}

/* ==========================================================================
   DRAWER - Sublink Styles (Mobile Optimized)
   ========================================================================== */
.ennu-drawer__sublink {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 14px 16px;
    font-size: 15px;
    color: var(--nav-slate);
    background: transparent;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all var(--nav-duration-fast) var(--nav-ease);
    -webkit-tap-highlight-color: transparent;
}

.ennu-drawer__sublink:hover,
.ennu-drawer__sublink:active {
    color: var(--nav-gold-dark);
    background: rgba(201, 169, 98, 0.08);
    border-left-color: var(--nav-gold);
}

.ennu-drawer__sublink[aria-current="page"] {
    color: var(--nav-gold-dark);
    background: rgba(201, 169, 98, 0.12);
    font-weight: var(--nav-font-weight-semibold);
    border-left-color: var(--nav-gold);
}

/* Nested sublinks get slightly smaller but stay touch-friendly */
.ennu-drawer__submenu--level-2 .ennu-drawer__sublink {
    font-size: 14px;
    min-height: 48px;
    padding: 12px 14px;
}

.ennu-drawer__submenu--level-3 .ennu-drawer__sublink,
.ennu-drawer__submenu--level-4 .ennu-drawer__sublink {
    font-size: 13px;
    min-height: 44px;
    padding: 10px 12px;
}

/* Visual depth indicator (bullet) for nested items */
.ennu-drawer__submenu--level-1 .ennu-drawer__sublink::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nav-border);
    margin-right: 12px;
    flex-shrink: 0;
    transition: background var(--nav-duration-fast) var(--nav-ease);
}

.ennu-drawer__submenu--level-1 .ennu-drawer__sublink:hover::before,
.ennu-drawer__submenu--level-1 .ennu-drawer__sublink:active::before,
.ennu-drawer__submenu--level-1 .ennu-drawer__sublink[aria-current="page"]::before {
    background: var(--nav-gold);
}

.ennu-drawer__submenu--level-2 .ennu-drawer__sublink::before {
    width: 4px;
    height: 4px;
    margin-right: 10px;
}

.ennu-drawer__submenu--level-3 .ennu-drawer__sublink::before,
.ennu-drawer__submenu--level-4 .ennu-drawer__sublink::before {
    width: 3px;
    height: 3px;
    margin-right: 8px;
}

/* ==========================================================================
   DRAWER - Main Link Enhanced (Mobile Optimized)
   ========================================================================== */
.ennu-drawer__link {
    min-height: 56px;
    padding: 16px 20px;
    font-size: 16px;
}

.ennu-drawer__link-main {
    min-height: 56px;
    padding: 16px 20px;
    font-size: 16px;
}

/* Drawer Footer */
.ennu-drawer__footer {
    padding: 20px 24px;
    border-top: 2px solid var(--nav-border);
    flex-shrink: 0;
    background: var(--nav-white);
}

.ennu-drawer__user {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: var(--nav-cream);
    border-radius: var(--nav-radius-lg);
    border: 1px solid var(--nav-border);
}

.ennu-drawer__user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--nav-gold-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: var(--nav-font-weight-semibold);
    color: var(--nav-navy);
    flex-shrink: 0;
    border: 2px solid var(--nav-gold-light);
}

.ennu-drawer__user-info {
    flex: 1;
    min-width: 0;
}

.ennu-drawer__user-name {
    font-size: var(--nav-font-size-base);
    font-weight: var(--nav-font-weight-semibold);
    color: var(--nav-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ennu-drawer__user-role {
    font-size: var(--nav-font-size-sm);
    color: var(--nav-slate);
}

.ennu-drawer__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
    padding: 14px 20px;
    font-size: var(--nav-font-size-base);
    font-weight: var(--nav-font-weight-medium);
    color: var(--nav-navy);
    background: var(--nav-white);
    border: 2px solid var(--nav-border);
    border-radius: var(--nav-radius-lg);
    transition: all var(--nav-duration-fast) var(--nav-ease);
}

.ennu-drawer__logout:hover {
    background: var(--nav-cream);
    border-color: var(--nav-gold);
    color: var(--nav-gold-dark);
}

/* ==========================================================================
   RESPONSIVE - Large Desktop (1400px+)
   Scrollable nav for large menus, dropdowns use fixed positioning via JS
   ========================================================================== */
@media (min-width: 1400px) {
    .ennu-nav {
        /* Keep scrolling enabled for large menus */
        overflow-x: auto;
        overflow-y: visible;
    }
    
    .ennu-nav__link {
        padding: 10px 18px;
    }
}

/* ==========================================================================
   RESPONSIVE - Medium Desktop (1200px - 1400px)
   Scrollable nav for large menus, slightly compact items
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1399px) {
    .ennu-nav {
        /* Keep scrolling enabled for large menus */
        overflow-x: auto;
        overflow-y: visible;
    }
    
    .ennu-nav__link {
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .ennu-logo__badge {
        padding: 5px 12px;
        font-size: 10px;
    }
}

/* ==========================================================================
   RESPONSIVE - Small Desktop / Large Tablet (1024px - 1200px)
   Compact nav, scrolling enabled
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1199px) {
    .ennu-header__inner {
        padding: 0 20px;
        gap: 16px;
    }
    
    .ennu-header__left {
        gap: 16px;
        overflow: hidden;
        max-width: calc(100% - 100px);
    }
    
    /* Enable scrolling on smaller desktop */
    .ennu-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .ennu-nav::-webkit-scrollbar {
        display: none;
    }
    
    .ennu-nav__list {
        flex-shrink: 0;
        width: max-content;
    }
    
    .ennu-nav__item {
        flex-shrink: 0;
    }
    
    .ennu-nav__link {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .ennu-logo {
        flex-shrink: 0;
        max-width: 160px;
    }
    
    .ennu-logo__image {
        height: 30px;
        max-width: 100px;
    }
    
    .ennu-logo__badge {
        padding: 4px 10px;
        font-size: 9px;
    }
    
    .ennu-user__name {
        display: none;
    }
    
    .ennu-user__avatar {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================================================
   RESPONSIVE - Tablet Landscape (768px - 1024px)
   Scrollable nav with fixed dropdowns
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .ennu-header__inner {
        padding: 0 16px;
        gap: 12px;
    }
    
    .ennu-header__left {
        gap: 12px;
        overflow: hidden;
        flex: 1 1 0;
        min-width: 0;
        max-width: calc(100% - 100px);
    }
    
    /* Enable scrolling on tablet */
    .ennu-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .ennu-nav::-webkit-scrollbar {
        display: none;
    }
    
    .ennu-nav__list {
        flex-shrink: 0;
        width: max-content;
    }
    
    .ennu-nav__item {
        flex-shrink: 0;
    }
    
    .ennu-logo {
        flex-shrink: 0;
        max-width: 140px;
    }
    
    .ennu-logo__image {
        height: 26px;
        max-width: 90px;
    }
    
    .ennu-logo__badge {
        padding: 3px 8px;
        font-size: 8px;
    }
    
    .ennu-nav__link {
        min-height: 44px;
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .ennu-dropdown__link {
        min-height: 44px;
        padding: 10px 12px;
    }
    
    .ennu-header__right {
        flex-shrink: 0;
        gap: 8px;
    }
    
    .ennu-user__name {
        display: none;
    }
    
    .ennu-user__avatar {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

/* ==========================================================================
   RESPONSIVE - Mobile (≤768px)
   Full mobile optimization for drawer and touch interactions
   ========================================================================== */
@media (max-width: 768px) {
    .ennu-header {
        height: var(--nav-header-height-mobile);
    }
    
    .ennu-header__inner {
        padding: 0 16px;
    }
    
    .ennu-nav,
    .ennu-user {
        display: none;
    }
    
    .ennu-hamburger {
        display: flex;
    }
    
    .ennu-logo__badge {
        display: none;
    }
    
    .ennu-logo__image {
        height: 28px;
    }
    
    /* Mobile Drawer - Full width on small phones */
    .ennu-drawer {
        width: 100%;
        max-width: 320px;
    }
    
    .ennu-drawer__header {
        padding: 16px 20px;
    }
    
    .ennu-drawer__title {
        font-size: 17px;
    }
    
    .ennu-drawer__close {
        width: 44px;
        height: 44px;
    }
    
    /* Mobile Links - 48px touch targets minimum */
    .ennu-drawer__link {
        min-height: 52px;
        padding: 14px 16px;
        font-size: 15px;
    }
    
    .ennu-drawer__link-main {
        min-height: 52px;
        padding: 14px 16px;
        font-size: 15px;
    }
    
    /* Mobile Toggle - Large touch target */
    .ennu-drawer__toggle {
        width: 52px;
        min-height: 52px;
    }
    
    .ennu-drawer__arrow {
        width: 18px;
        height: 18px;
    }
    
    /* Mobile Sublinks - Touch optimized */
    .ennu-drawer__sublink {
        min-height: 48px;
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .ennu-drawer__submenu--level-2 .ennu-drawer__sublink {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .ennu-drawer__submenu--level-3 .ennu-drawer__sublink,
    .ennu-drawer__submenu--level-4 .ennu-drawer__sublink {
        min-height: 44px;
        padding: 10px 10px;
        font-size: 12px;
    }
    
    /* Mobile Subitem Toggle */
    .ennu-drawer__subitem .ennu-drawer__toggle {
        width: 48px;
        min-height: 48px;
    }
    
    /* Mobile Submenu Inner Padding */
    .ennu-drawer__submenu-inner {
        padding: 6px 0;
    }
    
    .ennu-drawer__submenu--level-1 .ennu-drawer__submenu-inner,
    .ennu-drawer__submenu--level-2 .ennu-drawer__submenu-inner,
    .ennu-drawer__submenu--level-3 .ennu-drawer__submenu-inner {
        padding-left: 8px;
    }
    
    /* Mobile Footer */
    .ennu-drawer__footer {
        padding: 16px;
    }
    
    .ennu-drawer__user {
        padding: 10px;
        gap: 12px;
    }
    
    .ennu-drawer__user-avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .ennu-drawer__user-name {
        font-size: 14px;
    }
    
    .ennu-drawer__user-role {
        font-size: 12px;
    }
    
    .ennu-drawer__logout {
        margin-top: 12px;
        padding: 12px 16px;
        font-size: 14px;
        min-height: 48px;
    }
    
    /* Portal Switcher in Drawer */
    .ennu-drawer__portal-switcher {
        margin-bottom: 16px;
    }
    
    .ennu-drawer__section-title {
        font-size: 11px;
        margin-bottom: 8px;
    }
    
    .ennu-drawer__portal-links {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    
    .ennu-drawer__portal-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        font-size: 13px;
        color: var(--nav-slate);
        background: var(--nav-cream);
        border-radius: var(--nav-radius-sm);
        text-decoration: none;
        min-height: 44px;
        transition: all var(--nav-duration-fast) var(--nav-ease);
    }
    
    .ennu-drawer__portal-link:hover,
    .ennu-drawer__portal-link:active {
        background: rgba(201, 169, 98, 0.1);
        color: var(--nav-gold-dark);
    }
    
    .ennu-drawer__portal-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
}
    
/* ==========================================================================
   CONTENT AREA
   ========================================================================== */
.ennu-main {
    min-height: calc(100vh - var(--nav-header-height) - 40px);
    min-height: calc(100dvh - var(--nav-header-height) - 40px);
    background: var(--nav-cream);
    }

.ennu-main__inner {
        max-width: 100%;
    margin: 0;
    padding: 0;
    }
    
@media (max-width: 768px) {
    .ennu-main {
        min-height: calc(100vh - var(--nav-header-height-mobile));
        min-height: calc(100dvh - var(--nav-header-height-mobile));
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.ennu-nav__link:focus-visible,
.ennu-dropdown__link:focus-visible,
.ennu-user__trigger:focus-visible,
.ennu-user__link:focus-visible,
.ennu-hamburger:focus-visible,
.ennu-drawer__close:focus-visible,
.ennu-drawer__link:focus-visible,
.ennu-drawer__sublink:focus-visible {
    outline: 3px solid var(--nav-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ennu-header *,
    .ennu-drawer *,
    .ennu-overlay {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   BODY SCROLL LOCK
   ========================================================================== */
body.ennu-drawer-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   NESTED DROPDOWNS - Multi-level Support (up to 5 levels)
   HIGH z-index values ensure menus appear above all page content
   ========================================================================== */

/* Base nested dropdown item with children */
.ennu-dropdown__item--has-children {
    position: relative;
}

/* Hover bridge for nested items */
.ennu-dropdown__item--has-children::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    width: 20px;
    pointer-events: none;
}

.ennu-dropdown__item--has-children:hover::after {
    pointer-events: auto;
}

/* Dropdown arrow icon - explicit sizing with high specificity */
.ennu-dropdown__arrow,
.ennu-dropdown__link .ennu-dropdown__arrow,
.ennu-dropdown__item .ennu-dropdown__arrow,
svg.ennu-dropdown__arrow {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    flex-shrink: 0 !important;
    opacity: 0.5;
    color: var(--nav-gold-dark);
    display: inline-block;
    vertical-align: middle;
    transition: 
        transform var(--nav-duration-fast) var(--nav-ease),
        opacity var(--nav-duration-fast) var(--nav-ease);
}

/* Nested dropdown arrow rotates right (pointing to submenu) */
.ennu-dropdown__item--has-children:hover > .ennu-dropdown__link .ennu-dropdown__arrow,
.ennu-dropdown__item--open > .ennu-dropdown__link .ennu-dropdown__arrow {
    opacity: 1;
    transform: rotate(90deg);
}

/* Nested dropdown container - positioned to the right */
.ennu-dropdown--nested {
    position: absolute;
    top: -6px;
    left: 100%;
    min-width: 260px;
    max-width: 340px;
    background: var(--nav-white);
    border-radius: var(--nav-radius-lg);
    border: 1px solid rgba(201, 169, 98, 0.25);
    box-shadow: 
        0 4px 6px -1px rgba(26, 39, 68, 0.08),
        0 10px 20px -2px rgba(26, 39, 68, 0.12),
        0 20px 40px -4px rgba(26, 39, 68, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px) scale(0.97);
    transform-origin: left top;
    /* Use dedicated nested z-index variables */
    z-index: var(--nav-z-nested-1);
    margin-left: 6px;
    padding-top: 0;
    isolation: isolate;
    transition:
        opacity 60ms ease-out,
        transform 60ms ease-out,
        visibility 0s linear 60ms;
}

/* Gold accent bar on left side for nested */
.ennu-dropdown--nested::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--nav-gold-gradient);
    border-radius: var(--nav-radius-lg) 0 0 var(--nav-radius-lg);
}

/* Show nested dropdown on hover/open - comprehensive selectors for all levels */
.ennu-dropdown__item--has-children:hover > .ennu-dropdown--nested,
.ennu-dropdown__item--has-children:hover > .ennu-dropdown,
.ennu-dropdown__item--open > .ennu-dropdown--nested,
.ennu-dropdown__item--open > .ennu-dropdown,
.ennu-dropdown__item.ennu-dropdown__item--has-children:hover > .ennu-dropdown,
/* WordPress menu-item-has-children class support */
.ennu-dropdown__item.menu-item-has-children:hover > .ennu-dropdown,
.ennu-dropdown__item.menu-item-has-children:hover > .ennu-dropdown--nested,
/* Level-specific hover states */
.ennu-dropdown--level-2 .ennu-dropdown__item--has-children:hover > .ennu-dropdown,
.ennu-dropdown--level-3 .ennu-dropdown__item--has-children:hover > .ennu-dropdown,
.ennu-dropdown--level-4 .ennu-dropdown__item--has-children:hover > .ennu-dropdown,
.ennu-dropdown--level-5 .ennu-dropdown__item--has-children:hover > .ennu-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) scale(1) !important;
    box-shadow:
        0 8px 16px -2px rgba(26, 39, 68, 0.12),
        0 20px 40px -4px rgba(26, 39, 68, 0.15),
        0 0 0 1px rgba(201, 169, 98, 0.15);
    transition:
        opacity 100ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 100ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

/* Ensure nested dropdown items with children have proper positioning */
.ennu-dropdown .ennu-dropdown__item--has-children,
.ennu-dropdown--nested .ennu-dropdown__item--has-children,
.ennu-dropdown .menu-item-has-children {
    position: relative;
}

/* Hover bridge for all nested levels */
.ennu-dropdown .ennu-dropdown__item--has-children::after,
.ennu-dropdown--nested .ennu-dropdown__item--has-children::after {
    content: '';
    position: absolute;
    top: 0;
    right: -15px;
    bottom: 0;
    width: 20px;
    pointer-events: none;
}

.ennu-dropdown .ennu-dropdown__item--has-children:hover::after,
.ennu-dropdown--nested .ennu-dropdown__item--has-children:hover::after {
    pointer-events: auto;
}

/* Left-side hover bridge for flipped dropdowns (level 3+) */
.ennu-dropdown--level-3 .ennu-dropdown__item--has-children::after,
.ennu-dropdown--level-4 .ennu-dropdown__item--has-children::after,
.ennu-dropdown--level-5 .ennu-dropdown__item--has-children::after {
    right: auto;
    left: -15px;
}

/* Level-specific z-index - each level higher than the last */
.ennu-dropdown--level-2 {
    z-index: var(--nav-z-nested-1);
}

.ennu-dropdown--level-3 {
    z-index: var(--nav-z-nested-2);
    /* Level 3+ dropdowns flip to left to prevent off-screen */
    left: auto !important;
    right: 100% !important;
    margin-left: 0 !important;
    margin-right: 6px !important;
    transform-origin: right top !important;
}

.ennu-dropdown--level-3::before {
    left: auto;
    right: 0;
    border-radius: 0 var(--nav-radius-lg) var(--nav-radius-lg) 0;
}

.ennu-dropdown--level-4 {
    z-index: var(--nav-z-nested-3);
    left: auto !important;
    right: 100% !important;
    margin-left: 0 !important;
    margin-right: 6px !important;
    transform-origin: right top !important;
}

.ennu-dropdown--level-4::before {
    left: auto;
    right: 0;
    border-radius: 0 var(--nav-radius-lg) var(--nav-radius-lg) 0;
}

.ennu-dropdown--level-5 {
    z-index: var(--nav-z-nested-4);
    left: auto !important;
    right: 100% !important;
    margin-left: 0 !important;
    margin-right: 6px !important;
    transform-origin: right top !important;
}

.ennu-dropdown--level-5::before {
    left: auto;
    right: 0;
    border-radius: 0 var(--nav-radius-lg) var(--nav-radius-lg) 0;
}

/* Flip to left if near right edge (via JS class) */
.ennu-dropdown--nested.ennu-dropdown--flip-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 6px;
    transform-origin: right top;
}

.ennu-dropdown--nested.ennu-dropdown--flip-left::before {
    left: auto;
    right: 0;
    border-radius: 0 var(--nav-radius-lg) var(--nav-radius-lg) 0;
}

/* Nested dropdown inner spacing */
.ennu-dropdown--nested .ennu-dropdown__inner {
    padding: 5px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Scrollbar styling for nested dropdowns */
.ennu-dropdown--nested .ennu-dropdown__inner::-webkit-scrollbar {
    width: 5px;
}

.ennu-dropdown--nested .ennu-dropdown__inner::-webkit-scrollbar-track {
    background: var(--nav-cream);
    border-radius: 3px;
}

.ennu-dropdown--nested .ennu-dropdown__inner::-webkit-scrollbar-thumb {
    background: var(--nav-gold-light);
    border-radius: 3px;
}

.ennu-dropdown--nested .ennu-dropdown__inner::-webkit-scrollbar-thumb:hover {
    background: var(--nav-gold);
}

/* Nested link styles - slightly smaller text at deeper levels */
.ennu-dropdown--nested .ennu-dropdown__link {
    font-size: 13px;
    padding: 10px 12px;
}

.ennu-dropdown--level-3 .ennu-dropdown__link,
.ennu-dropdown--level-4 .ennu-dropdown__link,
.ennu-dropdown--level-5 .ennu-dropdown__link {
    font-size: 13px;
    padding: 9px 11px;
}

/* External link icon in dropdowns */
.ennu-dropdown__external-icon {
    width: 11px;
    height: 11px;
    opacity: 0.4;
    flex-shrink: 0;
    margin-left: 4px;
    transition: opacity var(--nav-duration-fast) var(--nav-ease);
}

.ennu-dropdown__link:hover .ennu-dropdown__external-icon {
    opacity: 0.7;
}

/* ==========================================================================
   GLOBAL Z-INDEX OVERRIDES - Ensure menus appear above ALL content
   Critical: These rules guarantee dropdowns are never hidden behind content
   ========================================================================== */

/* Force header to be above all page content */
.ennu-header,
header.ennu-header {
    z-index: 99990 !important;
    position: sticky !important;
    position: -webkit-sticky !important;
}

/* Force all dropdowns to be above content - use extremely high z-index */
.ennu-header .ennu-dropdown,
.ennu-nav .ennu-dropdown,
.ennu-dropdown,
.ennu-user__dropdown {
    z-index: 99995 !important;
}

/* Nested dropdowns stack incrementally higher */
.ennu-dropdown .ennu-dropdown,
.ennu-dropdown--nested,
.ennu-dropdown--level-2 {
    z-index: 99996 !important;
}

.ennu-dropdown--level-3 {
    z-index: 99997 !important;
}

.ennu-dropdown--level-4,
.ennu-dropdown--level-5 {
    z-index: 99998 !important;
}

/* Mobile overlay and drawer above everything */
.ennu-overlay {
    z-index: 100000 !important;
}

.ennu-drawer {
    z-index: 100001 !important;
}

/* Ensure WordPress admin bar doesn't interfere when logged in */
body.admin-bar .ennu-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .ennu-header {
        top: 46px;
    }
}

/* Override any conflicting page content z-index */
.ennu-main,
.ennu-main > *,
main,
main > *,
.entry-content,
.entry-content > *,
article,
section {
    z-index: auto;
}

/* Ensure iframes/embeds don't overlap */
iframe,
embed,
object,
video {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   TOUCH DEVICE SUPPORT (iPad/Tablet)
   ========================================================================== */

/* iPad Landscape: Show desktop nav instead of hamburger menu */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .ennu-nav {
        display: flex !important;
    }
    
    .ennu-hamburger {
        display: none !important;
    }
    
    .ennu-user {
        display: flex !important;
    }
}

/* iPad Portrait: Optimize drawer for touch */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .ennu-drawer {
        width: 380px;
    }
    
    .ennu-drawer__link,
    .ennu-drawer__sublink {
        min-height: 48px;
        padding: 14px 20px;
        font-size: 16px;
    }
    
    .ennu-drawer__toggle {
        min-width: 48px;
        min-height: 48px;
    }
}

/* Touch devices: Show dropdown on focus/tap via JS class */
.ennu-nav__item.is-touched > .ennu-dropdown,
.ennu-nav__item.is-open > .ennu-dropdown,
.ennu-dropdown__item.is-touched > .ennu-dropdown,
.ennu-dropdown__item.is-open > .ennu-dropdown,
.ennu-dropdown__item.is-touched > .ennu-dropdown--nested,
.ennu-dropdown__item.is-open > .ennu-dropdown--nested {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Nested dropdowns on touch */
.ennu-dropdown__item.is-touched > .ennu-dropdown--nested,
.ennu-dropdown__item.is-open > .ennu-dropdown--nested {
    transform: translateX(0) scale(1) !important;
}

/* Increase touch targets on tablets */
@media (pointer: coarse) {
    .ennu-nav__link {
        min-height: 44px;
        padding: 12px 16px;
    }
    
    .ennu-dropdown__link {
        min-height: 44px;
        padding: 12px 14px;
    }
    
    .ennu-dropdown--nested .ennu-dropdown__link {
        min-height: 44px;
        padding: 11px 12px;
    }
}

/* ==========================================================================
   iPad Safari Dropdown Fix - Feb 2026
   Issue: Dropdowns hidden behind white content area on iPad
   Root cause: isolation:isolate + transform:translateZ(0) create stacking contexts
   ========================================================================== */

/* iPad-specific media query (covers most iPad models) */
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1366px)
    and (-webkit-min-device-pixel-ratio: 2) {
    
    /* Remove stacking context trap from header on iPad */
    .ennu-header {
        isolation: auto !important;
        transform: none !important;
        will-change: auto !important;
        z-index: 999999 !important;
    }
    
    /* Force dropdowns to be absolutely highest z-index */
    .ennu-dropdown,
    .ennu-nav .ennu-dropdown,
    .ennu-nav__item > .ennu-dropdown,
    .ennu-user__dropdown {
        z-index: 9999999 !important;
    }
    
    /* Ensure main content is pushed down in stacking order */
    .ennu-main {
        z-index: 1 !important;
        position: relative !important;
        isolation: auto !important;
    }
}

/* iPadOS 15+ uses different detection - use touch + width */
@supports (-webkit-touch-callout: none) {
    @media (pointer: coarse) and (min-width: 768px) and (max-width: 1400px) {
        .ennu-header {
            isolation: auto !important;
            transform: none !important;
            will-change: auto !important;
            z-index: 999999 !important;
        }
        
        /* CENTER DROPDOWNS ON SCREEN - iPad modal style */
        .ennu-dropdown,
        .ennu-nav .ennu-dropdown,
        .ennu-nav__item > .ennu-dropdown,
        .ennu-user__dropdown {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            z-index: 9999999 !important;
            max-height: 80vh !important;
            max-width: 90vw !important;
            overflow-y: auto !important;
            min-width: 300px !important;
            border-radius: 12px !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
        }
        
        .ennu-main {
            z-index: 1 !important;
        }
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
    .ennu-header,
    .ennu-overlay,
    .ennu-drawer {
        display: none !important;
    }
    
    .ennu-main {
        min-height: auto;
    }
}

/* ==========================================================================
   ADDITIONAL POLISH & REFINEMENTS
   ========================================================================== */

/* Smoother nav link transitions */
.ennu-nav__link {
    position: relative;
}

/* Active state indicator for current nav item */
.ennu-nav__item--current > .ennu-nav__link,
.ennu-nav__item.current-menu-item > .ennu-nav__link,
.ennu-nav__item.current-menu-ancestor > .ennu-nav__link {
    color: var(--nav-gold) !important;
}

.ennu-nav__item--current > .ennu-nav__link::after,
.ennu-nav__item.current-menu-item > .ennu-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: var(--nav-gold-gradient);
    border-radius: 2px;
}

/* Better focus states */
.ennu-nav__link:focus,
.ennu-dropdown__link:focus,
.ennu-user__trigger:focus,
.ennu-user__link:focus {
    outline: none;
}

/* Dropdown separator styling */
.ennu-dropdown__separator,
.ennu-dropdown__divider {
    height: 1px;
    margin: 6px 8px;
    background: var(--nav-border);
}

/* Group headers in dropdowns */
.ennu-dropdown__group-title {
    display: block;
    padding: 10px 14px 6px;
    font-size: 11px;
    font-weight: var(--nav-font-weight-semibold);
    color: var(--nav-slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Emoji in dropdown text - ensure proper sizing */
.ennu-dropdown__text img.emoji,
.ennu-dropdown__text .emoji {
    width: 1em !important;
    height: 1em !important;
    margin-right: 6px;
    vertical-align: -0.1em;
}

/* ==========================================================================
   DRAWER: Top bar section (mobile fallback for .ennu-topbar)
   Shows top-bar menu items inside the mobile drawer
   ========================================================================== */
.ennu-drawer__topbar-section {
    padding: 12px 20px;
    border-bottom: 1px solid var(--nav-border);
    background: rgba(0, 0, 0, 0.03);
}

.ennu-drawer__topbar-section .ennu-drawer__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ennu-drawer__topbar-section .ennu-drawer__list li {
    list-style: none !important;
}

.ennu-drawer__topbar-section .ennu-drawer__list a {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: var(--nav-font-weight-medium);
    color: var(--nav-slate);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ennu-drawer__topbar-section .ennu-drawer__list a:hover {
    color: var(--nav-navy);
    background: rgba(201, 169, 98, 0.12);
}