/*
 * Shared site header for elglide.com and docs.elglide.com (.sn-*).
 *
 * One header on every landing and docs page: Product, Solutions, Why Elglide,
 * Pricing, Resources, then Sign in / Register. The markup is identical on each
 * page (links are absolute so it works on both hosts); site-nav.js opens the
 * menus on click/tap and runs the phone menu. Its own class names, so it never
 * collides with home.css or styles.css, which each style their own page.
 */
/* The header is sticky, so anything else pinned to the top (the docs menus)
   and every in-page jump (#step-3, #pricing) sits below its height. */
:root { --sn-h: 68px; }
html { scroll-padding-top: calc(var(--sn-h) + 0.75rem); }

.sn-header {
    --sn-ink: #1c2024; --sn-soft: #3b4450; --sn-muted: #6c757d; --sn-line: #e6e9ee;
    --sn-blue: #0d6efd; --sn-blue-dark: #0a58ca; --sn-tint: #eef3ff; --sn-tint-line: #d3e0ff; --sn-bg-soft: #f6f8fb;
    position: sticky; top: 0; z-index: 60;
    background: #fff; border-bottom: 1px solid var(--sn-line);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px; line-height: 1.4; color: var(--sn-ink);
}
.sn-header a { text-decoration: none; }
.sn-inner {
    max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1rem;
    padding: 0.85rem max(1.25rem, env(safe-area-inset-right, 0px)) 0.85rem max(1.25rem, env(safe-area-inset-left, 0px));
}
.sn-logo { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; font-weight: 700; color: var(--sn-ink); margin-right: auto; }
.sn-logo img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }

.sn-nav { display: flex; align-items: center; gap: 0.35rem; }
.sn-item { position: relative; }
.sn-top {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.7rem; border-radius: 0.5rem;
    background: none; border: 0; font: inherit; font-weight: 500; white-space: nowrap; color: var(--sn-soft); cursor: pointer;
}
.sn-top:hover, .sn-item.is-open > .sn-top { color: var(--sn-blue); }
.sn-top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s; }
.sn-item.is-open > .sn-top svg { transform: rotate(180deg); }
.sn-top:focus-visible, .sn-panel a:focus-visible, .sn-burger:focus-visible, .sn-auth a:focus-visible { outline: 2px solid var(--sn-blue); outline-offset: 2px; }

