/* =========================================================
   MARIS TERRA B&B - FOGLIO CONDIVISO (assets/site.css)
   Design system delle pagine interne: token, reset, nav, menu
   mobile, tipografia, bottoni, footer, accessibilita.
   Palette e font presi 1:1 da index.html (oro #d9a648, sabbia
   #f4ecdb, terracotta #c25e3a, ink #1a1410, Montserrat + Caveat).
   Lo caricano appartamento, dintorni, blog e i loro articoli;
   ogni famiglia aggiunge poi il suo foglio specifico.
========================================================= */

:root {
  --oro: #d9a648;
  --oro-2: #a6823c;
  --oro-3: #8b6a2f;
  --crema: #fbf7ee;
  --sabbia: #f4ecdb;
  --sabbia-2: #e8ddc4;
  --bianco: #faf8f5;
  --terra: #c25e3a;
  --terra-2: #a04527;
  --verde: #3d5532;
  --ink: #1a1410;
  --ink-80: rgba(26,20,16,0.82);
  --ink-60: rgba(26,20,16,0.58);
  --ink-40: rgba(26,20,16,0.38);
  --ink-20: rgba(26,20,16,0.18);
  --ink-10: rgba(26,20,16,0.10);
  --font-sans: 'Montserrat', Helvetica, Arial, sans-serif;
  --font-script: 'Caveat', cursive;
  --gutter: clamp(20px, 4vw, 64px);
  /* altezza della barra: logo + padding. Ci si appoggiano i padding degli hero,
     lo sticky della card prenotazione e lo scroll-margin delle ancore. */
  --logo-h: 126px;
  --nav-h: calc(var(--logo-h) + 20px);
  --max: 1440px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x: clip (mai hidden): hidden disattiva silenziosamente position:sticky */
html, body { margin: 0 !important; padding: 0 !important; max-width: 100vw !important; width: 100% !important; overflow-x: clip !important; }
body { font-family: var(--font-sans); background: var(--bianco); color: var(--ink); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
main { display: block; width: 100%; }
img { max-width: 100%; display: block; background: var(--sabbia); }
img.broken { background: var(--sabbia-2); }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
::selection { background: var(--oro); color: var(--ink); }
.container { max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(60px, 9vw, 100px) 0; }

/* ---------- NAV (solida, come le pagine interne) ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 10px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: rgba(250,248,245,0.96); backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--ink-10); transition: all 0.4s var(--ease); }
.nav-brand { display: flex; align-items: center; gap: 12px; }
/* il logo e' un'immagine QUADRATA di 400x400: gli attributi width/height del
   markup devono rispettarne il rapporto, se no la pagina salta al caricamento */
.nav-brand img { height: var(--logo-h); width: var(--logo-h); background: none; }
/* su schermi stretti una barra da 146px si mangerebbe un sesto del telefono */
@media (max-width: 980px) { :root { --logo-h: 90px; } }
@media (max-width: 520px) { :root { --logo-h: 72px; } }

/* le ancore non devono finire sotto la barra fissa */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.nav-menu { display: flex; gap: 30px; list-style: none; align-items: center; }
.nav-menu a { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-80); transition: color 0.3s; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--oro-2); }
.nav-cta { background: var(--oro); color: var(--ink); padding: 11px 22px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.3s, color 0.3s; white-space: nowrap; }
.nav-cta:hover { background: var(--oro-2); color: var(--crema); }
@media (max-width: 980px) { .nav-menu { display: none; } }
@media (max-width: 420px) { .nav-cta { padding: 10px 14px; font-size: 10.5px; } }

