/* =============================================================
   Chemist2U — base layer
   Scoped reset, typography and layout primitives.

   EVERYTHING here is scoped under .c2u-page. Divi ships ~2800
   global rules that style p, h1-h6, ul, a and form controls; this
   file neutralises that inheritance inside our pages only, without
   touching the rest of the site.

   Deliberately unlayered — see the note in c2u-tokens.css.
   ============================================================= */


/* ── Webfont ─────────────────────────────────────────────────────
   Dropped at conversion. The theme's own fonts.css already declares
   'Inter' 400/500/600, and @font-face is document-global — so
   font-family: Inter below resolves against the faces the site is
   already loading, and this bundle adds no font request and ships no
   font files. These pages use no italic. See tools/build-theme.mjs. */


/* ── Scoped reset ────────────────────────────────────────────────
   Each rule here exists to undo something Divi sets globally.

   Element selectors are wrapped in :where() so each rule lands at
   specificity (0,1,0) — the .c2u-page class alone. That is enough to
   beat Divi (whose resets are bare `p`, `h1`, `a` … at 0,0,1) while
   staying low enough that a single component class can still set its
   own margins. Writing `.c2u-page p` instead would score 0,1,1 and
   silently override every .c2u-* component rule.                   */

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

.c2u-page {
  position: relative;
  z-index: 0;                                /* stacking context for the gradient layer below */
  font-family: var(--c2u-font-body);
  font-size: var(--c2u-fs-body);
  line-height: var(--c2u-lh-body);          /* Divi sets 1.7em on body */
  color: var(--c2u-ink);
  background: none;                          /* the ::before layer paints the page */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;                          /* full-bleed sections must never scroll the page */
}

/* Fixed page gradient — matches the homepage
   (home-src/wordpress/css/c2u-home.css). Sections that want to sit on it use
   .c2u-section--transparent; opaque surfaces cover it as normal.

   The homepage paints this with background-attachment:fixed and only falls back
   to a viewport-fixed pseudo-element below 980px, because iOS Safari ignores
   fixed attachment. We use the pseudo-element at every width instead: it is one
   code path, and it also covers iPadOS above 980px, where the homepage's
   fallback does not reach. Nothing here needs the attachment trick — that exists
   on the homepage so its service-stack curtain can align pixel-for-pixel with
   the page behind it, and we have no such curtain. */
.c2u-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(125% 125% at 50% 90%,
              var(--c2u-paper) 35%,
              var(--c2u-surface-soft) 100%);
  pointer-events: none;
}

/* Grainient — the shader background from parts/grainient.php, laid over the
   gradient above on the same fixed plane.

   Over, not instead of. The div and the ::before both sit at z-index -1 in
   .c2u-page's stacking context, so painting order falls to document order and
   the canvas lands on top — but only if there is a canvas. WebGL2 missing, the
   context refused, the shader failing to compile: every one of those leaves
   this element empty, and an empty element shows the gradient through it. The
   fallback needs no code because it is just the page as it was.

   z-index rather than a negative one on the canvas: sections are z-index auto,
   so they stack above both layers without either needing to be reached for. */
.c2u-grainient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* No background of its own. A colour here would be a second fallback
     competing with the gradient, and it would win by covering it. */
}

.c2u-grainient__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Divi adds padding-bottom to headings and paragraphs, and its own sizes. */
.c2u-page :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
  font-family: inherit;
  color: var(--c2u-navy);
  text-wrap: balance;
}

.c2u-page :where(p) {
  margin: 0;
  padding: 0;
}

.c2u-page :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c2u-page :where(a) {
  color: var(--c2u-red);
  text-decoration: none;
  transition: color var(--c2u-fast) var(--c2u-ease);
}
.c2u-page :where(a):hover { color: var(--c2u-red-deep); }

.c2u-page :where(img, svg) {
  display: block;
  max-width: 100%;
  height: auto;
}

