/* ==========================================================
   Shared site chrome: hamburger menu (top-right) + site footer
   ----------------------------------------------------------
   Used by index.html, about.html, quiz.html, thank-you.html and
   generatenotes/index.html. Self-contained on purpose: it must not
   depend on style.css or quiz.css, because those two never load on
   the same page.
   ========================================================== */

.site-nav {
    --sn-blue: #0B2A5B;
    --sn-orange: #FF6B00;
    --sn-ink: #16243d;
    --sn-muted: #5b6b85;
    --sn-line: #e3e8f0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Toggle button ------------------------------------------------ */
.site-nav-toggle {
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 9995;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    background: rgba(11, 42, 91, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(11, 42, 91, 0.25);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.site-nav-toggle:hover {
    background: var(--sn-orange);
    transform: translateY(-1px);
}

.site-nav-toggle:focus-visible {
    outline: 3px solid var(--sn-orange);
    outline-offset: 2px;
}

/* Pages with the fixed urgency banner put the button just below it. */
.top-bar ~ .site-nav .site-nav-toggle {
    top: 58px;
}

.site-nav-bars {
    display: block;
    width: 20px;
    height: 14px;
    position: relative;
}

.site-nav-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-nav-bars span:nth-child(1) { top: 0; }
.site-nav-bars span:nth-child(2) { top: 6px; }
.site-nav-bars span:nth-child(3) { top: 12px; }

.site-nav-toggle[aria-expanded="true"] .site-nav-bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.site-nav-toggle[aria-expanded="true"] .site-nav-bars span:nth-child(2) {
    opacity: 0;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- Backdrop ----------------------------------------------------- */
.site-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9993;
    background: rgba(10, 22, 40, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* --- Panel -------------------------------------------------------- */
.site-nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9994;
    width: min(320px, 86vw);
    overflow-y: auto;
    padding: 72px 24px 32px;
    background: #ffffff;
    box-shadow: -12px 0 40px rgba(11, 42, 91, 0.22);
    animation: site-nav-slide-in 0.22s ease-out;
}

@keyframes site-nav-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-panel { animation: none; }
    .site-nav-bars span { transition: none; }
}

.site-nav-brand {
    display: block;
    margin-bottom: 22px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--sn-blue);
    text-decoration: none;
    line-height: 1.3;
}

.site-nav-heading {
    margin: 22px 0 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sn-muted);
}

.site-nav-heading:first-of-type {
    margin-top: 0;
}

.site-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--sn-line);
}

.site-nav-list li {
    border-bottom: 1px solid var(--sn-line);
}

.site-nav-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sn-ink);
    text-decoration: none;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.site-nav-list a:hover,
.site-nav-list a:focus-visible {
    color: var(--sn-orange);
    padding-left: 8px;
}

.site-nav-icon {
    width: 22px;
    text-align: center;
    font-size: 1rem;
    flex: 0 0 22px;
}

.site-nav-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--sn-muted);
}

.site-nav-contact {
    margin-top: 6px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--sn-muted);
}

.site-nav-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sn-blue);
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}

.site-nav-contact-icon {
    flex: 0 0 auto;
    opacity: 0.85;
}

.site-nav-contact a:hover {
    color: var(--sn-orange);
    text-decoration: underline;
}

/* ==========================================================
   Shared site footer (E-E-A-T: who runs this site + how to reach us)
   ========================================================== */
.site-footer {
    padding: 40px 20px 32px;
    background: #0a1628;
    color: rgba(255, 255, 255, 0.68);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
}

.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px 32px;
    text-align: left;
}

.site-footer h2 {
    margin: 0 0 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
}

.site-footer p {
    margin: 0 0 10px;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer li {
    margin-bottom: 6px;
}

.site-footer a {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--memory-orange, #FF6B00);
    border-color: var(--memory-orange, #FF6B00);
}

.site-footer-brand strong {
    display: block;
    margin-bottom: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #ffffff;
}

.site-footer-contact-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-footer-contact-icon {
    flex: 0 0 auto;
    opacity: 0.8;
}

.site-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.site-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    font-size: 1rem;
}

.site-footer-bottom {
    max-width: 1100px;
    margin: 26px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* The landing page has a sticky CTA bar pinned to the bottom on mobile;
   keep the footer's last line clear of it. */
.site-footer.has-sticky-cta {
    padding-bottom: 96px;
}

/* --- Landing page: no hamburger on mobile ------------------------- */
/* On phones the toggle lands right on top of the hero offer block and gives
   the reader an exit route out of the funnel. The landing page is the only
   page with the urgency .top-bar, so this selector scopes the hide to it —
   about / quiz / resources / thank-you / generatenotes keep their menu,
   because there it is the only navigation they have. Everything in the
   panel (Home, About, FAQ, Coach, the free tools, contact) is also in the
   site footer, so nothing becomes unreachable. */
@media (max-width: 768px) {
    .top-bar ~ .site-nav {
        display: none;
    }
}

@media (max-width: 576px) {
    .site-footer-inner {
        gap: 22px;
    }
    .site-nav-panel {
        padding: 68px 20px 28px;
    }
}