/* =============================================================================
   infordata-dark.css — the dark theme for infordata.it / infordata.pro

   Loaded by converta-child after infordata-redesign.css (priority 101), so it
   can lean on that sheet's tokens instead of restating its layout. Nothing here
   changes markup or geometry: this file only re-points colour.

   HOW A THEME IS CHOSEN — and why there is no @media (prefers-color-scheme)
   anywhere in this file.

   Everything keys on one attribute: <html data-theme="dark"> or "light".
   inc/dark-mode.php writes it before first paint from, in order: the visitor's
   stored choice, then the OS preference. A media query would have been fewer
   moving parts, but it cannot work here and the failure is not subtle:

     - the site's colour lives in three places this sheet does not own —
       Elementor's per-page stylesheets, the Customizer's kirki block and an
       inline <style> inside the home page's HTML widget. The per-page half is
       handled by infordata-dark-elementor.css, which is GENERATED, and which
       necessarily keys on the same attribute. Put the tokens behind a media
       query and the generated half stops matching: white cards, light text,
       the exact half-dark page the note in infordata-redesign.css §2 warned
       about when it declined to wire this up;
     - a visitor whose OS is dark could not choose otherwise. On a site whose
       hero, footer CTA and research band all carry photographs tuned for one
       set of scrims, that choice matters.

   So: one switch, one place, both preferences honoured. Deleting the require in
   functions.php disables the whole thing and the page returns to light, because
   without the attribute not one selector in this file matches.

   Removing assets/infordata-dark.css alone leaves the generated sheet applying
   Elementor's half of the theme with none of the chrome. Remove both, or
   neither.
   ========================================================================== */

/* --- 1. Ground ------------------------------------------------------------
   color-scheme is what makes the form controls, the scrollbars and the caret
   the browser draws for itself come out dark. Without it the page is dark and
   every <select> and scrollbar stays light — the most visible "half-dark" tell,
   and one no stylesheet can reach.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;
}

/* --- 2. Tokens ------------------------------------------------------------
   The full set, restated here rather than amended in infordata-redesign.css §2:
   that file is edited by several sessions at once and its dark block was a
   preview, not a theme. This is the theme. Values come from
   tools/darkmode/palette.mjs, which prints the contrast table for every pair
   below — run it rather than trusting these numbers:

     text on page 16.9   body on card 10.1   muted on card  6.7
     link on page 10.2   brand300 on card 8.0   eco300 on page 13.1
     white on button 5.9   button field on page 3.20 (1.4.11 wants 3)

   --inf-muted is not the value the preview block used, and the reason recorded
   here at first was WRONG. It claimed #948B9D measured 4.38 on the card and so
   failed AA. It does not: #948B9D is 5.31 on card, 4.93 on raised, 5.79 on
   page — it passes everywhere. The 4.38 was 4.338 transposed from a different
   pair, #8B8194 on --inf-raised, which is the OLD FAINT token and is a genuine
   fail. Caught by the session that owns infordata-redesign.css, who recomputed
   it instead of taking the number, after I had asked them to change theirs on
   the strength of it.

   #A79DB0 stays, because 6.68 on card gives headroom that 5.31 does not and
   nothing regresses by keeping it. But it is a margin increase, not a fix, and
   the note above said otherwise. A comment that states a false measurement is
   worse than no comment: the next person budgets against a threshold that was
   never crossed.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --inf-page:   #121016;
  --inf-card:   #1C1922;
  --inf-raised: #241F2B;   /* a surface ON a card: menu panels, inputs, chips */
  --inf-sunken: #17141C;
  --inf-border: #332C3B;
  --inf-border-strong: #443B4D;

  --inf-text:  #F5F1F7;
  --inf-body:  #CBC3D2;
  --inf-muted: #A79DB0;
  /* #8B8194 measured 4.34 on --inf-raised, which is a fail, and the submenu
     GROUP LABELS are faint text on exactly that surface. No page sweep could
     catch it: a closed dropdown is invisible and correctly skipped, and the
     panel only exists on hover. The palette self-check missed it too, because
     it tested faint against the page at the large-text threshold and never
     against raised at 4.5. Both holes are closed — this value, and the raised
     pairs now in tools/darkmode/palette.mjs. 5.01 on raised, 5.41 on card. */
  --inf-faint: #968C9F;

  --inf-0:   #1C1922;  --inf-25:  #1A1720; --inf-50:  #17141C; --inf-100: #221E29;
  --inf-200: #332C3B;  --inf-300: #4A4155; --inf-400: #6F6779; --inf-500: #8B8194;
  --inf-600: #A79DB0;  --inf-700: #CBC3D2; --inf-800: #E4DEE9; --inf-900: #F5F1F7;
  --inf-950: #FFFFFF;

  --inf-brand-50:  #241023; --inf-brand-100: #33172F; --inf-brand-200: #4A2148;
  --inf-brand-300: #CBA4CA; --inf-brand-400: #D9B9D8; --inf-brand-500: #B982B7;
  --inf-brand-600: #C897C6; --inf-brand-700: #D7B4D6; --inf-brand-800: #E6CCE5;
  --inf-brand-900: #241023;

  --inf-link: #D7B4D6;
  --inf-on-brand: #FFFFFF;

  --inf-eco-text:    #A7E97A;
  --inf-eco-surface: rgba(86,192,0,.13);
  --inf-eco-border:  rgba(118,217,43,.32);

  /* Buttons. The brand purple does NOT get darkened for the dark theme: as a
     filled field it measures 3.20 against the page, and darkening it to
     #8E3C8C — the instinct — drops that to 2.86 and fails WCAG 1.4.11 while
     white text on it gets better at a threshold it already cleared. The field
     is what changes contrast against a dark page, not the label. */
  --inf-btn:            #964494;
  --inf-btn-hover:      #A54FA3;
  --inf-btn-active:     #7E3480;
  --inf-btn-border:     #A54FA3;
  --inf-btn-ring:       rgba(203,164,202,.45);
  --inf-btn-eco-hover:  rgba(86,192,0,.18);
  --inf-btn-eco-text:   #A7E97A;
  --inf-btn-eco-border: rgba(118,217,43,.45);

  /* On a dark field a drop shadow does almost nothing and a coloured glow reads
     as a smear. Depth comes from the surface ramp instead, with just enough
     shadow to keep an overlay off the page behind it. */
  --inf-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --inf-shadow-md: 0 2px 6px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.8);
  --inf-btn-shadow:       0 1px 2px rgba(0,0,0,.45);
  --inf-btn-shadow-hover: 0 2px 6px rgba(0,0,0,.5);
  --inf-focus: 0 0 0 3px rgba(203,164,202,.5);
}

