/* =========================================================
   TUMLOS FARM LAND RESORT — Core Design System
   Claymorphism / Luxury Eco-Resort theme
   Tokens first, then shared components, then utilities.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Cormorant:ital,wght@0,500;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- Light mode palette (from brief 2.1) ---- */
  --bg:#F9F6EE;
  --surface:#F3EFE6;
  --surface-2:#EDE7D9;
  --gold:#C5A059;
  --gold-strong:#B08D46;
  --teal:#288B9E;
  --text:#2C2A29;
  --text-muted:#6B655F;
  --border-soft:rgba(44,42,41,0.08);

  /* clay shadow tints — light */
  --clay-hi: rgba(255,250,235,0.75);
  --clay-hi-gold: rgba(197,160,89,0.28);
  --clay-lo: rgba(44,72,72,0.16);

  --radius-clay: 24px;
  --radius-clay-sm: 18px;
  --radius-pill: 999px;

  --ease-clay: cubic-bezier(.34,1.56,.64,1);
  --dur-clay: 280ms;

  --font-head:'Playfair Display', 'Cormorant', serif;
  --font-body:'Inter', -apple-system, sans-serif;

  --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-20:1.25rem;
  --fs-28:1.75rem; --fs-40:2.5rem; --fs-56:3.5rem;

  --status-pending:#C5A059;
  --status-confirmed:#288B9E;
  --status-muted:#A69C8E;

  --font-scale: 1;
  --max-w: 1240px;
}

[data-theme="dark"]{
  --bg:#121D1A;
  --surface:#1C2A26;
  --surface-2:#213330;
  --gold:#D4AF37;
  --gold-strong:#E7C558;
  --teal:#38A3B8;
  --text:#F4F1EA;
  --text-muted:#A0A8A5;
  --border-soft:rgba(244,241,234,0.08);

  --clay-hi: rgba(212,175,55,0.16);
  --clay-hi-gold: rgba(212,175,55,0.22);
  --clay-lo: rgba(0,0,0,0.38);

  --status-pending:#D4AF37;
  --status-confirmed:#38A3B8;
  --status-muted:#7C8683;
}

