/* ================================================================
   FORI Child Theme – global.css
   Design tokens · Reset · Typography · Layout utilities · Buttons
   ================================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Brand palette */
  --fori-blue-900: #0B2A6F;
  --fori-blue-800: #123D96;
  --fori-blue-700: #1F56BE;
  --fori-blue-500: #4F82D9;
  --fori-ink:      #10213A;
  --fori-text:     #30435F;
  --fori-line:     #D9E3F2;
  --fori-bg:       #F7FAFD;
  --fori-white:    #FFFFFF;
  --fori-gradient: linear-gradient(135deg, #0B2A6F 0%, #4F82D9 100%);

  /* Functional */
  --fori-wa-green: #25D366;
  --fori-mid-bg:   #EDF2FB;

  /* Typography
     Inter is loaded via system stack – no external font request needed.
     To opt-in to the webfont, un-comment the Google Fonts line in functions.php
     and swap the stack to: 'Inter', ... */
  --font-base: Inter, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale (clamp handles desktop → mobile smoothly) */
  --text-h1:    clamp(36px, 5vw, 56px);
  --text-h2:    clamp(26px, 3.5vw, 40px);
  --text-h3:    clamp(19px, 2vw, 24px);
  --text-body:  17px;
  --text-small: 14px;

  /* Line-heights */
  --lh-h1:   1.08;
  --lh-h2:   1.15;
  --lh-h3:   1.25;
  --lh-body: 1.7;
  --lh-sm:   1.6;

  /* Layout */
  --container:   1240px;
  --container-w: 1320px;
  --container-n: 760px;

  --section-y:    96px;
  --section-y-md: 72px;
  --section-y-sm: 48px;

  --gap:    28px;
  --gap-md: 20px;
  --gap-sm: 16px;

  /* Radii */
  --r-card: 22px;
  --r-btn:  999px;
  --r-sm:   10px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(11,42,111,.06);
  --shadow-md: 0 8px 32px rgba(11,42,111,.10);
  --shadow-lg: 0 20px 60px rgba(11,42,111,.14);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  0.22s;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-base);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fori-text);
  background: var(--fori-bg);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }

/* ── Typography ────────────────────────────────────────────── */
h1, .h1 {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  color: var(--fori-ink);
  letter-spacing: -0.02em;
}
h2, .h2 {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
  color: var(--fori-ink);
  letter-spacing: -0.015em;
}
h3, .h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--fori-ink);
}
h4 { font-size: 18px; font-weight: 600; color: var(--fori-ink); }
p   { color: var(--fori-text); }
small, .text-sm { font-size: var(--text-small); line-height: var(--lh-sm); }

/* On dark backgrounds, headings and body text flip to white */
.fori-on-dark h1,
.fori-on-dark h2,
.fori-on-dark h3,
.fori-on-dark h4,
.fori-on-dark p   { color: var(--fori-white); }
.fori-on-dark p   { color: rgba(255,255,255,.75); }

/* Eyebrow label */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fori-blue-700);
  margin-bottom: 12px;
}
.fori-on-dark .eyebrow { color: rgba(255,255,255,.55); }

/* Lead paragraph */
.lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--fori-text);
  max-width: 600px;
}
.fori-section-heading--center .lead { margin-inline: auto; }
.fori-on-dark .lead { color: rgba(255,255,255,.70); }

/* ── Layout ────────────────────────────────────────────────── */
.fori-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}
.fori-container--wide   { max-width: var(--container-w); }
.fori-container--narrow { max-width: var(--container-n); }

.fori-section { padding-block: var(--section-y); }
@media (max-width: 1024px) { .fori-section { padding-block: var(--section-y-md); } }
@media (max-width:  640px) { .fori-section { padding-block: var(--section-y-sm); } }

/* Section colour variants */
.fori-section--dark  { background: var(--fori-blue-900); }
.fori-section--mid   { background: var(--fori-mid-bg); }
.fori-section--white { background: var(--fori-white); }

