/* ==========================================================================
   Progryss design tokens + shared base classes
   Source of truth: progryss-block-library-final.html (Foundations §01–05 + BASE)
   Enqueue this FIRST, before any block CSS. Every block relies on these vars.
   ========================================================================== */

:root {
  /* Brand */
  --brand:      #1351d8;
  --brand-2:    #3d7bff;
  --brand-dark: #0e3fa8;
  --brand-tint: #eef3fe;
  --brand-tint2:#dfe9fd;

  /* Ink & neutrals */
  --ink:   #0d1220;
  --body:  #4c586c;
  --muted: #8a94a6;
  --line:  #e7ebf2;
  --line2: #eef1f7;
  --bg:    #ffffff;
  --soft:  #f6f8fc;
  --dark:  #0b1020;

  /* Semantic */
  --amber:      #d97a15;
  --amber-tint: #fff6ec;
  --amber-line: #f2e0c4;
  --green:      #12a150;

  /* Radius & shadow */
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 30px rgba(16,24,40,.06);

  /* Layout / width — overridable from Site Settings → Layout & Width.
     --container = inner content max-width; --gutter = side padding;
     --section-pad = section vertical padding. Values inline-injected per device. */
  --container:   1200px;
  --gutter:      24px;
  --section-pad: 84px;
}
/* Fallback responsive step-downs (Site Settings injects the real values). */
@media (max-width: 1024px) { :root { --gutter: 24px; } }
@media (max-width: 640px)  { :root { --gutter: 20px; --section-pad: 56px; } }

/* ---- Base ---------------------------------------------------------------- */
*        { box-sizing: border-box; }
html     { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Full-bleed sections use width:100vw, which includes the vertical scrollbar
     width and would otherwise cause a tiny horizontal scrollbar. `clip` trims it
     without creating a scroll container, so the sticky header keeps working
     (unlike overflow-x:hidden). */
  overflow-x: clip;
}
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
svg { display: block; }
/* The references use a slightly different heading line-height per page (1.12 on
   the homepage, 1.18 on the article). The homepage value is the base; the article
   blocks override it for themselves. h4 keeps the body line-height like the refs. */
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.12; }
h4 { margin: 0; letter-spacing: -.02em; }

/* ---- Layout --------------------------------------------------------------
   Full-width section + constrained inner content:
     <section class="section" style="background:...">   ← spans full width (bg)
       <div class="wrap"> … </div>                       ← centred, max --container
     </section>
   -------------------------------------------------------------------------- */
