/*
 * O'Neal Insurance Group - design tokens, type scale, page-hero system.
 * Added 2026-08-09. Loaded AFTER design.css so it wins on equal specificity.
 * Tokens live on :root so every component can use them (they were previously
 * duplicated on .oig-costs-page and .oig-carrier-page and had begun to drift).
 */

:root {
  /* Brand */
  --oig-purple:       #4f176f;
  --oig-purple-deep:  #2d0c40;
  --oig-plum:         #211528;
  --oig-green:        #0d631c;
  --oig-green-bright: #16802d;
  --oig-green-soft:   #edf8ed;
  --oig-orange:       #c9470a;
  --oig-orange-hover: #a93604;

  /* Neutrals */
  --oig-ink:      #271d2c;
  --oig-muted:    #62576a;
  --oig-border:   #ded6e2;
  --oig-white:    #fff;
  --oig-lavender: #f8f4fa;
  --oig-cream:    #fff7e9;

  /* Type families */
  --oig-font-display: 'Fraunces', Georgia, serif;
  --oig-font-body:    'Source Sans 3', 'Segoe UI', sans-serif;

  /* Type scale - fluid, root 16px */
  --oig-h1: clamp(2.125rem, 1.35rem + 3.3vw, 3.75rem);
  --oig-h2: clamp(1.75rem,  1.28rem + 2.0vw,  2.75rem);
  --oig-h3: clamp(1.375rem, 1.19rem + 0.78vw, 1.75rem);
  --oig-h4: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --oig-h5: 1.0625rem;
  --oig-h6: 0.9375rem;
  --oig-lead: clamp(1.125rem, 1.06rem + 0.28vw, 1.3rem);
  --oig-eyebrow: 0.875rem;

  /* Layout widths */
  --oig-narrow:  720px;
  --oig-content: 1060px;
  --oig-wide:    1200px;

  /* Surface */
  --oig-radius: 18px;
  --oig-shadow: 0 14px 38px rgb(45 12 64 / 10%);
  --oig-focus-ring: 4px solid #ffb000;
}

/* Legacy aliases so the original design.css keeps working unchanged. */
:root {
  --purple: var(--oig-purple);
  --green: var(--oig-green);
  --green-bright: var(--oig-green-bright);
  --green-soft: var(--oig-green-soft);
  --orange: var(--oig-orange);
  --orange-hover: var(--oig-orange-hover);
  --ink: var(--oig-ink);
  --muted: var(--oig-muted);
  --line: var(--oig-border);
  --white: var(--oig-white);
  --cream: var(--oig-cream);
}
/* ---------------------------------------------------------------
   Unified heading scale (H1-H6). Replaces three competing H1 sizes
   (5rem generic / 4.7rem inner-hero / 4rem costs page) with one.
   --------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.oig-costs-page h1, .oig-costs-page h2, .oig-costs-page h3,
.oig-carrier-page h2, .oig-carrier-page h3 {
  font-family: var(--oig-font-display);
  text-wrap: balance;
}

h1, .oig-costs-page h1 {
  font-size: var(--oig-h1);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

h2, .oig-costs-page h2, .oig-carrier-page h2 {
  font-size: var(--oig-h2);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

h3, .oig-costs-page h3, .oig-carrier-page h3 {
  font-size: var(--oig-h3);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.22;
}

h4 { font-size: var(--oig-h4); font-weight: 800; line-height: 1.3; }
h5 { font-size: var(--oig-h5); font-weight: 800; line-height: 1.4; }
h6 { font-size: var(--oig-h6); font-weight: 800; line-height: 1.4; letter-spacing: 0.04em; }

/* Body text holds at 18px on mobile. It previously shrank to 17.5px,
   which is the wrong direction for a primarily 65+ audience. */
.oig-costs-page,
.oig-carrier-page {
  font-size: 1.125rem;
  line-height: 1.65;
}

