/* Development single — sticky anchor bar (Figma nodes 3:775 bar, 3:782
   links, 36:178/36:200 pills, 36:213/36:193 labels).
   Sticky both directions while scrolling (Figma comment) — this bar
   replaces the sitewide sticky Contact tab on this template
   (inc/sticky-contact.php exclusion). Header is static/in-flow on this
   template (body.vl-header--static, css/header.css) so once it scrolls
   away this bar is the only sticky chrome. */
:root {
    --vl-dev-anchor-h: 82px; /* node 3:775: 1920×82 — shared so Task 5's filter
                                bar can stick directly beneath this bar without
                                a duplicated magic number (dev-plots.css). */
}

.vl-dev-anchor {
    position: sticky;
    top: 0;
    z-index: 30; /* above page content; below the off-canvas nav-panel (60) / overlay (55) which can still open via the header's hamburger */
    height: var(--vl-dev-anchor-h);
    background: var(--vl-cornflower); /* exact match, node fill #a5bafa */
    transition: box-shadow 0.25s ease;
}

/* Drop shadow only while pinned (Liam, 2026-07-23) — .is-stuck toggled by
   dev-anchor.js (IntersectionObserver; CSS can't sense a sticky pin). */
.vl-dev-anchor.is-stuck {
    box-shadow: var(--vl-shadow-chrome);
}

/* …but when the filter bar is pinned directly beneath this bar, the shadow
   belongs to the BOTTOM-most stuck element — the filter bar — not to the
   seam between the two (Liam, 2026-07-23).
   ⚠️ The filter bar is NOT this nav's sibling: vl_sticky_zone_open() wraps
   everything after the nav in div.vl-sticky-zone (bug found live when both
   shadows showed at once — a sibling-scoped :has() never matched). Match a
   stuck filter bar at ANY depth inside any later sibling, plus the
   direct-sibling case for template resilience. */
.vl-dev-anchor.is-stuck:has(~ .vl-plot-filters.is-stuck),
.vl-dev-anchor.is-stuck:has(~ * .vl-plot-filters.is-stuck),
.vl-dev-anchor.is-stuck:has(~ * .vl-plot-filterbar.is-stuck) {
    /* Third selector: ≤1023px the sticky filter element is the
       .vl-plot-filterbar wrapper, not the form (dev-plots.css, 2026-07-24). */
    box-shadow: none;
}

.vl-dev-anchor__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 100%;
}

/* Scroll-hint wrapper (gotcha §9.6): THIS element owns position+::after;
   the scrolling element (.vl-dev-anchor__links) is a separate child —
   never combine position:relative + overflow-x:auto on the same node, or
   the fade scrolls away with the content instead of staying pinned. */
.vl-dev-anchor__scrollwrap {
    position: relative;
    min-width: 0; /* allow the flex child to shrink below its content width */
    flex: 1; /* fill the middle (Liam live review 2026-07-28): with the plot
                page's collapsed Back link as a third flex item, the bar's
                space-between distributed space BETWEEN items and pushed the
                links off the left edge. Filling the middle pins the links
                hard left at rest; only the Back reveal (its width + 30px)
                moves them. Dev page: visually identical (links left, ctas
                right, as space-between already rendered it). */
}

.vl-dev-anchor__links {
    display: flex;
    align-items: center;
    gap: 48px; /* node x-deltas read 40/50/48px (Figma auto-width rounding) — one consistent value used */
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}

.vl-dev-anchor__links::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
}

.vl-dev-anchor__links a {
    font-size: var(--vl-text-nav); /* 18px, exact match, node 3:782 */
    font-weight: var(--vl-weight-regular); /* "Omnes:Regular" per node */
    color: var(--vl-black); /* exact match — node fill is literally #000000, not --vl-ink */
    text-decoration: none;
    white-space: nowrap;
}

/* Hover affordance (not shown in the static frame read — reuses the
   established sitewide desktop-nav hover convention: brick underline,
   header.css .vl-nav__link:hover). */
.vl-dev-anchor__links a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--vl-brick);
}

/* Back link (Liam live review 2026-07-28 — Renmore house-type parity,
   rh-ht-anchor__back): PLOT pages only (the dev page renders no __back
   element, so every rule here is inert there). In flow but collapsed —
   max-width 0 + opacity 0, and margin-right -24px cancels the __inner
   flex gap it would otherwise still contribute (Renmore's parent had
   gap:0; ours doesn't) — so at rest the links sit exactly where they
   always did. dev-anchor.js adds .is-visible only while the bar is
   pinned AND the user scrolls up (the in-flow back bar above the hero
   covers the at-rest case); the max-width grow-in pushing the links
   right is Renmore's own mechanic. */
