/* ==========================================================================
   The Sahil Hotel — base.css
   Reset, design tokens, typography, utilities
   ========================================================================== */

/* --- Skip link (WCAG 2.4.1) --- */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  padding: .5rem 1rem; background: var(--color-accent);
  color: #fff; font-weight: 600; z-index: 10000; text-decoration: none;
  border-radius: 0 0 4px 4px;
}
.skip-link:focus { top: 0; }

/* --- Modern reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* --- Design tokens --- */
:root {
  /* Color */
  --color-accent: #93734B;
  --color-accent-dark: #7A5E3C;
  --color-accent-light: #B89A78;
  --color-secondary: #E6E6E6;
  --color-bg: #FFFFFF;
  --color-bg-soft: #FAFAFA;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B6B;
  --color-border: #E6E6E6;

  /* Type */
  --font-sans: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Space scale */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --header-h: 110px;
}

/* Mobile: ensure at least 30px of breathing room from the screen edge */
@media (max-width: 640px) {
  :root {
    --container-pad: 30px;
  }
}

/* ============================================================
   MOBILE: left-align all centered content for natural reading flow.
   Reading on a 375px screen is more comfortable left-aligned;
   centered text creates ragged left edges that hurt scannability.
   ============================================================ */
@media (max-width: 640px) {

  /* --- Section heads (incl. centered variant) --- */
  .section__head,
  .section__head--center {
    text-align: left;
    align-items: flex-start;
    margin-inline: 0;
    max-width: none;
  }

  /* --- Gold-underline below titles must start from the left, not center --- */
  .section__title::after,
  .cta-band__title::after,
  .hero__title::after,
  .philosophy__heading h2::after,
  .inner-intro__heading h2::after,
  .inner-intro__h1::after,
  .location-section__heading::after,
  .mv-split__body .section__title::after {
    margin-inline: 0;
  }

  /* --- Hero copy --- */
  .hero__content {
    text-align: left;
    align-items: flex-start;
  }

  /* --- Stats showcase (home page) --- */
  .stats-row { text-align: left; }
  .stats-row__top { justify-content: flex-start; }

  /* --- Testimonials --- */
  .testimonial { text-align: left; }
  .testimonial__quote-mark { left: 0; }

  /* --- CTA bands and centered final-CTA sections --- */
  .cta-band,
  .cta-band__title,
  .cta-band__sub { text-align: left; }

  /* --- u-text-center utility (used on final "Contact Us" CTA blocks) --- */
  .u-text-center { text-align: left; }

  /* --- Centered button rows (.location-actions, .hero__cta-row, etc.) --- */
  .location-actions,
  .hero__cta-row,
  .badge-row { justify-content: flex-start; }

  /* --- Direction form button — keep button on its own row, left-aligned --- */
  .direction-form__submit { align-self: flex-start; }
  /* (Note: badge-row 2×2 grid override lives in pages.css — must load after
     components.css to win the cascade.) */
}

:root {

  /* Misc */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, .06);
  --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, .10);
  --transition: 350ms cubic-bezier(.4, 0, .2, 1);
  --transition-fast: 200ms cubic-bezier(.4, 0, .2, 1);
}

/* --- Body & typography --- */
body {
  font-family: var(--font-sans);
  font-size: 16px;          /* Desktop body text: 16px */
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}
@media (max-width: 640px) {
  body { font-size: 14px; }  /* Mobile body text: 14px */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--color-text);
}

/* Header weights bumped for more presence — primary headers carry more visual weight */
h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 500; letter-spacing: -.025em; }
h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 500; letter-spacing: -.02em; }
h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5, h6 { font-size: 1rem; font-weight: 600; }

p { color: var(--color-text); line-height: 1.7; }
p + p { margin-top: var(--space-sm); }

strong { font-weight: 500; }
em { font-style: italic; }

a {
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent); }

/* --- Selection --- */
::selection { background: var(--color-accent); color: #fff; }

/* --- Utility classes --- */
.u-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.u-container--narrow { max-width: 880px; }

.u-text-center { text-align: center; }
.u-text-accent { color: var(--color-accent); }
.u-text-muted { color: var(--color-text-muted); }
.u-uppercase { text-transform: uppercase; letter-spacing: .15em; font-size: .8125rem; }

.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }

.u-mb-sm { margin-bottom: var(--space-sm); }
.u-mb-md { margin-bottom: var(--space-md); }
.u-mb-lg { margin-bottom: var(--space-lg); }

.u-py-xl { padding-block: var(--space-xl); }
.u-py-2xl { padding-block: var(--space-2xl); }

.u-bg-soft { background: var(--color-bg-soft); }
.u-bg-secondary { background: var(--color-secondary); }

.u-divider {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-accent);
  margin: var(--space-md) auto;
}
.u-divider--left { margin-inline: 0 auto 0 0; }

.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Anchors clear sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Page wrapper to allow sticky-header offset */
main { min-height: 60vh; }