/*
 * Copyright © 2023–2026 HoopFrog Inc. All rights reserved.
 *
 * site-header.css: the shared public-page header (HoopFrog), 2026-10-16.
 * The homepage navbar (logo, language menu, Log In, Get Started, theme menu) for every
 * public page. Markup: HEADER_SNIPPET.html. Behaviour: /js/site-header.js plus the
 * [data-lc-menu] handling in /js/dark-mode.js.
 *
 * Brand (Logo Package V3, owner 2026-10-14): emerald 600 #059669 for accents and focus,
 * emerald 700 #047857 where text or a filled button needs WCAG AA, emerald 400 #34D399
 * on dark. Text #0F172A. Dark mode uses the site's dark tokens (tokens.css --lc-dark-*).
 *
 * Every rule is scoped to .lc-site-header so the older per-page header CSS that may
 * still sit on a page (.header, .lang-dropdown, .theme-dd ...) cannot restyle it.
 */
.lc-site-header {
    --sh-bg: rgba(255, 255, 255, 0.94);
    --sh-border: rgba(5, 150, 105, 0.14);
    --sh-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
    --sh-text: #0F172A;
    --sh-muted: #475569;
    --sh-accent: #059669;
    --sh-ink: #047857;
    --sh-btn-bg: #047857;
    --sh-btn-text: #FFFFFF;
    --sh-btn-hover: #065F46;
    --sh-ghost-border: rgba(15, 23, 42, 0.28);
    --sh-menu-bg: #FFFFFF;
    --sh-menu-border: rgba(15, 23, 42, 0.08);
    --sh-menu-hover: #ECFDF5;
    --sh-badge-bg: #F1F5F9;
    --sh-badge-text: #475569;
    --sh-stripe: linear-gradient(90deg, #10B981, #059669, #047857, #34D399);
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--sh-bg);
    border-bottom: 1px solid var(--sh-border);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    font-family: var(--lc-font-body, 'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif);
    transition: box-shadow 0.25s ease;
}
html.dark-mode .lc-site-header {
    --sh-bg: rgba(22, 22, 42, 0.95);              /* --lc-dark-surface */
    --sh-border: var(--lc-dark-border, #333355);
    --sh-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    --sh-text: var(--lc-dark-text, #E8E8EF);
    --sh-muted: var(--lc-dark-text-dim, #C8C8D8);
    --sh-accent: #34D399;
    --sh-ink: #34D399;
    --sh-btn-bg: #047857;
    --sh-btn-text: #FFFFFF;
    --sh-btn-hover: #065F46;
    --sh-ghost-border: rgba(255, 255, 255, 0.34);
    --sh-menu-bg: var(--lc-dark-raised, #2A2A48);
    --sh-menu-border: var(--lc-dark-border-hi, #444466);
    --sh-menu-hover: var(--lc-dark-border, #333355);
    --sh-badge-bg: var(--lc-dark-border, #333355);
    --sh-badge-text: var(--lc-dark-text-dim, #C8C8D8);
}
.lc-site-header::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--sh-stripe);
    pointer-events: none;
}
.lc-site-header.scrolled { box-shadow: var(--sh-shadow); }

.lc-site-header .navbar {
    position: static;
    /* 10px (was 12): the controls grew 40 -> 44px for touch (2026-10-16), the bar keeps its height */
    padding: max(10px, calc(env(safe-area-inset-top) + 6px)) 0 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.lc-site-header .navbar__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.lc-site-header .navbar__brand {
    display: flex;
    align-items: center;
    line-height: 0;
    height: 44px;              /* 44px touch target (UX refresh 2026-10-16); the logo stays 40px */
    flex-shrink: 0;
    border-radius: 8px;
}
.lc-site-header .navbar__brand img {
    height: 40px !important;
    width: auto !important;
    display: block;
}
html.dark-mode .lc-site-header .navbar__brand img[alt="HoopFrog"] { content: url("/logo-v3-400.svg?v=20261016") !important; }

.lc-site-header .navbar__actions { display: flex; gap: 12px; align-items: center; }
/* Log In / Get Started for visitors, Dashboard when signed in (site-header.js): the
   pill styles below set display, so [hidden] needs saying explicitly. */
.lc-site-header [hidden] { display: none !important; }

/* Buttons: the homepage pills */
.lc-site-header .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;              /* touch target: 44 x 44 CSS px at least (UX refresh 2026-10-16) */
    min-width: 44px;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 100px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* A page's own .btn rules (full-width buttons in its content) must not reach the header. */
.lc-site-header .btn, .lc-site-header .lang-toggle { width: auto; max-width: none; min-width: 44px; margin: 0; flex: 0 0 auto; float: none; }
.lc-site-header .btn--primary {
    background: var(--sh-btn-bg);
    color: var(--sh-btn-text);
    border: 1.5px solid var(--sh-btn-bg);
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.28);
}
.lc-site-header .btn--primary:hover { background: var(--sh-btn-hover); border-color: var(--sh-btn-hover); color: var(--sh-btn-text); transform: translateY(-1px); }
.lc-site-header .btn--ghost {
    background: transparent;
    color: var(--sh-text);
    border: 1.5px solid var(--sh-ghost-border);
}
.lc-site-header .btn--ghost:hover { border-color: var(--sh-accent); color: var(--sh-ink); }

/* Language menu (homepage markup) */
.lc-site-header .lang-dropdown { position: relative; }
.lc-site-header .lang-dropdown::after { content: ''; position: absolute; top: 100%; left: -8px; right: -8px; height: 10px; }
.lc-site-header .lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    height: 44px;
    min-width: 44px;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: 100px;
    background: transparent;
    border: 1.5px solid var(--sh-ghost-border);
    color: var(--sh-text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.lc-site-header .lang-toggle:hover { border-color: var(--sh-accent); color: var(--sh-ink); }
.lc-site-header .lang-toggle .arrow { font-size: 0.65rem; transition: transform 0.2s; }
.lc-site-header .lang-dropdown.open .arrow,
.lc-site-header .lang-dropdown:hover .arrow { transform: rotate(180deg); }
.lc-site-header .lang-menu,
.lc-site-header .theme-dd-menu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    background: var(--sh-menu-bg);
    border: 1px solid var(--sh-menu-border);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    z-index: 1001;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.lc-site-header .lang-dropdown.open .lang-menu,
.lc-site-header .lang-dropdown:hover .lang-menu,
.lc-site-header .theme-dd.open .theme-dd-menu,
.lc-site-header .theme-dd:hover .theme-dd-menu { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.lc-site-header .lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--sh-text);
    cursor: pointer;
    transition: background 0.15s;
}
.lc-site-header .lang-option:hover { background: var(--sh-menu-hover); color: var(--sh-ink); }
.lc-site-header .lang-option.active { color: var(--sh-ink); font-weight: 700; background: var(--sh-menu-hover); }

/* Theme menu (homepage markup) */
.lc-site-header .theme-dd { position: relative; }
.lc-site-header .theme-dd::after { content: ''; position: absolute; top: 100%; left: -8px; right: -8px; height: 12px; }
.lc-site-header .theme-dd-trigger {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    border-radius: 50%;
    background: none;
    border: 1.5px solid var(--sh-ghost-border);
    color: var(--sh-text);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
}
.lc-site-header .theme-dd:hover .theme-dd-trigger,
.lc-site-header .theme-dd.open .theme-dd-trigger { border-color: var(--sh-accent); color: var(--sh-ink); }
.lc-site-header .theme-dd-heading { margin: 0; padding: 10px 14px 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sh-muted); }
.lc-site-header .theme-dd-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; min-height: 44px; padding: 9px 14px;
    border: 0; background: none; text-align: left; cursor: pointer;
    font-family: inherit; font-size: 0.9rem; font-weight: 500;
    color: var(--sh-text);
    transition: background 0.15s;
}
.lc-site-header .theme-dd-item:hover { background: var(--sh-menu-hover); color: var(--sh-ink); }
.lc-site-header .theme-dd-item.active { color: var(--sh-ink); font-weight: 700; }
.lc-site-header .theme-dd-icon { width: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.lc-site-header .theme-dd-label { flex: 1; display: flex; align-items: center; gap: 6px; }
.lc-site-header .theme-dd-badge { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--sh-badge-bg); color: var(--sh-badge-text); border-radius: 20px; padding: 1px 6px; }
.lc-site-header .theme-dd-check { font-size: 0.8rem; color: var(--sh-ink); opacity: 0; margin-left: auto; }
.lc-site-header .theme-dd-item.active .theme-dd-check { opacity: 1; }

/* dark-mode.css forces its own colours on these header controls with !important (written
   for the older per-page headers). Inside this header the header's own tokens win. */
html.dark-mode .lc-site-header .btn--ghost { color: var(--sh-text) !important; border-color: var(--sh-ghost-border) !important; background: transparent !important; }
html.dark-mode .lc-site-header .btn--ghost:hover { color: var(--sh-ink) !important; border-color: var(--sh-accent) !important; }
html.dark-mode .lc-site-header .lang-toggle { color: var(--sh-text) !important; border-color: var(--sh-ghost-border) !important; background: transparent !important; }
html.dark-mode .lc-site-header .lang-toggle:hover { color: var(--sh-ink) !important; border-color: var(--sh-accent) !important; }
html.dark-mode .lc-site-header .lang-menu,
html.dark-mode .lc-site-header .theme-dd-menu { background: var(--sh-menu-bg) !important; border-color: var(--sh-menu-border) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important; }
html.dark-mode .lc-site-header .lang-option { color: var(--sh-text) !important; }
html.dark-mode .lc-site-header .lang-option:hover,
html.dark-mode .lc-site-header .lang-option.active { background: var(--sh-menu-hover) !important; color: var(--sh-ink) !important; }
html.dark-mode .lc-site-header .theme-dd-trigger { color: var(--sh-text) !important; border-color: var(--sh-ghost-border) !important; }
html.dark-mode .lc-site-header .theme-dd:hover .theme-dd-trigger,
html.dark-mode .lc-site-header .theme-dd.open .theme-dd-trigger { color: var(--sh-ink) !important; border-color: var(--sh-accent) !important; }
html.dark-mode .lc-site-header .theme-dd-heading { color: var(--sh-muted) !important; }
html.dark-mode .lc-site-header .theme-dd-item { color: var(--sh-text) !important; }
html.dark-mode .lc-site-header .theme-dd-item:hover { background: var(--sh-menu-hover) !important; color: var(--sh-ink) !important; }
html.dark-mode .lc-site-header .theme-dd-item.active { color: var(--sh-ink) !important; }
html.dark-mode .lc-site-header .theme-dd-badge { background: var(--sh-badge-bg) !important; color: var(--sh-badge-text) !important; }

/* Focus: emerald 600 ring, visible on both backgrounds */
.lc-site-header a:focus-visible,
.lc-site-header button:focus-visible { outline: 3px solid var(--sh-accent); outline-offset: 2px; }

/* Phones: same wrap rules as the homepage. A control may move to a second row,
   never off the screen. */
@media (max-width: 640px) {
    .lc-site-header .lang-menu { right: auto; left: 0; max-width: calc(100vw - 2rem); }
}
@media (max-width: 600px) {
    /* Two rows on a phone: sticky, they covered the text a link jumps to (the FAQ found
       this first, 2026-10-16). On phones the header scrolls away with the page. */
    .lc-site-header { position: relative; }
    .lc-site-header .navbar__inner { flex-wrap: wrap; padding: 0 16px; row-gap: 6px; }
    .lc-site-header .navbar__brand { margin-right: auto; }
    .lc-site-header .navbar__actions { order: 1; width: 100%; gap: 8px; justify-content: flex-end; }
    .lc-site-header .btn { padding: 0 14px; font-size: 0.8rem; }
    .lc-site-header .lang-toggle { padding: 0 10px; font-size: 0.8rem; }
    .lc-site-header .lang-toggle .arrow { display: none; }
    /* the Appearance button keeps its 44px target on phones too (was 40px) */
}
@media (max-width: 380px) {
    .lc-site-header .navbar__actions { flex-wrap: wrap; gap: 6px; }
    .lc-site-header .btn { padding: 0 10px; font-size: 0.78rem; }
    .lc-site-header .lang-toggle { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .lc-site-header, .lc-site-header * { transition: none !important; }
}