/* =========================================================
   GIEMME - main.css  (comune a tutte le pagine)
   Ordine: token > font > base > componenti > sezioni comuni
   Si carica DOPO bootstrap 5.
   ========================================================= */

/* ---------- 1. TOKEN ---------- */
:root {
  --blu: #0081cb;
  --blu-scuro: #046196;
  --arancio: #ff9c00;
  --arancio-hover: #ff9800;
  --verde: #6aaf08;
  --grigio-testo: #666;
  --grigio-titoli: #333;
  --grigio-chiaro: #f6f6f6;
  --scuro: #333;
  --ombra-testo: 1px 1px #000;
  --ombra-hover: 0 0 10px #fff, 1px 1px #000;
  --overlay: rgba(0, 0, 0, .5);
  --blur: blur(10px);

  /* sfondo header/sezioni: lo imposta la classe sul <body> (home.css / prodotto.css) */
  --hero-bg: none;
  --hero-pos: top center;

  /* Bootstrap 5: allinea i default al vecchio aspetto BS3 */
  --bs-body-font-family: 'Open Sans', sans-serif;
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.42857;
  --bs-body-color: var(--grigio-testo);
  --bs-link-color-rgb: 0, 129, 203;
  --bs-link-hover-color-rgb: 255, 156, 0;
}

/* ---------- 2. FONT ---------- */
@font-face {
  font-family: 'Bajoran';
  src: url(../fonts/Bajoran.woff2) format('woff2');
  font-display: swap;
}
.bajoran,
.bajoran_small {
  font-family: 'Bajoran', 'Open Sans', sans-serif;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bajoran { font-size: 45px; }
.bajoran_small { font-size: 25px; }

/* ---------- 3. BASE ---------- */
/* width e height messi da dimensioni_immagini() (config.php) servono solo al rapporto: l'altezza segue la larghezza (specificita' zero:
   qualunque altra regola dei componenti prevale) */
:where(img[width][height]) { height: auto; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body, html {
  width: 100%;
  height: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
h2 { margin: 0 0 20px; font-weight: 600; font-size: 36px; color: var(--grigio-titoli); }
h3, h4 { font-size: 20px; font-weight: 400; color: var(--grigio-titoli); }
h5 { text-transform: uppercase; font-weight: 700; line-height: 20px; }
p { font-size: 15px; margin: 0 0 10px; }
a { color: var(--blu); font-weight: 400; text-decoration: none; }
a:hover, a:focus { text-decoration: none; color: var(--arancio); }
ul, ol { list-style: none; padding: 0; }
/* In BS3 ogni colonna aveva il margine interno; in BS5 solo dentro una .row.
   Diverse sezioni hanno colonne fuori da una .row: senza questo i loro .row interni escono di 12px. */
:where([class*="col-"]) { padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); }
hr {
  height: 3px;
  width: 70px;
  position: relative;
  background: var(--verde);
  margin: 0 auto 20px;
  border: 0;
  opacity: 1;
}
.minuscola { text-transform: lowercase !important; }   /* in linea con la parola: le sigle non si spezzano (LDp|HCl; Ale, 19 ottobre) */

/* ---------- 4. PULSANTI ---------- */

/* ---------- 5. NAVIGAZIONE ---------- */
#menu {
  padding: 20px;
  background-color: transparent;
  transition: all .8s;
}
#menu.on {
  background-color: rgba(51, 51, 51, .95);
  padding: 10px 0;
  border-bottom: 1px solid #444;
}
#menu .navbar-brand {
  font-size: 26px;
  font-weight: 600;
  color: #eee;
}
#menu .navbar-brand p { margin: 0; }
#menu .nav-link {
  text-transform: uppercase;
  color: #ddd;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 8px 2px;
  margin: 9px 20px 0;
}
#menu .nav-link { white-space: nowrap; }   /* "Chi siamo" su una riga anche col selettore della lingua */
/* menu piu' compatto quando il contenitore e' stretto (992 - 1399 px), cosi' logo, voci e lingua stanno su una riga */
@media (min-width: 992px) and (max-width: 1399.98px) {
  #menu .nav-link { margin-left: 12px; margin-right: 12px; font-size: 14px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  #menu .nav-link { margin-left: 8px; margin-right: 8px; font-size: 13px; letter-spacing: .5px; }
}
#menu.on .nav-link { color: #fff; }
/* pagine senza immagine in testata (es. note legali): menu sempre scuro, altrimenti le voci bianche non si vedono */
#menu .nav-link:hover,
#menu .nav-link.active { color: var(--arancio); }
#menu .navbar-toggler { border-radius: 0; border-color: rgba(255, 255, 255, .5); }
#menu .navbar-toggler:hover,
#menu .navbar-toggler:focus { background-color: #fff; box-shadow: none; }
#menu .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,.85%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
#menu .navbar-toggler:hover .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ff9c00' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
  #menu .navbar-collapse { background: rgba(51, 51, 51, .95); margin-top: 10px; }
}

