/* =================================================================
 * Tourwill — Site-wide Editorial Typography
 * File: assets/css/components/site-typography.css
 *
 * Purpose: Make EVERY page on the site share the same editorial
 * typography system as the cinematic hero:
 *
 *   • Body / UI / buttons     → Inter            (already loaded by main.css)
 *   • Section headings / H1-3 → Playfair Display  (from Google Fonts)
 *   • Eyebrows / handwritten  → Caveat           (from Google Fonts)
 *   • Gold italic accents     → Playfair Display italic 600 in #eab308
 *
 * The root cause of the existing inconsistency is that the theme's
 * component CSS files declare Italianno / Allura / Dancing Script as
 * the "script" font, but those fonts are NEVER actually loaded.
 * Every browser/OS picks a different cursive fallback, which is why
 * each section looks subtly different. This file fixes the issue by
 * loading the real fonts (via the Google Fonts enqueue in functions.php)
 * and redirecting every script/serif CSS variable in the theme to the
 * unified pair.
 *
 * Loaded site-wide so the consistency applies on every page, not just
 * the homepage.
 * ================================================================= */

/* -----------------------------------------------------------------
 * 1. Redirect component-level font tokens to the unified pair
 *    The existing theme components keep using their own variable
 *    names (no markup or component-CSS edits required) — we just
 *    redefine what those variables resolve to.
 * --------------------------------------------------------------- */

/* Featured Itineraries — was Italianno, now Caveat */
.home-fi,
[class*="home-fi-"] {
	--fi-font-sans:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fi-font-serif:  "Playfair Display", Georgia, "Times New Roman", serif;
	--fi-font-script: "Caveat", "Brush Script MT", cursive;
}

/* Home Testimonials — was Allura, now Caveat */
.ht,
[class*="ht__"],
[class*="home-testimonials"] {
	--ht-font-sans:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ht-font-serif:  "Playfair Display", Georgia, "Times New Roman", serif;
	--ht-font-script: "Caveat", "Brush Script MT", cursive;
}

/* Front-page Destinations — was Allura, now Caveat */
.fpd,
[class*="fpd-"],
[class*="fpd__"] {
	--fpd-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--fpd-font-script:  "Caveat", "Brush Script MT", cursive;
	--fpd-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* About Reasons section — uses an unprefixed --font-display sometimes */
.about-reasons,
[class*="about-reasons"] {
	--ar-font-script:  "Caveat", "Brush Script MT", cursive;
	--ar-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Generic theme-wide tokens — for any component that uses unprefixed names */
:root {
	--font-script:  "Caveat", "Brush Script MT", cursive;
	--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-serif:   "Playfair Display", Georgia, "Times New Roman", serif;
}

/* -----------------------------------------------------------------
 * 2. Body / paragraph rhythm (site-wide)
 *    The theme already sets body to Inter via main.css; here we make
 *    that more explicit and tighten the line-height for editorial feel.
 * --------------------------------------------------------------- */
body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-feature-settings: "ss01" on, "cv11" on;  /* Inter's nicer alt forms */
}

/* -----------------------------------------------------------------
 * 3. Headings (site-wide)
 *    All H1–H3 use Playfair Display 600. Lower headings (H4–H6)
 *    stay on Inter as UI labels, which is more legible at small sizes.
 *    We intentionally do NOT use !important so any component that
 *    has a deliberate non-serif heading (icon-only labels, badges)
 *    can still override.
 * --------------------------------------------------------------- */
h1, h2, h3,
.h1, .h2, .h3,
[class$="__heading"],
[class$="__title"]:not([class*="__card-title"]):not([class*="card__title"]) {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* H4–H6 stay on Inter for UI/list contexts */
h4, h5, h6,
.h4, .h5, .h6 {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 600;
}

/* -----------------------------------------------------------------
 * 4. Eyebrows, kickers, taglines — the handwritten accents
 *    Any element classed with these patterns gets Caveat. Editors
 *    don't need to add new classes; existing markup carries the
 *    look automatically.
 * --------------------------------------------------------------- */
[class$="__eyebrow"],
[class*="__eyebrow "],
[class$="__kicker"],
[class*="__kicker "],
[class$="__tagline"],
[class*="__tagline "],
[class$="__overline"],
[class*="__overline "],
.eyebrow,
.kicker,
.tagline,
.section-eyebrow {
	font-family: "Caveat", "Brush Script MT", cursive;
	font-style: normal;
	font-weight: 500;
	font-size: clamp(1.4rem, 2.2vw, 1.85rem);
	line-height: 1;
	letter-spacing: 0.3px;
}

/* -----------------------------------------------------------------
 * 5. Gold italic accent inside headings
 *    Wrap a keyword in <em> or <i> inside any H2 and it picks up
 *    the same gold italic Playfair treatment as the hero's
 *    "Your Story?" — a one-line editor pattern for visual rhythm.
 *
 *      <h2 class="home-fi__heading">Featured <em>Itineraries</em></h2>
 *      <h2 class="ht__heading">Real <em>Stories</em></h2>
 * --------------------------------------------------------------- */
h1 em, h1 i,
h2 em, h2 i,
h3 em, h3 i,
[class$="__heading"] em,
[class$="__heading"] i,
[class$="__title"]:not([class*="card"]) em,
[class$="__title"]:not([class*="card"]) i {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 600;
	color: #eab308;  /* matches hero's --hh-accent */
}

/* -----------------------------------------------------------------
 * 6. Buttons and CTAs (site-wide)
 *    Matches the hero's "PLAN YOUR JOURNEY" treatment.
 *    The .hh__ hero buttons are deliberately excluded since they
 *    already have their own correct treatment from home-hero.css.
 * --------------------------------------------------------------- */
.button,
.btn,
button:not(.hh__nav-btn):not(.swiper-button-next):not(.swiper-button-prev),
[class*="__cta"]:not(.hh__cta-primary),
[class*="__btn"]:not([class*="hh__"]),
input[type="submit"],
input[type="button"] {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Larger uppercase buttons get tighter tracking (matches PLAN YOUR JOURNEY) */
.button--large,
.btn--large,
[class*="__cta-primary"]:not(.hh__cta-primary),
[class*="__cta--primary"] {
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------
 * 7. Navigation, footer, forms — small consistency wins
 * --------------------------------------------------------------- */
nav, .nav, #main-nav,
footer, .footer,
input, textarea, select {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* -----------------------------------------------------------------
 * 8. Hero opt-out
 *    The hero already declares its own scoped tokens via .hh
 *    and home-hero.css loads AFTER this file in the cascade, so
 *    nothing here can disturb the hero's tuned values. This block
 *    is documentation only — kept intentionally empty.
 * --------------------------------------------------------------- */
/* .hh's own --hh-font-* variables take precedence. No changes needed. */