/* =========================================================================
   Font istituzionale: Raleway (self-hosted, variabile, subset latin/latin-ext).
   File in wwwroot/fonts/ scaricati da Google Fonts (nessuna dipendenza esterna).
   Un solo file per subset copre l'intero asse dei pesi 100–900.
   ========================================================================= */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Raleway in testa allo stack di sistema di Bootstrap (fallback finché il
       font non è caricato, e per i caratteri fuori subset). */
    --bs-body-font-family: 'Raleway', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ascazzurro: #75a7ae;
    --ascrosso: #da6144;
    --ascgiallo: #c7c512;
    --ascgrigio: #8c8c88;
    --ascblu: #005896;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
  /* Footer sticky via FLEXBOX (non più via footer absolute + margin riservato):
     il body è una colonna alta almeno quanto il viewport, il contenuto centrale
     cresce (vedi sotto) e spinge il footer in fondo. Così un footer a più righe su
     schermi stretti non si sovrappone più al contenuto (ultimo esagono tagliato). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Sfondo pagina: per ora bianco. La struttura (contenuto centrale su
     .content-surface bianca, menu e footer bianchi a tutta larghezza) è già
     pronta: per uno sfondo diverso basta cambiare questo solo colore. */
  background-color: #fff;
}

/* Il blocco centrale cresce per occupare lo spazio e spingere il footer in fondo. */
body > .container {
  flex: 1 0 auto;
}

/* Superficie bianca del contenuto centrale, dentro il .container principale. */
.content-surface {
  background-color: #fff;
  padding: 1.5rem;
}

/* Footer a tutta larghezza, coerente con l'header: contenuto agli estremi
   (container-fluid, come la navbar) e sfondo grigio molto leggero per staccarlo
   dal contenuto della pagina. Voci un po' più piccole. */
.footer {
  background-color: #f6f6f6;
  font-size: 0.8125rem;
}

/* Riga del footer: P.IVA a sinistra, link a destra (desktop). */
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.footer-links {
  display: flex;
  gap: 0.5rem;
}

/* Separatore "·" tra i link (solo da affiancati). */
.footer-links a + a::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* Breakpoint più basso (xs, <576px): link a tutta larghezza impilati e
   P.IVA spostata in fondo. Un solo elemento nel markup: è l'ordine flex a
   riposizionarla, senza duplicare il contenuto. */
@media (max-width: 575.98px) {
  .footer-row {
    flex-direction: column;
    align-items: stretch;
  }
  .footer-links {
    order: 1;
    flex-direction: column;
    gap: 0;
  }
  .footer-links a {
    text-align: center;
    padding: 0.33rem 0; /* ~2/3 dell'altezza precedente: voci meno alte */
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  /* Da impilati niente separatore "·". */
  .footer-links a + a::before {
    content: none;
    margin-right: 0;
  }
  .footer-piva {
    order: 2;
    text-align: center;
    padding: 0.33rem 0;
    /* Sfondo leggermente più scuro dello sfondo footer: distacca la riga P.IVA. */
    background-color: #ececec;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Tutti i pulsanti del sito: angoli vivi (niente bordi arrotondati). */
.btn {
  border-radius: 0;
}

/* =========================================================================
   Pulsante d'acquisto (pagina dettaglio viaggio).
   Il colore arriva dalla categoria via --colore-categoria (impostato inline).
   ========================================================================= */
/* Pulsante d'acquisto: coloriamo tramite le VARIABILI Bootstrap del bottone, così
   hover/active/focus restano gestiti da Bootstrap col colore categoria (scurito),
   senza che il suo .btn:hover azzeri lo sfondo (che rendeva il testo invisibile). */
.btn-acquista {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--colore-categoria);
  --bs-btn-border-color: var(--colore-categoria);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--colore-categoria) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--colore-categoria) 85%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--colore-categoria) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--colore-categoria) 75%, black);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--colore-categoria);
  --bs-btn-disabled-border-color: var(--colore-categoria);
}

/* =========================================================================
   Dettaglio viaggio: banda titolo a TUTTA PAGINA (colore categoria), subito
   sotto il menu (sezione Fascione, fuori dal .container), + periodo sotto.
   ========================================================================= */
.trip-hero {
  padding: 1.75rem 1rem;
  text-align: center;
  color: #fff; /* testo bianco, coerente con la banda degli esagoni in home */
}
.trip-hero__title {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); /* fluido: scala con la larghezza */
}

/* Periodo (data) centrato sotto la banda, nel colore della categoria. */
.trip-detail__period {
  text-align: center;
  color: var(--colore-categoria);
  font-weight: 700;
  font-size: 1.5625rem; /* ~25px (base 16px): periodo più evidente sotto il titolo */
  margin: 1.25rem 0 1.5rem;
}

/* Immagine del dettaglio: piena larghezza; sul breakpoint grande (≥1200px) ridotta a
   2/3 (−1/3) e centrata. */
.trip-detail__img {
  display: block;
  width: 100%;
}
@media (min-width: 1200px) {
  .trip-detail__img {
    width: 66.6667%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Box NOTE: sfondo giallo (tinta della categoria "giallo" istituzionale) con bordo più scuro. */
.trip-detail__note {
  background: color-mix(in srgb, var(--ascgiallo) 15%, white);
  border: 1px solid var(--ascgiallo);
  padding: 0.75rem 1rem;
}