/* =============================================================================
   infordata-redesign.css — theme layer for infordata.it / infordata.pro
   Loaded by converta-child after the parent and child stylesheets.

   Implements design_handoff_infordata_theme (21/08/2026), remapped to the
   markup this site actually emits. The handoff's own sheet targets the
   Elementor nav-menu widget and WPML; this install runs Converta Elements
   (nav.ce-nav-menu, a.ce-menu-item, a.ce-sub-menu-item) and Polylang for
   Elementor (nav.cpel-switcher__nav), so every header rule had to be rewritten
   against the real classes.

   Nothing here changes markup. Rules carry !important only where the theme
   prints a competing declaration in an inline <style> later in the document,
   which no amount of specificity in a linked sheet can outrank.
   ========================================================================== */

/* --- 1. Fonts — self-hosted -------------------------------------------------
   The handoff @imports these from fonts.googleapis.com. This site serves its
   fonts locally (Kirki), and an EU site with a privacy page of its own has no
   reason to hand every visitor's IP to a third party for a typeface. Variable
   files: one per subset covers 400-700, so the whole family costs two requests.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/wp-content/fonts/inter/inter-latin-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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/wp-content/fonts/inter/inter-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/wp-content/fonts/jetbrains-mono/jetbrains-mono-latin-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/wp-content/fonts/jetbrains-mono/jetbrains-mono-latin.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;
}

/* --- 2. Tokens ------------------------------------------------------------ */
:root {
  --inf-brand-50:#F9F3F9;  --inf-brand-100:#F1E4F1; --inf-brand-200:#E1C8E0;
  --inf-brand-300:#CBA4CA; --inf-brand-400:#AC71AB; --inf-brand-500:#964494;
  --inf-brand-600:#763374; --inf-brand-700:#5E2A5D; --inf-brand-800:#491F48;
  --inf-brand-900:#331733;

  /* eco accent — sampled from the circuit-leaf hero image. Reserved for
     sustainability, research and environmental monitoring: an accent, never a
     second brand colour. Handoff §6. */
  --inf-eco-50:#F4FBEC;  --inf-eco-100:#E4F6D2; --inf-eco-300:#A7E97A;
  --inf-eco-400:#76D92B; --inf-eco-500:#56C000; --inf-eco-600:#449A0A;
  --inf-eco-700:#33710F; --inf-eco-800:#26550D;
  --inf-eco-text:var(--inf-eco-700);        /* 4.9:1 on white */
  --inf-eco-surface:var(--inf-eco-50);
  --inf-eco-border:rgba(86,192,0,.28);

  --inf-0:#FFFFFF;   --inf-25:#FCFBFC;  --inf-50:#F7F5F8;  --inf-100:#EFEBF1;
  --inf-200:#DFD9E3; --inf-300:#C4BCCA; --inf-400:#9B92A3; --inf-500:#756D7D;
  --inf-600:#57505F; --inf-700:#423C49; --inf-800:#2C2832; --inf-900:#1B181F;
  --inf-950:#121016;

  --inf-page:var(--inf-50);
  --inf-card:var(--inf-0);
  --inf-sunken:var(--inf-100);
  --inf-border:var(--inf-200);
  --inf-text:var(--inf-900);
  --inf-body:var(--inf-700);
  --inf-muted:var(--inf-500);
  --inf-faint:var(--inf-400);
  --inf-link:var(--inf-brand-700);
  --inf-on-brand:#FFFFFF;

  --inf-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --inf-mono:'JetBrains Mono',ui-monospace,monospace;

  --inf-r-control:10px; --inf-r-card:14px; --inf-r-feature:20px;
  --inf-shadow-sm:0 1px 2px rgba(27,24,31,.04), 0 8px 20px -10px rgba(27,24,31,.13);
  --inf-shadow-md:0 2px 4px rgba(27,24,31,.05), 0 20px 38px -14px rgba(150,68,148,.26);
  --inf-focus:0 0 0 3px rgba(150,68,148,.38);
}

/* Dark palette is defined but NOT wired to prefers-color-scheme.
   Elementor sections on this site carry baked-in background colours and hex
   values in page content; switching automatically would give a large share of
   visitors a half-dark page with no way out. Set data-theme="dark" on <html>
   to preview, and treat a real toggle as its own piece of work. */
html[data-theme="dark"] {
  --inf-page:#121016; --inf-card:#1C1922; --inf-sunken:#17141C;
  --inf-border:#332C3B;
  --inf-text:#F5F1F7; --inf-body:#CBC3D2; --inf-muted:#948B9D; --inf-faint:#6F6779;
  --inf-link:#CBA4CA; --inf-brand-500:#B982B7; --inf-brand-600:#C897C6;
  --inf-on-brand:#1B0F18;
  --inf-eco-text:#A7E97A; --inf-eco-surface:rgba(86,192,0,.13);
  --inf-eco-border:rgba(118,217,43,.32);
  --inf-shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 12px 26px -14px rgba(0,0,0,.7);
  --inf-shadow-md:0 2px 6px rgba(0,0,0,.45), 0 22px 44px -16px rgba(185,130,183,.3);
}

