/* ═══════════════════════════════════════════════════════════════
   D12 — Navbar "Šanón" (ring-binder / lever-arch folder), variant B
   "Brúsený kov" (brushed metal).

   Ported from design-variants/D12-navbar-sanon-arena.html, variant B
   only — the `[data-variant="b"]` gating used in the prototype (to
   let the offline arena page switch between A/B/C/D) has been
   stripped: this file is the ONLY navbar rendered on the live site,
   so every selector targets `.sanon-bar` directly.

   Texture: images/jsagency/navbar/sanon/tst4.png — a reference /
   placeholder AI-generated brushed-metal texture (not final art
   yet; a client note already on record flags that pixel-perfect
   alignment between texture and link overlay may need a follow-up
   visual pass once the client supplies production-quality source
   art — this port does not attempt to force perfect alignment).

   Client-requested tweak vs. the prototype: LARGER text in the
   šanón menu rows ("väčší text"). See the `.sanon-link--primary`
   and `.sanon-link--secondary` font-size clamp()s below — both are
   bumped roughly +20–26% over the prototype's values (exact numbers
   noted inline).

   Colors reuse css/premium.css's :root tokens (--ink, --white,
   --accent, --border, --muted, --ease-out) wherever the prototype's
   own palette matched them; the prototype's gold/metal hex values
   (#f4e0ac, #b8873c, rgba(201,162,85,*)) are kept as-is since they
   are the same warm-gold family as --accent (#c9a255), just used as
   gradient stops that :root doesn't have tokens for.

   Below 992px (Bootstrap's `lg` breakpoint, matching the site's
   existing navbar-expand-lg/xl convention) the desktop šanón is
   replaced by the mobile artwork `tst4copy.png`. Its baked-in logo
   remains a clickable home hit-area, while the original `<ul id="menu">`
   stays available for the existing slicknav-driven menu.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Desktop / mobile slot switch ─────────────────────────────── */
.sanon-desktop-slot {
    display: block;
    width: 100%;
    flex: 1 1 auto;
}

.sanon-mobile-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    flex: 1 1 auto;
}

@media (max-width: 991.98px) {
    .sanon-desktop-slot {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .sanon-mobile-slot {
        display: none !important;
    }
}

/* ─── Stage — fixed-ratio frame that holds the šanón bar art ───── */
.sanon-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    background: var(--ink);
    border: 1px solid rgba(201, 162, 85, 0.25);
    box-shadow:
        0 24px 50px -12px rgba(0, 0, 0, 0.65),
        0 8px 20px rgba(0, 0, 0, 0.4);
    /* Matches the source art's native ratio (measured from tst4.png) */
    aspect-ratio: 2172 / 167;
}

.sanon-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-image: url('../images/jsagency/navbar/sanon/sanon_desktop.webp');
    background-image: image-set(
        url('../images/jsagency/navbar/sanon/sanon_desktop.webp') type('image/webp')
    );
    /* Per-variant-B coordinate custom properties (measured from tst4.png) */
    --pri-x: 26.75%;
    --sec-x: 60.5%;
    --cta-x: 82%;
}

/* Invisible hit-area over the baked-in logo plaque (top-left). Kept
   narrower than --pri-x so it can't intercept clicks meant for the
   first nav link. */
.sanon-logo-hit {
    position: absolute;
    left: 0;
    top: 0;
    width: 7%;
    height: 100%;
    display: block;
}

.sanon-logo-hit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
}

/* Semantic grouping only — the source art draws two separate line
   groups (services left of the hole, secondary links right of it),
   so primary/secondary are positioned independently via --pri-x /
   --sec-x rather than pushed apart with justify-content. Custom
   properties still cascade through display:contents to children. */
.sanon-row {
    display: contents;
}

/* Each row's vertical position in the tst4.png source art (measured
   per-row, variant B only). */
.sanon-row:nth-child(2) {
    --row-y: 21%;
}

.sanon-row:nth-child(3) {
    --row-y: 41%;
}

.sanon-row:nth-child(4) {
    --row-y: 61%;
}

