/**
 * Apple-style typographic scale and spacing rhythm.
 *
 * Adopts apple.com's type ramp and vertical rhythm while keeping the existing
 * brand font (Poppins) and colour palette — only sizes, leading, tracking and
 * spacing change.
 *
 * Apple's ramp, which the values below reproduce:
 *   body    17px / 1.47059 / -0.022em
 *   intro   21px / 1.38100 /  0.011em
 *   h3      32px / 1.12500 / -0.008em
 *   h2      48px / 1.08349 / -0.003em
 *   h1      56px / 1.07143 / -0.015em
 * Tracking goes negative as size grows, which is what makes large Apple
 * headlines read tight rather than airy.
 *
 * SCOPING — everything here is scoped to `section`, deliberately.
 * Page content in this theme is built from <section> blocks, while the chrome
 * (header, navbar, footer, and the .you-ip bar) sits outside them. An earlier
 * unscoped version blew the .you-ip heading from 11px to 48px — it is markup'd
 * as an <h2> — and forced the navbar to wrap by narrowing its container. Keep
 * new rules under a `section` ancestor unless you have checked the chrome.
 *
 * `!important` is required: the theme carries ~2,400 inline style attributes,
 * and inline declarations beat any external rule without it. It is confined to
 * typography and block spacing; colour, layout and positioning are untouched.
 *
 * Enqueued last, as 'vmp-apple-scale' in functions.php. Bump the version there
 * on every change — the site is behind Cloudflare.
 */

:root {
  /* Type ramp — fluid between the mobile and desktop ends of Apple's scale. */
  --vmp-fs-h1: clamp(2.5rem, 1.6rem + 3.4vw, 3.5rem);      /* 40 → 56px */
  --vmp-fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3rem);          /* 32 → 48px */
  --vmp-fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);        /* 24 → 32px */
  --vmp-fs-h4: clamp(1.3125rem, 1.15rem + 0.6vw, 1.5rem);  /* 21 → 24px */
  --vmp-fs-h5: 1.1875rem;                                   /* 19px */
  --vmp-fs-deck: clamp(1.25rem, 1rem + 1vw, 1.75rem);      /* 20 → 28px */
  --vmp-fs-lead: clamp(1.125rem, 1rem + 0.55vw, 1.3125rem);/* 18 → 21px */
  --vmp-fs-body: 1.0625rem;                                 /* 17px */
  --vmp-fs-small: 0.875rem;                                 /* 14px */

  /* Leading and tracking, paired to each step. */
  --vmp-lh-h1: 1.07143;
  --vmp-lh-h2: 1.08349;
  --vmp-lh-h3: 1.125;
  --vmp-lh-h4: 1.16667;
  --vmp-lh-lead: 1.381;
  --vmp-lh-body: 1.47059;

  --vmp-ls-h1: -0.015em;
  --vmp-ls-h2: -0.010em;
  --vmp-ls-h3: -0.008em;
  --vmp-ls-lead: 0.011em;
  --vmp-ls-body: -0.022em;

  /* Vertical rhythm. Apple runs roughly 120px between major sections on
     desktop, collapsing to ~56px on phones. */
  --vmp-section-y: clamp(3.5rem, 1.5rem + 7vw, 7.5rem);
  --vmp-section-y-tight: clamp(2.5rem, 1.2rem + 4.5vw, 4.5rem);

  /* Content measure. Apple's column is 980px with 22px gutters; 1024px keeps
     three-up card grids comfortable while reading distinctly narrower than the
     1320px Bootstrap default this theme inherited. */
  --vmp-measure: 1024px;
  --vmp-gutter: 22px;
}

/* ── Body copy ─────────────────────────────────────────────────────────── */

section p,
section li,
section .block-text,
section .card-text,
section dd {
  font-size: var(--vmp-fs-body) !important;
  line-height: var(--vmp-lh-body) !important;
  letter-spacing: var(--vmp-ls-body) !important;
}

