/* ============================================================ Site header (partials/header-full.html + header-minimal.html) WHY THIS IS ITS OWN FILE, AND WHY EVERY RULE IS SCOPED TO .site-header The Soft Wash Simulator is a standalone page with its own stylesheet and does not load styles.css — whose element resets (a, h1, body, .btn, .brand, .eyebrow) would restyle the game. It still carries the site nav, so the header's styles have to arrive on their own and must not reach anything outside the header. Tokens are restated on .site-header for the same reason: the simulator does not define --nav-link or --wrap. LAYOUT Wide screens: two rows — brand + phone + the three CTAs, then the nav links. One row cannot hold eight links, a phone number and three CTAs at any common width (it needs ~1,800px), which is why the old one-row header wrapped its button labels onto two lines. Narrow screens (below the breakpoint): brand, Book Now and the menu button; everything else moves into the menu. Book Now stays out of the menu because it is the primary action. THE BREAKPOINTS ARE MEASURED, NOT GUESSED (Public Sans / Radley loaded): row one needs 40 (padding) + 373 (brand) + 22 (gap) + 660 (phone + three CTAs) = 1,095px. Without the brand's tagline the brand is ~210px, so row one fits in ~890px. Hence: two rows from 1024px, with the tagline hidden from 1024 to 1139px (the brand starts wrapping at ~1100, so 40px of margin); the menu below 1024px. Row two (eight links) needs ~812px. On phones the bar is logo + name + Book Now + menu, which needs ~340px; below 375px the name goes. Change a CTA label, a nav label or the brand text and re-measure. ============================================================ */ .site-header{ --nav-link:#CFD3D5;--navy:#13294B;--blue:#4B9CD3;--blue-dark:#2C5080;--sky:#B7D7ED; --font-head:'Radley',Georgia,serif;--font-ui:'Public Sans',system-ui,sans-serif; background:var(--navy);position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,.08); font-family:var(--font-ui);line-height:1.5 } .site-header .accent{height:4px;background:linear-gradient(90deg,var(--sky),var(--blue))} .site-header .header-inner{display:flex;align-items:center;gap:22px;padding:12px 20px;max-width:1280px;margin:0 auto} .site-header a{text-decoration:none} .site-header .brand{display:flex;align-items:center;gap:11px;min-width:0;color:#fff;font-family:var(--font-head);font-weight:400;font-size:1.05rem;letter-spacing:.03em} .site-header .brand:hover{color:#fff;text-decoration:none} .site-header .brand img{width:46px;height:46px;border-radius:10px} .site-header .brand small{display:block;font-family:var(--font-ui);font-weight:600;font-size:.62rem;letter-spacing:.16em;color:var(--sky);text-transform:uppercase} .site-header :focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px} /* Nav links. min-height 44px: WCAG 2.5.5 target size, on every width. */ .site-header .main-nav{display:flex;align-items:center;gap:4px} .site-header .main-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--nav-link);font-weight:600;font-size:.92rem;padding:8px 11px;border-radius:8px;white-space:nowrap} .site-header .main-nav a:hover{color:#fff;text-decoration:underline} .site-header .main-nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.10)} /* Phone + CTAs */ .site-header .header-actions{display:flex;align-items:center;gap:10px} .site-header .nav-phone{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:#fff;font-weight:700;white-space:nowrap} .site-header .nav-phone:hover{color:#fff;text-decoration:underline} /* Restated in full rather than inherited from styles.css .btn: on the simulator page .btn means something else (inline-flex, its own padding), so every property that shapes a header button is pinned here. */ .site-header .header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px; font-family:var(--font-ui);font-weight:700;font-size:.9rem;line-height:1.2;white-space:nowrap; padding:.6em 1.05em;border-radius:10px;border:2px solid transparent;cursor:pointer;text-decoration:none; transition:transform .15s,background .15s,border-color .15s,color .15s} .site-header .header-cta:hover{transform:translateY(-2px);text-decoration:none} /* Navy on --blue is 4.8:1; white on --blue-dark (hover) is 8.2:1. */ .site-header .header-cta.btn-blue{background:var(--blue);color:var(--navy);box-shadow:0 6px 20px rgba(75,156,211,.35)} .site-header .header-cta.btn-blue:hover{background:var(--blue-dark);color:#fff} /* White on navy is 14:1; the border is decorative (the label carries the meaning). */ .site-header .header-cta.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)} .site-header .header-cta.btn-outline-light:hover{border-color:#fff;color:#fff} .site-header .header-cta[aria-current="page"]{border-color:#fff;background:rgba(255,255,255,.10)} .site-header .nav-toggle{display:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:0;cursor:pointer;padding:8px} .site-header .nav-toggle span{display:block;width:24px;height:2px;background:#e6eef6;border-radius:2px;margin:5px 0;transition:transform .2s,opacity .2s} .site-header .nav-toggle>span+span{margin-top:0} /* ---- Wide: two rows --------------------------------------------------- */ @media (min-width:1024px){ .site-header .header-inner{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"brand actions" "nav nav";row-gap:2px;padding-bottom:6px} .site-header .brand{grid-area:brand} /* The panel is only a wrapper for the mobile menu; on wide screens its two children join the grid directly. display:contents on a plain div is safe for assistive tech — the