/* ==========================================================================
   The Pharmacy Hub — R&D and Innovation
   main.css — design tokens, reset, typography, layout, buttons
   Every colour, space and size used across the site is declared here once.
   ========================================================================== */

:root {
  /* ---- Colour: grounds ------------------------------------------------- */
  --color-bg:            #F8F8F5;  /* default page ground */
  --color-surface:       #EFF3F6;  /* alternating section ground */
  --color-white:         #FFFFFF;
  --color-ink:           #182126;  /* dark section ground + primary text */
  --color-ink-deep:      #101A1F;  /* header glass, brand ground */
  --color-ink-hero:      #0B1216;  /* hero backdrop behind photography */

  /* ---- Colour: text ---------------------------------------------------- */
  --color-text:            #182126;
  --color-text-secondary:  #5D6870;
  --color-text-on-dark:    #FFFFFF;
  --color-text-on-dark-mid:#D6E2EE;
  --color-text-on-dark-low:rgba(255, 255, 255, 0.72);

  /* ---- Colour: blue --------------------------------------------------- */
  --color-blue:        #315F9B;
  --color-blue-dark:   #23456F;
  --color-blue-light:  #DDE7F1;
  --color-blue-pale:   #E6EDF4;
  --color-blue-mid:    #5C8AC0;
  --color-blue-tint:   #C9DAEC;
  --color-blue-icon:   #D3E2F2;  /* icon tint on dark glass */

  /* ---- Colour: accent (red) ---------------------------------------- */
  --color-accent:          #C8102E;  /* on light grounds */
  --color-accent-dark:     #A00D25;  /* small text on light, 4.5:1 */
  --color-accent-on-dark:  #FF6B7A;  /* on ink / photography */

  /* ---- Colour: lines -------------------------------------------------- */
  --color-border:          #DCE2E6;
  --color-border-strong:   #182126;
  --color-border-on-dark:  rgba(255, 255, 255, 0.22);
  --color-border-on-dark-soft: rgba(255, 255, 255, 0.14);

  /* ---- Typography ----------------------------------------------------- */
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1:        clamp(31px, 4.5vw, 60px);
  --fs-h1-home:   clamp(38px, 6.4vw, 96px);
  --fs-h2:        clamp(25px, 3vw, 42px);
  --fs-h2-dark:   clamp(26px, 3.4vw, 46px);
  --fs-h2-small:  clamp(22px, 2.2vw, 31px);
  --fs-h3:        clamp(16px, 1.4vw, 21px);
  --fs-lead:      clamp(15px, 1.08vw, 17px);
  --fs-body:      16px;
  --fs-body-sm:   15px;
  --fs-body-xs:   14.5px;
  --fs-kicker:    10px;
  --fs-note:      9.5px;
  --fs-btn:       11.5px;

  --lh-tight:  1.02;
  --lh-head:   1.15;
  --lh-body:   1.6;
  --lh-list:   1.35;

  --ls-h1:     -0.032em;
  --ls-h2:     -0.03em;
  --ls-h3:     -0.018em;
  --ls-kicker: 0.2em;
  --ls-label:  0.18em;
  --ls-btn:    0.12em;

  /* ---- Spacing scale -------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;

  /* Fluid section rhythm — matches the approved page spacing */
  --section-y:        clamp(44px, 6.5vh, 80px);
  --section-y-tight:  clamp(40px, 6vh, 72px);
  --section-y-loose:  clamp(48px, 7vh, 88px);
  --block-y:          clamp(26px, 3.6vh, 42px);

  /* ---- Layout --------------------------------------------------------- */
  --container-max:    1320px;   /* inner pages (approved) */
  --gutter:           clamp(20px, 5vw, 48px);
  --gutter-wide:      clamp(20px, 5vw, 76px); /* homepage full-bleed gutters */
  --header-h:         74px;
  --hero-min-h:       clamp(440px, 68vh, 640px);

  /* ---- Radius / elevation -------------------------------------------- */
  --radius:        2px;
  --radius-media:  0px;
  --shadow-panel:  0 30px 64px -34px rgba(8, 14, 18, 0.6);
  --shadow-float:  0 18px 40px -26px rgba(16, 26, 31, 0.5);

  /* ---- Motion --------------------------------------------------------- */
  --t-fast:   0.18s ease;
  --t-base:   0.28s ease;
  --t-slow:   0.55s ease;
  --t-glide:  0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Breakpoints (documented; media queries use the literals) ------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-nav: 1160px;  /* desktop nav <-> drawer switch */
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

svg { display: block; }

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol { margin: 0; padding: 0; }

figure { margin: 0; }

/* ==========================================================================
   Links
   ========================================================================== */

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover { color: var(--color-blue-dark); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

::selection {
  background: var(--color-blue-light);
  color: var(--color-text);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-head);
  color: var(--color-text);
  text-wrap: pretty;
}

p { margin: 0; text-wrap: pretty; }

.h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: var(--ls-h1);
}

