/*
Theme Name: WS-theme
Theme URI: https://www.watsonsolutions.it/
Author: Watson Solutions
Author URI: https://www.watsonsolutions.it/
Description: Watson solutions starter theme based on Underscore.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ws-theme
This theme, like WordPress, is licensed under the GPL.
*/

/* Inter */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-ThinItalic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-SemiBoldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter/Inter18pt-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Bodoni for titles */
/* @font-face { // NON USATO
    font-family: 'Bauer Bodoni BT';
    src: url('../fonts/bauer-bodoni-bt-roman.woff2') format('woff2'),
         url('../fonts/bauer-bodoni-bt-roman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} */

@font-face {
    font-family: 'Bauer Bodoni Std';
    src: url('fonts/BauerBodoniStd-Roman.woff2') format('woff2'),
         url('fonts/BauerBodoniStd-Roman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bodoni 72';
    src: url('fonts/BodoniSvtyTwoITCTT-Book.woff2') format('woff2'),
         url('fonts/BodoniSvtyTwoITCTT-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bodoni 72';
    src: url('fonts/BodoniSvtyTwoITCTT-BookIta.woff2') format('woff2'),
         url('fonts/BodoniSvtyTwoITCTT-BookIta.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Bodoni 72';
    src: url('fonts/BodoniSvtyTwoITCTT-Bold.woff2') format('woff2'),
         url('fonts/BodoniSvtyTwoITCTT-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body,
html {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    height: 100%;
    animation: fadeIn .8s ease-in-out;
}

/* overflow-x lives only on html (the actual scrolling root), never on body.
   Setting it on both used to promote body's own overflow-y to `auto` too
   (CSS spec: overflow-x non-visible + overflow-y visible on the same
   element forces the latter to auto) — giving body its own independent
   scroll container nested inside html's. Most of the time the two
   scrollbars overlapped closely enough to go unnoticed, but any descendant
   that ends up `position: absolute` with no positioned ancestor (e.g. the
   screen-reader-only status element Contact Form 7 injects into every
   form) is positioned against the initial containing block, i.e. html —
   not body's internal scroll box — which forces html to *also* need to
   scroll, producing two independent, genuinely visible scrollbars. */
html {
    overflow-x: hidden;
}

.skip-link {
	background-color: #f1f1f1;
	padding: 8px;
	position: absolute;
	left: -9999em;
	top: -9999em;
	z-index: 999999;
	text-decoration: underline;
}

.skip-link:focus {
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 15px 23px 14px;
	top: 7px;
	right: auto;
	background-color: #f1f1f1;
	clip: auto !important;
	clip-path: none;
	z-index: 100000;
}

/* Admin-only live viewport-size readout (see footer.php) — diagnostic aid,
   not part of the site's own design. z-index is the max 32-bit int so it
   always sits above everything else, including the lightbox and mobile
   menu overlay. */
#sa-viewport-size {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 2147483647;
	background-color: rgba(0, 0, 0, .75);
	color: #fff;
	font-family: monospace;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 3px;
	pointer-events: none;
}

a:link {
    color: #000;
    text-decoration: none;
}
  
a:visited {
    color: #000;
    text-decoration: none;
}
  
a:hover {
    color: #000;
    text-decoration: none;
}
  
a:active {
    color: #000;    
    text-decoration: none;
}

p {
    font-size: .9rem;
    line-height: 1.3;
    text-align: justify;
}

/* Extra edge padding on top of Bootstrap's own gutter (kept separate from
   --bs-gutter-x on purpose: the row's negative margin only cancels the
   gutter portion, so this extra amount stays a real inset at the container's
   own left/right edges without also widening the gap between columns, e.g.
   text vs. gallery in Section 7/12). */
.container {
    padding-left: calc(var(--bs-gutter-x) * .5 + 75px);
    padding-right: calc(var(--bs-gutter-x) * .5 + 75px);
}

/* Add to a specific .container to use a smaller 25px edge inset instead of
   the default 75px above. */
.sa-container-tight {
    padding-left: calc(var(--bs-gutter-x) * .5 + 25px);
    padding-right: calc(var(--bs-gutter-x) * .5 + 25px);
}

/* SA - HOMEPAGE SECTIONS */
.sa-section {
	padding-top: 100px;
	padding-bottom: 100px;
}

.sa-section--white {
	background-color: #ffffff;
}

.sa-section--grey {
	background-color: #f2f2f2;
}

.sa-section img {
    width: 100%;
}

/* Scroll fade-in: sections start invisible and fade to full opacity the
   first time they enter the viewport (custom-scripts.js adds
   .sa-fade-target on load, then .sa-fade-in the moment each section is
   observed intersecting — and immediately stops observing it, so this
   never re-triggers scrolling back up). Kept as an add-on class rather
   than a bare selector so a JS failure just leaves sections visible
   instead of stuck at opacity 0. */
.sa-fade-target {
    opacity: 0;
    transition: opacity .45s ease-out;
}

.sa-fade-target.sa-fade-in {
    opacity: 1;
}

/* SA - HERO VIDEO
   Click-to-play with sound: never autoplays, so there's no browser
   autoplay-policy conflict (that only restricts playback that starts
   without a user gesture). Poster (hero.webp) + big centered play button
   show until clicked; small play/pause + mute controls, bottom-left,
   appear only on hover/focus of the wrap once playing. */
.sa-hero-wrap {
	position: relative;
	height: 100%;
	width: 100%;
}

.sa-hero-video,
.sa-hero-poster {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: auto;
}

.sa-hero-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: none;
	padding: 0;
	line-height: 0;
	cursor: pointer;
	z-index: 2;
}

.sa-hero-wrap.is-playing .sa-hero-poster,
.sa-hero-wrap.is-playing .sa-hero-play {
	display: none;
}

.sa-hero-controls {
	position: absolute;
	bottom: 0;
	right: 50px;
	display: none;
	gap: 12px;
	z-index: 2;
}

.sa-hero-wrap.is-playing:hover .sa-hero-controls,
.sa-hero-wrap.is-playing:focus-within .sa-hero-controls {
	display: flex;
}

.sa-hero-controls button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: rgba(0, 0, 0, .35);
	border: none;
	border-radius: 50%;
	padding: 0;
	line-height: 0;
	cursor: pointer;
}

/* BTN */
a.btn-basic {
    font-size: 1.1rem;
    text-transform: uppercase;
    display: inline-block;
    color: #fff;
    font-family: 'Bauer Bodoni Std', serif;
    background-color: #D13026;
    padding: 10px 30px;
}

/* TITLE */
h1.sa-title,
h2.sa-title,
h3.sa-title {
    font-family: 'Bauer Bodoni Std', serif;
    font-size: 3.5rem;
    margin: 0;
}

h1.sa-title-italic,
h2.sa-title-italic,
h3.sa-title-italic {
    font-family: 'Bodoni 72', serif;
    font-style: italic;
    font-size: 3.5rem;
    margin: 0;
}

h1.sa-title-small,
h2.sa-title-small,
h3.sa-title-small {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 25px 0;
}

/* HEADER */
.site-header {
    position: relative;
    width: 100%;
    height: 100px;
    padding-right: 50px;
}

.sa-mobile-logo-menu {
    padding-top: 8px;
}

img.sa-logo-header {
    height: 35px;
    position: absolute;         
    right: 50px;
    top: 22px;
}

img.sa-logo-2-header {
    height: 38px;
    position: absolute;
    left: 40px;
    top: 22px;
    cursor: pointer;
}

img.sa-logo-3-header {
    height: 85px;
    position: absolute;         
    left: 50%;
    transform: translateX(-50%); 
}

nav#site-navigation {
    position: fixed;
    top: 100px;
    /* Right edge of this box = 110px (93px original left + 17px circle),
       so the circle — now the last item in each row — lands exactly where
       it always did, on the line, while the label grows leftward into the
       box instead of following the circle to the right. */
    left: -100px;
    width: 230px;
    z-index: 11;
}

.sa-nav-line {
    position: fixed;
    top: 0;
    left: 122px;
    width: 1px;
    height: 100vh;
    background-color: #000;
    z-index: 10;
}

/* Mobile off-canvas menu: hidden by default, switched on in the MOBILE
   section at the bottom of this file (max-width: 1199px). Kept hidden here
   (rather than only relying on the trigger being hidden) so the panel's own
   text content can't render as a plain block in the normal desktop flow. */
.sa-mobile-menu-trigger,
.sa-mobile-menu-overlay,
.sa-mobile-menu {
    display: none;
}

nav#site-navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav#site-navigation ul li {
    font-size: .9rem;
    margin: 7.5px 0;
}

