/* ============================================
clothing.nav.css
DRIVOID Clothing Navigation
============================================

TOKENS
Uses only the site palette and fonts declared on :root in
css/style.css -- do not declare custom properties here.

Color
--signal accent (pink)
--amber CTA accent
--void readable foreground on a filled --signal / --amber
--electric link/focus accent (cyan)
--text body foreground
--muted secondary foreground
--border hairline rule
For translucent tints use color-mix(in srgb, var(--signal) N%, transparent).

Type
--font-display
--font-body
--font-mono

Spacing is written as literal rem values, matching the rest of the
site (0.25 / 0.5 / 1 / 1.5 / 3rem). There is no spacing token scale;
an earlier --spacing-* scale was removed from this file and never
re-declared, which left every padding and gap here at 0.
============================================ */

/* ============================================
PAGE LAYOUT OVERRIDES
Migrated from the retired css/responsive.css. Page-scoped here so the
769–1024px nav/spacing changes don't reach other pages.
============================================ */

/* responsive.css @imported tokens.css after style.css, pinning body text
to 16px on this page (it doesn't follow the large-screen scaling). */
body { font-size: 16px; }

.price-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--electric); }

@media (max-width: 1024px) {
nav { padding: 1rem 1.5rem; }
.section-wrap { padding: 5rem 1.5rem; }
footer { padding: 2rem 1.5rem; }
}

/* ============================================
ANIMATIONS & KEYFRAMES
CRT/void aesthetic micro-interactions
============================================ */

@keyframes signal-breathe {
0%,
100% {
box-shadow:
0 0 15px var(--signal),
inset 0 0 10px color-mix(in srgb, var(--signal) 20%, transparent),
0 0 30px color-mix(in srgb, var(--signal) 0%, transparent);
}
50% {
box-shadow:
0 0 25px var(--signal),
inset 0 0 15px color-mix(in srgb, var(--signal) 30%, transparent),
0 0 40px color-mix(in srgb, var(--signal) 30%, transparent);
}
}

