/* Custom overrides to match production (agricolavero.com) pixel-perfect.
 * Helix3 → Helix Ultimate visual parity layer. */

/* ===== Typography (prod body = 14px / Bootstrap 4 baseline) ===== */
html body { font-size: 14px !important; line-height: 24px !important; color: #212529 !important; margin: 0 !important; }
#sp-header, #sp-main-body { color: #212529; font-size: 14px; line-height: 24px; }

/* Bootstrap container padding matches prod (Helix3 uses 12px, HU uses 15px) */
#sp-header .container,
#sp-main-body .container,
#sp-footer .container { padding-left: 12px; padding-right: 12px; }

/* #sp-component wrapper: prod uses 12px padding, HU uses 15px — match prod */
#sp-component { padding-left: 12px !important; padding-right: 12px !important; }
/* HU main-body has no inner .container wrapper (unlike prod). Force the inner .row gutters to 12px to match prod */
#sp-main-body > .row { margin-left: -12px; margin-right: -12px; --bs-gutter-x: 1.5rem; }
/* Hide empty #sp-title section (HU renders it even when no Page Title module) */
#sp-page-title:empty,
#sp-page-title:has(#sp-title > .sp-column:empty) { display: none; }

/* ===== Primary brand color: Verde Agricola Véro ===== */
#sp-header a:hover,
#sp-main-body a:hover,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a { color: #295947; }
#sp-main-body a { color: #212529; }

/* ===== Footer (prod: padding 20px 0, height ~64px, text centered, no border) ===== */
#sp-footer { background-color: #295947; color: #ffffff; padding: 20px 0 !important; text-align: center; }
#sp-footer a { color: #ffffff; }
#sp-footer a:hover { color: #cfe3d8; }
/* HU default adds `padding: 30px 0` + `border-top: 1px solid rgba(255,255,255,.1)` to
 * .container-inner, and `text-align: right` to #sp-footer2 — override all three to
 * match prod Helix3 (template.css L1877-1880: centered, no separator line). */
#sp-footer .container-inner { padding: 0; border-top: 0; }
#sp-footer, #sp-footer > .container > .container-inner, #sp-footer #sp-footer1, #sp-footer #sp-footer2 { text-align: center; }
#sp-footer .sp-module { margin: 0; padding: 0; }

/* ===== Hide empty top-bar (prod: not rendered when no modules assigned) ===== */
#sp-top-bar:not(:has(.sp-module)) { display: none; }

/* ===== Mobile offcanvas — direct port of prod Helix3 template.css L194-325 =====
 * The HU offcanvas layout template (canvas.php) has been replaced with a clean
 * one that emits the exact prod markup, so we don't need !important workarounds
 * for HU extra wrappers anymore.
 */
.offcanvas-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.2);
}
.offcanvas-menu {
    width: 320px !important;
    height: 100%;
    /* Solid dark grey (no alpha) so the panel never shows page content through
     * it. Matches the perceived grey of PROD's rgba(0,0,0,0.7) + overlay
     * composition. */
    background-color: #333 !important;
    color: #fff;
    position: fixed;
    top: 0;
    right: 0 !important;
    left: auto !important;
    transform: translateX(320px);
    visibility: hidden;
    overflow: inherit;
    transition: 0.5s;
    z-index: 10000;
}
body.offcanvas-active .offcanvas-menu { transform: translateX(0); visibility: visible; }

/* Close X: 25x25 circle with 1px white border (prod) */
.offcanvas-menu .close-offcanvas {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    border-radius: 100%;
    width: 25px;
    height: 25px;
    line-height: 0.5;
    text-align: center;
    font-size: 16px;
    border: 1px solid #fff;
    color: #fff;
    padding-top: 3px;
    text-decoration: none;
}
.offcanvas-menu .close-offcanvas:hover { color: inherit; }

/* offcanvas-inner: HU default adds 25px padding — prod has 0 */
.offcanvas-menu .offcanvas-inner { padding: 0 !important; margin: 0 !important; }
/* sp-module inner padding 30px (prod) */
.offcanvas-menu .offcanvas-inner > .sp-module { margin: 0; padding: 30px; width: auto; }
.offcanvas-menu .offcanvas-inner > .sp-module .sp-module-title {
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    font-weight: 400;
    margin: 0 0 20px;
}

/* Menu items rows. HU wraps mod_menu as `ul.mod-menu.mod-list.menu` while prod
 * emits `ul.nav.menu` — we target the common `.menu` class with !important to
 * beat Bootstrap's flex/padding defaults from HU's template.css. */
.offcanvas-menu .sp-module ul.menu {
    display: block !important;
    margin: 0 -30px !important;
    padding: 0 !important;
    list-style: none !important;
}
.offcanvas-menu .sp-module ul.menu > li {
    border: 0 !important;
    position: relative !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    width: auto !important;
    display: block !important;
}
.offcanvas-menu .sp-module ul.menu > li > a,
.offcanvas-menu .sp-module ul.menu > li > span {
    display: block !important;
    transition: 300ms !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    opacity: 1 !important;
    position: static !important;
    white-space: normal !important;
}
.offcanvas-menu .sp-module ul.menu > li:hover > a,
.offcanvas-menu .sp-module ul.menu > li.active > a {
    background: rgba(0, 0, 0, 0.15) !important;
    color: #fff !important;
}

/* Chevron "›" before each menu item (FA \f105 fa-angle-right, like prod) */
.offcanvas-menu .sp-module ul.menu > li > a::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 700;
    margin-right: 10px;
    color: #fff;
    display: inline;
}