.h1--home {
  font-size: var(--fs-h1-home);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
}

.h2--small {
  font-size: var(--fs-h2-small);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.h2--dark {
  font-size: var(--fs-h2-dark);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-tight);
  color: var(--color-text-on-dark);
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
}

/* Small uppercase mono label above a heading */
.kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: 400;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.kicker--accent { color: var(--color-accent); }
.kicker--on-dark { color: var(--color-blue-pale); }
.kicker--on-photo { color: var(--color-accent-on-dark); }

/* Copper rule + label pair */
.kicker-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.kicker-row__rule {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-accent);
}

.kicker-row__rule--on-photo { background: var(--color-accent-on-dark); }

.lead {
  font-size: var(--fs-lead);
  color: var(--color-text-secondary);
  max-width: 62ch;
}

.lead--on-photo {
  color: rgba(255, 255, 255, 0.86);
}

.lead--on-dark { color: var(--color-text-on-dark-mid); }

/* Mono footnote / qualification note */
.note {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  line-height: 1.55;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
}

.measure-sm { max-width: 46ch; }
.measure    { max-width: 62ch; }
.measure-lg { max-width: 76ch; }

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.section {
  padding: var(--section-y) var(--gutter);
  background: var(--color-bg);
}

.section--white   { background: var(--color-white); }
.section--surface { background: var(--color-surface); }
.section--ink     { background: var(--color-ink); color: var(--color-text-on-dark); }
.section--blue    { background: var(--color-blue-dark); color: var(--color-text-on-dark); }
.section--tight   { padding-block: var(--section-y-tight); }
.section--loose   { padding-block: var(--section-y-loose); }
.section--rule-top    { border-top: 1px solid var(--color-border); }
.section--rule-bottom { border-bottom: 1px solid var(--color-border); }

/* Full-bleed variant used by the homepage */
.section--bleed { padding-inline: var(--gutter-wide); }

.block { margin-top: var(--block-y); }

/* Generic responsive grid: cells wrap, never squash */
.grid {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
}

.grid--auto   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--auto-sm{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.grid--auto-xs{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 164px), 1fr)); }
.grid--auto-lg{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--end    { align-items: end; }
.grid--start  { align-items: start; }
.grid--rows-only { gap: 0 clamp(22px, 3vw, 48px); }

.flow > * + * { margin-top: var(--space-4); }

.rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.rule--strong { border-top-width: 2px; border-color: var(--color-border-strong); }
.rule--on-dark { border-top-color: var(--color-border-on-dark); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.btn svg { flex: 0 0 auto; }

.btn--primary {
  background: var(--color-blue-dark);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-blue); color: var(--color-white); }

.btn--outline {
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn--outline:hover { border-color: var(--color-blue); color: var(--color-blue); }

/* On photography / ink grounds */
.btn--light {
  background: var(--color-white);
  color: var(--color-ink-deep);
}
.btn--light:hover { background: var(--color-accent-on-dark); color: var(--color-ink-deep); }

.btn--outline-light {
  border-color: rgba(255, 255, 255, 0.46);
  color: var(--color-white);
}
.btn--outline-light:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.btn--sm { padding: 13px 18px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Underlined mono text link */
.link-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 4px;
}
.link-mono:hover { color: var(--color-blue); border-color: var(--color-blue); }

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  z-index: 200;
  background: var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 12px 16px;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--space-4); color: var(--color-white); }

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