/* ==========================================================================
   one-look — the shared presentation layer for the hand-written pages
   --------------------------------------------------------------------------
   Loaded last on Walk for Education, the contribution pages and Faith in Motion, after css/brand.css (design
   tokens and the MTN Brighter Sans and Sky Text fonts). It puts all three families on one type system without touching the
   protected stylesheets or any pledge, price or payment code: it only changes how things look.

   Rules enforced here (decisions D1, D6, D9; responsive rulebook R3, R7, R9):
     - MTN Brighter Sans for headings, menus, buttons, labels and figures; Sky Text for everything else
     - no italics anywhere
     - no loading screen
     - nothing smaller than 13 px, and nothing wider than the screen
   Each page family keeps its own palette; the brand is chosen by data-brand on <html>.

   This file is a migration layer. A page that moves to the Astro build drops it.
   ========================================================================== */

/* ---------- 1. Type roles ---------- */

/* Everything defaults to the reading face. !important is deliberate: the protected stylesheets name their fonts
   directly and with higher specificity, so this is the only way to apply one system on top of them. */
html[data-brand] body,
html[data-brand] body :where(*) {
  font-family: inherit !important;
  font-style: normal !important;
  font-synthesis: none;
}

html[data-brand] body {
  font-family: var(--font-body) !important;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-brand] body :is(input, select, textarea) {
  font-family: var(--font-body) !important;
}

html[data-brand]
  body
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    button,
    summary,
    label,
    legend,
    th,
    caption,
    figcaption,
    nav a,
    .brand b
  ),
html[data-brand]
  body
  :is([class*="btn"], [class*="button"], [class*="kicker"], [class*="eyebrow"], [class*="crumb"]),
html[data-brand] body :is([class*="label"], [class*="badge"], [class*="pill"], [class*="chip"]),
html[data-brand] body :is([class*="display"], [class*="headline"], [class*="figure"]),
html[data-brand]
  body
  :is(
    [class*="total"],
    [class*="amount"],
    [id*="otal"],
    [id*="mount"],
    [data-sp-amount],
    [data-sp-steps]
  ) {
  font-family: var(--font-head) !important;
}

html[data-brand]
  body
  :is(
    [class*="figure"],
    [class*="total"],
    [class*="amount"],
    [id*="otal"],
    [id*="mount"],
    [data-sp-amount],
    [data-sp-steps],
    th,
    td.num
  ) {
  font-variant-numeric: tabular-nums;
}

/* Emphasis is carried by weight and colour, never by slant. */
html[data-brand] body :is(em, i, cite, dfn, address, var) {
  font-style: normal !important;
  font-weight: 600;
}

/* The stylesheets also reach their fonts through variables, a few of them with !important. Pointing the variables
   at the same two fonts keeps those rules in line with the roles above. */
html[data-brand] {
  --display: var(--font-head);
  --sans: var(--font-body);
  --ed-sans: var(--font-body);
  --ed-serif: var(--font-head);
  --ed-mono: var(--font-head);
  --wfe-display: var(--font-head);
  --wfe-serif: var(--font-head);
  --wfe-body: var(--font-body);
}

html[data-brand] .wfp {
  --wfp-display: var(--font-head);
  --wfp-serif: var(--font-head);
  --wfp-body: var(--font-body);
}

/* ---------- 1a. Type system ---------- */

/* The size, leading and tracking steps are the shared scale in src/design/tokens.json (--fs-*, --lh-*, --ls-*).
   The stylesheets name them directly; the rules below are the cross-cutting roles that cannot live in one place. */

/* Headings and short interface text break into balanced lines; paragraphs avoid a single word on the last line. */
html[data-brand]
  body
  :is(h1, h2, h3, h4, summary, figcaption, .w-display, .w-lede, .lede, [class*="lede"]) {
  text-wrap: balance;
}

html[data-brand] body :is(p, li, dd, blockquote):not([class*="lede"]) {
  text-wrap: pretty;
}

/* Labels are one style on every page: the bold face, capitals, the shared tracking. Several of these classes sit in
   protected stylesheets that set them in the reading face or with their own tracking. */
