/* ==========================================================================
   Fondazione Commercialisti — Design tokens & componenti condivisi
   Base CSS del tema fnc_theme: token + componenti condivisi (header, footer,
   banda partner, breadcrumb, sidebar, skip-link).
   ========================================================================== */

:root {
  /* Brand */
  --navy: #214581;      /* header, footer, stati attivi */
  --navy-2: #2f5aa8;    /* link, tag, accenti secondari */
  --navy-3: oklch(93% .025 258); /* tinta di sfondo tag */
  --red: oklch(52% .19 25);      /* hover / accento */
  --red-dark: oklch(44% .19 25);

  /* Neutri */
  --bg: oklch(98.5% .003 260);   /* sfondo pagina */
  --panel: oklch(97% .004 260);  /* sfondo pannelli / hover */
  --border: oklch(90% .006 260);
  --ink: oklch(22% .02 260);     /* testo */
  --muted: oklch(42% .02 260);   /* testo secondario */

  /* Tipografia (font unico in produzione) */
  --font-body: 'Titillium Web', 'Poppins', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Layout */
  --container: 1280px;
  --container-pad: 32px;
  --col-left: 300px;   /* menu contestuale (pagine interne) */
  --col-right: 230px;  /* sidebar banner */
  --gap: 32px;

  /* Risalita (scroll to top): posizione e dimensione del pulsante flottante.
     I valori per mobile (≤640px) si regolano in components.css, sezione "Risalita". */
  /* --to-top-right: 24px; */
  --to-top-right: 10px;   /* distanza dal bordo destro */
  /* --to-top-bottom: 24px; */
  --to-top-bottom: 62px;  /* distanza dal fondo finestra */
  --to-top-size: 48px;    /* diametro del pulsante */
}

* { box-sizing: border-box; }
/* Base in rem: rispetta la "dimensione carattere" scelta dall'utente. */
html { font-size: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-2); text-decoration: none; }
a:hover { color: var(--red); }

strong, b {
  font-weight: bold;
}

/* Sottolineatura link in hover/focus (segnale non cromatico). Esclusi i link
   già distinti da forma/sfondo o senza testo (loghi, icone, bottoni, pill). */
a:hover, a:focus-visible { text-decoration: underline; }
.brand:hover, .brand:focus-visible,
.partner-logo:hover, .partner-logo:focus-visible,
.side-banner:hover, .side-banner:focus-visible,
.feed-icon:hover, .feed-icon:focus-visible,
.btn-outline:hover, .btn-outline:focus-visible,
.tag:hover, .tag:focus-visible,
.skip-link:hover, .skip-link:focus-visible,
.pagination a:hover, .pagination a:focus-visible,
.pagination .ctrl:hover, .pagination .ctrl:focus-visible {
  text-decoration: none;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-body); }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