/* WPML language switcher, appended as the last menu item (see
   ws_theme_nav_menu_language_switcher in functions.php) — set apart from
   the real nav items with extra top spacing instead of the usual 7.5px. */
/* nav#site-navigation ul li.sa-nav-lang-item {
    margin-top: 25px;
} */

nav#site-navigation ul li.sa-nav-lang-item:nth-child(1 of .sa-nav-lang-item) {
    margin-top: 25px;
}

nav#site-navigation ul li a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

nav#site-navigation ul li a::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    border: 1px solid #000;
    background-color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color .3s ease;
}

nav#site-navigation ul li a.sa-nav-active::after {
    background-color: #000;
}

nav#site-navigation ul li a.sa-nav-active {
    font-weight: bold;
}

.sa-header-cta {
    display: flex;
}

.sa-header-cta img {
    height: 30px;
    margin-left: 10px;
}

/* HOMEPAGE */
.sa-section-hero {
    box-sizing: border-box;
    height: calc(100vh - 100px);
    padding-bottom: 40px;
}

.sa-section-2 {
    position: relative;
    height: 90%;
    width: 100%;
    background-image: url('img/webp/bagnara-crystal-stella-alpina-stelvio.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.sa-section-2-text {
    position: absolute;
    top: 0;
    right: 0;
}

.sa-section-2-text img {
    width: 600px;
}

.sa-section-2-text p {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    margin-top: -25px;
}

.sa-section-3 h2 {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 50px;    
}

.sa-section-3-images {
    display: flex;
    gap: 15px;
    justify-content: center;
    padding-left: 30px;
}

.sa-section-3-images img {
    width: 50%;
}

.sa-section-4 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;    
    height: 90%;
    width: 100%;
    background-image: url('img/webp/stella-alpina-bagnara-b.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 30px;
}

.sa-section-4 h2 {
    font-size: 4.5rem;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    margin: 0;
}

.sa-section-6 {
    text-align: center;
    padding-top: 125px;
    margin-bottom: 100px;
}

.sa-section-6 h2 {
    font-family: 'Bodoni 72';
    font-style: normal;
    font-size: 8rem;
    line-height: .5;
    margin-bottom: 100px;
}

.sa-section-6 h2 span {
    font-style: italic;
    font-size: 4rem;
    line-height: 1.2;
}

.sa-section-6 img {
    width: 100%;
}

.sa-section-8 {
    position: relative;
    margin-top: 50px;
}

.sa-section-8-text {
    position: absolute;
    left: 50%;
    bottom: 40%;
    text-align: right;
}

.sa-section-8 img {
    width: 100%;
}

.sa-section-8-text h2 {
    font-size: 4.25rem;
    text-align: right;
    line-height: .9;
    color: #fff;
    margin-bottom: 50px;
}

.sa-section-9 {
    padding-top: 50px;
}

.sa-section-9-img {
    display: flex;
    justify-content: flex-end;
    padding-right: 150px;
    margin-top: -65px;
}

.sa-section-9 img {
    width: 700px;
}

.sa-section-9 h2 {
    font-family: 'Bodoni 72';
    font-style: normal;
    font-size: 8rem;
    line-height: .5;
    margin-top: 50px;
    margin-bottom: 100px;
}

.sa-section-9 h2 span {
    display: inline-block;
    font-style: italic;
    font-size: 4rem;
    line-height: 1.2;
    margin-right: 25px;
}

.sa-section-9-img-2 {
    position: relative;
    margin-bottom: 30px;
}

.sa-section-9-img-2 img {
    width: 100%;
}

.sa-section-9-img-2 i {
    position: absolute;
    left: 50px;
    bottom: 40px;
    font-size: 8rem;
    letter-spacing: -1px;
    color: #fff;
    font-style: normal;
}

.sa-section-11 img {
    width: 100%;
}

.sa-section-11 a {
    margin-top: 50px;
}

.sa-section-12 {
    position: relative;
    margin-top: 175px;
    margin-bottom: 30px;
    overflow: hidden;
}

img.sa-section-12-fiore {
    position: absolute;
    right: -40%;
    top: 200px;
    opacity: .05;
    height: 110%;
    z-index: -1;
}

.sa-section-12-image {
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sa-section-12-image h3 {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9.5rem;
    font-weight: 300;
    letter-spacing: -0.5px;
    color: #fff;
}

.sa-section-12-image img {
    width: 100%;
    margin-bottom: 57px;
}

.sa-section-12-text {
    position: absolute;
    right: -515px;
    top: 0;
    max-width: 500px;
}

.sa-section-13-image {
    position: relative;
}

.sa-section-13-image img {
    width: 100%;
}

.sa-section-13-image h3 {
    position: absolute;
    bottom: 50px;
    left: 50%;
    text-align: right;
    color: #fff;
    font-family: 'Bodoni 72';
    font-style: normal;
    font-size: 8rem;
    line-height: .5;
    margin-bottom: 100px;
}

.sa-section-13-image h3 span {
    font-style: italic;
    font-size: 4rem;
    line-height: 1.2;
}

.sa-section-14 {
    padding-top: 30px;
    padding-bottom: 15px;
}

.sa-section-14-left {
    display: flex;
    justify-content: flex-end;
}

.sa-section-14-text {
    max-width: 350px;
    text-align: right;
    padding-right: 15px;
}

.sa-section-14-text p {
    text-align: right !important;
}

.sa-section-14-text h2 {
    font-size: 4rem;
    font-family: 'Bauer Bodoni Std', serif;
    margin: 10px 0 20px 0;
}

.sa-section-14 img {
    width: 100%;
}

.sa-section-15 img {
    width: 100%;
}

.sa-section-16 {
    padding-top: 175px;
    padding-bottom: 100px;
}

.sa-section-16 img {
    width: 100%;
}

.sa-section-16-image {
    position: relative;
    margin-bottom: 30px;
}

.sa-section-16-image h2 {
    position: absolute;
    left: 100px;
    bottom: 100px;
    font-size: 4rem;
    font-family: 'Bauer Bodoni Std', serif;
    color: #fff;
}

.sa-section-17 img {
    width: 100%;
}

.sa-section-17-text {
    padding-right: 30px;
}

.sa-section-17 h2 {
    text-align: right;
    font-size: 4rem;
    font-family: 'Bauer Bodoni Std', serif;
    margin-top: 0;
}

.sa-section-18-image {
    position: relative;
}

.sa-section-18-image p {
    position: absolute;
    bottom: 150px;
    left: 10%;
    max-width: 450px;
    color: #fff;
}

.sa-section-19 h2 {
    font-size: 2rem;
    text-align: center;
    font-family: 'Bauer Bodoni Std', serif;
    margin-top: 0;
    margin-bottom: 50px;
}

/* CF7 */
input.sa-cf7-input-text {
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    border-radius: 0;
    padding: 0 15px;
    margin-top: 10px;
}

textarea.sa-cf7-textarea {
    width: 100%;
    border: 1px solid #000;
    border-radius: 0;
    padding: 15px;
    margin-top: 10px;
}

select.sa-cf7-select {
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    border-radius: 0;
    margin-top: 10px;
    padding: 0 40px 0 15px;
    background-color: #fff;
    font-family: inherit;
    font-size: .9rem;
    /* Grey to match the placeholder color of the text inputs while the
       empty "Richiedi informazioni" option is showing; switched to black
       below once a real option is selected. */
    color: #757575;
    cursor: pointer;

    /* Removes each browser's native dropdown arrow so the custom red one
       below is what actually shows, consistently, everywhere. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Custom arrow: a downward-pointing red triangle, drawn as an inline
       SVG so it stays crisp at any screen density and its color matches
       the brand red exactly (a border-only CSS triangle can't be
       positioned/sized as precisely inside a select background). Sized
       15x10 (25% up from the original 12x8). */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10'%3E%3Cpolygon points='0,0 15,0 7.5,10' fill='%23D13026'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px 10px;
}

/* Once a real option is chosen (not the empty placeholder one), text reads
   like normal input text instead of the placeholder grey above. */
select.sa-cf7-select:has(option:checked:not([value=""])) {
    color: #000;
}

/* Firefox draws its own dotted focus ring around the selected option text
   even with appearance:none; this hides just that artifact (the outer
   keyboard focus outline on the control itself is untouched). */
select.sa-cf7-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

/* No-op everywhere except old IE/Edge, where it hides their native
   dropdown button so it doesn't double up with the custom arrow. */
select.sa-cf7-select::-ms-expand {
    display: none;
}

input.sa-cf7-submit {
    width: 100%;
    color: #fff;
    font-family: 'Bauer Bodoni Std', serif;
    background-color: #D13026;
    text-transform: uppercase;
    border: none;
    padding: 15px 45px; 
    margin-top: 25px;
}

input.sa-cf7-acceptance + span {
    font-size: .8rem;
    line-height: .9;
}

.wpcf7-list-item {
    margin: 0;
}

.sa-section-20 {
    background-color: #D13026;
    text-align: center;
    padding: 10px 0;
    color: #fff;
    font-family: 'Bauer Bodoni Std', serif;
}

.sa-section-20 a {
    color: #fff;
}

.sa-section-21 {
    background-image: url('img/webp/brochure-stella-alpina.webp');
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    padding-top: 200px;
    padding-bottom: 150px;
}

.sa-section-21 h2 {
    font-family: 'Bodoni 72';
    font-style: normal;
    font-size: 12rem;
    line-height: .5;
    margin-top: 100px;
    margin-bottom: 100px;
}

.sa-section-21 h2 span {
    display: inline-block;
    font-style: italic;
    font-size: 6rem;
    line-height: 1.2;
    margin-right: 25px;
}

.sa-section-21 form {
    position: relative;
}

.sa-section-21 form p {
    margin: 0;
}

.sa-section-21 form a {
    color: #fff;
}

p.sa-section-21-privacy {
    margin: 0;
    margin-top: -15px;
}

.sa-cf7-input-2-text {
    width: 100%;
    height: 50px;   
    text-align: center;
    padding: 0 60px 0 15px;
    border: 0;
}

.sa-cf7-submit-2 {
    position: absolute;
    right: 2px;
    top: 2px;
    height: 46px;
    width: 46px;
    background-color: #D13026;
    color: #fff;
    border: 0;
    z-index: 2;
}

/* SA - BLEED COLUMN UTILITY
   For a real Bootstrap `.col-lg-*` that must keep its natural left edge (set
   by the grid, e.g. right after a text column) but extend its right edge
   past the `.container`'s own boundary out to the true viewport edge.
   `--sa-col-fraction` should match the column's own `.col-lg-*` width (e.g.
   66.6667% for col-lg-8, 50% for col-lg-6) — both `100%` below resolve
   against the column's real rendered containing block (the row/container),
   not a hardcoded pixel value, so this works unchanged at every breakpoint
   and keeps tracking Bootstrap's own container widths if they ever change. */
@media (min-width: 992px) {
    .sa-bleed-col {
        /* +16px: `100vw` includes the scrollbar, the `%` terms don't, so the
           formula alone lands a few px short of the true edge. This safety
           margin closes that gap; the small harmless excess is clipped by
           `overflow-x: hidden` on body/html above. */
        width: calc(var(--sa-col-fraction, 66.6667%) + (100vw - 100%) / 2 + 16px);
    }
}

/* SA - GALLERY COMPONENT */
.sa-gallery {
    position: relative;
}

.sa-gallery__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Gallery 10 only: the [+] sits exactly centered instead of pushed to the
   right edge, with the label positioned a fixed 150px to its left —
   absolute positioning rather than gap/justify-content so the button's
   own center lands on the header's true center regardless of the label's
   text width. */
#gallery-10 .sa-gallery__header {
    position: relative;
    justify-content: center;
}

#gallery-10 .sa-gallery__header .sa-gallery__expand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#gallery-10 .sa-gallery__header .sa-gallery__label {
    position: absolute;
    right: calc(50% + 150px);
}

