/*
Theme Name:   Synnovatia Child
Theme URI:    https://synnovatia.com
Template:     generatepress
Author:       Synnovatia
Description:  Child theme for Synnovatia. Holds the locked 2026 design system as
              CSS custom properties (tokens) plus base typography. Component
              styles (pull-quotes, editorial rows, eyebrows, dividers, CTA) are
              added in step 2 and are authored to also style .entry-content across
              all 600 blog posts. Nothing should be styled inline per page.
Version:      1.0.0
*/

/* =========================================================================
   1. DESIGN TOKENS  — single source of truth for the whole site
   Pulled verbatim from synnovatia_homepage_eyebrows_3.html (authoritative).
   Edit a value here and it updates everywhere it's used.
   ========================================================================= */
:root {
  --navy:       #0D1F4E;
  --navy-mid:   #1A3A7A;
  --gold:       #B29200;
  --gold-lt:    #F5C842;
  --teal:       #0F6E56;
  --teal-lt:    #5DCAA5;
  --warm-white: #F7F6F2;
  --body-text:  #444441;
  --neut-gray:  #EAEAEA;
  --lt-navy:    #E8ECF5;
  --lt-gold:    #FDF3CC;
  --white:      #FFFFFF;
  --footer-bg:  #080F1F;

  /* type families */
  --font-display: 'Fraunces', serif;          /* headings / display */
  --font-body:    'Barlow', sans-serif;       /* body copy */
  --font-label:   'Barlow Condensed', sans-serif; /* eyebrows, labels, buttons, tags */

  /* shared layout */
  --content-max:  1200px;
  --section-pad-y: 88px;
  --section-pad-x: 48px;
  --btn-radius:   10px;
}

/* =========================================================================
   2. BASE TYPOGRAPHY  — wires the design system onto GeneratePress output
   so every page AND all 600 blog posts inherit the brand type with no
   per-page work. (Component treatments come in step 2.)
   ========================================================================= */
body {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  background: var(--warm-white);
  color: var(--body-text);
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.25;
  font-weight: 700;
}

a { color: var(--teal); }
a:hover { color: var(--navy); }

strong { font-weight: 600; color: var(--navy); }

/* eyebrows / labels / buttons / tags use the condensed face */
.eyebrow,
.button, button, .wp-block-button__link,
.gb-button {
  font-family: var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* buttons: 10px radius + optical sizing (locked spec) */
.button, button, input[type="submit"],
.wp-block-button__link, .gb-button {
  border-radius: var(--btn-radius);
  font-optical-sizing: auto;
}

/* =========================================================================
   3. BLOG BASE  — applies brand type to the body of all 600 existing posts
   via .entry-content. This is the foundation; the editorial COMPONENT
   styling (gold left-rule pull-quotes, etc.) is layered on in step 2 and
   targets these same selectors so no post needs to be touched individually.
   ========================================================================= */
.entry-content {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--body-text);
}
.entry-content p + p { margin-top: 16px; }
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-display);
  color: var(--navy);
}
.entry-content a { color: var(--teal); }
.entry-content a:hover { color: var(--navy); }
.entry-content strong { font-weight: 600; color: var(--navy); }

/* ── STEP 2 COMPONENT LAYER GOES BELOW THIS LINE ─────────────────────── */

.entry-content p:empty { display: none; }

.entry-content ol,
.entry-content ul {
  padding-left: 26px;
}
.entry-content li {
  margin-bottom: 14px;
}
.entry-content li::marker { color: var(--gold); font-weight: 700; }
.entry-content li strong { color: var(--navy); }

/* pull-quotes: gold left-rule + Fraunces italic, for content editors who use the WP quote block */
.entry-content blockquote {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 28px;
  margin: 40px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--navy);
  line-height: 1.55;
}
.entry-content blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-label);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* inline post images */
.entry-content figure.wp-block-image {
  margin: 0 auto 40px;
  border-radius: 6px;
  overflow: hidden;
}
.entry-content figure.wp-block-image img {
  width: 100%;
  display: block;
  border-radius: 6px;
}