/* Eyebrow / kicker: was 12.5px uppercase, too small to read comfortably. */
.oig-eyebrow,
.oig-eyebrow-dark,
.eyebrow,
.oig-carrier-hero .oig-eyebrow {
  font-size: var(--oig-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* One focus ring everywhere (previously 4px #ffb000 vs 3px #f6a15f). */
:focus-visible,
.oig-costs-page a:focus-visible,
.oig-costs-page summary:focus-visible,
.oig-costs-page .wp-element-button:focus-visible,
.oig-carrier-page a:focus-visible,
.oig-carrier-page .wp-element-button:focus-visible {
  outline: var(--oig-focus-ring);
  outline-offset: 4px;
  border-radius: 0.25rem;
}
/* ---------------------------------------------------------------
   Page hero: one component, four variants.
   .oig-inner-hero is kept as an alias so existing markup keeps working.
   --------------------------------------------------------------- */

.oig-page-hero,
.oig-inner-hero {
  background: linear-gradient(130deg, var(--oig-purple), var(--oig-purple-deep));
  color: var(--oig-white);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  padding-inline: max(1rem, calc((100vw - var(--oig-wide)) / 2));
}

.oig-page-hero > .wp-block-columns,
.oig-inner-hero > .wp-block-columns {
  margin: 0 auto;
  max-width: var(--oig-wide);
}

.oig-page-hero h1,
.oig-inner-hero h1,
.oig-hero-title {
  color: var(--oig-white);
  margin: 0 0 0.75rem;
  max-width: 18ch;
}

.oig-page-hero .oig-hero-lead,
.oig-inner-hero .oig-hero-lead,
.oig-hero-lead {
  font-size: var(--oig-lead);
  line-height: 1.55;
  max-width: 50rem;
}

/* Variant: soft (locations, about, carrier pages) */
.oig-page-hero--soft {
  background: linear-gradient(135deg, var(--oig-lavender), var(--oig-cream));
  color: var(--oig-ink);
}
.oig-page-hero--soft h1 { color: var(--oig-purple); }
.oig-page-hero--soft .oig-eyebrow { color: var(--oig-orange); }
.oig-page-hero--soft .oig-hero-lead { color: var(--oig-purple-deep); }

/* Variant: article (blog posts) */
.oig-page-hero--article {
  background: var(--oig-white);
  border-bottom: 1px solid var(--oig-border);
  color: var(--oig-ink);
  padding-inline: max(1rem, calc((100vw - var(--oig-narrow)) / 2));
}
.oig-page-hero--article h1 { color: var(--oig-purple); max-width: 22ch; }
.oig-page-hero--article .oig-eyebrow { color: var(--oig-green); }

/* Mobile: stack CTAs full width, remove the H1 measure cap. */
@media (max-width: 767px) {
  .oig-page-hero,
  .oig-inner-hero { padding-inline: 1rem; }

  .oig-page-hero h1,
  .oig-inner-hero h1,
  .oig-hero-title { max-width: none; }

  .oig-hero-actions,
  .oig-final-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .oig-hero-actions .wp-block-button,
  .oig-final-actions .wp-block-button,
  .oig-hero-actions .wp-block-button__link,
  .oig-final-actions .wp-block-button__link {
    min-height: 52px;
    width: 100%;
  }
}
/* ---------------------------------------------------------------
   Card labels that were previously headings.
   They were demoted to <p> so they no longer appear in the document
   outline, but must keep their original visual weight.
   --------------------------------------------------------------- */

.oig-agent-name {
  color: var(--oig-white);
  font-family: var(--oig-font-display);
  font-size: var(--oig-h3);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin: 0 0 0.7rem;
}

.oig-author-name {
  color: var(--oig-purple);
  font-family: var(--oig-font-display);
  font-size: var(--oig-h3);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin: 0 0 0.7rem;
}
/* ---------------------------------------------------------------
   Mobile body size.
   design.css shrinks body text to 17.5px at <=760px. For a primarily
   65+ audience that is the wrong direction, so it is held at 18px.
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  body { font-size: 1.125rem; }
}