/*
 * EM Child — Typography System
 *
 * INVENTORY (2026-09-16)
 * ─────────────────────────────────────────────────────────────────────────────
 * Three conflicting font systems found on the site:
 *
 * 1. Soledad theme (<style id="penci-custom-style">, generated from DB):
 *      --pchead-font: 'Raleway', sans-serif  → headings h1-h3, nav, buttons
 *      --pcbody-font: 'PT Serif', serif       → body text, footer, price
 *    PROBLEM: Neither Raleway nor PT Serif are loaded via Google Fonts.
 *    Browser falls back to Arial / Times New Roman.
 *
 * 2. Elementor Kit (post-118.css on .elementor-kit-118):
 *      --e-global-typography-primary-font-family: "Roboto"    → Elementor headings
 *      --e-global-typography-secondary-font-family: "Roboto Slab"
 *      --e-global-typography-text-font-family:    "Roboto"    → Elementor text editor
 *      --e-global-typography-accent-font-family:  "Roboto"
 *    STATUS: Roboto IS loaded — but with all 18 weights (massive payload).
 *
 * 3. Result: headings = Arial, body = Times New Roman, Elementor = Roboto.
 *    Three systems fighting each other → visually inconsistent, "cheap".
 *
 * OVERRIDE STRATEGY (two hooks cover the entire site)
 * ─────────────────────────────────────────────────────────────────────────────
 *   body { --pchead-font: ...; --pcbody-font: ...; }
 *   .elementor-kit-118 { --e-global-typography-*: ...; }
 *
 * HOW TO SWITCH VARIANTS FOR CLIENT PREVIEW
 * ─────────────────────────────────────────────────────────────────────────────
 * 1. Comment out the active @import + :root block.
 * 2. Uncomment the desired variant @import + :root block.
 * 3. Save — browser picks up changes on next refresh (filemtime versioning).
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* =============================================================================
   FONT VARIANTS — activate exactly one block (@import + :root)
   ============================================================================= */

/* ── VARIANT A: Manrope + Inter ── INACTIVE ────────────────────────────────────
   Premium geometric grotesque. Manrope: clean, modern, uppercase-friendly.
   Inter: best-in-class readability for screens, tables, micro-text.
   ──────────────────────────────────────────────────────────────────────────── */
/* @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&family=Inter:wght@400;500&display=swap&subset=cyrillic');
:root {
  --font-heading: 'Manrope', sans-serif;
  --font-body:    'Inter', sans-serif;
} */

/* ── VARIANT B: Montserrat + Source Sans 3 ── INACTIVE ───────────────────────
   B2B manufacturing pair. Montserrat: bold uppercase presence.
   Source Sans 3 (Adobe): designed for technical documents and tables.
   ──────────────────────────────────────────────────────────────────────────── */
/*
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Source+Sans+3:wght@400;600&display=swap&subset=cyrillic');
:root {
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;
}
*/

/* ── VARIANT C: Exo 2 + Roboto ── ACTIVE ───────────────────────────────────
   Engineering-focused. Exo 2: built for tech/engineering products.
   Roboto: already loaded by Elementor — zero extra network cost.
   ──────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@600;700&display=swap&subset=cyrillic');
:root {
  --font-heading: 'Exo 2', sans-serif;
  --font-body:    'Roboto', sans-serif;
}




/* =============================================================================
   LAYER 1 — Override Soledad CSS variables
   WHY !important: penci-custom-style (Soledad's DB-driven inline <style>)
   is output late in the document — it appears at stylesheet index ~40,
   AFTER our linked typography.css (~17). Without !important, penci-custom-style
   always wins the cascade regardless of specificity. !important overrides
   any non-important declaration, ensuring our fonts always take effect.
   ============================================================================= */
body {
  --pchead-font: var(--font-heading) !important;
  --pcbody-font: var(--font-body)    !important;
}


/* =============================================================================
   LAYER 2 — Override Elementor Kit CSS variables
   WHY !important: post-118.css (Elementor's kit CSS, dynamically generated)
   appears at stylesheet index ~26, also after typography.css. Same reasoning
   as LAYER 1 — !important is the only reliable override without moving our
   CSS to wp_footer.
   ============================================================================= */
.elementor-kit-118 {
  --e-global-typography-primary-font-family:   var(--font-heading) !important;
  --e-global-typography-secondary-font-family: var(--font-heading) !important;
  --e-global-typography-text-font-family:      var(--font-body)    !important;
  --e-global-typography-accent-font-family:    var(--font-body)    !important;
}


/* =============================================================================
   LAYER 3 — Explicit rules for elements that bypass CSS variables
   With LAYER 1 fixed, Soledad's own var(--pchead-font) references now resolve
   correctly. LAYER 3 is kept as redundant safety coverage for elements that
   hardcode font-family without using Soledad/Elementor CSS variables.
   ============================================================================= */

/* ── Body / global ─────────────────────────────────────────────────────────── */
body,
p {
  font-family: var(--font-body);
}

/* ── Headings (native + Elementor widget heading) ──────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

.elementor-widget-heading .elementor-heading-title {
  /* Elementor sometimes applies font-family via element-level CSS class
     generated per-widget. Higher specificity selector beats it without !important. */
  font-family: var(--font-heading);
}

/* ── Navigation menus ──────────────────────────────────────────────────────── */
nav#navigation a,
.penci-header-wrap nav a,
.penci-nav-menu .menu-item a,
.penci-header-menu .menu-item a {
  font-family: var(--font-heading);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.elementor-button,
.elementor-button-wrapper .elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.penci-btn,
.penci-button-wrap a,
button {
  font-family: var(--font-heading);
}

/* ── WooCommerce: product title, price, tabs ───────────────────────────────── */
.product_title.entry-title,
.woocommerce-loop-product__title {
  font-family: var(--font-heading);
}

.price,
.woocommerce-Price-amount {
  /* Price currently shows PT Serif 14px — upgrade to heading font, add weight */
  font-family: var(--font-heading);
  font-weight: 600;
}

.woocommerce-tabs .tabs li a {
  font-family: var(--font-heading);
}

.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p,
.woocommerce-tabs .woocommerce-Tabs-panel p,
.woocommerce-tabs .woocommerce-Tabs-panel li {
  font-family: var(--font-body);
}

/* ── Elementor text editor (body text in Elementor widgets) ─────────────────── */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-family: var(--font-body);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer,
.penci-site-footer,
footer,
footer p,
.footer-widget,
.footer-widget p,
.footer-widget li,
.footer-widget a {
  font-family: var(--font-body);
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────────── */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.penci-breadcrumb,
.penci-breadcrumb a {
  font-family: var(--font-body);
}

/* ── Elementor heading with inline font-family (rare edge case) ─────────────────
   Elementor generates per-element CSS in wp-content/uploads/elementor/css/
   that may set font-family inline via a unique class like .elementor-element-XXXXX.
   If a heading still shows wrong font after the rules above, add a targeted
   override here. Mark such exceptions with a comment explaining why !important
   is needed (Elementor element-level CSS has higher specificity).
   Example (only add if actually needed, do not pre-add):
   .elementor-element-XXXXXXXX .elementor-heading-title {
     font-family: var(--font-heading) !important; /* Elementor element CSS override */
   }
   ──────────────────────────────────────────────────────────────────────────── */