html[data-brand]
  body
  :is(
    .survey,
    .journey-meta,
    .journey-label,
    .tally .k,
    .segbox .k,
    .paybox .k,
    .msrow .k,
    .cap,
    .wfp-level-name,
    .wfe2-index,
    .channel-type,
    .w-way__n,
    .brand .t span,
    .collection-kicker,
    .collection-label,
    dt
  ) {
  font-family: var(--font-head) !important;
  font-weight: 600;
  letter-spacing: var(--ls-label) !important;
}

/* Money and counts: the bold face with tabular figures, so columns of amounts line up. */
html[data-brand="pci"]
  body
  :is(
    .a,
    .v,
    .big,
    .bigfig,
    .readout .amt,
    .tally .v,
    .statline b,
    .gap-note .big,
    .lrow .n,
    .paybox .no
  ) {
  font-family: var(--font-head) !important;
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-figure);
}

/* A figure is one line of large type: it never inherits the paragraph's leading. */
html[data-brand]
  body
  :is(
    .w-summary strong,
    .w-total strong,
    .receipt-amount,
    .v3-goal > strong b,
    .v3-distance strong
  ) {
  line-height: var(--lh-figure);
}

/* The route chart's 25, 50 and 75 per cent pins are drawn by script into a 1200-unit viewBox that is squeezed to the
   screen width, so on a phone their labels render at about 3 px. Beyond that width they are set at the 13 px floor; the
   chart keeps its own text alternative. */
html[data-brand] .roadSVG .pin text {
  font-size: var(--fs-caption);
}

@media (max-width: 899px) {
  html[data-brand] .roadSVG .pin text {
    display: none;
  }
}

/* Legal and utility pages: a title one step below the campaign titles, and a readable line length. */
html[data-brand] .collections-main h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

html[data-brand] .collections-main h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

html[data-brand] .collections-main :is(p, li) {
  max-width: var(--measure);
}

html[data-brand]
  :is(.collection-notice, .collection-support, .collection-feedback, .collection-field small) {
  font-size: var(--fs-ui);
}

html[data-brand="pci"] .pci-fim-v3 .fbot {
  font-family: var(--font-body) !important;
  font-size: var(--fs-ui);
  letter-spacing: 0.01em;
  text-transform: none;
}

html[data-brand="pci"] .pci-fim-v3 footer :is(p, li) {
  font-size: var(--fs-ui);
  line-height: var(--lh-small);
}

html[data-brand] :is(.collection-kicker, .collection-label) {
  font-size: var(--fs-caption);
}

html[data-brand] .collections-main :is(p, li, label, small, .collection-feedback) {
  line-height: var(--lh-body);
}

/* ---------- 1b. One Walk palette ---------- */

/* The inner Walk pages were built on a red-and-blue editorial palette, the home page on navy, gold and cyan.
   The editorial variables now read the Walk tokens, so every Walk page is navy and ivory with gold fills and
   cyan links. The PCI mark keeps its own red. */
html[data-brand="walk"] {
  --ed-ink: var(--c-ink);
  --ed-ink-soft: var(--c-ink-soft);
  --ed-muted: var(--c-muted);
  --ed-paper: var(--c-paper);
  --ed-bone: var(--c-ivory);
  --ed-navy: var(--c-deep);
  --ed-gold: var(--c-accent);
  --ed-blue: var(--c-link);
  --ed-crimson: var(--c-deep);
  --ed-crimson-deep: var(--c-ink);
  --ed-line: var(--c-line);
  --ed-line-strong: var(--c-line-strong);
}

/* ---------- 2. No loading screen ---------- */

.site-loader {
  display: none !important;
}

/* ---------- 3. Nothing wider than the screen ---------- */

html[data-brand]
  :where(a[href^="mailto:"], a[href^="tel:"], [data-wfe-email], [data-wfe-whatsapp]) {
  overflow-wrap: anywhere;
}

html[data-brand] body :where(p, li, dd, dt, td, th, h1, h2, h3, h4, label, summary) {
  overflow-wrap: break-word;
}

html[data-brand] :where(img, svg, video, canvas, iframe) {
  max-width: 100%;
}

/* ---------- 4. Narrow screens and large text ---------- */