/* --- 3. Base type --------------------------------------------------------- */
body,
body.elementor-page,
.elementor-widget-container,
button, input, select, textarea {
  font-family: var(--inf-sans) !important;
}
body {
  color: var(--inf-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5,
.elementor-heading-title,
.entry-title {
  font-family: var(--inf-sans) !important;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
/* Sentence case for the display sizes. The source text is already written that
   way — "Infordata Sistemi", not "INFORDATA SISTEMI" — so this only removes a
   text-transform that Elementor and the theme apply on top. h3-h6 are left
   alone: h6 is the site's eyebrow and is meant to be uppercase. */
h1, h2,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.ce-page-header h1 {
  text-transform: none !important;
}

/* One exception to the exception. The h6 above the home page's first heading is
   a 130-character sentence — "Esperienza pluriennale nel settore ICT, IoT, …" —
   not a label, and uppercase with wide tracking turns it into four lines on a
   phone. Its source text is already sentence case; only the transform comes off.
   Same widget id on both home pages. */
.elementor-element-7587ae7 .elementor-heading-title {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* h6 is the site's eyebrow: it stays uppercase, per the handoff's one exception. */
h6 { font-family: var(--inf-sans) !important; letter-spacing: .12em; }

code, kbd, samp, .inf-mono { font-family: var(--inf-mono); font-size: .92em; }

/* Accessibility: one visible focus style, and a skip link
   (markup added in converta-child/functions.php). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--inf-focus);
  border-radius: 6px;
}
.inf-skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.inf-skip-link:focus {
  left: 16px; top: 16px; z-index: 100000;
  width: auto; height: auto;
  background: var(--inf-card); color: var(--inf-text);
  padding: 10px 16px; border-radius: var(--inf-r-control);
  box-shadow: var(--inf-shadow-md); font-size: 14.5px; font-weight: 600;
}

/* --- 4. Utility bar: language switch as a segmented pill -------------------
   The widget renders flag images only (nav.cpel-switcher__nav). The language
   code comes from the anchor's own lang attribute, so the pill needs no markup
   change and stays correct if a third language is ever added. */
.cpel-switcher__list {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--inf-border); border-radius: 999px;
  overflow: hidden; padding: 0; margin: 0; list-style: none;
}
.cpel-switcher__lang { margin: 0 !important; }
.cpel-switcher__lang > a {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 26px; padding: 3px 11px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--inf-muted) !important; text-decoration: none;
}
.cpel-switcher__lang > a:hover { background: var(--inf-sunken); color: var(--inf-text) !important; }
.cpel-switcher__lang--active > a {
  background: var(--inf-brand-100);
  color: var(--inf-brand-700) !important;
}
.cpel-switcher__flag { display: none !important; }
.cpel-switcher__lang > a::after {
  content: attr(lang);
  text-transform: uppercase;
}
/* Two-letter label from "it-IT" / "en-GB": clip the region half. */
.cpel-switcher__lang > a[lang^="it"]::after { content: "IT"; }
.cpel-switcher__lang > a[lang^="en"]::after { content: "EN"; }

/* --- 5. Header and main menu ----------------------------------------------
   The core fix. Sentence case, real hit areas, an underline instead of the
   filled purple block, and a submenu that reads as a panel. */
#masthead .mainmenu-infordata .ce-nav-menu a.ce-menu-item {
  font-family: var(--inf-sans) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--inf-body) !important;
  padding: 0 11px !important;
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--inf-r-control);
  transition: color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#masthead .mainmenu-infordata .ce-nav-menu a.ce-menu-item:hover {
  color: var(--inf-brand-700) !important;
  background: var(--inf-sunken);
}
/* Active: 2px brand underline. Replaces the filled block that the site's own
   custom CSS sets with !important — that rule is removed there, this is the
   replacement. */
#masthead .mainmenu-infordata .menu-item.current-menu-item > a.ce-menu-item,
#masthead .mainmenu-infordata .menu-item.current-menu-ancestor > a.ce-menu-item,
#masthead .mainmenu-infordata .menu-item.current-menu-parent > a.ce-menu-item {
  background-color: transparent !important;
  color: var(--inf-text) !important;
  box-shadow: inset 0 -2px 0 0 var(--inf-brand-500);
  border-radius: 0;
}

/* Everything below is the desktop panel. It must stay behind a media query:
   below 1025px the same markup is the theme's accordion, and a 560px two-column
   panel inside a 387px viewport is 817px-wide links running off the screen —
   measured, not hypothetical. The theme's own breakpoint is 1024px.
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* The submenu becomes a panel: card surface, hairline, soft shadow, and two
     columns as soon as it is long — the twenty-item lists were the complaint. */
  #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu {
    background: var(--inf-card) !important;
    border: 1px solid var(--inf-border);
    border-radius: var(--inf-r-card);
    box-shadow: var(--inf-shadow-md);
    padding: 10px !important;
    min-width: 300px;
  }
  /* The menu <ul> carries .ce-nav-menu itself — it is a child of <nav>, not of the
     widget wrapper — so a "> ul" step never matches. Address the list directly.
     :has() applies the second column only to the panels long enough to need it;
     a browser without :has() simply keeps one column, which is the old behaviour. */
  #masthead .mainmenu-infordata ul.ce-nav-menu > li > ul.sub-menu:has(> li:nth-child(7)) {
    columns: 2;
    column-gap: 20px;
    min-width: 560px;
  }
  #masthead .mainmenu-infordata ul.ce-nav-menu > li > ul.sub-menu > li {
    break-inside: avoid;
  }

  /* A parent inside the panel is a group label now that its children are listed
     inline underneath. It stays a link — those are real category archives — but it
     stops competing with them, and the flyout arrow has nothing left to open. */
  #masthead .mainmenu-infordata ul.sub-menu li.menu-item-has-children > a.ce-sub-menu-item {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase !important;
    color: var(--inf-faint) !important;
    padding: 14px 12px 4px !important;
    min-height: 0;
  }
  #masthead .mainmenu-infordata ul.sub-menu li.menu-item-has-children > a.ce-sub-menu-item:hover {
    background: transparent !important;
    color: var(--inf-muted) !important;
  }
  #masthead .mainmenu-infordata ul.sub-menu .sub-arrow { display: none !important; }
  #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu a.ce-sub-menu-item {
    display: block;
    font-family: var(--inf-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--inf-text) !important;
    background: transparent !important;
    padding: 9px 12px !important;
    border-radius: var(--inf-r-control);
    line-height: 1.35;
  }
  #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu a.ce-sub-menu-item:hover {
    background: var(--inf-sunken) !important;
    color: var(--inf-brand-700) !important;
  }
  #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu .current-menu-item > a.ce-sub-menu-item {
    background: var(--inf-brand-50) !important;
    color: var(--inf-brand-700) !important;
  }
  /* The menu-item Description field, once filled, renders under the label and is
     what makes a long panel scannable. */
  #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu .menu-item-description {
    display: block; margin-top: 2px;
    font-size: 12.5px; font-weight: 400; line-height: 1.4;
    color: var(--inf-muted);
  }
  /* Third level: indent inside the panel instead of a flyout that has to be
     aimed at. Overrides the -10px margin the site's custom CSS sets. */
  #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu ul.sub-menu {
    position: static !important;
    visibility: visible !important; opacity: 1 !important; height: auto !important;
    box-shadow: none; border: 0; border-left: 2px solid var(--inf-brand-100);
    border-radius: 0;
    margin: 2px 0 6px !important;
    padding: 0 0 0 12px !important;
    min-width: 0; columns: 1;
  }
  #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu ul.sub-menu a.ce-sub-menu-item {
    font-size: 13.5px !important;
    color: var(--inf-body) !important;
    padding: 7px 10px !important;
  }
}

/* Touch widths: the same lists are the accordion. Leave the theme's layout
   alone and only give the rows a thumb-sized target. */
@media (max-width: 1024px) {
  #masthead .mainmenu-infordata .ce-nav-menu a.ce-menu-item,
  #masthead .mainmenu-infordata .ce-nav-menu a.ce-sub-menu-item {
    min-height: 48px;
    font-size: 16px !important;
  }
  #masthead .mainmenu-infordata .ce-nav-menu ul.sub-menu a.ce-sub-menu-item {
    padding-left: 24px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  /* Utility bar targets. Measured on a 387px viewport: the social icons render
     18x18 — under the 24px WCAG 2.2 asks for, never mind a thumb — and the
     language pills 40x26.

     The hit area grows, the layout does not. Sizing the boxes themselves was
     tried first: at 36px the four icons plus the pill no longer fit 371px, the
     utility bar wrapped to two rows and the mobile header went from 151px to
     241px — 90px of the viewport spent on a row of social links. An invisible
     overlay centred on each control gives the same target for nothing. 38px
     matches the icons' own 38px pitch, so neighbouring targets do not overlap
     and steal each other's taps. */
  #masthead .elementor-social-icon,
  .cpel-switcher__lang > a { position: relative; }
  #masthead .elementor-social-icon::after,
  .cpel-switcher__lang > a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
  }
}

