/* ==========================================================================
   Golf Course Road Chalets & Lodge — shared stylesheet
   Warm Editorial × Scandinavian Minimal: hairline borders, no shadows,
   no rounded corners, no gradients. Serif headings (Cormorant Garamond),
   light sans body (Inter).

   Sections:
     1. Design tokens
     2. Base & reset
     3. Typography
     4. Shared elements (eyebrow labels, rule, buttons)
     5. Accessibility (skip link, focus, reduced motion)
     6. Header & navigation
     7. Hero
     8. Welcome statement
     9. Room cards
    10. Stat strip
    11. Experience section (dark split panel)
    12. Location page (intro, map, address)
    13. About page
    14. Footer
    15. RTL (Arabic) overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --bg-primary: #faf9f6;
  --bg-secondary: #f2f0e9;
  --ink: #1a1a18;
  --stone: #6f6a5d;
  /* stone-light passes WCAG AA (4.70:1) on --bg-primary only; on the cream
     --bg-secondary it falls to 4.34:1 — use --stone (4.73:1) there instead */
  --stone-light: #757060;
  --border: #e3e1d8;
  --border-faint: #ecebe4;
  --footer-bg: #14171a;
  --footer-text: #b8b3a6;
  --footer-text-bright: #e8e5dc;

  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --content-max: 1160px;
  --pad-inline: 24px;
}

/* --------------------------------------------------------------------------
   2. Base & reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-primary);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
iframe {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* Centered content column used inside header, sections and footer */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
}

h3 {
  font-size: 1.5rem;
}

p {
  color: var(--stone);
}

/* --------------------------------------------------------------------------
   4. Shared elements
   -------------------------------------------------------------------------- */

/* Small letter-spaced label above headings */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--stone-light);
  margin-bottom: 16px;
}

/* Single 36px horizontal rule — the only decorative flourish */
.rule {
  width: 36px;
  height: 1px;
  border: 0;
  background: var(--ink);
  margin: 24px 0;
}

/* Buttons: rectangular, hairline-bordered, letter-spaced small caps */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 32px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease;
}

.btn:hover {
  background: var(--ink);
  color: var(--bg-primary);
}

.btn--solid {
  background: var(--ink);
  color: var(--bg-primary);
}

.btn--solid:hover {
  background: transparent;
  color: var(--ink);
}

/* Small letter-spaced text link with a trailing arrow — lighter-weight
   alternative to .btn (same styling family as .footer-nav links) */
.link-arrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.25s ease;
}

.link-arrow:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   5. Accessibility
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg-primary);
  padding: 12px 24px;
  font-size: 0.8125rem;
  letter-spacing: 1.5px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  inset-inline-start: 0;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
  flex-wrap: wrap;
  padding-block: 16px;
}

/* Text lockup: serif name over small letter-spaced caps */
.brand {
  text-decoration: none;
}

.brand-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}

.brand-sub {
  display: block;
  font-size: 0.5625rem;
  font-weight: 300;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--stone-light);
  margin-top: 3px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-nav a:not(.btn) {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stone);
  transition: color 0.25s ease;
}

.site-nav a:not(.btn):hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav .btn {
  padding: 10px 24px;
}

/* Below the standard breakpoint the nav row (~520px) exceeds the
   viewport — let it wrap instead of forcing horizontal page scroll */
@media (max-width: 720px) {
  .site-nav {
    flex-wrap: wrap;
    gap: 12px 24px;
  }
}

/* Language switcher — dropdown, no flags. Trigger shows the current
   language code + caret; the menu lists every language by its own name.
   Toggled by lang-switcher.js (aria-expanded / hidden). */
.lang-switch {
  position: relative;
}

.lang-switch-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 8px 2px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--stone);
  transition: color 0.25s ease;
}

.lang-switch-trigger:hover,
.lang-switch-trigger[aria-expanded="true"] {
  color: var(--ink);
}

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 50;
  min-width: 170px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--bg-primary);
  border: 1px solid var(--border);
}

.lang-switch-menu a,
.lang-switch-menu .lang-unavailable {
  display: block;
  padding: 9px 20px;
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--stone);
}

.lang-switch-menu a:hover {
  color: var(--ink);
  background: var(--bg-secondary);
}

.lang-switch-menu a[aria-current] {
  color: var(--ink);
}

/* Confirmed languages whose folders aren't scaffolded yet — unlinked */
.lang-switch-menu .lang-unavailable {
  color: var(--stone-light);
}