.sanon-link {
    position: absolute;
    top: var(--row-y, 50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'Manrope', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s var(--ease-out), text-shadow 0.2s var(--ease-out);
}

.sanon-link--primary {
    left: var(--pri-x, 10%);
    position: absolute;
    isolation: isolate;
    /* Prototype: clamp(0.56rem, 0.85vw, 0.68rem) (8.96–10.88px).
       Client asked for larger row text ("väčší text") — bumped to
       clamp(0.68rem, 1.05vw, 0.86rem) (10.88–13.76px), ~21–26% larger. */
    /* font-size: clamp(0.68rem, 1.05vw, 0.86rem); */
    font-size: clamp(0.58rem, 0.88vw, 0.72rem);
    font-weight: 800;
    color: #f4e0ac;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    padding: 0.15em 0.45em;
}

.sanon-link--secondary {
    left: var(--sec-x, 55%);
    /* Prototype: clamp(0.48rem, 0.7vw, 0.58rem) (7.68–9.28px).
       Bumped to clamp(0.58rem, 0.88vw, 0.72rem) (9.28–11.52px),
       ~20–24% larger, keeping the primary/secondary size ratio. */
    font-size: clamp(0.58rem, 0.88vw, 0.72rem);
    font-weight: 600;
    color: rgba(201, 162, 85, 0.72);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Current service page — compact opaque foil plaque. The active class is
   supplied by header.php from the current PHP route, so the highlight is
   not permanently stuck to the first service row. */
.sanon-link--primary.is-active {
    background: linear-gradient(135deg, #f4e0ac, var(--accent) 65%, #b8873c);
    color: var(--ink);
    border-radius: 2px;
    line-height: 1.15;
    padding: 0.04em 0.32em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 4px rgba(0, 0, 0, 0.35);
    text-shadow: none;
}

/* Shared hover "sweep" — a transform-origin:left scaleX fill grows
   left→right on hover-in and, sharing the same origin, naturally
   retracts right→left on hover-out. */
.sanon-link--primary::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.13em;
    bottom: auto;
    left: 0.13em;
    height: calc(1.15em + 0.08em);
    background: rgba(244, 224, 172, 0.42);
    border-radius: 2px;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out);
    z-index: -1;
    pointer-events: none;
}

/* Row 2 already has a solid gold plaque at rest — a gold-on-gold
   sweep would barely show, so its sweep is a bright foil sheen
   instead. */
.sanon-link--primary.is-active::before {
    background: rgba(255, 250, 235, 0.65);
}

.sanon-link--primary:hover::before,
.sanon-link--primary:focus-visible::before {
    transform: translateY(-50%) scaleX(1);
}

.sanon-link--primary:hover,
.sanon-link--primary:focus-visible {
    color: #fff6de;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 5px rgba(244, 224, 172, 0.4);
}

/* Row 2's text is dark-on-gold at rest for contrast — keep it dark
   on hover too instead of the shared bright-text rule above. */
.sanon-link--primary.is-active:hover,
.sanon-link--primary.is-active:focus-visible {
    color: var(--ink);
    text-shadow: none;
}

.sanon-link--secondary:hover,
.sanon-link--secondary:focus-visible {
    color: #e9d4a0;
}

.sanon-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ─── CTA ("SPOJME SA") ────────────────────────────────────────
   Baked into the šanón art's own composition (positioned via
   --cta-x like the rows), unlike the plain mobile-fallback CTA
   below which is a normal flex button. Also doubles as the D5 CTA
   glow's positioning context (see the .sanon-cta / .sanon-cta-label
   / .d5-orbit-svg rules further down) instead of the old
   `.header-btn.cta-wrap` element it replaces on desktop. */