.c2u-page :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  margin: 0;
}

.c2u-page :where(hr) {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--c2u-line);
}

/* Visible focus for keyboard users — Divi suppresses outlines in places. */
.c2u-page :focus-visible {
  outline: 2px solid var(--c2u-red);
  outline-offset: 3px;
  border-radius: 2px;
}

.c2u-visually-hidden {
  position: absolute;
  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 matches .c2u-header-bar exactly (1440px, 56/32/20px
   padding) so page content aligns to the header logo at every width. */

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

.c2u-container--narrow { max-width: 900px; }

.c2u-section {
  padding-block: var(--c2u-section-y);
}

.c2u-section--mist  { background: var(--c2u-surface-mist); }
.c2u-section--soft  { background: var(--c2u-surface-soft); }
.c2u-section--paper { background: var(--c2u-surface-paper); }

/* Lets the fixed page gradient show through. */
.c2u-section--transparent { background: transparent; }

.c2u-section--ink {
  background: var(--c2u-surface-ink);
  color: #fff;
}
.c2u-section--ink h1,
.c2u-section--ink h2,
.c2u-section--ink h3,
.c2u-section--ink h4 { color: #fff; }

/* Tighten the gap when two same-coloured sections stack. */
.c2u-section + .c2u-section--paper { padding-block-start: 0; }

.c2u-stack > * + * { margin-block-start: var(--c2u-space-4); }


/* ── Typography utilities ────────────────────────────────────────  */

.c2u-eyebrow {
  display: inline-block;
  font-size: var(--c2u-fs-eyebrow);
  font-weight: var(--c2u-fw-eyebrow);
  line-height: var(--c2u-lh-eyebrow);
  letter-spacing: var(--c2u-ls-eyebrow);
  text-transform: uppercase;
  color: var(--c2u-red);
}

.c2u-display {
  font-size: var(--c2u-fs-display);
  font-weight: var(--c2u-fw-display);
  line-height: var(--c2u-lh-display);
  letter-spacing: var(--c2u-ls-display);
}

.c2u-h1 {
  font-size: var(--c2u-fs-heading-1);
  font-weight: var(--c2u-fw-heading-1);
  line-height: var(--c2u-lh-heading-1);
  letter-spacing: var(--c2u-ls-heading-1);
}

.c2u-h2 {
  font-size: var(--c2u-fs-heading-2);
  font-weight: var(--c2u-fw-heading-2);
  line-height: var(--c2u-lh-heading-2);
  letter-spacing: var(--c2u-ls-heading-2);
}

.c2u-h3 {
  font-size: var(--c2u-fs-heading-3);
  font-weight: var(--c2u-fw-heading-3);
  line-height: var(--c2u-lh-heading-3);
  letter-spacing: var(--c2u-ls-heading-3);
}

.c2u-h4 {
  font-size: var(--c2u-fs-heading-4);
  font-weight: var(--c2u-fw-heading-4);
  line-height: var(--c2u-lh-heading-4);
  letter-spacing: var(--c2u-ls-heading-4);
}

/* Explicit line breaks in a heading, emitted by c2u_lines().
   Blocks on desktop; below the mobile breakpoint they fall back to inline so
   the text reflows into balanced lines instead of breaking twice. Add
   .c2u-line--hard on the heading's spans to keep the breaks at every width. */
.c2u-line { display: block; }

/* text-wrap: balance fights an explicit break — the browser would rebalance
   inside each span. Turn it off where the author has chosen the breaks. */
.c2u-page :has(> .c2u-line) { text-wrap: initial; }

@media (max-width: 767px) {
  .c2u-line:not(.c2u-line--hard) { display: inline; }
}

.c2u-lead {
  font-size: var(--c2u-fs-lead);
  line-height: var(--c2u-lh-lead);
  letter-spacing: var(--c2u-ls-lead);
  color: var(--c2u-muted);
  max-width: var(--c2u-measure);
  text-wrap: pretty;
}

.c2u-body { font-size: var(--c2u-fs-body); line-height: var(--c2u-lh-body); }
.c2u-small { font-size: var(--c2u-fs-body-small); line-height: var(--c2u-lh-body-small); }

.c2u-muted { color: var(--c2u-muted); }
.c2u-measure { max-width: var(--c2u-measure); }

/* Section header block — eyebrow / heading / subhead */
.c2u-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--c2u-space-4);
  max-width: var(--c2u-measure);
  margin-block-end: var(--c2u-space-9);
}
.c2u-section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}


