/**
 * Design System — Dolce Vita Riviera
 * larivieradeifiori.com · Proposta v0.1 · 25 maggio 2026
 *
 * PALETTE: evoluzione della palette attuale verso un'estetica
 * Dolce Vita anni '50–'60, manifesti ENIT, Art Déco Riviera.
 * Stack tipografico: Bunny Fonts (mirror GDPR-safe di Google Fonts).
 */

/* ============================================================
   TOKENS — CSS Custom Properties
   ============================================================ */

:root {

  /* --- Colori principali (evoluzioni) --- */
  --lrf-mare:      #1B6DAA;   /* ex #0077B6 — Azzurro ENIT, più profondo/vintage */
  --lrf-cielo:     #87C7E8;   /* NUOVO — Cielo Riviera, mappa e sfondi morbidi */
  --lrf-rosso:     #C9362C;   /* NUOVO — Rosso Campari, urgenza/verified/CTA forte */
  --lrf-tramonto:  #E05D3D;   /* ex #E76F51 — Tramonto Ponente, più saturo */
  --lrf-oro:       #C09A2D;   /* ex #D4B97A — Oro Manifesto, badge Gold premium */
  --lrf-cipria:    #EEC9A3;   /* NUOVO — Cipria Vintage, hero sfondo e cards caldi */
  --lrf-pino:      #1E6045;   /* ex #2D6A4F — Verde Palma, più profondo */
  --lrf-sabbia:    #FAF4E8;   /* ex #F4EFE6 — Avorio Manifesto, bg principale */
  --lrf-ink:       #1C1815;   /* invariato — Inchiostro, nav/footer/testo */

  /* --- Font stack (Bunny Fonts — 3 famiglie web) ---
     <link href="https://fonts.bunny.net/css?family=bodoni-moda:400,400i,700|cormorant-garamond:400,400i,600|dm-sans:400,500&display=swap">
     I fonts dal PDF (Italiana, Poiret One, Gloock, Lora, Work Sans) sono i nomi originali;
     per il web usiamo i loro equivalenti Bunny più affidabili. */
  --lrf-font-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --lrf-font-heading: 'Cormorant Garamond', Georgia, serif;
  --lrf-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* --- Scale tipografica --- */
  --lrf-text-hero:   clamp(36px, 8vw, 72px);
  --lrf-text-h1:     clamp(28px, 5vw, 48px);
  --lrf-text-h2:     clamp(20px, 3vw, 32px);
  --lrf-text-h3:     20px;
  --lrf-text-body:   16px;
  --lrf-text-small:  13px;
  --lrf-text-label:  11px;

  /* --- Spaziature --- */
  --lrf-space-xs:  4px;
  --lrf-space-sm:  8px;
  --lrf-space-md:  16px;
  --lrf-space-lg:  24px;
  --lrf-space-xl:  40px;
  --lrf-space-2xl: 64px;

  /* --- Border radius --- */
  --lrf-radius-sm:   4px;
  --lrf-radius-md:   8px;
  --lrf-radius-lg:   16px;
  --lrf-radius-pill: 999px;

  /* --- Bottom bar mobile --- */
  --lrf-bottom-bar-height: 68px;
  --lrf-bottom-bar-bg:     var(--lrf-sabbia);
  --lrf-bottom-bar-border: rgba(28, 24, 21, 0.12);
  --lrf-bottom-bar-active: var(--lrf-mare);

  /* --- Nav desktop --- */
  --lrf-nav-bg:              var(--lrf-ink);
  --lrf-nav-text:            var(--lrf-sabbia);
  --lrf-nav-text-muted:      rgba(250, 244, 232, 0.45);
  --lrf-nav-active-underline: var(--lrf-oro);
  --lrf-nav-cta-bg:          var(--lrf-rosso);

  /* --- Footer GP v1.5 (invariato) --- */
  --lrf-footer-bg:      #0E0B08;
  --lrf-footer-verde:   #009246;
  --lrf-footer-bianco:  #FFFFFF;
  --lrf-footer-rosso:   #CE2B37;
}


