/*
 * m2k-fixes.css
 * Shared scroll & layout-shift fixes for all m2k pages.
 */

/* ── 1. Scrollbar gutter fix ─────────────────────────────────────────────────
   Always reserve space for the vertical scrollbar so the page width never
   changes when the scrollbar appears / disappears (e.g. during loading or
   when a popup opens). This eliminates the horizontal "shake / jump" on all
   m2k pages.
   ─────────────────────────────────────────────────────────────────────── */
html {
    overflow-y: scroll;               /* legacy browsers */
    scrollbar-gutter: stable;         /* modern browsers — reserves gutter without forcing scroll */
}

/* ── 2. Prevent horizontal overflow ─────────────────────────────────────────
   Stops any element wider than the viewport from creating an unwanted
   horizontal scrollbar, which also causes the vertical scrollbar to
   appear/disappear and shake the page.
   ─────────────────────────────────────────────────────────────────────── */
body {
    overflow-x: hidden;
}

/* ── 3. Smooth scrolling ─────────────────────────────────────────────────────
   Enables smooth scrolling for all anchor (#) links across m2k pages.
   ─────────────────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── 4. Stable scroll padding for fixed header ───────────────────────────────
   Prevents anchors from being hidden behind the fixed nav bar when scrolled.
   ─────────────────────────────────────────────────────────────────────── */
html {
    scroll-padding-top: 80px; /* adjust if nav height differs */
}

/* ── 5. Accordion & Dropdown styles for Header Nav & Directory ───────────── */
.accordion-checkbox,
.sub-accordion-checkbox {
    display: none !important;
}

.accordion-toggle,
.sub-accordion-toggle {
    cursor: pointer;
    user-select: none;
}

/* Ensure hidden accordion panel expands when checkbox is checked */
.accordion-checkbox:checked ~ .accordion-panel {
    display: block !important;
    max-height: 1000px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Desktop & Directory sub-menu styling for Founder Enablers and nested items */
#menu .grandchild,
#menu-directory .sub-menu {
    list-style: none;
}

#menu .grandchild li a,
#menu-directory .sub-menu li a {
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

#menu .grandchild li a:hover,
#menu-directory .sub-menu li a:hover {
    opacity: 0.85;
}

/* ── 6. Directory readability ────────────────────────────────────────────────
   The Directory heading, link text, link underlines and accordion chevrons
   inherit the dark navy (#0A1539) brand color. Swap them to a neutral dark
   gray that reads clearly on white, with light underlines.
   ─────────────────────────────────────────────────────────────────────── */
section.directory,
section.directory nav ul li a,
section.directory .accordion-toggle,
section.directory .sub-accordion-toggle {
    color: #1F2937;
}

section.directory .accordion-toggle:hover,
section.directory .sub-accordion-toggle:hover,
section.directory .accordion-toggle:focus,
section.directory .sub-accordion-toggle:focus {
    color: #ED8E0C; /* saffron accent on hover */
}

section.directory nav > ul > li > a,
section.directory nav > ul > li ul li a,
section.directory .menu-item-accordion .accordion-toggle {
    border-bottom-color: #E2E8F0;
}

section.directory .menu-item-accordion .accordion-toggle .accordion-chevron {
    border-right-color: #1F2937;
    border-bottom-color: #1F2937;
}

/* ── Header nav: auto-close after redirect ──────────────────────────────────
   Force-hides a top-level submenu that is open via hover/active immediately
   after one of its links is clicked (the pointer is still over the menu, so
   plain :hover keeps it open). The suppressed state is cleared by nav-close.js
   on the next hover of any top-level item.
   ─────────────────────────────────────────────────────────────────────── */
header.main-header nav > ul > li.nav-suppressed > ul.child {
    opacity: 0 !important;
    transform: scaleY(0) !important;
    filter: blur(0) !important;
    pointer-events: none !important;
}

/* ── 7. Header Navigation: Active Hover & Dropdown States ───────────────────── */

/* Top-level Nav Links transition & relative positioning */
header.main-header nav > ul > li > a {
    position: relative;
    transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease !important;
}

header.main-header nav > ul > li > a > span:not(.icon) {
    position: relative;
    display: inline-block;
}

/* Indicator line EXACTLY under top-level nav link text on hover & active state */
header.main-header nav > ul > li > a > span:not(.icon)::after,
header.main-header nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: currentColor;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width 0.25s ease, opacity 0.25s ease;
    opacity: 0;
}

header.main-header nav > ul > li > a::after {
    bottom: 12px;
}

header.main-header nav > ul > li:hover > a > span:not(.icon)::after,
header.main-header nav > ul > li > a:focus > span:not(.icon)::after,
header.main-header nav > ul > li > a.active > span:not(.icon)::after,
header.main-header nav > ul > li.active-page > a > span:not(.icon)::after,
header.main-header nav > ul > li:hover > a::after,
header.main-header nav > ul > li > a:focus::after,
header.main-header nav > ul > li > a.active::after,
header.main-header nav > ul > li.active-page > a::after {
    width: 100% !important;
    opacity: 1 !important;
}

/* Hover & Focus state opacity & lift for top-level links */
header.main-header nav > ul > li:hover > a,
header.main-header nav > ul > li > a:hover,
header.main-header nav > ul > li > a:focus {
    opacity: 1 !important;
}