.vl-dev-anchor__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    max-width: 0;
    margin-right: -24px; /* = -1 × .vl-dev-anchor__inner gap */
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    color: var(--vl-black);
    font-size: var(--vl-text-nav); /* link-row parity */
    font-weight: var(--vl-weight-regular);
    text-decoration: none;
    white-space: nowrap;
    transition: max-width 0.3s ease, margin-right 0.3s ease, opacity 0.25s ease, transform 0.2s ease;
}

/* Hover nudge, -10px along x — same treatment as the back bar's link and
   the dropdown back row (Liam live review 2026-07-28). */
.vl-dev-anchor__back:hover,
.vl-dev-anchor__back:active {
    transform: translateX(-10px);
}

.vl-dev-anchor__back svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
}

.vl-dev-anchor__back.is-visible {
    max-width: 90px; /* just above the rendered chevron+"Back" width, so the
                        grow animation tracks the real push distance tightly */
    margin-right: 6px; /* Liam live review 2026-07-28, Renmore parity: the
                          links move by the link's own width + a 30px gap —
                          the __inner flex gap provides 24, this tops it to 30 */
    opacity: 1;
    pointer-events: auto;
}

.vl-dev-anchor__back:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--vl-brick);
}

/* Renmore parity: the collapsed-link mechanic is desktop-only — below
   1025 the bar is the Sections toggle + pills and space is tight.
   Flagged for the responsive-derivations review (decision #6). */
@media (max-width: 1024px) {
    .vl-dev-anchor__back {
        display: none;
    }
}

/* Sections dropdown toggle (Liam, 2026-07-24 — Renmore's tablet/mobile
   anchor mechanic, restyled to Vivly tokens): hidden on desktop, replaces
   the link row below 1024px. Burger↔X swap driven by aria-expanded. */
.vl-dev-anchor__toggle {
    display: none;
    align-items: center;
    gap: 15px; /* icon ↔ label (Liam, 2026-07-24 — tried 8, settled on 15) */
    line-height: 1; /* kill the label's line-box leading so align-center is true optical centre against either icon */
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--vl-black); /* matches the link colour */
    font-family: inherit;
    font-size: var(--vl-text-nav);
    font-weight: var(--vl-weight-regular);
}

/* Icons (Liam, 2026-07-24): 40px at ≥501 — the burger's WIDTH hits 40
   first (bars 40×3, 7px gaps → glyph 40×23, centred); the X renders a
   full 40×40. Both sit in a 40×40 box, which IS the 40×40 clickable
   area. The ≤500 compact block scales the box down to a 24×24 square so
   the row fits. Construction still mirrors the header's icons. */
.vl-dev-anchor__icon {
    width: 40px;
    height: 40px;
}