/* --- 6. Page headers ------------------------------------------------------
   Was: a 290px featured-image band with a 51px uppercase white title and a
   text-shadow. Now: a text header on the card surface. The image band is the
   "images too big" complaint; the shadowed caps are the "old-style theme" one. */
.ce-page-header.modern,
.ce-page-header {
  background: var(--inf-card) !important;
  border-bottom: 1px solid var(--inf-border);
  padding: 30px 0 34px !important;
  min-height: 0 !important;
}
.ce-page-header .bg-image,
.ce-page-header .wrapper-layers,
.ce-page-header .elementor-background-overlay { display: none !important; }
.ce-page-header .page-data h1,
.ce-page-header h1 {
  color: var(--inf-text) !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
  text-shadow: none !important;
  margin: 0;
}
/* The theme gives .page-data 110px/120px of padding, centres it with flexbox and
   pushes the h1 down by 50px — together that is the 290px band. */
.ce-page-header .page-data {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.ce-page-header .page-data h1 { margin-bottom: 0 !important; }
.ce-page-header .page-data .page_parents { margin-top: 10px; }
/* Archive and tag headers: same treatment, and no purple gradient. */
.archive .ce-page-header,
.archive.tag .ce-page-header,
.archive.category-sostenibilita .ce-page-header {
  background-image: none !important;
  padding-top: 30px !important;
  padding-bottom: 34px !important;
}
/* Post headers carried the same shadowed-caps treatment and 360px of padding. */
.cl-single-blog-header-style-with_image.single-post .cl-post-header {
  padding-top: 48px !important; padding-bottom: 40px !important;
}
.cl-single-blog-header-style-with_image.single-post .cl-post-header h1,
.cl-single-blog-header-style-with_image.single-post .cl-post-header .entry-meta {
  text-shadow: none !important;
}

/* Body images: stop the oversized inline renders from dominating the column. */
.entry-content img:not([src*=".svg"]),
.content-col .wp-block-image img { border-radius: var(--inf-r-card); }

/* --- 7. Cards, buttons, chips --------------------------------------------- */
.elementor-button, .wp-block-button__link,
button[type="submit"], input[type="submit"] {
  font-family: var(--inf-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--inf-r-control) !important;
  min-height: 44px;
}
@media (prefers-reduced-motion: no-preference) {
  .elementor-button:active, .wp-block-button__link:active { transform: translateY(.5px) scale(.992); }
  .blog-entries article,
  .elementor-widget .ce-posts-grid .ce-post-item {
    transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
  }
  .blog-entries article:hover,
  .elementor-widget .ce-posts-grid .ce-post-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--inf-shadow-md);
  }
}

/* Elementor's default post-excerpt grey is #777, which measures 4.48:1 on white
   — 0.02 short of the 4.5 AA needs at 14px. The design system's muted token is
   visually the same weight and clears it at 4.95:1. */
.elementor-post__excerpt p,
.elementor-post__excerpt { color: var(--inf-muted); }

/* Tag cloud: uniform pills at a readable size, capped so a 34-tag list stops
   being a wall. .inf-tags--all on the container lifts the cap. */
.tagcloud, .widget_tag_cloud .tagcloud {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 168px; overflow: hidden;
}
.tagcloud.inf-tags--all { max-height: none; }
.tagcloud a {
  font-size: 12.5px !important; font-weight: 500;
  text-transform: none;
  padding: 5px 10px; margin: 0 !important;
  border: 1px solid var(--inf-border); border-radius: 999px;
  background: var(--inf-card); color: var(--inf-body);
  line-height: 1.4;
}
.tagcloud a:hover {
  border-color: var(--inf-brand-300); color: var(--inf-brand-700) !important;
  text-decoration: none;
}

/* --- 8. Footer -----------------------------------------------------------
   The certification row was five 210px white cards. They become chips: the
   mark at 26px with its caption beside it, padding instead of dead space.
   The dark field itself stays with the footer template's own background. */
#colophon .e-con-inner > a.e-con-full {
  border-radius: var(--inf-r-control) !important;
}
#colophon .e-con-inner > a.e-con-full img {
  max-height: 26px !important;
  width: auto !important;
}
#colophon .e-con-inner > a.e-con-full p,
#colophon .e-con-inner > a.e-con-full .elementor-widget-text-editor {
  font-size: 11.5px !important;
  line-height: 1.4;
}
/* Only the widgets' own vertical margins are collapsed. A row layout was tried
   and reverted: at 204px per card the caption wraps to five lines and comes out
   taller than the card it replaced. Turning these five into true chips means
   letting the row wrap in Elementor, which is a template edit, not a CSS one. */
#colophon .e-con-inner > a.e-con-full > .elementor-element { margin-block: 0 !important; }

/* Footer CTA: white text on a photograph of the building. Sampled against the
   rendered image, the 28px mobile heading sits at 2.73:1 on average and 1.03:1
   where the sky is brightest — invisible. Desktop averages 3.54:1 but still
   drops to 1.17:1 in patches. A scrim fixes both without touching the image or
   the template. At .5 the brightest patch measures 3.44:1, which clears AA for
   large text across the whole heading.

   The element id is the one the site's own mobile footer fix already targets; if
   that footer template is rebuilt in Elementor, both need updating. */
#colophon .elementor-element-0673c26 { position: relative; }
#colophon .elementor-element-0673c26::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(27, 24, 31, .5);
  pointer-events: none;
  border-radius: inherit;
}
#colophon .elementor-element-0673c26 > * { position: relative; z-index: 1; }

#colophon img[alt*="certificazione"],
#colophon img[alt*="MePA"],
#colophon img[alt*="Synesgy"] {
  max-height: 44px !important; width: auto !important;
}
/* width:auto on an SVG without intrinsic dimensions collapses it to nothing,
   so the logo gets a height instead of a cap. */
#colophon img[alt="Infordata Sistemi"] { height: 40px !important; max-height: 40px !important; width: auto !important; }
#colophon img[alt="Società Benefit"] { max-height: 52px !important; width: auto !important; }
#colophon img[alt*="Bandiera"] { max-height: 20px !important; width: auto !important; }

/* Footer links are 17px tall — fine for a cursor, not for a thumb. On touch
   widths they get a real hit area. Measured on a 387px viewport: 19 links in the
   footer were under the 44px the brief asks for. */
@media (max-width: 1024px) {
  #colophon .ce-footer-nav a,
  #colophon .ce-footer-nav__item a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  #colophon .ce-footer-nav-layout-horizontal .ce-footer-nav__item a {
    padding-inline: 2px;
  }
}