/* Menu items keep native-script casing — override the uppercase nav-link
   styling they'd otherwise inherit inside .site-nav */
.site-nav .lang-switch-menu a {
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 0.8125rem;
}

/* Letter-spacing suits Latin scripts only */
.lang-switch-menu [lang="zh"],
.lang-switch-menu [lang="ja"],
.lang-switch-menu [lang="ko"],
.lang-switch-menu [lang="ar"] {
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
}

/* Full-bleed image placeholder — swap the background-image for the real
   hero photograph when assets arrive */
.hero-media {
  position: absolute;
  inset: 0;
  background: var(--bg-secondary);
}

.hero-media::after {
  content: "Hero photograph";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--stone); /* on cream bg-secondary — see stone-light note */
}

/* Hero text sits on the cream placeholder — stone-light fails AA there */
.hero-content .eyebrow {
  color: var(--stone);
}

.hero-content {
  position: relative;
  padding-block: 96px;
  max-width: 640px;
}

.hero-content h1 {
  margin-bottom: 32px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   8. Welcome statement
   -------------------------------------------------------------------------- */
.welcome {
  padding-block: 112px;
  text-align: center;
}

.welcome .rule {
  margin-inline: auto;
}

.welcome p {
  max-width: 620px;
  margin-inline: auto;
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   9. Room cards
   -------------------------------------------------------------------------- */
.rooms {
  background: var(--bg-secondary);
  padding-block: 96px;
}

.rooms-heading {
  text-align: center;
  margin-bottom: 64px;
}

/* Eyebrow here sits on cream bg-secondary — stone-light fails AA there */
.rooms-heading .eyebrow {
  color: var(--stone);
}

/* Grouped subsections: Chalets / Lodge Rooms, each with a small
   eyebrow-style sub-label above its own grid */
.rooms-group + .rooms-group {
  margin-top: 72px;
}

.rooms-group-label {
  color: var(--stone); /* on cream bg-secondary — see stone-light note */
  margin-bottom: 20px;
}

/* Hairline dividers via per-card borders collapsed with negative margins,
   so a row with fewer cards (e.g. five rooms in a three-column grid) leaves
   plain background rather than a filled empty cell */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding-top: 1px;
  padding-left: 1px;
}

/* Fixed column counts for the homepage groups */
.rooms-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.rooms-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.room-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  margin-top: -1px;
  margin-left: -1px;
  display: flex;
  flex-direction: column;
}

/* Image placeholder — swap for the real room photograph */
.room-media {
  aspect-ratio: 4 / 3;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--stone); /* on cream bg-secondary — see stone-light note */
  border-bottom: 1px solid var(--border-faint);
}

.room-body {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.room-body h3 {
  margin-bottom: 8px;
}

.room-meta {
  font-size: 0.6875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--stone-light);
  margin-bottom: 16px;
}

.room-body p {
  font-size: 0.9375rem;
  margin-bottom: 24px;
}

/* Amenities: multi-column text list, small muted bullet markers */
.room-amenities {
  list-style: disc;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  padding-inline-start: 1.2em;
  margin-bottom: 24px;
}

.room-amenities li::marker {
  color: var(--stone-light);
  font-size: 0.6em;
}

.room-amenities li {
  color: var(--stone);
  font-size: 0.75rem;
  line-height: 1.6;
}

/* The wider chalet cards (two-column group) fit three amenity columns;
   lodge cards keep the two-column default. Amenities hold a two-column
   minimum on small screens so the long lists don't run excessively tall. */
.rooms-grid--2 .room-amenities {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1000px) {
  .rooms-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .rooms-grid--2 .room-amenities {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .rooms-grid--2,
  .rooms-grid--3 {
    grid-template-columns: 1fr;
  }
}

.room-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   10. Stat strip
   -------------------------------------------------------------------------- */
.stats {
  padding-block: 88px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.stat {
  text-align: center;
  padding: 24px 16px;
  border-inline-start: 1px solid var(--border);
}

.stat:first-child {
  border-inline-start: 0;
}

.stat svg {
  margin: 0 auto 16px;
  stroke: var(--ink);
}

.stat-value {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--ink);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.6875rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--stone-light);
  margin-top: 8px;
}

@media (max-width: 720px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat:nth-child(odd) {
    border-inline-start: 0;
  }

  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}

/* --------------------------------------------------------------------------
   11. Experience section (dark split panel)
   -------------------------------------------------------------------------- */