.vl-dev-anchor__icon--open {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.vl-dev-anchor__iconbar {
    width: 100%;
    height: 3px;
    background: var(--vl-ink);
}

.vl-dev-anchor__icon--close {
    stroke: var(--vl-ink);
    stroke-width: 2; /* viewBox 24 at the 32px glyph paints ≈2.7 */
    /* Glyph 32px (Liam, 2026-07-24 — full 40 read too big), 4px margins
       keep it centred in the same 40×40 slot; the button area around it
       stays the 40×40 click target. */
    width: 32px;
    height: 32px;
    margin: 4px;
}

/* Scoped under the toggle so the hide always outranks the base icon rules
   (a bare single-class selector lost this specificity fight once — both
   icons rendered at the same time, caught live 2026-07-24). */
.vl-dev-anchor__toggle .vl-dev-anchor__icon--close {
    display: none;
}

.vl-dev-anchor__toggle[aria-expanded="true"] .vl-dev-anchor__icon--open {
    display: none;
}

.vl-dev-anchor__toggle[aria-expanded="true"] .vl-dev-anchor__icon--close {
    display: block;
}

.vl-dev-anchor__ctas {
    display: flex;
    align-items: center;
    gap: 30px; /* node x-delta: 1551 − 1521 */
    flex-shrink: 0;
}

/* Pills (36:178 "Find us" / 36:200 "Contact us"): 209×40, 2px white border,
   transparent fill (shows the cornflower band through), fully rounded. */
.vl-dev-anchor__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 209px; /* node 36:178 / 36:200 */
    height: 40px;
    border: 2px solid var(--vl-white);
    border-radius: var(--vl-radius-pill); /* exact match, node radius 100 */
    background: transparent;
    color: var(--vl-white);
    /* Labels (36:213/36:193) are flattened raster text — size/weight inferred
       from the sitewide CTA-pill pairing already established in
       header.css .vl-nav__contact-pill (--vl-text-nav + semibold). */
    font-size: var(--vl-text-nav);
    font-weight: var(--vl-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover: brick fill + border, black label (Liam review 2026-07-23). */
.vl-dev-anchor__pill:hover {
    background: var(--vl-brick); /* plain brick here — Liam reverted the
                                    brick-dark trial on these pills (2026-07-23);
                                    the living tabs keep brick-dark */
    border-color: var(--vl-brick);
    color: var(--vl-black);
}

/* scroll-margin-top so smooth-scroll doesn't tuck a section heading under
   this sticky bar (bar height = 82px). Selectors target IDs later tasks add
   — dev-page ids plus the plot page's (4b Task 6: #more-homes/#floorplans/
   #gallery added; the plot page has no #living). */
#homes,
#site-plan,
#walkthrough,
#living,
#more-homes,
#floorplans,
#gallery {
    scroll-margin-top: var(--vl-dev-anchor-h);
}

/* ── Tablet / mobile: the link row becomes a "Sections" dropdown under the
   bar (Renmore mechanic, Liam 2026-07-24 — replaced the horizontal-scroll
   + fade treatment). Pills stay visible in the bar beside the toggle. ── */
@media (max-width: 1024px) {
    .vl-dev-anchor__toggle {
        display: inline-flex;
    }

    /* The panel must anchor to the BAR, not this wrapper (which shrink-wraps
       to nothing once the list is out of flow). */
    .vl-dev-anchor__scrollwrap {
        position: static;
    }

    .vl-dev-anchor__links {
        display: none;
        position: absolute;
        top: 100%; /* containing block = the sticky bar itself */
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 0 14px;
        background: var(--vl-cornflower);
        box-shadow: var(--vl-shadow-chrome);
        /* Clip the shadow's upward bleed flush at the top edge — it drew a
           grey line over the bar the panel hangs from (caught live
           2026-07-24, same fix as the filters dropdown). */
        clip-path: inset(0 -30px -30px -30px);
        overflow-x: visible;
    }

    .vl-dev-anchor__links.is-open {
        display: flex;
    }

    .vl-dev-anchor__links a {
        display: block;
        padding: 14px var(--vl-edge);
    }

    .vl-dev-anchor__ctas {
        gap: 16px;
    }

    /* Back row (Liam, 2026-07-28): last item of the dropdown, hairline-
       separated — "leave this page" vs the links' "jump within it". Plot
       pages only (the li renders only there); the desktop rule below keeps
       it out of the inline link row, where the scroll-up Back reveal is
       the desktop affordance. */
    .vl-dev-anchor__backrow {
        display: block;
        margin-top: 6px;
        border-top: 1px solid rgba(0, 0, 0, 0.15);
        padding-top: 6px;
    }

    .vl-dev-anchor__backrow a {
        display: flex; /* overrides the dropdown's display:block link rule for icon alignment */
        align-items: center;
        gap: 10px;
        transition: transform 0.2s ease;
    }

    /* Same -10px back-nudge as the other two back affordances; :active is
       the touch press on tablet/mobile. Padding (14px + --vl-edge, from the
       dropdown link rule) absorbs the shift — nothing clips. */
    .vl-dev-anchor__backrow a:hover,
    .vl-dev-anchor__backrow a:active {
        transform: translateX(-10px);
    }

    .vl-dev-anchor__backrow svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
}

/* Desktop: the dropdown doesn't exist — the row must never join the inline
   link row (the collapsed __back reveal is the desktop affordance). */
@media (min-width: 1025px) {
    .vl-dev-anchor__backrow {
        display: none;
    }
}

/* ── Mobile: pills give up their fixed 209px so the row fits. ── */
@media (max-width: 767px) {
    .vl-dev-anchor__inner {
        gap: 12px;
    }

    .vl-dev-anchor__pill {
        width: auto;
        padding-inline: 20px;
    }
}

/* ── Small mobile ≤500 (Liam, 2026-07-24: compact set scoped here — was
   ≤767 for one review round): 16px labels, tighter gaps, slimmer pills,
   22px burger. Row ≈335px, so sub-360 stays under live iteration. ── */
@media (max-width: 500px) {
    .vl-dev-anchor__inner {
        gap: 10px;
    }

    .vl-dev-anchor__toggle {
        gap: 10px;
        font-size: 16px;
    }

    /* Icons drop to a 24×24 square box (still square clickable area) so the
       row fits the small-phone width budget. */
    .vl-dev-anchor__icon {
        width: 24px;
        height: 24px;
    }

    .vl-dev-anchor__icon--close {
        margin: 0; /* the ≥501 32px-in-40 centring margins would widen this 24px slot */
    }

    .vl-dev-anchor__icon--open {
        gap: 4px;
    }

    .vl-dev-anchor__iconbar {
        height: 2px; /* glyph 24×14 centred in the box */
    }

    .vl-dev-anchor__ctas {
        gap: 10px;
    }

    .vl-dev-anchor__pill {
        height: 36px;
        padding-inline: 14px;
        font-size: 16px;
    }
}

/* (Icon-only small-phone tier tried and removed 2026-07-24 — Liam wants
   the "Sections" label at every width; sub-375 fit handled by the compact
   sizes above, iterating live.) */