/* Petwise360 marketing site: the SHELL every page shares (issue #112).
 *
 * Colour tokens, the sticky header with its brand and pill links, and the footer. Page typography and
 * layout stay in each page's own <style>; this file holds only what used to exist in fifteen identical
 * copies and drifted, so a header fix is one edit here instead of eleven.
 *
 * The legal pages under /legal are digest-locked: the <link> that pulls this in lives in <head>, outside
 * the document body the digest freezes, so changing this file never re-prompts anyone.
 *
 * The header comes in three shapes, chosen by a class on <header class="site ...">:
 *   nav-one   one pill (the legal pages)
 *   nav-two   two pills (fair use)
 *   nav-many  three or four pills (home, pricing, about, news)
 * Every breakpoint below was MEASURED, not reasoned about: the brand and the first pill must keep at
 * least 6px between them, nothing may wrap or scroll sideways, and every pill stays a 38px tap target,
 * from 280px (the Galaxy Fold's outer screen) to desktop. Re-measure before changing a number.
 */
:root{--sun:#FFB627;--sun-deep:#FF8C42;--cream:#FBF7EF;--ink:#1A1A2E;--ink-soft:#3A3A52;--muted:#7B7B9D;--line:#ECE7DD}
*{box-sizing:border-box;margin:0;padding:0}
.ff{font-family:'Fraunces',serif}

/* Header */
header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(251,247,239,.85);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;text-decoration:none;color:var(--ink)}
.brand .mark{width:34px;height:34px;display:block;object-fit:contain}
.brand b{color:var(--sun-deep)}
.nav-links{display:flex;gap:8px}
.nav-cta{font-weight:800;font-size:13.5px;text-decoration:none;color:var(--ink-soft);padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;white-space:nowrap}
.nav-cta:hover{border-color:var(--sun)}

/* The wordmark is CLIPPED on narrow screens, never display:none: the emblem's alt is empty, so removing the
 * wordmark from the accessibility tree would leave the home link with no accessible name (WCAG 4.1.2).
 * Absolute positioning takes it out of the flex flow, which is what actually frees the width. Scoped to
 * header.site because the home page's footer reuses .brand and has no width problem to solve.
 *
 * Tiers run widest to narrowest on purpose: every rule below has the same specificity, so the narrower tier
 * must come later in the file to win. */

/* Three or four pills: the wordmark goes at 600px (at 375px the 155px wordmark plus four pills needed 463px
 * of a 331px content box), and the pills then tighten in three further steps. The 400px and 340px tiers
 * used to sit at 360px and 320px, which left the brand 2px from the first pill at 361px and 6px at 321px,
 * because the pills snapped back to the larger size exactly where the tier ended. The 300px tier is new:
 * four pills at the 340px settings still touched the emblem at 280px. */
@media (max-width:600px){
  header.site.nav-many .brand > span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  header.site.nav-many .brand .mark{width:32px;height:32px}
  header.site.nav-many .nav-links{gap:6px}
  header.site.nav-many .nav-cta{font-size:12.5px;padding:7px 11px;display:inline-flex;align-items:center;min-height:38px}
}
/* Two pills run out of room sooner than one: at 361px the wordmark returns and the pills would snap back
 * to full size together, leaving the brand 1px from the first pill. Tightening the pills from 400px down
 * decouples the two, so the wordmark keeps its place at 375 and 390 and still gets daylight. */
@media (max-width:400px){
  header.site.nav-two .nav-cta{font-size:11.5px;padding:6px 8px;display:inline-flex;align-items:center;min-height:38px}
  header.site.nav-many .nav-links{gap:4px}
  header.site.nav-many .nav-cta{font-size:11.5px;padding:6px 8px}
}
/* One and two pills: the wordmark goes at 360px, not 320px. Measured on the one-pill header, the brand and
 * the pill sat at a zero-pixel gap from about 320px to 355px and only gained daylight at 360px. */
@media (max-width:360px){
  header.site.nav-one .brand > span,header.site.nav-two .brand > span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  header.site.nav-one .brand .mark,header.site.nav-two .brand .mark{width:30px;height:30px}
  header.site.nav-one .nav-cta{font-size:11.5px;padding:6px 8px;display:inline-flex;align-items:center;min-height:38px}
}
@media (max-width:340px){
  header.site.nav-many .brand .mark{width:30px;height:30px}
  header.site.nav-many .nav-links{gap:3px}
  header.site.nav-many .nav-cta{font-size:11px;padding:5px 6px}
}
/* 280px, the Galaxy Fold's outer screen. min-height above holds the tap target while the padding comes off. */
@media (max-width:320px){
  header.site.nav-one .nav-cta,header.site.nav-two .nav-cta{font-size:11px;padding:6px 7px}
}
@media (max-width:300px){
  header.site.nav-many .brand .mark{width:28px;height:28px}
  header.site.nav-many .nav-links{gap:2px}
  header.site.nav-many .nav-cta{font-size:10.5px;padding:5px 5px}
}

/* Footer */
footer.site{padding:28px 0 40px;text-align:center;color:var(--muted);font-size:13px;font-weight:700;border-top:1px solid var(--line);margin-top:44px}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:12px}
.legal-nav a{color:var(--ink-soft);text-decoration:none;font-weight:800;font-size:13px}
.legal-nav a:hover{color:var(--sun-deep)}
.entity{font-size:12px;font-weight:600;opacity:.75;line-height:1.7}
.entity a{color:inherit}