.wrap    { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-pad) 0; }
.section.soft { background: var(--soft); }
.section.dark { background: var(--dark); color: #fff; }

/* Full / wide alignment — a section can break out to the FULL viewport width even
   when it sits inside a constrained area (e.g. .site-main). Blocks registered with
   align:full receive .alignfull automatically. Pair with .wrap to keep inner
   content at --container, or omit .wrap for truly edge-to-edge content. */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.alignwide {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Default site scaffolding (body + footer) also follows the container width,
   so header, content and footer all line up. Full-bleed bars keep their bg. */
.site-main {
  max-width: var(--container);
  margin: 40px auto;
  padding: 0 var(--gutter);
}
.widget-area {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* The real footer is a template part (parts/footer/) with its own styles. */

/* Fluid section heading */
.sec-h { font-size: clamp(28px,3.8vw,44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; }
.sec-h .accent { color: var(--brand); }
.sec-h .amber  { color: var(--amber); }

/* ---- Icons ---------------------------------------------------------------
   Icons are uploaded .svg files (Site Settings → Icons), output as <img>. Each
   file carries the colour the design uses for it; the handful of places that put
   the same icon on a dark or brand surface flip it to white below. */
.p-icon {
  display: inline-block; flex: none; object-fit: contain;
  vertical-align: middle;
}

/* White surfaces-in-reverse: brand buttons, the featured audience card, the
   dark footer and the dark CTA band all show their icons in white. */
.btn-primary .p-icon,
.btn-outline .p-icon,
.rcard.feature .p-icon,
.dhero .badge .p-icon,
.foot-social .p-icon,
.site-footer .p-icon {
  filter: brightness(0) invert(1);
}
/* …but a white button keeps its brand-blue icon, even on a dark band — the icon
   sits on the button, not on the band. */
.btn-white .p-icon,
.cta .btn-white .p-icon,
.site-footer .btn-white .p-icon {
  filter: none;
}

/* …and anywhere a hover fills the control with brand blue, the icon goes white
   with it (share buttons on the article, footer socials, ghost buttons). */
.byline .share a:hover .p-icon,
.byline .share a:focus-visible .p-icon,
.byline .share a.is-copied .p-icon,
.share-row a:hover .p-icon,
.share-row a:focus-visible .p-icon,
.share-row a.is-copied .p-icon,
.socials-f a:hover .p-icon,
.socials-f a:focus-visible .p-icon {
  filter: brightness(0) invert(1);
}

/* ---- Buttons (always 10px radius) --------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; padding: 13px 22px;
  border-radius: 10px; border: 1.5px solid transparent;
  cursor: pointer; transition: .18s; font-family: inherit;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(19,81,216,.22); }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn-ghost   { background: #fff; color: var(--brand); border-color: #cbd8f5; }
.btn-white   { background: #fff; color: var(--brand); }
.btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-sm      { padding: 10px 16px; font-size: 14px; }

/* Lock button text colour through hover/focus/active — the base theme's
   generic a:hover would otherwise recolour it (only the background should change). */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-outline:hover, .btn-outline:focus, .btn-outline:active { color: #fff; }
.btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active,
.btn-white:hover, .btn-white:focus, .btn-white:active { color: var(--brand); }

/* ---- Eyebrow / label ----------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  color: var(--brand); background: var(--brand-tint);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
}
.eyebrow.amber { color: #9a5a10; background: var(--amber-tint); }

/* ---- Shared section atoms (icon box, checklist, 2-col header, stepper) ---- */
.sub  { font-size: 17px; color: var(--body); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--body); }
.more { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--brand); }
.ico  { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.ico.lg { width: 56px; height: 56px; border-radius: 14px; }
.ck   { list-style: none; margin: 0; padding: 0; }
.ck li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--body); margin-bottom: 9px; }
.ck li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 4px; background: var(--brand-tint); border: 1px solid var(--brand-tint2); }
.ck li::after  { content: ""; position: absolute; left: 3.5px; top: 8px; width: 7px; height: 4px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.sec-top { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: end; margin-bottom: 44px; }
.sec-top .r p { font-size: 15.5px; color: var(--body); margin: 0 0 18px; }
.sec-top .r p b { color: var(--ink); }
.stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.stepper .st { display: inline-flex; align-items: center; gap: 8px; color: var(--body); }
.stepper .st .no { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; border: 1px solid var(--brand); color: var(--brand); }
.stepper .dash { width: 22px; height: 1px; background: var(--line); }
@media (max-width: 900px) { .sec-top { grid-template-columns: 1fr; } }

/* ---- Shared atoms for the inner pages (contact / insights / article) ------
   These pages share a slightly different heading + section-padding vocabulary
   than the homepage (`.display`/`.h2`/`.pad` vs `.disp`/`.sec-h`/`.section`).
   Kept here so the page modules don't each redefine them. */
.display { font-size: clamp(40px,6.5vw,74px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.h2      { font-size: clamp(26px,3.4vw,40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.pad     { padding: 80px 0; }
.pad-sm  { padding: 56px 0; }
.soft-bg { background: var(--soft); }
.btn-block { width: 100%; justify-content: center; }
.arrow   { transition: transform .18s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- Placeholder gradient thumbnails (swap for real featured images) ----- */
.ph1 { background: linear-gradient(135deg,#1351d8,#4f8bff); }
.ph2 { background: linear-gradient(135deg,#0e3fa8,#3aa0ff); }
.ph3 { background: linear-gradient(135deg,#2a2f8f,#6f9bf0); }
.ph4 { background: linear-gradient(135deg,#0b1020,#2d4dae); }
.ph5 { background: linear-gradient(135deg,#1740b8,#59b0ff); }
.ph6 { background: linear-gradient(135deg,#243a99,#7aa0ee); }

/* ---- Motion safety ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}