/* Sui fondi navy il rosso dà 1,6:1 (serve 3:1): anello bianco, 9,4:1. */
.topbar :focus-visible,
.subheader :focus-visible,
.site-footer :focus-visible,
.newsletter-cta :focus-visible { outline-color: #fff; }
/* NB: la voce di nav attiva (.nav-link.active, pillola navy) NON va in questo
   elenco. Il suo anello, con outline-offset 2px, cade fuori dalla pillola, sul
   bianco della mainbar: lì il rosso dà 6,08:1 ed è già a norma, mentre il
   bianco sarebbe invisibile. */

/* Rispetta "riduci le animazioni" del sistema (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link: fuori schermo finché non riceve focus (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  margin: 0;
  z-index: 1000;
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  font-size: 0.875rem;
}

/* Contenitore standard */
.container,
.topbar-inner, .mainbar-inner, .subheader-inner,
.page-inner, .partner-band-inner, .footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* --------------------------------------------------------------------------
   Header — topbar (navy) + mainbar (bianca)
   -------------------------------------------------------------------------- */
.topbar { background: var(--navy); color: #fff; font-size: 0.8125rem; }
.topbar-inner { padding-top: 8px; padding-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 280px; }
.search input { flex: 1; border: none; border-radius: 6px; padding: 6px 10px; font-size: 0.8125rem; font-family: inherit; }
.search button { font-weight: 600; border: none; background: rgba(255,255,255,.18); color: #fff; border-radius: 6px; padding: 6px 12px; font-size: 0.8125rem; cursor: pointer; }
.search button:hover { background: rgba(255,255,255,.3); }
.topbar-right { font-weight: 600; display: flex; align-items: center; gap: 18px; }
.topbar-links { display: flex; gap: 18px; }
.topbar-links a { color: rgba(255,255,255,.92); font-size: 0.8125rem; }
.topbar-links a:hover { color: #fff; }

.mainbar { background: #fff; border-bottom: 1px solid var(--border); }
.mainbar-inner { padding-top: 18px; padding-bottom: 18px; display: flex; align-items: center; gap: 32px; }
.brand { display: block; flex-shrink: 0; }
.nav-wrap { display: flex; flex-direction: column; gap: 6px; margin-left: auto; align-items: flex-end; }
.primary-nav { display: flex; gap: 4px; }
.nav-link { padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 0.9375rem; color: var(--ink); white-space: nowrap; }
.nav-link:hover { background: var(--panel); color: var(--navy); }
.nav-link.active { background: var(--navy); color: #fff; }
.nav-link.active:hover { color: #fff; }
.secondary-nav { display: flex; gap: 18px; }
.secondary-nav a { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.secondary-nav a:hover { color: var(--red); }
@media (min-width: 1001px) { .secondary-nav { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); width: 100%; justify-content: flex-end; } }
.hamburger { display: none; border: none; background: none; font-size: 1.8rem; color: var(--navy); cursor: pointer; padding: 4px 0px; }
/* Link del pre-header: nel topbar su desktop, nel drawer su mobile. */
.drawer-utility { display: none; }
.drawer-utility a { font-size: 0.8125rem; color: var(--muted); }
.drawer-utility a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   Subheader / breadcrumb (pagine interne)
   -------------------------------------------------------------------------- */
.subheader { background: var(--navy); padding: 14px 0; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 0.8125rem; color: rgba(255,255,255,.7); }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "\203A"; color: rgba(255,255,255,.7); }
.breadcrumb a { color: rgba(255,255,255,.85); font-weight: 600; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .current { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   Sidebar banner "Volumi in Evidenza"  (larghezza fissa 230px)
   -------------------------------------------------------------------------- */
.side-col { display: flex; flex-direction: column; gap: 22px; width: var(--col-right); }
.side-title { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--navy); margin: 0; }
.banner-stack { display: flex; flex-direction: column; gap: 20px; }
.side-banner { display: block; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); background: #fff; box-shadow: 0 4px 24px #2626261a; }
.banner-caption { padding: 10px 12px; }
.banner-title { color: var(--ink); font-weight: 700; font-size: 0.8125rem; line-height: 1.3; display: block; }

.newsletter-cta { background: var(--navy); border-radius: 12px; padding: 24px; color: #fff; }
.nl-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.9); margin: 0 0 4px; }
.nl-title { font-size: 1rem; font-weight: 700; margin: 0 0 16px; }
.btn-outline { display: inline-block; border: 1.5px solid #fff; color: #fff; font-weight: 700; font-size: 0.8125rem; padding: 9px 18px; border-radius: 7px; }
.btn-outline:hover { background: #fff; color: var(--navy); }

/* --------------------------------------------------------------------------
   Banda partner (pre-footer) — IDENTICA su tutte le pagine
   -------------------------------------------------------------------------- */
.partner-band { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 24px 0; }
.partner-band-inner { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.partner-logo { display: block; width: 160px; padding: 2px; background: #fff; }
.partner-logo.cinque-per-mille img { padding: 12px }
.partner-logo.press img { padding: 8px }

/* --------------------------------------------------------------------------
   Footer — IDENTICO su tutte le pagine (navy)
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); padding: 28px 0; color: rgba(255,255,255,.86); font-size: 0.9375rem; }
.footer-inner { display: flex; flex-direction: column; gap: 6px; }
.footer-inner strong { color: #fff; }
.footer-links { display: flex; gap: 16px; }
.footer-links a { color: rgba(255,255,255,.92); font-weight: 600; }
.footer-links a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Breakpoint
   1150px: menu contestuale -> toggle in cima · 1024px: griglie a colonna singola
   1000px: header -> drawer hamburger · 640px: padding ridotti, logo piccolo
   -------------------------------------------------------------------------- */