/* ── Icons ───────────────────────────────────────────────────────
   Inline SVG from parts/icon.php. Sized in em and painted in
   currentColor, so an icon takes the size and colour of whatever
   text it sits in and a caller never has to restate either.
   Must come after the img/svg reset above, which sets height:auto
   at the same specificity.                                         */

.c2u-icon {
  flex: none;                  /* never squashed when it is a flex item */
  width: 1em;
  height: 1em;
}


/* ── Buttons ─────────────────────────────────────────────────────
   .c2u-btn is also the style target for the HubSpot submit button,
   so keep it usable on <button>, <a> and <input type=submit>.      */

.c2u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--c2u-space-2);
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: var(--c2u-radius-pill);
  font-size: var(--c2u-fs-label);
  font-weight: var(--c2u-fw-label);
  line-height: var(--c2u-lh-label);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--c2u-base) var(--c2u-ease),
    border-color     var(--c2u-base) var(--c2u-ease),
    color            var(--c2u-base) var(--c2u-ease),
    transform        var(--c2u-fast) var(--c2u-ease),
    box-shadow       var(--c2u-base) var(--c2u-ease);
}

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

/* Trailing icon. Slightly larger than the cap height it sits beside — an arrow
   set at a strict 1em reads small next to the label's uppercase weight — and
   nudged along on hover, which is the whole point of the arrow.
   The button's own gap supplies the space before it. */
.c2u-btn__icon {
  width: 1.15em;
  height: 1.15em;
  transition: transform var(--c2u-base) var(--c2u-ease);
}
.c2u-btn:hover .c2u-btn__icon { transform: translateX(3px); }

/* Every variant is scoped with .c2u-page so it out-specifies the `.c2u-page a`
   colour rule above (0,1,1) — a bare `.c2u-btn--primary` (0,1,0) would lose to
   it and render red text on a red pill. */

.c2u-page .c2u-btn--primary {
  background: var(--c2u-red);
  color: #fff;
  box-shadow: var(--c2u-shadow-sm);
}
.c2u-page .c2u-btn--primary:hover {
  background: var(--c2u-red-deep);
  color: #fff;
  box-shadow: var(--c2u-shadow-lg);
}

.c2u-page .c2u-btn--secondary {
  background: transparent;
  border-color: var(--c2u-input-border);
  color: var(--c2u-navy);
}
.c2u-page .c2u-btn--secondary:hover {
  background: var(--c2u-navy);
  border-color: var(--c2u-navy);
  color: #fff;
}

.c2u-page .c2u-btn--ghost {
  background: #fff;
  color: var(--c2u-navy);
  box-shadow: var(--c2u-shadow-sm);
}
.c2u-page .c2u-btn--ghost:hover { color: var(--c2u-red); }


/* ── Motion preferences ──────────────────────────────────────────  */

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


/* ── Breakpoints ─────────────────────────────────────────────────
   980px and 767px deliberately match the deployed header.          */

@media (max-width: 980px) {
  .c2u-container { padding-inline: var(--c2u-gutter-tablet); }
}

@media (max-width: 767px) {
  .c2u-container { padding-inline: var(--c2u-gutter-mobile); }
  .c2u-btn { width: 100%; }
  .c2u-section-head { margin-block-end: var(--c2u-space-7); }
}