/* A grid or flex item will not shrink below its content unless it is told it may. :where() keeps this at zero
   specificity, so it only replaces the browser default (min-width: auto) and never an explicit min-width. */
:where(div, section, article, aside, header, footer, form, ul, ol, li, figure, main, nav, dl) {
  min-width: 0;
}

html[data-brand] body :where(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: anywhere;
}

/* Text in a narrow box wraps instead of running past the edge (account numbers, long names, large text). */
html[data-brand]
  body
  :where(.w-tiers, .pay-method, .r-gallery-meta, .wfe2-report-card, .wfe2-section-heading)
  :where(*) {
  overflow-wrap: anywhere;
}

html[data-brand] .w-tiers {
  table-layout: fixed;
}

/* The brand lockup shrinks and wraps instead of widening the page when the text size is doubled. */
html[data-brand] .collections-header .brand {
  min-width: 0;
  max-width: 100%;
}

html[data-brand] .collections-header .brand .t {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The small header of the contribution pages keeps its links on screen at 320 px and with large text. */
html[data-brand] .collections-header .wrap,
html[data-brand] .collections-header nav {
  flex-wrap: wrap;
}

html[data-brand] .collections-header nav {
  row-gap: 0;
}

/* The Walk header and the campaign status line wrap at large text instead of pushing the page sideways. */
html[data-brand] .w-header__bar {
  flex-wrap: wrap;
  row-gap: 8px;
}

html[data-brand] .w-kicker.w-hero__status {
  white-space: normal;
  border-radius: 20px;
}

/* Size the hero against its copy column, including tablets with artwork beside it. */
html[data-brand="walk"] .w-hero__copy,
html[data-brand="walk"] .w-pledge__intro {
  container-type: inline-size;
}

/* Sized against its copy column; each phrase of the title is its own line. */
html[data-brand="walk"] .w-hero__title {
  font-size: var(--fs-display);
  font-size: min(var(--fs-display), 15cqi);
  line-height: var(--lh-display);
}

/* On short phones the headline and action come before the tall portrait. */
@media (max-width: 899px) and (max-height: 480px) {
  html[data-brand="walk"] .w-hero__grid {
    grid-template-areas:
      "status"
      "title"
      "lede"
      "actions"
      "media"
      "bene"
      "note";
  }

  html[data-brand="walk"] .w-hero__media {
    margin-top: 24px;
  }
}

/* A decorative bag must not take space from the pledge instructions. */
@container (max-width: 28rem) {
  html[data-brand="walk"] .w-pledge__intro .w-howto {
    grid-column: 1 / -1;
  }

  html[data-brand="walk"] .w-pledge__intro .w-pledge__bag {
    display: none;
  }
}

@media (max-width: 639px) {
  html[data-brand="walk"] .w-cx__copy .w-kicker,
  html[data-brand="walk"] .w-cx__title {
    padding-right: 0;
  }

  html[data-brand="walk"] .w-cx__art {
    display: none;
  }

  /* These headings keep their emphasis without turning a phone into a narrow display column. */
  html[data-brand="walk"] .wfp-hero h1,
  html[data-brand="pci"] .pci-fim-v3 .page-hero h1 {
    max-width: none;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
  }

  html[data-brand="walk"] .wfp-form-card {
    padding: 20px;
  }

  html[data-brand="walk"] .wfp-form-card h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  /* The archive's wrap already removes 32 px from its width; its extra padding doubled that gutter. */
  html[data-brand="pci"] .pci-fim-v3 .wrap {
    padding-inline: 0;
  }

  html[data-brand="pci"] .pci-fim-v3 .closer h2 {
    max-width: none;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }

  html[data-brand="pci"] .pci-fim-v3 .journey-card.lead .journey-copy,
  html[data-brand="pci"] .pci-fim-v3 .sponsor-promise {
    padding: 20px;
  }

  html[data-brand="pci"] .pci-fim-v3 .journey-card.lead h3 {
    max-width: none;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
  }
}

/* In normal flow the picture must leave room for its caption inside the clipped card. */
html[data-brand="walk"] .w-bag:not(.is-scrolly) .w-bag__frame {
  display: grid;
  grid-template-rows: auto auto;
}

html[data-brand="walk"] .w-bag:not(.is-scrolly) .w-bag__frame picture,
html[data-brand="walk"] .w-bag:not(.is-scrolly) .w-bag__frame img {
  height: auto;
}

html[data-brand="walk"] .w-bag:not(.is-scrolly) .w-bag__frame img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Credits stay in the figure's flow so enlarged text cannot escape an image overlay. */
html[data-brand="walk"] :is(.w-meet__photo, .w-why figure) figcaption {
  position: static;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  border-radius: 0;
}

/* Keep the Faith hero's text width when the outer desktop gutter grows. */
@media (min-width: 781px) {
  html[data-brand="pci"] .pci-fim-v3 .hero-in {
    width: min(100%, calc(680px + max(0px, (100vw - var(--wrap)) / 2)));
  }
}

/* ---------- 5. Nothing under 13 px (rule R7) ---------- */

/* Faith in Motion captions, counters and labels that were authored smaller. Every instance of these is small. */
html[data-brand="pci"]
  :is(
    .c,
    .a,
    .unitline,
    dt,
    small,
    em,
    .range-help,
    .copyb,
    .nm,
    .fineprint,
    .tcard .n,
    .road-head .mono,
    .rail .cap,
    .rail .km,
    .road-ends .e span,
    .ledger-head,
    .fbot,
    .lead span span,
    .pf .legend span,
    .pf .legend b
  ) {
  font-size: var(--fs-caption);
}

/* The same on the contribution and Walk pages that sit on protected stylesheets. */
html[data-brand="walk"] :is(.w-tiers td small, .wfp-index, .wfp li > a > span, .receipt-box p) {
  font-size: var(--fs-caption);
}

/* Inline styles under 13 px (a few Faith in Motion and verification captions) can only be overridden with
   !important. The exact pixel values are listed so nothing larger is touched. */
html[data-brand]
  :is(
    [style*="font-size:9px"],
    [style*="font-size: 9px"],
    [style*="font-size:9.5px"],
    [style*="font-size: 9.5px"],
    [style*="font-size:10px"],
    [style*="font-size: 10px"],
    [style*="font-size:10.5px"],
    [style*="font-size: 10.5px"],
    [style*="font-size:11px"],
    [style*="font-size: 11px"],
    [style*="font-size:11.5px"],
    [style*="font-size: 11.5px"],
    [style*="font-size:12px"],
    [style*="font-size: 12px"],
    [style*="font-size:12.5px"],
    [style*="font-size: 12.5px"]
  ) {
  font-size: var(--fs-caption) !important;
}

/* A filter on a fixed menu's ancestor makes that ancestor its containing block. Keep the blur on a separate
   surface: the menu remains anchored to the viewport, rather than collapsing to the 58 px header. */
html[data-brand="walk"] .w-header {
  overflow: visible;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-brand="walk"] .w-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(251 248 242 / 94%);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  pointer-events: none;
}

