:root{
  --brand:#004080;
  --brand-dark:#003366;
  --brand-light:#E6EEF8;
  --text-color:#00264c;
  --shadow-soft:0 6px 24px rgba(0,0,0,0.08);
  --header-shadow:0 4px 12px rgba(0,0,0,0.08);
  --container-max:1080px;
  --pad-inline:clamp(16px, 4vw, 32px);
}
html,body{ font-family:'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color:var(--text-color);
  background-color:#f9fafb;
}


.navbar-brand .brand-mark{width:36px;height:36px;border-radius:.5rem;background:color-mix(in srgb, var(--brand) 10%, transparent);display:inline-grid;place-items:center;color:var(--brand);font-weight:700;margin-right:.5rem}
.footer{background:#0f172a;color:#e2e8f0}
.footer a{color:#e2e8f0;text-decoration:none}
.footer a:hover{text-decoration:underline}


 
/* Container: piena larghezza interna + padding dinamico */
.container{padding-left:var(--pad-inline)!important;padding-right:var(--pad-inline)!important;max-width:var(--container-max);width:100%}

.bg-brand{background-color:var(--brand)!important}
.bg-brand-light{background-color:var(--brand-light)!important}
.text-brand{color:var(--brand)!important}
.shadow-soft{box-shadow:var(--shadow-soft)!important}
.rounded-2xl{border-radius:1rem!important}

/* Hero */
.hero{position:relative;color:#fff;background:center/cover no-repeat url('../images/heroBG_bim_bw.jpg')}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.1))}

/* Accessibilità skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:0;top:0;width:auto;height:auto;background:#fff;color:var(--brand);padding:.5rem .75rem;border-radius:.5rem;z-index:1050}

.resource-card{transition:box-shadow .2s ease,transform .2s ease}
.resource-card:hover{box-shadow:var(--shadow-soft);transform:translateY(-1px)}
.icon-pill{width:2.5rem;height:2.5rem;border-radius:.75rem;display:grid;place-items:center;font-weight:700;background:color-mix(in srgb, var(--brand) 10%, transparent);color:var(--brand)}
/* Dimensionamento e colore dell'icona all'interno del pill */
.icon-pill svg, .icon-pill i {font-size:1.25rem; line-height:1; color:var(--brand)}
.section-bar{height:.375rem;width:3rem;background:var(--brand);border-radius:999px;margin-bottom:.75rem}

.accordion-button::after{transition:transform .2s ease}
.accordion-button:not(.collapsed)::after{transform:rotate(180deg)}
#faq .accordion .accordion-item + .accordion-item{margin-top:1rem}
#faq .accordion-item{border:1px solid color-mix(in srgb, var(--brand) 12%, transparent);border-radius:1rem;overflow:hidden;background:#fff;box-shadow:var(--shadow-soft)}
#faq .accordion-button{padding:1.125rem 1.25rem;background:linear-gradient(0deg, rgba(0,64,128,.03), rgba(0,64,128,0));}
#faq .accordion-button:not(.collapsed){background:color-mix(in srgb, var(--brand-light) 60%, white)}
#faq .accordion-body{padding:1rem 1.25rem}
#faq .accordion-button:focus{box-shadow:0 0 0 .25rem color-mix(in srgb, var(--brand) 20%, transparent)}

/* Centratura orizzontale delle sezioni principali */
main section,
.hero,
section.bg-brand-light {display:flex;justify-content:center}
main section > .container,
.hero > .container,
section.bg-brand-light > .container {max-width:var(--container-max);flex:1}

/* Forza width 100% ad elementi prima limitati da colonne */
.w-100-force{width:100%!important;max-width:100%!important;flex:0 0 100%!important}
.hero .container > .limit,
#contesto-wrapper,
#percorsi header,
#percorsi article,
#materiali header,
#faq header,
#faq .accordion{width:100%!important}

/* Header: tre loghi */
.header-logos img{height:40px;width:auto;max-width:100%;object-fit:contain}
.header-logos .logo-indire{transform:scale(0.9);transform-origin:center}
@media (min-width: 992px){.header-logos img{height:56px}.header-logos .logo-indire{transform:scale(0.9)}}

/* Ombra sticky header */
nav.sticky-top{box-shadow:var(--header-shadow);background:#fff;z-index:1030}