.sa-gallery__label {
    display: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sa-gallery__expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px 8px;
    font: inherit;
    cursor: pointer;
}

.sa-gallery__expand-wrap--standalone {
    display: flex;
    margin: 0 auto 20px;
}

.sa-gallery__expand:focus-visible,
.sa-gallery__arrow:focus-visible,
.sa-gallery__trigger:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* White, not black: these controls sit on the lightbox's dark overlay,
   where a black outline would be nearly invisible for keyboard users. */
.sa-lightbox__close:focus-visible,
.sa-lightbox__arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.sa-gallery__viewport {
    overflow: hidden;
}

.sa-gallery__slide {
    width: auto;
    height: auto;
    margin-right: 10px;
}

/* Gallery 7 only: extra breathing room between the text column and the
   first image, on top of the usual inter-slide gap. */
#gallery-7 .sa-gallery__slide:first-child {
    margin-left: 50px;
}

/* Keeps [+] aligned with the images' new start position above, now that
   .sa-gallery__label is hidden and no longer holds the header's
   justify-content: space-between over to the left on its own. */
#gallery-7 .sa-gallery__header {
    margin-left: 50px;
}

.sa-gallery__trigger {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    cursor: pointer;
}

/* Fixed height, auto width: each image keeps its own natural proportions
   instead of being cropped to a shared ratio, so slide widths (and therefore
   where a slide ends up cut at the edge of the gallery) follow from the
   actual images in the set rather than being a fixed, designed value. */