/* ===== Hamburger icon: Font Awesome fa-bars come nel prod Helix3
 *   <i class="fa fa-bars" aria-hidden="true" title="Helix3 Megamenu Options"></i>
 * HU emette invece un `.burger-icon` con 3 <span> animati → li nascondiamo
 * e renderizziamo il glifo FA (unicode \f0c9) via ::before. */
/* Toggler: nessun outline/box-shadow di default in qualsiasi stato (idle,
 * hover, click, focus programmatico). Riappare solo per :focus-visible
 * (navigazione da tastiera) per garantire accessibilità. */
#offcanvas-toggler,
.offcanvas-toggler-secondary,
#offcanvas-toggler .burger-icon,
.offcanvas-toggler-secondary .burger-icon {
    outline: 0 none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
/* Focus ring brand-coerente solo per utenti da tastiera */
#offcanvas-toggler:focus-visible,
.offcanvas-toggler-secondary:focus-visible {
    outline: 2px solid #295947 !important;
    outline-offset: 2px;
    border-radius: 2px;
}
#offcanvas-toggler .burger-icon,
.offcanvas-toggler-secondary .burger-icon {
    width: auto !important;
    height: auto !important;
    display: inline-block;
    color: #000;
    font-size: 20px;
    line-height: 1;
}
#offcanvas-toggler .burger-icon > span,
.offcanvas-toggler-secondary .burger-icon > span { display: none !important; }
#offcanvas-toggler .burger-icon::before,
.offcanvas-toggler-secondary .burger-icon::before {
    content: "\f0c9";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-style: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}

/* Sticky-header placeholder: 0 height when not actually stuck */
.sticky-header-placeholder:not(.sticky-active) { height: 0 !important; min-height: 0 !important; }

/* ===== Sticky header sempre attivo (bypassa la soglia JS di 100px).
 * Il JS di HU attiva `.header-sticky` solo dopo `scrollTop >= 100`, quindi il
 * click su un'ancora interna (#latteasina) scrollava l'header fuori viewport
 * prima che lo sticky si innescasse. Con `position: sticky` nativo l'header
 * resta ancorato al top senza dipendere dal JS. */
#sp-header {
    position: sticky;
    top: 0;
    z-index: 100;
}
/* scroll-padding-top: quando si scrolla a un'ancora, il browser lascia 90px
 * in cima (l'altezza dell'header) così il target non finisce dietro l'header */
html { scroll-padding-top: 90px; }
@media (max-width: 991.98px) {
    html { scroll-padding-top: 70px; }
}

/* ===== Container max-width 1320px, centered (prod uses 1320 always on desktop) ===== */
@media (min-width: 1200px) {
    #sp-header .container,
    #sp-main-body .container,
    #sp-footer .container {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
    }
    .sppb-row-container { max-width: 1320px; }
}

/* ===== Header box-shadow (prod: Helix3 template.css L1342) ===== */
#sp-header {
    background: #ffffff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}

/* ===== Header layout (prod: logo col-lg-3 330px, menu col-lg-9 990px @1440vw) ===== */
@media (min-width: 992px) {
    #sp-header { height: 90px; padding: 0; }
    #sp-header .container, #sp-header .container-inner, #sp-header .row { height: 100%; }
    #sp-header .row { flex-wrap: nowrap; }
    /* HU injects a <div.col-auto> wrapper for the mobile burger as the first child
     * of .row — hide on desktop so logo+menu take the full row with no wrap. */
    #sp-header .row > .col-auto:first-child:has(.burger-icon) { display: none !important; }
    #sp-logo {
        flex: 0 0 25%;
        max-width: 25%;
        width: 25%;
        height: 90px;
        display: flex;
        align-items: center;
    }
    #sp-menu {
        flex: 0 0 75%;
        max-width: 75%;
        width: 75%;
        height: 90px;
    }
    /* Logo image at prod height (52px) and no auto-shrink */
    #sp-logo .logo { height: 90px; display: flex; align-items: center; }
    #sp-logo .logo img,
    #sp-logo .logo-image,
    #sp-logo .sp-default-logo { height: 52px !important; max-height: 52px; width: auto; }
    /* Prod uses 12px column padding (HU uses 15px) */
    #sp-logo, #sp-menu { padding-left: 12px; padding-right: 12px; }
    /* Remove inner sp-column padding in menu area so mega-menu can extend to the right edge */
    #sp-menu .sp-column, #sp-menu .sp-megamenu-wrapper { padding: 0; margin: 0; }
    /* Mega-menu prod (Helix3 template.css L61):
     *   padding: 0 15px; line-height: 90px; font-size: 12px;
     *   text-transform: uppercase; letter-spacing: 1px; color: #000;
     */
    .sp-megamenu-parent { margin: 0; height: 90px; }
    .sp-megamenu-parent > li { padding: 0; display: inline-block; }
    .sp-megamenu-parent > li > a,
    .sp-megamenu-parent > li > span,
    .sp-megamenu-parent > li:last-child > a,
    .sp-megamenu-parent > li:last-child > span {
        display: inline-block;
        padding: 0 15px !important;
        line-height: 90px;
        height: 90px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #000;
        margin: 0;
    }
    /* HU's mobile burger must not show on desktop */
    #sp-header .burger-icon { display: none !important; }
    /* Empty .header-modules injected by HU has margin-left:20px — pulls menu left.
     * Hide when it contains no actual module (only whitespace). */
    #sp-header .header-modules:not(:has(*)) { display: none !important; }
}

/* ===== Mobile keeps HU behavior but enforces prod colors ===== */
@media (max-width: 991.98px) {
    #sp-logo .logo img,
    #sp-logo .logo-image,
    #sp-logo .logo-image-phone { height: 52px !important; max-height: 52px; width: auto; }
}