/* Grid */
.fori-grid { display: grid; gap: var(--gap); align-items: stretch; }
.fori-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fori-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fori-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fori-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) {
  .fori-grid { gap: var(--gap-md); }
  .fori-grid--4, .fori-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .fori-grid--3                 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fori-grid { gap: var(--gap-sm); }
  .fori-grid--2,
  .fori-grid--3,
  .fori-grid--4,
  .fori-grid--5 { grid-template-columns: 1fr; }
}

/* Split (two-column) layout */
.fori-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.fori-split--reverse { direction: rtl; }
.fori-split--reverse > * { direction: ltr; }
@media (max-width: 768px) {
  .fori-split, .fori-split--reverse { grid-template-columns: 1fr; direction: ltr; }
}

/* Section heading block */
.fori-section-heading { margin-bottom: 52px; }
.fori-section-heading h2 { margin-top: 8px; margin-bottom: 16px; }
.fori-section-heading--center { text-align: center; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--r-btn);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-base);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.btn:focus-visible { outline: 3px solid var(--fori-blue-500); outline-offset: 3px; }

.btn--primary {
  background: var(--fori-gradient);
  color: var(--fori-white);
  box-shadow: 0 4px 20px rgba(31,86,190,.22);
}
/* Lock text colour in ALL interactive states.
   Without this, Astra or browser defaults can turn text blue on hover/focus. */
.btn--primary:hover,
.btn--primary:focus,
.btn--primary:focus-visible,
.btn--primary:active,
.btn--primary:visited {
  color: var(--fori-white);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(11,42,111,.28);
}
.btn--primary:focus-visible {
  outline: 3px solid rgba(255,255,255,.6);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(31,86,190,.35);
}

.btn--outline {
  background: transparent;
  color: var(--fori-blue-800);
  border: 2px solid var(--fori-blue-700);
}
.btn--outline:hover {
  background: var(--fori-blue-700);
  color: var(--fori-white);
}

.btn--outline-white {
  background: transparent;
  color: var(--fori-white);
  border: 2px solid rgba(255,255,255,.5);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--fori-white);
}

.btn--wa {
  background: var(--fori-wa-green);
  color: var(--fori-white);
  box-shadow: 0 4px 16px rgba(37,211,102,.25);
}
.btn--wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(37,211,102,.34);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ── Utilities ─────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.text-center { text-align: center; }

/* Spacing helpers (keep minimal — use section padding as primary system) */
.mt-s  { margin-top: 12px; }
.mt-m  { margin-top: 24px; }
.mt-l  { margin-top: 40px; }
.mt-xl { margin-top: 56px; }
.mb-s  { margin-bottom: 12px; }
.mb-m  { margin-bottom: 24px; }

/* ── Fade-in animation (JS-driven) ─────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
  }
  .fade-in.is-visible { opacity: 1; transform: none; }
}

/* ── Fluent Forms integration ──────────────────────────────── */
.fluentform .ff-btn-submit {
  background: var(--fori-gradient) !important;
  border: none !important;
  border-radius: var(--r-btn) !important;
  font-family: var(--font-base) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 36px !important;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
.fluentform .ff-btn-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(11,42,111,.26) !important;
}
.fluentform .ff-el-input--content input,
.fluentform .ff-el-input--content textarea,
.fluentform .ff-el-input--content select {
  border-radius: var(--r-sm) !important;
  border-color: var(--fori-line) !important;
  font-family: var(--font-base) !important;
  font-size: 15px !important;
  color: var(--fori-ink) !important;
}
.fluentform .ff-el-input--content input:focus,
.fluentform .ff-el-input--content textarea:focus {
  border-color: var(--fori-blue-500) !important;
  box-shadow: 0 0 0 3px rgba(79,130,217,.14) !important;
  outline: none !important;
}