/* ============================================================
   SITE CHROME — common header (site-nav) for EVERY page.
   Extracted from landing.css so the nav renders identically on the
   landing page and on portal/auth/app pages alike. Loaded after
   each page's own stylesheet. Landing.css keeps no copy.
   ============================================================ */

:root {
    --ln-cyan: #4cc8f0;
    --ln-night-line: rgba(140, 150, 255, 0.16);
    --ln-night-ink: #eef0ff;
    --ln-grad: linear-gradient(120deg, #2a2580 0%, #322fb3 45%, #4cc8f0 100%);
    --ln-ease: cubic-bezier(0.22, 1, 0.36, 1);
}





/* ============================================================
   NAVIGATION
   ============================================================ */
/* Relative (in-flow) by default; centered by the wrapper below. */
.ln-nav {
    position: relative;
    width: min(1180px, 96vw);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(42, 37, 128, 0.08);
    box-shadow: 0 10px 34px -14px rgba(42, 37, 128, 0.28);
    transition: background 0.45s var(--ln-ease), border-color 0.45s var(--ln-ease),
                box-shadow 0.45s var(--ln-ease), color 0.45s var(--ln-ease);
}
/* After scroll: lift out of flow and pin to the viewport top. */
.ln-nav--scrolled {
    position: fixed;
    top: calc(0.9rem + env(safe-area-inset-top, 0px));
    left: 50%;
    translate: -50% 0;
    background: rgba(11, 9, 48, 0.62);
    border-color: rgba(140, 150, 255, 0.18);
    box-shadow: 0 14px 44px -14px rgba(0, 0, 0, 0.55);
}
.ln-nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.6rem); }
.ln-nav-links a {
    position: relative;
    color: inherit; text-decoration: none;
    font-weight: 600; font-size: 1.125rem;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.15rem;
}
.ln-nav-links a::after {
    content: "";
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 2px; border-radius: 2px; background: var(--ln-grad);
    transition: right 0.3s var(--ln-ease);
}
.ln-nav-links a:hover::after,
.ln-nav-links a:focus-visible::after { right: 0; }
.ln-nav-login {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1.15rem; border-radius: 999px;
    background: var(--ln-grad); color: #fff;
    font-weight: 700; font-size: 0.92rem; text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(50, 47, 179, 0.6);
    transition: transform 0.25s var(--ln-ease), box-shadow 0.25s var(--ln-ease);
}
.ln-nav-login:hover { transform: translateY(-2px); }
.ln-nav--scrolled .ln-nav-links a { color: var(--ln-night-ink); }
.ln-burger {
    display: none;
    position: relative;
    width: 44px; height: 44px;
    border: 1px solid rgba(42, 37, 128, 0.15);
    border-radius: 12px;
    background: transparent; color: inherit;
    cursor: pointer;
    /* Deterministic 3-line grid: fixed 2px rows + even gaps, so the
       lines can't stretch apart (implicit rows would fill the 44px) and
       all render at identical height, left-aligned in the button. */
    grid-template-rows: repeat(3, 2px);
    row-gap: 5px;
    align-content: center;
    justify-items: start;
    padding-left: 11px;
}
.ln-burger span {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: currentColor; margin: 0;
    transition: transform 0.3s var(--ln-ease), opacity 0.2s;
}
/* Open state: outer lines are absolutely re-centered so they always
   cross exactly at the button middle (a translateY value would depend
   on row height / margins / box-sizing). */
