/*
 * UICI Trieste — design system.
 *
 * Single source of truth for the palette, typography, focus styles, the [data-hc]
 * high-contrast remap and the reduced-motion rules (PRD §7, CLAUDE.md rule 7).
 *
 * Ported from dev/reference/bozza-sito.html — the approved spec, already tested at
 * 320-1440px, keyboard, 400% zoom and high contrast. Token values are verbatim:
 * every one is contrast-verified, so do not "adjust" them.
 */

/*
 * Atkinson Hyperlegible, self-hosted.
 *
 * Designed by the Braille Institute specifically so that characters which usually
 * collapse into each other at low vision — I/l/1, O/0, b/d — stay distinguishable.
 * It is the single most defensible type choice this site can make, and the reason
 * we do not use the kit's Inter.
 *
 * Self-hosted rather than pulled from Google Fonts: no third-party request on first
 * load (CLAUDE.md rule 9), and no visitor IP handed to Google, which is what makes
 * Google Fonts a live GDPR exposure for an Italian ETS. The latin-ext faces load
 * only for the characters that need them.
 */
@font-face{
  font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-400-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-700-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-400i.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --font:"Atkinson Hyperlegible","Segoe UI",Tahoma,Verdana,system-ui,-apple-system,sans-serif;
  --blu-marchio:#2a9fd8;
  --blu-link:#0e5b84;
  --blu-profondo:#0b3d5c;
  --blu-notte:#072b41;
  --rosso:#b8231c;
  /* #b8231c is 6.37:1 on white — fine for fills and large type, short of the 7:1
     this project holds itself to for body text. Use --rosso-testo (7.30:1) whenever
     red is the colour of the words themselves. */
  --rosso-testo:#a81f19;
  --verde:#1f7a35;
  --giallo:#f5e01a;
  --testo:#1a1a1a;
  --testo-soft:#3d3d3d;
  --bianco:#ffffff;
  --grigio-bg:#f4f6f8;
  --grigio-bordo:#c9d2d9;
  /* Borders of things you can operate — inputs, buttons, switches — need 3:1 against
     their background under WCAG 1.4.11. --grigio-bordo is only 1.53:1 and is for
     decorative rules and panel edges. */
  --bordo-controllo:#7c8a97;
  /* Same rule as --bordo-controllo but for controls sitting on the dark navy strip:
     3.75:1 against #072b41, so the segmented control has a visible boundary. */
  --bordo-strumenti:#6b8496;
  --focus:#b8231c;
  --base:18px;
  --radius:10px;
  --maxw:74rem;
}

/* ---- modalità alto contrasto ---- */
html[data-hc="on"]{
  --blu-link:#ffffff;
  --blu-profondo:#000000;
  --blu-notte:#000000;
  --testo:#ffffff;
  --testo-soft:#ffffff;
  --bianco:#000000;
  --grigio-bg:#000000;
  --grigio-bordo:#ffffff;
  --rosso:#ffd400;
  --rosso-testo:#ffd400;
  --verde:#00e05a;
  --bordo-controllo:#ffffff;
  --bordo-strumenti:#ffffff;
  --focus:#ffd400;
}

/* ---------- movimento: entrate ----------
   Theme-owned entrance motion, deliberately not Elementor's: Elementor hides every
   animated element with visibility:hidden until it scrolls into view, which removes
   it from the screen reader's reading order. Here nothing is ever hidden — only
   opacity and a small offset change — so screen readers, keyboard and search engines
   always get the full page.

   Opt-in by class (Elementor: Advanced > CSS Classes):
     uici-appare          the element fades in as it scrolls into view
     uici-appare-gruppo   its children fade in one after another (card rows)
     uici-hero-sequenza   its children rise in on page load, 100ms apart
     uici-hero-ultimo     the last beat of the hero sequence

   Everything sits inside prefers-reduced-motion: no-preference, so with "reduce
   motion" nothing moves at all. The scroll fades use CSS scroll-driven animations
   (no JavaScript); browsers without them (Firefox, for now) simply show the page.
   Each fade completes within the first 8rem of scrolling, whatever the element's
   height, so a tall section is never half-transparent while being read. */
@keyframes uici-sale{from{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:none}}
@keyframes uici-appare{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:no-preference){
  /* Hero: the one orchestrated moment, time-based on load. */
  .uici-hero-sequenza > :not(.e-con-inner),
  .uici-hero-sequenza > .e-con-inner > *,
  .uici-hero-ultimo{animation:uici-sale .8s cubic-bezier(.22,1,.36,1) both}
  .uici-hero-sequenza > :nth-child(2),.uici-hero-sequenza > .e-con-inner > :nth-child(2){animation-delay:.1s}
  .uici-hero-sequenza > :nth-child(3),.uici-hero-sequenza > .e-con-inner > :nth-child(3){animation-delay:.2s}
  .uici-hero-sequenza > :nth-child(4),.uici-hero-sequenza > .e-con-inner > :nth-child(4){animation-delay:.3s}
  .uici-hero-ultimo{animation-delay:.45s}

  /* Everything else: a quiet fade, no movement, tied to scrolling. */
  @supports (animation-timeline:view()){
    .uici-appare,
    .uici-appare-gruppo > :not(.e-con-inner),
    .uici-appare-gruppo > .e-con-inner > *{
      animation:uici-appare linear both;
      animation-timeline:view();
      animation-range:entry 0 entry 8rem;
    }
    .uici-appare-gruppo > :nth-child(2),.uici-appare-gruppo > .e-con-inner > :nth-child(2){animation-range:entry 1.5rem entry 9.5rem}
    .uici-appare-gruppo > :nth-child(3),.uici-appare-gruppo > .e-con-inner > :nth-child(3){animation-range:entry 3rem entry 11rem}
    .uici-appare-gruppo > :nth-child(n+4),.uici-appare-gruppo > .e-con-inner > :nth-child(n+4){animation-range:entry 4.5rem entry 12.5rem}
  }
}
/* Keyboard focus never lands on something still faint. */
.uici-appare:focus-within,
.uici-appare-gruppo > :focus-within,
.uici-appare-gruppo > .e-con-inner > :focus-within{animation:none!important;opacity:1}

