/* ==========================================================================
   Mount Hebe Design System
   Extracted from design.pen — Single source of truth for all design tokens.
   ========================================================================== */

/* === Color Palette === */
:root {
  --mh-gold: #93885F;
  --mh-dark-gray: #575756;
  --mh-cream: #FFFEF4;
  --mh-white: #FFFFFF;
  --mh-dark-green: #2F5112;
  --mh-medium-gray: #706F6F;
  --mh-black: #000000;
  --mh-gold-line: #C9BE9B;
  --mh-carousel-btn-bg: #E4E4E7;
  --mh-carousel-btn-icon: #707074;
}

/* === Font Families ===
   Two axes — script (EN Latin / TC / SC) x style (serif / sans) — kept as
   explicit stacks so a component can pin a script directly (e.g. a Latin brand
   name inside Chinese copy: var(--mh-ff-serif-en)). Components normally use the
   semantic ROLE tokens (--mh-ff-heading / -body / -ui): these default to
   Latin-first with the matching CJK face baked in as a fallback (serif<->serif,
   sans<->sans) so mixed strings never tofu, and the html[lang] rules at the
   bottom of this file swap the primary face per page language.
   Webfonts loaded in header.php: Baskervville, Inter, Noto Sans TC, Noto Serif
   TC. No SC webfont is loaded, so SC leads on the platform faces (see below). */
:root {
  /* Latin */
  --mh-ff-serif-en: 'Baskervville', 'Spectral', Georgia, 'Times New Roman', serif;
  --mh-ff-sans-en:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Traditional Chinese (HK — the default zh script here). Noto Serif/Sans TC
     are webfont-loaded; PingFang HK / Microsoft JhengHei render natively first
     and keep HK-style centered punctuation. */
  --mh-ff-serif-tc: 'Noto Serif TC', 'Source Han Serif TC', 'PingFang HK', serif;
  --mh-ff-sans-tc:  'Noto Sans TC', 'PingFang HK', 'Microsoft JhengHei', sans-serif;

  /* Simplified Chinese — no SC webfont is loaded, so lead on the platform
     faces (Songti SC / PingFang SC on Apple, SimSun / Microsoft YaHei on
     Windows). Noto Serif/Sans SC are kept first so they win the moment SC
     webfonts are added to header.php (recommended for consistent rendering). */
  --mh-ff-serif-sc: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'SimSun', serif;
  --mh-ff-sans-sc:  'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Semantic role tokens — what the .mh-* type classes consume. Default = EN
     (Latin first, matching CJK face baked in as a fallback). */
  --mh-ff-heading: 'Baskervville', 'Spectral', 'Noto Serif TC', Georgia, serif;
  --mh-ff-body:    'Baskervville', 'Spectral', 'Noto Serif TC', Georgia, serif;
  --mh-ff-ui:      'Inter', system-ui, -apple-system, 'Noto Sans TC', 'Segoe UI', Roboto, sans-serif;

  /* Back-compat aliases — earlier code addressed these names directly. */
  --mh-ff-tc: var(--mh-ff-sans-tc);
  --mh-ff-sc: var(--mh-ff-sans-sc);
}

/* === Font Sizes (responsive via clamp, designed at 2560px) === */
:root {
  --mh-fs-h1: clamp(3.2rem, 3.5vw, 9rem);
  --mh-fs-h2: clamp(2.8rem, 1.95vw, 5rem);
  --mh-fs-h3: clamp(3rem, 3.05vw, 7.8rem);
  --mh-fs-h4: clamp(2.4rem, 1.76vw, 4.5rem);
  --mh-fs-h5: clamp(2rem, 1.37vw, 3.5rem);
  --mh-fs-h6: clamp(1.8rem, 1.09vw, 2.8rem);
  --mh-fs-body: clamp(1.6rem, 1.17vw, 3rem);
  --mh-fs-nav: clamp(1.4rem, 0.78vw, 2rem);
  --mh-fs-button: clamp(1.6rem, 1.09vw, 2.8rem);
  --mh-fs-ui: clamp(1.4rem, 0.78vw, 2rem);
  --mh-fs-ui-small: clamp(1.2rem, 0.55vw, 1.4rem);
}

