/**
 * Whitesand Beauty: Navigation (header notch, sanctuary dock, sanctuary menu)
 *
 * One source for the theme (enqueued in functions.php) and the preview server.
 * Glass surfaces (.ws-glass) are rendered by liquidGL (WebGPU/WebGL refraction) once it
 * has snapshotted the page; until then, and wherever WebGL is unavailable, the CSS
 * crystalline glass below is what visitors see. Monochrome only (DESIGN.md §6.7).
 */

/* ---------------------------------------------------------------- Tokens */
:root {
    --ws-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ws-glass-bg: rgba(255, 255, 255, 0.28);
    --ws-glass-edge: rgba(30, 30, 30, 0.10);
    --ws-glass-rim: rgba(255, 255, 255, 0.95);
    --ws-glass-rim-low: rgba(30, 30, 30, 0.05);
    --ws-glass-shadow: 0 12px 36px rgba(30, 30, 30, 0.12), 0 2px 6px rgba(30, 30, 30, 0.06);
    --ws-ink: #1E1E1E;
    --ws-ink-soft: rgba(30, 30, 30, 0.56);
    --ws-lens-hover: rgba(30, 30, 30, 0.06);
    --ws-lens-line: rgba(30, 30, 30, 0.10);
    --ws-solid-bg: #1E1E1E;
    --ws-solid-ink: #F9FEFF;
    --ws-tip-bg: rgba(30, 30, 30, 0.92);
    --ws-tip-ink: #F9FEFF;
    --ws-bridge: rgba(255, 255, 255, 0.62);
}

html.dark {
    --ws-glass-bg: rgba(18, 18, 18, 0.38);
    --ws-glass-edge: rgba(255, 255, 255, 0.14);
    --ws-glass-rim: rgba(255, 255, 255, 0.22);
    --ws-glass-rim-low: rgba(0, 0, 0, 0.4);
    /* Contact shadow only: the glass is near-transparent here, so a wide black shadow showed as a
       muddy ring on the near-black page instead of lift. The rims on ::after draw the edge. */
    --ws-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --ws-ink: #F9FEFF;
    --ws-ink-soft: rgba(249, 254, 255, 0.58);
    --ws-lens-hover: rgba(255, 255, 255, 0.08);
    --ws-lens-line: rgba(255, 255, 255, 0.12);
    --ws-solid-bg: #F9FEFF;
    --ws-solid-ink: #1E1E1E;
    --ws-tip-bg: rgba(249, 254, 255, 0.94);
    --ws-tip-ink: #1E1E1E;
    --ws-bridge: rgba(30, 30, 30, 0.7);
}

/* A light-theme surface floating over a dark section (hero, nocturne banners, footer) */
.ws-tone-dark {
    --ws-glass-bg: rgba(255, 255, 255, 0.08);
    --ws-glass-edge: rgba(255, 255, 255, 0.22);
    --ws-glass-rim: rgba(255, 255, 255, 0.35);
    --ws-glass-rim-low: rgba(0, 0, 0, 0.25);
    --ws-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --ws-ink: #F9FEFF;
    --ws-ink-soft: rgba(249, 254, 255, 0.62);
    --ws-lens-hover: rgba(255, 255, 255, 0.1);
    --ws-lens-line: rgba(255, 255, 255, 0.16);
    --ws-solid-bg: #F9FEFF;
    --ws-solid-ink: #1E1E1E;
}

/* Adaptive ink (liquid-glass-nav.js updateInk): over the WebGL glass the icons take whichever ink
   reads best on what is beneath. Only the ink changes; the glass tint stays as above. */
.ws-glass.ws-ink-dark {
    --ws-ink: #1E1E1E;
    --ws-ink-soft: rgba(30, 30, 30, 0.56);
    --ws-lens-hover: rgba(30, 30, 30, 0.06);
    --ws-lens-line: rgba(30, 30, 30, 0.10);
    --ws-solid-bg: #1E1E1E;
    --ws-solid-ink: #F9FEFF;
}
.ws-glass.ws-ink-light {
    --ws-ink: #F9FEFF;
    --ws-ink-soft: rgba(249, 254, 255, 0.62);
    --ws-lens-hover: rgba(255, 255, 255, 0.1);
    --ws-lens-line: rgba(255, 255, 255, 0.16);
    --ws-solid-bg: #F9FEFF;
    --ws-solid-ink: #1E1E1E;
}