.sa-gallery__trigger img {
    display: block;
    width: auto;
    height: 350px;
}

@media only screen and (max-width: 767px) {
    .sa-gallery__trigger img {
        height: 220px;
    }
}

.sa-gallery__nav {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* Full-viewport galleries span the whole window, so their arrows need to
   sit well clear of the true left/right edges instead of touching them. */
@media only screen and (min-width: 768px) {
    .sa-gallery--full-viewport .sa-gallery__nav {
        padding-left: 200px;
        padding-right: 200px;
    }

    /* Partial-right galleries (7, 12): the prev arrow sits at the
       component's own left edge (right after the text column) and the
       nav/header rows bleed to the true right edge — both were flush
       enough to look clipped. 50px keeps the prev arrow and the [+]
       button clear of whichever edge they're each next to. */
    .sa-gallery--partial-right .sa-gallery__nav {
        padding-right: 50px;
    }

    .sa-gallery--partial-right .sa-gallery__header {
        padding-right: 50px;
    }
}

.sa-gallery__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: none;
    background: none;
    font-size: 1.8rem;
    font-weight: 100;
    line-height: 1;
    cursor: pointer;
}

.sa-gallery__arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

/* Variant: full-viewport (Gallery 5, 10) */
.sa-gallery--full-viewport {
    width: 100%;
}

