/* =========================================================================
   FEC Fonts Override (2026-05-06) — Stefanie request post-meeting
   Goal: Match live fecassociation.eu typography
     - Headings (H1-H6) → Avenir-Black UPPERCASE
     - Body p / li → Rubik
     - Italic em accents (Cyan-highlighted) KEEP Fraunces (FEC editorial signature)
   Loaded LAST in cascade so it wins existing Fraunces/Avenir rules.
   ========================================================================= */

/* ---- @font-face: Avenir-Black + Avenir-Light (self-hosted, copied from
        aweos parent theme on live site to Divi-child on Margot) ---------- */

@font-face {
  font-family: 'Avenir-Black';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Avenir-Black.woff2') format('woff2'),
       url('fonts/Avenir-Black.woff')  format('woff');
}

@font-face {
  font-family: 'Avenir-Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Avenir-Light.woff2') format('woff2'),
       url('fonts/Avenir-Light.woff')  format('woff');
}

/* Archivo Black 400 (alt #1 — heavy industrial geometric, Stefanie 2026-05-06) */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ArchivoBlack-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ArchivoBlack-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bebas Neue 400 (alt #2 — narrow condensed magazine display, Stefanie 2026-05-06) */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BebasNeue-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BebasNeue-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Outfit 900 (preview alternative for hero — Stefanie review 2026-05-06) */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Outfit-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Outfit-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans 800 (preview alternative for hero — Stefanie review) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/PlusJakartaSans-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/PlusJakartaSans-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces (variable serif) for cyan italic accent — keep loading from Google */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,30..100,0..1;1,9..144,300..700,30..100,0..1&display=swap');

/* ---- HEADINGS (H1-H6) → Avenir-Black UPPERCASE ----------------------- */
/* Scope: every FEC page (page-id matches body class added by enqueue logic)
   Use high-specificity body[class*="page-id-"] + heading element. */

body[class*="page-id-"] h1,
body[class*="page-id-"] h2,
body[class*="page-id-"] h3,
body[class*="page-id-"] h4,
body[class*="page-id-"] h5,
body[class*="page-id-"] h6,
body.single-post h1,
body.single-post h2,
body.single-post h3,
body.single-post h4,
body.single-post h5,
body.single-post h6 {
  font-family: 'Avenir-Black', 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  /* Kill Fraunces variable axes (no effect on Avenir but be explicit) */
  font-variation-settings: normal !important;
}

/* ---- ITALIC EM ACCENTS INSIDE HEADINGS — KEEP FRAUNCES + CYAN -------- */
/* These are the editorial cyan-italic highlights — visual signature stays. */

body[class*="page-id-"] h1 em,
body[class*="page-id-"] h2 em,
body[class*="page-id-"] h3 em,
body[class*="page-id-"] h4 em,
body.single-post h1 em,
body.single-post h2 em,
body.single-post h3 em,
body.single-post h4 em,
body[class*="page-id-"] .fec-hero-h1-italic,
body[class*="page-id-"] .fec-hero-h1-amp,
body[class*="page-id-"] .fec-pullquote-accent {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  text-transform: none !important;
  /* Optical compensation: italic serif appears ~20% smaller at same px size */
  font-size: 1.2em !important;
  /* Color stays via existing per-section rules (Cyan #3ca3dd) */
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1 !important;
}

/* ---- BODY TEXT (p, li) → RUBIK --------------------------------------- */

body[class*="page-id-"] p,
body[class*="page-id-"] li,
body[class*="page-id-"] .post-content-inner,
body[class*="page-id-"] .et_pb_text p,
body[class*="page-id-"] .et_pb_blurb_description p,
body[class*="page-id-"] blockquote p,
body.single-post p:not(.fec-post-meta *):not(.fec-post-back),
body.single-post li,
body.single-post .post-content-inner {
  font-family: 'Rubik', 'Open Sans', 'Avenir-Light', Arial, sans-serif !important;
}

/* ---- BLOCKQUOTE / PULL-QUOTE — keeps Fraunces italic (cyan-accent) ---- */

body[class*="page-id-"] blockquote,
body[class*="page-id-"] blockquote p,
body.single-post .fec-post-body blockquote,
body.single-post .fec-post-body blockquote p {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  text-transform: none !important;
  font-variation-settings: 'opsz' 144, 'SOFT' 100 !important;
}

/* ---- DROP-CAP — keeps Fraunces italic cyan (signature accent) ---- */

body.single-post .fec-post-body > p:first-of-type::first-letter {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  text-transform: none !important;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1 !important;
}

/* ---- EYEBROWS / META / MONO (preserved as-is — these are scoped already) -
   .fec-*-eyebrow → Rubik (already Rubik in source files, no override needed)
   .post-meta date / mono → JetBrains Mono (already, no override)
   These rules are NOT touched here.
   ---------------------------------------------------------------------- */

/* ---- POST TITLES IN BLOG GRID — Avenir-Black uppercase, em stays Fraunces */

body[class*="page-id-"] .et_pb_post .entry-title,
body[class*="page-id-"] .et_pb_post .entry-title a,
body[class*="page-id-"] .fec-post-title {
  font-family: 'Avenir-Black', 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
}

body[class*="page-id-"] .et_pb_post .entry-title em,
body[class*="page-id-"] .fec-post-title em {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 1.2em !important;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1 !important;
}

/* =========================================================================
   HEADING SIZE CAPS — match live fecassociation.eu (Stefanie 2026-05-06)
   Live targets: H1=45px / H2=31px / H3=26px (interpolated) / H4=20px
   Use clamp() with desktop max matching live, mobile shrink.
   High-specificity selectors to win per-section rules.
   ========================================================================= */

/* H1 — 70px desktop max (Stefanie 2026-05-06: bigger than live) */
body[class*="page-id-"] h1,
body.single-post h1,
body[class*="page-id-"] .fec-hero-h1,
body[class*="page-id-"] .fec-hero-h1-line1,
body[class*="page-id-"] .fec-post-title,
body[class*="page-id-"] .fec-blog-h2 h1,
body.single-post .fec-post-title {
  font-size: clamp(36px, 5.2vw, 70px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

/* H1 line-2 (hero subhead) — Stefanie 2026-05-07 (iter 2): another -20% (35px → 28px) */
body[class*="page-id-"] .fec-hero-h1-line2 {
  font-size: clamp(16px, 2.1vw, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* H2 — 45px desktop max */
body[class*="page-id-"] h2,
body.single-post h2,
body[class*="page-id-"] .fec-blog-h2 h2,
body[class*="page-id-"] .fec-v3-h2 h2,
body[class*="page-id-"] .et_pb_post .entry-title,
body[class*="page-id-"] .fec-post-related-h2,
body[class*="page-id-"] .fec-post-related-card-title,
body[class*="page-id-"] .fec-post-body h2,
body.single-post .fec-post-body h2,
body.single-post .fec-post-related-h2 {
  font-size: clamp(28px, 3.4vw, 45px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

/* H3 — 34px desktop max (interpolated between H2 70 and H4 24) */
body[class*="page-id-"] h3,
body.single-post h3,
body[class*="page-id-"] .fec-post-body h3,
body.single-post .fec-post-body h3 {
  font-size: clamp(22px, 2.4vw, 34px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* H4 — 24px desktop max */
body[class*="page-id-"] h4,
body.single-post h4 {
  font-size: clamp(18px, 1.6vw, 24px) !important;
  line-height: 1.3 !important;
}

/* Specific 22px rules for card-style H3 titles (Stefanie 2026-05-06):
   - Why FEC numbered cards (h3.fec-why-title)
   - News section blog post titles (h3 via header_level="h3" on et_pb_blog)
   These selectors are higher specificity than the .entry-title H2 rule above. */
body[class*="page-id-"] .fec-why-title,
body[class*="page-id-"] .fec-news-blog .et_pb_post .entry-title,
body[class*="page-id-"] .fec-news-blog .et_pb_post h3.entry-title,
body[class*="page-id-"] .fec-news-blog .et_pb_post h2.entry-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

/* ---- HERO H1 PREVIEW: word-by-word font alternatives (Stefanie 2026-05-06) -
   "Cookware, Cutlery" → Archivo Black (heavy industrial)
   "Housewares Industry" → Bebas Neue (narrow condensed)
   The "&" amp keeps Fraunces cyan italic (accent rule above) --------------- */

body.page-id-333930 .fec-hero-h1 .fec-h1-archivo {
  font-family: 'Archivo Black', 'Avenir-Black', sans-serif !important;
  font-weight: 400 !important;
}

body.page-id-333930 .fec-hero-h1 .fec-h1-bebas {
  font-family: 'Bebas Neue', 'Avenir-Black', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  /* Bebas is narrower — bump for visual weight match */
  font-size: 1.08em !important;
}

/* ---- HERO PULL-QUOTE: lines = Rubik (body), accent line = Fraunces cyan
   (Voice-style). The cyan-accented line gets `.fec-pullquote-accent` class
   added by PHP swap. ------------------------------------------------------- */

body.page-id-333930 .fec-hero-pullquote-text,
body.page-id-333930 .fec-hero-pullquote-text p,
body.page-id-333930 .fec-hero-pullquote-line {
  font-family: 'Rubik', 'Open Sans', 'Avenir-Light', Arial, sans-serif !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
  /* Rubik is wider than Fraunces — scale down font-size + tighten letter-spacing
     so 'competitiveness' fits one line in the existing column. */
  font-size: 24px !important;
  letter-spacing: -0.01em !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.page-id-333930 .fec-hero-pullquote-line.fec-pullquote-accent {
  /* Stefanie 2026-05-07: keep cyan colour but use SAME font as the other
     two pull-quote lines (Rubik), no italic/Fraunces. */
  font-family: 'Rubik', 'Open Sans', 'Avenir-Light', Arial, sans-serif !important;
  font-style: normal !important;
  font-size: 24px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  font-variation-settings: normal !important;
}

/* Spacing pull-quote → CTAs = spacing H1 → pull-quote (56px), so the buttons
   don't touch the text above. (Stefanie 2026-05-07) */
body.page-id-333930 .fec-hero-pullquote {
  margin-bottom: 56px !important;
}