/* --- 8b. Text set directly on photographs ---------------------------------
   Three blocks put text straight onto an image with nothing between them.
   Sampled against the rendered images at 387px, with the text colours actually
   in use:

     home hero, 26px/900 white          2.13:1 avg   1.14:1 worst   (needs 3)
     "Grazie ai nostri investimenti",
       18px/400 #423C49                 3.17:1 avg   1.90:1 worst   (needs 4.5)

   The body colour was #b68cb5 before this redesign, so the second one used to
   be far worse — but "better than it was" is not a threshold. A scrim at the
   alpha each one needs, chosen by measurement rather than taste: dark behind
   white text, light behind dark text, and no more than the minimum so the
   photograph still reads.

   Element ids are how the site's own custom CSS already addresses these
   containers. If the home page or the footer is rebuilt in Elementor, these
   need updating with it.
   ------------------------------------------------------------------------- */
/* Element ids are NOT unique across pages: the Italian home (1737) and the
   English home (5758) each contain a container called 1f99d3c, with different
   background images behind them. An unscoped .elementor-element-1f99d3c rule
   silently styles both, so every rule here is scoped to its page. */
.elementor-1737 .elementor-element-1f99d3c,
.elementor-5758 .elementor-element-1f99d3c,
.elementor-element-0aaa680 { position: relative; }

.elementor-5758 .elementor-element-1f99d3c::after,
.elementor-element-0aaa680::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* The Italian home no longer needs a scrim from here: the hero carries its own
   legibility gradient (rgba(15,11,21,.92) -> .72) set on the container in
   Elementor. Stacked with this one the top of the mobile hero reached 96%
   opacity and the circuit-leaf — the point of the image — disappeared.
   The English home is NOT equivalent: its overlay is a radial that fades to
   transparent at the edges, over a photograph, so it keeps the scrim. */
.elementor-5758 .elementor-element-1f99d3c::after { background: rgba(27, 24, 31, .5); }  /* white text -> 3.72:1 worst */
.elementor-element-0aaa680::after { background: rgba(255, 255, 255, .7); } /* dark text   -> 5.20:1 worst */

.elementor-1737 .elementor-element-1f99d3c > *,
.elementor-5758 .elementor-element-1f99d3c > *,
.elementor-element-0aaa680 > * { position: relative; z-index: 1; }

/* --- 8b. Eco accent ---------------------------------------------------------
   The green from the hero leaf, used only where the subject is sustainability,
   research or environmental monitoring. Everything else stays magenta: a second
   brand colour would read as a second company. Handoff §6.

   These are opt-in classes. Add them to the Elementor element that needs them
   (Advanced -> CSS Classes); nothing is retinted automatically. */
.inf-pill-eco {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--inf-eco-border); background: rgba(86,192,0,.12);
  color: var(--inf-eco-700); font-size: 12.5px; font-weight: 600;
}
.inf-pill-eco::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--inf-eco-500);
}
/* on a dark field the pill needs the light end of the ramp to stay readable */
.inf-band-research .inf-pill-eco,
html[data-theme="dark"] .inf-pill-eco { color: var(--inf-eco-300); }
.inf-band-research .inf-pill-eco::before,
html[data-theme="dark"] .inf-pill-eco::before {
  background: var(--inf-eco-400); box-shadow: 0 0 12px var(--inf-eco-400);
}

/* research / sustainability band: brand purple fading into leaf green */
.inf-band-research,
.inf-band-research.e-con {
  background: linear-gradient(100deg,
              var(--inf-brand-900) 0%, var(--inf-brand-900) 38%,
              color-mix(in oklab, var(--inf-brand-900), var(--inf-eco-800) 62%) 78%,
              var(--inf-eco-800) 100%) !important;
  color: #fff;
}
.inf-band-research .elementor-heading-title,
.inf-band-research h2, .inf-band-research h3 { color: #fff !important; }
.inf-band-research p, .inf-band-research li { color: rgba(255,255,255,.82); }
.inf-band-research a:not(.elementor-button) { color: var(--inf-eco-300); }

/* the CTA that belongs to that band only */
.elementor-button.inf-btn-eco, a.inf-btn-eco {
  background: var(--inf-eco-500) !important; color: #0E2404 !important;
  font-weight: 650; border-color: transparent !important;
}
.elementor-button.inf-btn-eco:hover, a.inf-btn-eco:hover {
  background: var(--inf-eco-400) !important; color: #0E2404 !important;
}

/* Societa Benefit badge, when it is set as text rather than an image */
.inf-benefit-badge {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; line-height: 1.25;
  border: 1px solid var(--inf-eco-border); background: rgba(86,192,0,.12);
  border-radius: 6px; padding: 4px 6px; color: var(--inf-eco-300);
}

/* a link that reads as environmental rather than commercial */
.inf-eco-link { color: var(--inf-eco-text) !important; }

/* --- 9. Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 10. anwp post grid: one date, not two --------------------------------
   PAGINE-NUOVE.md flags "Posted onDicembre 2025Dicembre 2025" on /notizie/.
   The source is anwp-post-grid's get_post_date(): when a post has been edited
   it prints the published date and the modified date as two adjacent <time>
   elements, and there is no filter on that method. When the two dates match it
   prints ONE element carrying both classes — hence the adjacent-sibling
   selector, which hides the modified date only where a separate one exists.
   /notizie/ no longer uses this widget, but the home page carousel does. */
.anwp-pg-wrap time.anwp-pg-published + time.anwp-pg-updated { display: none; }

/* ===== PATCH-01 22/08/2026 — inizio =====================================
   Source: prompt_20260822/Infordata website redesign1.zip, patch-01/.
   Five fixes: button states, blockquotes, heading line-height, green
   accents, footer. Kept as one marked block so it can be replaced or
   lifted out whole. It loads last on purpose — it is meant to override
   the sections above it.
   The markup half is NOT here: .inf-lead, .inf-quote-eco, .inf-list-eco,
   .inf-band-eco, .inf-certs and the rest need classes added to the
   Elementor widgets, which is the other session's work. Until those
   classes exist the rules that depend on them are inert.
   ==================================================================== */

/* =============================================================================
   infordata-patch-01.css — patch incrementale (22 agosto 2026)
   Da caricare DOPO infordata-theme.css. Contiene SOLO le quattro correzioni
   richieste in questo giro: stati dei pulsanti, virgolettati, interlinea dei
   titoli, accenti verdi. Non ripete nulla del foglio principale.
   Base colore rilevata sul sito live: #964494 (pulsanti Elementor).
   ========================================================================== */

:root {
  --inf-btn:            #964494;   /* il viola dei pulsanti già in uso */
  --inf-btn-hover:      #A85DA6;   /* viola più chiaro: schiarisce, non svuota */
  --inf-btn-active:     #7E3480;
  --inf-btn-border:     #7E3480;
  --inf-btn-ring:       rgba(150,68,148,.30);
  --inf-btn-eco-hover:  #E4F6D2;   /* verde chiaro per le varianti secondarie */
  --inf-btn-eco-text:   #33710F;
  --inf-btn-eco-border: rgba(86,192,0,.45);

  --inf-btn-shadow:       0 1px 2px rgba(27,24,31,.10), 0 6px 14px -6px rgba(150,68,148,.38);
  --inf-btn-shadow-hover: 0 2px 4px rgba(27,24,31,.10), 0 12px 22px -8px rgba(150,68,148,.46);
}

/* --- 1. Pulsanti ---------------------------------------------------------
   PROBLEMA: in hover il pulsante viola diventa fondo bianco con testo viola —
   sembra disattivato o rotto, e su fondo bianco perde ogni bordo visibile.
   SOLUZIONE: il fondo resta pieno e SCHIARISCE; il testo resta bianco sempre.
   Aggiunti bordo e ombra in tutti gli stati. */

.elementor-button,
.elementor-button-link,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
  background-color: var(--inf-btn) !important;
  color: #fff !important;
  border: 1px solid var(--inf-btn-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--inf-btn-shadow) !important;
  text-transform: none !important;   /* via l'ALL-CAPS: "Vai a prodotti, software e soluzioni" */
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  min-height: 44px;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

/* lo stato hover: più chiaro, non più vuoto */
.elementor-button:hover,
.elementor-button:focus-visible,
.elementor-button-link:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--inf-btn-hover) !important;
  color: #fff !important;                       /* la regola che risolve il testo invisibile */
  border-color: var(--inf-btn-hover) !important;
  box-shadow: var(--inf-btn-shadow-hover) !important;
  transform: translateY(-1px);
}