/* --- 3. The theme's own variables ----------------------------------------
   Converta reads its colours from --codeless-* on :root, written by kirki from
   the Customizer. Re-pointing them here is worth more than any number of
   element rules: one declaration moves every widget the parent theme paints.

   --codeless-primary-color is deliberately NOT among them. It is the brand
   purple and the theme uses it 45 times as a text colour and 30 times as a
   background; lightening it fixes the text and turns every filled field into
   lilac with white text on top. The 45 text uses are handled one selector at a
   time in infordata-dark-elementor.css, which reads them out of the theme's own
   stylesheets — precise, and it survives the next theme update by being
   regenerated rather than guessed.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --codeless-text-heading-color: var(--inf-text);
  --codeless-text-body-color:    var(--inf-body);
  --codeless-text-gray-color:    var(--inf-muted);
  --codeless-border-color:       var(--inf-border);
  --codeless-bg-light-color:     var(--inf-sunken);
  --codeless-aside-bg-color:     var(--inf-sunken);
  --codeless-bg-dark-color:      var(--inf-sunken);
  --codeless-p-header-bg-color:  var(--inf-card);
  --codeless-p-header-gradient-color:     #1E1926;
  --codeless-p-header-gradient-end-color: rgba(30,25,38,0);
}

/* Elementor's globals. Same split, same reasoning: `primary` is left alone
   because half its uses are filled backgrounds, and `--e-global-color-text` is
   Elementor's body grey — #7A7A7A measures 4.40 on this page, which is a fail
   by 0.1, so it moves. */
html[data-theme="dark"] body {
  --e-global-color-text:      var(--inf-body);
  --e-global-color-secondary: var(--inf-brand-300);
}

/* --- 4. The page itself ---------------------------------------------------
   kirki writes `body{background-color:#ffffff}` into an inline <style>, which
   is why this is keyed off the attribute rather than left to a bare body rule:
   at equal specificity the inline block wins on document order.
   ------------------------------------------------------------------------- */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--inf-page);
  color: var(--inf-body);
}
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #content,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .inner-content-row,
html[data-theme="dark"] .content-col,
html[data-theme="dark"] .container,
html[data-theme="dark"] .cl-page-wrapper {
  background-color: transparent;
}

/* Elementor paints most sections with nothing at all and lets the page show
   through; the ones that DO carry a colour are handled per element in the
   generated sheet. What is left is the overlay Elementor puts over a section
   background image, which on several templates is a white wash. */
html[data-theme="dark"] .elementor-background-overlay[style*="background-color: rgb(255"],
html[data-theme="dark"] .elementor-background-overlay[style*="background-color:#fff"] {
  background-color: rgba(18,16,22,.55);
}

html[data-theme="dark"] ::selection {
  background: var(--inf-brand-500);
  color: #17141C;
}

/* The one scrim in infordata-redesign.css §8b that points the wrong way here.
   `.elementor-element-0aaa680::after` is rgba(255,255,255,.7) — a LIGHT wash
   laid over a photograph so that DARK text on top of it clears 5.20:1. Flip the
   text to light for a dark page and that same scrim becomes the brightest
   surface on it: the "Grazie ai nostri investimenti" block measured 1.51:1 with
   this rule missing, and the heading above it 1.02:1.

   Same alpha, opposite end of the ramp, so the photograph is dimmed by as much
   as it was washed out before. Measured after: 8.6:1 for the body copy.
   The ::before is Elementor's own overlay and is handled in the generated
   sheet, which maps its #F8FAFC stop and leaves the transparent one alone. */
html[data-theme="dark"] .elementor-element-0aaa680::after {
  background: rgba(18,16,22,.72);
}

/* --- 5. Header ------------------------------------------------------------
   The two header bars are Elementor containers with rgba(255,255,255,.85) and
   .95 on them — translucent white over whatever scrolls underneath. The dark
   equivalents keep the same alpha so the blur/see-through effect survives; a
   flat opaque bar loses the depth the header was designed around.

   Element ids rather than classes: a container's _css_classes never reaches the
   DOM on this install (infordata-redesign.css §11 has the evidence), so there
   is nothing else to hold on to. Both header templates are covered — 1756 is
   the Italian one, 2568 the English.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] #masthead .elementor-element-c9eb5f4,
html[data-theme="dark"] #masthead .elementor-element-f5f68bf,
html[data-theme="dark"] #masthead > .elementor > .e-con,
html[data-theme="dark"] #masthead .e-con-boxed {
  background-color: rgba(24,21,30,.92);
}
html[data-theme="dark"] #masthead {
  border-bottom-color: var(--inf-border);
}
html[data-theme="dark"] #masthead .elementor-element-f5f68bf {
  border-bottom: 1px solid var(--inf-border);
}

/* The main menu. infordata-redesign.css §5 already routes these through tokens,
   so only the states it pinned to a brand tint need re-pointing. */
html[data-theme="dark"] #masthead .mainmenu-infordata .ce-nav-menu a.ce-menu-item:hover {
  background: var(--inf-raised);
  color: var(--inf-brand-300) !important;
}
html[data-theme="dark"] #masthead .mainmenu-infordata .menu-item.current-menu-item > a.ce-menu-item,
html[data-theme="dark"] #masthead .mainmenu-infordata .menu-item.current-menu-ancestor > a.ce-menu-item,
html[data-theme="dark"] #masthead .mainmenu-infordata .menu-item.current-menu-parent > a.ce-menu-item {
  box-shadow: inset 0 -2px 0 0 var(--inf-brand-500);
}
/* The current item does not always lose its filled block. infordata-redesign
   .css §5 replaces it with an underline, but only inside
   `#masthead .mainmenu-infordata`; the header used on /soluzioni/ and /notizie/
   renders its menu from a widget without that class, so there the item keeps
   the site's own #964494 field. Light theme, white label: 5.9:1 and nobody
   noticed. Dark theme, --inf-body label on the same field: 3.46:1, measured.

   The label goes white wherever that block survives. On the headers where the
   block IS replaced the item sits on the dark bar instead, where white is 15:1
   — so one rule is right in both places and neither needs the block detected.

   MIND THE COMBINATOR. A menu item that has children does not hold its anchor
   directly: the widget wraps it in `div.ce-has-submenu-container`, so
   `li.current-menu-item > a.ce-menu-item` matches only the childless items —
   which is why the block survives on "Soluzioni" and "Notizie" (both have
   dropdowns) and not elsewhere. The same `>` appears in infordata-redesign.css
   §5, so its "background-color: transparent" never reached those items either;
   that is the bug underneath this one. A descendant combinator covers both
   shapes, and only ever reaches one anchor: the level below is
   a.ce-sub-menu-item, a different class.

   MIND THE ID, TOO. §5 sets the label with
     #masthead .mainmenu-infordata .ce-nav-menu a.ce-menu-item { color: … !important }
   at (1,3,1). A dark rule without an id is (0,6,2) and loses on the id column
   however many classes it carries — the first attempt here did, and measured
   unchanged at 3.46:1. #masthead is in the selector to get the id back. */
html[data-theme="dark"] #masthead .ce-nav-menu .menu-item.current-menu-item a.ce-menu-item,
html[data-theme="dark"] #masthead .ce-nav-menu .menu-item.current-menu-ancestor a.ce-menu-item,
html[data-theme="dark"] #masthead .ce-nav-menu .menu-item.current-menu-parent a.ce-menu-item,
html[data-theme="dark"] .ce-nav-menu .menu-item.current-menu-item a.ce-menu-item,
html[data-theme="dark"] .ce-nav-menu .menu-item.current-menu-ancestor a.ce-menu-item,
html[data-theme="dark"] .ce-nav-menu .menu-item.current-menu-parent a.ce-menu-item {
  color: #FFFFFF !important;
}

