/* === FONT FACE === */
@import "./base/fonts.css";

/* === DESIGN TOKENS (Figma) === */
@import "./tokens/variables.css";        /* <- copia di variables.final.css */
@import "./base/typography-map.css";     /* <- questo file */


/* === BASE === */
@import "./base/sections.css";
@import "./base/layout.css";
@import "./base/reset.css";


/* === SECTIONS === */
@import "./sections/hero.css";
@import "./sections/cta_hero.css";
@import "./sections/title.css";
@import "./sections/cards.css";
@import "./sections/text-image.css";
@import "./sections/blog.css";
@import "./sections/editorial_split.css";
@import "./sections/editorial_hybrid.css";
@import "./sections/manifesto_center.css";
@import "./sections/itineraries_slider.css";
@import "./sections/hero_slider_cards.css";
@import "./sections/cards_duo.css";
@import "./sections/editorial_duo.css";
@import "./sections/hero_cover.css";
@import "./sections/hero_header.css";
@import "./sections/mission-split.css";
@import "./sections/team_grid.css";
@import "./sections/how_we_work.css";
@import "./sections/intro-center.css";
@import "./sections/band-2col.css";
@import "./sections/feature-media.css";
@import "./sections/form-cf7.css";
@import "./sections/contact-block.css";
@import "./sections/itinerari-archive.css";
@import "./sections/content-blocks.css";
@import "./sections/journal.css";
@import "./sections/blog-single.css";
@import "./sections/404.css";
@import "./sections/fade-in.css";
@import "./sections/photo_gallery.css";





@import "./base.css";
@import "./layout.css";
@import "./components/button.css";
@import "./components/header.css";
@import "./components/footer.css";

*{box-sizing:border-box} html,body{overflow-x:hidden} body{margin:0}
.container{width:min(1400px,calc(100% - 40px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid rgba(0,0,0,.08)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.site-nav__list{list-style:none;display:flex;gap:35px;margin:0;padding:0}
.site-nav__list a{text-decoration:none}
.site-nav--desktop,.site-header__cta--desktop{display:none}
.nav-toggle{display:inline-flex}

@media (min-width:960px){
  .site-nav--desktop,.site-header__cta--desktop{display:block}
  .nav-toggle{display:none}
  .site-nav__list--mobile{display:none}
}
.nav-panel[hidden]{display:none}
.site-footer{border-top:1px solid rgba(0,0,0,.08);padding:40px 0 20px}
.site-footer__bottom{margin-top:18px;padding-top:18px;border-top:1px solid rgba(0,0,0,.08)}


/* Desktop/mobile visibility */
.site-nav--desktop,
.site-header__cta--desktop { display: none; }

.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

@media (min-width: 960px) {
  .site-nav--desktop,
  .site-header__cta--desktop { display: block; }

  .nav-toggle { display: none; }
}

/* Panel */
/* Panel overrides now live in components/header.css — keep only the toggle icon here */

/* Hamburger icon */
.nav-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
}

.nav-toggle__icon {
  width: 26px;
  height: 2px;
  background: currentColor;
  display: block;
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background: currentColor;
}

.nav-toggle__icon::before { top: -7px; }
.nav-toggle__icon::after { top: 7px; }

/* Optional: lock scroll class */
html.nav-open { overflow: hidden; }

.posts-grid{
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:1025px){
  .posts-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:576px) and (max-width:1024px){
  .posts-grid{ grid-template-columns:repeat(2,1fr); }
}

.post-card__link{ display:block; text-decoration:none; }
.post-card__media{ margin-bottom:12px; overflow:hidden; border-radius:12px; }
.post-card__title{ margin:0; }
.post-card__meta{ opacity:.7; margin:0 0 8px; }

.post-single__featured{ margin-top:18px; overflow:hidden; border-radius:16px; }
.post-single__subtitle{ opacity:.8; margin-top:10px; }
.wysiwyg p{ line-height:1.7; }
.wysiwyg h2, .wysiwyg h3{ margin-top:1.2em; }

/* =========================================================
   SITE FOOTER — clean & mock-aligned
   (usa solo variabili tema, no !important)
========================================================= */

.site-footer{
  background: var(--color-sottolapalma-palma-900);
  color: var(--color-testo-bianco);
}

/* linee top/bottom */
.site-footer__top{
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* layout grid */
.site-footer__grid{
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 56px;          /* mock */
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;                    /* mock */
}

@media (max-width: 960px){
  .site-footer__grid{
    grid-template-columns: 1fr;
    padding: 48px 20px;
    gap: 40px;
  }
}

/* logo */
.site-footer__logo{
  width: 300px;                 /* mock */
  height: auto;
  display: block;
  margin: 0 0 40px;
}

/* claim */
.site-footer__claim{
  margin: 0 0 44px;             /* mock */
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: rgba(255,255,255,.72);
}

/* newsletter */
.site-footer__newsletter{
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 42px; /* mock */
  align-items: center;
  gap: 12px;                        /* mock */
  max-width: 520px;                 /* mock */
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(255,255,255,.70);
}

.site-footer__newsletter input{
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,.85);

  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

.site-footer__newsletter input::placeholder{
  color: rgba(255,255,255,.65);
}

.site-footer__newsletter button{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-testo-bianco);
  display: grid;
  place-items: center;
}

.site-footer__newsletter button span{
  font-size: 34px; /* mock */
  line-height: 1;
  transform: translateY(-2px);
}

/* follow */
.site-footer__follow{
  margin-top: 64px; /* mock */
}

.site-footer__follow-title{
  font-family: var(--font-bodysmall);
  font-weight: var(--font-weight-bodysmall);
  font-size: var(--font-size-bodysmall);
  line-height: var(--line-height-bodysmall);
  letter-spacing: var(--letter-spacing-bodysmall);
  color: rgba(255,255,255,.70);
  margin: 0 0 20px;
}

.site-footer__social{
  display: flex;
  gap: 18px; /* mock */
  flex-wrap: wrap;
}

.site-footer__social a{
  font-family: var(--font-bodysmall);
  font-weight: var(--font-weight-bodysmall);
  font-size: var(--font-size-bodysmall);
  line-height: var(--line-height-bodysmall);
  letter-spacing: var(--letter-spacing-bodysmall);
  color: rgba(255,255,255,.35);
  text-decoration: none;
}

.site-footer__social a:hover{
  color: rgba(255,255,255,.65);
}

/* colonna destra wrapper */
.site-footer__right{
  padding-top: 6px; /* mock */
}

/* contatti (WYSIWYG) */
.site-footer__contacts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin: 0 0 44px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: rgba(255,255,255,.75);
}

.site-footer__contact-col strong{
  color: #fff;
}

.site-footer__contacts p{
  margin: 0 0 12px;
}

.site-footer__contacts p:last-child{
  margin-bottom: 0;
}

.site-footer__contacts a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.45);
  text-underline-offset: 4px;
}

