/* =========================================================
   Area Comunale — public.css
   Layout + componenti per tutte le pagine pubbliche
   ========================================================= */

/* Base tipografia pubblica (evita “scritte attaccate”) */
.ac-main { padding: 24px 0 32px; }
h1,h2,h3{
  margin: 0 0 10px 0;
  line-height: 1.08;
}

p{
  margin: 0 0 12px 0;
}

/* ===========================
   HEADER PUBBLICO (robusto)
   =========================== */
.ac-header{
  background: var(--ac-blue);
  color:#fff;
  padding: 14px 0;      /* più aria */
  height:auto;          /* niente tagli */
  display:flex;
  align-items:center;
}

.ac-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  overflow: visible;

  /* Non sovrascrivere il container */
  max-width: none;
  margin: 0;
  padding: 0;
}

.ac-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;         /* consente shrink corretto */
}

.ac-brand-logo{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px;
  flex: 0 0 auto;
}

.ac-brand-logo svg,
.ac-brand-logo img{
  width:100%;
  height:100%;
  display:block;
}

.ac-brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.ac-brand-title{
  font-size: clamp(18px, 4.8vw, 22px);
  font-weight:900;
  letter-spacing:.02em;
  color:#fff;
  line-height: 1.05;
}

.ac-brand-subtitle{
  margin-top:6px;
  font-size: clamp(12px, 3.2vw, 13px);
  color:#e7effa;
  line-height: 1.15;
}


/* Fascia Tricolore istituzionale */
.ac-tricolore{
  height: 6px;
  width: 100%;
  background: linear-gradient(
    to right,
    #008C45 0%,
    #008C45 33.33%,
    #FFFFFF 33.33%,
    #FFFFFF 66.66%,
    #CD212A 66.66%,
    #CD212A 100%
  );
  flex: 0 0 auto;
}

/* ===========================
   FOOTER pubblico (strutturato e coerente)
   =========================== */

.ac-footer{
  background: var(--ac-blue);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 14px 0;                 /* spazio verticale uniforme */
  line-height: 1.35;               /* evita testo “attaccato” */
}

/* Struttura interna */
.ac-footer-inner{
  /* padding laterale gestito SOLO da .ac-container (common.css) */
  padding: 18px 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr 0.9fr;
  gap: 16px;
  align-items: start;
}

.ac-footer-col{
  min-width: 0;
}

.ac-footer-col-right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* Tipografia */
.ac-footer-brand{
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .01em;
}

.ac-footer-title{
  font-weight: 900;
  font-size: 13px;
  opacity: .95;
  margin-bottom: 10px;
}

.ac-footer-meta{
  font-size: 13px;
  opacity: .92;
}

/* Link */
.ac-footer-links{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.ac-footer a{
  color: #fff;
  opacity: .92;
  font-weight: 600;
  text-decoration: none;
}

.ac-footer a:hover{
  opacity: 1;
  text-decoration: underline;
}

/* Logo PNRR */
.ac-footer-pnrr{
  height: 54px;
  width: auto;
  max-width: 220px;
  display:block;
  object-fit: contain;
}

/* Parte inferiore */
.ac-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.15);
}

.ac-footer-bottom-inner{
  /* padding laterale gestito SOLO da .ac-container (common.css) */
  padding: 12px 0;
}

.ac-footer-small{
  font-size: 12px;
  opacity: .9;
}

/* Responsive */
@media (max-width: 720px){
  .ac-footer-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ac-footer-col-right{
    align-items:flex-start;
  }

  .ac-footer-pnrr{
    max-width: 260px;
    height: 50px;
  }
}

/* Safe area iPhone */
@media (max-width: 560px){
  .ac-footer{
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* =========================================================
   COMPONENTI “PUBLIC UI” — usati in hub_nazionale / hub_regione / hub_comune / home
   ========================================================= */

/* Hero 50/50 */
.ac-hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:stretch;
  margin-top:10px;
}
@media (max-width: 980px){
  .ac-hero{ grid-template-columns: 1fr; }
}

/* Box bianco “standard” */
.ac-box{
  background:#fff;
  border:1px solid var(--ac-border);
  border-radius:12px;
  padding:16px;
}

/* Titolo grande pagina */
.ac-hero-title{
  margin:0 0 6px 0;
  font-size:44px;
  letter-spacing:-.5px;
}
@media (max-width: 980px){
  .ac-hero-title{ font-size:34px; }
}

/* Field form (label + input/select) */
.ac-field{ margin-top:12px; }
.ac-field label{
  display:block;
  font-weight:800;
  font-size:13px;
  color:#334155;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:6px;
}
.ac-input, .ac-select, .ac-textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--ac-border);
  border-radius:10px;
  font-size:15px;
  background:#fff;
  box-sizing:border-box;
}
.ac-textarea{ resize: vertical; }

/* Actions row */
.ac-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  align-items:center;
}

/* Variante bottoni pubblici (se vuoi differenziarli dal .btn comune) */
.ac-btn-blue{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  border:1px solid var(--ac-blue);
  background: var(--ac-blue);
  color:#fff;
  cursor:pointer;
}
.ac-btn-ghost{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  border:1px solid var(--ac-border);
  background:#fff;
  color: var(--ac-blue-dark);
  cursor:pointer;
}

/* Hero image panel */
.ac-hero-img{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0;
}
.ac-hero-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#fff;
}