html[data-brand="walk"] .w-header.is-scrolled::before {
  opacity: 1;
}

html[data-brand="walk"] .r-menu-open .w-header::before {
  opacity: 0;
}

html[data-brand="walk"]
  .w-header__bar
  > :is(.w-brand, .w-campaign-mark, .w-header__cta, .w-motion, .w-menu-button) {
  position: relative;
  z-index: 2;
}

@media (max-width: 1180px) {
  html[data-brand="walk"] .w-nav {
    inset: 0 0 auto;
    width: 100%;
    height: 100dvh;
    min-height: 100%;
    padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 28px);
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    background:
      radial-gradient(ellipse at 100% 100%, rgb(42 156 193 / 10%), transparent 65%), var(--paper);
    transition:
      clip-path 420ms cubic-bezier(0.76, 0, 0.24, 1),
      visibility 0s linear 420ms;
  }

  html[data-brand="walk"] .w-nav.is-open {
    transition:
      clip-path 420ms cubic-bezier(0.76, 0, 0.24, 1),
      visibility 0s;
  }

  html[data-brand="walk"] .w-nav::before {
    content: "Explore the campaign";
    flex: none;
    padding-bottom: 16px;
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  html[data-brand="walk"] .w-nav > a {
    flex: none;
    min-height: 52px;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    overflow-wrap: anywhere;
  }

  html[data-brand="walk"] .w-nav .w-nav__cta {
    min-height: 56px;
    margin-top: 24px;
    font-size: 1rem;
  }

  html[data-brand="walk"] .r-menu-open .w-menu-button {
    background: var(--navy);
    color: var(--paper);
  }
}

