/* =============================================================
   BEXFORD – GLOBAL TYPOGRAPHY & BRAND STANDARDISATION
   typography.css | Loaded on every page via header.php

   Purpose:
   1. Enforce Inter font family site-wide (no Cormorant Garamond)
   2. Apply #D4AF37 luxury gold consistently as accent color
   3. Logo in #D4AF37 on ALL pages
   4. Standardised, reduced heading sizes for premium look
   ============================================================= */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Font */
  --font-serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Brand gold — single authoritative value */
  --color-gold: #D4AF37;
  --bexford-gold: #D4AF37;
  --gold: #D4AF37;
  --color-gold-light: rgba(212, 175, 55, 0.16);
  --color-gold-border: rgba(212, 175, 55, 0.50);
  --color-gold-hover: rgba(212, 175, 55, 0.10);
  --gold-30: rgba(212, 175, 55, 0.30);
  --gold-20: rgba(212, 175, 55, 0.20);
  --gold-10: rgba(212, 175, 55, 0.10);
  --gold-soft: rgba(212, 175, 55, 0.25);
}

/* ── 2. BODY ────────────────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 3. HEADINGS – FONT & SIZE (ALL PAGES) ─────────────────── */
/* Font family — overrides Cormorant Garamond everywhere        */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Reduced, refined heading scale — clean and premium           */
h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

h4 {
  font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

h5 {
  font-size: 1rem !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

h6 {
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

/* ── 4. LOGO – GOLD #D4AF37 ON ALL PAGES ───────────────────── */
/* CSS filter that maps any logo image colour → #D4AF37         */
/* brightness(0) → pure black → then sepia+invert maps to gold  */
.nav__logo-img {
  filter:
    brightness(0) saturate(100%) invert(75%) sepia(40%) saturate(600%) hue-rotate(5deg) brightness(97%) contrast(92%) !important;
}

/* ── 5. NAVIGATION ─────────────────────────────────────────── */
.nav__link,
.nav__dropdown-link,
.nav__cta {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.925rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
}

.mobile-nav__link,
.mobile-nav__accordion-trigger,
.mobile-nav__sublink,
.mobile-nav__cta {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
}

/* ── 6. HERO SECTION ───────────────────────────────────────── */
.hero__heading,
.hero__subtext,
.hero__eyebrow-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.hero__heading {
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

@media (max-width: 768px) {
  .hero__heading {
    font-size: 24px !important;
  }
}

.hero__subtext {
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
}

/* ── 7. SECTION & CARD HEADINGS ────────────────────────────── */
[class*="section"] h1,
[class*="section"] h2,
[class*="section"] h3,
[class*="section"] h4,
[class*="__heading"],
[class*="__title"],
[class*="__subtitle"],
[class*="-heading"],
[class*="-title"],
[class*="-subtitle"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ── 8. INSIGHTS / BLOG PAGES ──────────────────────────────── */
.insights-hero h1,
.featured-content h2,
.card-body h3,
.article-hero h1,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content blockquote {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.article-content h2 {
  font-weight: 700 !important;
}

.article-content h3 {
  font-weight: 600 !important;
}

.article-content blockquote {
  font-style: normal !important;
  font-weight: 500 !important;
}

/* ── 9. BUTTONS & CTAS ─────────────────────────────────────── */
button,
.btn,
.btn-primary,
.btn-outline,
[class*="__cta"],
[class*="-btn"],
[class*="__btn"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ── 9b. PILL BORDER-RADIUS (site-wide) ─────────────────────── */
button,
.btn,
.btn-primary,
.btn-outline,
[class*="__cta-btn"],
[class*="-btn"]:not(.footer-contact-item):not(.footer-booking),
[class*="__btn"],
.nav__cta,
.cat-btn,
.consult-done-btn {
  border-radius: 100px !important;
}

/* ── 10. GOLD ACCENT COLOUR ENFORCEMENT ─────────────────────── */
/* Enforce #D4AF37 for any element explicitly using the gold
   CSS variable names as colour or border-color                  */
[class*="gold-text"],
[class*="accent-text"],
.insights-eyebrow,
.cat-label,
.card-meta .cat,
.read-more,
.hero__info-card-sub,
.nav__dropdown-link:hover {
  color: #D4AF37 !important;
}

/* ── 11. CATCH-ALL: INLINE Cormorant OVERRIDES ──────────────── */
[style*="Cormorant"],
[style*="font-family: 'Cormorant"],
[style*='font-family: "Cormorant'] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* -- 12. GLOBAL EMPHASIS OVERRIDE ------------------------------ */
/* Force all headings and emphasis tags to normal (non-italic) */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
[class*="heading"] em, [class*="title"] em,
.hero__heading em, .hero__heading span,
em, i {
  font-style: normal !important;
}