/* If this variant is ever placed inside a `.container`, add a bleed rule here
   scoped to that context (e.g. `.container .sa-gallery--full-viewport`) rather
   than using 100vw: with a page this tall the vertical scrollbar is always
   present, and 100vw includes its width, which overflows the real viewport
   and triggers an unwanted horizontal scrollbar. */

/* Variant: partial-right (Gallery 7, 12) */
/* Slide width/gap are shared rules above (auto width, 10px gap) — nothing
   variant-specific needed here, only the outer positioning differs. */

/* SA - LIGHTBOX */
.sa-lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
}

.sa-lightbox[hidden] {
    display: none;
}

body.sa-lightbox-open {
    overflow: hidden;
}

.sa-lightbox__stage {
    max-width: 90vw;
    max-height: 85vh;
}

.sa-lightbox__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 85vh;
    margin: 0 auto;
}

.sa-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    background: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.sa-lightbox__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}

.sa-lightbox__arrow--prev {
    left: 20px;
}

.sa-lightbox__arrow--next {
    right: 20px;
}

/* 404 */
.sa-container-404 {
    padding-top: 150px;
    padding-bottom: 150px;
}

.sa-container-404 h2,
.sa-container-404 h3 {
    font-size: 1.5rem;
}

/* FOOTER */
.site-footer {
    position: relative;
    background-color: #545454;
    padding-top: 50px;
    padding-bottom: 50px;
    z-index: 12;
}