.experience {
  background: var(--footer-bg);
  color: var(--footer-text);
}

.experience-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

/* Image placeholder — swap for the real landscape photograph */
.experience-media {
  background: #1d2126;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--footer-text);
}

.experience-body {
  padding: 96px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.experience-body .eyebrow {
  color: var(--footer-text);
}

.experience-body h2 {
  color: var(--footer-text-bright);
}

.experience-body .rule {
  background: var(--footer-text);
}

.experience-body p {
  color: var(--footer-text);
  max-width: 460px;
}

.experience-body p + p {
  margin-top: 16px;
}

/* Bright (not muted) on the dark panel so the link isn't missed */
.experience-body .link-arrow {
  margin-top: 32px;
  align-self: flex-start;
  color: var(--footer-text-bright);
}

@media (max-width: 860px) {
  .experience-split {
    grid-template-columns: 1fr;
  }

  .experience-media {
    min-height: 280px;
  }

  .experience-body {
    padding: 64px var(--pad-inline);
  }
}

/* --------------------------------------------------------------------------
   12. Location page (intro, map, address)
   -------------------------------------------------------------------------- */
/* Centered page intro — shared by the location and about pages */
.location-intro,
.page-intro {
  padding-block: 96px 64px;
  text-align: center;
}

.location-intro .rule,
.page-intro .rule {
  margin-inline: auto;
}

.location-intro p,
.page-intro p {
  max-width: 620px;
  margin-inline: auto;
  font-size: 1.0625rem;
}

.map-section {
  padding-bottom: 96px;
}

.map-frame {
  border: 1px solid var(--border);
}

.map-frame iframe {
  width: 100%;
  height: 480px;
  border: 0;
}

/* Address + directions link row beneath the map */
.map-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 32px;
}

.map-address address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--stone);
}

/* --------------------------------------------------------------------------
   13. About page
   -------------------------------------------------------------------------- */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-bottom: 112px;
}

/* Image placeholder — swap for a real photograph of the property/hosts */
.about-media {
  aspect-ratio: 4 / 3;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--stone); /* on cream bg-secondary — see stone-light note */
}

.about-body h2 {
  margin-bottom: 8px;
}

.about-body p + p {
  margin-top: 16px;
}

@media (max-width: 860px) {
  .about-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-block: 64px 40px;
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.site-footer .brand-name {
  color: var(--footer-text-bright);
}

.site-footer .brand-sub {
  color: var(--footer-text);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav a {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--footer-text);
  transition: color 0.25s ease;
}

.footer-nav a:hover {
  color: var(--footer-text-bright);
}

.footer-contact {
  font-size: 0.875rem;
  font-style: normal;
  line-height: 2;
}

.footer-contact a {
  color: var(--footer-text-bright);
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(184, 179, 166, 0.2);
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: var(--footer-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Language switcher on the dark footer: light trigger, menu opens upward.
   The menu itself keeps its light bordered styling. */
.site-footer .lang-switch-trigger {
  color: var(--footer-text);
}

.site-footer .lang-switch-trigger:hover,
.site-footer .lang-switch-trigger[aria-expanded="true"] {
  color: var(--footer-text-bright);
}

.site-footer .lang-switch-menu {
  top: auto;
  bottom: calc(100% + 10px);
}

/* --------------------------------------------------------------------------
   15. RTL (Arabic) overrides — applied via dir="rtl" on <html>
   Flexbox, grid, and the logical properties used above (inset-inline-start,
   border-inline-start, padding-inline) flip automatically under dir="rtl";
   this block covers what doesn't flip on its own.
   -------------------------------------------------------------------------- */

/* Letter-spacing breaks connected Arabic script — reset it everywhere the
   brand system applies it. (Harmless for any Latin placeholder text still
   present on Arabic pages.) */
[dir="rtl"] .eyebrow,
[dir="rtl"] .btn,
[dir="rtl"] .brand-sub,
[dir="rtl"] .site-nav a:not(.btn),
[dir="rtl"] .room-meta,
[dir="rtl"] .stat-label,
[dir="rtl"] .footer-nav a,
[dir="rtl"] .footer-bottom,
[dir="rtl"] .footer-contact,
[dir="rtl"] .link-arrow,
[dir="rtl"] .lang-switch-trigger,
[dir="rtl"] .skip-link,
[dir="rtl"] .room-media,
[dir="rtl"] .hero-media::after,
[dir="rtl"] .experience-media,
[dir="rtl"] .about-media {
  letter-spacing: normal;
}