/* ===== Reset & Variabili ===== */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#62656a;
  --brand:#b6862c;     /* ocra principale */
  --brand-2:#e3b750;   /* ocra chiara */
  --border:#e5e7eb;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 10px 24px rgba(0,0,0,.06);
  --radius:14px;
  --container:1100px;

  /* Altezza header (mobile/desktop) */
  --header-h:64px;
}
@media (min-width:840px){
  :root{ --header-h:72px; }
}

html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* ===== Utility ===== */
.container{max-width:var(--container);margin-inline:auto;padding:clamp(12px,2vw,24px)}
.card{position:relative;z-index:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(14px,2vw,22px)}
.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}

/* ===== Header & Nav ===== */
/* Header sempre visibile e SOPRA a tutto */
header{
  position:sticky;
  top:0;
  z-index:10000;               /* sopra mappe/iframe e contenuti */
  background:#fff;             /* opaco su mobile */
  backdrop-filter:none;        /* niente blur su mobile */
  border-bottom:1px solid var(--border);
  min-height:var(--header-h);
}
@media (min-width:840px){
  header{
    background:rgba(255,255,255,.9); /* effetto vetro su desktop (se non lo vuoi, lascia #fff) */
    backdrop-filter:saturate(150%) blur(8px);
  }
}

.navbar{display:flex;align-items:center;gap:12px}
.logo{inline-size:42px;block-size:42px}
.brand{display:flex;align-items:center;gap:12px}
.brand-name{font-weight:700}

/* Lista nav */
.nav-list{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.nav-list a{display:block;padding:10px 12px;border-radius:10px}
.nav-list a:hover,.nav-list a:focus-visible{background:#f3f4f6}
.nav-list a.active{color:#7a5a12}

/* Lingue */
.lang{display:flex;gap:6px;margin-left:6px}
.lang button{appearance:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:6px;display:grid;place-items:center;cursor:pointer}
.lang button:focus-visible{outline:2px solid var(--brand)}
.lang img{inline-size:22px}

/* Burger */
.menu-toggle{margin-left:auto;appearance:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:10px;display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer}
.menu-toggle .bars{display:block;width:22px;height:2px;background:#111;position:relative}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#111;transition:transform .2s ease}
.menu-toggle .bars::before{top:-6px}
.menu-toggle .bars::after{top:6px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

/* Menu mobile (drawer) — ora parte ESATTAMENTE sotto l’header reale */
nav[data-mobile]{
  position:fixed;
  inset:var(--header-h) 0 auto 0;    /* <— top allineato all’altezza header */
  background:#fff;
  border-bottom:1px solid var(--border);
  transform:translateY(-120%);
  transition:transform .25s ease;
  box-shadow:var(--shadow);
  z-index:9999;                      /* sotto header, sopra contenuti */
}
nav[data-mobile].open{transform:translateY(0)}
nav[data-mobile] .inner{padding:10px}
nav[data-mobile] .nav-list{flex-direction:column}

/* Desktop */
@media (min-width:840px){
  .menu-toggle{display:none}
  nav[data-mobile]{position:static;transform:none;border:0;box-shadow:none;inset:auto}
  nav[data-mobile] .inner{padding:0}
  nav[data-mobile] .nav-list{flex-direction:row}
  .lang{margin-left:0}
  .navbar{justify-content:space-between}
}

/* ===== Hero ===== */
.hero{
  padding-block:clamp(24px,6vw,34px);
  background:linear-gradient(135deg,#fff5e2,#fff0cc); /* ocra soft */
}
.hero h1{margin:0 0 4px;font-size:clamp(1.5rem,3.3vw,2.3rem);line-height:1.15}
.hero p{margin:0 0 12px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--brand);color:#fff}

/* Spazio di ancoraggio quando si salta a sezioni */
.hero, main{scroll-margin-top:calc(var(--header-h) + 8px)}

/* ===== Main / Strutture comuni ===== */
main{padding-block:clamp(18px,3vw,28px)}

/* Sezioni “rooms” con testo + immagine */
.rooms .room-list{display:grid;gap:clamp(24px,3vw,36px);margin-bottom:clamp(24px,3vw,40px)}
.room{position:relative;z-index:0;border-radius:var(--radius)}
.room h3{margin:0 0 6px}
.room p{margin:0 0 6px}
@media (min-width:820px){.rooms .room-list{grid-template-columns:1.1fr .9fr}}

/* Tabelle generiche scrollabili (Prenota) */
.table-wrap{position:relative;z-index:0;overflow:auto;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.price-table{width:100%;border-collapse:collapse;min-width:560px}
.price-table th,.price-table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.price-table thead th{color:var(--brand);font-weight:700}

/* Contatti (Prenota) */
.contact-block{margin-top:clamp(24px,3vw,36px)}
.contact-list{list-style:none;display:grid;gap:clamp(14px,2vw,20px);padding:0;margin:clamp(10px,2vw,16px) 0 0;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.contact-icon{width:42px;height:42px;margin-right:12px;flex:0 0 auto}
.contact-list .card{display:flex;align-items:center;gap:12px}

/* Calendario (Prenota) */
.calendar{margin-top:clamp(24px,4vw,48px)}
.calendar-wrap{position:relative;z-index:0;aspect-ratio:4/3;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.calendar-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0}

/* Sezione “Dove siamo” */
.dove-siamo{position:relative;z-index:0;border:1px solid var(--border);border-radius:var(--radius);padding:clamp(14px,2vw,22px);box-shadow:var(--shadow);margin-block:clamp(24px,4vw,48px)}
.dove-siamo h3{margin-top:0}

/* Mappe generiche */
.map-wrap{position:relative;z-index:0;aspect-ratio:16/10;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0}

/* ===== Services (griglia icone) ===== */
.services-grid{display:grid;gap:clamp(18px,2.5vw,28px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:clamp(24px,3vw,36px)}
.service-icon{width:64px;height:64px;margin-bottom:10px}
.services-grid h3{margin:0 0 6px;color:var(--brand)}
.services-grid p{margin:0;color:var(--muted)}

/* ===== Check-in (card orari + regole) ===== */
.check-grid{display:grid;gap:clamp(18px,2.5vw,28px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:clamp(24px,3vw,36px)}
.schedule{margin:0 0 8px;display:grid;gap:10px}
.schedule dt{font-weight:600;color:var(--brand)}
.schedule dd{margin:0}
.rules{margin:0;padding-left:18px;line-height:1.6}
.muted{color:var(--muted)}

/* ===== Transport (Come raggiungerci) ===== */
.transport-card{position:relative;z-index:0;margin-block:clamp(20px,3vw,32px)}
.transport-header{position:relative;z-index:0;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.transport-icon{width:40px;height:40px;flex:0 0 auto}
.transport-grid{position:relative;z-index:0;display:grid;gap:clamp(14px,2.2vw,20px);grid-template-columns:1fr}
@media (min-width:860px){.transport-grid{grid-template-columns:1.05fr .95fr}}
.transport-text p{margin:0 0 8px}
.transport-text ul{margin:0 0 8px 18px}

/* ===== Footer ===== */
footer{border-top:1px solid var(--border);padding:18px;color:var(--muted)}

/* ===== Motion ===== */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}