/* links */
.site-footer__links-title{
  margin: 0 0 18px;            /* mock */
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: .12em;        /* mock */
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.site-footer__menu{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 46px;               /* mock */
  max-width: 520px;
}

@media (max-width: 960px){
  .site-footer__menu{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site-footer__menu a{
  font-family: var(--font-bodysmall);
  font-weight: var(--font-weight-bodysmall);
  font-size: var(--font-size-bodysmall);
  line-height: var(--line-height-bodysmall);
  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: rgba(255,255,255,.85);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.28);
  text-underline-offset: 6px;
}

.site-footer__menu a:hover{
  text-decoration-color: rgba(255,255,255,.7);
}

/* disclaimer */
.site-footer__disclaimer{
  margin-top: 56px; /* mock */
  max-width: 620px;
  font-family: var(--font-testo-testo-xs);
  font-weight: var(--font-weight-testo-testo-xs);
  font-size: var(--font-size-testo-testo-xs);
  line-height: var(--line-height-testo-testo-xs);
  letter-spacing: var(--letter-spacing-testo-testo-xs);
  color: rgba(255,255,255,.60);
}

.site-footer__disclaimer p{
  margin: 0;
}

.site-footer__disclaimer a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 4px;
}

/* bottom bar */
.site-footer__bottom{
  padding: 26px 0; /* mock */
}

.site-footer__bottom-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  align-items: baseline; /* mock */
  justify-content: space-between;
  gap: 18px;
}

@media (max-width: 960px){
  .site-footer__bottom-inner{
    padding: 0 20px;
    flex-direction: column;
    align-items: flex-start;
  }
}

.site-footer__policies,
.site-footer__credits{
  font-family: var(--font-bodysmall);
  font-weight: var(--font-weight-bodysmall);
  font-size: var(--font-size-bodysmall);
  line-height: var(--line-height-bodysmall);
  letter-spacing: var(--letter-spacing-bodysmall);
  color: rgba(255,255,255,.80);
}