/* selettore della lingua (IT / EN) nel menu */
#menu .nav-lingua { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; letter-spacing: .08em; }
/* bandiera accanto alla sigla della lingua (Ale, 23 ottobre): tricolore per IT, Union Jack per ENG */
#menu .nav-lingua__bandiera { flex: none; width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
#menu .nav-lingua--mobile {
  margin-left: auto;
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
}
#menu .nav-lingua--mobile:hover { border-color: var(--arancio); color: var(--arancio); }
@media (min-width: 992px) {
  #menu .nav-lingua { margin-left: 6px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .3); }
}

/* Barra di ricerca a tutta larghezza (sotto la nav) */
#search-bar-full {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 9999;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .4s ease-in-out;
}
#search-bar-full.active { max-height: 85vh; opacity: 1; padding: 15px 0; overflow-y: auto; }
#search-bar-full .search-content { max-width: 1320px; margin: 0 auto; padding: 0 15px; }
#search-bar-full form {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 5px 25px;
  border-radius: 100px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  border: 3px solid var(--arancio);
}
#search-input {
  flex-grow: 1;
  border: none;
  background: transparent;
  padding: 15px 0;
  font-size: 24px;
  color: #333;
  outline: none;
}
#search-input::placeholder { font-size: 24px; color: #999; font-weight: 300; }
#submit-search {
  border: 0;
  border-radius: 30px;
  background: var(--blu);
  color: #fff;
  padding: 10px 22px;
  font-weight: 700;
}
#submit-search:hover { background: var(--arancio); }
#close-search {
  background: none;
  border: none;
  font-size: 30px;
  color: #999;
  cursor: pointer;
  margin-left: 20px;
  line-height: 1;
  transition: color .2s;
}
#close-search:hover { color: #333; }
/* suggerimenti sotto la barra di ricerca */
.suggerimenti {
  margin: 10px 0 0;
  padding: 8px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.suggerimenti[hidden] { display: none; }
.suggerimenti a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 16px;
  color: #333;
  text-decoration: none;
}
.suggerimenti a:hover, .suggerimenti a:focus { background: #f2f2f2; color: #111; outline: none; }
.suggerimenti__titolo { font-weight: 700; }
.suggerimenti__sezione { color: #666; }
.suggerimenti__categoria { margin-left: auto; flex: none; color: #999; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.suggerimenti a.suggerimenti__tutti { justify-content: center; color: var(--blu); font-weight: 700; }
.suggerimenti__vuoto { margin: 0; padding: 10px 16px; color: #666; }
@media (max-width: 768px) {
  #search-input, #search-input::placeholder { font-size: 18px; }
  #search-bar-full form { padding: 2px 15px; }
}

/* ---------- 6. TITOLI DI SEZIONE ---------- */

/* ---------- 7. GRIGLIA PRODOTTI (home e pagine categoria) ---------- */
.categories { text-align: center; }
/* contenitori di colonne annidati dentro .row: in BS5 devono essere flex */
.portfolio-items,
.modelli-items { display: flex; flex-wrap: wrap; width: 100%; }
.portfolio-items > [class*="col-"],
.modelli-items > [class*="col-"] {
  flex-shrink: 0;
  max-width: 100%;
  padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
.portfolio-items > .nascosto { display: none; }
/* ---------- 8. CONTATTI ---------- */
/* ---------- CONTATTI (includes/contatti.php; Ale, 18 ottobre: ridisegnata) ----------
   Acqua in movimento sullo sfondo, biglietto con le azioni dirette e lo stato aperto/chiuso (main.js initOrari),
   modulo con argomento, etichette flottanti (Bootstrap 5) e suggerimento. */
.contatti { --c-fondo: #0a2740; --c-testo: #e8f1f8; --c-tenue: #a9c2d6; --c-vetro: rgba(255, 255, 255, .07); --c-bordo: rgba(255, 255, 255, .16);
  position: relative; overflow: hidden; padding: 110px 0 120px; color: var(--c-testo); text-align: left;
  background: radial-gradient(120% 90% at 85% 0%, #135784 0%, transparent 60%), linear-gradient(180deg, #0c3150 0%, var(--c-fondo) 100%); }
.contatti__acqua { position: absolute; inset: auto 0 0 0; height: 220px; pointer-events: none; }
.contatti__acqua span { position: absolute; inset: 0 -50% 0 -50%; background-repeat: repeat-x; background-position: bottom; background-size: 50% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 220' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C 200 60 400 180 600 120 S 800 60 800 120 V220 H0z' fill='%230081cb' fill-opacity='.18'/%3E%3C/svg%3E");
  animation: contatti-onda 18s linear infinite; }
.contatti__acqua span + span { opacity: .7; background-size: 40% 80%; animation-duration: 26s; animation-direction: reverse; }
@keyframes contatti-onda { to { transform: translateX(25%); } }
.contatti .container { position: relative; }
.contatti__testa { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.contatti__occhiello { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--arancio); }
.contatti__testa h2 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 44px); font-weight: 700; color: #fff; text-transform: none; }
.contatti__testa p { margin: 0; font-size: 18px; color: var(--c-tenue); }
.contatti__griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.contatti__biglietto, .contatti__modulo { padding: 32px; border: 1px solid var(--c-bordo); border-radius: 22px; background: var(--c-vetro);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
/* stato aperto / in pausa / chiuso */
.contatti__stato { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 15px; font-weight: 600; }
.contatti__pallino { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-tenue); }
.contatti__stato.aperto .contatti__pallino { background: #3ddc84; }
.contatti__stato.aperto .contatti__pallino::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #3ddc84; animation: contatti-battito 1.8s ease-out infinite; }
.contatti__stato.pausa .contatti__pallino { background: var(--arancio); }
@keyframes contatti-battito { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
/* azioni dirette */
.contatti__azione { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .06);
  border: 1px solid transparent; color: var(--c-testo); text-decoration: none; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.contatti__azione:hover, .contatti__azione:focus-visible { transform: translateX(6px); background: rgba(255, 255, 255, .12); border-color: var(--c-bordo); color: #fff; }
.contatti__azione svg { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: linear-gradient(135deg, var(--arancio), #ff7a00); fill: #fff; }
.contatti__azione small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-tenue); }
.contatti__azione strong { display: block; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.contatti__orari { margin: 22px 0; padding: 18px 0; border-top: 1px solid var(--c-bordo); border-bottom: 1px solid var(--c-bordo); }
.contatti__orari div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.contatti__orari dt { font-weight: 600; } .contatti__orari dd { margin: 0; color: var(--c-tenue); text-align: right; }
.contatti__aiuto h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.contatti__aiuto ul { margin: 0; padding-left: 1.2em; list-style: disc; color: var(--c-tenue); }
.contatti__aiuto li { margin-bottom: 4px; } .contatti__aiuto li::marker { color: var(--arancio); }
/* modulo */
.contatti__argomenti { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; border: 0; }
.contatti__argomenti legend { width: 100%; margin-bottom: 12px; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.contatti__argomenti label { padding: 10px 20px; border: 1px solid var(--c-bordo); border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--c-testo); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.contatti__argomenti label:hover { border-color: rgba(255, 255, 255, .4); }
.contatti__argomenti .btn-check:checked + label { background: var(--arancio); border-color: var(--arancio); color: #fff; box-shadow: 0 8px 20px rgba(255, 156, 0, .35); }
.contatti__argomenti .btn-check:focus-visible + label { outline: 2px solid #fff; outline-offset: 2px; }
.contatti__campi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contatti__campi .form-floating:first-child, .contatti__messaggio { grid-column: 1 / -1; }
.contatti .form-control { border: 1px solid var(--c-bordo); border-radius: 14px; background: #edf0f3; color: #10263a; box-shadow: none; }   /* colore pieno: lo stesso dietro l'etichetta (Ale, 26 ottobre) */
.contatti .form-control:focus { border-color: var(--arancio); box-shadow: 0 0 0 4px rgba(255, 156, 0, .25); }
.contatti .form-floating > label { color: #5c6f80; }
.contatti .form-floating > label::after,
.contatti .form-floating > textarea:focus ~ label::after,
.contatti .form-floating > textarea:not(:placeholder-shown) ~ label::after { background-color: #edf0f3; }   /* textarea: Bootstrap mette un fondo bianco dietro l'etichetta (a campo attivo o compilato), che si vedeva come un riquadro */
.contatti__messaggio textarea.form-control { height: 150px; }
.contatti__suggerimento { margin: 12px 4px 18px; font-size: 14px; color: var(--c-tenue); transition: opacity .3s ease; }
.contatti .form-check { margin-bottom: 22px; font-size: 14px; color: var(--c-tenue); }
.contatti .form-check a { color: #fff; text-decoration: underline; }
.contatti .form-check-input:checked { background-color: var(--arancio); border-color: var(--arancio); }
.contatti .invalid-feedback { color: #ffb4a8; }
.contatti__invia { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; border: 0; border-radius: 999px; font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--arancio), #ff7a00); box-shadow: 0 12px 30px rgba(255, 122, 0, .35); transition: transform .2s ease, box-shadow .2s ease; }
.contatti__invia svg { width: 20px; height: 20px; fill: #fff; transition: transform .25s ease; }
.contatti__invia:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255, 122, 0, .45); }
.contatti__invia:hover svg { transform: translateX(5px); }
.contatti__invia:disabled { opacity: .6; transform: none; }
.contatti #success { margin-top: 18px; }
@media (max-width: 991.98px) { .contatti__griglia { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
  .contatti { padding: 80px 0 100px; }
  .contatti__biglietto, .contatti__modulo { padding: 22px 18px; border-radius: 18px; }
  .contatti__campi { grid-template-columns: 1fr; }
  .contatti__azione strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .contatti__acqua span, .contatti__pallino::after { animation: none; } .contatti__azione, .contatti__invia, .contatti__invia svg { transition: none; } }

/* ---------- 9. FOOTER ---------- */
#footer { background: var(--scuro); padding: 30px 0 20px; }
#footer p { color: #666; font-size: 15px; }
#footer a { color: #888; }
#footer a:hover { color: #fff; }

/* ---------- 10. BARRA COOKIE ---------- */
#barra-cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  padding: 30px 5%;
  background: #404040;
  text-align: center;
}
#barra-cookie p { font-size: 18px; line-height: 1.4; color: #fff; margin: 0 0 10px; }
#barra-cookie a { color: var(--arancio); }
#barra-cookie button {
  border: 0;
  height: 46px;
  padding: 0 30px;
  background: var(--blu);
  color: #fff;
  font-size: 18px;
}
#barra-cookie button:hover { background: var(--arancio); }
#barra-cookie > p { padding: 0 34px; }
.barra-cookie__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.barra-cookie__azioni button { min-width: 140px; }
#barra-cookie .barra-cookie__chiudi { position: absolute; top: 8px; right: 12px; height: 36px; padding: 0 10px; background: none; font-size: 28px; line-height: 1; }
#barra-cookie .barra-cookie__chiudi:hover { background: none; color: var(--arancio); }
@media (max-width: 767px) {
  #barra-cookie { padding: 15px 2%; }
  #barra-cookie p { font-size: 16px; }
}

/* unita' di misura: mai in maiuscolo (span inserito da proteggi_unita() in config.php) */
.unita { text-transform: none; }