/* Site-wide custom CSS, loaded on every page.
 *
 * This file exists so a site-wide style change is a one-file upload instead of
 * an edit to all 199 pages. It is referenced as sos-site.css?v=N: nothing else
 * here carries a version, and without one a change cannot be forced past a
 * visitor's cache. Bump the N in every page's <link> when this file changes.
 */

/* Sticky header.
 *
 * The header element ships fully transparent (measured: rgba(0,0,0,0)), which
 * is invisible while it sits in normal flow but breaks the moment it floats:
 * body text scrolls straight through the menu and both become unreadable.
 * So the background is not decoration here, it is what makes sticky usable.
 *
 * #FFF7EB is not a new colour -- it is body's own background, so the header
 * stays seamless against the page at rest.
 *
 * The hairline shadow does the job a border would, without adding a pixel to
 * the header's height and so without shifting the layout below it.
 */
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #FFF7EB;
  box-shadow: 0 1px 0 rgba(6, 33, 35, 0.10);
}

/* The article sidebar sticks with native CSS, not with Elementor's sticky JS.
 *
 * `top: 96px` is this header's 66px height plus the 30px gap the sidebar was
 * originally designed with, so it comes to rest just below the header instead
 * of underneath it. **If the header's height changes, change this number** --
 * it is the one place the two are coupled now.
 *
 * Why native and not the plugin's: Elementor Pro's sticky is JavaScript. It
 * listens for scroll and swaps the section between `fixed` and `absolute`.
 * Scrolling on a trackpad runs on the compositor thread, so those swaps land a
 * frame or more late, and the box drifts a little past where it belongs and
 * snaps back. Native `position: sticky` is handled by the compositor itself,
 * which is why it cannot lag behind the scroll it is reacting to. The plugin's
 * `data-settings` was removed from all 46 sections so the two do not fight.
 *
 * That also collapses 46 copies of the offset into this single number. The old
 * arrangement had it stored per page, in two different encodings -- raw quotes
 * on 14 pages and HTML-escaped on 31 -- and a fix written for one encoding
 * silently missed the other. That happened, and it left 31 pages unfixed.
 *
 * Requirements this relies on, all verified rather than assumed: no ancestor
 * has `overflow` other than `visible` (which would silently disable sticky),
 * and the section's parent is the full-height sidebar column, which is what
 * gives it the whole article to travel down. The flex ancestors are fine --
 * a flex item can be sticky.
 *
 * Matched by the `.sos-yt` box it contains rather than by the section's
 * Elementor id, and confined to desktop, the only place the sidebar renders.
 */
@media (min-width: 1025px) {
  .elementor-widget-wrap > .elementor-section:has(.sos-yt) {
    position: sticky;
    top: 96px;
  }
}

/* "Chi siamo" on the homepage: the two portraits vanished on a phone.
 *
 * The inner section carries `padding: 0 200px` -- 400px of it -- with no
 * mobile override, which was harmless on a desktop and fatal on a 390px
 * screen: 390 minus the outer section's 20 minus 400 is negative, so the
 * content box clamped to zero width. The portraits computed to 0x0 (they had
 * loaded fine, 150x150) and the two captions, robbed of any width, wrapped on
 * top of one another. Below roughly 420px it collapses entirely; between there
 * and 767px it merely squeezes the images down, which is why the section looked
 * only slightly off on a large phone and broken on a small one.
 *
 * Dropping the padding under 767px hands each stacked column the full width
 * back. The images are 150px and already centred, so nothing else is needed --
 * and the desktop layout, where the 200px inset is deliberate, is untouched.
 *
 * !important because the offending declaration is Elementor's own per-page CSS
 * at .elementor-86724 .elementor-element.elementor-element-73194ff -- three
 * classes. Out-specifying it would mean naming the page id, and this same
 * section appears on 51 pages: the homepage, 404, and the 49 paginated clones.
 */
