/*
 * 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;
}