.ln-burger[aria-expanded="true"] span:nth-child(1),
.ln-burger[aria-expanded="true"] span:nth-child(3) {
    position: absolute;
    top: 50%; left: 50%;
    margin: 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
.ln-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ln-burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }
.ln-menu {
    position: fixed; inset: 0; z-index: 1400; /* must sit ABOVE .ln-nav (1200) */
    display: grid; place-items: center;
    background: rgba(11, 9, 48, 0.97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden;
    /* visibility flips instantly on open (otherwise the menu is not
       focusable while the fade runs); on close it waits out the fade. */
    transition: opacity 0.35s var(--ln-ease), visibility 0s linear 0.35s;
}
.ln-menu[hidden] { display: none; }
.ln-menu.is-open {
    opacity: 1; visibility: visible;
    transition: opacity 0.35s var(--ln-ease), visibility 0s;
}
.ln-menu nav ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: clamp(0.9rem, 3vh, 1.6rem); text-align: center;
}
.ln-menu a {
    color: var(--ln-night-ink); text-decoration: none;
    font-size: 1.125rem; /* 18px */ font-weight: 400;
    letter-spacing: 0.06em;
}
.ln-menu a.is-active { color: var(--ln-cyan); }
.ln-menu-close {
    position: absolute; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem;
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(140, 150, 255, 0.3);
    background: transparent; color: #fff;
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.ln-menu-close:hover { border-color: rgba(140, 150, 255, 0.65); }
@media (max-width: 900px) {
    .ln-nav-links,
    .ln-nav-login { display: none; }
    .ln-burger { display: grid; }
    /* Small screens: header actions stay visible next to the burger,
       so account access never depends on opening the menu. */
    .ln-header-actions .ln-account { display: flex; }
    .ln-header-actions .ln-account-btn .ln-account-name { display: none; }
    .ln-header-actions .ln-account-btn .ln-account-chevron { display: none; }
}

/* ============================================================
   SITE NAVIGATION (frontend/partials/site-nav.php)
   Guest: brand + Login. Authenticated: brand + 5 links +
   account menu + burger/mobile menu. Server-side branch —
   the authenticated markup is NEVER sent to guests.
   ============================================================ */
.ln-header-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
.ln-nav .is-active {
    color: var(--ln-cyan);
    font-weight: 700;
}
.ln-nav .is-active::after {
    right: 0;
    opacity: 1;
    height: 3px;
    box-shadow: 0 2px 10px -2px rgba(76, 200, 240, 0.8);
}
/* Keep the active state legible when the nav is scrolled/over dark hero */
.ln-nav--scrolled .ln-nav .is-active,
.ln-nav--scrolled .is-active { color: var(--ln-accent, #322fb3); }

/* Active state in the mobile full-screen menu */
.ln-menu nav a.is-active {
    color: var(--ln-cyan);
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 2px;
}
.ln-nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    margin-left: 0.15rem;
    border-radius: 999px;
    background: var(--ln-grad);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: 2px;
}

/* Account (authenticated only) */
.ln-account {
    position: relative;
}
.ln-account-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem 0.3rem 0.35rem;
    border: 1px solid rgba(42, 37, 128, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    color: inherit;
    font: inherit;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: border-color 0.25s var(--ln-ease), box-shadow 0.25s var(--ln-ease);
}
.ln-account-btn:hover {
    border-color: rgba(76, 200, 240, 0.55);
    box-shadow: 0 6px 18px -8px rgba(50, 47, 179, 0.45);
}
.ln-account-name {
    font-size: 18px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.ln-account-chevron {
    width: 1rem; height: 1rem;
    opacity: 0.6;
    transition: transform 0.25s var(--ln-ease);
}
.ln-account-btn[aria-expanded="true"] .ln-account-chevron {
    transform: rotate(180deg);
}
.ln-account-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 13rem;
    padding: 0.5rem;
    border-radius: 14px;
    border: 1px solid var(--ln-night-line);
    background: rgba(11, 9, 48, 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.65);
    z-index: 1300;
}
.ln-account-menu a,
.ln-account-logout {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ln-night-ink);
    font: inherit;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 600;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}
.ln-account-menu a:hover,
.ln-account-logout:hover {
    background: rgba(140, 150, 255, 0.14);
}
.ln-account-logout {
    color: #ff9d9d;
}
.ln-account-sep {
    height: 1px;
    margin: 0.4rem 0.3rem;
    background: var(--ln-night-line);
}
.ln-account .ico {
    width: 1.05rem; height: 1.05rem;
    flex: none;
}

/* Account avatar (ws_avatar 'sm') inside the header — self-contained so
   pages that never load style.css (landing family) render it correctly. */
.ws-site-header .avatar {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    overflow: visible;
}
.ws-site-header .avatar img,
.ws-site-header .avatar .fallback {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.ws-site-header .avatar .fallback {
    display: grid;
    place-items: center;
    background: var(--ln-grad);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}
.ws-site-header .avatar .status {
    position: absolute;
    right: -1px; bottom: -1px;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--online, #34c759);
}

/* Mobile full-screen menu (authenticated only) */
@media (max-width: 900px) {
    .ln-nav-badge { vertical-align: 0; }
}

/* Desktop-first nav: hide top links below 900px, burger takes over */
@media (max-width: 900px) {
    .ln-nav-links { display: none; }
    .ln-nav .ln-burger { display: grid; }
}

/* ============================================================
   COMMON FOOTER (frontend/partials/site-footer.php)
   ============================================================ */
.ln-footer {
    padding: clamp(2.2rem, 5vw, 3.6rem) 1.5rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
    background: #0b0930;
    color: var(--ln-night-ink);
    border-top: 1px solid var(--ln-night-line);
}
.ln-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
}
.ln-footer-tagline {
    margin: 0;
    max-width: 34rem;
    color: rgba(238, 240, 255, 0.72);
    font-size: 0.95rem;
}
.ln-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 3vw, 1.8rem);
    margin-top: 0.2rem;
}
.ln-footer-nav a {
    color: rgba(238, 240, 255, 0.85);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.25rem 0.1rem;
    border-bottom: 2px solid transparent;
    transition: color 0.25s var(--ln-ease), border-color 0.25s var(--ln-ease);
}
.ln-footer-nav a:hover,
.ln-footer-nav a:focus-visible {
    color: #fff;
    border-bottom-color: var(--ln-cyan);
}
.ln-footer-copy {
    margin: 0.6rem 0 0;
    color: rgba(238, 240, 255, 0.55);
    font-size: 0.82rem;
}