/* ---------- 6. Campaign motion details ----------
   Each layer composes with the original chapter motion. No numbers are animated, and the existing visible
   pause control, device preference and data-saver setting stop every decorative layer. */
@media (prefers-reduced-motion: no-preference) {
  .w-page.r-motion-ready .w-detail-in {
    animation: w-detail-arrive 680ms var(--ease-out) backwards;
    animation-delay: calc(var(--detail-order, 0) * 65ms);
  }

  .w-page.r-motion-ready .w-hero__inset {
    animation: w-campus-float 4s var(--ease-inout) 1.2s 3;
  }

  .w-page.r-motion-ready .w-hero__portrait {
    translate: var(--pointer-x, 0) var(--pointer-y, 0);
    transition: translate 900ms var(--ease-out);
  }

  .w-page.r-motion-ready :is(.w-learn__fig, .w-journey__road, .w-builders__fig) img {
    translate: 0 var(--story-y, 0);
    scale: 1.035;
  }

  .w-page.r-motion-ready .w-cert__preview.is-in .w-certificate__seal {
    animation: w-seal-arrive 850ms var(--ease-out) 280ms backwards;
  }

  .w-page.r-motion-ready .w-ledger.is-in .w-ledger__n {
    animation: w-seal-arrive 700ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 140ms + 100ms);
  }

  .w-page.r-motion-ready .w-footer__mark {
    animation: w-detail-arrive 700ms var(--ease-out) backwards;
  }

  @supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
    .w-page.r-motion-ready .w-faq__list details::details-content {
      block-size: 0;
      overflow: clip;
      interpolate-size: allow-keywords;
      transition:
        block-size 320ms var(--ease-out),
        content-visibility 320ms allow-discrete;
    }

    .w-page.r-motion-ready .w-faq__list details[open]::details-content {
      block-size: auto;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .w-page.r-motion-ready :is(.w-resources__grid > a, .w-ways__grid > a, .r-gallery-card) {
      transition:
        translate 320ms var(--ease-out),
        box-shadow 320ms var(--ease-out);
    }

    .w-page.r-motion-ready :is(.w-resources__grid > a, .w-ways__grid > a, .r-gallery-card):hover {
      translate: 0 -4px;
    }

    .w-page.r-motion-ready .w-btn .w-i {
      transition: translate 240ms var(--ease-out);
    }

    .w-page.r-motion-ready .w-btn:hover .w-i {
      translate: 3px 0;
    }
  }

  .w-page.r-menu-open .w-hero__inset,
  .w-page.r-menu-open .w-dot::after {
    animation-play-state: paused;
  }
}

@keyframes w-detail-arrive {
  from {
    opacity: 0.35;
    translate: 0 18px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes w-campus-float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -6px;
  }
}

@keyframes w-seal-arrive {
  from {
    opacity: 0.3;
    scale: 0.78;
    rotate: -10deg;
  }

  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

/* The contribution form's amount choices stay inside their card at large text. */
html[data-brand] .w-choice,
html[data-brand] .w-choice :where(button, label, span, strong, small) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Footer and navigation links wrap inside their column at large text. */
html[data-brand] :where(footer, nav) a {
  overflow-wrap: anywhere;
}

/* Contact links in the pledge help panel are comfortable to tap (rule R9). */
html[data-brand] .w-help a:not(.w-btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The PCI logo is shown as supplied, with no plate behind it (Walk page footers used a white rounded box). */
html[data-brand] body .wfe2-footer .wfe2-brand img {
  padding: 0;
  border-radius: 0;
  background: none;
}

/* The Faith in Motion footer is dark: its wordmark was dark ink on that dark surface. */
html[data-brand] body .fbrand b {
  color: var(--paper, #faf6f1);
}

/* The font credit link stays inside its sentence in the footer's bottom row. */
html[data-brand] body .fbot span a {
  display: inline;
}