.site-footer__policies a,
.site-footer__credits a{
  color: inherit;
  text-decoration: none;
}

.site-footer__policies a:hover,
.site-footer__credits a:hover{
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.8);
  text-underline-offset: 4px;
}

/* =========================================
   FOOTER — LEFT COLUMN fine tuning (mock)
========================================= */

/* 1) struttura header logo+wordmark su una riga */
.site-footer__brand{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.site-footer__brand-mark{
  width: 92px;        /* icona palma */
  flex: 0 0 auto;
  transform: translateY(2px);
}

.site-footer__brand-mark img{
  width: 100%;
  height: auto;
  display: block;
}

.site-footer__brand-wordmark{
  width: 240px;       /* “SOTTO LA PALMA” */
  flex: 0 0 auto;
}

.site-footer__brand-wordmark img{
  width: 100%;
  height: auto;
  display: block;
}

/* 2) claim più “soft” e più distante dal logo */
.site-footer__claim{
  margin: 34px 0 42px;
  color: rgba(255,255,255,.70);
}

/* 3) newsletter: più corta e più “netta” come nel mock */
.site-footer__newsletter{
  max-width: 360px;                 /* nel mock è più corta */
  padding-bottom: 12px;
  border-bottom-width: 2px;
  border-bottom-color: rgba(255,255,255,.72);
  column-gap: 14px;
}

.site-footer__newsletter input{
  color: rgba(255,255,255,.78);
}

.site-footer__newsletter input::placeholder{
  color: rgba(255,255,255,.55);
}

.site-footer__newsletter button span{
  font-size: 32px;
  transform: translateY(-1px);
}

/* 4) blocco follow più in basso e più “leggero” */
.site-footer__follow{
  margin-top: 84px;                 /* nel mock sta più giù */
}

.site-footer__follow-title{
  color: rgba(255,255,255,.60);
  margin-bottom: 18px;
}

.site-footer__social{
  gap: 22px;
}

.site-footer__social a{
  color: rgba(255,255,255,.32);
}

.site-footer__social a:hover{
  color: rgba(255,255,255,.60);
}

.site-footer__text {
    margin: 0px 0px 40px;
}


/* ===========================
   HEADER (overlay + sticky)
=========================== */

:root{
  --header-h: 110px;
  --header-h-sticky: 88px;
  --header-pad-x: 56px;
}

@media (max-width: 960px){
  :root{
    --header-h: 90px;
    --header-h-sticky: 74px;
    --header-pad-x: 20px;
  }
}

/* Header fixed — overlay (transparent on dark heroes) */
.site-header[data-site-header]{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 999;
  background: #fff;
  color: var(--color-testo-nero);
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: background-color .75s cubic-bezier(.22,1,.36,1), height .75s cubic-bezier(.22,1,.36,1), border-color .75s cubic-bezier(.22,1,.36,1), box-shadow .75s cubic-bezier(.22,1,.36,1), color .75s cubic-bezier(.22,1,.36,1);
}

/* Stato sticky */
.site-header[data-site-header].is-sticky{
  height: var(--header-h-sticky);
  background: #fff;
  color: var(--color-testo-nero);
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Inner layout */
.site-header__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  /*padding: 0 var(--header-pad-x);*/
}

/* Logo */
.site-header__brand{
  display: flex;
  align-items: center;
}

.site-header__logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Logo: versione chiara (overlay) e scura (sticky) */
.site-header__logo img{
  height: 56px;
  width: auto;
  display: block;
  transition: height .25s ease, opacity .25s ease;
}

/* Light logo: visibile su header trasparente */
.site-header .site-header__logo-light{
  display: block;
}

/* Dark logo: nascosto di default */
.site-header .site-header__logo-dark{
  display: none;
}

/* Sticky: mostra il dark, nascondi il light */
.site-header.is-sticky .site-header__logo-light{
  display: none;
}

.site-header.is-sticky .site-header__logo-dark{
  display: block;
}

.site-header.is-sticky .site-header__logo img{
  height: 44px;
}

/* NAV desktop */
.site-nav--desktop{
  flex: 1;
  display: flex;
  justify-content: right;
}

.site-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 44px;
}

/* Link nav */
.site-nav__list a{
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: 18px;
  line-height: 1;
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-testo-nero);
  text-decoration: none;
  transition: color .75s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}

