/* ============================================================
   Amansala Brand Global Stylesheet
   Typography, spacing, and readability system — applies site-wide.
   Loaded after each page's own <style> block so these rules win
   the cascade without needing to touch every page's markup.

   FONT HISTORY: pass 1 (earlier session) set Manrope/DM Sans. Pass 2
   (2026-09-09, Darlene's typography-standards request) switched headings to
   Newsreader. Pass 3 (2026-09-09, same day) reverted that — Darlene said the
   serif read "too retro." Headings now use Plus Jakarta Sans too (bold
   weight), same as body — one clean sans-serif family site-wide. Loaded via
   @import below since this is a static site with no shared <head> partial —
   every page's own <link> tags still point at old fonts, but this @import
   plus the !important rules below make Plus Jakarta Sans win everywhere.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --font-heading: "Plus Jakarta Sans", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", Arial, sans-serif;

  /* type scale (desktop values; clamp() eases down for mobile).
     BASELINE HISTORY — read this before changing these numbers again:
       2026-09-09 pass 1: trimmed ~15% off the original scale (Darlene: "font is a bit big").
       2026-09-09 pass 2 (this one): flat -2px per Darlene's formal typography-rules request,
         EXCEPT where a stated floor blocked it: body text stays at 16px (already at floor,
         so unchanged), support text floored at 14px (only -1px, was 15px), nav/button text
         floored at 15px (only -1px, was 16px), and h4's minimum stays at 17px so it never
         drops to/below the body-text floor and loses hierarchy at small viewports.
     A future "-2px" request should diff against THESE values, not re-subtract blindly. */
  --h1: clamp(1.875rem, 0.875rem + 3.9vw, 3.25rem);   /* 30px → 52px */
  --h2: clamp(1.475rem, 1.025rem + 2vw, 2.315rem);    /* 24px → 37px */
  --h3: clamp(1.095rem, 0.855rem + 1.1vw, 1.575rem);  /* 18px → 25px */
  --h4: clamp(1.07rem, 0.95rem + 0.5vw, 1.225rem);    /* 17px → 20px */
  --body-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem); /* 16px → 17px — floored, unchanged */
  --support-size: 0.875rem; /* 14px — floored (was 15px) */
  --nav-size: 0.9375rem;    /* 15px — floored (was 16px) */

  /* section spacing */
  --space-section-desktop: 76px;
  --space-section-tablet: 56px;
  --space-section-mobile: 44px;
  --space-block: 32px;
  --space-heading-body: 20px;
  --space-paragraph: 15px;

  --brand-ink: #2b2420;
  --brand-focus: #bd5b36;

  /* Darkened per Darlene's 2026-09-09 "we hate this light text" report.
     --terracotta is used almost everywhere on the site for small tag/label
     text (room tags, villa tags, pass tags, etc.) via var(--terracotta), and
     nearly every page defines it as the same pale #BDA68B — overriding it
     once here (this :root loads after each page's own) darkens all of them
     in one shot instead of hunting down ~19 different "-tag" classes. */
  --terracotta: #8B6F52;
}

/* ---------- fonts everywhere, overriding old serif/script/decorative faces ---------- */
html, body,
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, blockquote, figcaption,
a, button, input, textarea, select, label,
nav, nav a, .nav-links a, .menu a,
[class*="nav"], [class*="menu"],
[style*="Cormorant"], [style*="Playfair"], [style*="Jost"],
[style*="Archetype"], [style*="cursive"], [style*="italic"]{
  font-family: var(--font-body) !important;
}
/* Newsreader is reserved for short major titles only (H1 + major H2) —
   everything else, including H3-H6 and generic "title"/"heading" classed
   elements, stays in Plus Jakarta Sans per spec but keeps bold weight so
   the hierarchy (size + weight) still reads clearly against body text. */