.sn-panel {
    display: none; position: absolute; top: calc(100% + 0.6rem); left: 0; z-index: 61;
    background: #fff; border: 1px solid var(--sn-line); border-radius: 0.75rem;
    box-shadow: 0 18px 36px rgba(16, 24, 40, 0.10); padding: 1rem;
    /* An absolutely placed box shrinks to its narrowest content, which squeezed the
       single-list menus (Solutions, Why Elglide) to two or three words a line. Size every
       menu to its content instead, within sensible bounds. */
    width: max-content; min-width: 20rem; max-width: min(46rem, calc(100vw - 2rem));
}
.sn-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -0.8rem; height: 0.8rem; }
.sn-panel.is-right { left: auto; right: 0; }
.sn-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 1fr); gap: 1rem; }
.sn-group { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sn-muted); margin: 0 0.5rem 0.4rem; }
.sn-panel a.sn-link { display: block; padding: 0.4rem 0.5rem; border-radius: 0.45rem; color: var(--sn-ink); }
.sn-panel a.sn-link:hover { background: var(--sn-bg-soft); color: var(--sn-blue); }
.sn-link b { display: block; font-weight: 600; font-size: 0.9rem; }
.sn-link small { display: block; font-size: 0.78rem; color: var(--sn-muted); margin-top: 0.05rem; }
.sn-start {
    display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.9rem; padding: 0.7rem 0.85rem;
    border-radius: 0.6rem; background: var(--sn-tint); border: 1px solid var(--sn-tint-line); color: var(--sn-ink);
}
.sn-start:hover { border-color: var(--sn-blue); }
.sn-start svg { width: 20px; height: 20px; flex: none; margin-top: 0.1rem; fill: none; stroke: var(--sn-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sn-start b { display: block; color: var(--sn-blue-dark); font-size: 0.92rem; }
.sn-start small { display: block; color: var(--sn-soft); font-size: 0.8rem; }

.sn-auth { display: flex; flex: none; align-items: center; gap: 0; padding: 3px; border-radius: 999px; background: var(--sn-bg-soft); }
.sn-auth a { padding: 0.4rem 0.95rem; border-radius: 999px; font-size: 0.88rem; font-weight: 600; white-space: nowrap; color: var(--sn-soft); }
.sn-auth a:hover { color: var(--sn-ink); }
.sn-auth a.sn-register { background: var(--sn-blue); color: #fff; }
.sn-auth a.sn-register:hover { background: var(--sn-blue-dark); }

.sn-burger { display: none; width: 38px; height: 38px; border: 1px solid var(--sn-line); border-radius: 0.5rem; background: #fff; cursor: pointer;
    flex-direction: column; justify-content: center; gap: 5px; }
.sn-burger span { display: block; width: 16px; height: 2px; margin: 0 auto; background: var(--sn-ink); }
.sn-nav-register { display: none; }

@media (hover: hover) and (min-width: 600px) {
    .sn-item:hover > .sn-panel { display: block; }
    .sn-item:hover > .sn-top { color: var(--sn-blue); }
}
@media (min-width: 600px) {
    .sn-item.is-open > .sn-panel { display: block; }
}

/* The .98 upper bounds leave no gap between layouts at fractional widths (display
   scaling can report 859.03px, which a max-width of 859px would miss).

   Resources is the widest menu: under 960px, anchored to its own button, it would run
   off the left edge, so it hangs from the header's right edge and its columns shrink. */
@media (min-width: 600px) and (max-width: 959.98px) {
    .sn-inner { position: relative; }
    .sn-item-wide { position: static; }
    .sn-item-wide > .sn-panel.is-right { top: calc(100% - 0.5rem); right: 1.25rem; max-width: calc(100% - 2.5rem); }
    .sn-cols { grid-auto-columns: minmax(0, 1fr); }
}
/* Slightly tighter so one row still fits at 860px with a classic 15px scrollbar. */
@media (min-width: 860px) and (max-width: 959.98px) {
    .sn-inner { gap: 0.75rem; }
    .sn-nav { gap: 0.2rem; }
}
/* Too narrow for one row: logo and Sign in / Register on top, the menus on a second row. */
@media (min-width: 600px) and (max-width: 859.98px) {
    :root { --sn-h: 106px; }
    .sn-inner { flex-wrap: wrap; row-gap: 0.25rem; }
    .sn-nav { order: 1; flex: 0 0 100%; margin-left: -0.7rem; }
}

/* Phone: Sign in / Register stay in the top bar; the menu button opens one stacked
   list of the menus, each a tap-to-open section. */
@media (max-width: 599.98px) {
    .sn-inner { gap: 0.6rem; }
    .sn-auth a { padding: 0.4rem 0.7rem; }
    .sn-burger { display: flex; flex: none; order: 1; }
    .sn-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--sn-line); box-shadow: 0 18px 36px rgba(16, 24, 40, 0.10);
        max-height: calc(100vh - var(--sn-h)); overflow-y: auto;
        padding: 0.5rem max(1.25rem, env(safe-area-inset-right, 0px)) 1rem max(1.25rem, env(safe-area-inset-left, 0px)); }
    .sn-header.is-menu-open .sn-nav { display: flex; }
    .sn-item, .sn-nav > .sn-top { border-bottom: 1px solid var(--sn-line); }
    .sn-nav > .sn-top { border-radius: 0; }
    .sn-top { width: 100%; justify-content: space-between; padding: 0.8rem 0.25rem; font-size: 1rem; }
    .sn-panel { position: static; box-shadow: none; border: 0; padding: 0 0 0.75rem; width: auto; min-width: 0; max-width: none; }
    .sn-panel::before { display: none; }
    .sn-item.is-open > .sn-panel { display: block; }
    .sn-cols { grid-auto-flow: row; grid-auto-columns: auto; gap: 0.5rem; }
}
/* Smallest phones: both buttons do not fit beside the logo, so Register moves into the menu. */
@media (max-width: 349.98px) {
    .sn-auth .sn-register { display: none; }
    .sn-nav > .sn-nav-register { display: block; border-bottom: 0; color: var(--sn-blue); font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { .sn-top svg { transition: none; } }

/* status.js hides Register (and similar) for signed-in readers with [hidden]; a styled
   button's own display rule would otherwise show it anyway. */
[data-signed-out-only][hidden] { display: none !important; }