/* === Letter Spacing === */
:root {
  --mh-ls-h1: 0.3em;
  --mh-ls-h2: 0.3em;
  --mh-ls-h3: 0.05em;
  --mh-ls-h4: 0.2em;
  --mh-ls-h5: 0.1em;
  --mh-ls-h6: 0.1em;
  --mh-ls-nav: 0.1em;
  --mh-ls-button: 0.2em;
  --mh-ls-ui: 0.1em;
}

/* === Line Heights === */
:root {
  --mh-lh-heading: 1.2;
  --mh-lh-body: 1.667;
  --mh-lh-ui: 1.5;
}

/* === Spacing Scale === */
:root {
  --mh-space-xs: 1rem;
  --mh-space-sm: 2rem;
  --mh-space-md: 4rem;
  --mh-space-lg: 7rem;
  --mh-space-xl: 10rem;
  --mh-space-2xl: 12rem;

  /* Global page padding (left/right gutters) */
  --mh-pad-x: clamp(2rem, 3.9vw, 10rem);
}

/* === Decorative Elements === */
.mh-divider-line {
  width: 190px;
  height: 3px;
  background-color: var(--mh-gold-line);
  border: none;
  margin: 0 auto 30px;
}


/* ==========================================================================
   Typography Classes — SEO-proper heading hierarchy (H1 > H2 > H3 > ...)
   ========================================================================== */

.mh-h1 {
  font-family: var(--mh-ff-heading);
  font-size: var(--mh-fs-h1);
  font-weight: 400;
  letter-spacing: var(--mh-ls-h1);
  line-height: var(--mh-lh-heading);
  color: var(--mh-gold);
  text-align: center;
  text-transform: uppercase;
}

.mh-h2 {
  font-family: var(--mh-ff-heading);
  font-size: var(--mh-fs-h2);
  font-weight: 400;
  letter-spacing: var(--mh-ls-h2);
  line-height: var(--mh-lh-heading);
  color: var(--mh-gold);
  text-align: center;
  text-transform: uppercase;
}

.mh-h3 {
  font-family: var(--mh-ff-heading);
  font-size: var(--mh-fs-h3);
  font-weight: 400;
  letter-spacing: var(--mh-ls-h3);
  line-height: var(--mh-lh-heading);
  color: var(--mh-white);
}

.mh-h4 {
  font-family: var(--mh-ff-heading);
  font-size: var(--mh-fs-h4);
  font-weight: 400;
  letter-spacing: var(--mh-ls-h4);
  line-height: var(--mh-lh-heading);
  text-align: center;
}

.mh-h5 {
  font-family: var(--mh-ff-heading);
  font-size: var(--mh-fs-h5);
  font-weight: 400;
  letter-spacing: var(--mh-ls-h5);
  line-height: var(--mh-lh-heading);
}

.mh-h6 {
  font-family: var(--mh-ff-heading);
  font-size: var(--mh-fs-h6);
  font-weight: 400;
  letter-spacing: var(--mh-ls-h6);
  line-height: var(--mh-lh-heading);
}

/* === Body / Content === */
.mh-body {
  font-family: var(--mh-ff-body);
  font-size: var(--mh-fs-body);
  font-weight: 400;
  line-height: var(--mh-lh-body);
  color: var(--mh-dark-gray);
  text-align: center;
}

/* === Navigation === */
.mh-nav {
  font-family: var(--mh-ff-body);
  font-size: var(--mh-fs-nav);
  font-weight: 600;
  letter-spacing: var(--mh-ls-nav);
  color: var(--mh-cream);
  text-align: center;
}