section {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ──────────────────────────────────────────────────────────── */

section h1, section .h1, section .hero-title {
  font-size: var(--vmp-fs-h1) !important;
  line-height: var(--vmp-lh-h1) !important;
  letter-spacing: var(--vmp-ls-h1) !important;
  font-weight: 600 !important;
}

/* `.you-ip` is the thin IP-address strip above the navbar. It is markup'd as an
   <h2> inside a <section>, but it is chrome, not a heading — leave it alone. */
section h2:not(.you-ip), section .h2, section .section-title {
  font-size: var(--vmp-fs-h2) !important;
  line-height: var(--vmp-lh-h2) !important;
  letter-spacing: var(--vmp-ls-h2) !important;
  font-weight: 600 !important;
}

/* Decks. This theme marks the sentence under a hero headline up as an <h2>,
   so sizing every h2 as a section title inflates it to 48px. An h2 (or p)
   directly following the h1 is intro copy — Apple sets that at 21-28px,
   regular weight. */
/* The `:not(.section-title)` is load-bearing, not decorative: it adds a class
   to the specificity score so this rule outranks `h2:not(.you-ip)` above.
   Without it both are !important and the larger section-title size wins. */
section h1 + h2:not(.section-title),
section h1 + p:not(.section-title),
section .hero-title + h2:not(.section-title),
section .hero-title + p:not(.section-title) {
  font-size: var(--vmp-fs-deck) !important;
  line-height: 1.28 !important;
  letter-spacing: 0.004em !important;
  font-weight: 400 !important;
}

section h3, section .h3 {
  font-size: var(--vmp-fs-h3) !important;
  line-height: var(--vmp-lh-h3) !important;
  letter-spacing: var(--vmp-ls-h3) !important;
  font-weight: 600 !important;
}

section h4, section .h4, section .block-title {
  font-size: var(--vmp-fs-h4) !important;
  line-height: var(--vmp-lh-h4) !important;
  font-weight: 600 !important;
}

section h5, section .h5 {
  font-size: var(--vmp-fs-h5) !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

/* Bootstrap's .fw-bold/.fw-bolder utilities are themselves `!important`, so a
   bare font-weight rule loses to them. Element+class specificity wins and
   brings headlines to Apple's semibold, which is what keeps large type from
   looking heavy at 48-56px. */
section h1.fw-bold, section h2.fw-bold, section h3.fw-bold,
section h4.fw-bold, section h5.fw-bold, section h6.fw-bold,
section h1.fw-bolder, section h2.fw-bolder, section h3.fw-bolder,
section h4.fw-bolder, section h5.fw-bolder,
section .section-title.fw-bold, section .hero-title.fw-bold {
  font-weight: 600 !important;
}

/* Intro copy sitting under a headline. */
section .lead,
section .section-subtitle,
section .hero-description {
  font-size: var(--vmp-fs-lead) !important;
  line-height: var(--vmp-lh-lead) !important;
  letter-spacing: var(--vmp-ls-lead) !important;
  font-weight: 400 !important;
}

section small, section .small, section figcaption {
  font-size: var(--vmp-fs-small) !important;
  line-height: 1.42859 !important;
}

/* Buttons keep their own sizing — Apple's controls do not follow the body
   ramp, and inflating them here breaks the navbar CTA and card actions. */
section .btn {
  letter-spacing: normal !important;
}

/* ── Vertical rhythm ───────────────────────────────────────────────────── */

section.py-5 {
  padding-top: var(--vmp-section-y) !important;
  padding-bottom: var(--vmp-section-y) !important;
}

section.py-4 {
  padding-top: var(--vmp-section-y-tight) !important;
  padding-bottom: var(--vmp-section-y-tight) !important;
}

/* Apple pairs a headline tightly with its intro, then leaves a large gap
   before the content block. Bootstrap's mb-3/mb-5 are too uniform for that. */
section .section-title {
  margin-bottom: 0.55em !important;
}

section .section-subtitle,
section .section-title + .lead,
section .section-title + p {
  margin-bottom: 2.2rem !important;
}

/* ── Measure ───────────────────────────────────────────────────────────── */

section > .container,
section > div > .container {
  max-width: var(--vmp-measure) !important;
  padding-left: var(--vmp-gutter);
  padding-right: var(--vmp-gutter);
}

section > .container-fluid {
  max-width: none !important;
}

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  :root {
    --vmp-gutter: 16px;
  }

  /* Nothing may exceed the viewport. Two templates previously pushed the
     document to 402px inside a 390px window, producing a horizontal scrollbar. */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  section > .container,
  section .row {
    max-width: 100% !important;
  }

  section img,
  section svg,
  section video,
  section iframe,
  section table {
    max-width: 100%;
    height: auto;
  }
}