/*
 * GFS Theme Overrides — Sprint 8 Visual Fix Round 1 (2026-05-21)
 *
 * Sitewide CSS that aligns Hello-Elementor's body / header / footer with
 * the GFS design system. Loaded on every page.
 *
 * Source of truth for spec values: design-kit/v2/mockups/v2-hub-magazine.html
 *   .site-h (line 19-23) — header style
 *   .hero / body (line 11-13) — typography base
 *
 * Anti-conflict: scoped to `body`, `.elementor-location-header`, and
 * `.elementor-location-footer`. Does not touch any `.gfs-*` class so
 * gfs-kit-v2.css and gfs-home.css continue to layer cleanly on top.
 *
 * Risk note: applies to /shop/ as well. /shop/ uses .msl-pattern-*
 * legacy classes; those have their own font/color rules that should
 * still win because they're more specific or come later in the cascade.
 * If anything looks off on /shop/, re-scope these rules to homepage +
 * gfs-post body classes only.
 */

/* ===================================================================
   FIX #2 + #3 + #4 — body baseline (Inter + ink color + 16px)
   =================================================================== */
html { font-size: 16px; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7;
  color: var(--gfs-ink, #1f2937) !important;
}

/* Inherit Inter onto all descendants that don't have their own override.
   Critical for cards / leads / paragraphs that the kit doesn't class. */
body * {
  font-family: inherit;
}

/* But: explicit kit + Elementor icon webfonts must keep their own family. */
[class^="elementor-icon"],
[class*=" elementor-icon"],
.eicon,
.fa, [class^="fa-"], [class*=" fa-"],
.dashicons, [class^="dashicons-"],
.gfs-pattern-chartshell pre,
.gfs-post__content pre, .gfs-post__content code {
  font-family: revert !important;
}

/* ===================================================================
   FIX #6 — kill horizontal overflow from full-width Elementor wrappers
   =================================================================== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
header.elementor-location-header,
footer.elementor-location-footer,
.elementor-location-header,
.elementor-location-footer {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ===================================================================
   FIX #2 + #3 (Round 2, 2026-05-21) — Replace Elementor header
   We render a fresh .gfs-site-header server-side from wp_body_open
   (see functions.php). Hide the Elementor one to avoid duplication.
   =================================================================== */
.elementor-location-header {
  display: none !important;
}

.gfs-site-header {
  background: var(--gfs-navy, #06142b);
  color: #fff;
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}
body.admin-bar .gfs-site-header {
  /* keep below the WP admin bar without overlapping */
}
.gfs-site-header__brand {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1;
}
.gfs-site-header__brand-light {
  font-weight: 200;
  color: rgba(255,255,255,0.7);
}
.gfs-site-header__nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
  font-weight: 500;
}
.gfs-site-header__link {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  letter-spacing: 0;
  font-family: "Inter", system-ui, sans-serif;
}
.gfs-site-header__link:hover {
  color: var(--gfs-amber, #d4a04a) !important;
}
.gfs-site-header__link.is-active {
  color: var(--gfs-amber, #d4a04a) !important;
  font-weight: 700;
}

@media (max-width: 720px) {
  .gfs-site-header {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .gfs-site-header__nav {
    gap: 16px;
    font-size: 13px;
  }
}

/* ===================================================================
   FIX #1 — site header restyle to mockup .site-h spec
   navy bg + Inter + amber-active nav
   =================================================================== */
.elementor-location-header,
.elementor-location-header > .elementor,
.elementor-location-header .elementor-section {
  background-color: var(--gfs-navy, #06142b) !important;
}

.elementor-location-header,
.elementor-location-header * {
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
}

/* Brand / logo text inside the header — Inter heavy 20px */
.elementor-location-header .site-title,
.elementor-location-header .site-title a,
.elementor-location-header [class*="site-title"],
.elementor-location-header h1,
.elementor-location-header h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}

/* Nav menu items — Inter 14px medium, amber for active */
.elementor-location-header nav a,
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .elementor-nav-menu li a,
.elementor-location-header .menu-item a {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  letter-spacing: 0;
}
.elementor-location-header nav a:hover,
.elementor-location-header .elementor-nav-menu a:hover,
.elementor-location-header .elementor-nav-menu li.current-menu-item a,
.elementor-location-header .menu-item.current-menu-item a,
.elementor-location-header .menu-item.current-menu-ancestor a {
  color: var(--gfs-amber, #d4a04a);
  font-weight: 700;
}

/* Bottom hairline like the mockup .site-h */
.elementor-location-header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ===================================================================
   FIX #5 — site footer mirrors the header (navy + Inter + muted text)
   =================================================================== */
.elementor-location-footer,
.elementor-location-footer > .elementor,
.elementor-location-footer .elementor-section {
  background-color: var(--gfs-navy, #06142b) !important;
}
.elementor-location-footer,
.elementor-location-footer * {
  color: rgba(255,255,255,0.7);
  font-family: "Inter", system-ui, sans-serif;
}
.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.elementor-location-footer a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.elementor-location-footer a:hover {
  color: var(--gfs-amber, #d4a04a);
}

/* Hairline above the footer to separate from page content */
.elementor-location-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ===================================================================
   FIX #4 (Round 2, 2026-05-21) — Magazine card title link color
   Elementor's default link color (rgb(0,109,180)) bleeds into the
   <a class="gfs-home-card"> wrapper and tints the h4 + its inner spans
   blue. Force inherit on the anchor, white on the title block, and
   restore amber on .gfs-amber spans inside the title.
   =================================================================== */
.gfs-home-card,
.gfs-home-card:link,
.gfs-home-card:visited,
.gfs-home-card:hover,
.gfs-home-card:focus,
.gfs-home-card:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* .hd is dark navy → titles must be white */
.gfs-home-card__hd h4,
.gfs-home-card__hd h4 span,
.gfs-home-card__hd h4 .gfs-heavy,
.gfs-home-card__hd h4 .gfs-light {
  color: #fff !important;
}

.gfs-home-card__hd h4 .gfs-amber {
  color: var(--gfs-amber, #d4a04a) !important;
}

/* body p stays muted; foot meta + cta keep their kit colors */
.gfs-home-card__body p,
.gfs-home-card__foot > span:not(.cta) {
  color: var(--gfs-muted, #7a8190) !important;
}
.gfs-home-card__foot .cta {
  color: var(--gfs-ink-strong, #06142b) !important;
}

/* ===================================================================
   ADMIN BAR — when logged in, the WP admin bar offsets layout by 32px.
   The Elementor header should account for this and stick to the top.
   Not a blocker; just polish. (Comment out if it conflicts.)
   =================================================================== */
body.admin-bar .elementor-location-header { /* no-op for now */ }

/* ===================================================================
   ROUND 3 (Sprint 8 Visual Fix, 2026-05-21)
   Items #6, #7, #8, #9, #10 + #3 class rename
   =================================================================== */

/* FIX #6 — page background cream (not pure white).
   Mockup: body { background: var(--cream) = #f6efe2 }
   Live before: rgb(255,255,255). Override Hello-Elementor default. */
body {
  background: var(--gfs-cream, #f6efe2) !important;
}

/* FIX #7 — Section H3 titles (Finance & Investing / Business / Data)
   must be ink-strong, never green. Defensive — current Live is already
   correct (rgb(6,20,43)), but Visual QA Round 2 reported green so we
   nail this down across selector variants. */
.gfs-home-section__head h3,
.gfs-home-section__head .gfs-h3,
.gfs-home-section__title,
.gfs-home-section__head .gfs-home-section__title {
  color: var(--gfs-ink-strong, #06142b) !important;
}

/* FIX #8 — Featured "Think Like a CFO" h2 ink-strong (was blue-link). */
.gfs-home-featured__left h2,
.gfs-home-featured__card h2,
.gfs-home-featured__card .gfs-home-featured__left h2 {
  color: var(--gfs-ink-strong, #06142b) !important;
}

/* FIX #3 (class rename) — .gfs-logo replaces .gfs-site-header__brand.
   PHP injection in functions.php now renders .gfs-logo + .gfs-logo__light
   + .gfs-logo__heavy. Keep the kit-style naming so future kit revisions
   can adopt the same class. */
.gfs-site-header .gfs-logo {
  color: #fff !important;
  text-decoration: none !important;
  font-family: var(--gfs-font, "Inter", system-ui, sans-serif);
  letter-spacing: -0.01em;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
}
.gfs-site-header .gfs-logo__light {
  font-weight: 200;
  color: rgba(255,255,255,0.7);
}
.gfs-site-header .gfs-logo__heavy {
  font-weight: 900;
  color: #fff;
}

/* FIX #9 — Header height tight to mockup spec (~50px).
   Live before Round 3: already 50px (Visual QA mismeasured the hidden
   Elementor header). Nail the values so they can't regress. */
.gfs-site-header {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  min-height: 50px !important;
}

/* FIX #10 — Hero H1 poster line-break.
   Mockup `.hero h1 .light { display: block }` (forces line) and `.heavy` /
   `.amber` stay inline (default). gfs-home.css set ALL spans to block,
   producing 4 lines instead of the mockup's 3-line poster cadence.
   Restore: .light = block, .heavy + .amber = inline. */
.gfs-home-hero .gfs-h1 .gfs-light {
  display: block !important;
}
.gfs-home-hero .gfs-h1 .gfs-heavy,
.gfs-home-hero .gfs-h1 .gfs-amber {
  display: inline !important;
}

/* ===================================================================
   Notes for follow-up (Sprint 9, kit-level):
   - The kit's .gfs-btn::after uses scaleX(-1) which renders the arrow
     left-pointing in LTR. Patched locally in gfs-home.css / gfs-post.css;
     fix at kit level.
   - body { font-size: 16px } here uses !important to defeat Elementor's
     site-settings inline. Cleaner would be to set Elementor's Body
     typography to 16px via WP-Admin → Site Settings.
   - .gfs-logo class should be promoted to gfs-kit-v2.css once finalized.
   =================================================================== */