.site-nav__list a:hover{ opacity: .75; }

/* Sticky: testo scuro */
.site-header.is-sticky .site-nav__list a{
  color: var(--color-testo-nero);
  opacity: .9;
}

/* Active (facoltativo) */
.site-nav__list .current-menu-item > a{
  opacity: 1;
}

/* CTA (se la vuoi tenere) */
.site-header__cta--desktop{
  display: flex;
  align-items: center;
}

/* Riduci altezza dei bottoni se sono troppo grossi */
.site-header.is-sticky .site-header__cta .c-btn{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Mobile: tieni il toggle visibile, e nascondi nav desktop se già fai così altrove */
@media (max-width: 960px){
  .site-nav--desktop{ display: none; }
}

/* ── Large screens (>14”) ──
   Header e container si allargano proporzionalmente
   mantenendo margini coerenti con i monitor più piccoli */

@media (min-width: 1440px){
  .site-header__inner.container{
    width: calc(100% - 112px);
    max-width: 1600px;
  }

  .site-footer__grid{
    max-width: 1600px;
    padding-left: 56px;
    padding-right: 56px;
  }

  .site-footer__bottom-inner{
    max-width: 1600px;
    padding-left: 56px;
    padding-right: 56px;
  }

  .site-nav__list{
    gap: 48px;
  }
}

@media (min-width: 1680px){
  .site-header__inner.container{
    width: calc(100% - 140px);
    max-width: 1760px;
  }

  .site-footer__grid{
    max-width: 1760px;
    padding-left: 70px;
    padding-right: 70px;
  }

  .site-footer__bottom-inner{
    max-width: 1760px;
    padding-left: 70px;
    padding-right: 70px;
  }

  .site-nav__list{
    gap: 52px;
  }
}

@media (min-width: 1920px){
  .site-header__inner.container{
    width: calc(100% - 180px);
    max-width: 1920px;
  }

  .site-footer__grid{
    max-width: 1920px;
    padding-left: 90px;
    padding-right: 90px;
  }

  .site-footer__bottom-inner{
    max-width: 1920px;
    padding-left: 90px;
    padding-right: 90px;
  }

  .site-nav__list{
    gap: 56px;
  }
}

/* Spacer (creato da JS) per evitare “salti” del layout sotto al fixed header */
.site-header-spacer{
  height: var(--header-h);
}

/* ── Footer & Header additional responsive ── */

@media (max-width: 1024px){
  .site-nav__list{ gap: 28px; }
  .site-nav__list a{ font-size: 16px; }
  .site-footer__grid{ gap: 48px; padding: 56px 40px; }
  .site-footer__menu{ gap: 14px 32px; }
}

@media (max-width: 768px){
  .site-footer__grid{ padding: 40px 16px; gap: 32px; }
  .site-footer__logo{ width: 220px; margin-bottom: 28px; }
  .site-footer__brand-mark{ width: 72px; }
  .site-footer__brand-wordmark{ width: 180px; }
  .site-footer__follow{ margin-top: 48px; }
  .site-footer__newsletter{ max-width: 100%; }
  .site-footer__disclaimer{ margin-top: 36px; }
  .site-footer__bottom-inner{ padding: 0 16px; }
  .site-nav__list{ gap: 28px; }
  .site-nav__list a{ font-size: 16px; }
}

@media (max-width: 576px){
  .site-footer__grid{ padding: 32px 12px; gap: 24px; }
  .site-footer__logo{ width: 180px; margin-bottom: 20px; }
  .site-footer__brand-mark{ width: 60px; }
  .site-footer__brand-wordmark{ width: 160px; }
  .site-footer__follow{ margin-top: 36px; }
  .site-footer__menu{ grid-template-columns: 1fr; gap: 12px; }
  .site-footer__claim{ margin: 24px 0 32px; }
  .site-footer__contacts{ margin-bottom: 28px; grid-template-columns: 1fr; }
  .site-header__logo img{ height: 44px; }
  .container{ width: min(1400px, calc(100% - 24px)); }
}

@media (max-width: 390px){
  .site-footer__grid{ padding: 24px 10px; }
  .site-footer__logo{ width: 160px; }
  .site-footer__brand{ gap: 12px; }
  .site-footer__bottom{ padding: 18px 0; }
  .site-header__logo img{ height: 40px; }
  .container{ width: min(1400px, calc(100% - 16px)); }
}