/* ---- High contrast (accessibility option 3) — still on-brand ---- */
[data-contrast="high"]{
  --text: var(--theme-hc-text, #0B0A09);
  --text-muted:#3A3632;
  --border-soft: currentColor;
}
[data-theme="dark"][data-contrast="high"]{
  --text:#FFFFFF;
  --text-muted:#D9DED9;
  --bg:#08110E;
  --surface:#152420;
}
[data-contrast="high"] .clay{ box-shadow:0 0 0 2px var(--gold-strong), 6px 6px 0 var(--clay-lo); }

/* ---- Reduce motion (accessibility option 4) ---- */
[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

@media (prefers-reduced-motion: reduce){
  html:not([data-motion="keep"]) *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:calc(16px * var(--font-scale)); }
body{
  margin:0;
  background:
    radial-gradient(ellipse at top, rgba(197,160,89,0.05), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s ease, color .4s ease;
}
/* subtle linen/paper texture beneath clay shapes (brief 1.2) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(44,42,41,0.015) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(44,42,41,0.015) 0 1px, transparent 1px 3px);
}
[data-theme="dark"] body::before{ opacity:.35; background-image:
    repeating-linear-gradient(0deg, rgba(244,241,234,0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(244,241,234,0.02) 0 1px, transparent 1px 3px);
}

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.2; margin:0 0 .5em; color:var(--text); }
h1{ font-size:clamp(2.2rem, 5vw, var(--fs-56)); }
h2{ font-size:clamp(1.6rem, 3.4vw, var(--fs-40)); }
h3{ font-size:var(--fs-28); }
/* 1.1 Editorial justification — descriptive body copy reads like a print
   magazine column; single-line paragraphs are unaffected by design. */
p{ margin:0 0 1em; color:var(--text); text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto; }
.no-justify, .eyebrow, .field-hint, .muted.no-justify, figcaption, .badge, button p{ text-align:left; hyphens:none; }
.muted{ color:var(--text-muted); }
a{ color:var(--teal); }
img{ max-width:100%; display:block; }

.container{ max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.eyebrow{ font-family:var(--font-body); letter-spacing:.14em; text-transform:uppercase; font-size:var(--fs-12); color:var(--gold-strong); font-weight:700; }

[hidden]{ display:none !important; }

/* Visually-hidden but screen-reader accessible */
.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; }

/* Focus states — always visible (brief accessibility requirement) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--teal); outline-offset:3px; border-radius:8px;
}

/* =========================================================
   CLAYMORPHISM CORE — cards, buttons, pills, inputs
   ========================================================= */
.clay{
  background:var(--surface);
  border-radius:var(--radius-clay);
  box-shadow:
    -8px -8px 18px var(--clay-hi),
    10px 10px 22px var(--clay-lo);
  border:1px solid var(--border-soft);
  transition: transform var(--dur-clay) var(--ease-clay), box-shadow var(--dur-clay) var(--ease-clay);
}
.clay--sm{ border-radius:var(--radius-clay-sm); }
.clay--flat{ box-shadow:-4px -4px 10px var(--clay-hi), 5px 5px 12px var(--clay-lo); }
.clay-pressed, .clay:active{
  box-shadow: inset -6px -6px 14px var(--clay-hi), inset 6px 6px 16px var(--clay-lo) !important;
  transform:translateY(1px);
}
/* Interactive clay surfaces (cards, tiles) get the same spring lift + dual glow. */
[tabindex] .clay, .clay[role="button"], a.clay, button.clay,
.feature-tile.clay, .team-card, .cabin-card, .gallery-item, .eco-badge, .beauty-tile{
  transition: transform 480ms var(--ease-clay), box-shadow 480ms var(--ease-clay);
}
.feature-tile.clay:hover, .team-card:hover, .cabin-card:hover, .gallery-item:hover, .eco-badge:hover, .beauty-tile:hover{
  transform:translateY(-5px);
  box-shadow:-9px -9px 20px var(--clay-hi), 10px 10px 24px var(--clay-lo), 0 10px 26px -10px rgba(40,139,158,.35), 0 8px 22px -12px rgba(197,160,89,.4);
}

/* 1.2 Advanced claymorphism — dual-tone gold + teal tactile shadows, a
   spring-like overshoot on hover, and a squeeze-then-release press. */
@keyframes clay-squeeze{ 0%{transform:scale(1);} 40%{transform:scale(.94);} 100%{transform:scale(1) translateY(-3px);} }
.btn{
  position:relative;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-16);
  border:none; cursor:pointer; padding:16px 30px; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--surface); color:var(--text);
  box-shadow:-7px -7px 16px var(--clay-hi), 8px 8px 18px var(--clay-lo), 0 0 0 rgba(197,160,89,0);
  transition: transform 480ms var(--ease-clay), box-shadow 480ms var(--ease-clay);
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:-9px -9px 20px var(--clay-hi), 10px 10px 24px var(--clay-lo), 0 6px 22px -6px rgba(40,139,158,.45), 0 6px 20px -8px rgba(197,160,89,.4);
}
.btn:active{
  animation:clay-squeeze 480ms var(--ease-clay);
  box-shadow:inset -5px -5px 11px var(--clay-hi), inset 5px 5px 12px var(--clay-lo), 0 0 18px rgba(197,160,89,.35);
}
[data-motion="reduce"] .btn:active{ animation:none; }
.btn-primary{ background:linear-gradient(155deg, var(--gold-strong), var(--gold)); color:#241d0f; box-shadow:-7px -7px 16px var(--clay-hi-gold), 8px 8px 20px var(--clay-lo); }
.btn-primary:hover{ box-shadow:-9px -9px 20px var(--clay-hi-gold), 10px 10px 24px var(--clay-lo), 0 8px 26px -8px rgba(40,139,158,.55), 0 8px 20px -10px rgba(197,160,89,.55); }
[data-theme="dark"] .btn-primary{ color:#1A1502; }
.btn-ghost{ background:transparent; box-shadow:none; color:var(--teal); padding:14px 20px; }
.btn-ghost:hover{ text-decoration:underline; transform:none; }
.btn-sm{ padding:10px 18px; font-size:var(--fs-14); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

.pill{
  border-radius:var(--radius-pill); background:var(--surface); padding:8px 18px;
  box-shadow:-4px -4px 10px var(--clay-hi), 5px 5px 12px var(--clay-lo);
  font-weight:600; font-size:var(--fs-14); border:1px solid var(--border-soft);
  cursor:pointer; color:var(--text); transition:all var(--dur-clay) var(--ease-clay);
}
.pill[aria-pressed="true"], .pill.is-active{
  background:linear-gradient(155deg, var(--gold-strong), var(--gold)); color:#241d0f;
}

label{ font-weight:600; font-size:var(--fs-14); display:block; margin-bottom:8px; }
.field{ margin-bottom:20px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="password"], .field input[type="date"], .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:var(--fs-16); color:var(--text);
  padding:14px 18px; border-radius:var(--radius-clay-sm); border:1px solid var(--border-soft);
  background:var(--surface);
  box-shadow: inset -3px -3px 8px var(--clay-hi), inset 3px 3px 8px var(--clay-lo);
  transition:box-shadow .2s ease;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ box-shadow: inset -2px -2px 6px var(--clay-hi), inset 2px 2px 6px var(--clay-lo), 0 0 0 3px rgba(40,139,158,.35); outline:none; }
.field-hint{ font-size:var(--fs-12); color:var(--text-muted); margin-top:6px; }
.field-hint.is-error{ color:#B4552E; }

.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; font-size:var(--fs-14); }
.switch input{ position:absolute; opacity:0; width:1px;height:1px; }
.switch .track{ width:46px; height:26px; border-radius:var(--radius-pill); background:var(--surface); box-shadow:inset -3px -3px 6px var(--clay-hi), inset 3px 3px 6px var(--clay-lo); position:relative; transition:background .2s; }
.switch .track::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--gold); transition:transform .25s var(--ease-clay); box-shadow:0 2px 4px rgba(0,0,0,.25); }
.switch input:checked + .track::after{ transform:translateX(20px); }
.switch input:checked + .track{ background:var(--surface-2); }

/* Star rating */
.star-input{ display:inline-flex; gap:4px; direction:ltr; }
.star-input button{ background:none; border:none; cursor:pointer; font-size:1.6rem; line-height:1; padding:2px; color:var(--border-soft); }
.star-input button.is-filled, .star-input button:hover, .star-input button:focus-visible{ color:var(--gold); }
.stars-display{ color:var(--gold); letter-spacing:2px; }

/* Modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(18,29,26,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:200; opacity:0; pointer-events:none; transition:opacity var(--dur-clay) ease; }
.modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
.modal{ position:relative; background:var(--surface); border-radius:var(--radius-clay); max-width:640px; width:100%; max-height:88vh; overflow:auto; padding:32px; box-shadow:-10px -10px 24px var(--clay-hi), 14px 14px 30px var(--clay-lo); transform:scale(.92) translateY(10px); transition:transform var(--dur-clay) var(--ease-clay); }
.modal-backdrop.is-open .modal{ transform:scale(1) translateY(0); }
/* Claymorphic close button — a solid circle so it stays visible over any
   photo or backdrop behind it, with the same tactile hover/press feel as
   every other round button on the site (theme toggle, nav burger, etc). */
.modal-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:40px; height:40px; border-radius:50%; padding:0;
  background:var(--surface); border:1px solid var(--border-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; line-height:1; color:var(--text);
  box-shadow:-4px -4px 10px var(--clay-hi), 5px 5px 12px var(--clay-lo);
  transition:transform 420ms var(--ease-clay), box-shadow 420ms var(--ease-clay);
}
.modal-close:hover{ transform:translateY(-2px) rotate(90deg); box-shadow:-5px -5px 12px var(--clay-hi), 7px 7px 16px var(--clay-lo), 0 6px 16px -6px rgba(197,160,89,.4); }
.modal-close:active{ animation:clay-squeeze 480ms var(--ease-clay); box-shadow:inset -3px -3px 8px var(--clay-hi), inset 3px 3px 8px var(--clay-lo) !important; }
[data-motion="reduce"] .modal-close:hover{ transform:none; }
[data-motion="reduce"] .modal-close:active{ animation:none; }

/* Toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface); color:var(--text); padding:14px 24px; border-radius:var(--radius-pill); box-shadow:-6px -6px 14px var(--clay-hi), 8px 8px 18px var(--clay-lo); opacity:0; transition:all var(--dur-clay) var(--ease-clay); z-index:400; font-weight:600; }
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =========================================================
   NAV — the original top bar layout, with claymorphism
   pushed further: bigger tactile bulge, spring press
   feedback, and a slightly bolder brand mark.
   ========================================================= */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:18px 24px; pointer-events:none; }
