/* ============================================================
   MutuoClick — Comparatore: layout di pagina (shell)
   Header, footer e contenitore principale resi server-side da Twig.
   Wizard, card di confronto e overlay sono renderizzati dal widget
   (js/comparatore.js) con stili inline fedeli all'handoff: qui stanno
   solo i pezzi "cornice" e le utility condivise. Tutti i valori sono
   token (css/tokens.css) — niente hardcoding.
   ============================================================ */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -------------------------------------------------- Header
   Sfondo blu di brand: il logo MutuoClick è la versione "negativo" (oro su
   fondo scuro), così il wordmark resta nitido e coerente con l'identità. */
.cmp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(18, 50, 110, 0.94); /* --blue-800 con leggera trasparenza */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--blue-900);
}
.cmp-header__inner {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cmp-header__brand { display: inline-flex; }
.cmp-header__logo { height: 30px; width: auto; display: block; }
.cmp-header__eyebrow { color: var(--blue-200); }

/* -------------------------------------------------- Main / mount */
.cmp-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.cmp-mount { width: 100%; }

/* Colonna verticale del flusso (stepper → wizard/confronto), resa dal widget */
.cmp-flow {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.cmp-noscript {
  max-width: 640px;
  margin: 24px auto;
  background: var(--color-warning-soft);
  color: var(--gold-800);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: var(--text-sm);
  text-align: center;
}

/* -------------------------------------------------- Footer */
.cmp-footer {
  background: var(--surface-brand);
  color: var(--text-on-brand);
  padding: 32px 24px;
}
.cmp-footer__inner {
  max-width: var(--container-lg);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.cmp-footer__logo { height: 26px; display: block; }
.cmp-footer__text {
  font-size: var(--text-xs);
  color: var(--blue-200);
  max-width: 660px;
}

/* -------------------------------------------------- Responsive */
@media (max-width: 640px) {
  .cmp-main { padding: 20px 16px 48px; }
  .cmp-header__inner { padding: 12px 16px; }
}