/* Fires once on :active. Deliberately not paired with a competing
transform in the same rule -- the previous version set
translateY(0) alongside this, which snapped on animation end. */
@keyframes glitch-shift {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(-2px, 0, 0);
}
50% {
transform: translate3d(2px, 0, 0);
}
75% {
transform: translate3d(-1px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

@keyframes overlay-in {
from {
opacity: 0;
transform: translate3d(0, -8px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

/* Removed as dead code: amber-breathe, slideDown, fadeIn,
scanlines-pulse. None were referenced by a live selector;
scanlines-pulse additionally animated background-position on an
element with a transparent background, so it rendered nothing while
still forcing a main-thread animation. */

/* ============================================
BASE NAVIGATION CONTAINER
============================================ */

.clothing-nav {
position: relative;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.5rem 3rem;
/* Opaque, NOT backdrop-filter. A backdrop-filter here would make
this element the containing block for every fixed-position
descendant, which broke .filter-popover (sized to the nav instead
of the viewport) and the mobile .nav-links overlay. Same hazard
applies to filter, transform, contain and will-change -- do not
reintroduce any of them on this element. */
background: linear-gradient(
180deg,
rgb(0, 0, 0) 0%,
rgb(10, 10, 10) 100%
);
border-bottom: 1px solid var(--border);
font-family: var(--font-body);
font-weight: 600;
font-size: 1.05rem;
}

/* The nav's own stacking context caps any descendant's z-index at 100
relative to the rest of the page. While an overlay is open, lift the
whole context above page content so .filter-popover (z-index 1001)
and the mobile menu actually sit on top.

:has() is required for this. In browsers without it the overlays
still render, but can be occluded by later page content with
z-index > 100. The durable fix is to move .filter-popover out of
.clothing-nav in the template, or migrate it to <dialog> / the
popover API so it renders in the top layer. */
.clothing-nav:has(.filter-popover:not([hidden])),
.clothing-nav:has(.nav-links.is-open),
.clothing-nav:has(.nav-toggle[aria-expanded="true"]) {
z-index: 1000;
}

/* ============================================
LOGO
============================================ */

.nav-logo {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 900;
letter-spacing: 0.3em;
color: var(--text);
text-decoration: none;
white-space: nowrap;
text-transform: uppercase;
/* letter-spacing deliberately excluded: it is layout-triggering and
reflowed the entire nav row on every hover. */
transition:
color 0.3s ease,
text-shadow 0.3s ease;
}

.nav-logo:hover {
color: var(--electric);
text-shadow:
0 0 10px var(--electric),
0 0 20px rgba(0, 212, 255, 0.5);
}

.nav-logo:focus-visible {
outline: 2px solid var(--electric);
outline-offset: 4px;
}

/* ============================================
MAIN NAVIGATION CONTENT
============================================ */

.clothing-nav-main {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
flex-wrap: wrap;
}

/* ============================================
BOOK NOW BUTTON
Right-aligned CTA, amber variant
============================================ */

.nav-book {
position: relative;
/* isolation replaces the former transform: translateZ(0) hack. The
::before fill uses z-index: -1 and needs a stacking context on the
button to stay contained; isolation states that intent directly
without also promoting a compositor layer or silently depending on
the background being transparent. */
isolation: isolate;
overflow: hidden;
padding: 0.5rem 1.5rem;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1.5px solid var(--amber);
color: var(--amber);
font-family: var(--font-body);
font-size: inherit;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition:
color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}

.nav-book::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--amber);
/* transform, not `left` -- the previous version animated a layout
property on every hover. */
transform: translate3d(-100%, 0, 0);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-book--amber:hover::before,
.nav-book--amber:focus-visible::before {
transform: translate3d(0, 0, 0);
}

.nav-book--amber:hover,
.nav-book--amber:focus-visible {
color: var(--void);
border-color: var(--amber);
box-shadow:
0 0 20px var(--amber),
inset 0 0 10px rgba(255, 255, 255, 0.2);
transform: translate3d(0, -2px, 0);
}

.nav-book--amber:active {
animation: glitch-shift 0.15s ease;
}

.nav-book--amber:focus-visible {
outline: 2px solid var(--amber);
outline-offset: 2px;
}

.nav-book:disabled,
.nav-book[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.nav-book:disabled::before,
.nav-book[aria-disabled="true"]::before {
transform: translate3d(-100%, 0, 0);
}
/* ============================================
NAV LINKS
Desktop: inline row. Mobile: overlay panel
toggled by .nav-toggle (see breakpoints below).
============================================ */

.nav-links {
display: flex;
align-items: center;
gap: 2rem;
margin: 0;
padding: 0;
list-style: none;
}

.nav-links a {
color: var(--muted);
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: color 0.3s ease;
}

.nav-links a:hover {
color: var(--electric);
}

.nav-links a:focus-visible {
outline: 2px solid var(--electric);
outline-offset: 4px;
}

.nav-links a[aria-current="page"] {
color: var(--electric);
}

/* ============================================
NAV TOGGLE (hamburger)
Hidden above the mobile breakpoint.
============================================ */

.nav-toggle {
display: none;
}

/* Book Now copy inside the dropdown; the bar's own Book Now covers
wide screens, so this only shows in hamburger mode. */
.nav-links-book {
display: none;
}

/* ============================================
BREAKPOINT: <= 1024px
============================================ */

@media (max-width: 1024px) {
.clothing-nav {
gap: 1rem;
padding: 1rem 1.5rem;
}

.clothing-nav-main {
gap: 0.5rem;
}

.nav-links {
gap: 1.25rem;
}
}

/* ============================================
BREAKPOINT: <= 768px
Single consolidated block. The previous file split this across four
separate @media (max-width: 768px) rules whose relative cascade
order was non-obvious, and shipped two mutually exclusive mobile
patterns at once: .clothing-nav switched to flex-direction: column
(stacking every link vertically) while .nav-toggle simultaneously
appeared to drive an overlay. Resolved in favour of the hamburger
overlay; the nav bar itself stays a single horizontal row.
============================================ */

/* Raised from 768px: the full inline nav (logo + links + Book Now)
needs ~1265px, so anything narrower overflowed off-screen. */
@media (max-width: 1279px) {
.clothing-nav {
/* Explicitly a row -- do not restore column here. */
flex-direction: row;
flex-wrap: nowrap;
gap: 0.5rem;
padding: 1rem 1.5rem;
}

.nav-logo {
font-size: 1.4rem;
letter-spacing: 0.2em;
}

/* Filter + CTA collapse into the overlay; the bar keeps only the
logo and the toggle. */
.clothing-nav-main {
display: none;
}

.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
margin-left: auto;
padding: 0.75rem;
min-width: 44px;
min-height: 44px;
background: none;
border: none;
cursor: pointer;
/* Above the .nav-links panel so the close affordance stays
reachable while the menu is open. */
z-index: 1002;
}

.nav-toggle:focus-visible {
outline: 2px solid var(--electric);
outline-offset: 2px;
}

.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--electric);
transition:
transform 0.3s ease,
opacity 0.3s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translate3d(0, 7px, 0) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translate3d(0, -7px, 0) rotate(-45deg);
}

.nav-links {
display: none;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1000;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 5rem 2rem 2rem;
/* Opaque, not rgba(0,0,0,.97) -- page content showing through a
3% gap behind link text is a contrast failure. */
background: rgb(0, 0, 0);
border-bottom: 1px solid var(--border);
max-height: 100dvh;
overflow-y: auto;
overscroll-behavior: contain;
}

.nav-links.is-open {
display: flex;
animation: overlay-in 0.2s ease-out;
}

.nav-links li {
width: 100%;
}

.nav-links a {
display: block;
padding: 1rem;
min-height: 44px;
font-size: 1rem;
text-align: center;
border-bottom: 1px solid var(--border);
}

.nav-links li:last-child a {
border-bottom: none;
}

.nav-links-book {
display: block;
margin-top: 1rem;
}

/* Keep the amber button look; .nav-links a would otherwise flatten it. */
.nav-links .nav-links-book .nav-book {
display: flex;
border: 1.5px solid var(--amber);
color: var(--amber);
}

.nav-book {
width: 100%;
padding: 1rem 1.5rem;
text-align: center;
}
}

/* ============================================
BREAKPOINT: <= 480px
============================================ */

@media (max-width: 480px) {
.clothing-nav {
gap: 0.25rem;
padding: 0.5rem 1rem;
}

.nav-logo {
/* Continues the 2rem -> 1.4rem -> 1.1rem ramp. The previous file
jumped 2rem straight to 0.95rem here with no 768px step, and
switched letter-spacing from em to px mid-scale. */
font-size: 1.1rem;
letter-spacing: 0.15em;
}

.nav-book {
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
}

/* ============================================
REDUCED MOTION
Previously covered only .nav-book, leaving the infinite 2s
signal-breathe pulse on the expanded filter trigger running -- the
most disruptive animation in the file. Now covers every animated
selector in this stylesheet.

Durations collapse to ~0 rather than `none` so transitionend and
animationend listeners still fire; JS that awaits them will not
hang.
============================================ */

@media (prefers-reduced-motion: reduce) {
.clothing-nav,
.clothing-nav *,
.clothing-nav *::before,
.clothing-nav *::after,
.filter-popover,
.filter-popover *,
.filter-popover *::before,
.filter-popover *::after,
.nav-links,
.nav-links * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}

/* Suppress displacement outright; the colour changes still convey
state. */
.nav-book--amber:hover,
.nav-book--amber:focus-visible,
.filter-trigger:hover,
.filter-close:hover {
transform: none;
}

/* The fill is the hover affordance for the CTA -- keep it, just
without the slide. */
.nav-book--amber:hover::before,
.nav-book--amber:focus-visible::before {
transform: translate3d(0, 0, 0);
}
}

/* ============================================
FORCED COLORS / HIGH CONTRAST
Every state in this file is signalled with box-shadow glow, which
forced-colors mode discards. Re-express those states with system
colour keywords so expanded, hovered and focused remain
distinguishable.
============================================ */

@media (forced-colors: active) {
.clothing-nav {
border-bottom: 1px solid CanvasText;
}

.nav-book,
.filter-trigger,
.filter-btn {
border-color: ButtonText;
color: ButtonText;
box-shadow: none;
}

.nav-book--amber:hover,
.nav-book--amber:focus-visible,
.filter-trigger:hover,
.filter-btn:hover {
background: Highlight;
color: HighlightText;
border-color: Highlight;
box-shadow: none;
}

/* Expanded state loses its breathing glow; a thicker rule and the
inverted fill carry it instead. */
.filter-trigger[aria-expanded="true"] {
background: Highlight;
color: HighlightText;
border-width: 3px;
animation: none;
}

.filter-count-badge,
.filter-trigger:hover .filter-count-badge,
.filter-trigger[aria-expanded="true"] .filter-count-badge {
background: ButtonFace;
color: ButtonText;
border: 1px solid ButtonText;
}

/* The pseudo-element fill is invisible here; forcing it fully out of
frame prevents it from masking the button label. */
.nav-book::before {
display: none;
}

.filter-popover,
.nav-links {
background: Canvas;
border: 1px solid CanvasText;
}

.nav-links a {
color: LinkText;
}

.nav-links a[aria-current="page"] {
color: HighlightText;
background: Highlight;
}

.filter-select {
background: Field;
color: FieldText;
border-color: FieldText;
box-shadow: none;
}

.nav-toggle span {
background: ButtonText;
}

:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
}
}

@media (prefers-contrast: more) {
.nav-book,
.filter-trigger,
.filter-btn,
.filter-select {
border-width: 2px;
}

.nav-links a {
color: var(--text);
}
}

/* ============================================
PRINT
.filter-popover and .nav-links are fixed-position overlays; if
either is open at print time it would otherwise paper over the
first page.
============================================ */

@media print {
.clothing-nav,
.filter-popover,
.nav-links,
.nav-toggle {
display: none !important;
}
}
/* clothing-nav.css — breadcrumb, replaces the old .accent-label reuse */
.breadcrumb-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}

.breadcrumb-list li + li::before {
content: "/";
margin-right: 0.5rem;
opacity: 0.5;
}