/* 3 blue cards */
.ac-cards3{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
@media (max-width: 980px){
  .ac-cards3{ grid-template-columns: 1fr; }
}
.ac-blue-card{
  background: var(--ac-blue);
  color:#fff;
  border-radius:0; /* come richiesto: rettangolari */
  padding:18px;
}
.ac-blue-card h3{
  margin:0 0 6px 0;
  font-size:18px;
  font-weight:900;
}
.ac-blue-card p{
  margin:0;
  opacity:.95;
  line-height:1.35;
}

/* CTA box (se vuoi squadrata, metti radius 0) */
.ac-cta{
  margin-top:18px;
  background:#fff;
  border:1px solid var(--ac-border);
  border-radius:0;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.ac-cta-title{ font-weight:800; color: var(--ac-text); }
.ac-cta-sub{ font-size:13px; color: var(--ac-muted); margin-top:4px; }
.ac-btn-outline-dark{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  border:1px solid var(--ac-text);
  background:#fff;
  color: var(--ac-text);
}

/* ===========================
   HOME (public/home.html)
   =========================== */
.ac-search-row{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.ac-search{
  flex:1;
  min-width:260px;
  padding:12px 12px;
  border:1px solid var(--ac-border);
  border-radius:10px;
  font-size:15px;
  background:#fff;
}

.ac-comune{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid var(--ac-border);
  border-radius:10px;
  padding:12px;
}

.ac-comune:hover{ border-color:#b9c5d6; }

.ac-comune-name{ font-weight:900; }
.ac-comune-domain{ font-size:12px; color:var(--ac-muted); margin-top:4px; }

.ac-hidden{ display:none !important; }

/* ===========================
   Cookie banner (PA-friendly)
   =========================== */
.ac-cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ac-blue);
  color: #fff;
  z-index: 99999;
  border-top: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 -2px 8px rgba(0,0,0,.15);
}

.ac-cookie-banner-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ac-cookie-banner a{
  color: #fff;
  text-decoration: underline;
}

.ac-cookie-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================================================
   SERVIZI — UI compatta (solo /servizi/)
   ========================================================= */
/* Box supporto (lascia card standard ma con spaziatura coerente) */
.ac-services-support{
  margin-top: 16px;
}


.ac-has-overlay{
  position: relative;
  overflow: hidden;
}

.ac-service-overlay{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--ac-border);
  background: #fff;
  color: var(--ac-blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* =========================================================
   HUB NAZIONALE — fit above-the-fold (P0)
   (SOLO per la pagina hub_nazionale)
   ========================================================= */

.ac-page-hub .ac-hero{
  margin-top: 6px;
  gap: 12px;
}

.ac-page-hub .ac-box{
  padding: 14px;
}

/* Riduce la "mappa" senza deformare */
.ac-page-hub .ac-hero-img{
  max-height: 360px;
  overflow: hidden;
}

.ac-page-hub .ac-hero-img img{
  max-height: 360px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Riduci il titolo un filo su desktop */
.ac-page-hub .ac-hero-title{
  font-size: 40px;
  margin-bottom: 4px;
}

@media (max-width: 980px){
  .ac-page-hub .ac-hero-img{ max-height: 320px; }
  .ac-page-hub .ac-hero-img img{ max-height: 320px; }
}

/* Porta le 3 card più su e compatta */
.ac-page-hub .ac-cards3{
  margin-top: 12px;
  gap: 12px;
}

.ac-page-hub .ac-blue-card{
  padding: 14px;
}

/* =========================================================
   HUB NAZIONALE — FIX micro-overflow mobile (2px)
   (evita “footer attaccato” su iPhone)
   ========================================================= */
@media (max-width: 560px){

  /* clippa eventuali 1–2px di overflow causati da rounding/grid */
  .ac-page-hub{
    overflow-x: clip;
  }

  /* i figli della grid devono poter shrinkare (Safari mobile) */
  .ac-page-hub .ac-hero > *{
    min-width: 0;
  }

  /* immagini e box mai oltre il container */
  .ac-page-hub img{
    max-width: 100%;
    height: auto;
  }
}

/* =========================================================
   Sticky footer (solo pagine pubbliche)
   Evita "bozzo" quando il contenuto è più corto della viewport
   ========================================================= */

.ac-public{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.ac-public .ac-main{ flex: 1 0 auto; }
.ac-public .ac-footer{ margin-top: auto; }

/* =========================================================
   Hub Comune (public) — split 50/50 + logo
   ========================================================= */

.hub-split{
  margin-top: 16px;
  align-items: stretch;
}

/* colonna sinistra: card sovrapposte */
.hub-left-stack{
  display: grid;
  gap: 14px;
}

/* azioni dentro le card */
.hub-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* note sotto, fuori split */
.hub-note{
  margin-top: 16px;
}

/* colonna destra logo */
.hub-logo-card{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
}

/* raddoppio altezza area logo */
.hub-logo-card--tall{
  min-height: 520px;
}

.hub-logo-img{
  width: 100%;
  max-width: 520px;
  max-height: 440px;
  object-fit: contain;
  display: block;
}

.hub-logo-fallback{
  width: 100%;
  max-width: 620px;
  border: 1px dashed var(--ac-border);
  border-radius: var(--ac-radius);
  padding: 18px;
}

.hub-logo-title{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 6px;
}

/* Spazio laterale mobile coerente (public) */

  /* Target sicuro: wrapper delle pagine pubbliche */
 @media (max-width: 560px){
  .ac-public .ac-main{
    padding: 24px 14px 32px;
  }
}

/* Mobile: safe area iPhone */
@media (max-width: 560px){
  .ac-footer{
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* Spazio laterale standard per pagine pubbliche */
.ac-services{
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 700px){
  .ac-services{
    padding-left: 0;
    padding-right: 0;
  }
}

/* Reset leggero per titoli nelle pagine pubbliche */
.ac-public h1{
  margin-top: 10px;
  margin-bottom: 8px;
}