/*
Theme Name: SB Energetica
Description: Block theme - replica pixel-perfect del sito Joomla "flex" (rebuild 1:1). Token reali misurati.
Version: 0.70.1
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: sbenergetica
*/
:root{ --sben-blue:#0060aa; --sben-green:#34a93a; --sben-green-d:#27782d; --sben-text:#212529; --sben-light:#f5f5f5;
  --sben-card-border:#ddd;   /* standardized light-grey card border (home feature tiles + project tiles) */
  --sben-accent:#49c74f;     /* green accent bar under titles (original h3.sppb-addon-title::after) */
  --sben-map-ratio:16/9;     /* offices map: only used once the layout stacks (<=860px), where there is
                                no tiles column left to take the height from */ }
/* The `hidden` attribute must win over our own layout rules. The UA rule is only `[hidden]{display:none}`,
   so ANY author `display:` (grid/flex/…) beats it and the element stays visible - which is how the
   consent "Personalizza" panel shipped stuck open, and why the gated Maps iframe rendered as an empty
   420px box. One rule here instead of one per component.
   Excluded: Forminator's wizard steps. They also carry `hidden`, but Forminator drives them with inline
   height/opacity/visibility and its validator keys off jQuery ':hidden' - display:none would change the
   state machine of code we don't own. It removes the attribute itself when a step opens. */
[hidden]:not(.forminator-pagination){ display:none!important; }
body{ font-family:"ABeeZee",sans-serif; color:var(--sben-text); font-size:1rem; line-height:1.5625; }
h1,h2,h3,h4,h5,h6{ font-family:"ABeeZee",sans-serif; font-weight:400; color:var(--sben-blue); line-height:1.2; }