/* ---------- TIPOGRAFIA CONDIVISA ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; font-weight: 700; color: var(--oro-2); margin-bottom: 16px; }
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--oro); }
.h-display { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.h-display em, .h-display i { font-family: var(--font-script); font-style: normal; font-weight: 500;
  color: var(--terra); letter-spacing: 0; font-size: 1.16em; line-height: 0.9; }
.lead { margin-top: 20px; max-width: 62ch; font-size: 16px; line-height: 1.75; color: var(--ink-80); }
.breadcrumb { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-60); margin-bottom: 20px; transition: color 0.3s; }
.breadcrumb:hover { color: var(--terra); }

/* ---------- BOTTONI ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 6px;
  font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.3s var(--ease); }
.btn-fill { background: var(--oro); color: var(--ink); }
.btn-fill:hover { background: var(--oro-2); color: var(--crema); }
.btn-line { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-20); }
.btn-line:hover { background: var(--ink); color: var(--crema); border-color: var(--ink); }
.btn-line-inverse { background: transparent; color: var(--crema); border: 1.5px solid rgba(251,247,238,0.4); }
.btn-line-inverse:hover { background: rgba(251,247,238,0.14); border-color: var(--crema); }
/* freccia disegnata via CSS: mai un "→" anche nel testo, altrimenti si vedono due frecce */
.btn .arrow, .go .arrow { width: 18px; height: 1.5px; background: currentColor; position: relative; flex-shrink: 0; }
.btn .arrow::after, .go .arrow::after { content: ''; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.3s var(--ease); }
.btn:hover .arrow::after, a:hover .go .arrow::after { transform: rotate(45deg) translate(2px, -2px); }
.go { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- FIGURE FOTO LUOGHI ---------- */
.article-figure { margin: 34px 0 8px; }
.article-figure img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 8px; }
.article-figure figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink-60); font-style: italic; }
.article-figure figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }


/* ---------- ACCESSIBILITA ---------- */
.skip-link { position: fixed; top: -140px; left: 12px; z-index: 300; background: var(--ink); color: var(--crema);
  padding: 14px 24px; border-radius: 0 0 6px 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; transition: top 0.2s ease; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--oro-3) !important; outline-offset: 3px !important; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- MENU MOBILE (sotto i 980px .nav-menu e' display:none) ---------- */
.nav-burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  border: 1px solid var(--ink-20); border-radius: 6px; background: transparent; flex-shrink: 0; }
.nav-burger i { display: block; width: 18px; height: 1.6px; background: var(--ink); position: relative;
  transition: background 0.2s var(--ease); }
.nav-burger i::before, .nav-burger i::after { content: ''; position: absolute; left: 0; width: 18px; height: 1.6px;
  background: var(--ink); transition: top 0.3s var(--ease), transform 0.3s var(--ease); }
.nav-burger i::before { top: -6px; }
.nav-burger i::after { top: 6px; }
body.menu-open .nav-burger i { background: transparent; }
body.menu-open .nav-burger i::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-burger i::after { top: 0; transform: rotate(-45deg); }

/* visibility:hidden, non solo transform: altrimenti i link del menu chiuso
   restano raggiungibili col tasto Tab anche su desktop (DIFETTI-TEMPLATE #5) */
.nav-drawer { position: fixed; inset: 0; z-index: 99; background: var(--crema);
  padding: calc(var(--nav-h) + 20px) var(--gutter) 40px; display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; transform: translateY(-100%); visibility: hidden; pointer-events: none;
  transition: transform 0.5s var(--ease), visibility 0s 0.5s; }
body.menu-open .nav-drawer { transform: translateY(0); visibility: visible; pointer-events: auto;
  transition: transform 0.5s var(--ease), visibility 0s 0s; }
.nav-drawer a { padding: 17px 2px; border-bottom: 1px solid var(--ink-10); font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink); transition: color 0.25s; }
.nav-drawer a:hover, .nav-drawer a[aria-current="page"] { color: var(--oro-2); }
.nav-drawer .drawer-cta { margin-top: 28px; border-bottom: 0; text-align: center; background: var(--oro);
  color: var(--ink); border-radius: 6px; padding: 16px 22px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; }
.nav-drawer .drawer-cta:hover { background: var(--oro-2); color: var(--crema); }
.nav-drawer .drawer-meta { margin-top: auto; padding-top: 30px; border-bottom: 0; font-size: 12px;
  font-weight: 500; letter-spacing: 0; color: var(--ink-60); line-height: 1.9; }
.nav-drawer .drawer-meta b { display: block; color: var(--ink); font-size: 13px; }
/* sotto i 980px i figli visibili di .nav diventano 3 (logo, CTA, hamburger):
   con space-between la CTA finirebbe al centro. Il margine automatico la
   riaggancia al gruppo di destra, senza toccare il desktop. */
@media (max-width: 980px) { .nav-burger { display: inline-flex; } .nav-cta { margin-left: auto; } }
@media (min-width: 981px) { .nav-drawer { display: none; } }