/* === Button Text === */
.mh-button-text {
  font-family: var(--mh-ff-heading);
  font-size: var(--mh-fs-button);
  font-weight: 400;
  letter-spacing: var(--mh-ls-button);
  color: var(--mh-white);
  text-transform: uppercase;
}

/* === UI Text (Inter) === */
.mh-ui {
  font-family: var(--mh-ff-ui);
  font-size: var(--mh-fs-ui);
  letter-spacing: var(--mh-ls-ui);
  line-height: var(--mh-lh-ui);
}

.mh-ui-small {
  font-family: var(--mh-ff-ui);
  font-size: var(--mh-fs-ui-small);
  line-height: var(--mh-lh-ui);
}


/* ==========================================================================
   Color Utility Classes
   ========================================================================== */

.mh-color-gold { color: var(--mh-gold); }
.mh-color-dark-gray { color: var(--mh-dark-gray); }
.mh-color-cream { color: var(--mh-cream); }
.mh-color-white { color: var(--mh-white); }
.mh-color-dark-green { color: var(--mh-dark-green); }
.mh-color-medium-gray { color: var(--mh-medium-gray); }

.mh-bg-gold { background-color: var(--mh-gold); }
.mh-bg-dark-gray { background-color: var(--mh-dark-gray); }
.mh-bg-cream { background-color: var(--mh-cream); }
.mh-bg-white { background-color: var(--mh-white); }
.mh-bg-dark-green { background-color: var(--mh-dark-green); }
.mh-bg-medium-gray { background-color: var(--mh-medium-gray); }


/* ==========================================================================
   Per-locale font routing
   <html lang> is emitted by WPML from the active language. This install uses
   the language codes en-US / zh-tc / zh-sc (zh-tc = Traditional/HK, zh-sc =
   Simplified/CN). To stay robust against WPML's "language code vs. locale"
   setting we also match the locale-derived tags (zh-HK / zh-CN) and BCP-47
   script subtags (zh-Hant / zh-Hans) — all case-insensitive (`i`). On a
   Chinese page the CJK face leads while the Latin face stays in the stack so
   embedded brand names keep Baskervville / Inter; serif roles pair with the
   serif CJK face, the sans (UI) role with the sans CJK face. English (en-US)
   needs no rule — the :root defaults already lead with Baskervville / Inter.
   ========================================================================== */

/* Traditional Chinese (zh-tc / zh-HK / zh-Hant) — serif<->Noto Serif TC. */
html[lang="zh-tc" i] body,
html[lang="zh-hk" i] body,
html[lang="zh-hant" i] body,
html[lang^="zh-hant-" i] body {
  --mh-ff-heading: 'Noto Serif TC', 'Baskervville', 'PingFang HK', serif;
  --mh-ff-body:    'Noto Serif TC', 'Baskervville', 'PingFang HK', serif;
  --mh-ff-ui:      'Noto Sans TC', 'Inter', 'PingFang HK', sans-serif;
}

/* Simplified Chinese (zh-sc / zh-CN / zh-Hans). font-language-override: "ZHH"
   forces the font's `locl` feature to Hong Kong Traditional positioning,
   flipping the full-stop / comma glyphs from Mainland GB bottom-flush to
   centered to match the HK look (honoured by Noto CJK / Source Han / PingFang;
   ignored by fonts without a locl table). Character glyphs stay Simplified. */
html[lang="zh-sc" i] body,
html[lang="zh-cn" i] body,
html[lang="zh-hans" i] body,
html[lang^="zh-hans-" i] body {
  --mh-ff-heading: 'Noto Serif SC', 'Baskervville', 'Songti SC', 'SimSun', serif;
  --mh-ff-body:    'Noto Serif SC', 'Baskervville', 'Songti SC', 'SimSun', serif;
  --mh-ff-ui:      'Noto Sans SC', 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-language-override: "ZHH";
}