/* Dropdown panels. Elementor writes `background-color:#ffffff` on .sub-menu for
   each nav widget, at (0,4,0); the generated sheet outranks that. This block is
   the part that sheet cannot know about — the panel wants to sit a step ABOVE
   the header, not level with it, or it disappears into the bar it drops from. */
html[data-theme="dark"] #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu,
html[data-theme="dark"] .ce-nav-menu ul.sub-menu,
html[data-theme="dark"] nav.ce-dropdown {
  background-color: var(--inf-raised) !important;
  border-color: var(--inf-border);
  box-shadow: var(--inf-shadow-md);
}
html[data-theme="dark"] .ce-nav-menu ul.sub-menu a.ce-sub-menu-item {
  color: var(--inf-text) !important;
}
html[data-theme="dark"] #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu a.ce-sub-menu-item:hover {
  background: rgba(203,164,202,.12) !important;
  color: var(--inf-brand-300) !important;
}
html[data-theme="dark"] #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu .current-menu-item > a.ce-sub-menu-item {
  background: rgba(203,164,202,.16) !important;
  color: var(--inf-brand-300) !important;
}
/* The third level is flattened into the panel with a rule on its left edge. */
html[data-theme="dark"] .ce-nav-menu ul.sub-menu ul.sub-menu {
  border-left-color: var(--inf-border-strong);
  background-color: transparent !important;
}
html[data-theme="dark"] .ce-nav-menu ul.sub-menu li.menu-item-has-children > a.ce-sub-menu-item {
  color: var(--inf-faint) !important;
}

/* Burger and its icon. */
html[data-theme="dark"] .ce-nav-menu-icon,
html[data-theme="dark"] .cl-hamburger-menu span,
html[data-theme="dark"] #masthead .ce-nav-menu-icon i {
  color: var(--inf-text);
  background-color: transparent;
}

/* Language switch: the active pill was a light brand tint on white. */
html[data-theme="dark"] .cpel-switcher__list {
  border-color: var(--inf-border);
}
html[data-theme="dark"] .cpel-switcher__lang > a:hover {
  background: var(--inf-raised);
}
html[data-theme="dark"] .cpel-switcher__lang--active > a {
  background: rgba(203,164,202,.16);
  color: var(--inf-brand-300) !important;
}

/* --- 6. Logo --------------------------------------------------------------
   The header logo is a dark wordmark on transparent — on a dark field it is a
   purple dot with nothing beside it. The client uploaded the negative lockup as
   uploads/logo_infordata_sb_transparent.png; assets/logo-infordata-dark.png is
   that artwork re-canvassed to the light logo's exact frame by
   tools/darkmode/make-dark-logo.py, so the swap moves nothing.

   Beware: there are TWO files called logo_infordata_sb_transparent.png in
   uploads. The one under 2026/08/ is the LIGHT header logo (dark text); the one
   at the uploads root is the negative. They are not interchangeable.

   `content` rather than a src swap in JS: the image is lazy-loaded, so its src
   holds a placeholder until it scrolls in, and rewriting an attribute that
   LiteSpeed also rewrites is a race. `content` is decided at style time and
   wins over whatever ends up in the attribute. The width/height attributes stay
   correct because the replacement has identical dimensions. */
html[data-theme="dark"] .ce-site-logo-img,
html[data-theme="dark"] img.ce-site-logo-img {
  content: url("logo-infordata-dark.png");
}

/* --- 7. Page headers, breadcrumbs ---------------------------------------- */
html[data-theme="dark"] .ce-page-header,
html[data-theme="dark"] .ce-page-header.modern {
  background: var(--inf-card) !important;
  border-bottom-color: var(--inf-border);
}
html[data-theme="dark"] .ce-page-header .page-data h1,
html[data-theme="dark"] .ce-page-header h1 {
  color: var(--inf-text) !important;
}
html[data-theme="dark"] .page_parents,
html[data-theme="dark"] .breadcrumbss,
html[data-theme="dark"] .page_parents a,
html[data-theme="dark"] .cat-pretitle {
  color: var(--inf-muted) !important;
}
html[data-theme="dark"] .page_parents a:hover { color: var(--inf-brand-300) !important; }

/* --- 8. Type, links, rules ------------------------------------------------
   Headings come through the generated sheet (the theme sets them from
   --codeless-text-heading-color). Body copy needs NOTHING here, and the first
   draft of this file got that wrong in a way worth recording.

   It carried `html[data-theme="dark"] p, li, figcaption { color: var(--inf-body) }`
   as a safety net. Body text already inherits that token — infordata-redesign
   .css §3 sets it on `body` — so the rule bought nothing, and it cost: an
   element that sets `color:#fff` on a container so its paragraphs read over a
   photograph passes that colour down by INHERITANCE, which any direct rule on
   `p` outranks however weak it is. The footer CTA's "Non smettiamo mai di
   crescere e innovarci, dal 1997." went from white at 6.6:1 to --inf-body at
   4.15:1 — a fail introduced by a rule that was meant to prevent fails.

   Inheritance is the mechanism that already distinguishes "text on the page"
   from "text the page has deliberately coloured". Do not override it wholesale.
   Anywhere the theme or a page sets a genuinely DARK colour, the generated
   sheet re-points that rule by name. */

/* Links, and the same trap as the paragraph rule above. A blanket
   `a { color: … }` outranks any component that gives its own anchors a colour
   through a single class — it took the label off the articles' call-to-action
   button, white on purple, and repainted it lilac at 3.20:1. `a:not([class])`
   says what is actually meant: a link the page has not made part of something
   else. Anything with a class belongs to a component and keeps its colour;
   where that colour is genuinely dark, the generated sheet re-points it. */
html[data-theme="dark"] .entry-content a:not([class]),
html[data-theme="dark"] .elementor-widget-text-editor a:not([class]),
html[data-theme="dark"] .widget a:not([class]),
html[data-theme="dark"] p a:not([class]),
html[data-theme="dark"] li a:not([class]) {
  color: var(--inf-link);
  text-decoration-color: rgba(215,180,214,.45);
}
html[data-theme="dark"] .entry-content a:not([class]):hover,
html[data-theme="dark"] p a:not([class]):hover { color: var(--inf-brand-400); }

html[data-theme="dark"] hr,
html[data-theme="dark"] .elementor-divider-separator {
  border-color: var(--inf-border);
  background-color: var(--inf-border);
}
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp,
html[data-theme="dark"] pre {
  background: var(--inf-sunken);
  border: 1px solid var(--inf-border);
  color: var(--inf-text);
}

/* Tables: the theme gives them a light header row and hairlines. */
html[data-theme="dark"] table,
html[data-theme="dark"] .entry-content table {
  border-color: var(--inf-border);
  color: var(--inf-body);
}
html[data-theme="dark"] th,
html[data-theme="dark"] .entry-content th {
  background: var(--inf-sunken);
  color: var(--inf-text);
  border-color: var(--inf-border);
}
html[data-theme="dark"] td,
html[data-theme="dark"] .entry-content td { border-color: var(--inf-border); }
html[data-theme="dark"] tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }

/* The skip link is the first thing a keyboard reaches. */
html[data-theme="dark"] .inf-skip-link:focus {
  background: var(--inf-brand-500);
  color: #17141C;
  outline-color: var(--inf-text);
}
html[data-theme="dark"] :focus-visible {
  outline-color: var(--inf-brand-400);
}

