/* ==========================================================================
   fnc_theme — layout.css
   Griglie di pagina e comportamento responsive dell'header (drawer hamburger).
   ========================================================================== */

/* --- Header: drawer mobile ------------------------------------------------ */
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 20, 30, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 49;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }
.nav-close { display: none; }

/* --- Home: hero ------------------------------------------------------------ */
.hero { position: relative; height: 320px; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy)}
.hero-scrim {
  position: absolute; inset: 0;
  /* Velo scuro dietro il testo dell'hero (leggibilità). */
  background: linear-gradient(0deg, rgba(15, 20, 30, .72) 0%, rgba(15, 20, 30, .32) 45%, rgba(15, 20, 30, .12) 100%);
  pointer-events: none;
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 56px var(--container-pad) 40px; width: 100%; }
.hero-eyebrow { color: #fff; font-size: 0.875rem; font-weight: 500; letter-spacing: .03em; margin-bottom: 10px; }
.hero h1 { color: #fff; font-size: 1.625rem; font-weight: 300; max-width: 780px; line-height: 1.15; }

/* --- Home: griglia contenuto + sidebar ------------------------------------ */
.page { padding: 48px 0 64px; }
.page-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--col-right); gap: var(--gap);
  align-items: start;
}
.tax-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }

/* --- Pagine interne: griglia 3 colonne (menu contestuale + contenuto + sidebar) --- */
.il-grid { display: grid; grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right); gap: var(--gap); align-items: start; }
.int-content h1 { font-size: 1.75rem; font-weight: 600; margin-bottom: 20px; }
#block-fnc-theme-page-title h1 { margin-top: 0px; padding-top: 0px; }

/* <=1150px: il menu sinistro passa in cima a tutta larghezza; restano 2 colonne. */
@media (max-width: 1150px) {
  .il-grid { grid-template-columns: minmax(0, 1fr) var(--col-right); }
  .section-nav-col { grid-column: 1 / -1; }
}

/* --- Header → drawer hamburger (indipendente dal menu contestuale a 1150) --- */
@media (max-width: 1000px) {
  .topbar-links, .search { display: none; }
  .search-link { display: block; }
  .hamburger { display: block; margin-left: auto; }
  .drawer-utility { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
  .nav-wrap {
    position: fixed; top: 0; right: 0; height: 100vh; width: 82vw; max-width: 340px;
    background: #fff; box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
    flex-direction: column; align-items: stretch; padding: 20px 24px 24px; gap: 18px;
    /* `visibility` oltre alla traslazione: da chiuso il drawer esce anche
       dall'ordine di tabulazione e dall'albero di accessibilità (come .to-top). */
    transform: translateX(100%); visibility: hidden;
    transition: transform .25s ease, visibility .25s; z-index: 50; overflow-y: auto;
  }
  .nav-wrap.open { transform: translateX(0); visibility: visible; }
  .nav-close { display: block; align-self: flex-end; border: none; background: none; font-size: 1.5rem; line-height: 1; color: var(--ink); cursor: pointer; padding: 6px; margin-bottom: 0px; }
  .primary-nav { flex-direction: column; }
  .secondary-nav { flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
  .mainbar-inner { gap: 16px; padding-top: 14px; padding-bottom: 14px; }
}
/* Colonna banner: unico punto di collasso a 1024px (coerente home/interne). */
@media (max-width: 1024px) {
  .page-inner, .il-grid { grid-template-columns: minmax(0, 1fr); }
  .side-col { width: auto !important; }
}

@media (max-width: 640px) {
  .subheader.breadcrumbs .container { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 640px) {
  .hero { height: 260px; }
  .hero h1 { font-size: 1.75rem; }
  .hero-content { padding: 36px 20px 28px; }
  .tax-grid { grid-template-columns: minmax(0, 1fr); }
  .page-inner { padding: 0 20px; }
  .footer-inner { padding: 0 20px; }
  .partner-band-inner { gap: 24px; }
  .partner-logo { width: 120px; }
  .site-logo { width: 150px !important; height: 68px !important; }

  .mainbar-inner { padding-left: 20px; padding-right: 20px; }
  .topbar-inner { padding-left: 20px; padding-right: 20px; }
}