/* ============================================================
   site-nav.css — shared mobile cross-feature navigation drawer
   Single source of truth for the slide-out tool menu that lets a
   mobile visitor jump between EduFinder tools WITHOUT routing back
   through the homepage. Injected by site-nav.js and included by every
   static service page (shortlist, insight, pursuit, aid, resolve,
   roster, genius, challenge).

   These are CUSTOM classes (not Tailwind utilities), and this file is
   NOT part of the Tailwind @source glob, so editing it never requires
   rebuilding public/site-tailwind.css. The drawer styles are copied
   verbatim from public/index.html's proven inline drawer.
   ============================================================ */

/* The hamburger trigger injected into each service-page header.
   Mobile-only, mirroring index.html (desktop service pages keep their
   existing back-link-only header). Self-contained so it renders even if
   a Tailwind utility is ever missing from the prebuilt CSS. */
.site-nav-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    margin: -0.5rem 0.25rem -0.5rem -0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    color: #ffffff;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.site-nav-trigger:hover {
    color: #bfdbfe;
    background: rgba(255, 255, 255, 0.12);
}
.site-nav-trigger:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ── Mobile Slideout Drawer ── */
.mobile-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    z-index: 9998;
}
.mobile-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease;
}

.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 290px;
    max-width: 85vw;
    background: #111827; /* Dark Slate background */
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.28s;
    z-index: 9999;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-drawer.active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.35);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

@media (max-width: 1023px) {
    .site-nav-trigger {
        display: inline-flex;
    }
    .mobile-drawer-backdrop {
        display: block;
    }
    .mobile-drawer {
        display: flex;
    }
}

.mobile-drawer-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-drawer-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.mobile-drawer-logo {
    height: 37px;
    width: auto;
    max-width: 90%;
    display: block;
}
.mobile-drawer-content {
    padding: 1.25rem;
    flex: 1;
}

/* ── Accordion elements inside drawer ── */
.drawer-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 0;
}
.drawer-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.5rem 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}
.drawer-accordion-btn i.fa-chevron-down {
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.2s ease-in-out;
}
.drawer-accordion-btn.active i.fa-chevron-down {
    transform: rotate(180deg);
}
.drawer-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0 0.5rem;
}
.drawer-accordion-content.active {
    max-height: 1000px; /* High enough to display content */
}

/* ── Wizard sticky action bar (shortlist / pursuit / aid / resolve) ──
   On phones, pin the Back/Continue row to the bottom of the viewport so
   the primary action is always reachable without scrolling, and full-bleed
   it to the screen edges. Each wizard page adds the `wizard-action-bar`
   class to its existing button row; only those pages have the element, so
   shipping this rule in the shared stylesheet is harmless on the others.
   Desktop (>=1024px) keeps the original in-flow right-aligned row. */
@media (max-width: 1023px) {
    .wizard-action-bar {
        position: sticky;
        bottom: 0;
        z-index: 30;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
        border-top: 1px solid rgba(31, 41, 55, 0.08);
        box-shadow: 0 -8px 24px rgba(17, 24, 39, 0.06);
    }
}