/* =============================================================================
   Seasons Care Modern — Design System (tokens, base, primitives, components)
   Warm · premium · compassionate · home-like · WCAG 2.2 AA
   ============================================================================= */

:root {
  /* ---- Color palette (warm, home-like; not institutional blue) ---- */
  --cream:        #FBF7F0;   /* page background */
  --cream-2:      #F4EEE1;   /* alternating section */
  --cream-3:      #ECE3D2;   /* borders / soft fills */
  --paper:        #FFFFFF;

  --ink:          #263230;   /* primary text  (>=13:1 on cream) */
  --ink-soft:     #47544F;   /* secondary text (>=7:1 on cream) */
  --ink-mute:     #6B7671;   /* muted meta (>=4.6:1 on cream) */

  --forest:       #2E5A4C;   /* primary brand */
  --forest-700:   #234739;
  --forest-800:   #1B372D;
  --forest-050:   #E6EFEA;
  --forest-100:   #D3E5DC;

  --clay:         #A94E2E;   /* warm accent / primary action (white text = 5.4:1) */
  --clay-600:     #97431F;
  --clay-050:     #F7E9E2;

  --gold:         #C98A2E;   /* highlights, stars */
  --gold-050:     #FBEFD8;

  --focus:        #12463a;
  --focus-ring:   #E4B363;

  --ok:           #2C7A54;
  --warn:         #9A6212;
  --err:          #B23B2E;

  /* ---- Typography ---- */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.22vw, 1.16rem);   /* body — comfortably large for older readers */
  --step-1:  clamp(1.22rem, 1.14rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.48rem, 1.34rem + 0.7vw, 1.9rem);
  --step-3:  clamp(1.85rem, 1.6rem + 1.2vw, 2.6rem);
  --step-4:  clamp(2.25rem, 1.9rem + 1.9vw, 3.4rem);
  --step-5:  clamp(2.7rem, 2.1rem + 3vw, 4.3rem);

  /* ---- Spacing scale ---- */
  --sp-1: 0.375rem; --sp-2: 0.625rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2.25rem;  --sp-6: 3.25rem;  --sp-7: 4.75rem; --sp-8: 6.5rem;

  /* ---- Radius / shadow / layout ---- */
  --radius-sm: 8px; --radius: 16px; --radius-lg: 26px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(38,50,48,.06), 0 2px 6px rgba(38,50,48,.06);
  --shadow:    0 6px 20px rgba(38,50,48,.09), 0 2px 6px rgba(38,50,48,.06);
  --shadow-lg: 0 22px 48px rgba(27,55,45,.16), 0 6px 14px rgba(38,50,48,.08);

  --container: 76rem;   /* ~1216px */
  --container-narrow: 48rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* ---- Floating-control clearance --------------------------------------------------------
     Width the fixed edge controls actually occupy, so layout can keep clear of them instead of
     being covered by them. Measured, not guessed:
       left  = 16px offset + 52px launcher + 16px breathing room  = 84px
       right = 12px offset + 67px action rail + 13px breathing room = 92px
                (the Family Guide launcher sits inside this envelope: 16 + 54 = 70px)
     Zero by default. Only the breakpoints where those controls are actually on screen opt in,
     which is why mobile — where the controls dock to the bottom corners — pays nothing. */
  --scc-floating-left-clearance: 0px;
  --scc-floating-right-clearance: 0px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Above 48rem the accessibility launcher leaves the bottom corner and sits mid-edge, so from here
   up the left side has to be kept clear. */
@media (min-width: 48.01rem) {
  :root { --scc-floating-left-clearance: 84px; }
}
/* The right action rail is itself `display:none` below 68rem, so the right side only needs
   clearance above that. */
@media (min-width: 68.01rem) {
  :root { --scc-floating-right-clearance: 92px; }
}