/* ============================================================
   BOTTOM BAR — navigazione mobile app-like
   ============================================================ */

.lrf-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--lrf-bottom-bar-bg);
  border-top: 0.5px solid var(--lrf-bottom-bar-border);
  display: flex;
  align-items: flex-end;
  /* 8px padding top + safe area iOS (fallback 16px) */
  padding: 8px 0 max(env(safe-area-inset-bottom), 16px);
  height: calc(var(--lrf-bottom-bar-height) + env(safe-area-inset-bottom, 0px));
}

.lrf-bottom-bar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  text-decoration: none;
  color: #bbb;
  -webkit-tap-highlight-color: transparent;
}

.lrf-bottom-bar__icon {
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lrf-bottom-bar__label {
  font-family: var(--lrf-font-body);
  font-size: 10px;
  letter-spacing: 0.2px;
}

/* Stato attivo: pill colorata intorno all'icona */
.lrf-bottom-bar__item--active {
  color: var(--lrf-bottom-bar-active);
}

.lrf-bottom-bar__item--active .lrf-bottom-bar__icon {
  background: var(--lrf-bottom-bar-active);
  color: var(--lrf-sabbia);
  border-radius: 16px;
  padding: 3px 14px;
  font-size: 20px;
}

/* Offset contenuto sopra la bottom bar */
@media (max-width: 768px) {
  main,
  .lrf-main {
    padding-bottom: calc(
      var(--lrf-bottom-bar-height) + env(safe-area-inset-bottom, 0px)
    );
  }
}


/* ============================================================
   SPONSOR BADGES
   ============================================================ */

.lrf-badge {
  display: inline-block;
  font-family: var(--lrf-font-body);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 11px;
  border-radius: var(--lrf-radius-pill);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.lrf-badge--gold     { background: var(--lrf-oro);     color: var(--lrf-sabbia); }
.lrf-badge--silver   { background: #888888;             color: var(--lrf-sabbia); }
.lrf-badge--bronze   { background: #C07040;             color: var(--lrf-sabbia); }
.lrf-badge--verified { background: var(--lrf-pino);    color: var(--lrf-sabbia); }
.lrf-badge--bike     { background: var(--lrf-mare);    color: var(--lrf-sabbia); }


/* ============================================================
   BUTTONS
   ============================================================ */

.lrf-btn {
  display: inline-block;
  font-family: var(--lrf-font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--lrf-radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.15s;
  line-height: 1.2;
}

.lrf-btn:hover  { opacity: 0.9; }
.lrf-btn:active { opacity: 0.8; transform: scale(0.99); }

.lrf-btn--primary { background: var(--lrf-mare);   color: var(--lrf-sabbia); }
.lrf-btn--danger  { background: var(--lrf-rosso);  color: var(--lrf-sabbia); }
.lrf-btn--warm    { background: var(--lrf-tramonto); color: var(--lrf-sabbia); }

.lrf-btn--outline {
  background: transparent;
  color: var(--lrf-mare);
  border: 1.5px solid var(--lrf-mare);
}


/* ============================================================
   NAV DESKTOP
   ============================================================ */

.lrf-nav {
  background: var(--lrf-nav-bg) !important;  /* override any white from main.css */
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 56px;
  gap: 32px;
  
  
  z-index: 100;
  border-bottom: none !important;
  width: 100%;
  box-sizing: border-box;
}

.lrf-nav__logo {
  font-family: var(--lrf-font-display) !important;
  font-size: 18px !important;
  color: var(--lrf-nav-text) !important;
  text-decoration: none !important;
  letter-spacing: 0.005em !important;
  flex-shrink: 0;
  font-weight: 400 !important;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.lrf-nav__logo:hover { color: var(--lrf-oro) !important; }

.lrf-nav__links {
  display: flex;
  gap: 28px;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.lrf-nav__links li { list-style: none; }

.lrf-nav__link {
  font-family: var(--lrf-font-body) !important;
  font-size: 13px !important;
  color: var(--lrf-nav-text-muted) !important;
  text-decoration: none !important;
  padding: 18px 0 16px !important;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 150ms ease, border-color 150ms ease;
}
.lrf-nav__link:hover {
  color: var(--lrf-nav-text) !important;
  border-bottom-color: var(--lrf-oro);
}
.lrf-nav__link--active {
  color: var(--lrf-nav-text) !important;
  border-bottom-color: var(--lrf-nav-active-underline) !important;
}

.lrf-nav__cta {
  background: var(--lrf-nav-cta-bg) !important;
  color: var(--lrf-sabbia) !important;
  font-family: var(--lrf-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: var(--lrf-radius-pill) !important;
  text-decoration: none !important;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 150ms ease;
  border: none;
}
.lrf-nav__cta:hover { background: var(--lrf-tramonto) !important; }

/* Hamburger mobile */
.lrf-nav__hamburger {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  color: var(--lrf-nav-text);
  font-size: 22px;
  cursor: pointer;
  margin-left: auto;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .lrf-nav { padding: 0 16px; gap: 16px; }
  .lrf-nav__logo { font-size: 16px !important; }
  .lrf-nav__hamburger { display: inline-flex; }
  .lrf-nav__links {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--lrf-nav-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
    gap: 0;
    border-top: 1px solid rgba(250, 244, 232, 0.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    display: none;
  }
  .lrf-nav__links.is-open { display: flex; }
  .lrf-nav__link {
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(250, 244, 232, 0.08);
  }
  .lrf-nav__cta { display: none; }
}


/* ============================================================
   FOOTER GP v1.5
   ============================================================ */

.lrf-footer-stripe {
  display: flex;
  height: 4px;
}
.lrf-footer-stripe > span:nth-child(1) { flex: 1; background: var(--lrf-footer-verde);  }
.lrf-footer-stripe > span:nth-child(2) { flex: 1; background: var(--lrf-footer-bianco); }
.lrf-footer-stripe > span:nth-child(3) { flex: 1; background: var(--lrf-footer-rosso);  }

.lrf-footer {
  background: var(--lrf-footer-bg);
  padding: 32px 24px;
  color: #9e9a96;
  font-family: var(--lrf-font-body);
  font-size: 13px;
  line-height: 1.8;
}

.lrf-footer a {
  color: var(--lrf-mare);
  text-decoration: none;
}

.lrf-footer a:hover {
  text-decoration: underline;
}


/* ============================================================
   POI CARD
   ============================================================ */

.lrf-poi-card {
  border: 0.5px solid rgba(28, 24, 21, 0.12);
  border-radius: var(--lrf-radius-lg);
  overflow: hidden;
  background: var(--lrf-sabbia);
}

.lrf-poi-card__thumb {
  background: var(--lrf-cipria);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lrf-poi-card__badge-sponsor {
  position: absolute;
  top: 10px;
  right: 10px;
}

.lrf-poi-card__body {
  padding: 12px 14px;
}

.lrf-poi-card__title {
  font-family: var(--lrf-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--lrf-ink);
  margin: 0 0 4px;
}

.lrf-poi-card__meta {
  font-family: var(--lrf-font-body);
  font-size: 12px;
  color: #6a6460;
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ============================================================
   FONT MAPPING — applica le 3 famiglie ai selettori reali
   ============================================================ */

/* HERO / display: titoli pagina, h1, logo testo */
.hero h1,
.hero__title,
.section__title,
h1,
.lrf-nav__logo,
.nav-logo,
.nav__logo,
.lrf-poi-card__title {
  font-family: var(--lrf-font-display) !important;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* HEADING: h2, h3, sub-titoli, card titles */
.hero__subtitle,
h2, h3,
.card__title,
.faq-item > summary {
  font-family: var(--lrf-font-heading) !important;
  font-weight: 600;
}

/* BODY / UI: tutto il resto */
body,
p, li, a, button, input, select, textarea,
.nav-link, .nav__link, .lrf-nav__link,
.btn, .lrf-btn,
.badge, .lrf-badge,
.label, .meta, .lrf-poi-card__meta,
.lrf-nav__cta {
  font-family: var(--lrf-font-body) !important;
}

/* ============================================================
   NAV — striscia oro sotto header + fix mobile
   ============================================================ */

.lrf-nav {
  position: relative;
}
.lrf-nav::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: linear-gradient(to right,
    var(--lrf-footer-verde) 0% 33.33%,
    var(--lrf-footer-bianco) 33.33% 66.66%,
    var(--lrf-footer-rosso) 66.66% 100%);
  z-index: 101;
}

/* Mobile: nasconde lrf-nav__links (usa hamburger toggle) e mostra bottom-bar */
@media (max-width: 768px) {
  /* CTA nav nascosto su mobile (è già nel design v0.1) */
  .lrf-nav__cta { display: none !important; }

  /* Vecchie nav-links pattern → nascondi (sostituite da bottom bar) */
  .nav-links:not(.is-open):not(.open),
  .nav__links:not(.is-open):not(.open) {
    display: none !important;
  }

  /* Padding per non finire sotto bottom bar */
  main, .lrf-main, body > main {
    padding-bottom: calc(var(--lrf-bottom-bar-height, 68px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 769px) {
  .lrf-bottom-bar { display: none !important; }
}

/* ============================================================
   COLORI NUOVI: card thumb cipria, mappa cielo, CTA rosso
   ============================================================ */

.card-thumb,
.poi-thumb,
.hotel-image-placeholder,
.listing-thumb,
.lrf-poi-card__thumb {
  background-color: var(--lrf-cipria, #EEC9A3);
}

.leaflet-container {
  background: var(--lrf-cielo, #87C7E8);
}

.btn-cta,
.lrf-btn--danger,
[class*="btn-insert"],
[class*="btn-add"] {
  background-color: var(--lrf-rosso, #C9362C) !important;
  color: var(--lrf-sabbia) !important;
}


/* ============================================================
   COERENZA GLOBALE — override forti per pagine con stile inline
   (comuni, servizi, satellite — Agent 3-6 originali)
   ============================================================ */

/* Forza font globali su body e elementi base */
html, body {
  font-family: var(--lrf-font-body) !important;
  background: var(--lrf-sabbia, #FAF4E8) !important;
  color: var(--lrf-ink, #1C1815);
}

/* Headings sempre Bodoni Moda */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--lrf-font-display) !important;
  color: var(--lrf-ink, #1C1815);
}

/* Sub-headings (h2/h3) tono leggermente più chiaro (Cormorant) */
h2, h3 { font-family: var(--lrf-font-heading) !important; font-weight: 600; }

/* Hero subtitle + claim + lead — Cormorant */
.hero__subtitle, .hero__cta-prompt, .section__lead, .claim, .lede {
  font-family: var(--lrf-font-heading) !important;
}

/* Pulisci classi cardish con font fissi */
.card, .card__title, .card__meta, .card__excerpt,
.km-tag, .breadcrumb, .nav-link,
.distance-line, .servizi-list, .cta-btn,
.editorial p, article p {
  font-family: var(--lrf-font-body) !important;
}

/* Color override per accent links che usavano #0077B6 */
a { color: var(--lrf-mare, #1B6DAA); }
a:hover { color: var(--lrf-tramonto, #E05D3D); }

/* Section title underline tramonto */
.section__title {
  position: relative;
  padding-left: 0;
}
.section__title::before {
  display: none; /* rimuovo barretta orizzontale precedente */
}

/* CTA elegant (sostituisce btn-primary/secondary vecchi se presenti) */
.btn-primary, .pkg__cta, .cta-btn {
  background: var(--lrf-mare, #1B6DAA) !important;
  color: var(--lrf-sabbia, #FAF4E8) !important;
  border-radius: var(--lrf-radius-md, 8px) !important;
}

.btn-secondary {
  background: transparent !important;
  color: var(--lrf-mare, #1B6DAA) !important;
  border: 2px solid var(--lrf-mare, #1B6DAA) !important;
  border-radius: var(--lrf-radius-md, 8px) !important;
}

/* Bottom bar icona dimensione fissa quando attiva (no salto layout) */
.lrf-bottom-bar__item--active .lrf-bottom-bar__icon { padding: 4px 16px; }