.site-header > *{ pointer-events:auto; }
.nav-wrap{ max-width:var(--max-w); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; transition:transform 420ms var(--ease-clay); }
.brand:hover{ transform:translateY(-2px); }
.brand-mark{ width:44px; height:44px; border-radius:14px; background:linear-gradient(155deg, var(--gold-strong), var(--gold)); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:1.2rem; color:#241d0f; box-shadow:-5px -5px 11px var(--clay-hi-gold), 6px 6px 15px var(--clay-lo); flex-shrink:0; transition:box-shadow 420ms var(--ease-clay); }
.brand:hover .brand-mark{ box-shadow:-6px -6px 14px var(--clay-hi-gold), 8px 8px 18px var(--clay-lo), 0 6px 16px -6px rgba(40,139,158,.4); }
.brand-word{ font-family:var(--font-head); font-weight:700; font-size:1.08rem; letter-spacing:.03em; }
.brand-sub{ display:block; font-family:var(--font-body); font-size:.6rem; letter-spacing:.16em; color:var(--text-muted); text-transform:uppercase; font-weight:600; }

/* The real logo, cropped to a circle. The artwork has a wide cream margin
   around its ring, so the image is scaled up a little inside the circle. */
.brand-logo-btn{ background:none; border:none; padding:0; cursor:pointer; border-radius:50%; }
.logo-circle{ display:block; aspect-ratio:1; border-radius:50%; overflow:hidden; background:#F5EEDF; padding:0; }
.logo-circle img{ width:100%; height:100%; object-fit:cover; transform:scale(1.22); }
.brand-logo{ width:56px; height:56px; flex-shrink:0; border:1px solid var(--border-soft); box-shadow:-5px -5px 11px var(--clay-hi-gold), 6px 6px 15px var(--clay-lo); transition:box-shadow 420ms var(--ease-clay); }
.brand:hover .brand-logo{ box-shadow:-6px -6px 14px var(--clay-hi-gold), 8px 8px 18px var(--clay-lo), 0 6px 16px -6px rgba(40,139,158,.4); }

/* Logo popup — compact, readable, and fully visible on common screen sizes. */
.logo-modal{ padding:12px; overflow-y:auto; align-items:center; }
.logo-modal .modal{
  width:min(460px, 100%); max-width:460px; max-height:calc(100dvh - 24px);
  overflow-y:auto; overscroll-behavior:contain; text-align:center;
  padding:clamp(16px, 3vh, 26px) clamp(18px, 4vw, 30px) clamp(16px, 2.5vh, 24px);
}
.logo-modal-mark{ width:clamp(104px, 23vh, 156px); max-width:42vw; margin:0 auto clamp(8px, 1.5vh, 14px); box-shadow:-8px -8px 18px var(--clay-hi-gold), 10px 10px 24px var(--clay-lo); }
.logo-modal .eyebrow{ text-align:center; margin:0 0 4px; font-size:clamp(.68rem, 1.6vh, .78rem); }
.logo-modal h3{ margin:0 0 clamp(8px, 1.6vh, 14px); font-size:clamp(1.35rem, 3.2vh, 1.8rem); line-height:1.12; }
.logo-modal p{ text-align:justify; text-align-last:left; hyphens:none; margin:0 0 clamp(8px, 1.5vh, 13px); font-size:clamp(.84rem, 1.8vh, .98rem); line-height:1.45; }
.logo-modal p:last-child{ margin-bottom:0; color:var(--gold-strong); font-weight:600; text-align:center; text-align-last:center; }
@media(max-height:700px){
  .logo-modal .modal{padding:12px 18px 14px}
  .logo-modal-mark{width:88px;margin-bottom:7px}
  .logo-modal h3{font-size:1.25rem;margin-bottom:7px}
  .logo-modal p{font-size:.82rem;line-height:1.35;margin-bottom:7px}
}
@media(max-width:420px){
  .logo-modal{padding:8px}
  .logo-modal .modal{max-height:calc(100dvh - 16px);padding:14px 16px}
  .logo-modal-mark{width:clamp(88px, 18vh, 128px);max-width:38vw}
  .logo-modal p{font-size:.84rem;line-height:1.38}
}
.logo-modal.is-open .logo-modal-mark{ animation:logo-pop 700ms var(--ease-clay) both; }
.logo-modal.is-open .logo-modal-line{ animation:logo-line 600ms ease both; }
.logo-modal.is-open .logo-modal-line:nth-of-type(1){ animation-delay:.18s; }
.logo-modal.is-open h3.logo-modal-line{ animation-delay:.28s; }
.logo-modal.is-open .logo-modal-line:nth-of-type(2){ animation-delay:.4s; }
.logo-modal.is-open .logo-modal-line:nth-of-type(3){ animation-delay:.55s; }
.logo-modal.is-open .logo-modal-line:nth-of-type(4){ animation-delay:.7s; }
@keyframes logo-pop{ from{ opacity:0; transform:scale(.6) rotate(-12deg); } to{ opacity:1; transform:none; } }
@keyframes logo-line{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
[data-motion="reduce"] .logo-modal .logo-modal-mark, [data-motion="reduce"] .logo-modal .logo-modal-line{ animation:none !important; }

.nav-pill{ display:none; }
@media(min-width:900px){
  .nav-pill{ display:flex; align-items:center; gap:2px; background:var(--surface); border-radius:var(--radius-pill); padding:7px; box-shadow:-7px -7px 15px var(--clay-hi), 9px 9px 20px var(--clay-lo); border:1px solid var(--border-soft); }
  .nav-pill a{ display:flex; align-items:center; gap:7px; text-decoration:none; color:var(--text); font-weight:600; font-size:var(--fs-14); padding:10px 16px; border-radius:var(--radius-pill); transition:all 420ms var(--ease-clay); position:relative; }
  .nav-pill a svg{ flex-shrink:0; }
  .nav-pill a:hover{ background:var(--surface-2); transform:translateY(-1px); }
  .nav-pill a:active{ animation:clay-squeeze 480ms var(--ease-clay); }
  .nav-pill a[aria-current="page"]{ background:linear-gradient(155deg, var(--gold-strong), var(--gold)); color:#241d0f; box-shadow:-3px -3px 8px var(--clay-hi-gold), 4px 4px 10px var(--clay-lo); }
}
.nav-actions{ display:flex; align-items:center; gap:10px; }
.theme-toggle{ width:44px; height:44px; border-radius:50%; border:1px solid var(--border-soft); background:var(--surface); box-shadow:-4px -4px 10px var(--clay-hi), 6px 6px 14px var(--clay-lo); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text); transition:transform 420ms var(--ease-clay), box-shadow 420ms var(--ease-clay); }
.theme-toggle:hover{ transform:translateY(-2px) rotate(-8deg); box-shadow:-5px -5px 12px var(--clay-hi), 7px 7px 16px var(--clay-lo), 0 6px 16px -6px rgba(197,160,89,.4); }
.theme-toggle:active, .nav-burger:active{ animation:clay-squeeze 480ms var(--ease-clay); box-shadow:inset -3px -3px 8px var(--clay-hi), inset 3px 3px 8px var(--clay-lo) !important; }
.nav-burger{ width:44px; height:44px; border-radius:50%; border:1px solid var(--border-soft); background:var(--surface); box-shadow:-4px -4px 10px var(--clay-hi), 6px 6px 14px var(--clay-lo); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 420ms var(--ease-clay), box-shadow 420ms var(--ease-clay); }
.nav-burger:hover{ transform:translateY(-2px); }
@media(min-width:900px){ .nav-burger{ display:none; } }

.mobile-nav{ position:fixed; inset:0; background:rgba(18,29,26,.5); backdrop-filter:blur(3px); z-index:150; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.mobile-nav.is-open{ opacity:1; pointer-events:auto; }
.mobile-nav-panel{ position:absolute; top:0; right:0; bottom:0; width:min(320px,84vw); background:var(--surface); padding:28px 24px; box-shadow:-10px 0 30px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .35s var(--ease-clay); display:flex; flex-direction:column; gap:6px; }
.mobile-nav.is-open .mobile-nav-panel{ transform:translateX(0); }
.mobile-nav-panel a{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:600; padding:14px 12px; border-radius:14px; font-size:1.05rem; }
.mobile-nav-panel a[aria-current="page"]{ background:var(--surface-2); color:var(--gold-strong); }
.mobile-nav-close{ align-self:flex-end; background:none; border:none; cursor:pointer; margin-bottom:10px; }

/* body padding so the fixed top bar never overlaps content (except full-bleed hero pages) */
body:not(.no-header-pad){ padding-top:92px; }

/* =========================================================
   FOOTER — organic wave lead-in + a floating clay "island"
   instead of a flat 3-column bar (brief Section 6).
   ========================================================= */
.site-footer{ background:transparent; padding:0 0 34px; margin-top:40px; position:relative; }
.footer-wave{ display:block; width:100%; line-height:0; margin-bottom:-2px; }
.footer-wave svg{ width:100%; height:70px; display:block; }
.footer-wave path{ fill:var(--surface); }

.footer-island{ padding:44px 40px 30px; margin:0 20px; border-radius:40px; }
@media(max-width:620px){ .footer-island{ margin:0 10px; padding:34px 22px 24px; } }

.footer-grid{ display:grid; gap:32px; grid-template-columns:1.4fr 1fr 1fr; }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-family:var(--font-body); font-size:var(--fs-14); text-transform:uppercase; letter-spacing:.08em; color:var(--gold-strong); margin-bottom:14px; }
.footer-grid a{ display:flex; align-items:center; gap:8px; color:var(--text-muted); text-decoration:none; padding:4px 0; font-size:var(--fs-14); }
.footer-grid a:hover{ color:var(--teal); }
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{ width:40px; height:40px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; box-shadow:-3px -3px 8px var(--clay-hi), 4px 4px 10px var(--clay-lo); padding:0; transition:transform 420ms var(--ease-clay); }
.footer-social a:hover{ transform:translateY(-3px) scale(1.06); }

/* micro-functions row: newsletter / weather / quick-book */
.footer-micro{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:34px 0; }
@media(max-width:860px){ .footer-micro{ grid-template-columns:1fr; } }
.footer-micro-card{ padding:22px; }
.footer-micro-card h4{ display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:var(--fs-14); text-transform:uppercase; letter-spacing:.06em; color:var(--gold-strong); margin-bottom:12px; }

.weather-widget{ display:flex; align-items:center; gap:14px; }
.weather-widget .temp{ font-family:var(--font-head); font-size:1.7rem; font-weight:700; color:var(--gold-strong); }
.weather-widget .desc{ font-size:var(--fs-12); color:var(--text-muted); }

.quickbook-toggle{ width:100%; }
.quickbook-form{ margin-top:14px; display:none; gap:10px; }
.quickbook-form.is-open{ display:grid; grid-template-columns:1fr; }
.quickbook-form .field{ margin-bottom:0; }
.quickbook-form .btn{ grid-column:1 / -1; }

.footer-bottom{ margin-top:30px; padding-top:20px; border-top:1px solid var(--border-soft); display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:var(--fs-12); color:var(--text-muted); }

/* =========================================================
   ACCESSIBILITY WIDGET (Section 9)
   ========================================================= */
.a11y-widget{ position:fixed; right:22px; bottom:22px; z-index:300; display:flex; flex-direction:column; align-items:center; gap:12px; }
.a11y-main{ width:60px; height:60px; border-radius:50%; background:linear-gradient(155deg, var(--gold-strong), var(--gold)); border:none; cursor:pointer; box-shadow:-6px -6px 14px var(--clay-hi-gold), 8px 8px 20px var(--clay-lo); color:#241d0f; font-size:1.5rem; display:flex; align-items:center; justify-content:center; transition:transform var(--dur-clay) var(--ease-clay), box-shadow var(--dur-clay) var(--ease-clay); animation:a11y-breathe 3.2s ease-in-out infinite; }
[data-theme="dark"] .a11y-main{ color:#1A1502; }
[data-motion="reduce"] .a11y-main{ animation:none; }
@keyframes a11y-breathe{ 0%,100%{ box-shadow:-6px -6px 14px var(--clay-hi-gold), 8px 8px 20px var(--clay-lo);} 50%{ box-shadow:-6px -6px 20px var(--clay-hi-gold), 8px 8px 30px var(--clay-lo);} }
.a11y-main:hover{ transform:scale(1.08) translateY(-2px); box-shadow:-8px -8px 18px var(--clay-hi-gold), 10px 10px 24px var(--clay-lo), 0 8px 20px -8px rgba(40,139,158,.45); }
.a11y-main:active{ animation:clay-squeeze 480ms var(--ease-clay); box-shadow:inset -5px -5px 11px var(--clay-hi-gold), inset 5px 5px 12px var(--clay-lo) !important; }
.a11y-menu{ display:flex; flex-direction:column; gap:10px; opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:all var(--dur-clay) var(--ease-clay); }
.a11y-widget.is-open .a11y-menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.a11y-opt{ position:relative; width:50px; height:50px; border-radius:50%; background:var(--surface); border:1px solid var(--border-soft); box-shadow:-4px -4px 10px var(--clay-hi), 6px 6px 14px var(--clay-lo); cursor:pointer; font-size:1.15rem; display:flex; align-items:center; justify-content:center; color:var(--gold-strong); transition:transform 420ms var(--ease-clay), box-shadow 420ms var(--ease-clay); }
/* Keep accessibility controls clearly visible on dark foliage and in both themes. */
.a11y-opt svg{ color:var(--gold-strong); stroke:currentColor; }
.a11y-opt:not([aria-pressed="true"]) .tip{ color:var(--bg); }
.a11y-opt:hover{ transform:translateY(-2px); box-shadow:-6px -6px 14px var(--clay-hi), 8px 8px 18px var(--clay-lo), 0 6px 16px -6px rgba(197,160,89,.4); }
.a11y-opt:active{ animation:clay-squeeze 480ms var(--ease-clay); box-shadow:inset -3px -3px 8px var(--clay-hi), inset 3px 3px 8px var(--clay-lo) !important; }
.a11y-opt[aria-pressed="true"]{ background:linear-gradient(155deg, var(--gold-strong), var(--gold)); color:#241d0f; box-shadow:-3px -3px 7px var(--clay-hi-gold), 4px 4px 9px var(--clay-lo); }
.a11y-opt .tip{ position:absolute; right:62px; top:50%; transform:translateY(-50%); background:var(--text); color:var(--bg); font-size:.72rem; font-weight:600; padding:6px 10px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.a11y-opt:hover .tip, .a11y-opt:focus-visible .tip{ opacity:1; }
.a11y-fs-controls{ display:flex; gap:4px; }
.a11y-fs-controls .a11y-opt{ width:38px; height:38px; font-size:.85rem; }

/* =========================================================
   Utility grids / cards used across pages
   ========================================================= */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.feature-tile{ padding:30px 26px; text-align:left; }
.feature-tile .icon{ width:52px; height:52px; border-radius:16px; background:linear-gradient(155deg, var(--gold-strong), var(--gold)); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; color:#241d0f; }

.skeleton{ background:linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size:400% 100%; animation:skeleton-loading 1.4s ease infinite; border-radius:var(--radius-clay-sm); }
@keyframes skeleton-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
[data-motion="reduce"] .skeleton{ animation:none; }

.empty-state{ text-align:center; padding:48px 24px; color:var(--text-muted); }
.empty-state .icon{ font-size:2.4rem; margin-bottom:10px; }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--radius-pill); font-size:var(--fs-12); font-weight:700; }
.badge--pending{ background:color-mix(in srgb, var(--status-pending) 20%, transparent); color:var(--status-pending); }
.badge--confirmed, .badge--approved{ background:color-mix(in srgb, var(--status-confirmed) 20%, transparent); color:var(--status-confirmed); }
.badge--muted, .badge--cancelled, .badge--rejected{ background:color-mix(in srgb, var(--status-muted) 30%, transparent); color:var(--status-muted); }

/* Month calendar (calendar.js) — shared by the booking page and Dashboard */
.cal{ max-width:420px; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-title{ font-family:var(--font-head); font-size:1.1rem; }
.cal-nav{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border-soft); background:var(--surface); color:var(--text); font-size:1.2rem; line-height:1; cursor:pointer; box-shadow:-3px -3px 8px var(--clay-hi), 4px 4px 10px var(--clay-lo); }
.cal-nav[disabled]{ opacity:.35; cursor:not-allowed; }
.cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.cal-week{ margin-bottom:6px; font-size:var(--fs-12); font-weight:700; color:var(--text-muted); text-align:center; }
.cal-day{ position:relative; aspect-ratio:1; border-radius:14px; border:1px solid var(--border-soft); background:var(--surface); color:var(--text); font-family:var(--font-body); font-weight:600; font-size:var(--fs-14); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:0; box-shadow:-2px -2px 6px var(--clay-hi), 3px 3px 7px var(--clay-lo); transition:transform 300ms var(--ease-clay); }
.cal-day:hover:not([disabled]){ transform:translateY(-2px); }
.cal-day.is-today{ border-color:var(--teal); }
.cal-day.is-selected{ background:linear-gradient(155deg, var(--gold-strong), var(--gold)); color:#241d0f; }
.cal-day.is-past{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.cal-day.is-full{ background:var(--surface-2); color:var(--text-muted); box-shadow:none; cursor:not-allowed; }
.cal-day.is-full .cal-num{ text-decoration:line-through; }
.cal-tag{ font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#B4552E; }
.cal-count{ position:absolute; top:3px; right:4px; min-width:16px; padding:0 4px; border-radius:8px; background:var(--teal); color:#fff; font-size:.6rem; font-weight:700; line-height:16px; }

/* Google Map card (map.js) — used wherever the location is shown */
.map-card{ display:grid; grid-template-columns:1.6fr 1fr; overflow:hidden; padding:0; }
@media(max-width:760px){ .map-card{ grid-template-columns:1fr; } }
.map-embed{ position:relative; min-height:340px; }
.map-embed iframe, .map-canvas{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.map-info{ padding:28px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
.map-pin-btn{ position:absolute; left:12px; top:12px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:var(--radius-pill); border:1px solid var(--border-soft); background:var(--surface); color:var(--text); font-family:var(--font-body); font-weight:700; font-size:var(--fs-12); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.map-pin-card{ position:absolute; left:12px; top:58px; z-index:2; max-width:min(280px, calc(100% - 24px)); padding:14px 16px; border-radius:16px; background:var(--surface); color:var(--text); border:1px solid var(--border-soft); box-shadow:0 8px 24px rgba(0,0,0,.28); display:flex; flex-direction:column; gap:4px; font-size:.82rem; line-height:1.45; animation:map-card-in 360ms var(--ease-clay); }
.map-pin-card strong{ font-family:var(--font-head); font-size:1rem; }
.map-pin-vibe{ color:var(--text-muted); }
.map-pin-card--api{ position:static; box-shadow:none; border:none; padding:4px; background:#fff; color:#2C2A29; animation:none; }
.map-pin-card--api .map-pin-vibe{ color:#6B655F; }
.map-marker-label{ transform:translateY(26px); font-weight:700; text-shadow:0 0 3px #fff, 0 0 3px #fff; }
@keyframes map-card-in{ from{ opacity:0; transform:translateY(8px) scale(.96); } }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s var(--ease-clay); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
[data-motion="reduce"] .reveal{ opacity:1; transform:none; }

@media(max-width:760px){ .section{ padding:60px 0; } }

/* Keep the Home footer consistent with the shared footer used on other pages. */
body:has(#site-footer) #site-footer{width:100%;max-width:none;margin-inline:auto}
body:has(#site-footer) .site-footer{width:100%;max-width:100%;box-sizing:border-box}


/* More readable, clearly grouped story-of-the-name content. */
.logo-story-copy{display:grid;gap:clamp(8px,1.4vh,12px);text-align:left;}
.logo-modal .logo-story-copy p{margin:0;text-align:justify;text-align-last:left;line-height:1.48;}
.logo-modal .logo-story-copy .logo-story-origin{padding:12px 14px;border:1px solid var(--border-soft);border-radius:14px;background:var(--surface-2);color:var(--text);text-align:left;text-align-last:left;}
.logo-story-label{display:block;margin:0 0 4px;color:var(--gold-strong);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;text-align:left;}
.logo-story-copy strong{color:var(--gold-strong);font-weight:700;}
@media(max-height:700px){.logo-story-copy{gap:7px}.logo-modal .logo-story-copy p{font-size:.81rem;line-height:1.34}.logo-modal .logo-story-copy .logo-story-origin{padding:8px 10px}}


/* Professional, clearly structured logo story modal. */
.logo-modal .modal{width:min(100%,560px);max-height:calc(100dvh - 28px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gold,#C5A059) transparent;padding:clamp(18px,3.2vw,30px)}
.logo-modal .logo-modal-mark{display:block;width:clamp(82px,15vh,118px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;overflow:hidden}
.logo-modal .logo-story-copy{gap:14px;margin-top:4px}
.logo-modal .logo-story-copy .logo-story-intro{font-size:1rem;line-height:1.6;color:var(--text)}
.logo-modal .logo-story-section{padding:13px 15px;border:1px solid var(--border-soft);border-radius:15px;background:var(--surface-2)}
.logo-modal .logo-story-section .logo-story-label{margin:0 0 6px;font-size:.72rem;letter-spacing:.12em}
.logo-modal .logo-story-section p{margin:0;font-size:.94rem;line-height:1.58;text-align:left;text-align-last:left}
.logo-modal .logo-story-section.logo-story-origin{background:linear-gradient(135deg,rgba(197,160,89,.12),var(--surface-2));border-color:rgba(197,160,89,.35)}
@media(max-width:520px){.logo-modal .modal{padding:16px 14px 18px}.logo-modal .logo-story-copy{gap:9px}.logo-modal .logo-story-section{padding:10px 11px}.logo-modal .logo-story-copy .logo-story-intro{font-size:.9rem}.logo-modal .logo-story-section p{font-size:.86rem;line-height:1.45}}

/* Keep the light/dark control's sun/moon optically centered in both themes. */
.theme-toggle{display:grid;place-items:center;padding:0;line-height:0;transition-duration:120ms!important}
#theme-toggle-icon{display:grid;place-items:center;width:100%;height:100%;line-height:0;margin:0;padding:0}
#theme-toggle-icon svg{display:block;width:20px;height:20px;margin:auto;transform:none}
/* Keep navigation feedback snappy without changing its layout or colors. */
.site-header a,.site-header button,.nav-pill,.mobile-nav-panel{transition-duration:140ms}