h1, h2{
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  text-wrap: balance;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
h3, h4, h5, h6,
[class*="heading"], [class*="title"]:not(input):not(a){
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-wrap: balance;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ---------- never italic, anywhere. Icon fonts don't use italic glyphs,
   so this blanket rule is safe; if one is ever added, exempt its class here. ---------- */
*{ font-style: normal !important; }
em, i, cite, dfn, blockquote, q,
[style*="italic" i]{
  font-style: normal !important;
}

/* ---------- heading hierarchy: every title clearly bigger than body ---------- */
h1{ font-size: var(--h1) !important; line-height: 1.08 !important; font-weight: 800 !important; }
/* Several hero headlines site-wide are marked up as <span class="hero-title">
   instead of a real <h1> (rooms.html, etc.), some sized up to 17rem/272px —
   these bypass the H1 cap above entirely. Bring them to the same size as a
   real H1 (found via Darlene's 2026-09-09 "too big" report on /rooms). */
[class*="hero-title"]{ font-size: var(--h1) !important; line-height: 1.08 !important; font-weight: 800 !important; font-family: var(--font-heading) !important; }
h2{ font-size: var(--h2) !important; line-height: 1.12 !important; }
h3{ font-size: var(--h3) !important; line-height: 1.2 !important; }
h4{ font-size: var(--h4) !important; line-height: 1.3 !important; }

/* ---------- body copy: never below 16px, comfortable measure & leading ---------- */
p, dd, blockquote, figcaption{
  font-size: var(--body-size) !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: var(--brand-ink);
  max-width: 72ch;
  text-wrap: pretty;
}
/* <li> is deliberately NOT forced to body size here — this site uses <li> for
   both real reading content (FAQ answers, policy lists) AND compact inline
   UI tags (room amenities, villa detail bullets, nav submenus), and forcing
   all of them to 16-17px broke the compact ones' sizing and flex-wrap layout
   (found via Darlene's 2026-09-09 report: room amenity/detail lists rendering
   "way too big" and "a mess"). Each list's own CSS controls its <li> size. */
li{ text-wrap: pretty; }
small, .caption, .eyebrow, .label{
  font-size: var(--support-size) !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  text-wrap: balance;
  text-transform: none !important;
  /* letter-spacing left alone here on purpose — small uppercase eyebrow
     labels are a legitimate, tasteful accent on this site; only nav links
     and buttons (below) get their letter-spacing reined in. text-transform
     IS reined in though: many pages force lowercase here via their own CSS,
     which silently undoes any HTML capitalization fix (found via Darlene's
     2026-09-09 "still not capitalized" report on /rooms' eyebrow) — this
     shows whatever case is actually authored in the HTML instead. Eyebrows
     whose HTML text is still lowercase will need that fixed per-page; this
     rule only stops the CSS from re-forcing lowercase over a fix. */
}
/* Substring-matched "eyebrow/caption/label" classes (e.g. .section-eyebrow,
   .hero-eyebrow) get weight/wrap/case only — font-size is deliberately left to
   each page's own CSS. Several pages style these bigger (20-34px) as a
   display accent, not a tiny caption; forcing a flat 14px here overrode
   that intentional per-page design (found via Darlene's 2026-09-09 report
   on "The Bikini Bootcamp Experience" eyebrow shrinking below its headline). */
[class*="eyebrow"], [class*="caption"], [class*="label"], [class$="-tag"]{
  line-height: 1.5 !important;
  font-weight: 600 !important;
  text-wrap: balance;
  text-transform: none !important;
}

h1 + p, h1 + div, h2 + p, h2 + div, h3 + p, h3 + div, h4 + p, h4 + div{
  margin-top: var(--space-heading-body) !important;
}
p + p{ margin-top: var(--space-paragraph) !important; }

/* ---------- buttons & nav: readable size, real weight, real touch targets ---------- */
a.btn, button, .btn, [class*="btn"], [class*="button"],
a[class*="cta"], a.nav-book,
input[type="submit"], input[type="button"]{
  font-family: var(--font-body) !important;
  font-size: var(--nav-size) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-wrap: balance;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 1.4em;
  padding-right: 1.4em;
}

/* ---------- orphan-line protection beyond plain <p>/<h*> tags —
   card/room/retreat descriptions and taglines are often plain <div>/<span>
   on this site rather than <p>, so catch them by common class naming too. ---------- */
[class*="tagline"], [class*="desc"], [class*="lead"], [class*="summary"],
[class*="subtitle"], [class*="quote"], [class*="intro"]{
  text-wrap: pretty;
}

/* ---------- keep centered intro/tagline blurbs actually centered —
   the max-width:72ch on <p> above shrinks these boxes for readability, but
   without re-centering the margins they hug the left edge of their section
   instead, so a centered heading below them looks off relative to the text. ---------- */
p[class*="tagline"], p[class*="intro"], p[class*="lead"], p[class*="summary"], p[class*="caption"]{
  margin-left: auto !important;
  margin-right: auto !important;
}
a.btn:focus-visible, button:focus-visible, .btn:focus-visible,
[class*="btn"]:focus-visible, [class*="button"]:focus-visible,
a:focus-visible{
  outline: 2px solid var(--brand-focus) !important;
  outline-offset: 2px !important;
}

nav a, .nav-links a, .menu a, [class*="nav"] a{
  font-size: var(--nav-size) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* ---------- readability fixes ---------- */
/* thin/pale text that fails contrast — bring weight and opacity up */
[style*="font-weight: 100"], [style*="font-weight:100"],
[style*="font-weight: 200"], [style*="font-weight:200"],
[style*="font-weight: 300"], [style*="font-weight:300"]{
  font-weight: 400 !important;
}

/* text sitting on photos needs a readable scrim, not raw white/thin text */
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] p,
[class*="overlay"] h1, [class*="overlay"] h2, [class*="overlay"] p{
  text-shadow: 0 1px 3px rgba(0,0,0,.35), 0 2px 16px rgba(0,0,0,.25);
}

/* ---------- section spacing: airy but connected, not cavernous ----------
   Deliberately NOT a blanket override of every section's padding/min-height —
   full-bleed photo heroes on this site legitimately rely on those. Section
   spacing and any stray 100vh/min-height block are fixed per page after
   visual review, not nuked globally here. */
@media (max-width: 640px){
  p, li, dd{ max-width: none; }
}