.sanon-cta {
    position: absolute;
    left: var(--cta-x, 70%);
    top: 50%;
    transform: translateY(-50%);
    isolation: isolate;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(0.68rem, 1.1vw, 0.88rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--ink);
    background: linear-gradient(135deg, #f4e0ac, var(--accent) 60%, #b8873c);
    padding: 0.65em 1.4em;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.sanon-cta:hover,
.sanon-cta:focus-visible {
    transform: translateY(-50%) scale(1.04);
    color: var(--ink);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.sanon-cta:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

/* ─── D5 CTA glow, re-targeted onto .sanon-cta ──────────────────
   The D5 orbiting-ring SVG (css/d5-cta-glow.css) styles its own
   markup — .d5-orbit-svg, .d5-track, .d5-a-trail, .d5-light,
   .d5-a-comet, .d5-orbit-node, .d5-node-aura, .d5-node-core — with
   selectors that are NOT scoped to `.header-btn`/`.cta-wrap`, so
   those keep working unchanged when the same SVG markup is nested
   inside `.sanon-cta` instead of the old `.header-btn.cta-wrap`.
   Only the handful of rules that WERE scoped to `.header-btn.cta-
   wrap`/`.btn-two` need an equivalent here — `.sanon-cta` acts as
   its own wrap (it's already `position:absolute` + `isolation:
   isolate` above), and `.sanon-cta-label` (new wrapper span around
   the visible text) takes the old `.btn-two` z-index:3 role so the
   label paints above the z-index:2 orbit ring. */
.sanon-cta-label {
    position: relative;
    z-index: 3;
}

/* Keep the label dark and crisp against the bright gold surface in every
   interactive state; generic link hover rules must not wash it out. */
.sanon-cta:hover .sanon-cta-label,
.sanon-cta:focus-visible .sanon-cta-label {
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
}

.sanon-cta:focus-visible {
    outline: 2px solid var(--d5-glow-hot, var(--white));
    outline-offset: 5px;
}

.sanon-cta:is(:hover, :focus-within) .d5-node-aura {
    opacity: 1;
}

/* ─── Mobile šanón composition ──────────────────────────────────
   The mobile source art has its own, much taller native ratio. Keep
   the complete image visible rather than cropping it, then layer the
   functional hit areas over the baked composition. */
@media (max-width: 991.98px) {
    .sanon-mobile-slot {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 2006 / 373;
        overflow: hidden;
        flex: 0 0 auto;
        background-color: var(--ink);
        background-image: url('../images/jsagency/navbar/sanon/sanon_mobile.webp');
        background-image: image-set(
            url('../images/jsagency/navbar/sanon/sanon_mobile.webp') type('image/webp')
        );
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .sanon-mobile-logo-hit {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 4;
        display: block;
        width: 22%;
        height: 100%;
    }

    .sanon-mobile-logo-hit:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -4px;
    }

    .sanon-mobile-slot .main-menu {
        display: none !important;
    }

    .sanon-mobile-actions {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: block !important;
        pointer-events: none;
    }

    .sanon-mobile-actions .header-btn {
        display: block !important;
    }

    .sanon-mobile-cta {
        --cta-x: 58%;
        left: var(--cta-x);
        top: 50%;
        width: clamp(118px, 28%, 220px);
        min-height: clamp(34px, 6vw, 48px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.55em 1em;
        font-size: clamp(0.62rem, 1.8vw, 0.86rem);
        line-height: 1.2;
        text-align: center;
        pointer-events: auto;
    }

    .sanon-mobile-toggle {
        position: absolute;
        right: 2.75%;
        top: 50%;
        width: clamp(44px, 7vw, 56px);
        height: clamp(44px, 7vw, 56px);
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        transform: translateY(-50%);
        pointer-events: auto;
    }

    .sanon-mobile-toggle .slicknav_btn {
        width: clamp(42px, 6vw, 52px);
        height: clamp(42px, 6vw, 52px);
        margin: 0;
    }
}

@media (max-width: 560px) {
    .sanon-mobile-cta {
        --cta-x: 55%;
    }

    .sanon-mobile-toggle {
        right: 3.75%;
    }
}

@media (max-width: 460px) {
    .sanon-mobile-cta {
        --cta-x: 50%;
    }
}

@media (max-width: 380px) {
    .sanon-mobile-cta {
        --cta-x: 48%;
        width: 108px;
    }
}

/* Tablet-width mobile navigation: keep the same artwork and controls,
   but cap the šanón's vertical footprint between the desktop and phone
   ranges. The phone composition below 600px keeps its native ratio. */
@media (min-width: 600px) and (max-width: 991.98px) {
    .sanon-mobile-slot {
        aspect-ratio: auto;
        height: clamp(104px, 15vw, 145px);
        background-size: 100% 100%;
    }
}

/* ─── Reduced motion ─────────────────────────────────────────────
   Covers the hover-sweep transition (already had its own opacity-
   based fallback below, ported from the prototype) plus the link
   color/text-shadow and CTA scale/shadow transitions that the
   prototype didn't explicitly gate. */
@media (prefers-reduced-motion: reduce) {
    .sanon-link--primary::before {
        transition: opacity 0.15s linear;
        transform: translateY(-50%) scaleX(1);
        opacity: 0;
    }

    .sanon-link--primary:hover::before,
    .sanon-link--primary:focus-visible::before {
        opacity: 1;
    }

    .sanon-link,
    .sanon-link--primary,
    .sanon-link--secondary,
    .sanon-cta {
        transition-duration: 0.01ms !important;
    }
}

/* Windows High Contrast / forced-colors: match D5's own treatment —
   drop the decorative ring, keep a clear system-colored focus ring. */
@media (forced-colors: active) {
    .sanon-cta .d5-orbit-svg {
        display: none !important;
    }

    .sanon-cta:focus-visible {
        outline-color: CanvasText;
    }
}