/* ---- Reset extras (theme ships a minimal one, this augments) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--forest-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--clay-600); }
h1,h2,h3,h4 { font-family: var(--font-serif); color: var(--ink); line-height: 1.15; font-weight: 600; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
strong { color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--cream-3); margin: var(--sp-5) 0; }
:target { scroll-margin-top: 6rem; }

/* ---- Accessibility: focus + skip link ---- */
:focus-visible {
  /* Strong dark ring (>=9:1 on cream) + gold halo so it is unmistakable on light AND dark surfaces */
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(228,179,99,.55);
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 8px; top: -60px;
  background: var(--forest); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 200;
  font-weight: 600; transition: top .15s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Layout primitives ---- */
/* The container yields to the floating edge controls rather than running underneath them.
   The larger of the two clearances is applied symmetrically so content stays optically centred
   instead of drifting left.

   This costs nothing at wide viewports: the `min()` only bites once the viewport is too narrow to
   fit the full container PLUS both gutters PLUS both clearances (~1480px for the 76rem container).
   Above that the first term wins and the layout is byte-for-byte what it was. Below it, content
   pulls inward by exactly as much as it must — which is the whole fix, and why this is not the
   "huge permanent page margin" the brief rules out. */
.container {
  --_scc-clear: max(var(--scc-floating-left-clearance), var(--scc-floating-right-clearance));
  width: min(var(--container), 100% - (var(--gutter) + var(--_scc-clear)) * 2);
  margin-inline: auto;
}
.container-narrow {
  --_scc-clear: max(var(--scc-floating-left-clearance), var(--scc-floating-right-clearance));
  width: min(var(--container-narrow), 100% - (var(--gutter) + var(--_scc-clear)) * 2);
  margin-inline: auto;
}

/* THE HEADER TAKES NO FLOATING CLEARANCE — it is never level with the controls.
   The site header and top bar are sticky at the very top of the viewport, while the accessibility
   launcher is anchored at 72% of viewport height, the action rail at 50%, and both dock to the
   bottom corners on mobile. Measured at 1440x900: header occupies y 0-132, rail starts at y 358,
   launcher at y 648. They can never meet.
   Inheriting the clearance therefore bought nothing and cost the header 264px of width, which
   squeezed the logo and nav toward the centre. Zeroing the local variable restores full width
   while leaving every content container protected.
   Must stay AFTER .container: same specificity, so source order decides. */
.site-header__inner,
.topbar__inner { --_scc-clear: 0px; }

/* Full-bleed rails that deliberately escape `.container` (edge-to-edge carousels and media strips)
   still have to keep clear of the floating controls, or they slide their content underneath them.
   `.container` cannot do this for them precisely because they opt out of it, so they opt into this
   instead. Symmetric, so the rail stays optically centred.

   Applied to elements that span the full content width — NOT to the section padding — so the
   section background continues edge to edge and only the moving content is inset. */
.scc-floatsafe {
  --_scc-clear: max(var(--scc-floating-left-clearance), var(--scc-floating-right-clearance));
  max-width: calc(100% - var(--_scc-clear) * 2);
  margin-inline: auto;
  /* Keeps scroll-snap landing positions inside the safe area rather than under a control. */
  scroll-padding-inline: var(--_scc-clear);
}
.section { padding-block: clamp(2.75rem, 6vw, var(--sp-8)); }
.section--tint { background: var(--cream-2); }
.section--forest { background: var(--forest); color: #F3EFE6; }
.section--forest h1, .section--forest h2, .section--forest h3 { color: #fff; }
.section--paper { background: var(--paper); }
.stack > * + * { margin-top: var(--sp-3); }
.grid { display: grid; gap: var(--sp-4); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5ch;
  font-family: var(--font-sans); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: var(--step--1); color: var(--clay-600);
  margin: 0 0 .6rem;
}
.section--forest .eyebrow { color: var(--gold-050); }
.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 44ch; }
.measure { max-width: 68ch; }

/* ---- Buttons ---- */
.scc-btn {
  --btn-bg: var(--clay); --btn-fg: #fff; --btn-bd: var(--clay);
  display: inline-flex; align-items: center; justify-content: center; gap: .6ch;
  font-family: var(--font-sans); font-weight: 650; font-size: var(--step-0);
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: .95rem 1.5rem; min-height: 48px; /* touch target */
  border-radius: var(--radius-pill); border: 2px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
  box-shadow: var(--shadow-sm);
}
.scc-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--btn-fg); }
.scc-btn:active { transform: translateY(0); }
.scc-btn--primary { --btn-bg: var(--clay); --btn-bd: var(--clay); --btn-fg:#fff; }
.scc-btn--primary:hover { --btn-bg: var(--clay-600); }
.scc-btn--forest { --btn-bg: var(--forest); --btn-bd: var(--forest); --btn-fg:#fff; }
.scc-btn--forest:hover { --btn-bg: var(--forest-700); }
.scc-btn--ghost { --btn-bg: transparent; --btn-bd: currentColor; --btn-fg: var(--forest-700); box-shadow:none; }
.scc-btn--ghost:hover { --btn-bg: var(--forest-050); }
.section--forest .scc-btn--ghost { --btn-fg:#fff; }
.section--forest .scc-btn--ghost:hover { --btn-bg: rgba(255,255,255,.12); }
.scc-btn--sm { padding: .55rem .95rem; min-height: 40px; font-size: var(--step--1); }
.scc-btn .scc-icon { flex: none; }

/* ---- Badges / pills ---- */
.scc-badge {
  display: inline-flex; align-items:center; gap:.4ch; font-family:var(--font-sans);
  font-size: var(--step--1); font-weight: 700; padding: .2rem .6rem; border-radius: var(--radius-pill);
  background: var(--forest-050); color: var(--forest-700);
}
.scc-badge--test { background: var(--gold-050); color: var(--warn); }
.pill {
  display:inline-flex; align-items:center; gap:.5ch; padding:.35rem .85rem; border-radius:var(--radius-pill);
  background: var(--paper); border:1px solid var(--cream-3); color: var(--ink-soft); font-size: var(--step--1); font-weight:600;
  box-shadow: var(--shadow-sm);
}

/* ---- Cards ---- */
.scc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
/* Services: centered flex wrap so an incomplete final row is balanced/centered, never
   left-orphaned with empty space on the right. Tolerates 3–7+ cards. */
/* Deterministic 4 / 2 / 1 grid — NOT flex-wrap.
   This section was reported as "uneven placement". The cause was the old
   `display:flex; flex:1 1 250px; max-width:300px`: at a ~1161px container that fits four cards on
   row one, which then stretch toward their 300px cap, while the three left over wrap to a narrower
   centred row. Two rows of visibly different card widths.
   An explicit column count makes row occupancy a decision rather than an arithmetic side effect of
   the flex basis, so every card in every row is exactly the same width at every breakpoint. */
.scc-cards--services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 68rem) { .scc-cards--services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .scc-cards--services { grid-template-columns: minmax(0, 1fr); } }
.scc-cards--services > .scc-card { max-width: none; }
.scc-cards--locations { display:flex; flex-wrap:wrap; justify-content:center; } /* centres an incomplete last row */
.scc-cards--locations > .scc-card { flex: 1 1 300px; max-width: 360px; }
.scc-card {
  background: var(--paper); border: 1px solid var(--cream-3); border-radius: var(--radius);
  padding: var(--sp-4); box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  display: flex; flex-direction: column; gap: .5rem;
}
.scc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--forest-100); }
.scc-card__icon {
  display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  background: var(--forest-050); color: var(--forest); margin-bottom: .35rem;
}
.scc-card--service .scc-card__icon { background: var(--clay-050); color: var(--clay-600); }
.scc-card__title { margin: 0; font-size: var(--step-1); }
.scc-card__title a { text-decoration: none; color: var(--ink); }
.scc-card__title a:hover { color: var(--clay-600); }
.scc-card__text { color: var(--ink-soft); margin: 0; font-size: var(--step-0); }
.scc-card__addr { color: var(--ink); font-weight: 600; margin: 0; }
.scc-card__more {
  margin-top: auto; padding-top: .5rem; font-weight: 650; text-decoration: none; color: var(--forest-700);
  display: inline-flex; align-items:center; gap: .4ch;
}
.scc-card__more:hover { gap: .8ch; color: var(--clay-600); }
.scc-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }

/* ---- Stars ---- */
.scc-stars { display: inline-flex; gap: 1px; color: var(--cream-3); }
.scc-star.is-on { color: #9C630C; } /* darker gold: >=3:1 on white/paper for the meaningful rating */

/* ---- Forms ---- */
label { font-weight: 650; color: var(--ink); display:block; margin-bottom:.35rem; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number],
input[type=search], textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--cream-3); border-radius: var(--radius-sm);
  padding: .8rem .9rem; min-height: 48px;
}
textarea { min-height: 8rem; line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: var(--forest); }
::placeholder { color: var(--ink-mute); }
.form-note { color: var(--ink-mute); font-size: var(--step--1); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .scc-btn:hover, .scc-card:hover { transform: none; }
}

/* ---- High contrast / forced colors ---- */
@media (forced-colors: active) {
  .scc-btn, .scc-card, .pill { border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
}