/* ---------- alto contrasto: aree Elementor ----------
   The [data-hc] token remap above only reaches the theme's own components. Everything
   built in Elementor takes its colours from the kit's globals, and the kit uses the
   same tokens both ways round (dark text on light, light text on dark), so remapping
   tokens cannot work. Instead, while the toggle is on, Elementor areas are flattened
   the way the OS high-contrast mode does it: black ground, white text and borders,
   no background photos or overlays (rule 13 — no text over a photograph), yellow
   buttons, underlined white links.
   !important is unavoidable: Elementor writes per-element CSS three classes deep.
   Theme shortcodes (.elementor-shortcode: bollettino, video) keep their own
   [data-hc] styling and are left alone. */
html[data-hc="on"] .elementor *:not(.elementor-shortcode *){
  background-color:#000!important;background-image:none!important;
  color:#fff!important;border-color:#fff!important;
  box-shadow:none!important;text-shadow:none!important;
}
html[data-hc="on"] .elementor .e-con::before,
html[data-hc="on"] .elementor .e-con::after,
html[data-hc="on"] .elementor .elementor-background-overlay{background:none!important;opacity:0!important}
html[data-hc="on"] .elementor svg:not(.elementor-shortcode *),
html[data-hc="on"] .elementor svg:not(.elementor-shortcode *) *{fill:currentColor!important}
html[data-hc="on"] .elementor a:not(.elementor-button):not(.elementor-shortcode *){text-decoration:underline!important}
html[data-hc="on"] .elementor .elementor-nav-menu a{text-decoration:none!important}
html[data-hc="on"] .elementor .elementor-nav-menu a:hover,
html[data-hc="on"] .elementor .elementor-nav-menu a[aria-current]{color:#ffd400!important;text-decoration:underline!important}
html[data-hc="on"] .elementor .elementor-nav-menu a::before,
html[data-hc="on"] .elementor .elementor-nav-menu a::after{background-color:#ffd400!important}
html[data-hc="on"] .elementor .elementor-button,
html[data-hc="on"] .elementor .elementor-button *{background-color:#ffd400!important;color:#000!important;border-color:#ffd400!important}
html[data-hc="on"] .elementor .elementor-button:hover .elementor-button-text{text-decoration:underline!important}
/* Logos carry dark lettering on transparent: keep them on a white plate. */
html[data-hc="on"] .elementor-location-header .elementor-widget-image img,
html[data-hc="on"] .elementor-location-footer .elementor-widget-image img{background-color:#fff!important;padding:4px;border-radius:6px}
/* Theme data rendered inside Elementor text widgets ([uici_orari] etc.). */
html[data-hc="on"] .elementor .dot.open{background-color:#00e05a!important}
html[data-hc="on"] .elementor .dot.closed{background-color:#ffd400!important}
html[data-hc="on"] .elementor .oggi-tag{background-color:#ffd400!important;color:#000!important}

/* ---------- alto contrasto: fine ---------- */

/*
 * Menu indicator (Elementor header, desktop).
 *
 * A 3px bar above the label, as wide as the words rather than the padded link, so it
 * reads as belonging to the text and never meets the dropdown that opens below. It
 * grows from the centre on hover and keyboard focus, and stays, darker, over the
 * current section (aria-current, set by the theme's nav filter). Reduced motion: it
 * simply appears. Elementor's own pointer is set to
 * "none" in the widget, so the two never stack.
 */
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item{position:relative}
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item::before{
  content:"";position:absolute;top:4px;left:20px;right:20px;height:3px;border-radius:3px;
  background:var(--blu-link);transform:scaleX(0);transform-origin:50% 50%;
  /* Elementor hides ::before on every non-hovered link with a five-class selector
     (.elementor-item:not(:hover):not(:focus)…); visibility here is the scale. */
  opacity:1!important;
}
/* The dropdown arrow is part of the link: keep the bar over the words only. */
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.has-submenu::before{right:48px}
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item:hover::before,
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item:focus-visible::before,
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within > a.elementor-item::before{transform:scaleX(1)}
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > a[aria-current]::before{transform:scaleX(1);background:var(--blu-profondo)}
@media (prefers-reduced-motion:no-preference){
  .elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item::before{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
}

/*
 * Elementor desktop menu: submenus reachable by keyboard.
 *
 * SmartMenus keeps a submenu at display:none until the mouse hovers its parent, so a
 * Tab from "Chi siamo" jumped straight to "Servizi" and the subpages were unreachable
 * without a mouse (WCAG 2.1.1). The submenu now stays in the layout, transparent and
 * inert, and appears on hover or as soon as focus enters the item. uici.js keeps
 * aria-expanded in step. The mobile dropdown has its own toggles and is untouched.
 */
.elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children{position:relative}
.elementor-nav-menu--main .elementor-nav-menu .sub-menu{
  display:block!important;opacity:0;pointer-events:none;
  position:absolute!important;top:100%!important;left:0!important;margin:0!important;min-width:14rem;z-index:100;
}
.elementor-nav-menu--main .elementor-nav-menu li:hover > .sub-menu,
.elementor-nav-menu--main .elementor-nav-menu li:focus-within > .sub-menu{opacity:1;pointer-events:auto}

/*
 * Circular icon-only links in the builder.
 *
 * The kit's card arrows are anchors containing nothing but an icon, so a screen reader
 * announces "link" and stops. Elementor has no aria-label field on the Button widget,
 * so the label goes in the button text and is hidden visually here — the design is
 * unchanged and the destination is announced. Add the class in Advanced > CSS Classes.
 */
.uici-solo-icona .elementor-button-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/*
 * Buttons — shared behaviour (the design system page shows every variant).
 *
 * Colours, shape and type come from the Elementor widgets, set per variant by
 * dev/bin/normalize-buttons.php from kit tokens. What Elementor cannot express lives
 * here. Hover moves the fill one step (P500 -> P700), a change of only 1.55:1, so the
 * label also underlines: the hover and focus state never rests on colour alone.
 * Scoped to <main>: the header and footer keep their own buttons.
 */
main .elementor-button:hover .elementor-button-text,
main .elementor-button:focus-visible .elementor-button-text{
  text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.09em;
}

/*
 * Round arrow button (class uici-solo-icona): the arrow points up-right at rest and
 * turns to point right on hover or focus — "go there". Rebuilt in the theme: the icon
 * used to come from ElementsKit and the rotation from GUM Elementor Addon, and both
 * plugins are off. The icon is now Elementor's own Font Awesome arrow, inline SVG.
 */
.uici-solo-icona .elementor-button-icon{display:inline-flex;margin:0}
/* "Ferma le immagini": the stop button of a background slideshow (assets/js/uici.js).
   It sits on the navy wash of the section, bottom right; on a phone it follows the
   content. In high contrast there are no background pictures, so there is nothing
   to stop. The selector carries "main button" to outrank the kit's own button style. */
main button.uici-slide-pausa{
  position:absolute;right:2.5rem;bottom:2.5rem;z-index:2;
  min-height:2.75rem;padding:.5rem .9rem;border:1px solid #fff;border-radius:8px;
  background:transparent;color:#fff;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
}
main button.uici-slide-pausa:hover{background:#fff;color:var(--blu-notte);text-decoration:underline}
html[data-hc="on"] .uici-slide-pausa{display:none}
@media (max-width:47.9375rem){main button.uici-slide-pausa{position:static;align-self:flex-start;margin-top:1rem}}
/* A card title is an h3, and the theme's h3 opens a text section with 1.8em above it:
   inside a card that was just dead space over the title. */
.elementor-widget-image-box .elementor-image-box-title{margin-top:0}
.uici-solo-icona .elementor-button-icon svg{width:1.25rem;height:1.25rem;fill:currentColor;transform:rotate(-45deg)}
.uici-solo-icona .elementor-button:hover .elementor-button-icon svg,
.uici-solo-icona .elementor-button:focus-visible .elementor-button-icon svg{transform:rotate(0deg)}
@media (prefers-reduced-motion:no-preference){
  .uici-solo-icona .elementor-button-icon svg{transition:transform .45s cubic-bezier(.22,1,.36,1)}
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--base);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:1rem;
  line-height:1.65;
  color:var(--testo);
  background:var(--bianco);
}
/* The kit sets the body text colour on .elementor-kit-236 (the body class) from its
   own global, which the [data-hc] remap above does not reach. Without this, text
   pages in high contrast are #1a1a1a on black. */
html[data-hc="on"] body{background:#000;color:#fff}
/* Same for text links: .elementor-kit-236 a (0,1,1) beats the theme's a{} and keeps
   them #0e5b84 — about 3:1 on black. Plain links only; buttons carry classes and
   their own high-contrast rules. */
html[data-hc="on"] a:not([class]){color:var(--blu-link)}
img{max-width:100%;height:auto}
h1,h2,h3,h4{line-height:1.25;color:var(--blu-profondo);margin:0 0 .6em;font-weight:700;letter-spacing:-.01em;overflow-wrap:break-word;hyphens:auto}
html[data-hc="on"] h1,html[data-hc="on"] h2,html[data-hc="on"] h3,html[data-hc="on"] h4{color:#fff}
h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem)}
h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.85rem);margin-top:2.2em}
h3{font-size:1.2rem;margin-top:1.8em}
p,li{max-width:68ch;overflow-wrap:break-word}
p{margin:0 0 1.1em}
a{color:var(--blu-link);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.09em}
a:hover{text-decoration-thickness:.18em}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px;border-radius:3px}
main:focus,main:focus-visible{outline:none}
h1:focus-visible{outline:4px solid var(--focus);outline-offset:6px}
html[data-hc="on"] :focus-visible{outline-color:#ffd400}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--rosso);color:#fff;padding:1rem 1.6rem;font-weight:700;
  text-decoration:none;border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}
html[data-hc="on"] .skip{background:#ffd400;color:#000}

/* ---------- barra strumenti accessibilità ----------
   These controls exist for low-vision users — the "ipovedenti" in the association's
   name, and the majority of its members. Blind users have a screen reader and never
   touch them.

   An earlier version made every control 44px with 2px borders on the theory that
   bigger is more accessible. It was about 90px tall and read as a debug toolbar,
   which is its own kind of failure: it made the association's own site look
   unfinished above the fold, on every page. What low-vision users need here is
   contrast and legible text, not oversized chrome, so the weight comes down while
   the type stays at full size and every target still clears the 24px of WCAG 2.5.8
   by a wide margin. */
.a11ybar{background:var(--blu-notte);color:#fff;font-size:.95rem}
html[data-hc="on"] .a11ybar{border-bottom:2px solid #fff}
.a11ybar .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;padding:.35rem 1.5rem}
/* Desktop: same edges as the Elementor header below (48px), so the contacts line up
   with the logo and the reading tools with the "Sostienici" button. */
@media (min-width:64.0625rem){.a11ybar .wrap{max-width:none;padding-left:48px;padding-right:48px}}

/* The number is the most-used thing on the site; it is why this strip exists. */
/* Secretariat contacts: two action links, verb then value. The whole phrase is the
   link, so a screen reader announces "Chiamaci 040 768046". A 1px rule divides them;
   no icons, no all-caps label. */
.a11ybar__contatti{list-style:none;margin:0 auto 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.a11ybar__contatti li{max-width:none;margin:0;display:flex;align-items:center}
.a11ybar__contatti li + li::before{content:"";width:1px;height:1.1em;background:var(--bordo-strumenti);margin:0 1rem}
.a11ybar__contatti a{color:#fff;text-decoration:none;display:inline-flex;align-items:baseline;gap:.45em;padding:.35rem 0;min-height:2.75rem;align-items:center}
.a11ybar__contatti .verbo{color:var(--grigio-bordo);font-weight:400}
.a11ybar__contatti .valore{font-weight:700;letter-spacing:.01em}
.a11ybar__contatti a:hover .valore,.a11ybar__contatti a:focus-visible .valore{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.09em}
html[data-hc="on"] .a11ybar__contatti .verbo{color:#fff}

.a11ygroup{display:flex;align-items:center;gap:.55rem}
.a11ygroup__label{color:var(--grigio-bordo);font-size:.86rem;letter-spacing:.04em;text-transform:uppercase}

/* The three text-size controls are one control, so they are drawn as one: a single
   bordered group with hairline dividers, not three floating boxes. */
.a11yseg{display:inline-flex;border:1px solid var(--bordo-strumenti);border-radius:8px;overflow:hidden}
.a11yseg button + button{border-left:1px solid var(--bordo-strumenti)}

.a11ybar button{
  font:inherit;font-weight:700;cursor:pointer;
  background:transparent;color:#fff;border:0;
  padding:.25rem .8rem;min-height:2.1rem;min-width:2.6rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
}
.a11ybar button:hover{background:rgba(255,255,255,.16)}
.a11ytoggle{border:1px solid var(--bordo-strumenti)!important;border-radius:999px;padding:.25rem .5rem .25rem .9rem!important}
.a11ybar button[aria-pressed="true"]{background:#fff;color:var(--blu-notte)}

/* The toggle states its state in words. Inverting the colours alone would be meaning
   carried by colour, which this site does not do (PRD §1). */
.a11ytoggle__state{
  font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.16);border-radius:999px;
  padding:.1rem .6rem;
}
.a11ybar button[aria-pressed="true"] .a11ytoggle__state{background:var(--blu-notte);color:#fff}

/* ---------- header ---------- */
.masthead{background:var(--bianco);border-bottom:1px solid var(--grigio-bordo)}
.masthead .wrap{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.5rem}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit}
.brand img{height:64px;width:auto;flex:none}
.brand .nome{font-weight:700;font-size:1.08rem;color:var(--blu-profondo);line-height:1.25;letter-spacing:-.01em}
.brand .sott{display:block;font-weight:600;font-size:.9rem;color:var(--rosso);letter-spacing:.02em;text-transform:uppercase}
html[data-hc="on"] .brand .nome{color:#fff}
html[data-hc="on"] .brand .sott{color:#ffd400}
html[data-hc="on"] .brand img{background:#fff;padding:4px;border-radius:6px}

/* ---------- nav ---------- */
.mainnav{background:var(--blu-profondo)}
html[data-hc="on"] .mainnav{border-top:2px solid #fff;border-bottom:2px solid #fff}
.mainnav ul{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;max-width:var(--maxw)}
.mainnav li{margin:0;max-width:none}
.mainnav a{
  display:block;padding:.95rem 1.1rem;color:#fff;text-decoration:none;
  font-weight:600;border-bottom:5px solid transparent;
}
.mainnav a:hover{background:rgba(255,255,255,.14);text-decoration:underline}
.mainnav a[aria-current="page"]{border-bottom-color:var(--giallo);background:rgba(255,255,255,.1)}
html[data-hc="on"] .mainnav a[aria-current="page"]{background:#ffd400;color:#000;border-bottom-color:#ffd400}

/* ---------- layout pagina ---------- */
main{display:block;padding:2.5rem 0 4rem}
/* Pages built in Elementor space their own sections; the theme padding above is for
   text pages and left a band between the header and the first section. */
body.elementor-page main{padding:0}
/* Elementor pages that keep the theme template (Page Layout: Theme) still open with the
   breadcrumb and the H1 from page.php, so they need the same air above as a text page. */
body.page-template-elementor_theme main{padding-top:2.5rem}
.breadcrumb{font-size:.92rem;margin-bottom:1.2rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.breadcrumb li{max-width:none}
.breadcrumb li+li::before{content:"\203A";margin-right:.4rem;color:var(--testo-soft)}
html[data-hc="on"] .breadcrumb li+li::before{color:#fff}
.lead{font-size:1.15rem;color:var(--testo-soft);max-width:60ch}
html[data-hc="on"] .lead{color:#fff}

/* ---------- blocco operativo home ---------- */
.hero{background:var(--grigio-bg);border-bottom:1px solid var(--grigio-bordo);padding:2.5rem 0 2.2rem}
html[data-hc="on"] .hero{border-bottom:2px solid #fff}
.hero h1{margin-bottom:.4em}
.opgrid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));margin-top:2rem}
.opcard{background:var(--bianco);border:2px solid var(--grigio-bordo);border-radius:var(--radius);padding:1.4rem 1.5rem}
.opcard h2{margin:0 0 .7em;font-size:1.1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--rosso)}
html[data-hc="on"] .opcard h2{color:#ffd400}
.stato{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.1rem;margin-bottom:.8rem}
.dot{width:.85rem;height:.85rem;border-radius:50%;flex:none;border:2px solid var(--blu-profondo)}
.dot.open{background:var(--verde)}
.dot.closed{background:var(--rosso)}
.orari{list-style:none;margin:0;padding:0;font-size:1rem}
.orari li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;border-bottom:1px dotted var(--grigio-bordo);max-width:none}
.orari li:last-child{border-bottom:0}
.orari .g{font-weight:600}
/* A yellow wash read as muddy olive on the pale blue contact card, and yellow is the
   one colour this palette keeps off light backgrounds. A rule in the brand blue works
   on any card colour, and the "oggi" tag beside it carries the meaning in words. */
.orari li.oggi{
  font-weight:700;background:none;
  border-left:4px solid var(--blu-link);border-radius:0;
  padding-left:.6rem;margin-left:-1rem;
}
.oggi-tag{
  flex:none;margin-left:.6rem;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--bianco);background:var(--blu-link);
  border-radius:999px;padding:.05rem .5rem;
}
html[data-hc="on"] .orari li.oggi{border-left-color:#ffd400}
html[data-hc="on"] .oggi-tag{background:#ffd400;color:#000}
.contatti-list{list-style:none;margin:0;padding:0}
.contatti-list li{padding:.35rem 0;max-width:none}
.contatti-list a{font-weight:700;font-size:1.1rem}
.nota-orari{margin:.9rem 0 0;font-size:.95rem}
.indirizzo{margin:1rem 0 0}
.indirizzo + p{margin:.4rem 0 0}

/* ---------- card ---------- */
.cards{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));margin:1.6rem 0 0;padding:0;list-style:none}
.cards li{max-width:none;margin:0}
.card{
  display:flex;flex-direction:column;height:100%;
  background:var(--bianco);border:2px solid var(--grigio-bordo);
  border-radius:var(--radius);padding:1.4rem;
}
.card h3{margin:0 0 .5em;font-size:1.15rem}
.card p{font-size:.98rem;color:var(--testo-soft);flex:1}
html[data-hc="on"] .card p{color:#fff}
.card a.go{font-weight:700;align-self:flex-start}
.card--azione{background:var(--blu-profondo);border-color:var(--blu-profondo)}
.card--azione h3,.card--azione p{color:#fff}
.card--azione a.go{color:var(--giallo)}
html[data-hc="on"] .card--azione{border-color:#fff}
html[data-hc="on"] .card--azione a.go{color:#ffd400}

/* ---------- banner centenario ---------- */
.cent{
  background:var(--blu-profondo);color:#fff;border-radius:var(--radius);
  padding:2.2rem;margin:2.5rem 0;border:2px solid var(--blu-profondo);
}
html[data-hc="on"] .cent{border-color:#fff}
.cent h2{color:#fff;margin-top:0}
.cent .anni{font-size:clamp(2.2rem,1.5rem + 3vw,3.4rem);font-weight:800;color:var(--giallo);line-height:1;letter-spacing:-.02em;margin:0 0 .3em}
html[data-hc="on"] .cent .anni{color:#ffd400}
.cent p{color:#fff}
.btn{
  display:inline-block;background:var(--giallo);color:#0b3d5c;font-weight:800;
  text-decoration:none;padding:.85rem 1.5rem;border-radius:8px;border:2px solid var(--giallo);
  min-height:2.9rem;
}
.btn:hover{background:#fff;border-color:#fff;text-decoration:underline}
html[data-hc="on"] .btn{background:#ffd400;color:#000;border-color:#ffd400}
.btn--out{background:transparent;color:#fff;border-color:#fff}
.btn--out:hover{background:#fff;color:var(--blu-profondo)}

/* ---------- scheda "in breve" ---------- */
.inbreve{background:var(--grigio-bg);border-left:8px solid var(--blu-marchio);border-radius:0 var(--radius) var(--radius) 0;padding:1.5rem 1.7rem;margin:1.8rem 0}
html[data-hc="on"] .inbreve{border:2px solid #fff;border-left-width:8px}
.inbreve dl{margin:0;display:grid;grid-template-columns:minmax(7rem,auto) 1fr;gap:.6rem 1.4rem}
.inbreve dt{font-weight:700;color:var(--blu-profondo)}
html[data-hc="on"] .inbreve dt{color:#ffd400}
.inbreve dd{margin:0}

/* ---------- avvisi ---------- */
.nota{border:2px solid var(--rosso);border-radius:var(--radius);padding:1.2rem 1.4rem;margin:1.6rem 0;background:#fdf4f3}
html[data-hc="on"] .nota{background:#000}
.nota p:last-child{margin-bottom:0}
.nota strong{color:var(--rosso)}
html[data-hc="on"] .nota strong{color:#ffd400}
.nota .tag{display:inline-block;background:var(--rosso);color:#fff;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .6rem;border-radius:4px;margin-bottom:.7rem}
html[data-hc="on"] .nota .tag{background:#ffd400;color:#000}

/* ---------- codice fiscale ---------- */
.cf{background:var(--blu-profondo);color:#fff;border-radius:var(--radius);padding:1.5rem;margin:1.4rem 0;max-width:34rem}
html[data-hc="on"] .cf{border:2px solid #fff}
.cf .et{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 .4rem;color:var(--giallo)}
html[data-hc="on"] .cf .et{color:#ffd400}
.cf .num{font-size:clamp(1.35rem,1rem + 2vw,2.1rem);font-weight:800;letter-spacing:.14em;overflow-wrap:break-word;font-family:"Courier New",monospace;margin:0;color:#fff}

/* ---------- liste servizi ---------- */
.svclist{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.9rem}
.svclist li{max-width:none;margin:0}
.svclist a{
  display:block;background:var(--bianco);border:2px solid var(--grigio-bordo);
  border-left:8px solid var(--blu-marchio);border-radius:0 var(--radius) var(--radius) 0;
  padding:1.1rem 1.3rem;text-decoration:none;color:var(--testo);
}
.svclist a:hover{border-color:var(--blu-link);border-left-color:var(--blu-link);background:var(--grigio-bg)}
.svclist .t{display:block;font-weight:700;font-size:1.12rem;color:var(--blu-link);text-decoration:underline;margin-bottom:.2rem}
.svclist .d{display:block;font-size:.97rem;color:var(--testo-soft)}
html[data-hc="on"] .svclist .t{color:#fff}
html[data-hc="on"] .svclist .d{color:#fff}
html[data-hc="on"] .svclist a{border-color:#fff;border-left-color:#ffd400}

/* ---------- timeline ---------- */
.tl{list-style:none;padding:0;margin:1.6rem 0 0}
.tl>li{max-width:none;margin:0 0 1.4rem;padding:0 0 0 1.6rem;border-left:4px solid var(--blu-marchio)}
html[data-hc="on"] .tl>li{border-left-color:#ffd400}
.tl .anno{display:inline-block;background:var(--blu-profondo);color:#fff;font-weight:800;font-size:1rem;padding:.25rem .7rem;border-radius:5px;margin-bottom:.45rem;font-family:"Courier New",monospace;letter-spacing:.05em}
html[data-hc="on"] .tl .anno{background:#ffd400;color:#000}
/* Editor variant: a plain list block with the class "tl", each item opening with the
   year in bold. Nothing to learn for whoever adds next year's entry. */
.tl>li>strong:first-child{display:table;background:var(--blu-profondo);color:#fff;font-weight:700;font-size:1rem;padding:.2rem .7rem;border-radius:5px;margin-bottom:.4rem;letter-spacing:.03em}
html[data-hc="on"] .tl>li>strong:first-child{background:#ffd400;color:#000}
body.page:not(.elementor-page) .entry-content .tl{margin:1.4rem 0 2rem;padding:0}
.tl h3{margin:.1rem 0 .3rem;font-size:1.1rem}
.tl p{margin:0;font-size:.99rem;color:var(--testo-soft)}
html[data-hc="on"] .tl p{color:#fff}

/* ---------- tabella ---------- */
.tablewrap{overflow-x:auto;margin:1.4rem 0;border-radius:var(--radius)}
.tablewrap:focus-visible{outline:4px solid var(--focus);outline-offset:2px}
table{border-collapse:collapse;width:100%;margin:0;font-size:.99rem;min-width:30rem}
caption{text-align:left;font-weight:700;color:var(--blu-profondo);margin-bottom:.6rem}
html[data-hc="on"] caption{color:#fff}
th,td{border:1px solid var(--grigio-bordo);padding:.7rem .9rem;text-align:left;vertical-align:top}
th{background:var(--grigio-bg);color:var(--blu-profondo)}
html[data-hc="on"] th{background:#000;color:#ffd400}

/* ---------- news ---------- */
.news{list-style:none;padding:0;margin:1.4rem 0 0}
.news li{max-width:none;border-top:1px solid var(--grigio-bordo);padding:1.2rem 0}
.news time{display:block;font-size:.88rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--rosso);margin-bottom:.3rem}
html[data-hc="on"] .news time{color:#ffd400}
.news h3{margin:0 0 .35rem;font-size:1.15rem}
.news p{margin:0;font-size:.98rem;color:var(--testo-soft)}
html[data-hc="on"] .news p{color:#fff}

/* ---------- text pages ----------
   Pages written in the WordPress editor (not built in Elementor: no .elementor-page)
   and single bulletins read as one centred column: 780px of content on desktop, plus
   the .wrap gutters added on top so they never eat into it. Below that width the
   max-width no longer applies. Inside, everything is left-aligned — the generic
   .entry-content > * rule would centre each 68ch paragraph while headings run full
   width, staggering the two. Headings are scaled down from the kit's display sizes,
   which are meant for home-page sections, not running text. */
.single-bollettino main > .wrap,
body.page:not(.elementor-page) main > .wrap{max-width:calc(780px + 3rem)}
/* The kit's H1 (up to 6rem) is a home-page display size: in this column it breaks
   single words across lines. Titles never hyphenate — a split word is harder to
   read at high zoom and is spelled out oddly by some screen readers. */
.single-bollettino main h1,
body.page-template-elementor_theme main h1,
body.page:not(.elementor-page) main h1{font-size:clamp(2.2rem,1.6rem + 2.5vw,3.2rem);line-height:1.15;hyphens:manual}
body.page:not(.elementor-page) .entry-content > *{margin-left:0;margin-right:0}
body.page:not(.elementor-page) .entry-content p,
body.page:not(.elementor-page) .entry-content li{max-width:none}
body.page:not(.elementor-page) .entry-content p{margin:0 0 1em}
body.page:not(.elementor-page) .entry-content h2{font-size:1.6rem;margin:1.8em 0 .6em}
body.page:not(.elementor-page) .entry-content h3{font-size:1.25rem;margin:1.5em 0 .5em}
body.page:not(.elementor-page) .entry-content .lead{font-size:1.15rem}
/* In-page index ("In questa pagina") and its targets. No tinted ground: the link blue
   does not hold 7:1 on the grey. The offset keeps a target heading clear of the sticky
   header when its link is followed. */
.in-pagina{border-left:6px solid var(--blu-link);padding:.2rem 0 .2rem 1.2rem;margin:1.6rem 0}
.in-pagina p{font-weight:700;margin:0 0 .5rem}
.in-pagina ul{margin:0;padding-left:1.2rem}
.in-pagina li{margin:.3rem 0}
html[data-hc="on"] .in-pagina{border-left-color:#ffd400}
.entry-content :is(h2,h3)[id]{scroll-margin-top:8rem}
/* An anchored H2 opens a section that used to be a page of its own: more air above it
   than above an ordinary heading, so the sections read as separate things. */
body.page:not(.elementor-page) .entry-content h2[id]{margin-top:4.5rem}
/* [uici_foto]: the Section's own photographs. A tall portrait is cropped rather than
   allowed to push the text a screen further down; in a row they share one shape. */
.uici-foto{margin:1.6rem 0}
.uici-foto img{display:block;width:auto;max-width:100%;height:auto;max-height:34rem;object-fit:cover;border-radius:var(--radius)}
.uici-foto figcaption{margin-top:.5rem;font-size:.94rem;font-style:normal;color:var(--testo-soft);text-align:left}
html[data-hc="on"] .uici-foto figcaption{color:#fff}
.uici-foto-gruppo{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));margin:1.6rem 0}
.uici-foto-gruppo .uici-foto{margin:0}
.uici-foto-gruppo .uici-foto img{width:100%;aspect-ratio:4/3;max-height:none}
.wp-block-table{margin:1.2rem 0 1.6rem;overflow-x:auto}
.wp-block-table table{min-width:36rem}
/* Amounts never split from their currency sign. */
.uici-tabella td:nth-child(3){white-space:nowrap}
.wp-block-table figcaption{margin-top:.6rem;font-size:.94rem;font-style:normal;color:var(--testo-soft);text-align:left}
html[data-hc="on"] .wp-block-table figcaption{color:#fff}

/* ---------- bollettino settimanale ----------
   Colours are tokens only, used as text/background pairs that already clear 7:1 both
   ways (--blu-link on --bianco), so [data-hc] inverts them without extra rules. */
/* a.-qualified: the kit colours every link through .elementor-kit-236 a (0,1,1). */
/* Theme-rendered buttons follow the same spec as the Elementor variants "primario"
   and "secondario": 1px border, 12/24px padding, 8px radius, Button type, underline
   on hover/focus. */
a.bollettino__leggi,a.bollettino__pdf{
  display:inline-block;padding:12px 24px;font-size:1rem;line-height:1.5;
  border:1px solid;border-radius:8px;font-weight:700;text-decoration:none;
}
a.bollettino__leggi{background:var(--blu-link);border-color:var(--blu-link);color:var(--bianco)}
a.bollettino__pdf{background:transparent;border-color:var(--blu-profondo);color:var(--blu-profondo)}
a.bollettino__leggi:hover,a.bollettino__leggi:focus-visible,
a.bollettino__pdf:hover,a.bollettino__pdf:focus-visible{
  background:var(--blu-profondo);border-color:var(--blu-profondo);color:#fff;
  text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.09em;
}
/* High contrast: --blu-profondo becomes black, so the outline variant is redrawn. */
html[data-hc="on"] a.bollettino__pdf{border-color:#fff;color:#fff}
html[data-hc="on"] a.bollettino__leggi:hover,html[data-hc="on"] a.bollettino__leggi:focus-visible,
html[data-hc="on"] a.bollettino__pdf:hover,html[data-hc="on"] a.bollettino__pdf:focus-visible{background:#ffd400;border-color:#ffd400;color:#000}
.bollettino__file{font-weight:400}

.bollettino-home{
  background:var(--bianco);border:2px solid var(--grigio-bordo);border-left:8px solid var(--blu-link);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.6rem 1.8rem;
}
.bollettino-home p,.bollettino-home li{max-width:none}
.bollettino-home__argomenti a,.bollettino-home__titolo a{text-decoration:underline;text-underline-offset:.18em}
.bollettino-home__data,.bollettini__data,.bollettino__data{
  margin:0 0 .4rem;font-size:.94rem;font-weight:700;color:var(--rosso-testo);
}
.bollettino-home h3.bollettino-home__titolo{margin:0 0 1rem;font-size:1.6rem}
.bollettino-home__intro{margin:0 0 .4rem;font-weight:700}
.bollettino-home__argomenti{margin:0 0 .4rem;padding-left:1.3rem;columns:2 16rem;column-gap:2.5rem}
.bollettino-home__argomenti li{margin:0 0 .35rem;break-inside:avoid}
.bollettino-home__altri{margin:0;color:var(--testo-soft)}
.bollettino-home__azioni{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.4rem 0 0}
.bollettino-home--vuoto{margin:0;color:var(--testo-soft)}

.bollettino__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;margin:0 0 1.8rem}
.bollettino__meta p{margin:0}
.bollettino__indice{background:var(--grigio-bg);border-radius:var(--radius);padding:1.3rem 1.6rem;margin:0 0 2rem}
.bollettino .bollettino__indice h2{margin:0 0 .6rem;font-size:1.15rem}
.bollettino__indice ul{margin:0;padding-left:1.3rem;columns:2 16rem;column-gap:2.5rem}
.bollettino__indice li{margin:0 0 .3rem;break-inside:avoid}
/* Column width: see "text pages" above. */
.bollettino__testo p,.bollettino__testo li{max-width:none}
.bollettino__testo > *{margin-left:0;margin-right:0}
.bollettino .bollettino__testo p{margin:0 0 .9em}
.bollettino .bollettino__testo h2{font-size:1.3rem;margin:1.6em 0 .5em;scroll-margin-top:8rem}
.bollettino .bollettino__testo ul,.bollettino .bollettino__testo ol{margin:0 0 .9em;padding-left:1.3rem}
.bollettino__nav{border-top:1px solid var(--grigio-bordo);margin-top:3rem;padding-top:1.4rem}
.bollettino__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1rem 2.5rem}
.bollettino__nav li{max-width:none}
.bollettino__nav a{font-weight:700}
.bollettino__nav-titolo{display:block;font-weight:400}

.bollettini{list-style:none;margin:1.6rem 0 0;padding:0}
.bollettini li{max-width:none;border-top:1px solid var(--grigio-bordo);padding:1.2rem 0}
ul.bollettini h2{margin:0 0 .6rem;font-size:1.25rem}
.bollettini__pdf{margin:0}
.bollettini + .pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:1.4rem}
.bollettini + .pagination .page-numbers{display:inline-block;padding:.4rem .8rem;min-height:2.9rem;line-height:2rem}
.bollettini + .pagination .current{font-weight:700;border:2px solid var(--blu-link);border-radius:6px}

html[data-hc="on"] .bollettino-home{border-color:#fff;border-left-color:#ffd400}
@media (forced-colors:active){
  .bollettino-home,.bollettino__indice,.bollettino__leggi,.bollettino__pdf{border:2px solid CanvasText}
}

/* ---------- video ----------
   The native player, full width of its column up to 960px, 16:9 held by the
   width/height attributes so nothing shifts when the poster loads. */
/* !important: Elementor zeroes figure margins inside widgets with a selector four
   classes deep; centring is this component's own business. */
.uici-video{margin:0 auto!important;max-width:960px;width:100%}
.uici-video__player{background:#000;border-radius:var(--radius);overflow:hidden}
.uici-video video{display:block;width:100%;height:auto}
.uici-video__didascalia{margin:.9rem 0 0;font-style:normal;font-weight:700;color:var(--testo);max-width:none}
.uici-video__durata{display:block;font-weight:400;color:var(--testo-soft)}
.uici-video__scarica{display:inline-block;margin-top:.4rem;font-weight:700}
.uici-video__file{font-weight:400}
.uici-video__trascrizione{margin-top:1rem;border:2px solid var(--bordo-controllo);border-radius:8px;background:var(--bianco)}
.uici-video__trascrizione summary{cursor:pointer;padding:.75rem 1.1rem;min-height:2.9rem;font-weight:700;color:var(--blu-link)}
.uici-video__trascrizione summary:hover{text-decoration:underline}
.uici-video__testo{padding:0 1.1rem .4rem}
.uici-video__testo p{max-width:68ch;margin:0 0 .9em}
html[data-hc="on"] .uici-video__trascrizione{border-color:#fff}
html[data-hc="on"] a.uici-video__scarica{color:var(--blu-link)}
@media (forced-colors:active){.uici-video__trascrizione{border:2px solid CanvasText}}

/* ---------- design system (private page) ---------- */
.ds-colori{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr))}
.ds-colori li{max-width:none;margin:0;border:1px solid var(--grigio-bordo);border-radius:var(--radius);padding:0 0 .9rem;overflow:hidden;background:var(--bianco)}
.ds-campione{display:block;height:4.5rem;border-bottom:1px solid var(--grigio-bordo);margin-bottom:.7rem}
.ds-campione--trasparente{background:repeating-conic-gradient(#c9d2d9 0 25%,#fff 0 50%) 0 0/16px 16px!important}
.ds-nome,.ds-hex,.ds-contrasti{display:block;padding:0 1rem}
.ds-nome{font-weight:700}
.ds-hex{font-size:.9rem;color:var(--testo-soft);margin-bottom:.5rem}
.ds-hex code{font-size:.85rem}
.ds-verdetto{display:block;font-size:.9rem}
.ds-verdetto--ok::before{content:"✓ ";font-weight:700;color:var(--verde)}
.ds-verdetto--no::before{content:"✕ ";font-weight:700;color:var(--rosso-testo)}
.ds-tipi{list-style:none;margin:0;padding:0}
.ds-tipi li{max-width:none;margin:0;padding:1.2rem 0;border-top:1px solid var(--grigio-bordo)}
.ds-tipi p{max-width:none;margin:0}
.ds-tipo-campione{color:var(--blu-profondo);overflow-wrap:anywhere}
.ds-tipo-dati{margin-top:.4rem!important;font-size:.92rem;color:var(--testo-soft)}
.ds-componenti > h3{margin:2.2rem 0 .5rem;font-size:1.3rem}
.ds-componenti > h3:first-child{margin-top:0}
.ds-riga{display:flex;flex-wrap:wrap;gap:.8rem}
html[data-hc="on"] .ds-colori li{border-color:#fff}
html[data-hc="on"] .ds-hex,html[data-hc="on"] .ds-tipo-dati,html[data-hc="on"] .ds-tipo-campione{color:#fff}

/* ---------- link lists, service close, site map ----------
   .uici-percorsi: a list block whose items are links to other pages ("Approfondisci",
   the service guide, "Altri servizi"). Each item reads as a card; the link is the
   bold title, an optional description follows in plain text. */
.uici-percorsi{list-style:none;margin:1.2rem 0 2rem;padding:0;display:grid;gap:.75rem}
.uici-percorsi li{max-width:none;margin:0;padding:1rem 1.25rem;background:var(--bianco);border:1px solid var(--grigio-bordo);border-left:6px solid var(--blu-link);border-radius:0 var(--radius) var(--radius) 0}
.uici-percorsi a{font-size:1.08rem}
html[data-hc="on"] .uici-percorsi li{border-color:#fff;border-left-color:#ffd400}
.servizio-cta{margin:3rem 0 0;padding:1.6rem 1.8rem;background:var(--grigio-bg);border-radius:var(--radius)}
.servizio-cta h2,.servizio-altri h2{margin-top:0;font-size:1.4rem}
.servizio-cta p{max-width:none}
.servizio-cta__azioni{display:flex;flex-wrap:wrap;gap:.8rem;margin:1rem 0 0}
html[data-hc="on"] .servizio-cta{border:2px solid #fff}
.servizio-altri{margin-top:2.5rem}
/* Nine siblings stacked full-width make a long tail: two columns when there is room. */
.servizio-altri .uici-percorsi{grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),1fr))}
.mappa-sito,.mappa-sito ul{list-style:disc;padding-left:1.4rem}
.mappa-sito li{margin:.35rem 0}
body.page:not(.elementor-page) .entry-content .servizio-cta,body.page:not(.elementor-page) .servizio-altri{max-width:none}

/* ---------- footer ---------- */
.sitefooter{background:var(--blu-notte);color:#fff;padding:3rem 0 2rem;margin-top:3rem}
html[data-hc="on"] .sitefooter{border-top:2px solid #fff}
.sitefooter h2{color:#fff;font-size:1.1rem;margin:0 0 .8em;text-transform:uppercase;letter-spacing:.06em}
.sitefooter a{color:#fff}
.sitefooter .fgrid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.sitefooter ul{list-style:none;padding:0;margin:0}
.sitefooter li{padding:.25rem 0;max-width:none}
.sitefooter .legal{border-top:1px solid rgba(255,255,255,.3);margin-top:2.2rem;padding-top:1.2rem;font-size:.92rem}
.sitefooter .legal p{color:rgba(255,255,255,.85);margin:0 0 .4rem}
html[data-hc="on"] .sitefooter .legal p{color:#fff}

/* ---------- ricerca ---------- */
.searchform{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin:1.4rem 0}
.searchform label{font-weight:600;display:block;margin-bottom:.3rem}
.searchform input[type="search"]{
  font:inherit;padding:.6rem .8rem;min-height:2.9rem;
  border:2px solid var(--grigio-bordo);border-radius:6px;
  background:var(--bianco);color:var(--testo);min-width:min(22rem,100%);
}
.searchform input[type="search"]:focus-visible{border-color:var(--blu-link)}
.searchform button{
  font:inherit;font-weight:700;cursor:pointer;min-height:2.9rem;
  padding:.6rem 1.2rem;border-radius:6px;
  background:var(--blu-link);color:#fff;border:2px solid var(--blu-link);
}
.searchform button:hover{background:var(--blu-profondo);border-color:var(--blu-profondo)}
html[data-hc="on"] .searchform button{background:#ffd400;color:#000;border-color:#ffd400}

/* ---------- utility ---------- */
.visually-hidden,.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.visually-hidden:focus,.screen-reader-text:focus{clip:auto;width:auto;height:auto;margin:0;position:static!important}

/* Content coming out of the editor/Elementor still obeys the theme measure. */
.entry-content > *{margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion:no-preference){
  a,button{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* Windows / macOS high-contrast mode. The site's own toggle helps people who do not
   know their OS has this; forced-colors serves the ones who already set it. Both must
   work, and the theme must not fight the user's chosen colours. */
@media (forced-colors:active){
  .a11yseg,.a11ytoggle,.card,.opcard,.inbreve,.nota,.cf,.svclist a{border:2px solid CanvasText}
  .a11ybar button[aria-pressed="true"]{background:Highlight;color:HighlightText}
  .mainnav a[aria-current="page"]{border-bottom-color:Highlight;forced-color-adjust:none}
  .dot{forced-color-adjust:none;border-color:CanvasText}
  :focus-visible{outline:4px solid CanvasText;outline-offset:3px}
}

@media (max-width:40rem){
  /* Three short rows on a phone rather than two cramped ones. Hiding the "Testo"
     label was tried and saved no height, while leaving sighted low-vision readers
     with three unlabelled letters. */
  .a11ybar .wrap{align-items:center;gap:.4rem .7rem}
  .a11ybar__contatti{margin-right:0;width:100%;column-gap:1.25rem}
  /* The two contacts wrap on a phone: a divider would dangle at the start of line two. */
  .a11ybar__contatti li + li::before{display:none}
  .a11ytoggle{padding-left:.7rem!important}
  .brand img{height:52px}
  .brand .nome{font-size:.98rem}
  .mainnav ul{flex-direction:column}
  .mainnav a{border-bottom:1px solid rgba(255,255,255,.25);border-left:5px solid transparent}
  .mainnav a[aria-current="page"]{border-left-color:var(--giallo);border-bottom-color:rgba(255,255,255,.25)}
  .inbreve dl{grid-template-columns:1fr;gap:.15rem 0}
  .inbreve dd{margin-bottom:.7rem}
}