@media (max-width: 767px) {
  .elementor-element-73194ff {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* "I nostri servizi": pull the three cards out to the page's own edges.
 *
 * The row container already spans 238->1218, exactly like the "Cosa dicono i
 * nostri clienti" bar. What sat too far in was the visible panel inside each
 * column -- .elementor-element-populated, the thing that actually paints the
 * pink/blue/green background and the dashed border -- because each column adds
 * 10px of its own padding around it.
 *
 * Cancelling that 10px on the row lines the outer panels up with the bar and
 * leaves the gaps between the three untouched and their widths equal.
 *
 * The number to cancel is 10, NOT the 26 you get from measuring the inner
 * widget. The widget is inset a further 16px inside its own panel, so aligning
 * it would push the visible panel 16px PAST the page edge -- which is exactly
 * what a first attempt at this did. Measure the element that paints the
 * background, not the one that holds the text.
 *
 * 10px is a fixed inset, so it needs no scaling -- but it is cancelled only
 * from 1025px up. Below that the columns stack and the row sits close to the
 * viewport edge, where a negative margin would push the cards off-screen and
 * create horizontal scroll.
 *
 * Scoped to the section id, which exists on the homepage and the 49 paginated
 * archive pages that repeat this block -- the same component, aligned the same
 * way everywhere it appears.
 */
@media (min-width: 1025px) {
  .elementor-element-3a253e0 > .elementor-container {
    margin-left: -10px;
    margin-right: -10px;
    width: auto;
  }
}

/* Testimonials: same 10px inset, different cause, so a different fix.
 *
 * The review columns are a CSS grid of ours (.sos-testi) sitting inside an
 * Elementor wrapper that carries padding: 10px. The grid itself is correct --
 * it is the wrapper's padding that squeezed the three columns to 248->1208
 * instead of the 238->1218 every other block on the page uses.
 *
 * A negative margin does NOT work here, and that is worth recording: on the
 * services row it does, because that row is a flex container that re-lays its
 * columns. .sos-testi is a grid item, so a negative margin only slides it left
 * without widening it -- measured, the left edge landed correctly and the
 * right edge fell 20px short. Removing the padding is what actually gives the
 * grid the extra 20px to distribute across its three tracks.
 *
 * :has() targets the one wrapper that holds this grid, so no other Elementor
 * wrapper on the page loses its padding. !important is needed for the same
 * reason as the playlist header: Elementor generates a higher-specificity
 * padding rule for the element, and out-specifying it would mean hard-coding
 * a page-specific id that breaks on re-export.
 */
@media (min-width: 1025px) {
  .elementor-element-populated:has(> .sos-testi) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Landing-page intro ------------------------------------------------------
 *
 * The squeeze design renders its intro paragraph and benefit list at weight
 * 600, which reads as bold under the 64px headline above it. Normal weight on
 * every landing page, old and new.
 *
 * Scoped to the OFFER SECTION rather than to the text-editor's own widget id,
 * because that id varies per page (a018f10, 769fefd, 5e12a29) while the
 * section does not. The two ids below are the whole family, and they were
 * derived by finding the section that contains BOTH a heading widget and the
 * form -- not by pattern-matching on names:
 *
 *   5cdd94a   44 pages
 *   d2ad6b7   /skill-miniature-youtube/, which carries its own copy of the design
 *
 * The trap this walked into once: that page's OTHER section id is 693b46a, and
 * using it here styled the testimonial instead of the intro. It looked like it
 * worked, because the testimonial is 400 already. Verifying that "the selector
 * matches a paragraph" was not enough; the check that matters is WHICH
 * paragraph, by its text.
 *
 * Every one of the 45 pages has exactly one text-editor inside its offer
 * section, so nothing else can be caught. The testimonial lives in the next
 * section down and keeps its own styling.
 *
 * .sos-landing-intro is the class the landing shell emits, kept so a future
 * shell built on different section ids still lands on this rule.
 *
 * !important because Elementor generates its own weight rule per widget id,
 * and out-specifying it would mean hard-coding ids that change on re-export.
 */
.elementor-element-5cdd94a .elementor-widget-text-editor p,
.elementor-element-5cdd94a .elementor-widget-text-editor li,
.elementor-element-d2ad6b7 .elementor-widget-text-editor p,
.elementor-element-d2ad6b7 .elementor-widget-text-editor li,
.sos-landing-intro p,
.sos-landing-intro li {
  font-weight: 400 !important;
}