/* Hover indicator colors matching menu themes */
header.main-header nav > ul > li.menu-theme-green:hover > a > span:not(.icon)::after,
header.main-header nav > ul > li.menu-theme-green:hover > a::after,
header.main-header nav > ul > li:nth-child(1):hover > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(1):hover > a::after,
header.main-header nav > ul > li:nth-child(1).active-page > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(1).active-page > a::after {
    background-color: #4F81BD !important;
}

header.main-header nav > ul > li.menu-theme-pink:hover > a > span:not(.icon)::after,
header.main-header nav > ul > li.menu-theme-pink:hover > a::after,
header.main-header nav > ul > li:nth-child(2):hover > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(2):hover > a::after,
header.main-header nav > ul > li:nth-child(2).active-page > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(2).active-page > a::after {
    background-color: #F6E5CE !important;
}

header.main-header nav > ul > li.menu-theme-yellow:hover > a > span:not(.icon)::after,
header.main-header nav > ul > li.menu-theme-yellow:hover > a::after,
header.main-header nav > ul > li:nth-child(3):hover > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(3):hover > a::after,
header.main-header nav > ul > li:nth-child(3).active-page > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(3).active-page > a::after {
    background-color: #ED8E0C !important;
}

header.main-header nav > ul > li.menu-theme-orange:hover > a > span:not(.icon)::after,
header.main-header nav > ul > li.menu-theme-orange:hover > a::after,
header.main-header nav > ul > li:nth-child(4):hover > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(4):hover > a::after,
header.main-header nav > ul > li:nth-child(4).active-page > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(4).active-page > a::after {
    background-color: #91A415 !important;
}

header.main-header nav > ul > li:nth-child(5):hover > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(5):hover > a::after,
header.main-header nav > ul > li:nth-child(5).active-page > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(5).active-page > a::after {
    background-color: #B5D0B2 !important;
}

header.main-header nav > ul > li.menu-theme-aqua:hover > a > span:not(.icon)::after,
header.main-header nav > ul > li.menu-theme-aqua:hover > a::after,
header.main-header nav > ul > li:nth-child(6):hover > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(6):hover > a::after,
header.main-header nav > ul > li:nth-child(6).active-page > a > span:not(.icon)::after,
header.main-header nav > ul > li:nth-child(6).active-page > a::after {
    background-color: #4F81BD !important;
}

/* Dropdown Menu (ul.child) Active Hover & Focus Display */
@media (min-width: 992px) {
    header.main-header nav > ul > li {
        position: relative;
    }

    /* Hide dropdown by default on desktop when not hovered & remove unwanted 66vh space */
    header.main-header nav > ul > li > ul.child {
        opacity: 0 !important;
        transform: scaleY(0) !important;
        transform-origin: top !important;
        pointer-events: none !important;
        visibility: hidden !important;
        min-height: auto !important;
        height: auto !important;
        padding: 2rem 4vw 2.5rem !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
        border-radius: 0 0 16px 16px !important;
        transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease, visibility 0.25s ease !important;
    }

    /* Ensure hovering over the parent LI or focus reveals dropdown smoothly */
    header.main-header nav > ul > li:not(.nav-suppressed):hover > ul.child,
    header.main-header nav > ul > li:not(.nav-suppressed):focus-within > ul.child,
    header.main-header nav > ul > li:not(.nav-suppressed) > a:hover + ul.child,
    header.main-header nav > ul > li:not(.nav-suppressed) > a:focus + ul.child {
        opacity: 1 !important;
        transform: scaleY(1) translateY(0) !important;
        filter: blur(0) !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    /* Submenu Link Hover & Focus Active State */
    header.main-header nav > ul > li ul.child > li > a,
    header.main-header nav > ul > li ul.child > li ul.grandchild > li > a {
        transition: background-color 0.2s ease, padding-left 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
        display: block;
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: 4px;
    }

    header.main-header nav > ul > li ul.child > li > a:hover,
    header.main-header nav > ul > li ul.child > li > a:focus,
    header.main-header nav > ul > li ul.child > li ul.grandchild > li > a:hover,
    header.main-header nav > ul > li ul.child > li ul.grandchild > li > a:focus {
        background-color: rgba(10, 21, 57, 0.08) !important;
        padding-left: 12px !important;
        font-weight: 600 !important;
        opacity: 1 !important;
    }

    header.main-header nav > ul > li ul.child > li > a.page-active,
    header.main-header nav > ul > li ul.child > li ul.grandchild > li > a.page-active {
        font-weight: 700 !important;
        background-color: rgba(10, 21, 57, 0.05) !important;
    }

    /* Accordion Toggle Hover State inside Nav Dropdown */
    header.main-header nav > ul > li ul.child .accordion-toggle,
    header.main-header nav > ul > li ul.child .sub-accordion-toggle {
        transition: background-color 0.2s ease, padding-left 0.2s ease, color 0.2s ease !important;
        padding: 8px 6px;
        border-radius: 4px;
    }

    header.main-header nav > ul > li ul.child .accordion-toggle:hover,
    header.main-header nav > ul > li ul.child .sub-accordion-toggle:hover {
        background-color: rgba(10, 21, 57, 0.08) !important;
        padding-left: 12px !important;
    }
}

/* ── Header & Footer Logo Round White Background ────────────────────────────────
   Adds a clean circular white background to both header and footer logos.
   ─────────────────────────────────────────────────────────────────────── */
header.main-header .logo img,
header.main-header .logo a img,
.footer-logo img,
.footer-logo a img {
    background-color: #FFFFFF !important;
    border-radius: 50% !important;
    padding: 4px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}