/*
 * RoboPharma 2026, base element styles and layout primitives.
 * Everything here is expressed in tokens. If you find yourself typing a hex
 * value in this file, it belongs in tokens.css instead.
 */

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

html {
  /* Anchor targets must clear the sticky header or in-page links land
     underneath it. Matching the header token keeps the two in sync. */
  scroll-padding-top: calc(var(--rp-header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

/* overflow-x: clip rather than hidden. `hidden` on a scroll container silently
   kills position: sticky on descendants, which is how a sticky header stops
   sticking for no visible reason. `clip` crops the same overflow and leaves
   sticky working. */
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  /* Funnel Sans for body copy, not Archivo. Archivo is display only.
     Headings set their own weight, so the 300 here does not reach them. */
  font-family: var(--rp-font-body);
  font-weight: var(--rp-body-weight);
  font-size: var(--rp-text-base);
  line-height: var(--rp-lh-body);
  color: var(--rp-navy);
  /* The design's page background is the deep navy, NOT white. It matters
     because the sticky header is translucent (0.82) and composites against
     whatever is behind it: over white the bar rendered (55,64,77) instead of
     the design's (10,22,40), which read as a washed-out grey nav. Measured by
     sampling rendered pixels, not by reading CSS. */
  background: var(--rp-navy-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings: Archivo at width 112, weight 400 for h1 and h3, 500 for
   h2. The width axis and the LIGHT weight are what give this design its
   character; setting these bold at the same size produces a different and
   much heavier page. Measured off the approved design, not chosen. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rp-font-display);
  font-stretch: 112%;
  font-weight: var(--rp-display-weight);
  line-height: var(--rp-lh-display);
  margin: 0 0 0.5em;
  /* NO text-wrap here. The design leaves headings on the browser default;
     `balance` re-flows them to even the line lengths and breaks compounds like
     "high-volume automation" onto an extra line. */
  text-wrap: wrap;
}

h1 {
  font-size: var(--rp-text-h1);
  letter-spacing: var(--rp-track-h1);
  font-weight: 400;
}

h2 {
  font-size: var(--rp-text-h2);
  letter-spacing: var(--rp-track-h2);
  line-height: 1.04;
  /* 23. Was 600. They read heavy against Archivo's extended width. h1 stays
     at 400. */
  font-weight: 500;
}

h3 {
  font-size: var(--rp-text-h3);
  letter-spacing: var(--rp-track-h3);
  line-height: 1.15;
  font-weight: 400;
}

h4 { font-size: var(--rp-text-base); font-weight: 600; }

p { margin: 0 0 1.15em; text-wrap: pretty; color: var(--rp-slate); }
.rp-section--navy p, .rp-section--deep p, .rp-hero p { color: var(--rp-blue-pale); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

/* Measure. Long lines are the single most common readability failure on a
   wide screen, and a max-width in ch is the cheapest fix. */
.rp-prose > p,
.rp-prose > ul,
.rp-prose > ol { max-width: var(--rp-container-text); }

a { color: var(--rp-burnt); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

/* Focus. :focus-visible only, so a mouse click does not paint a ring, but
   every keyboard user gets an unmissable one. The offset keeps it clear of
   the element's own border. */
:focus-visible {
  outline: var(--rp-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

ul, ol { padding-left: 1.15em; }
li { margin-bottom: 0.35em; }

hr {
  border: 0;
  height: 1px;
  background: var(--rp-line);
  margin: var(--rp-gap) 0;
}

::selection { background: var(--rp-amber); color: var(--rp-navy); }

/* ── The section contract ───────────────────────────────────────────────────
   Every section owns its own vertical padding and paints its background edge
   to edge, so sections can be stacked in any order and still butt cleanly
   against each other.

   This is the same contract as the Capsa RP Launch Template, and it broke
   there in three separate ways, all of them a margin escaping a section and
   exposing a stripe of the body colour behind it. Hence `margin: 0` here
   rather than only padding: it is the margin, not the padding, that leaks. */
.rp-section {
  margin: 0;
  padding-block: var(--rp-section-y);
  background: var(--rp-white);
  position: relative;
}

.rp-section--paper { background: var(--rp-paper); }
.rp-section--sand  { background: var(--rp-sand); }
.rp-section--sand-deep { background: var(--rp-sand-deep); }
.rp-section--navy  { background: var(--rp-navy); color: var(--rp-white); }
.rp-section--deep  {
  background: linear-gradient(90deg, var(--rp-navy-deep), var(--rp-navy));
  color: var(--rp-white);
}

/* Horizontal, never diagonal. A diagonal gradient restarts inside any section
   that sits flush against another and leaves a visible seam at the join; a
   horizontal one looks identical at every vertical slice, so two stacked
   sections read as one continuous background. Learned the hard way on Capsa. */

.rp-section--navy :is(h1, h2, h3, h4),
.rp-section--deep :is(h1, h2, h3, h4) { color: var(--rp-white); }

.rp-section--navy p,
.rp-section--deep p { color: var(--rp-blue-pale); }

.rp-section--navy a:not(.rp-btn),
.rp-section--deep a:not(.rp-btn) { color: var(--rp-amber-soft); }

/* Flush spacing: a band that hangs off the section above it. It drops its top
   padding, so set its background to match whatever it follows. */
.rp-section--flush-top { padding-top: 0; }
.rp-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

.rp-container {
  width: min(var(--rp-container), 100%);
  margin-inline: auto;
  padding-inline: var(--rp-gutter);
}

.rp-container--wide { width: min(var(--rp-container-wide), 100%); }
.rp-container--text { width: min(var(--rp-container-text), 100%); }

/* ── Section headers ────────────────────────────────────────────────────── */
.rp-eyebrow {
  display: block;
  font-size: var(--rp-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--rp-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--rp-burnt);
  margin-bottom: 1.1rem;
}

/* Amber fails contrast as text on white (2.0:1), so the light-surface eyebrow
   is burnt orange and only the dark-surface one is amber. */
.rp-section--navy .rp-eyebrow,
.rp-section--deep .rp-eyebrow { color: var(--rp-amber-soft); }

.rp-section__head { margin-bottom: var(--rp-gap); max-width: 46ch; }
.rp-section__head p { font-size: var(--rp-text-lead); color: var(--rp-slate); }
.rp-section--navy .rp-section__head p,
.rp-section--deep .rp-section__head p { color: var(--rp-blue-pale); }

/* ── Layout primitives ──────────────────────────────────────────────────────
   Auto-fit grids rather than fixed column counts. The layout reflows on
   available width instead of on a device guess, so there is no breakpoint at
   which a card is awkwardly half-width. */
.rp-grid { display: grid; gap: var(--rp-gap); }

.rp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.rp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.rp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Split: content beside media. Stacks below 48rem. */
.rp-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 48rem) {
  .rp-split { grid-template-columns: 1fr 1fr; }
  .rp-split--media-first > :first-child { order: 2; }
}

/* The card image variant fills its row and crops; the plain variant is a
   device mockup and must never be cropped. On Capsa, `align-items: center`
   with an image shorter than the copy left ~200px of dead space beside the
   photo. Naming the variant on the element is what lets the CSS tell the two
   apart. */
.rp-split__media--card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rp-radius);
}

.rp-split__media--plain img { border-radius: var(--rp-radius); }

/* ── Accessibility helpers ────────────────────────────────────────────── */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The skip link must be reachable but invisible until focused. */
.rp-skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 200;
  background: var(--rp-amber);
  color: var(--rp-navy);
  padding: 0.75rem 1.25rem;
  border-radius: var(--rp-radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}

.rp-skip:focus { top: 0.5rem; }

@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;
  }
  html { scroll-behavior: auto; }
}

/* ── Print ──────────────────────────────────────────────────────────────────
   Pharmacy buyers circulate printed pages internally more than most
   audiences, so this is worth the twelve lines. */
@media print {
  .rp-header, .rp-footer, .rp-skip, .rp-cta-band, .rp-form { display: none; }
  .rp-section { padding-block: 1rem; background: #fff !important; color: #000 !important; }
  .rp-section :is(h1,h2,h3,p) { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}