/* ===========================
   Base design tokens
=========================== */
:root{
  --bg:#fbf7f2;
  --bg-soft:#f5efe8;
  --text:#3a2f29;
  --muted:#6b5f58;
  --brand:#d86f4a;
  --brand-600:#c55f3d;
  --surface:#ffffff;
  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.07);
  --max:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

.container{width:min(var(--max), 92%); margin-inline:auto}

/* ===========================
   Header
=========================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff8; /* translucent white */
  backdrop-filter:blur(8px);
  border-bottom:1px solid #e9dfd5;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0}

.site-header .brand{
  font-weight:600; letter-spacing:.2px;
  color:var(--text); text-decoration:none;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* force Inter */
}

.nav-links{display:flex; align-items:center; gap:22px}
.nav-links a{color:var(--text); text-decoration:none}

/* ===========================
   Language dropdown
=========================== */
.lang-menu{position:relative; margin-left:12px}
.lang-menu > summary{
  list-style:none; display:flex; align-items:center; gap:8px;
  border:1px solid #e3dad0; border-radius:999px; padding:.42rem .7rem;
  cursor:pointer; background:#fff; box-shadow:var(--shadow);
  transition:box-shadow .2s ease, background .2s ease;
}
.lang-menu > summary::-webkit-details-marker{display:none}
.lang-menu[open] > summary{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.lang-menu > summary svg{width:16px; height:16px; fill:none; stroke:#3a2f29; stroke-width:2}

.lang-menu ul{
  position:absolute; right:0; top:calc(100% + 6px);
  min-width:220px; background:#fff; border:1px solid #e8dfd6; border-radius:14px;
  padding:6px; margin:0; list-style:none; box-shadow:0 14px 32px rgba(0,0,0,.12); z-index:20;
}
.lang-menu li{margin:0; padding:0}
.lang-menu a{
  display:block; text-decoration:none; color:var(--text);
  padding:.55rem .7rem; border-radius:10px; transition:background .2s ease, color .2s ease;
}
.lang-menu a:hover, .lang-menu a:focus-visible{background:#f6f1eb; outline:none}
.lang-menu a[aria-selected="true"]{background:#f0ebe4; font-weight:600}
#lang-current{font-weight:600}

/* ===========================
   Burger
=========================== */
.hamburger{display:none; background:none; border:0; padding:8px}
.hamburger span{display:block; width:22px; height:2px; background:var(--text); margin:4px 0}

/* ===========================
   Buttons
=========================== */
.btn{
  display:inline-block; border:1px solid #d8cec3; padding:.7rem 1rem;
  border-radius:999px; text-decoration:none; cursor:pointer;
}
.btn.small{padding:.45rem .8rem; font-size:.95rem}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--shadow)}
.btn.primary:hover{background:var(--brand-600)}
.btn.ghost{background:transparent}

/* Improve accessibility focus */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid #eedfd6;
  outline-offset:2px;
  border-radius:10px;
}

/* ===========================
   Hero
=========================== */
.hero{position:relative; height:100svh; min-height:500px; isolation:isolate}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-overlay{position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center}
.hero-box{
  background-color:rgba(255,255,255,.75);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--text); border:1px solid rgba(0,0,0,.15);
  border-radius:14px; padding:2.2rem 3rem; max-width:820px;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.hero h1{
  font-family:"Playfair Display", serif;
  font-size:clamp(2.2rem, 4vw + 1rem, 4rem);
  margin:0 0 .3rem;
}
.lead{font-size:clamp(1.1rem, 1.4vw + .6rem, 1.6rem); margin:.2rem 0 .4rem; opacity:.95}
.sublead{opacity:.9; margin:0 0 1rem}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

/* ===========================
   Sections
=========================== */
.section{padding:60px 0}
.section.soft{background:var(--bg-soft)}
.section-title{
  font-family:"Playfair Display", serif;
  font-size:clamp(1.8rem, 2.2vw + 1rem, 2.8rem);
  margin:0 0 .4rem;
}
.section-kicker{color:var(--muted); margin:0 0 22px}
.center{text-align:center}

/* ===========================
   Retreat card
=========================== */
.card.retreat{
  display:grid; grid-template-columns:1.2fr 1fr; gap:24px;
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.card-media img{width:100%; height:100%; object-fit:cover; display:block}
.card-body{padding:20px}
.eyebrow{font-size:.85rem; color:var(--muted)}
.card-title{font-family:"Playfair Display", serif; font-size:1.6rem; margin:.2rem 0 .4rem}
.pill-list{display:flex; flex-wrap:wrap; gap:12px; padding:0; margin:14px 0 18px; list-style:none}
.pill-list li{padding:.4rem .8rem; border:1px solid #eadfd5; border-radius:999px}

/* ===========================
   Features
=========================== */
.features{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:24px}
.feature{background:var(--surface); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.feature-icon{font-size:1.4rem}
.feature-title{margin:.4rem 0 .2rem}

/* ===========================
   Gallery
=========================== */
.gallery{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:14px}
.gallery img{display:block; width:100%; height:220px; object-fit:cover; border-radius:14px; box-shadow:var(--shadow)}

/* ===========================
   Lightbox
=========================== */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; place-items:center; z-index:100}
.lightbox.open{display:grid}
.lightbox-img{max-width:min(92vw, 1200px); max-height:86vh; border-radius:10px}
.lightbox-close{
  position:absolute; top:14px; right:18px; font-size:2rem;
  background:transparent; color:#fff; border:0; cursor:pointer;
}

/* ===========================
   Location
=========================== */
.map-and-text{display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:center}
.map-embed{aspect-ratio:16/10; background:#e5e2dd; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.map-embed iframe{border:0; width:100%; height:100%}
.list{margin:.5rem 0 0 1rem}

/* ===========================
   Contact
=========================== */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; margin-top:10px}
.icon-list{list-style:none; padding:0; margin:0}
.icon-list li{display:flex; gap:8px; align-items:flex-start; margin:10px 0}
.note{margin-top:18px; background:var(--bg-soft); border:1px solid #e6dacf; padding:14px; border-radius:12px}
.contact-form{background:var(--surface); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.field{margin:10px 0}
.field.full{grid-column:1/-1}
.field label{display:block; font-weight:500; font-size:.95rem; color:var(--text)}
.field input,
.field textarea{
  width:100%; margin-top:6px; padding:.7rem .9rem;
  border:1px solid #e2d8ce; border-radius:12px; background:#fff;
}
.field input:focus,
.field textarea:focus{outline:2px solid #eedfd6; border-color:#d8cabe}
.hp{position:absolute; left:-9999px; opacity:0}
.form-status{min-height:1.4em; font-size:.95rem; color:var(--muted); margin:.4rem 0 0}
.btn.full{width:100%}

/* Booking form date error line */
#booking-date-error{color:#b42318; font-weight:500; margin-top:.5rem}

/* ===========================
   Footer
=========================== */
.site-footer{background:#3a2b22; color:#fff; margin-top:40px; padding:30px 0 10px}
.footer-grid{display:grid; grid-template-columns:1.1fr .9fr .8fr; gap:20px}
.footer-links a{display:block; color:#fff; text-decoration:none; opacity:.85; margin:.2rem 0}
.footer-links a:hover{opacity:1}
.copyright{font-size:.9rem; opacity:.75; padding-top:10px; border-top:1px solid rgba(255,255,255,.12); margin-top:14px}

/* ===========================
   Responsive
=========================== */
@media (max-width:980px){
  .card.retreat{grid-template-columns:1fr}
  .features{grid-template-columns:repeat(2, 1fr)}
  .map-and-text{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .gallery{grid-template-columns:repeat(2, 1fr)}
  .nav-links{display:none}
  .hamburger{display:block}
  .site-header.open .nav-links{
    display:flex; position:absolute; right:4%; top:56px;
    background:#fff; padding:12px 14px; border-radius:12px; box-shadow:var(--shadow)
  }
}

/* ===========================
   Utilities
=========================== */
.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}
.muted{color:var(--muted)}

/* ===========================
   Motion reduction
=========================== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ===========================
   3 months cal
=========================== */

  .cal.hidden { display: none; }
  .cal { margin-top: 12px; }
  .cal .month { display: inline-block; vertical-align: top; width: 300px; margin: 0 12px 12px 0; }
  .cal caption { text-align: left; font-weight: 600; padding: 6px 0; }
  .cal table { width: 100%; border-collapse: collapse; }
  .cal th, .cal td { width: 14.285%; text-align: center; padding: 4px; border: 1px solid #eee; font: 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
  .cal .dow th { background: #f8f8f8; font-weight: 600; }
  .cal .muted { color: #999; }
  .cal .booked { background: #fde7e7; color: #9a0000; }
  .cal .today { outline: 1px solid #444; }