.elementor-button:active,
.wp-block-button__link:active {
  background-color: var(--inf-btn-active) !important;
  box-shadow: var(--inf-btn-shadow) !important;
  transform: translateY(.5px) scale(.994);
}

.elementor-button:focus-visible {
  outline: none;
  box-shadow: var(--inf-btn-shadow-hover), 0 0 0 3px var(--inf-btn-ring) !important;
}

/* l'icona dentro al pulsante segue il testo, non resta viola su viola */
.elementor-button .elementor-button-icon,
.elementor-button .elementor-button-icon svg,
.elementor-button i { color: currentColor !important; fill: currentColor !important; }

/* Variante secondaria (contorno). Hover in VERDE CHIARO: distingue le azioni
   di secondo livello senza introdurre un terzo colore.
   Applicare la classe .inf-btn-outline al pulsante in Elementor. */
.elementor-button.inf-btn-outline {
  background-color: transparent !important;
  color: var(--inf-btn) !important;
  border: 1px solid var(--inf-btn) !important;
  box-shadow: 0 1px 2px rgba(27,24,31,.06) !important;
}
.elementor-button.inf-btn-outline:hover {
  background-color: var(--inf-btn-eco-hover) !important;
  color: var(--inf-btn-eco-text) !important;
  border-color: var(--inf-btn-eco-border) !important;
  box-shadow: 0 2px 4px rgba(27,24,31,.07), 0 10px 20px -10px rgba(86,192,0,.35) !important;
}

/* Variante verde piena, per le CTA di sostenibilità / ricerca */
.elementor-button.inf-btn-eco {
  background-color: #33710F !important;
  border-color: #26550D !important;
  box-shadow: 0 1px 2px rgba(27,24,31,.10), 0 6px 14px -6px rgba(51,113,15,.40) !important;
}
.elementor-button.inf-btn-eco:hover {
  background-color: #449A0A !important;
  border-color: #449A0A !important;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-button { transition: none !important; }
  .elementor-button:hover { transform: none !important; }
}

/* --- 2. Virgolettati (pagina Impatto e altre) ----------------------------
   PROBLEMA: il blockquote è testo in grassetto senza contenitore: non si
   distingue dal corpo e si perde nello scroll.
   SOLUZIONE: fondo leggerissimo, filetto verticale, tipografia calma. */