/* --- 9. Cards and post grids ---------------------------------------------
   Elementor's post widget paints .elementor-post__card white from its own
   stylesheet, and the excerpt grey (#777) it ships with measures 4.48 on white
   — a pre-existing miss that this theme does not inherit, because the muted
   token is used instead. */
html[data-theme="dark"] .elementor-post__card,
html[data-theme="dark"] .blog-entries article,
html[data-theme="dark"] .ce-posts-grid .ce-post-item,
html[data-theme="dark"] .cl-post-item,
html[data-theme="dark"] article.default-style {
  background-color: var(--inf-card);
  border-color: var(--inf-border);
  color: var(--inf-body);
}
html[data-theme="dark"] .elementor-post__title,
html[data-theme="dark"] .elementor-post__title a,
html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .entry-title a { color: var(--inf-text); }
html[data-theme="dark"] .elementor-post__title a:hover,
html[data-theme="dark"] .entry-title a:hover { color: var(--inf-brand-300); }
html[data-theme="dark"] .elementor-post__excerpt p,
html[data-theme="dark"] .elementor-post__excerpt,
html[data-theme="dark"] .elementor-post__meta-data,
html[data-theme="dark"] .elementor-post-date,
html[data-theme="dark"] .elementor-post-author,
html[data-theme="dark"] .entry-meta,
html[data-theme="dark"] .post-meta { color: var(--inf-muted); }
html[data-theme="dark"] .elementor-post__read-more { color: var(--inf-brand-300); }

html[data-theme="dark"] .tagcloud a,
html[data-theme="dark"] .widget_tag_cloud .tagcloud a {
  background: var(--inf-raised);
  border-color: var(--inf-border);
  color: var(--inf-body);
}
html[data-theme="dark"] .tagcloud a:hover {
  border-color: var(--inf-brand-500);
  color: var(--inf-brand-300) !important;
}
html[data-theme="dark"] .cl-pagination a,
html[data-theme="dark"] .cl-pagination span,
html[data-theme="dark"] .page-numbers {
  background: var(--inf-raised);
  border-color: var(--inf-border);
  color: var(--inf-body);
}
html[data-theme="dark"] .page-numbers.current,
html[data-theme="dark"] .cl-pagination .current {
  background: var(--inf-btn);
  color: #fff;
  border-color: var(--inf-btn-border);
}

/* The "Che problema dovete risolvere?" cards. Their CSS is an inline <style>
   inside an HTML widget in the home page's _elementor_data — document order
   puts it after every linked sheet, so this is one of the few places where
   !important is the only instrument that reaches. Italian home only; the
   English page has no equivalent block. */
