/* ==========================================================================
   Typography — standard type scale for the whole site
   --------------------------------------------------------------------------
   One fluid scale: every size grows smoothly from mobile (375px) to
   desktop (1440px) with clamp(), so no per-breakpoint font-size overrides
   are needed. Use these tokens for any new component:

     --fs-display  40 → 96px   hero titles
     --fs-h1       34 → 76px   section headings
     --fs-h2       30 → 56px   sub-headings, big stat numbers
     --fs-h3       24 → 38px   secondary headings, counters
     --fs-h4       19 → 26px   card / list titles
     --fs-h5       18 → 22px   small titles
     --fs-lg       17 → 21px   lead paragraphs
     --fs-md       16 → 18px   large body text
     --fs-base     16px        body text
     --fs-sm       14px        meta text, buttons
     --fs-xs       12px        labels, eyebrows (never smaller on mobile)

   This file loads last and uses !important on purpose: the older CSS sets
   font sizes with many competing selectors/breakpoints, and this layer is
   the single source of truth for size.
   ========================================================================== */

:root {
  --fs-display: clamp(2.5rem, 1.27rem + 5.26vw, 6rem);
  --fs-h1: clamp(2.125rem, 1.2rem + 3.94vw, 4.75rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.44vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 1.19rem + 1.31vw, 2.375rem);
  --fs-h4: clamp(1.1875rem, 1.03rem + 0.66vw, 1.625rem);
  --fs-h5: clamp(1.125rem, 1.037rem + 0.376vw, 1.375rem);
  --fs-lg: clamp(1.0625rem, 0.975rem + 0.376vw, 1.3125rem);
  --fs-md: clamp(1rem, 0.956rem + 0.188vw, 1.125rem);
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-heading);
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Display — hero titles
   -------------------------------------------------------------------------- */

h1.spaces,
.spaces span,
.hero-main-title,
.life-title-banner p {
  font-size: var(--fs-display) !important;
  line-height: var(--lh-tight) !important;
}

/* --------------------------------------------------------------------------
   H1 — section headings
   -------------------------------------------------------------------------- */

.about-heading p,
.amenities-title,
.book-location-left h2,
.brand-title,
.enquire-left h2,
.faq-heading,
.gallery-heading h2,
.gallery-heading h2 span,
.room-heading,
.stay-left p,
.resident-heading p,
.stay-audience-title,
.talk-contact-left h2,
.visit-heading p {
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-tight) !important;
}

/* --------------------------------------------------------------------------
   H2 — sub-headings, large stat numbers
   -------------------------------------------------------------------------- */

.life-title p,
.main-title,
.main-title span,
.nearby-title p,
.section-subtitle,
.plan-visit-left h2,
.resident-content h2,
.card-number .field {
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-heading) !important;
}

/* --------------------------------------------------------------------------
   H3 — secondary headings, counters
   -------------------------------------------------------------------------- */

.choose-subtitle,
.count-number strong,
.counter strong,
.story-home-title,
.card-numbers .field,
.sponsor-title a {
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-heading) !important;
}

/* --------------------------------------------------------------------------
   H4 / H5 — card and list titles
   -------------------------------------------------------------------------- */

.menu-title,
.story-home-description p,
.audience-card .field--name-field-heading,
.review-user h4 {
  font-size: var(--fs-h4) !important;
  line-height: 1.3 !important;
}

.faq-question span:not(.faq-icon),
.flow-title,
.room-card-title .field,
.nearby-item .field {
  font-size: var(--fs-h5) !important;
  line-height: 1.35 !important;
}

/* --------------------------------------------------------------------------
   Body — lead and large paragraphs
   -------------------------------------------------------------------------- */

.section-description,
.section-description p,
.about-body p,
.life-description p,
.faq-description,
.visit-description p,
.location-description p,
.room-description p,
.book-location-left p,
.brand-description p,
.resident-body p,
.talk-contact-left p,
.review-card p,
.review-text p {
  font-size: var(--fs-lg) !important;
  line-height: var(--lh-body) !important;
}

.card-description,
.card-description p,
.feature-lists li,
.enquire-left p,
.plan-visit-left p,
.text-content p,
.stay-audience-description p,
.hero-strip-item span,
.visit-points li,
.review-user span {
  font-size: var(--fs-md) !important;
  line-height: var(--lh-body) !important;
}

/* --------------------------------------------------------------------------
   Small text — never below 12px on mobile
   -------------------------------------------------------------------------- */

.hero-card__subtitle,
.hero-card__subtitle .field,
.gallery-number,
.room-card-subtitle .field,
.gallery-label,
.talk-label,
.hero-tag,
.up-next small,
.current-view small {
  font-size: var(--fs-xs) !important;
}

@media (max-width: 991px) {
  .btn-contacts,
  span.btn.btn--primary a,
  .btn--secondary a {
    font-size: var(--fs-xs) !important;
  }
}