.sa-footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-footer-logo img {
    height: 40px;
    width: auto;
}

.sa-copy p {
    margin: 0;
}

.sa-open-banner-cookies {
    display: none;
}

/* MOBILE */
@media only screen and (max-width: 1199px) {

    img.sa-logo-2-header {
        left: 15px;
        top: 22px;
    }

    nav#site-navigation,
    .sa-nav-line {
        display: none;
    }

    .sa-mobile-menu-trigger {
        display: block;
        position: absolute;
        left: 15px;
        top: 65px;
        background: none;
        border: none;
        padding: 0;
        font-family: 'Inter', sans-serif;
        font-size: .8rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #000;
        cursor: pointer;
        z-index: 3;
    }

    .sa-mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .4);
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s ease;
        z-index: 9998;
    }

    .sa-mobile-menu-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    .sa-mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 60%;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        padding: 80px 40px 40px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .35s ease;
        z-index: 9999;
    }

    .sa-mobile-menu.is-open {
        transform: translateX(0);
    }

    .sa-mobile-menu-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 2rem;
        line-height: 1;
        color: #000;
        cursor: pointer;
    }

    .sa-mobile-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .sa-mobile-menu ul li {
        margin: 0 0 20px;
    }

    /* Same WPML language switcher as the desktop nav — set apart with
       extra top spacing instead of the usual 20px bottom margin. */
    .sa-mobile-menu ul li.sa-nav-lang-item {
        margin-top: 25px;
    }

    .sa-mobile-menu ul li a {
        font-size: 1.1rem;
        color: #000;
    }

    img.sa-logo-header {
        height: 30px;
        position: absolute;
        right: 15px;
        top: 32px;
    }

}

