/* ==========================================================================
   Peak Compounding Pharmacy - reset, elements, utilities
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines are Archivo. 700 at display sizes and a touch of negative tracking:
   a grotesque set at 0 tracking looks loose at 48px, where the same setting
   flattered the serif this replaced. h3 drops to 600 because at 28px, 700 is
   heavier than the hierarchy needs. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); line-height: 1.08; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.01em; }
/* h4 is a label rather than a headline, so it takes interface type. */
h4 { font-family: var(--font-ui); font-size: var(--step-1); font-weight: 600; }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Links are distinguished by weight AND underline, never by colour alone
   (BRAND_GUIDE section 8). Colour-blind users and printed pages both need this. */
a {
  color: var(--interactive);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--interactive-dk); text-decoration-thickness: 2px; }

/* Focus is always visible. Never remove this without a replacement.

   ONE ring colour cannot clear 3:1 on every band this site has. Measured:
   --focus (#b7601c) is 4.6:1 on white, but only 1.74:1 on Peak Green and
   2.72:1 on deep teal, so on the contact strip and every dark band the focus
   indicator was failing WCAG 1.4.11 outright. Peak Green is a mid tone, so the
   ring has to go DARKER there and LIGHTER on the teal bands. The two overrides
   below are measured, not guessed: ink on green is 4.75:1 and #ffd9a8 on deep
   teal is 9.11:1. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.contactstrip :focus-visible { outline-color: var(--ink); }

.band--ink :focus-visible,
.site-footer :focus-visible,
.pagehero :focus-visible,
.slider :focus-visible,
.handoff :focus-visible { outline-color: #ffd9a8; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
li { margin-bottom: var(--sp-2); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

/* Every click-to-call link is a real tap target, wherever it appears. On a
   pharmacy site the phone number is the single most-tapped thing on the page,
   and inline text height alone left several of them at 22px. */
a[href^="tel:"]:not(.btn):not(.cta-pair) {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
/* The exclusions are not cosmetic. An attribute selector outranks a single
   class, so the unscoped version overrode ".header-cta { display: none }" in
   the mobile media query and un-hid the Spanish header's call button, which is
   a tel: link where the English one is not. Both button systems already own
   their tap-target dimensions. */

/* Phone numbers, fax, hours and any figure a patient reads aloud or compares.
   Lining tabular figures, per BRAND_GUIDE section 8. */
.num,
.nap a[href^="tel:"],
.hours-table {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* --- Layout primitives -------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 900px; }

.band { padding-block: var(--band-y); }
.band--tint { background: var(--tint); }
.band--ink  { background: var(--ink); color: #fff; }
.band--ink h2, .band--ink h3 { color: #fff; }
.band--ink p { color: rgba(255, 255, 255, 0.88); }
.band--ink a { color: #a8e0e2; }
.band--ink a:hover { color: #d3f0f1; }

/* No max-width on the BOX. 44ch resolved against this div's own font size,
   which is body size, so it capped at about 372px and squeezed the 48px section
   heading inside it into a narrow three-line stack. The heading carries its own
   display measure (components.css) and the paragraph carries --measure, both
   sized in their own font, which is what a measure is supposed to mean. */
.band-head { margin-bottom: var(--sp-7); }
.band-head p { color: var(--ink-70); font-size: var(--step-1); }
.band--ink .band-head p { color: rgba(255, 255, 255, 0.85); }

/* The eyebrow is a label, not a heading. It never carries an h-tag. */
.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--interactive);
  margin-bottom: var(--sp-3);
}
.band--ink .eyebrow { color: #8fd3d6; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;                 /* comfortably above the 44px target min */
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

/* The primary button is Peak Green lettered in DEEP TEAL, never in white.
   White on this green measures 2.6:1 and fails outright; deep teal on it
   measures 4.8:1 and passes. The brand direction states this explicitly and
   letters every Start Your Visit button in the document the same way. If a
   green button ever appears with white text on this site, it is a bug. */
.btn--primary {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--ink);
}
.btn--primary:hover { background: var(--green-dk); border-color: var(--green-dk); color: var(--ink); }

.btn--secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); color: #fff; }

/* On a dark field the outline button reverses; the green primary does not
   change, because its contrast comes from its own fill and lettering rather
   than from the surface behind it. */
.band--ink .btn--secondary,
.hero--photo .btn--secondary,
.slider__slide .btn--secondary,
.pagehero .btn--secondary,
.contactstrip .btn--secondary { border-color: rgba(255,255,255,0.75); color: #fff; }
.band--ink .btn--secondary:hover,
.hero--photo .btn--secondary:hover,
.slider__slide .btn--secondary:hover,
.pagehero .btn--secondary:hover,
.contactstrip .btn--secondary:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* The header is a white bar, so its outline button stays dark. */
.site-header .btn--secondary { border-color: var(--ink); color: var(--ink); }
.site-header .btn--secondary:hover { background: var(--ink); color: #fff; }

.btn:active { transform: translateY(1px); }

/* Tertiary text link with a trailing arrow. Used for the prescriber path and
   for every "read more" affordance, so the site has one and only one of these. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-ui);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.link-arrow svg { width: 1em; height: 1em; flex: none; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Accessibility helpers ---------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* --- Reading template ----------------------------------------------------
   Reading pages use the same site-wide canvas as the header. Readability is
   controlled by --measure on paragraphs and lists, not by shrinking the whole
   hero, band, grid, and sidebar into a second narrower page width. */
.tpl-reading .container { max-width: var(--container-max); }