html[data-theme="dark"] .inf-jobs__card {
  background: var(--inf-card) !important;
  border-color: var(--inf-border) !important;
  color: var(--inf-text) !important;
  box-shadow: var(--inf-shadow-sm) !important;
}
html[data-theme="dark"] .inf-jobs__card:hover {
  border-color: var(--inf-brand-500) !important;
  color: var(--inf-text) !important;
  box-shadow: var(--inf-shadow-md) !important;
}
html[data-theme="dark"] .inf-jobs__icon {
  background: rgba(203,164,202,.14) !important;
  border-color: rgba(203,164,202,.24) !important;
  color: var(--inf-brand-300) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .inf-jobs__desc { color: var(--inf-muted) !important; }
html[data-theme="dark"] .inf-jobs__eyebrow { color: var(--inf-muted) !important; }

/* --- 9b. Article body: the .id-* component set ----------------------------
   The news articles carry their own small design system — cards, callout,
   comparison table, FAQ accordion, step numbers, CTA — in an inline <style>
   inside post_content. Nothing in the theme knows about it, and every colour in
   it is a literal: #4A5568 body, #964495 headings, #0B1B33 strong, #fff cards,
   #F5F7FA panels. On a dark page that is the single worst area on the site: 27
   hard fails on one article, worst 1.10:1.

   Everything here carries !important, and this is the case CLAUDE.md describes:
   the source is an inline <style> printed inside the document body, so it wins
   on document order against any linked sheet at equal specificity, and no
   amount of specificity in this file can be counted on to stay ahead of a block
   somebody may re-paste. It is also why this is scoped to `.id-news` and its
   own children rather than to element types.

   The green tick (#1BB65D) and the purple step badge (#964495) keep their
   fields: both carry white marks, both already clear AA, and both are the
   article's own accents rather than page furniture. */
/* THE RULES BELOW ARE DELIBERATELY SHAPE-BASED, NOT VALUE-BASED.

   There is more than one of these documents and they do not share a palette.
   The access-control article uses #4A5568 body / #964495 headings / #0B1B33
   strong / #fff cards / #F5F7FA panels and classes .id-lead .id-faq .id-cta-link;
   the societa-benefit one uses #333 / #5C1F5C / #3a1a3a / #F3E8F3 / #F6F4F8 and
   classes .id-intro .id-faq-section .id-cta-inline. Enumerating hexes fixed the
   first and left the second at 15 failures, worst 1.06:1. The next article will
   invent its own names again.

   So: flatten every surface inside .id-news first, then put back only the ones
   that carry meaning, matching on `id-` class SUBSTRINGS rather than exact
   names. The failure mode for a class nobody has thought of yet is then "flat
   but readable" instead of "white box with light text on it", which is the
   whole point of the exercise.

   Everything carries !important because the source is an inline <style> inside
   post_content — document order beats any linked sheet. */

/* 1. flatten. Two exceptions only, and they are the elements whose FIELD is the
   meaning: the numbered step badge and the call-to-action button, both a
   saturated fill carrying a white mark that already reads on a dark page.

   The tick is NOT an exception, and the first attempt at this got it wrong. It
   is drawn two different ways: a green disc with a white SVG stroke in one
   article, a pale pink disc with a "✓" GLYPH in the other. Kept as a light
   field, the glyph inherited the body colour and measured 1.44:1. Flattened, an
   SVG stroked #fff still reads and the glyph gets a colour below.

   AND THE ROOT ITSELF, not just its descendants. `.id-news *` misses
   `.id-news`, which is not a nicety: these documents arrive with a `body` rule
   in their stylesheet, and scoping that rule — the right fix for the unscoped
   global it otherwise is — moves `background:#F6F4F8` onto the wrapper. That
   happened to societa-benefit-tech between two of my verification runs and took
   the article from 0 failures to 44, every one of them light text on #F6F4F8.
   The selector below leads with the root for that reason. */
html[data-theme="dark"] .id-news,
html[data-theme="dark"] .id-news *:not([class*="step-num"]):not([class*="cta"]) {
  background-color: transparent !important;
}

/* 2. put the panels back */
html[data-theme="dark"] .id-news [class*="id-card"],
html[data-theme="dark"] .id-news [class*="id-advantage"],
html[data-theme="dark"] .id-news [class*="id-callout"] {
  background-color: var(--inf-card) !important;
  border-color: var(--inf-border) !important;
  box-shadow: var(--inf-shadow-sm) !important;
}
/* The FAQ block is a panel with items ON it, so it sits one step down the ramp
   and its items keep the card surface above. */
html[data-theme="dark"] .id-news [class*="id-faq"] {
  background-color: var(--inf-sunken) !important;
  border-color: var(--inf-border) !important;
}
html[data-theme="dark"] .id-news [class*="id-faq-q"],
html[data-theme="dark"] .id-news [class*="id-faq-a"],
html[data-theme="dark"] .id-news [class*="id-faq-item"] {
  background-color: transparent !important;
}
html[data-theme="dark"] .id-news [class*="id-badge"] {
  background-color: rgba(203,164,202,.14) !important;
  border-color: rgba(203,164,202,.32) !important;
}

/* 3. text. Body copy first, then the accents on top of it. */
/* The exclusions are load-bearing, not tidiness. `.id-news div` is (0,3,2) —
   two elements — and a later rule written as `.id-news [class*="step-num"]` is
   (0,3,1), so the blanket WINS on specificity however far down the file the
   exception sits. The step number went to the body colour on a purple disc,
   3.45:1, and stayed there through a fix that looked correct. Anything with its
   own field has to be named here, in the :not(), rather than corrected later. */
html[data-theme="dark"] .id-news,
html[data-theme="dark"] .id-news p,
html[data-theme="dark"] .id-news li,
html[data-theme="dark"] .id-news td,
html[data-theme="dark"] .id-news dd,
html[data-theme="dark"] .id-news div:not([class*="step-num"]):not([class*="check"]):not([class*="cta"]):not([class*="badge"]),
html[data-theme="dark"] .id-news span:not([class*="step-num"]):not([class*="check"]):not([class*="cta"]):not([class*="badge"]),
html[data-theme="dark"] .id-news summary { color: var(--inf-body) !important; }

html[data-theme="dark"] .id-news h2,
html[data-theme="dark"] .id-news h3,
html[data-theme="dark"] .id-news h4,
html[data-theme="dark"] .id-news summary,
html[data-theme="dark"] .id-news [class*="label"],
html[data-theme="dark"] .id-news [class*="title"],
html[data-theme="dark"] .id-news [class*="chevron"],
html[data-theme="dark"] .id-news [class*="faq-q"],
html[data-theme="dark"] .id-news [class*="id-badge"] { color: var(--inf-brand-300) !important; }

/* The two filled marks. The step badge keeps the brand field, so its number has
   to stay white — the blanket body colour above would otherwise take it to
   3.45:1 on purple. The tick is flat now, so it takes the eco green it already
   meant; an SVG drawn with stroke:#fff is unaffected either way. */
html[data-theme="dark"] .id-news [class*="step-num"] { color: #FFFFFF !important; }
html[data-theme="dark"] .id-news [class*="check"] { color: var(--inf-eco-text) !important; }

html[data-theme="dark"] .id-news strong,
html[data-theme="dark"] .id-news b { color: var(--inf-text) !important; }

/* A link, unless it is a button wearing a link's markup. */
html[data-theme="dark"] .id-news a:not([class*="cta"]) { color: var(--inf-link) !important; }
html[data-theme="dark"] .id-news a:not([class*="cta"]):hover { color: var(--inf-brand-400) !important; }
html[data-theme="dark"] .id-news a[class*="cta"] { color: #FFFFFF !important; }

/* the accent rule down the side of the opening paragraph, whatever it is called */
html[data-theme="dark"] .id-news [class*="id-lead"],
html[data-theme="dark"] .id-news [class*="id-intro"] {
  color: var(--inf-body) !important;
  border-left-color: var(--inf-brand-500) !important;
}

/* 4. the comparison table keeps a real header row: #0B1B33 is near-black, and
   on a #121016 page that is not a header row, it is the page. */
html[data-theme="dark"] .id-news [class*="id-table"] { border-color: var(--inf-border) !important; }
html[data-theme="dark"] .id-news th {
  background-color: var(--inf-raised) !important;
  color: var(--inf-text) !important;
}
html[data-theme="dark"] .id-news td { border-bottom-color: var(--inf-border) !important; }
html[data-theme="dark"] .id-news tr:nth-child(even) td { background-color: rgba(255,255,255,.03) !important; }

/* 5. status badges keep meaning their colour rather than collapsing to one. */
html[data-theme="dark"] .id-news .id-badge.alto  { background-color: rgba(251,191,36,.16) !important; color: #FCD34D !important; }
html[data-theme="dark"] .id-news .id-badge.medio { background-color: rgba(96,165,250,.16) !important; color: #93C5FD !important; }
html[data-theme="dark"] .id-news .id-badge.basso { background-color: rgba(52,211,153,.16) !important; color: #6EE7B7 !important; }

/* 6. the CTA hover went to #0B1B33, indistinguishable from the page: the button
   appeared to vanish under the cursor. */
html[data-theme="dark"] .id-news [class*="cta"]:hover,
html[data-theme="dark"] .id-news [class*="cta"]:focus-visible {
  background-color: var(--inf-btn-hover) !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] .id-news [class*="id-faq-q"]:focus-visible { outline-color: var(--inf-brand-400) !important; }

/* Single-post header. The band is `.wrapper-layers` holding the featured
   photograph as an <img> with a `.overlay` tint on top of it, and the site's
   own custom CSS paints the wrapper #FFC0EC. The title and its meta line sit
   over that. It is thin in the light theme too — the category link measures
   2.77:1 there, a pre-existing fail — and inverting the text colours without
   touching the band made it 1.28:1.

   The photograph stays; the tint does the work. At .74 the brightest part of
   this article's image (a face lit from the left) leaves the 48px title at
   6.0:1 and the 14px meta at 5.2:1, and the picture still reads. The meta goes
   to plain white rather than the muted token for the same reason the footer CTA
   does: over a photograph there is no such thing as a quiet grey. */
html[data-theme="dark"] .cl-post-header .wrapper-layers { background-color: var(--inf-card) !important; }
html[data-theme="dark"] .cl-post-header .wrapper-layers .overlay {
  background: rgba(18,16,22,.74) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
html[data-theme="dark"] .cl-post-header h1,
html[data-theme="dark"] .cl-post-header .entry-meta,
html[data-theme="dark"] .cl-post-header .entry-meta-single,
html[data-theme="dark"] .cl-post-header .categories_list a { color: #FFFFFF !important; }

html[data-theme="dark"] .entry-meta,
html[data-theme="dark"] .entry-meta-single,
html[data-theme="dark"] figcaption,
html[data-theme="dark"] .wp-element-caption,
html[data-theme="dark"] .wp-caption-text { color: var(--inf-muted) !important; }
html[data-theme="dark"] .entry-meta a,
html[data-theme="dark"] .categories_list a { color: var(--inf-brand-300) !important; }

/* --- 10. Buttons ----------------------------------------------------------
   infordata-redesign.css drives every button state from the --inf-btn-* tokens
   re-pointed in §2, so the filled button needs nothing here. What does need
   saying is the outline variant, which was transparent-on-white with a purple
   label, and the eco variant, whose dark green field on a dark page loses its
   edge. */
html[data-theme="dark"] .elementor-button.inf-btn-outline {
  background-color: transparent !important;
  color: var(--inf-brand-300) !important;
  border-color: var(--inf-brand-500) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .elementor-button.inf-btn-outline:hover {
  background-color: rgba(86,192,0,.16) !important;
  color: var(--inf-eco-text) !important;
  border-color: var(--inf-btn-eco-border) !important;
}
html[data-theme="dark"] .elementor-button.inf-btn-eco {
  background-color: #449A0A !important;
  border-color: #56C000 !important;
  color: #0E2404 !important;
}
html[data-theme="dark"] .elementor-button.inf-btn-eco:hover {
  background-color: #56C000 !important;
  border-color: #76D92B !important;
}
/* A button that a page set to a white field with a purple label — the pattern
   the generated sheet turns into card-on-card. Give it a visible edge so it
   still reads as a control. */
html[data-theme="dark"] .elementor-button[class*="elementor-element"]:not(.inf-btn-outline):not(.inf-btn-eco) {
  border-color: var(--inf-btn-border) !important;
}

/* --- 11. Forms ------------------------------------------------------------
   Contact Form 7 ships no colours of its own, so the fields are whatever the
   browser and the theme give them: on a dark page that is a white box with
   black text, the single loudest thing left. color-scheme in §1 handles the
   browser's half; this is the theme's.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .search-field {
  background-color: var(--inf-raised) !important;
  border: 1px solid var(--inf-border) !important;
  color: var(--inf-text) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .search-field::placeholder {
  color: var(--inf-faint) !important;
  opacity: 1;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--inf-brand-500) !important;
  box-shadow: var(--inf-focus) !important;
  outline: none;
}
html[data-theme="dark"] label,
html[data-theme="dark"] .wpcf7-form label { color: var(--inf-body); }
html[data-theme="dark"] .wpcf7-form .privacy,
html[data-theme="dark"] .wpcf7-list-item-label { color: var(--inf-muted); }
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] { accent-color: var(--inf-brand-500); }

/* Validation. The plugin's own red on a dark field is 3.1:1; the lighter red
   clears 4.5 and keeps the meaning. */
html[data-theme="dark"] .wpcf7-not-valid-tip,
html[data-theme="dark"] .wpcf7 form.invalid .wpcf7-response-output,
html[data-theme="dark"] .wpcf7 form.failed .wpcf7-response-output {
  color: #FF9B9B;
  border-color: #FF9B9B;
}
html[data-theme="dark"] .wpcf7 form.sent .wpcf7-response-output {
  color: #A7E97A;
  border-color: rgba(118,217,43,.5);
}
html[data-theme="dark"] .wpcf7-not-valid {
  border-color: #FF9B9B !important;
}

/* The search overlay is a full-bleed white sheet with a light input in it. */
html[data-theme="dark"] #search-overlay {
  background-color: var(--inf-card) !important;
  border-bottom: 1px solid var(--inf-border);
}
html[data-theme="dark"] #search-overlay .search-field {
  background-color: var(--inf-sunken) !important;
  color: var(--inf-text) !important;
}
html[data-theme="dark"] #search-overlay .close,
html[data-theme="dark"] #search-overlay i { color: var(--inf-muted); }

/* --- 12. Footer -----------------------------------------------------------
   The footer is already a near-black field in the light theme, so most of it
   needs nothing. The exception is the certification strip: five WHITE chips,
   which in the light theme sit on that dark field on purpose and in the dark
   theme are the brightest thing on the page. They become the same card surface
   as everything else, with the marks kept legible by §13.
   Element ids because container classes never render — see §11 of
   infordata-redesign.css. 098517b is the Italian footer, c4aaa3f the English. */
/* NO CHIP. The first version gave each certification a dark card and then §13
   gave the mark inside it a white plate — a white tile floating in a black box
   on a purple band, three surfaces deep. Reported as "MEPA outlined, others
   with black box, not nice", and correctly.

   The reason a plate cannot simply be dropped is in the FILES, not the CSS.
   Measured, per mark:

     logo_mepa_news       0%    transparent — opaque WHITE baked into the pixels
     DASACertLogo-2024    0%    transparent — opaque WHITE baked in
     CQY_9.15_IT_RGB     82.7%  transparent, ink at L 0.05  (near black)
     logo_synesgy        84.4%  transparent, ink at L 0.11
     ACN cybersicurezza  25.9%  transparent, ink at L 0.19

   So two of the five carry their own white rectangle and no stylesheet can take
   it away, while the other three are dark ink that disappears on any dark or
   purple field. Removing all backgrounds leaves two white rectangles beside
   three invisible logos — worse, and inconsistent.

   One surface, then: the mark's own plate, PURE white so the two baked-in
   rectangles merge into it and stop reading as outlines. The container behind
   it goes away entirely. */
html[data-theme="dark"] .elementor-element-098517b > .e-con,
html[data-theme="dark"] .elementor-element-c4aaa3f > .e-con,
html[data-theme="dark"] .inf-certs .elementor-widget {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .elementor-element-098517b > .e-con:hover,
html[data-theme="dark"] .elementor-element-c4aaa3f > .e-con:hover {
  border-color: var(--inf-brand-500);
}
html[data-theme="dark"] .elementor-element-098517b > .e-con p,
html[data-theme="dark"] .elementor-element-c4aaa3f > .e-con p,
html[data-theme="dark"] .inf-certs p,
html[data-theme="dark"] .inf-certs a { color: var(--inf-muted) !important; }
html[data-theme="dark"] .inf-certs { background: var(--inf-sunken); }
html[data-theme="dark"] .inf-certs strong { color: var(--inf-text) !important; }

/* --- 13. Marks and photographs -------------------------------------------
   Two different problems, one section.

   A partner or client logo is usually dark ink on transparent. On a white page
   that is the whole point; on this one it is ink on ink. They are given a light
   plate rather than inverted, because inverting a two-colour logo changes the
   brand's colours — which is the client's asset, not ours to restyle. The plate
   is the same treatment the footer badges already use in the light theme.

   Photographs are left alone. The scrims in infordata-redesign.css §8b were
   measured against these images, and a dark page does not change what is inside
   a photograph.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .elementor-image-carousel .swiper-slide-image,
html[data-theme="dark"] .elementor-widget-image-carousel .swiper-slide img,
html[data-theme="dark"] .inf-certs img,
html[data-theme="dark"] .elementor-element-098517b > .e-con img,
html[data-theme="dark"] .elementor-element-c4aaa3f > .e-con img {
  /* Pure #FFFFFF, not a tinted near-white: two of the five marks have an opaque
     white rectangle in the file, and any other value leaves a visible edge
     around exactly those two — which is the "outlined" MePA that was reported.
     The padding is what makes it read as a deliberate tile rather than a crop. */
  background: #FFFFFF !important;
  border-radius: 8px;
  padding: 7px 9px;
  box-sizing: border-box;
}
/* An SVG or PNG that is already a white knockout must NOT get a white plate.
   Matched on data-src as well as src: LiteSpeed's lazyload leaves a data: URI
   in src until the image scrolls in, so a selector on src alone silently misses
   every image above the fold at first paint and then starts matching — which
   looks like a flicker, not a bug, and is easy to dismiss. */
html[data-theme="dark"] .inf-logo-knockout,
html[data-theme="dark"] img[src*="negativo"],
html[data-theme="dark"] img[data-src*="negativo"],
html[data-theme="dark"] img[src*="_white"],
html[data-theme="dark"] img[data-src*="_white"],
html[data-theme="dark"] img[alt*="Bandiera"] {
  background: none !important;
  padding: 0 !important;
}
html[data-theme="dark"] .inf-footer-badges img { background: #FFFFFF; }

/* OUR OWN wordmark, wherever it appears, gets the negative artwork — the same
   file the header uses — not a filter and not a plate.

   Knockout was tried first, because infordata-redesign.css §5e states the house
   preference for a mono logo on a dark field ("i loghi mono su fondo scuro
   vanno in bianco, non in un riquadro bianco"). This logo is not mono: the "i"
   in logotipo_infordata_2022__vert.svg is a WHITE counter-form cut out of a
   purple disc, so `brightness(0) invert(1)` painted disc and counter the same
   white and the mark rendered as a plain white circle. Screenshotted, not
   deduced. A filter cannot preserve a shape that is defined by two colours.

   The sidebar lockup is vertical and the replacement horizontal, so the block
   gets shorter; at the 200px width the widget sets, that is the whole visible
   difference, and it is the current lockup either way. */
html[data-theme="dark"] img[src*="logotipo_infordata"],
html[data-theme="dark"] img[data-src*="logotipo_infordata"] {
  content: url("logo-infordata-dark.png");
  background: none !important;
  padding: 0 !important;
}

/* Elementor icons drawn as framed boxes went white-on-white. */
html[data-theme="dark"] .elementor-view-framed .elementor-icon,
html[data-theme="dark"] .elementor-view-stacked .elementor-icon {
  border-color: var(--inf-brand-500);
}

/* --- 14. Eco accent -------------------------------------------------------
   patch-01 re-pinned .inf-pill-eco to the light-field values with !important,
   after the main sheet had already given it a dark variant — so the dark rule
   loses in the light theme's own file. Restated here, where this sheet loads
   last. */
html[data-theme="dark"] .inf-pill-eco {
  color: var(--inf-eco-text) !important;
  background: rgba(86,192,0,.14) !important;
  border-color: var(--inf-eco-border) !important;
}
html[data-theme="dark"] .inf-pill-eco::before {
  background: #76D92B !important;
  box-shadow: 0 0 12px rgba(118,217,43,.8) !important;
}
html[data-theme="dark"] .inf-band-eco {
  background: rgba(86,192,0,.09);
  border-color: var(--inf-eco-border);
}
html[data-theme="dark"] .inf-band-eco h2,
html[data-theme="dark"] .inf-band-eco .elementor-heading-title { color: var(--inf-eco-text) !important; }
html[data-theme="dark"] .inf-list-eco li { color: var(--inf-body); }
html[data-theme="dark"] .inf-lead,
html[data-theme="dark"] .inf-lead p { color: var(--inf-text); }
html[data-theme="dark"] .inf-card-eco { border-top-color: #56C000 !important; }
html[data-theme="dark"] .inf-card-biz { border-top-color: var(--inf-brand-500) !important; }
html[data-theme="dark"] .inf-eco-link { color: var(--inf-eco-text) !important; }

/* --- 15. Cookie banner (Complianz) ---------------------------------------
   The banner is built entirely from --cmplz_* custom properties, so it needs no
   element rules at all — only its palette re-pointed. It is rendered late and
   is fixed to the viewport, which makes it the one element that would stay a
   white sheet on an otherwise dark page for as long as consent is unanswered.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .cmplz-cookiebanner,
html[data-theme="dark"] #cmplz-manage-consent,
html[data-theme="dark"] .cmplz-blocked-content-notice {
  --cmplz_banner_background_color: #1C1922;
  --cmplz_banner_border_color: #332C3B;
  --cmplz_text_color: #E4DEE9;
  --cmplz_hyperlink_color: #D7B4D6;
  --cmplz_button_accept_background_color: #964494;
  --cmplz_button_accept_border_color: #A54FA3;
  --cmplz_button_accept_text_color: #FFFFFF;
  --cmplz_button_deny_background_color: #241F2B;
  --cmplz_button_deny_border_color: #443B4D;
  --cmplz_button_deny_text_color: #E4DEE9;
  --cmplz_button_settings_background_color: #241F2B;
  --cmplz_button_settings_border_color: #443B4D;
  --cmplz_button_settings_text_color: #E4DEE9;
  --cmplz_slider_active_color: #B982B7;
  --cmplz_slider_inactive_color: #6F6779;
  --cmplz_slider_bullet_color: #1C1922;
  --cmplz_category_header_always_active_color: #A7E97A;
}
html[data-theme="dark"] .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: var(--inf-sunken);
  border-color: var(--inf-border);
}
html[data-theme="dark"] .cmplz-cookiebanner .cmplz-title,
html[data-theme="dark"] .cmplz-cookiebanner .cmplz-category-header .cmplz-category-title {
  color: var(--inf-text);
}
html[data-theme="dark"] .cmplz-cookiebanner .cmplz-close { color: var(--inf-muted); }

/* --- 16. Third-party widgets ---------------------------------------------
   Feedaty builds its carousel after load from a cross-origin stylesheet that
   cannot be outranked by specificity (infordata-redesign.css §11 has the full
   account), so its own card stays light. Rather than fight it, it is given a
   light plate: a white review card on a dark page is a deliberate panel, an
   unreadable one is a bug. */
html[data-theme="dark"] .feedaty_widget {
  background: #F7F5F8;
  border-radius: var(--inf-r-card);
  padding: 10px;
}
/* The summary block inside it prints its counts in rgba(255,255,255,.66),
   because it is drawn for a coloured field the widget does not actually have
   here. On the white page that measures 1.00:1 — "211" and "Reviews" are
   invisible in the LIGHT theme too, and have been all along; it shows up in the
   light baseline as well, so it is not something the dark theme introduced.
   It is one declaration away on a plate this sheet already owns, so it is fixed
   rather than inherited: 11.3:1 on the plate. !important because the widget's
   stylesheet is served from Feedaty's CDN, cross-origin, and cannot be outranked
   by specificity from here — infordata-redesign.css §11 has the full account. */
html[data-theme="dark"] .feedaty_widget .fdt_txt_opinions,
html[data-theme="dark"] .feedaty_widget .fdt_txt_reviews,
html[data-theme="dark"] .feedaty_widget .ratings-count {
  color: #1D3653 !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection,
html[data-theme="dark"] .select2-dropdown {
  background-color: var(--inf-raised);
  border-color: var(--inf-border);
  color: var(--inf-text);
}
html[data-theme="dark"] .select2-container--default .select2-results__option {
  background-color: var(--inf-raised);
  color: var(--inf-text);
}

/* --- 17. The switch itself ------------------------------------------------
   Injected next to the language pill by inc/dark-mode.php and styled to match
   it, so the utility bar keeps one visual language. It is a real <button> with
   aria-pressed; the icon is CSS, so nothing is fetched for it.
   ------------------------------------------------------------------------- */
.inf-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  min-height: 26px;
  padding: 3px 10px;
  margin-inline-start: 8px;
  font-family: var(--inf-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  /* --inf-body, not --inf-muted. The muted token measured 4.43:1 against the
     translucent white header bar in the LIGHT theme — a fail this file would
     have introduced, on the one control it adds to the page. Caught by running
     the audit against the light theme after deploying, which is the check worth
     keeping: a dark theme can only break the light one through what it adds. */
  color: var(--inf-body);
  background: transparent;
  border: 1px solid var(--inf-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.inf-theme-toggle:hover {
  background: var(--inf-sunken);
  color: var(--inf-text);
}
.inf-theme-toggle:focus-visible {
  outline: 2px solid var(--inf-brand-500);
  outline-offset: 2px;
}
.inf-theme-toggle__icon {
  width: 14px;
  height: 14px;
  display: block;
  background: currentColor;
  /* moon */
  mask: var(--inf-icon-moon) center / contain no-repeat;
  -webkit-mask: var(--inf-icon-moon) center / contain no-repeat;
}
html[data-theme="dark"] .inf-theme-toggle__icon {
  /* sun */
  mask: var(--inf-icon-sun) center / contain no-repeat;
  -webkit-mask: var(--inf-icon-sun) center / contain no-repeat;
}
:root {
  --inf-icon-moon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/></svg>");
  --inf-icon-sun: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/></svg>");
}
/* Fallback placement, used only if the language pill is not in the header —
   see inc/dark-mode.php. A control that decides the theme must never be
   unreachable, least of all for someone who has already chosen dark. */
.inf-theme-toggle--floating {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  background: var(--inf-card);
  box-shadow: var(--inf-shadow-md);
}

html[data-theme="dark"] .inf-theme-toggle {
  color: var(--inf-body);
  border-color: var(--inf-border);
}
html[data-theme="dark"] .inf-theme-toggle:hover {
  background: var(--inf-raised);
  color: var(--inf-text);
}
/* On touch widths the utility bar is tight; the label goes and the target does
   not, matching how the language pills are handled in §5 of the redesign. */
@media (max-width: 1024px) {
  .inf-theme-toggle__label { display: none; }
  .inf-theme-toggle { position: relative; min-width: 34px; padding: 3px 8px; }
  .inf-theme-toggle::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 38px; height: 38px;
    transform: translate(-50%, -50%);
  }
}

/* --- 18. Print ------------------------------------------------------------
   A dark page printed is a page of toner. Everything goes back to light for
   print regardless of the switch. */
@media print {
  html[data-theme="dark"] {
    color-scheme: light;
    --inf-page: #fff; --inf-card: #fff; --inf-raised: #fff; --inf-sunken: #fff;
    --inf-border: #ccc; --inf-text: #000; --inf-body: #222; --inf-muted: #555;
  }
  html[data-theme="dark"] body { background: #fff !important; color: #000 !important; }
  html[data-theme="dark"] .ce-site-logo-img { content: normal; }
  .inf-theme-toggle { display: none !important; }
}

/* --- 19. Documents pasted in whole -----------------------------------------
   The four policy pages embed a COMPLETE HTML document — doctype, html, head,
   40KB stylesheet — inside an Elementor HTML widget. The browser discards the
   wrapper tags on parse but keeps the <style>, so those rules apply to the real
   page: that is where `body { background-color:#f1f1f1 }` comes from, and where
   the h1 rule that makes the page's only heading 1px tall and transparent lives.
   In dark mode the document's own containers (.content, .company-header) stayed
   white under light text — 76 failures per page, worst 1.07:1, on two languages.

   SCOPED WITH :has(.doc-code), NOT BY WIDGET ID. The ids differ per page and
   change when a page is rebuilt; .doc-code is emitted by the generator that
   produces these documents and is what actually identifies one. .content and
   .company-header are far too generic to touch outside such a scope — there is
   a .content on most of this site. Where :has() is unsupported nothing matches
   and those pages stay as they are today, which is the pre-existing state
   rather than a regression.

   NOT FIXED HERE, because it is content and not colour: the invisible h1.
   `h1 { height:1px; font-size:1pt; color:transparent; overflow:hidden }` is in
   the embedded stylesheet and applies document-wide, so /privacy-policy/ and
   its English twin render their only heading — "Informativa" / "Information
   notice" — one pixel tall. Measured, not inferred. That belongs to whoever
   owns the legal documents.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .elementor-widget-html:has(.doc-code),
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) * {
  background-color: transparent !important;
  border-color: var(--inf-border) !important;
}
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) .content,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) .company-header {
  background-color: var(--inf-card) !important;
}
html[data-theme="dark"] .elementor-widget-html:has(.doc-code),
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) p,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) li,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) td,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) div,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) span {
  color: var(--inf-body) !important;
}
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) h1,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) h2,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) h3,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) h4,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) strong,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) b {
  color: var(--inf-text) !important;
}
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) a {
  color: var(--inf-link) !important;
}
/* the generator's own grey note blocks, #CCCCCC, two per page */
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) .doc-code,
html[data-theme="dark"] .elementor-widget-html:has(.doc-code) .company-infos {
  background-color: var(--inf-sunken) !important;
  color: var(--inf-muted) !important;
}

/* --- 20. Complianz consent document, rendered in the page ------------------
   Distinct from the banner in §15. [cmplz-manage-consent] prints the category
   and service list into /cookie-policy/, and it paints its panels with
   rgba(239,239,239,.5) and .25 — light greys that survive on a dark page as a
   pale wash with light text on it. 27 failures per page, worst 1.60:1.

   Same alpha, opposite end of the ramp, so the nesting the plugin builds out of
   two grey levels still reads as two levels.
   ------------------------------------------------------------------------- */
html[data-theme="dark"] .cmplz-categories .cmplz-category {
  background-color: rgba(255,255,255,.035) !important;
  border-color: var(--inf-border) !important;
}
html[data-theme="dark"] .cmplz-categories .cmplz-category-header,
html[data-theme="dark"] .cmplz-categories .cmplz-service-header,
html[data-theme="dark"] .cmplz-manage-consent-container .cmplz-dropdown {
  background-color: rgba(255,255,255,.07) !important;
  border-color: var(--inf-border) !important;
}
html[data-theme="dark"] .cmplz-manage-consent-container .cmplz-category-title,
html[data-theme="dark"] .cmplz-manage-consent-container h3,
html[data-theme="dark"] .cmplz-manage-consent-container summary { color: var(--inf-text) !important; }
html[data-theme="dark"] .cmplz-manage-consent-container p,
html[data-theme="dark"] .cmplz-manage-consent-container li,
html[data-theme="dark"] .cmplz-manage-consent-container td { color: var(--inf-body) !important; }
/* the plugin's "always active" is literal `green` — 1.87:1 on this surface, and
   not much better on white either. */
html[data-theme="dark"] .cmplz-always-active { color: var(--inf-eco-text) !important; }
html[data-theme="dark"] .cmplz-manage-consent-container a { color: var(--inf-link) !important; }

/* The service rows sit OUTSIDE .cmplz-categories — they are their own
   <details class="cmplz-dropdown cmplz-service-desc"> further down the
   document, so the ancestor-scoped rules above miss them. These plugin class
   names are distinctive enough to match on their own; scoping them to a
   container was an assumption, and it cost 22 of the 27 failures on this page. */
html[data-theme="dark"] .cmplz-dropdown,
html[data-theme="dark"] .cmplz-service-desc,
html[data-theme="dark"] .cmplz-service-header,
html[data-theme="dark"] .cmplz-category-header {
  background-color: rgba(255,255,255,.07) !important;
  border-color: var(--inf-border) !important;
}
html[data-theme="dark"] .cmplz-service-header h3,
html[data-theme="dark"] .cmplz-service-header summary { color: var(--inf-text) !important; }
html[data-theme="dark"] .cmplz-service-header p,
html[data-theme="dark"] .cmplz-service-desc p { color: var(--inf-body) !important; }