/* top bar */
.sben-topbar{ background:var(--sben-green); color:#fff; font-size:0.8125rem; }
.sben-topbar a{ color:#fff; text-decoration:none; }
.sben-topbar .wp-block-group{ align-items:center; }

/* header + nav */
.sben-header .wp-block-site-logo img{ max-height:56px; width:auto; }
.sben-nav{ font-family:"Roboto Condensed",Arial,sans-serif; }
.sben-nav a{ color:var(--sben-text); text-decoration:none; text-transform:uppercase; font-size:1rem; padding:0 14px; letter-spacing:.3px; }
.sben-nav a:hover{ color:var(--sben-green); }

/* buttons (CTA) */
.wp-block-button__link{ background:#2b8030!important; color:#fff!important; border-radius:4px; text-transform:uppercase; font-weight:400; padding:10px 22px; }
.wp-block-button.is-blue .wp-block-button__link{ background:var(--sben-blue)!important; }

/* hero */
.sben-hero{ min-height:520px; color:#fff; }
.sben-hero h2{ color:#fff; font-size:2.625rem; }
.sben-hero .sben-kicker{ color:#fff; font-size:1.25rem; letter-spacing:1px; }

/* sections */
.sben-section{ padding:3rem 0; margin-block:0; }  /* 48px top+bottom -> ~96px rhythm between sections; margin-block:0 kills WP block-gap accumulation (leaves alignfull margin-inline intact) */
.sben-section.alt{ background:var(--sben-light); }
.sben-section h2, .sben-section .sben-h2{ font-size:2.625rem; text-align:center; margin-bottom:8px; }
.sben-feature h3{ color:var(--sben-blue); font-size:1.5625rem; }
.sben-feature{ text-align:center; }

/* project cards */
.sben-card{ background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.08); }
.sben-card h3{ color:var(--sben-blue); font-size:1.25rem; }

/* footer (blue like header; 3 cols: installations+map / contacts / products) */
.sben-footer{ background:#0060a9; color:#e8eef4; padding:60px 0 0; }
.sben-footer h3{ color:#fff; font-size:1.5rem; font-weight:600; margin:0 0 18px; }
.sben-footer a{ color:#fff; text-decoration:none; }
.sben-footer a:hover{ text-decoration:underline; }
.sben-footer-cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; }
.sben-footer p{ margin:0 0 14px; line-height:1.6; }
.sben-foot-map{ max-width:100%; height:auto; display:block; }
.sben-foot-prod{ list-style:none; margin:0; padding:0; }
.sben-foot-prod li{ margin:0 0 9px; }
.sben-social a{ margin-right:14px; }
.sben-footer .sben-copy{ text-align:center; border-top:1px solid rgba(255,255,255,.18); margin-top:40px; padding:18px 0; font-size:0.8125rem; }
@media (max-width:860px){ .sben-footer-cols{ grid-template-columns:1fr; gap:30px; } }

/* F1b iteration */
.sben-hero h2{ font-size:2.875rem; margin:6px 0 22px; }
.sben-ico{ display:inline-block; margin-bottom:14px; }
.sben-feature h3{ margin:6px 0 10px; }
.sben-feature p{ color:#555; }
.sben-round img{ border-radius:8px; }
.sben-card{ border-radius:6px; overflow:hidden; }
.sben-card img{ width:100%; height:200px; object-fit:cover; display:block; }
.sben-card h3{ margin:0 0 12px; padding-bottom:12px; font-size:1.25rem; position:relative; border-bottom:1px solid #e3e7eb; }
.sben-card h3::after{ content:""; position:absolute; left:0; bottom:-1px; width:52px; height:3px; background:var(--sben-green); }
.sben-card p{ color:#666; margin:0; font-size:0.9375rem; }
.sben-section.alt h2{ text-align:left; }

/* interior pages: BLUE header + white logo + white nav (original #sp-header bg #0060a9).
   Home overrides to transparent-over-hero. */
.sben-header{ background:#0060a9; }
/* zero the flow block-gap WP inserts between the topbar and the main header row
   (.sben-header is is-layout-flow; its 2nd child would get margin-block-start:24px) */
.sben-header > .sben-headmain{ margin-top:0; margin-block-start:0; }
.sben-header .wp-block-site-logo{ display:none; }   /* colored logo never used */
.sben-logo-link{ display:inline-block; line-height:0; }   /* logo -> current-language home ([sben_logo]) */
.sben-logo-white{ display:block; width:260px; height:65px; }   /* logo 260x65 (all breakpoints, like the original) */
.sben-nav a{ color:#fff; }
.sben-nav a:hover{ color:#cfe3f5; }
.sben-burger span{ background:#fff; }
.home .sben-header{ position:absolute; left:0; right:0; z-index:20; background:transparent; }
.home .sben-header .sben-topbar{ background:rgba(0,0,0,.42); }
.home .sben-hero{ margin-top:0; }
/* display:block because this is a <b> - the original's own tag. It was an <h1>, which is how the
   home page ended up with a rotating adjective as its only top-level heading. */
.sben-hero-word{ display:block; font-size:4.375rem; line-height:1.05; margin:3rem 0 4px; font-weight:600; color:#fff; }
.sben-hero-word.sben-rotate span{ display:inline-block; transition:opacity .3s ease; }
.sben-hero h2{ font-size:2.125rem; font-weight:400; margin:0 0 22px; }
/* background video fills the cover like the original section-bg-video */
/* The home's h1, put at the top of the hero by scripts/import-h1.php. Sized like the hero's h2 and
   not like the rotating word: the word is the visual headline the original site had, and this is the
   page title the client's sheet asks for, reading as a lead line above it. */
.sben-hero h1.sben-hero-h1{ color:#fff; font-size:2.125rem; font-weight:400; margin:2.5rem 0 0; }
.sben-hero-h1 + .sben-hero-word{ margin-top:.25rem; }
.sben-hero .wp-block-cover__video-background{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }

/* "Perche siamo tra i piu scelti?" - title 1/3 + intro 2/3, then 3 feature cols */
.sben-why-title{ font-size:2.25rem; line-height:1.15; color:var(--sben-blue); margin:0; font-weight:400; }
.sben-why-title strong{ font-weight:700; }
.sben-accent-word{ color:var(--sben-green); }
.sben-why > .wp-block-columns:first-child p{ color:#555; }

/* colored full-bleed sections (from SPPB section background) */
.sben-section.has-bg{ padding:56px 0; }
.sben-section.is-dark, .sben-section.is-dark :is(h1,h2,h3,h4,h5,h6,p,li,strong,em){ color:#fff; }
.sben-section.is-dark .sben-section h2{ color:#fff; }
/* section title/subtitle keep white on dark bg (their own color rules would otherwise win on
   specificity+order -> blue-on-blue, e.g. "Perché installare una termopompa?") */
.sben-section.is-dark :is(h1,h2).sben-sec-title, .sben-section.is-dark h3.sben-sec-sub{ color:#fff; }

/* ===== PAGE HERO component ([sben_page_hero] shortcode) - single upstream source =====
   family image + azure overlay + white wave (straddling), then title+subtitle centered. */
.sben-phero{ position:relative; z-index:1; width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  min-height:300px; background-size:cover; background-position:center 26%; background-repeat:no-repeat; }
/* termopompe hero (it/de/fr): raise the family photo ~3.5rem so the child's face clears the wave
   (parents' headroom is cropped instead). Scoped by page-id; move to a hero `pos` param if it recurs. */
body.page-id-52 .sben-phero, body.page-id-66 .sben-phero, body.page-id-67 .sben-phero{
  background-position:center calc(26% - 3.5rem); }
/* blue overlay on EVERY image hero (matches the original SPPB section overlay exactly:
   rgba(34,184,240,.65)). Single source -> all [sben_page_hero] pages (products, azienda, …). */
.sben-phero-tint{ position:absolute; inset:0; z-index:1; background:rgba(34,184,240,.65); }
.sben-phero .sben-hero-wave{ position:absolute; left:0; right:0; bottom:0; z-index:2; width:100%; line-height:0; pointer-events:none; }
.sben-phero .sben-hero-wave svg{ display:block; width:100%; height:80px; transform:scaleY(-1); }
.sben-phead{ text-align:center; padding:40px 0 22px; }
.sben-phead-in{ max-width:1140px; margin:0 auto; padding:0 16px; }
.sben-phead h1{ font-size:2.5rem; font-weight:600; color:var(--sben-blue); margin:0 0 12px; }
.sben-phead h2{ font-size:1.375rem; font-weight:400; color:var(--sben-text); max-width:880px; margin:0 auto; line-height:1.45; }

/* (legacy .sben-prod-hero cover kept for any inline hero; new pages use .sben-phero) */
.sben-prod-hero{ min-height:300px; padding:0; position:relative; z-index:1; }  /* no overflow:hidden -> wave straddles the seam */
.sben-prod-hero .wp-block-cover__inner-container{ min-height:0; }
/* image behind, tint overlay above it (blue wash = first layer of the wave effect), wave on top */
.sben-prod-hero .wp-block-cover__image-background{ z-index:0; object-position:center 26%; }
/* tint + wave must span the FULL banner width (cover constrained-layout otherwise caps them at 1140) */
.sben-prod-hero .sben-hero-tint,
.sben-prod-hero .sben-hero-wave{ left:0 !important; right:0 !important; width:100% !important; max-width:none !important; margin:0 !important; }
.sben-prod-hero .sben-hero-tint{ z-index:1; opacity:1 !important; background-color:rgba(0,96,170,.30) !important; }
.sben-hero-wave{ position:absolute; bottom:-34px; z-index:2; line-height:0; pointer-events:none; }  /* straddle: half over image, half over section */
.sben-hero-wave svg{ display:block; width:100%; height:68px; }
/* no gap between blue header and hero (blue overlay continues the header) */
main.wp-block-group{ margin-top:0; }
/* title + subtitle below the banner (compound selectors beat generic .sben-section h1/h2) */
.sben-section.sben-pagehead{ text-align:center; padding:40px 0 22px; }
.sben-section.sben-pagehead h1{ font-size:2.5rem; font-weight:600; color:var(--sben-blue); margin:0 0 12px; }
.sben-section.sben-pagehead h2{ font-size:1.375rem; font-weight:400; color:var(--sben-text); max-width:880px; margin:0 auto; line-height:1.45; }

/* content links: brand green, no underline (faithful to original) */
.wp-block-post-content a:not(.wp-block-button__link){ color:var(--sben-green); text-decoration:none; }
.wp-block-post-content a:not(.wp-block-button__link):hover{ text-decoration:underline; }
.sben-section.is-dark a:not(.wp-block-button__link){ color:var(--sben-green); text-decoration:none; font-weight:600; }

/* green divider (SPPB divider major_color) */
/* wider than its 33% column: centre on the section via left:50% + translate (margin:auto can't
   grow past the column). left:50% = column centre = section centre (middle of a 33/33/33 row). */
/* width !important: beats WP core .wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}
   (specificity 0,3,0 > our 0,2,0) — that override is why the width never changed before. */
.sben-divider.is-green{ border:0; border-top:1px solid var(--sben-green); width:25rem !important; max-width:92vw;
  margin:1rem 0; opacity:1; position:relative; left:50%; transform:translateX(-50%); }
/* divider section: no vertical padding/margin; neighbours keep theirs (phead bottom, next keeps padding not top-margin) */
.sben-section:has(.sben-divider){ padding-top:0 !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; }
.sben-section:has(.sben-divider) + .sben-section{ margin-top:0 !important; }

/* FAQ accordion (native details): green summary + rounded border (faithful to original) */
.sben-faq{ border:1px solid #ccd2d8; border-radius:6px; margin-bottom:12px; overflow:hidden; }
.sben-faq summary{ list-style:none; cursor:pointer; background:var(--sben-green); color:#fff; padding:14px 20px; font-weight:400; position:relative; }
.sben-faq summary::-webkit-details-marker{ display:none; }
.sben-faq summary::after{ content:'+'; position:absolute; right:20px; font-size:1.25rem; line-height:1; }
.sben-faq[open] summary::after{ content:'\2013'; }
.sben-faq p{ background:#fff; color:var(--sben-text); margin:0; padding:16px 20px; }

/* 2-column sections (image | text+CTA): gutter so columns aren't glued */
.sben-section .wp-block-columns{ gap:2.5rem; }

/* icon-box: icon left, title+text right (media layout) + tile border/bg. 128px icon column. */
.sben-iconbox{ display:grid; grid-template-columns:128px 1fr; column-gap:18px; align-items:start; text-align:left;
  padding:20px; border:1px solid rgba(0,0,0,.12); border-radius:6px; background:rgba(255,255,255,.02); margin-bottom:16px; }
.sben-section.is-dark .sben-iconbox{ border-color:rgba(255,255,255,.28); }
.sben-iconbox .sben-ico{ grid-row:1 / 3; margin:0; }
/* No icon -> no icon column. The contatti boxes (Orario Uffici, Telefono, WhatsApp, …) use Font
   Awesome glyphs in the original, which this theme does not ship, so they arrive without .sben-ico:
   the reserved 128px column was pushing every line into the right half. 18 boxes, on the 3 contatti
   pages only - measured across all staged pages. */
.sben-iconbox:not(:has(.sben-ico)){ display:block; }
.sben-iconbox h4{ grid-column:2; margin:0 0 4px; }
.sben-iconbox p{ grid-column:2; margin:0; }
/* a section whose DIRECT children are icon-boxes -> lay them in a horizontal row
   (home 'Perche' has 3 features stacked in one column; products have them inside wp:columns, unaffected) */
.sben-section:has(> .sben-iconbox){ display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start; }
.sben-section:has(> .sben-iconbox) > .sben-iconbox{ flex:1 1 0; min-width:230px; margin:0 !important; }
/* home 'Perche' features (is-center = icon on top, centered). Two flavours:
   - borderless (default): e.g. azienda 'lavora-con-noi'
   - card (.is-card): the engine adds it when the original SPPB column had a solid border
     (home 'Consulenza/Disbrigo/Impianti'). One source -> auto for any bordered-column feature. */
.sben-iconbox.is-center{ display:block; text-align:center; border:0; background:none; padding:14px 18px; }
/* lay the three tiles as an equal-height row so the cards line up */
.sben-section:has(> .sben-iconbox.is-center){ align-items:stretch; }
.sben-iconbox.is-center .sben-ico{ margin:0 auto 14px; }
/* 128x128 icons, fixed box -> the three tiles' titles + text share one baseline
   (!important beats the inline style="width:64px" the engine/static markup carries) */
/* all icon-box icons are 128x128 (default): so far every SB icon has been 128 (home features,
   lavora-con-noi, product feature-boxes…). !important beats the inline style="width:64px". */
.sben-ico img{ width:128px !important; height:128px !important; object-fit:contain; }
/* title on ONE line (German titles wrap otherwise and break the 3-tile vertical alignment) */
.sben-iconbox.is-center h4{ color:var(--sben-blue); font-size:1.25rem; white-space:nowrap; margin:0 16px 8px; }

/* ── SB signature divider (reusable component) ────────────────────────────────────────────────
   two-tone underline = the title's own border-bottom (grey #ddd, 1px, FULL width of the title's
   container) + a thicker green ::after (70%, left-anchored) dropped onto it via translateY(2px).
   Used under every SB tile/section title. Feature tiles use a wider 85% bar (operator's choice). */
.sben-iconbox.is-center h4,
.sb-tile--home-project h3,
.sben-imgcontent .wp-block-column h3,
.sben-footer .sben-fcol h3{ border-bottom:1px solid var(--sben-card-border); }
.sben-iconbox.is-center h4::after,
.sb-tile--home-project h3::after,
.sben-imgcontent .wp-block-column h3::after,
.sben-footer .sben-fcol h3::after{ content:""; display:block; height:2px; width:70%; margin:8px 0 0;
  border-radius:2px; background:var(--sben-accent); transform:translateY(2px); }
.sben-iconbox.is-center h4::after{ width:85%; }
.sben-iconbox.is-center p{ color:#555; margin:0; }
/* card border (home tiles): exact original per-column style (padding 20px, 1px solid #ddd) + 5px radius */
.sben-iconbox.is-card{ padding:20px; border:1px solid var(--sben-card-border); border-radius:5px; }

/* home 'Alcuni progetti realizzati' — each project (photo above + title + power below) is its
   own card tile. The engine groups image+caption into .sb-tile--home-project (is_gallery_column),
   since the original crams two projects per SPPB column with no per-project element to border. */
.sb-tile--home-project{ padding:20px; border:1px solid var(--sben-card-border); border-radius:5px; }
.sb-tile--home-project + .sb-tile--home-project{ margin-top:30px; }   /* gap between the 2 stacked tiles */
.sb-tile--home-project .sben-img{ margin:0 0 16px; }
.sb-tile--home-project .sben-img img{ width:100%; height:auto; display:block; border-radius:3px; }
.sb-tile--home-project h3{ margin:0; font-size:1.5rem; }   /* underline via the shared divider component */
.sb-tile--home-project p{ margin:0; color:#555; }

/* project photo galleries (Joomla iGallery slideshows -> the shared .sben-carousel component).
   Photos, unlike partner logos: taller, full colour, rounded. */
.sben-carousel.is-photos{ margin:18px auto 6px; }
.sben-carousel.is-photos .sben-carousel-track{ gap:14px; }
.sben-carousel.is-photos .sben-carousel-track img{ height:260px; border-radius:4px;
  filter:none; opacity:1; object-fit:cover; }
@media (max-width:860px){ .sben-carousel.is-photos .sben-carousel-track img{ height:180px; } }

/* F3 component placeholders (mu-plugins/sben-f3.php): Elfsight apps (map/reviews/instagram) and
   the forms. Structurally 1:1 now, real services wired in the F3 phase. One look for all of them. */
.sben-f3{ border:1px dashed var(--sben-card-border); border-radius:5px; background:#fafbfc;
  padding:28px 20px; text-align:center; }
.sben-f3-title{ font-family:"ABeeZee",sans-serif; font-size:1.125rem; color:var(--sben-blue); }
.sben-f3-note{ font-size:0.8125rem; color:#8a9199; margin-top:4px; }
.sben-section.is-dark .sben-f3{ border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06); }
.sben-section.is-dark .sben-f3-title{ color:#fff; }
.sben-section.is-dark .sben-f3-note{ color:#d6e4f0; }

/* home 'Scegli la soluzione adatta a te' (em_image_content, 2 cols): the LEFT image bleeds to
   the left viewport edge (like the hero) and fills the whole left half (100% w x h, cover, no
   padding/margin); the RIGHT column (title + text) stays within the 1140px content max-width.
   Wide screens only — WP stacks the columns below 782px. */
@media (min-width:782px){
  /* full-bleed 2-column band; cap the section so a wide child can never grow the page */
  .sben-section:has(.sben-imgcontent){ padding-block:0; max-width:100vw; }
  /* the columns block fills the section (width:100%, NOT 100vw -> no scrollbar overflow); drop WP's
     1140 cap + auto-centering + the inter-column gap (that stray gap between image and text) */
  .wp-block-columns.sben-imgcontent{ display:flex; flex-direction:row; gap:0; align-items:stretch;
    width:100%; max-width:none; margin-left:0 !important; margin-right:0 !important; }
  /* THE fix: WP does NOT set box-sizing:border-box on .wp-block-column (only on the columns
     wrapper), so it is content-box and padding was ADDED on top of the 50% flex-basis, pushing the
     text column past its half. border-box makes flex-basis:50% include the padding -> stays exactly
     50% with the padding contained inside. (min-width:0 already comes from WP core.) */
  .sben-imgcontent > .wp-block-column{ flex:0 1 50%; box-sizing:border-box; min-width:0; margin:0; align-self:stretch; }
  /* left half: image scaled + centered to fill, cropped, and clipped so it can't widen the page */
  .sben-imgcontent > .wp-block-column:first-child{ padding:0; position:relative; overflow:hidden; }
  .sben-imgcontent > .wp-block-column:first-child .sben-img{ margin:0; position:absolute; inset:0; }
  .sben-imgcontent > .wp-block-column:first-child .sben-img img{ width:100%; height:100%;
    object-fit:cover; object-position:center; display:block; }
  /* right half: title + text; padding-right holds the text within the 1140px content max-width
     (now safe to add because min-width:0 keeps it inside the 50% column) */
  .sben-imgcontent > .wp-block-column:last-child{ display:flex; flex-direction:column;
    justify-content:center; padding:120px 0 120px 32px; padding-right:max(0px, calc(50vw - 570px)); }
}

/* image lightbox (reusable: click content image -> full-viewport) */
.sben-zoomable, .sben-zoomable img{ cursor:zoom-in; }
.sben-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:9999; cursor:zoom-out; }
.sben-lightbox.open{ display:flex; }
.sben-lightbox img{ max-width:94vw; max-height:94vh; box-shadow:0 4px 40px rgba(0,0,0,.5); }
.sben-lightbox-close{ position:fixed; top:18px; right:24px; color:#fff; font-size:2.4rem; line-height:1; cursor:pointer; background:none; border:0; }

/* partner carousel (1 row, auto-slide, arrows on hover, drag/scroll) */
/* Photo carousel: arrows (and drag/touch) only - never auto-advances. The logo strip used to share
   this component and its 5s autoslide; it is a marquee now, see below. */
.sben-carousel{ position:relative; max-width:1140px; margin:0 auto; }
.sben-carousel-track{ display:flex; gap:38px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding:6px 0; cursor:grab; }
.sben-carousel-track::-webkit-scrollbar{ display:none; }
.sben-carousel-track.dragging{ cursor:grabbing; scroll-behavior:auto; }
.sben-carousel-track img{ width:auto; flex:0 0 auto; user-select:none; -webkit-user-drag:none; }

/* ═══ "CI HANNO SCELTO" logo marquee ═══════════════════════════════════════════════════════════
   Continuous and slow, pure css. The track holds two identical sets, so translating by one set plus
   one gap (-50% is half of 2*set+gap, hence the -19px) lands exactly on the copy: seamless, and it
   never needs to snap back. Pauses on hover so a logo can actually be read, and stands still for
   anyone who asked for less motion. */
.sben-marquee{ overflow:hidden; max-width:1140px; margin:0 auto; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.sben-marquee-track{ display:flex; gap:38px; width:max-content; animation:sben-marquee 70s linear infinite; }
.sben-marquee-set{ display:flex; gap:38px; }
.sben-marquee:hover .sben-marquee-track{ animation-play-state:paused; }
.sben-marquee img{ height:100px; width:auto; flex:0 0 auto; filter:grayscale(1); opacity:.7; transition:.2s;
  user-select:none; -webkit-user-drag:none; }
.sben-marquee img:hover{ filter:none; opacity:1; }
@keyframes sben-marquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 19px)); } }
@media (prefers-reduced-motion:reduce){ .sben-marquee-track{ animation:none; } }
.sben-carousel-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:0;
  background:rgba(0,0,0,.45); color:#fff; font-size:1.4rem; cursor:pointer; opacity:0; transition:opacity .2s; z-index:2; }
.sben-carousel:hover .sben-carousel-arrow{ opacity:1; }
.sben-carousel-arrow.prev{ left:-8px; } .sben-carousel-arrow.next{ right:-8px; }
@media (hover:none){ .sben-carousel-arrow{ display:none; } }

/* CI HANNO SCELTO partner strip */
.sben-partners h3{ text-align:center; color:#5b6169; font-size:1.125rem; letter-spacing:2px; font-family:"Roboto Condensed",sans-serif; margin-bottom:28px; }
.sben-partner-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:38px; }
.sben-partner-row img{ height:100px; width:auto; filter:grayscale(1); opacity:.7; transition:.2s; }
.sben-partner-row img:hover{ filter:none; opacity:1; }
/* spacing polish */
.sben-section{ padding:3rem 0; margin-block:0; }  /* 48px top+bottom -> ~96px rhythm between sections; margin-block:0 kills WP block-gap accumulation (leaves alignfull margin-inline intact) */
.wp-block-column.sben-feature p{ font-size:0.9375rem; }

/* hero: let constrained inner center to content width (no flex override) */
.sben-hero .wp-block-cover__inner-container{ width:100%; }

.sben-section.sben-partners{ margin-top:0; padding:28px 0 84px 0; }

.sben-hero .wp-block-cover__inner-container{ margin-top:0 !important; }

/* responsive nav (hamburger) + dropdowns */
.sben-nav{ display:flex; flex-wrap:nowrap; align-items:center; }
.sben-nav-item{ position:relative; }
.sben-nav .sben-sub{ position:absolute; top:100%; left:0; min-width:230px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.16); border-radius:4px; padding:8px 0; display:none; z-index:50; }
.sben-nav-item.has-sub:hover .sben-sub{ display:block; }
.sben-nav .sben-sub a{ display:block; color:#212529 !important; text-transform:none; letter-spacing:0; font-family:"ABeeZee",sans-serif; padding:9px 20px; font-size:0.9375rem; }
.sben-nav .sben-sub a:hover{ background:#f2f6fa; color:var(--sben-green) !important; }
.sben-burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; flex-direction:column; gap:5px; margin-left:auto; }
.sben-burger span{ display:block; width:26px; height:3px; background:#333; border-radius:2px; transition:.2s; }
.home .sben-burger span{ background:#fff; }
@media (max-width:980px){
  .sben-burger{ display:flex; }
  .sben-nav{ position:fixed; top:0; right:-320px; width:290px; max-width:85vw; height:100vh; background:#fff;
    flex-direction:column; align-items:flex-start; padding:76px 24px 24px; gap:0; box-shadow:-6px 0 24px rgba(0,0,0,.18);
    transition:right .25s ease; z-index:60; overflow-y:auto; }
  .sben-nav.open{ right:0; }
  .sben-nav-item{ width:100%; }
  .sben-nav a{ color:#212529 !important; padding:12px 0; width:100%; border-bottom:1px solid #eee; padding-left:0; }
  .sben-nav .sben-sub{ position:static; display:block; box-shadow:none; border-radius:0; padding:0 0 0 14px; min-width:0; }
  .sben-nav .sben-sub a{ padding:9px 0; font-size:0.875rem; border-bottom:1px dashed #eee; }
  body.sben-nav-open{ overflow:hidden; }
  .home .sben-header{ position:absolute; }
}
/* a11y skip link */
.sben-skip{ position:absolute; left:-9999px; top:0; background:#0060aa; color:#fff; padding:10px 16px; z-index:100; }
.sben-skip:focus{ left:8px; top:8px; }

/* home page-content extras */
.sben-feat-ico{ margin:0 auto 14px; }
.sben-feat-ico img{ width:92px; height:auto; }
.sben-lead{ max-width:820px; margin:8px auto 0; color:#555; }
.entry-content > .alignfull, .wp-block-post-content > .alignfull{ margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%); max-width:100vw; width:100vw; }

/* section titles (centered) -> 2.25rem */
.sben-section h1.has-text-align-center, .sben-section h2.has-text-align-center{ font-size:2.25rem; }

/* ============ TYPOGRAPHY (rem, authoritative) ============ */
:root{
  --fs-body:1rem;        /* 16 */
  --fs-h1:2.5rem;        /* 40 */
  --fs-h2:2.25rem;       /* 36 - section titles */
  --fs-h3:1.5625rem;     /* 25 */
  --fs-h4:1.4375rem;     /* 23 */
  --fs-h5:1.25rem;       /* 20 */
  --fs-h6:1.0625rem;     /* 17 */
  --fs-nav:1rem;         /* 16 */
}
body{ font-size:var(--fs-body); }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }
h5{ font-size:var(--fs-h5); }
h6{ font-size:var(--fs-h6); }
/* section titles uniform incl. non-centered 'Scegli la soluzione' */
.sben-section h1, .sben-section h2{ font-size:var(--fs-h2); }
/* hero */
.sben-hero-word{ font-size:4.375rem; }   /* 70 */
.sben-hero h2{ font-size:2.125rem; }     /* 34 */
/* cards / partners */
.sben-card h3{ font-size:1.25rem; }
.sben-partners h3{ font-size:1.125rem; }
.sben-nav a{ font-size:var(--fs-nav); }

/* language switcher */
.sben-topbar ul.sben-lang{ list-style:none; display:flex; gap:14px; margin:0; padding:0; }
.sben-topbar ul.sben-lang li{ margin:0; }
.sben-topbar ul.sben-lang a{ color:#fff; text-transform:uppercase; font-size:0.8125rem; text-decoration:none; opacity:.8; }
.sben-topbar ul.sben-lang a:hover, .sben-topbar ul.sben-lang .current-lang a{ opacity:1; font-weight:700; }

/* ---- company-history timeline (azienda/firma/enterprise) — engine em_timeline ---- */
.sben-timeline{ position:relative; max-width:920px; margin:1.5rem auto 2.5rem; padding:1rem 0; }
.sben-timeline::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:var(--sben-green); transform:translateX(-50%); }
.sben-tl-row{ position:relative; width:50%; box-sizing:border-box; padding:0.75rem 2.75rem; margin:0.4rem 0; }
.sben-tl-left{ left:0; text-align:right; }
.sben-tl-right{ left:50%; text-align:left; }
/* badge = white ring straddling the centre line (exactly centred, not offset by side) */
.sben-tl-badge{ position:absolute; top:1.35rem; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--sben-green); box-sizing:border-box; z-index:1; }
.sben-tl-left .sben-tl-badge{ right:-10px; }
.sben-tl-right .sben-tl-badge{ left:-10px; }
/* connector arm: from the badge toward the tile (left tile -> points left; right tile -> right) */
.sben-tl-badge::after{ content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:18px; height:2px; background:var(--sben-green); }
.sben-tl-left .sben-tl-badge::after{ right:100%; }
.sben-tl-right .sben-tl-badge::after{ left:100%; }
.sben-tl-year{ position:absolute; top:1.35rem; font-weight:700; font-size:1.15rem; color:#8a9199; }
.sben-tl-left .sben-tl-year{ left:calc(100% + 2.75rem); text-align:left; }
.sben-tl-right .sben-tl-year{ right:calc(100% + 2.75rem); text-align:right; }
.sben-tl-panel{ display:inline-block; text-align:left; max-width:100%; background:#fff;
  border:1px solid #e6eaee; border-radius:6px; padding:0.9rem 1.15rem; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.sben-tl-title{ color:var(--sben-blue); font-weight:600; margin:0 0 0.4rem; font-size:1.05rem; line-height:1.25; }
.sben-tl-details{ color:#5b6670; font-size:0.95rem; line-height:1.55; }
.sben-tl-details strong{ color:var(--sben-text); font-weight:700; }
@media (max-width:860px){
  .sben-timeline::before{ left:8px; }
  .sben-tl-row{ width:100%; left:0; text-align:left; padding:0.6rem 0 0.6rem 2.5rem; }
  .sben-tl-badge{ left:-2px; right:auto; }
  .sben-tl-left .sben-tl-badge::after, .sben-tl-right .sben-tl-badge::after{ left:100%; right:auto; }
  .sben-tl-year{ position:static; display:block; margin-bottom:0.3rem; }
  .sben-tl-left .sben-tl-year, .sben-tl-right .sben-tl-year{ left:auto; right:auto; text-align:left; }
}

/* ---- section heading abstraction (fix once -> every engine-built page) ---- */
/* Section title: normally <h2> (the page's single <h1> is the hero), but on a page with no hero the
   engine promotes the FIRST one to <h1> - 17 pages, contatti among them. Match both, or that promotion
   silently costs the title its size, weight, colour and centring. */
.sben-section :is(h1,h2).sben-sec-title{ font-family:"ABeeZee",sans-serif; font-size:2.5rem; font-weight:600;
  color:var(--sben-blue); text-align:center; line-height:1.2; margin:0 0 1.25rem; }
/* Subtitle look — Open Sans 17px italic 500 — shared by the hero subtitle AND every section subtitle
   (single source: change here, hero + all sections follow). */
.sben-phead h2, .sben-section.sben-pagehead h2, .sben-section h3.sben-sec-sub{
  font-family:"Open Sans","ABeeZee",sans-serif; font-size:1.0625rem; line-height:1.47;
  font-style:italic; font-weight:500; color:#777777; max-width:none; margin:0 auto 6px;
  text-align:center; }
/* image+text intro blocks (e.g. azienda "Grazie al nostro team…"): breathing room on the
   text column's paragraph. Scoped to plain image+text columns rows -> NOT heading+text rows like
   the home "why" section, and NOT the .sben-imgcontent hero-band (its text is padded by the band).
   0.5rem = 8px. */
.sben-section .wp-block-columns:has(figure):not(.sben-imgcontent) .wp-block-column > p.wp-block-paragraph{ padding:0.5rem; }

/* ---- azienda review round 3 ---- */
/* partner-carousel heading ("CI HANNO SCELTO"): keep our grey label look, enlarge to the
   original's size (1.75rem). Color/family/letter-spacing stay from the base .sben-partners h3 rule. */
.sben-partners h3{ font-size:1.75rem; }

/* ---- home "Perché siamo tra i più scelti?" title (it/fr) ----
   Original: a <p class="sppb-addon-title"> at 42px with a green accent word; our engine normalises
   it to h3.sben-sec-sub. Only these home titles have a <strong> inside a subtitle, so :has(strong)
   targets them without hardcoding page IDs. (DE renders this heading via a different path — handled
   separately.) Specificity 0,2,2 beats the subtitle rule .sben-section h3.sben-sec-sub (0,2,1). */
.sben-section h3.sben-sec-sub:has(strong){ font-family:"ABeeZee",sans-serif; font-size:2.625rem;
  line-height:1.24; font-style:normal; font-weight:400; color:var(--sben-blue); text-align:left; max-width:none; }
.sben-section h3.sben-sec-sub:has(strong) strong{ color:var(--sben-green); }
/* the intro paragraph in the adjacent column -> secondary grey */
.sben-section .wp-block-columns:has(.sben-sec-sub) p.wp-block-paragraph{ color:#777777; }

/* ═══ components replacing the original's third-party embeds (Elfsight dropped) ═══════════════ */

/* Google reviews (Places API at runtime; neutral card until the key exists) */
.sben-reviews{ max-width:1140px; margin:0 auto; }
.sben-reviews-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.sben-reviews-head h3{ margin:0; font-size:1.75rem; }
.sben-reviews-rating strong{ font-size:1.5rem; color:var(--sben-blue); }
.sben-reviews-rating span{ color:#8a9199; font-size:0.875rem; }
.sben-reviews-cta{ margin-left:auto; font-size:0.9375rem; }
.sben-reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.sben-review{ margin:0; padding:20px; border:1px solid var(--sben-card-border); border-radius:5px; background:#fff; }
.sben-review figcaption{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sben-review figcaption img{ border-radius:50%; width:40px; height:40px; object-fit:cover; }
.sben-review-who{ display:flex; flex-direction:column; line-height:1.25; }
.sben-review-when{ font-size:0.8125rem; color:#8a9199; }
.sben-review-stars{ margin-left:auto; color:#f5a623; letter-spacing:1px; white-space:nowrap; }
.sben-review blockquote{ margin:0; color:#555; font-size:0.9375rem; line-height:1.55; }

/* Offices + keyless map (the original kept these addresses inside the Elfsight widget) */
.sben-map{ max-width:1140px; margin:0 auto; }
.sben-map-title{ margin:0 0 18px; font-size:1.75rem; }
/* Two rows: the offices column and the map share row 1 (so the map is exactly as tall as the tiles,
   Chiasso through Cham), and the "open in Maps" link sits in row 2 under the map - its height and the
   row gap are added to the block rather than taken out of the map. */
.sben-map-layout{ display:grid; grid-template-columns:minmax(240px,320px) 1fr;
  column-gap:24px; row-gap:10px; align-items:stretch; }
.sben-office-list{ grid-column:1; grid-row:1; }
.sben-map-frame{ grid-column:2; grid-row:1; }
.sben-map-open{ grid-column:2; grid-row:2; justify-self:start; }
.sben-office-list{ display:flex; flex-direction:column; gap:10px; }
.sben-office{ text-align:left; cursor:pointer; background:#fff; padding:14px 16px; display:grid; gap:2px;
  border:1px solid var(--sben-card-border); border-radius:5px; font:inherit; transition:border-color .15s, box-shadow .15s; }
.sben-office:hover{ border-color:var(--sben-green); }
.sben-office.is-active{ border-color:var(--sben-green); box-shadow:inset 3px 0 0 var(--sben-green); }
.sben-office-city{ font-family:"ABeeZee",sans-serif; color:var(--sben-blue); font-size:1.0625rem; }
.sben-office-city em{ font-style:normal; color:#8a9199; font-size:0.8125rem; }
.sben-office-addr{ font-size:0.875rem; color:#555; }
.sben-office-tel{ font-size:0.875rem; color:var(--sben-green); }
/* The frame holds only the map (and the consent gate standing in for it), so it can fill row 1 whole.
   No numbers to keep in sync if a fifth office appears or a tile grows a line. */
.sben-map-frame{ position:relative; display:flex; flex-direction:column; }
.sben-map-frame iframe{ width:100%; flex:1 1 auto; min-height:220px;
  border:0; border-radius:5px; display:block; }
.sben-map-open{ display:inline-block; font-size:0.875rem; }   /* spacing is the grid row-gap now */
@media (max-width:860px){
  /* stacked: one column, so the tiles no longer give a height - the ratio does */
  .sben-map-layout{ grid-template-columns:1fr; }
  .sben-office-list, .sben-map-frame, .sben-map-open{ grid-column:1; grid-row:auto; }
  .sben-map-frame iframe, .sben-map-gate{ flex:0 0 auto; aspect-ratio:var(--sben-map-ratio); }
}

/* sitewide "choose a calculator" slide-in (an Elfsight popup in the original) */
/* Bottom-right of the viewport, like the original, and OPEN by default - the closed state is the
   exception a visitor opts into, so no-javascript still gets the offer. Dismissal lives in a cookie
   that expires after a few hours (mu-plugins/sben-f3.php + nav.js), so it comes back on its own. */
.sben-calcpanel{ position:fixed; right:0; bottom:24px; z-index:60; display:flex; align-items:flex-end; }
.sben-calcpanel-toggle{ display:none; cursor:pointer; border:0; padding:12px 16px; align-items:center; gap:8px;
  background:var(--sben-green); color:#fff; font:inherit; font-size:0.9375rem; border-radius:5px 0 0 5px;
  box-shadow:0 6px 20px rgba(0,0,0,.22); }
.sben-calcpanel-mark{ font-weight:700; font-size:1.125rem; line-height:1; }
.sben-calcpanel-body{ width:270px; padding:18px; background:var(--sben-blue); color:#fff;
  border-radius:5px 0 0 5px; box-shadow:0 8px 30px rgba(0,0,0,.25); }
.sben-calcpanel.is-closed .sben-calcpanel-body{ display:none; }
.sben-calcpanel.is-closed .sben-calcpanel-toggle{ display:flex; }
.sben-calcpanel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  font-family:"ABeeZee",sans-serif; font-size:1.25rem; line-height:1.2; margin-bottom:14px; }
.sben-calcpanel-close{ background:none; border:0; color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; padding:0 2px; }
.sben-calcpanel-btn{ display:block; background:var(--sben-green); color:#fff !important; text-align:center;
  text-decoration:none !important; padding:11px 14px; border-radius:4px; font-size:0.9375rem; }
.sben-calcpanel-btn + .sben-calcpanel-btn{ margin-top:10px; }
@media (max-width:600px){ .sben-calcpanel{ bottom:0; } .sben-calcpanel-body{ width:min(92vw,320px); } }

/* Forminator forms (contact / jobs) + the 5-step quote wizards. Only the shell is styled here so
   the plugin's own markup keeps working; the wizard step heading/description come from the html
   fields the builder inserts (see scripts/build-forms.py). */
.sben-form{ max-width:760px; }
.sben-form .forminator-ui.forminator-custom-form{ margin:0; }
.sben-form--calc-pompa, .sben-form--calc-solare{ max-width:820px; margin:0 auto; }
.sben-step-q{ font-family:"ABeeZee",sans-serif; font-size:1.5rem; font-weight:600; color:var(--sben-blue);
  margin:0 0 8px; border-bottom:1px solid var(--sben-card-border); }
.sben-step-q::after{ content:""; display:block; height:2px; width:70%; margin:8px 0 0;
  border-radius:2px; background:var(--sben-accent); transform:translateY(2px); }
.sben-step-d{ color:#777; font-size:0.9375rem; line-height:1.5; margin:14px 0 4px; }
.sben-section.is-dark .sben-step-q{ color:#fff; }
.sben-section.is-dark .sben-step-d{ color:#d6e4f0; }

/* Product index rows (image | text): the tile heading is a column-level h2, not a section title, so
   it keeps the section's centring and 2.625rem by mistake. 21 of them, on the 3 product indexes only. */
.sben-section .wp-block-column > h2{ text-align:left; font-size:1.825rem; }

/* Call-to-action links carried over from the original's sppb-btn (engine adds .sben-btn): the product
   index "leggi tutto", the focus-on articles. Same primary shape as the consent Accept button. */
.sben-btn{ display:inline-block; background:var(--sben-green); color:#fff !important; text-decoration:none !important;
  padding:11px 22px; border-radius:4px; font-size:0.9375rem; line-height:1.2; }
.sben-btn:hover{ background:var(--sben-green-d); }

/* Calculator pages (body class from mu-plugins/sbenergetica-core.php, same config key as the panel):
   air between the standfirst and the wizard. */
.sben-calculator .sben-section h3.sben-sec-sub{ margin-bottom:2rem; }

/* ═══ coloured notice box ═══════════════════════════════════════════════════════════════════════
   An SPPB addon whose own css painted it (colour + background): today that is the wizards'
   "request sent" panel, #fff on #34a93a. The colours arrive inline from the original so a differently
   painted box stays faithful; shape and typography live here. Centred like the original addon
   (sppb-text-center) - if a left-aligned notice ever shows up, that becomes a modifier. */
.sben-box{ border-radius:10px; padding:30px; text-align:center; }
.sben-box :is(p,li,strong,em,a){ color:inherit; }
.sben-box p{ margin:0; font-size:1rem; font-weight:600; }
.sben-box strong{ font-weight:600; }     /* original used <strong> (=700); 600 per operator */

/* thank-you pages (body class from mu-plugins/sbenergetica-core.php, driven by the same config key
   as the wizards' redirect): headline gets air, the standfirst reads left like the original addon. */
.sben-thankyou .sben-section :is(h1,h2).sben-sec-title{ margin-bottom:2rem; }
.sben-thankyou .sben-section h3.sben-sec-sub{ text-align:left; }

/* ═══ 404 ══════════════════════════════════════════════════════════════════════════════════════ */
.sben-404{ text-align:center; padding:2rem 0 3rem; }
.sben-404-code{ font-family:"ABeeZee",sans-serif; font-size:5rem; line-height:1; font-weight:600;
  color:var(--sben-green); margin:0; }
.sben-404 h1{ font-size:2.25rem; font-weight:600; margin:0 0 12px; }
.sben-404-text{ color:#555; margin:0 0 24px; }

/* ═══ cookie consent (our own banner, see mu-plugins/sben-consent.php) ═══════════════════════ */
/* Bottom-left card, like the original's CookieYes placement. min() keeps it inside narrow viewports
   without a breakpoint, so the box never needs a width rule of its own. */
.sben-consent{ position:fixed; inset:auto auto 20px 20px; z-index:80; width:min(420px,calc(100vw - 40px)); }
.sben-consent-box{ background:#fff; padding:22px 24px; border-radius:6px;
  box-shadow:0 10px 40px rgba(0,0,0,.22); border-top:3px solid var(--sben-green); }
.sben-consent-body{ margin:0 0 4px; font-size:0.9375rem; line-height:1.55; color:#555; }
.sben-consent-more{ margin:0 0 16px; font-size:0.9375rem; line-height:1.55; color:#555; }
/* "Personalizza" panel: one locked row + one real toggle */
.sben-consent-cats{ display:grid; gap:12px; margin:0 0 16px; }
.sben-consent-cat{ display:flex; gap:10px; align-items:flex-start; font-size:0.875rem; cursor:pointer; }
.sben-consent-cat.is-locked{ cursor:default; opacity:.75; }
.sben-consent-cat input{ margin:2px 0 0; accent-color:var(--sben-green); flex:0 0 auto; }
.sben-consent-cat span{ display:flex; flex-direction:column; }
.sben-consent-cat em{ font-style:normal; color:#8a9199; font-size:0.8125rem; margin-top:2px; }
.sben-consent-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sben-consent-btn{ cursor:pointer; border:0; font:inherit; font-size:0.9375rem; padding:11px 20px; border-radius:4px; }
/* Accept and Reject are given the SAME size and weight - a louder "accept" makes the choice unfree. */
.sben-consent-btn.is-accept{ background:var(--sben-green); color:#fff; }
.sben-consent-btn.is-reject{ background:#eef1f4; color:var(--sben-text); }
/* ghost, pushed to the right edge of the actions row */
.sben-consent-link{ background:none; border:0; font:inherit; font-size:0.875rem; color:var(--sben-blue);
  text-decoration:underline; cursor:pointer; margin-left:auto; padding:4px; }
.sben-consent-manage{ background:none; border:0; font:inherit; font-size:inherit; color:#fff;
  text-decoration:underline; cursor:pointer; padding:0 2px; }

/* Maps embed waits for consent (or one explicit click) */
.sben-map-gate{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:24px;
  border:1px dashed var(--sben-card-border); border-radius:5px; background:#fafbfc;
  /* same box as the iframe it stands in for, so granting consent doesn't shift the page */
  flex:1 1 auto; min-height:220px; justify-content:center; }
.sben-map-gate strong{ color:var(--sben-blue); font-family:"ABeeZee",sans-serif; font-size:1.0625rem; }
.sben-map-gate span{ font-size:0.875rem; color:#777; max-width:46ch; }
.sben-map-load{ cursor:pointer; border:0; font:inherit; font-size:0.9375rem; padding:9px 18px;
  border-radius:4px; background:var(--sben-green); color:#fff; }
@media (max-width:600px){ .sben-consent{ inset:auto auto 12px 12px; width:calc(100vw - 24px); } }

/* ═══ Focus On articles ════════════════════════════════════════════════════════════════════════ */
/* The index grid on the Focus On page. The block lives in the page CONTENT, emitted by
   ARTICLE_INDEX in porting/scripts/sppb2blocks.py, not in a template: SEO asked for the articles
   above the partners strip, and a template can only append below the whole content.
   Same tile language as .sb-tile--home-project because that is the card design of the site. */
.sben-article-index .wp-block-post-template{ gap:30px; }
.sben-article-index .wp-block-post{ display:flex; flex-direction:column; padding:20px;
  border:1px solid var(--sben-card-border); border-radius:5px; }
.sben-article-index .sben-article-thumb{ margin:0 0 16px; }
.sben-article-index .sben-article-thumb img{ width:100%; height:auto; display:block; border-radius:3px; }
.sben-article-index .wp-block-post-title{ margin:0 0 12px; font-size:1.25rem; line-height:1.3; }
.sben-article-index .wp-block-post-title a{ color:inherit; text-decoration:none; }
/* text-decoration repeated on the hover: moving the index inside post-content put it in reach of the
   generic prose link rule up at .wp-block-post-content a:hover, which underlines. A card title is
   not prose. */
.sben-article-index .wp-block-post-title a:hover{ color:var(--sben-green); text-decoration:none; }
.sben-article-index .wp-block-post-excerpt{ margin:0 0 16px; }
.sben-article-index .wp-block-post-excerpt__excerpt{ margin:0; color:#555; font-size:0.9375rem; }
/* auto top margin pins the button to the bottom, so buttons line up across cards of unequal height */
.sben-article-index .sben-readmore{ margin:auto 0 0; }

/* The article page (theme/templates/single.html). Headings step down from the section scale: an
   article is one long read at 820px, where the 36px used for full-width section titles shouts. */
.sben-article{ padding:2.5rem 0 3.5rem; }
.sben-article-img{ margin:0 0 2.25rem; }
.sben-article-img img{ width:100%; height:auto; display:block; border-radius:5px; }
.sben-article :is(h2,h3){ color:var(--sben-blue); font-weight:600; }
.sben-article h2{ font-size:1.75rem; line-height:1.25; margin:2.25rem 0 0.75rem; }
.sben-article h3{ font-size:1.3125rem; line-height:1.3; margin:1.75rem 0 0.5rem; }
.sben-article p{ margin:0 0 1.125rem; }
.sben-article :is(ul,ol){ margin:0 0 1.125rem; padding-left:1.25rem; }
.sben-article li{ margin:0 0 0.5rem; }
.sben-article a{ color:var(--sben-green); }
.sben-article-back{ margin:2.5rem 0 0; }
.sben-article-back a{ color:var(--sben-green); text-decoration:none; font-weight:600; }
.sben-article-back a::before{ content:"\2039\00a0"; }

/* Pager for the project list, the only page split with <!--nextpage-->. core/post-content emits it
   by itself (.post-nav-links) once the content is paginated - no shortcode needed, so there is none.
   Styled as the green pill the rest of the site uses, current page filled. */
.post-nav-links{ display:flex; justify-content:center; align-items:center; gap:8px; padding:1.5rem 0 3rem; }
.post-nav-links > .post-page-numbers{ display:inline-block; min-width:40px; padding:9px 0; text-align:center;
  border-radius:4px; text-decoration:none; font-weight:600; font-size:1rem;
  background:#fff; border:1px solid var(--sben-card-border); color:var(--sben-blue); }
.post-nav-links > .post-page-numbers:hover{ background:var(--sben-light); }
.post-nav-links > .post-page-numbers.current{ background:var(--sben-green); border-color:var(--sben-green); color:#fff; }