/* Non-landing pages: nothing to reserve — the nav is in normal flow. */

/* ============================================================
   HEADER WRAPPER (.ws-site-header) — semantic shell around .ln-nav.
   Present on every page that renders the common header. The legacy
   gradient/sticky styling from style.css is intentionally reset here:
   the fixed pill nav keeps its own positioning.
   ============================================================ */
.ws-site-header {
    position: static;
    display: flex;
    justify-content: center;
    padding: calc(0.9rem + env(safe-area-inset-top, 0px)) 0.5rem 0;
    margin: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
}
.ws-site-header .container,
.ws-site-header .row,
.ws-site-header .col-12,
.ws-site-header .flex-center {
    padding: 0;
    min-height: 0;
}
/* Jump guard: while the nav is fixed (scrolled state), the wrapper keeps
   the exact height the nav occupied, so content never reflows. */
.ws-site-header:has(.ln-nav--scrolled) {
    min-height: calc(66px + env(safe-area-inset-top, 0px));
}

/* Legacy style.css gives .ws-sticky-header a fixed gradient bar. If any
   page's JS toggles that class onto this wrapper, neutralize it — the
   pill nav inside keeps its own positioning. */
.ws-site-header.ws-sticky-header {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    animation: none;
}

/* ============================================================
   NAV WIDTH BY SCREEN SIZE (kept LAST so it wins the cascade over
   every base rule above, incl. the .ws-site-header padding reset).
   Tablets + small screens (481–900px): the pill floats detached with
   clear gutters — never full width.
   Phones (≤480px): edge-to-edge bar (the scrolled fixed state becomes
   a flush app bar under the notch).
   ============================================================ */
@media (max-width: 900px) {
    /* border-box so the pill's own padding/border stay inside the
       measured width even on pages without a global box-sizing reset. */
    .ln-nav { width: min(1180px, calc(100vw - 4rem)); box-sizing: border-box; }
}
@media (max-width: 480px) {
    .ws-site-header { padding-left: 0; padding-right: 0; }
    .ln-nav { width: 100%; box-sizing: border-box; }
    .ln-nav--scrolled { top: env(safe-area-inset-top, 0px); }
}