blockquote,
.wp-block-quote,
.entry-content blockquote {
  margin: 32px 0 !important;
  padding: 24px 28px 24px 30px !important;
  background: linear-gradient(100deg,
              color-mix(in srgb, var(--inf-btn) 6%, #fff) 0%,
              color-mix(in srgb, var(--inf-btn) 3%, #fff) 100%);
  border: 1px solid rgba(150,68,148,.16);
  border-left: 3px solid var(--inf-btn);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(27,24,31,.04);
  quotes: none;
}
blockquote p,
.wp-block-quote p {
  margin: 0 !important;
  font-size: 17.5px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;      /* non tutto grassetto: il fondo fa già il lavoro */
  color: #2C2832 !important;
  max-width: 68ch;
}
blockquote p strong, .wp-block-quote p strong { font-weight: 700 !important; color: #1B181F !important; }
blockquote > *:last-child { margin-bottom: 0 !important; }

/* variante verde: virgolettati su sostenibilità, ricerca, Società Benefit.
   Aggiungere la classe .inf-quote-eco al blockquote. */
blockquote.inf-quote-eco, .wp-block-quote.inf-quote-eco {
  background: linear-gradient(100deg, #F4FBEC 0%, #FBFEF7 100%);
  border-color: rgba(86,192,0,.24);
  border-left-color: #56C000;
}

/* Keyed to the manual attribute, NOT prefers-color-scheme: patch-01 shipped
   this as a media query, which contradicts the policy at the top of this file
   and gave every dark-OS visitor dark quotes inside an otherwise white
   Elementor page. Same rules, same intent, opt-in like the rest. */
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .wp-block-quote {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  border-left-color: #B982B7;
}
html[data-theme="dark"] blockquote p,
html[data-theme="dark"] .wp-block-quote p { color: #CBC3D2 !important; }
html[data-theme="dark"] blockquote p strong { color: #F5F1F7 !important; }
html[data-theme="dark"] blockquote.inf-quote-eco { background: rgba(86,192,0,.10); border-left-color: #76D92B; }

/* --- 3. Interlinea dei titoli e dei paragrafi grandi --------------------
   PROBLEMA (pagina AI Engineering): titoli e paragrafi introduttivi impostati
   a 36px con interlinea ~1.0 — le righe si toccano e gli accenti vengono
   tagliati dalla riga superiore.
   SOLUZIONE: interlinea minima per scaglione di dimensione, e un formato
   dedicato per i paragrafi-occhiello, che a 36px sono comunque troppo grandi. */

h1, .elementor-widget-heading h1.elementor-heading-title { line-height: 1.08 !important; letter-spacing: -.025em; }
h2, .elementor-widget-heading h2.elementor-heading-title { line-height: 1.20 !important; letter-spacing: -.02em; }
h3, .elementor-widget-heading h3.elementor-heading-title { line-height: 1.28 !important; }
h4, h5, h6, .elementor-widget-heading h4.elementor-heading-title { line-height: 1.35 !important; }

/* qualunque titolo Elementor: mai sotto 1.15, mai troncato in altezza */
.elementor-widget-heading .elementor-heading-title {
  line-height: 1.2 !important;
  padding-bottom: .06em;            /* spazio per gli accenti maiuscoli: È, Ì */
  text-wrap: pretty;
}

/* paragrafo-occhiello: il blocco in grassetto sotto al titolo.
   Aggiungere .inf-lead al widget testo. */
.inf-lead, .inf-lead p {
  font-size: clamp(19px, 1.9vw, 25px) !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  max-width: 46ch;
  color: #2C2832;
}
/* rete di sicurezza: un <strong> non deve mai ereditare un'interlinea compressa */
.elementor-widget-text-editor p,
.entry-content p { line-height: 1.65 !important; }
.elementor-widget-text-editor p strong,
.entry-content p strong { line-height: inherit; }

/* --- 4. Accenti verdi (il punto saltato nel giro precedente) ------------
   Il verde non è un secondo colore brand: compare SOLO su sostenibilità,
   ricerca, monitoraggio ambientale e Società Benefit. Sei punti di applicazione,
   tutti già previsti nel foglio principale — qui i più semplici da agganciare. */

/* 4a. pill/eyebrow verde con pallino luminoso */
.inf-pill-eco { /* definita in infordata-theme.css — qui solo il caso su fondo chiaro */
  color: #33710F !important;
  background: rgba(86,192,0,.10) !important;
  border-color: rgba(86,192,0,.30) !important;
}
.inf-pill-eco::before { background: #56C000; box-shadow: 0 0 10px rgba(86,192,0,.7); }

/* 4b. spunte verdi negli elenchi di sostenibilità e AI */
.inf-list-eco { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 9px; }
.inf-list-eco li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start;
  font-weight: 600; color: #2C2832; }
.inf-list-eco li::before {
  content: ""; width: 15px; height: 15px; margin-top: 4px;
  background: #56C000; mask: var(--inf-check) center / contain no-repeat;
  -webkit-mask: var(--inf-check) center / contain no-repeat;
}
:root { --inf-check: 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='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"); }

/* 4c. filetto verde sopra i blocchi di sostenibilità / ricerca */
.inf-rule-eco { border-top: 2px solid #56C000; padding-top: 16px; }

/* 4d. sezione a fondo verde chiarissimo (governance, Società 5.0) */
.inf-band-eco {
  background: #F4FBEC; border: 1px solid rgba(86,192,0,.28); border-radius: 16px;
  padding: 30px 36px;
}
.inf-band-eco h2, .inf-band-eco .elementor-heading-title { color: #33710F !important; }

/* 4e. card di un progetto di ricerca: bordo superiore verde */
.inf-card-eco { border-top: 3px solid #56C000 !important; }
/* card di un contenuto business: bordo superiore viola */
.inf-card-biz { border-top: 3px solid var(--inf-btn) !important; }

/* 4f. badge Società Benefit nel footer */
.inf-benefit-badge { color: #A7E97A !important; border-color: rgba(118,217,43,.32) !important;
  background: rgba(86,192,0,.12) !important; }

/* --- 5. Footer -----------------------------------------------------------
   PROBLEMA: cinque card bianche alte ~190px per contenere un logo da 26px;
   interlinea dei link a ~30px; loghi partner in riquadri di altezze e colori
   diversi; due sole colonne di link su otto sezioni di sito. Il footer occupa
   circa 620px di altezza per una quantità di informazione da 380px.
   SOLUZIONE: strip di certificazioni al posto delle card, ritmo verticale
   compattato, altezze dei loghi normalizzate, quattro colonne di link.
   ========================================================================== */

/* 5a. il campo. Il quasi-nero è la scelta consigliata: le cinque card bianche
   su viola sono il vero motivo per cui il footer "urla". Se il viola deve
   restare, usare la variante .inf-footer--purple più sotto. */
footer.elementor-location-footer, .site-footer {
  background: #121016 !important;
  color: rgba(255,255,255,.72);
  padding-top: 0 !important;
}
footer.elementor-location-footer .elementor-background-overlay { display: none !important; }

/* 5b. STRIP CERTIFICAZIONI — al posto delle cinque card.
   Sta su una fascia chiara sopra il campo scuro, alta ~90px invece di ~240px.
   Aggiungere la classe .inf-certs alla sezione che contiene i cinque widget. */
.inf-certs {
  display: flex !important; flex-wrap: wrap; align-items: stretch;
  justify-content: center; gap: 10px;
  background: #F7F5F8; padding: 18px 24px !important; margin: 0 !important;
}
.inf-certs > *,
.inf-certs .elementor-column,
.inf-certs .elementor-widget-wrap {
  flex: 0 1 auto !important; width: auto !important; max-width: 260px;
  padding: 0 !important; margin: 0 !important;
}
.inf-certs .elementor-widget {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid #DFD9E3; border-radius: 10px;
  padding: 9px 13px !important; margin: 0 !important;
  min-height: 54px; box-shadow: 0 1px 2px rgba(27,24,31,.04);
}


.inf-certs img {
  max-height: 26px !important; width: auto !important; flex-shrink: 0;
  object-fit: contain;
}
.inf-certs p, .inf-certs .elementor-widget-text-editor, .inf-certs a {
  margin: 0 !important; text-align: left !important;
  font-size: 11.5px !important; line-height: 1.35 !important;
  font-weight: 500 !important; color: #57505F !important; max-width: 22ch;
}
.inf-certs strong { font-weight: 700 !important; color: #1B181F !important; }
.inf-certs .elementor-widget:hover { border-color: rgba(150,68,148,.35); }

/* 5c. RITMO VERTICALE — è il secondo problema, dopo le card.
   Oggi: interlinea dei link ~30px su testo da 13.5px (rapporto 2.2).
   Qui: 1.5, con lo spazio gestito dal gap del contenitore. */
footer .elementor-widget-container > ul,
footer .elementor-nav-menu,
.inf-footer-col ul {
  display: flex !important; flex-direction: column; gap: 9px;
  list-style: none; margin: 0 !important; padding: 0 !important;
}
footer li, .inf-footer-col li { margin: 0 !important; }
footer a, footer li a {
  font-size: 13.5px !important; line-height: 1.5 !important;
  color: rgba(255,255,255,.66) !important; text-decoration: none;
}
footer a:hover { color: #fff !important; }
footer h5, footer h4, footer .elementor-heading-title {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff !important; margin: 0 0 12px !important; line-height: 1.3 !important;
}
footer p { font-size: 13.5px !important; line-height: 1.6 !important; margin: 0 !important; }
/* via i margini generosi dei widget: lo spazio lo fa la griglia */
footer .elementor-widget { margin-bottom: 0 !important; }
footer .elementor-section { padding-top: 0 !important; padding-bottom: 0 !important; }

/* 5d. GRIGLIA — logo a sinistra, quattro colonne di link, badge a destra.
   Aggiungere .inf-footer-grid alla sezione principale del footer. */
.inf-footer-grid {
  display: grid !important;
  grid-template-columns: 260px repeat(4, minmax(0,1fr)) 190px;
  gap: 40px 32px;
  max-width: 1240px; margin: 0 auto !important;
  padding: 44px 24px 32px !important;
}
@media (max-width: 1100px) {
  .inf-footer-grid { grid-template-columns: 240px repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .inf-footer-grid { grid-template-columns: minmax(0,1fr); gap: 28px; padding: 32px 20px 24px !important; }
}

/* 5e. LOGHI — altezze normalizzate. Oggi il lockup Infordata sta in un riquadro
   bianco, il bollino SB è più alto, e i due badge partner hanno riquadri di
   colori e altezze diverse: sembrano tre sistemi grafici sovrapposti. */
.inf-footer-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.inf-footer-brand img { width: auto !important; }
footer img[src*="logotipo"], footer img[src*="logo_infordata"], .inf-footer-brand img:first-child {
  max-height: 32px !important;          /* era ~40px dentro a un box bianco */
  background: none !important; padding: 0 !important;
}
footer img[src*="Benefit"], footer img[src*="benefit"] {
  max-height: 42px !important;          /* il bollino può stare un filo più alto del wordmark */
  opacity: .92;
}
/* badge partner: una sola riga, stessa altezza, stesso contenitore */
.inf-footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inf-footer-badges > *, .inf-footer-badges .elementor-widget { margin: 0 !important; }
.inf-footer-badges img {
  max-height: 38px !important; width: auto !important;
  background: #fff; border-radius: 8px; padding: 5px 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* i loghi mono su fondo scuro vanno in bianco, non in un riquadro bianco */
.inf-logo-knockout { filter: brightness(0) invert(1); opacity: .9; }

/* 5f. RIGA LEGALE — filetto sottile, una riga, social a destra */
.inf-footer-legal {
  max-width: 1240px; margin: 0 auto !important;
  padding: 16px 24px 34px !important;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 12.5px !important; line-height: 1.5 !important;
  color: rgba(255,255,255,.5) !important;
}
.inf-footer-legal a { color: rgba(255,255,255,.6) !important; font-size: 12.5px !important; }
.inf-footer-legal .inf-social { margin-left: auto; display: flex; gap: 8px; }
.inf-footer-legal .inf-social a {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.16);
  display: grid; place-items: center;
}
.inf-footer-legal .inf-social a:hover { background: rgba(255,255,255,.10); }

/* 5g. VARIANTE VIOLA — solo se il campo scuro non viene approvato.
   Il viola resta, ma le card bianche spariscono comunque: i chip diventano
   traslucidi, così il contrasto non spacca la pagina in due. */
footer.inf-footer--purple {
  background: linear-gradient(160deg, #8E3C8C 0%, #7E3480 100%) !important;
}
footer.inf-footer--purple .inf-certs {
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px);
}
footer.inf-footer--purple .inf-certs .elementor-widget {
  background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.5);
}

/* ===== PATCH-01 22/08/2026 — fine ====================================== */

/* --- 11. Footer certification strip -------------------------------------
   Moved here from theme_mods custom_css, where the session doing the markup
   had parked it because the client asked for the footer fix directly. Footer
   layout does not belong in theme_mods.

   Keyed to element ids, NOT to .inf-certs as patch-01 assumes, because on
   this install a container's _css_classes never reaches the DOM: the class
   is in _elementor_data for both footers (1727 node 098517b, 2539 node
   c4aaa3f) and renders zero times, while elementor-element-098517b renders
   eight. Verified, not assumed. The same is true of inf-problem-cards-section
   on the home, which only works because that class is hand-written inside an
   HTML widget. So every patch-01 rule scoped to a CONTAINER class is
   unreachable until someone adds a filter that emits them.

   Two corrections to the patch's own selectors, both needed here: the white
   card is `> .e-con`, because each certification is a container holding an
   image and a caption widget — `.inf-certs .elementor-widget` paints two
   boxes per card instead of one round the pair. And the inner widgets need
   align-self:center, because Elementor sets --container-widget-align-self:
   stretch and every card otherwise grows to the tallest in the row, which is
   the 227px boxes the client screenshotted.
   ------------------------------------------------------------------------ */

.elementor-element-098517b,
.elementor-element-c4aaa3f {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0 !important;
}
.elementor-element-098517b > .e-con,
.elementor-element-c4aaa3f > .e-con {
  flex: 1 1 0 !important;
  min-width: 0;
  max-width: none;
  min-height: 54px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid #DFD9E3;
  border-radius: 10px;
  padding: 9px 13px !important;
  margin: 0 !important;
  box-shadow: 0 1px 2px rgba(27,24,31,.06);
}
.elementor-element-098517b > .e-con:hover,
.elementor-element-c4aaa3f > .e-con:hover { border-color: rgba(150,68,148,.35); }
.elementor-element-098517b > .e-con > .elementor-widget,
.elementor-element-c4aaa3f > .e-con > .elementor-widget {
  width: auto !important;
  height: auto !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-element-098517b > .e-con img,
.elementor-element-c4aaa3f > .e-con img {
  max-height: 26px !important;
  width: auto !important;
  max-width: 74px;
  object-fit: contain;
  flex-shrink: 0;
}
.elementor-element-098517b > .e-con p,
.elementor-element-c4aaa3f > .e-con p {
  margin: 0 !important;
  text-align: left !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  color: #57505F !important;
}
@media (max-width: 767px) {
  .elementor-element-098517b > .e-con,
  .elementor-element-c4aaa3f > .e-con { max-width: 100%; }
}

/* The logo keeps its size; the caption is what shrinks. Without min-width:0 a
   flex item refuses to go below its content width, which is what let the longest
   caption push its chip wider than its share. */
.elementor-element-098517b > .e-con > .elementor-widget-image,
.elementor-element-c4aaa3f > .e-con > .elementor-widget-image { flex: 0 0 auto; }
.elementor-element-098517b > .e-con > .elementor-widget-text-editor,
.elementor-element-c4aaa3f > .e-con > .elementor-widget-text-editor { flex: 1 1 0; min-width: 0; }

/* Mobile: two per row rather than five stacked full-width, a bigger logo and
   less white around it — the client's words were "loghi troppo piccoli, troppo
   bordo bianco". */
@media (max-width: 767px) {
  /* !important on flex, because the desktop rule above carries it and would
     otherwise win inside this media query — five 69px chips, measured. */
  .elementor-element-098517b,
  .elementor-element-c4aaa3f { flex-wrap: wrap !important; gap: 8px; }
  .elementor-element-098517b > .e-con,
  .elementor-element-c4aaa3f > .e-con {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0;
    min-height: 0;
    padding: 8px 10px !important;
  }
  .elementor-element-098517b > .e-con img,
  .elementor-element-c4aaa3f > .e-con img { max-height: 34px !important; max-width: 92px; }
  .elementor-element-098517b > .e-con p,
  .elementor-element-c4aaa3f > .e-con p { font-size: 11px !important; }
}

/* --- 12. Home hero headline clearance — lives on page 1737, not here --------
   Nothing to add in this file. Recorded because the reasoning cost three
   sessions an evening and the number looks arbitrary without it.

   The header is position:absolute and its height is not fixed: 151px at 360-767
   and at 1023, 167px at 1024, 179px at 768-834, where the nav wraps to a second
   row. The hero centres its content in a per-breakpoint min-height — 560px
   outside 768-1024, 440px inside it — so in that band the headline was clearing
   a taller header by 7px.

   Elementor applies a boxed container's vertical padding to `> .e-con-inner`,
   never to the container itself; reading padding-top on `.elementor-element-
   1f99d3c` returns 0px by design and says nothing about whether the builder
   value applies. Measuring the container instead of the inner element is what
   made this look unfixable from the builder for a while. It never was.

   Swept at 768 with padding on the inner element: 56 -> 15px clearance, 72 -> 23,
   88 -> 31, 104 -> 39, 112 -> 43, 128 -> 51, 144 -> 59, 176 -> 75. The page now
   carries padding_tablet 112 and padding_mobile 150.

   What bounds it is NOT hero height: the hero never grows and the CTA stays
   pinned 50px above its bottom at every value, so the padding eats the gap
   between the subtitle and the button. Comfortable at 112, tightening past ~144. */

/* --- 13. Right-hand menu panels must not run off the edge -------------------
   The dropdown panels are 320px and left-aligned to their item, so the ones near
   the right of the bar end outside the window: at 1440 the Contatti panel ended
   70px past it and the nested Supporto panel 81px. Closed at rest, so nothing
   looks wrong until the menu is opened — and then the panel is cut by the global
   overflow clip, with no scrollbar to recover it.

   SPECIFICITY IS THE WHOLE PROBLEM HERE. The theme has
     .ce-nav-menu .menu-item-has-children.ce-has-no-megamenu .sub-menu
       { position:absolute; left:0 }
   at 0-4-0. A first attempt at this rule used
     ul.ce-nav-menu > li:nth-last-child(-n+2) > ul.sub-menu
   which is 0-3-3 — class count decides before element count, so it lost, and the
   panel computed left:0 AND right:0 together, which for a fixed-width absolute
   box means left wins and nothing moves. It measured as working only because it
   was tested with !important injected and shipped without. Anything here has to
   carry at least five classes to beat the theme.

   Three tiers, all measured at 1440 / 1300 / 1200 / 1100 / 1025:
     - flip the last two panels above 1300;
     - flip every panel below 1300, because by then the nav is wide enough
       relative to the viewport that middle items overflow too;
     - the third level computes position:static and flows past the edge on its
       own, so it is floated to the left of its parent panel instead.

   The third-level rule is a stopgap. The handoff wants that level flattened into
   the panel's columns rather than existing as a flyout at all; when that lands,
   this rule goes with it. */
@media (min-width: 1025px) {
  .ce-nav-menu > li.menu-item-has-children.ce-has-no-megamenu:nth-last-child(-n+2) > .sub-menu {
    left: auto;
    right: 0;
  }
  /* Only the third level INSIDE a right-aligned panel flips. Flipping every
     third-level panel pushes the ones under early items (Soluzioni, Ricerca e
     innovazione) off the LEFT edge instead — measured at -56px at 1300 and -86px
     at 1200, which is the same defect mirrored. */
  .ce-nav-menu > li.menu-item-has-children.ce-has-no-megamenu:nth-last-child(-n+2) .sub-menu .sub-menu {
    position: absolute;
    top: 0;
    left: auto;
    right: 100%;
  }
}
/* Third level, outside the masthead. Section 4 already flattens it inside
   #masthead .mainmenu-infordata — position:static, indented, no flyout — which
   is what the handoff asks for. The news nav never got that treatment, so its
   third level stayed a flyout and the theme opened it to the LEFT of its parent:
   the panels under Sostenibilita sat 56px off the left edge at 1300, 86px at
   1200 and 109px at 1100, entirely off-screen and clipped by the global overflow
   rule, with no scrollbar to reach them.

   Flattening rather than repositioning, for two reasons: it is the behaviour the
   handoff specifies, and a flyout that opens sideways from a panel near either
   edge has no safe direction at narrow widths — every position rule trades one
   edge for the other, which is what the first two attempts here did. */
.ce-nav-menu:not(.mainmenu-infordata .ce-nav-menu) ul.sub-menu ul.sub-menu,
nav:not(#masthead nav) .ce-nav-menu ul.sub-menu ul.sub-menu {
  position: static !important;
  left: auto !important;
  right: auto !important;
  box-shadow: none;
  border: 0;
  border-left: 2px solid var(--inf-brand-100);
  border-radius: 0;
  margin: 2px 0 6px !important;
  padding: 0 0 0 12px !important;
  min-width: 0;
}

@media (min-width: 1025px) and (max-width: 1300px) {
  /* Below 1300 the nav is wide enough relative to the viewport that middle
     panels overflow too, so every panel right-aligns to its item. */
  .ce-nav-menu > li.menu-item-has-children.ce-has-no-megamenu:nth-last-child(-n+4) > .sub-menu {
    left: auto;
    right: 0;
  }
}

/* --- 11. Feedaty review carousel: keep it inside the page ------------------
   The merchant widget declares width:1080px under content-box, so its border
   box measures 1096 and its right edge lands past the viewport on any window
   narrower than about 1150. It was the last thing giving the site a horizontal
   scrollbar after the menu panels were fixed: 1106 against a 1100 viewport,
   1031 against 1025, 906 against 900, 774 against 768.

   Third-party markup built by the Feedaty script after load, so the class
   carries an instance id (fdt_carouselcarosello-2_widget_merchant) and has to
   be matched on a substring.

   The !important is not decoration and does not come off. box-sizing here is
   set by Feedaty's own stylesheet, served from their CDN, so it is cross-origin
   and its rules cannot be read or outranked by specificity from this sheet —
   three separate border-box declarations that DO match the element (`*`,
   `.elementor *`, and the plain-weight version of this rule) all lost to it.
   Verified with border-box forced: widget contained at 1600/1440/1200/1100/
   1025/900/768/390, keeping its height and all 24 review images.

   Unrelated but worth knowing if you touch this widget: the site's custom CSS
   carries `#fdt_carouselcarosello-2_widget_merchant { max-width:1125px
   !important }` in an inline <style> on the home page. It matches nothing — the
   element's real id is fdt_selettore1_widget_merchant, taken from data-id, not
   from the variant name. That rule is dead and has been for as long as the
   widget has derived its id that way. */
.feedaty_widget [class*="fdt_carousel"],
.feedaty_widget [class*="fdt_widget_wrapper"] {
  box-sizing: border-box !important;
  max-width: 100% !important;
}