/* ---------------------------------------------------------------- Glass surface */
.ws-glass {
    position: relative;
    isolation: isolate;
    color: var(--ws-ink);
    background: var(--ws-glass-bg);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow: var(--ws-glass-shadow);
    transition: color 0.45s ease, background-color 0.45s ease, box-shadow 0.45s ease;
}

/* Hairline edge + specular rims live on ::after so they stay visible above the liquidGL canvas */
.ws-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 25;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px var(--ws-glass-edge),
        inset 0 1px 1px var(--ws-glass-rim),
        inset 0 -1px 1px var(--ws-glass-rim-low);
    transition: box-shadow 0.45s ease;
}

/* Chamfer highlight along the top edge */
.ws-glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 1px;
    z-index: 26;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--ws-glass-rim), transparent);
    opacity: 0.8;
}

.ws-glass > * { position: relative; z-index: 30; }

/* While the WebGL glass is on its way (html.ws-glass-pending, set in <head>), the CSS glass takes its
   recipe instead of the frosted fallback: liquidGL's light frost and, in dark mode, its tint
   (liquid-glass-nav.js tintFor). The first paint is not milky and the handover is invisible. */
html.ws-glass-pending .ws-liquid-surface {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
html.ws-glass-pending .ws-hub.ws-liquid-surface {
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}
html.dark.ws-glass-pending .ws-liquid-surface {
    background: linear-gradient(rgba(18, 18, 18, 0.32), rgba(18, 18, 18, 0.32)), var(--ws-glass-bg);
}
/* Over a dark section the WebGL glass shows the dark beneath untinted in either theme (measured), so no base */
html.ws-glass-pending .ws-liquid-surface.ws-tone-dark {
    background: transparent;
}

/* ---------------------------------------------------------------- Icon lens (38×38, DESIGN §6.5) */
.ws-lens {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.45s var(--ws-ease), color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.ws-lens svg { width: 17px; height: 17px; stroke-width: 1.25; }
.ws-lens:hover { background: var(--ws-lens-hover); }
.ws-lens:active { transform: scale(0.94); }
.ws-lens:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

.ws-lens--solid {
    background: var(--ws-solid-bg);
    color: var(--ws-solid-ink);
}
.ws-lens--solid:hover { background: var(--ws-solid-bg); transform: translateY(-1px); }

/* Language glyph: «EN» / «فا» set in the brand faces instead of a globe */
.ws-lens__glyph {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
}
.ws-lens__glyph:lang(fa) { font-size: 14px; letter-spacing: 0; }

/* Theme icon: half-filled disc, flips with the theme */
.ws-theme-icon .ws-theme-icon__half { transition: transform 0.6s var(--ws-ease); transform-origin: 12px 12px; }
html.dark .ws-theme-icon .ws-theme-icon__half { transform: rotate(180deg); }

/* ---------------------------------------------------------------- Tooltips (hover only, never the sole label on touch) */
.ws-tip {
    position: absolute;
    z-index: 80;
    padding: 5px 11px;
    border-radius: 9999px;
    background: var(--ws-tip-bg);
    color: var(--ws-tip-ink);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.35s var(--ws-ease);
}

.ws-tip--below { top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); }
.ws-tip--side  { top: 50%; inset-inline-end: calc(100% + 14px); transform: translate(0, -50%); }

@media (max-width: 639px) {
    .ws-tip--side { top: auto; bottom: calc(100% + 12px); inset-inline-end: auto; left: 50%; transform: translate(-50%, 0); }
}

.ws-has-tip:hover > .ws-tip,
.ws-has-tip:focus-visible > .ws-tip { opacity: 1; }
.ws-has-tip:hover > .ws-tip--below { transform: translate(-50%, 0); }

@media (hover: none) {
    .ws-tip { display: none; }
}

/* ---------------------------------------------------------------- Header notch */
#ws-nav-notch {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    pointer-events: none;
}