@media only screen and (max-width: 992px) {

    /* Below the lg breakpoint, drop the extra +75px/+25px edge inset and
       fall back to Bootstrap's own container gutter — the fixed desktop
       insets eat too much of a narrow viewport's width. */
    .container,
    .sa-container-tight {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    .site-header {
        position: relative;
        display: flex;
        height: 195px;
        padding-right: 0;
        justify-content: normal;
        flex-direction: column;
        align-items: flex-end;
    }

    .sa-mobile-logo-menu {
        display: block;
        width: 90%;
        border-top: 1px solid #757575;
        margin: 0 auto;
    }

    /* Sticky state, toggled by custom-scripts.js once the page has
       scrolled past a threshold — kept fixed here, not on the media
       query rule above, so .site-header only pins to the viewport once
       the class is actually present. Same elements as the static state
       above (logo included), just pinned and scaled down to a slimmer
       bar instead of in-flow at full size. */
    .site-header.is-sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 140px;
        z-index: 500;
        background-color: #fff;
    }

    .site-header.is-sticky img.sa-logo-header {
        height: 25px;
        margin: 15px 5% 15px 0;
    }

    .site-header.is-sticky img.sa-logo-3-header {
        height: 70px;
        margin: 0 auto;
    }

    .site-header.is-sticky img.sa-logo-2-header {
        top: 72px;
    }

    .site-header.is-sticky .sa-mobile-menu-trigger {
        top: 110px;
    }

    img.sa-logo-header {
        height: 30px;
        position: relative;
        right: auto;
        top: auto;
        margin: 25px 5% 25px 0;
    }

    img.sa-logo-2-header {
        height: 30px;
        left: 19px;
        top: 110px;
    }    

    .sa-mobile-menu-trigger {
        top: 150px;
    }    

    img.sa-logo-3-header {
        display: block;
        height: 80px;
        position: relative;
        left: auto;
        transform: none;
        margin: 10px auto;
    } 

    .sa-mobile-menu {
        width: 75%;
        padding: 80px 20px 40px;
    }    

    /* Desktop sizes the hero video/poster from the section's own
       (near-full-viewport) height, with width following its aspect ratio
       — on a tall/narrow phone viewport that produces a video several
       times wider than the screen. Below this breakpoint, size the
       section from the video's width instead: aspect-ratio replaces the
       100vh-based height, and the video/poster fill that 16:9 box exactly
       via object-fit instead of being absolutely centered and cropped. */
    .sa-section-hero {
        height: auto;
        padding-bottom: 40px;
    }

    .sa-hero-wrap {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .sa-hero-video,
    .sa-hero-poster {
        width: 100%;
        height: 100%;
        left: 0;
        transform: none;
        object-fit: cover;
    }

    .sa-hero-controls {
        bottom: -36px;
        right: 20px;
        gap: 5px;
    }    

    .sa-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }    

    .sa-section-2 {
        position: relative;
        height: 50%;
    }     

    .sa-section-2-text {
        width: 100%;
        padding: 0 5px;
    }

    .sa-section-2-text img {
        width: 100%;
    }

    .sa-section-2-text p {
        font-size: .9rem;
        margin-top: -19px;
    }        

    .sa-section-3 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .sa-section-3-images {
        padding-left: 0;
        padding-top: 30px;
    }    

    .sa-section-4 {
        height: 70%;
    }    

    .sa-section-4 h2 {
        font-size: 3.5rem;
    }    

    .sa-section-6 {
        padding-top: 50px;
        margin-bottom: 50px;
    }

    .sa-section-6 h2 {
        font-size: 4rem;
        margin-bottom: 50px;
    }

    .sa-section-6 h2 span {
        font-size: 2rem;
    }    

    #gallery-7 .sa-gallery__header {
        margin-left: 0;
    }

    #gallery-7 .sa-gallery__slide:first-child {
        margin-left: 0;
    }    

    .sa-section-8 {
        margin-top: 25px;
    }

    .sa-section-8-text {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        padding: 0 15px;
    }  
    
    .sa-section-8-text h2 {
        color: #000;
        font-size: 2.5rem;
        margin-bottom: 15px;
    }  
    
    .sa-section-9-img {
        padding-right: 50px;
        margin-top: -30px;
    }    

    .sa-section-9 img {
        width: 400px;
    }

    .sa-section-9 img {
        width: 100%;
    }  
    
    .sa-section-9-img-2 i {
        left: 25px;
        bottom: 20px;
        font-size: 3rem;
    }    

    .sa-section-11 a {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 50px;
    }    

    .sa-section-12 {
        margin-top: 50px;
    }

    .sa-section-12-text {
        position: relative;
        right: auto;
        top: auto;
        max-width: 100%;
    }

    img.sa-section-12-fiore {
        display: none;
    }    

    .sa-section-16 {
        padding-top: 75px;
        padding-bottom: 50px;
    }

    .sa-section-16-image h2 {
        left: 30px;
        bottom: 25px;
    }

    .sa-section-17-text {
        padding-right: 0;
    }    

    .sa-section-21 {
        background-position: center;
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .sa-section-21 h2 {
        font-size: 5.5rem;
        margin-top: 75px;
        margin-bottom: 100px;
    }

    .sa-section-21 h2 span {
        font-size: 3.5rem;
        line-height: 1.2;
        margin-right: 25px;
    }

    .sa-open-banner-cookies {
        display: block;
        position: absolute;
        left: 15px;
        bottom: 10px;
    }

    .sa-open-banner-cookies a {
        font-size: .9rem;
        color: #fff;
        text-decoration: none;
    }


}

/* Below Bootstrap's own `sm` breakpoint (576px; written as 575.98px per
   Bootstrap's own convention, to stop one pixel short of the next
   min-width query) the container gets a fixed 24px edge inset instead of
   inheriting the calc()-based gutter above. */
@media (max-width: 575.98px) {

    .container {
        padding-left: 24px;
        padding-right: 24px;
    }

}