.ws-notch {
    z-index: 30; /* above the liquidGL canvas that lives in #ws-nav-notch */
    display: flex;
    align-items: center;
    gap: 4px;
    height: 54px;
    padding: 0 8px;
    border-radius: 9999px;
    pointer-events: auto;
}

/* Spacing lives on the collapsible children (not the bar's gap): liquidGL pins the bar's own
   transition to none, so only child transitions animate the reshape. */
.ws-notch { gap: 0; }

.ws-notch__wing,
.ws-notch__mobile {
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 220px;
    margin-inline: 4px;
    overflow: visible;
    opacity: 1;
    transition: max-width 0.6s var(--ws-ease), opacity 0.35s ease, margin 0.6s var(--ws-ease);
}

.ws-notch__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 14px;
    color: inherit;
    text-decoration: none;
    border-radius: 9999px;
    transition: opacity 0.3s ease;
}
.ws-notch__brand:hover { opacity: 0.8; }
.ws-notch__brand:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.ws-notch__mark { height: 30px; width: auto; display: flex; }
.ws-notch__type { height: 20px; width: auto; display: flex; }
.ws-notch__mark svg,
.ws-notch__type svg { height: 100%; width: auto; }

.ws-notch__mobile { display: none; }

/* Compact pill floats over reading content: denser base so the mark stays crisp over text */
#ws-nav-notch.is-compact .ws-notch { --ws-glass-bg: rgba(255, 255, 255, 0.6); }
html.dark #ws-nav-notch.is-compact .ws-notch { --ws-glass-bg: rgba(18, 18, 18, 0.6); }
#ws-nav-notch.is-compact .ws-notch.ws-tone-dark { --ws-glass-bg: rgba(255, 255, 255, 0.08); }

/* Scrolled: the wings melt into the brand anchor, which stays as a compact glass pill */
#ws-nav-notch.is-compact .ws-notch__wing,
#ws-nav-notch.is-compact .ws-notch__mobile {
    max-width: 0;
    margin-inline: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

@media (max-width: 639px) {
    #ws-nav-notch { top: 12px; padding: 0 12px; }
    .ws-notch { height: 50px; padding: 0 6px; }
    .ws-notch__wing { display: none; }
    .ws-notch__mobile { display: flex; margin-inline: 2px; }
    .ws-notch__brand { padding: 0 8px; gap: 7px; }
    .ws-notch__mark { height: 26px; }
    .ws-notch__type { height: 17px; }
}

/* Signed-in staff: keep the header below WordPress's admin bar (32px; 46px at 782px and below, where
   it scrolls away under 600px, leaving the header a little lower than usual) */
.admin-bar #ws-nav-notch { top: calc(20px + 32px); }
@media (max-width: 782px) {
    .admin-bar #ws-nav-notch { top: calc(20px + 46px); }
}
@media (max-width: 639px) {
    .admin-bar #ws-nav-notch { top: calc(12px + 46px); }
    .admin-bar .ws-hub.is-from-header { top: calc(12px + 46px + 50px + 10px); }
}

/* ---------------------------------------------------------------- Component host */
liquid-glass-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* The intro owns the screen while it plays */
html.ws-intro-pending #ws-nav-notch,
body.ws-intro-active #ws-nav-notch,
html.ws-intro-pending liquid-glass-nav,
body.ws-intro-active liquid-glass-nav {
    display: none !important;
}

/* ---------------------------------------------------------------- Sanctuary dock (scrolled state) */
.ws-dock {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 20px;
    height: fit-content;
    margin-block: auto;
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 7px;
    border-radius: 9999px;
    pointer-events: auto;
}

/* Hidden surfaces are display:none, not clipped: a zero-size lens is skipped by liquidGL, while a
   clipped one keeps its full-viewport canvas redrawing every frame. */
.ws-dock:not(.is-visible) { display: none; }

.ws-dock__sep {
    width: 18px;
    height: 1px;
    margin: 2px 0;
    background: var(--ws-lens-line);
}

@media (max-width: 639px) {
    .ws-dock {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        inset-inline-end: 0;
        width: fit-content;
        height: auto;
        margin-inline: auto;
        margin-block: 0;
        flex-direction: row;
        padding: 6px;
    }
    .ws-dock__sep { width: 1px; height: 18px; margin: 0 2px; }
}

/* ---------------------------------------------------------------- Sanctuary menu (hub) */
.ws-hub-scrim {
    position: fixed;
    inset: 0;
    z-index: 56;
    background: rgba(18, 18, 18, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
html.dark .ws-hub-scrim { background: rgba(0, 0, 0, 0.35); }
.ws-hub-scrim.is-visible { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }

.ws-hub {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 88px;
    z-index: 58;
    width: 272px;
    height: fit-content;
    max-height: calc(100vh - 32px);
    margin-block: auto;
    padding: 10px;
    border-radius: 28px;
    overflow: hidden;
    pointer-events: auto;
}

.ws-hub:not(.is-visible) { display: none; }

/* The menu carries reading content: a denser glass base than the header and dock */
.ws-hub { --ws-glass-bg: rgba(255, 255, 255, 0.62); }
html.dark .ws-hub { --ws-glass-bg: rgba(18, 18, 18, 0.62); }
.ws-hub.ws-tone-dark { --ws-glass-bg: rgba(18, 18, 18, 0.45); }

.ws-hub__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 8px 14px;
}
[dir="rtl"] .ws-hub__head { padding: 2px 14px 8px 4px; }

.ws-hub__eyebrow {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ws-ink-soft);
}
.ws-hub__eyebrow:lang(fa) { letter-spacing: 0; text-transform: none; font-size: 12px; }

.ws-hub__close { width: 34px; height: 34px; }
.ws-hub__close svg { width: 14px; height: 14px; }

.ws-hub__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ws-hub__link {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 12px 0 6px;
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
[dir="rtl"] .ws-hub__link { padding: 0 6px 0 12px; }
.ws-hub__link:hover,
.ws-hub__link:focus-visible { background: var(--ws-lens-hover); outline: none; }
.ws-hub__link.is-current .ws-hub__label { font-weight: 500; }

.ws-hub__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px var(--ws-lens-line);
}
.ws-hub__icon svg { width: 16px; height: 16px; stroke-width: 1.25; }

.ws-hub__label { font-size: 14px; font-weight: 400; line-height: 1.3; }
.ws-hub__index {
    font-family: 'SF Mono', 'Fira Code', Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ws-ink-soft);
    direction: ltr;
}

.ws-hub__rule { height: 1px; margin: 8px 6px; background: var(--ws-lens-line); }

.ws-hub__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 9999px;
    background: var(--ws-solid-bg);
    color: var(--ws-solid-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.45s var(--ws-ease), opacity 0.3s ease;
}
.ws-hub__cta svg { width: 16px; height: 16px; }
.ws-hub__cta:hover { transform: translateY(-1px); }
.ws-hub__cta:active { transform: scale(0.98); }
.ws-hub__cta:focus-visible { outline: 1px solid var(--ws-ink); outline-offset: 3px; }

/* Mobile: the menu rises as a sheet above the bottom dock */
@media (max-width: 639px) {
    .ws-hub {
        top: auto;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        inset-inline-end: 12px;
        width: auto;
        max-width: 440px;
        margin-inline: auto;
        margin-block: 0;
        max-height: calc(100svh - 120px);
        overflow-y: auto;
        border-radius: 26px;
    }
    /* Opened from the header's menu button: the sheet drops down under the header instead */
    .ws-hub.is-from-header {
        top: calc(12px + 50px + 10px);
        bottom: auto;
    }
    .ws-hub__list { grid-template-columns: 1fr 1fr; }
    .ws-hub__link { grid-template-columns: 32px 1fr; height: 50px; }
    .ws-hub__index { display: none; }
}

/* Liquid bridge between the dock trigger and the opening menu */
#ws-liquid-bridge {
    position: fixed;
    inset: 0;
    z-index: 57;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
#ws-liquid-bridge path { fill: var(--ws-bridge); }

/* ---------------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #ws-nav-notch,
    .ws-notch__wing,
    .ws-lens,
    .ws-hub__cta,
    .ws-hub-scrim,
    .ws-theme-icon .ws-theme-icon__half {
        transition: none !important;
    }
}