/* ==========================================================================
   BrewCalc · sito pubblico
   Personalizzazioni sopra il CSS di Spike (assets/css/spike.css)
   ========================================================================== */

/* Font in locale ---------------------------------------------------------- */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-800-normal.woff2) format("woff2"); }

/* Token del brand (colori del logo) --------------------------------------- */
:root {
  --bc-amber: #F9A11B;
  --bc-amber-text: #8F5400;          /* ambra leggibile come testo su bianco (≥ 5,5:1) */
  --bc-amber-subtle: #FEF3E2;
  --bc-slate: #2B3A44;
  --bc-slate-2: #3A4C58;
  --bc-slate-subtle: #E9EEF1;
  --bc-header-h: 80px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bc-header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bs-body-bg); }
.no-js [data-aos] { opacity: 1 !important; transform: none !important; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--bs-white); padding: 8px 16px; border-radius: 8px; }
.skip-link:focus { left: 8px; }

/* Header ------------------------------------------------------------------ */
.header .navbar { min-height: var(--bc-header-h); }
.site-logo { height: 40px; width: auto; }
.header .navbar .navbar-nav .nav-item .nav-link { padding: 5px 14px; font-size: 15px; }
.header .navbar .navbar-nav .nav-link.active,
.header .navbar .navbar-nav .nav-link:hover { color: var(--bs-primary); }
.modernize-lp-offcanvas .nav-link.active { color: var(--bs-primary) !important; }

/* Hero -------------------------------------------------------------------- */
.hero { padding-top: calc(var(--bc-header-h) + 3rem); padding-bottom: 3rem; position: relative; overflow: hidden; }
.hero h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); line-height: 1.15; letter-spacing: -0.02em; }
.hero .lead { font-size: 1.15rem; }
.hero--home { background: linear-gradient(180deg, var(--bs-body-bg) 0%, #F4F7FA 100%); }
.hero--hb { background: linear-gradient(160deg, var(--bc-amber-subtle) 0%, #FFFDF9 60%); }
.hero--biz { background: linear-gradient(160deg, var(--bc-slate) 0%, var(--bc-slate-2) 100%); color: #DCE3E8; }
.hero--biz h1, .hero--biz .text-dark { color: #fff !important; }
.hero--biz .lead { color: #DCE3E8; }
.hero--page { background: #F4F7FA; padding-bottom: 2.5rem; }
.hero--page h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); }

.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .875rem; padding: .35rem .9rem; border-radius: 999px; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.eyebrow--amber { background: #FDE7C2; color: var(--bc-amber-text); }
.eyebrow--slate { background: rgba(255,255,255,.12); color: #fff; }
.trust-line { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .925rem; }
.trust-line i { color: var(--bs-success); }
.hero--biz .trust-line i { color: var(--bc-amber); }

/* Bivio homebrewer / azienda ---------------------------------------------- */
.path-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 2rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--bs-border-color); box-shadow: 0 10px 30px rgba(17, 28, 45, .06); transition: transform .25s ease, box-shadow .25s ease; }
.path-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17, 28, 45, .12); }
.path-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; border-radius: 1.25rem 1.25rem 0 0; }
.path-card--hb::before { background: var(--bc-amber); }
.path-card--biz { background: var(--bc-slate); border-color: var(--bc-slate); color: #DCE3E8; }
.path-card--biz::before { background: var(--bs-primary); }
.path-card--biz h2, .path-card--biz h3 { color: #fff; }
.path-icon { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 1.25rem; }
.path-card--hb .path-icon { background: var(--bc-amber-subtle); color: var(--bc-amber-text); }
.path-card--biz .path-icon { background: rgba(255,255,255,.1); color: var(--bc-amber); }
.path-card .check-list { margin: 1.25rem 0 1.75rem !important; }
.path-card .path-actions { margin-top: auto; }
.path-card--biz .check-list i { color: var(--bc-amber) !important; }
.btn-amber { --bs-btn-bg: var(--bc-amber); --bs-btn-border-color: var(--bc-amber); --bs-btn-color: #1F1A12; --bs-btn-hover-bg: #E8920F; --bs-btn-hover-border-color: #E8920F; --bs-btn-hover-color: #1F1A12; --bs-btn-active-bg: #D9870C; --bs-btn-active-color: #1F1A12; font-weight: 600; }
.btn-outline-slate { --bs-btn-color: var(--bc-slate); --bs-btn-border-color: var(--bc-slate); --bs-btn-hover-bg: var(--bc-slate); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--bc-slate); }

/* Liste con spunta --------------------------------------------------------- */
.check-list li { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .6rem; }
.check-list li:last-child { margin-bottom: 0; }
.check-list i { font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; }

/* Segnaposto screenshot ---------------------------------------------------- */
.shot { margin: 0; width: 100%; border-radius: 1rem; border: 2px dashed #B9C6D2; background: repeating-linear-gradient(45deg, #F6F9FB, #F6F9FB 12px, #EEF3F7 12px, #EEF3F7 24px); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 20px 45px rgba(17, 28, 45, .08); }
.shot-inner { text-align: center; padding: 1.5rem; color: #5A6A85; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.shot-inner i { font-size: 2.5rem; color: #8FA0B5; }
.shot-label { font-weight: 700; color: var(--bc-slate); }
.shot-hint { font-size: .85rem; max-width: 34ch; }
.hero--biz .shot { border-color: rgba(255,255,255,.35); background: repeating-linear-gradient(45deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 12px, rgba(255,255,255,.1) 12px, rgba(255,255,255,.1) 24px); }
.hero--biz .shot-inner, .hero--biz .shot-inner i, .hero--biz .shot-label { color: #fff; }
.shot--img { display: block; border: 1px solid #E3E9EF; background: #fff; }
.shot--img img { display: block; width: 100%; height: auto; }
.hero--biz .shot--img { border-color: rgba(255,255,255,.25); background: #fff; }

/* Sezioni ------------------------------------------------------------------ */
.section { padding: 4.5rem 0; }
.section--alt { background: #F4F7FA; }
.section--amber { background: var(--bc-amber-subtle); }
.section-title { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.section-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--bs-primary); margin-bottom: .75rem; }
.section-kicker--amber { color: var(--bc-amber-text); }
.section-intro { font-size: 1.1rem; max-width: 62ch; }

.value-card { height: 100%; padding: 1.75rem; border-radius: 1rem; background: #fff; border: 1px solid var(--bs-border-color); }
/* Altezza piena solo se la card è da sola nella colonna: impilata sotto altri blocchi sforerebbe sul footer */
* + .value-card { height: auto; }
.value-card .value-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 1rem; }
.value-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
.value-card p { margin-bottom: 0; }

.feature-row + .feature-row { margin-top: 5rem; }
.feature-row h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem); font-weight: 800; line-height: 1.25; }
.feature-row .feature-tag { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; margin-bottom: .75rem; }

.mini-card { height: 100%; padding: 1.5rem; border-radius: 1rem; background: #fff; border: 1px solid var(--bs-border-color); }
.mini-card i { font-size: 1.75rem; }
.mini-card h3 { font-size: 1.05rem; font-weight: 700; margin: .75rem 0 .35rem; }
.mini-card p { margin: 0; font-size: .95rem; }

.badge-soon { font-size: .7rem; font-weight: 700; padding: .25rem .5rem; border-radius: 999px; background: var(--bc-amber-subtle); color: var(--bc-amber-text); vertical-align: middle; }

/* Passi ---------------------------------------------------------------------*/
.step-num { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--bs-primary); color: #fff; margin-bottom: 1rem; }

/* Tabella piani ------------------------------------------------------------ */
/* Card dei piani (grafica "Pricing" di Spike) */
.pricing[data-billing="monthly"] .price-yearly,
.pricing[data-billing="yearly"] .price-monthly { display: none; }
.no-js .billing-toggle { display: none !important; }
.billing-toggle .btn { border: 0; font-weight: 600; color: var(--bs-body-color); min-height: 44px; }
.billing-toggle .btn-check:checked + .btn { background: var(--bs-primary); color: var(--bs-white); }
.billing-toggle .btn-check:checked + .btn .badge { background: var(--bs-white) !important; }
.billing-toggle .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .25rem rgba(0, 133, 219, .35); }
.plan-card { background: var(--bs-white); transition: transform .2s ease, box-shadow .2s ease; }
.plan-card:hover { transform: translateY(-4px); }
.plan-card--homebrewer { border-color: var(--bc-amber) !important; border-width: 2px !important; }
.plan-card--homebrewer .plan-price .text-primary { color: var(--bc-amber-text) !important; }
.plan-card--business { border-color: var(--bs-primary) !important; border-width: 2px !important; }
.plan-card .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.plans-compare-toggle .ti { transition: transform .2s ease; display: inline-block; }
.plans-compare-toggle[aria-expanded="true"] .ti { transform: rotate(180deg); }
.no-js .plans-compare { display: block; }
.no-js .plans-compare-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .plan-card, .plans-compare-toggle .ti { transition: none; } .plan-card:hover { transform: none; } }

.plans-table { min-width: 640px; }
.plans-table thead th { font-size: 1.05rem; vertical-align: bottom; border-bottom-width: 2px; }
.plans-table th[scope="row"] { font-weight: 500; }
.plans-table td, .plans-table th { padding: .85rem 1rem; }
.plans-table td { text-align: center; }
.plans-table .plan-head small { display: block; font-weight: 400; color: var(--bs-secondary-color); font-size: .8rem; }
.plans-table .col-biz { background: rgba(0, 133, 219, .05); }
.plans-table .group-row th { background: #F4F7FA; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-weight: 700; color: #5A6A85; }
.ic-yes { color: var(--bs-success); font-size: 1.25rem; }
.ic-no { color: #A9B4C2; font-size: 1.1rem; }

/* Segmenti azienda --------------------------------------------------------- */
.segment-card { height: 100%; padding: 1.75rem; border-radius: 1rem; border: 1px solid var(--bs-border-color); background: #fff; }
.segment-card h3 { font-size: 1.2rem; font-weight: 800; }

/* FAQ ---------------------------------------------------------------------- */
.faq-accordion .accordion-item { border: 1px solid var(--bs-border-color); border-radius: .75rem !important; margin-bottom: .75rem; overflow: hidden; }
.faq-accordion .accordion-button { background: #fff; color: var(--bc-slate); box-shadow: none; padding: 1.1rem 1.25rem; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.faq-accordion .accordion-body { padding: 1rem 1.25rem 1.25rem; line-height: 1.7; }
.faq-group-title { font-size: 1.35rem; font-weight: 800; margin: 2.5rem 0 1rem; }

/* Fascia CTA ------------------------------------------------------------------ */
.cta-band--dark .cta-band-inner { background: radial-gradient(120% 140% at 100% 0%, #0A4E80 0%, var(--bc-slate) 55%); }
.cta-band--amber .cta-band-inner { background: linear-gradient(135deg, #C97A06 0%, #8F5400 100%); }
.cta-band .cta-text { color: rgba(255,255,255,.85); }

/* Breadcrumb ----------------------------------------------------------------- */
.site-breadcrumb { font-size: .875rem; }
.site-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero--biz .site-breadcrumb, .hero--biz .breadcrumb-item.active, .hero--biz .breadcrumb-item + .breadcrumb-item::before { color: #C9D2DA; }

/* Contenuti testuali (privacy, cookie, chi siamo) ---------------------------- */
.prose { max-width: 75ch; font-size: 1.02rem; line-height: 1.75; }
.prose h2 { font-size: 1.4rem; font-weight: 800; margin: 2.25rem 0 .75rem; }
.prose h3 { font-size: 1.15rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.prose ul { padding-left: 1.25rem; }
.prose a { word-break: break-word; }
/* Avvertenza delle guide (contenuti normativi da verificare con il consulente) */
/* Colonna laterale delle guide: riquadri ad altezza naturale, fissi durante lo scorrimento su desktop */
.guide-aside .value-card { height: auto; }
@media (min-width: 992px) { .guide-aside { position: sticky; top: 6rem; } }
.guide-note { padding: .9rem 1.1rem; border-radius: .75rem; background: #FFF6E5; border: 1px solid #F5D9A8; color: #6B4E16; font-size: .92rem; line-height: 1.6; }

/* Form contatti ---------------------------------------------------------------- */
.contact-card { border-radius: 1rem; border: 1px solid var(--bs-border-color); background: #fff; padding: 2rem; }
.contact-info li { display: flex; gap: .85rem; margin-bottom: 1.25rem; }
.contact-info i { font-size: 1.4rem; color: var(--bs-primary); }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Footer ------------------------------------------------------------------------ */
.site-footer { background: var(--bc-slate); color: #C9D2DA; }
.site-footer a { color: #E6ECF0; text-decoration: none; }
.site-footer a:hover { color: var(--bc-amber); text-decoration: underline; }
.footer-text { color: #C9D2DA; }
.footer-title { color: #fff; font-weight: 700; margin-bottom: .9rem; }
.footer-links li { margin-bottom: .55rem; }
.footer-sep { border-color: rgba(255,255,255,.15); opacity: 1; }
.footer-social { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255,255,255,.1); font-size: 1.25rem; }

/* Focus visibile ------------------------------------------------------------------ */
a:focus-visible, .btn:focus-visible, button:focus-visible, .accordion-button:focus-visible { outline: 3px solid rgba(0, 133, 219, .55); outline-offset: 2px; box-shadow: none; }

@media (max-width: 991.98px) {
  .hero { padding-top: calc(var(--bc-header-h) + 1.5rem); }
  .section { padding: 3.25rem 0; }
  .feature-row + .feature-row { margin-top: 3.5rem; }
}

/* Etichette delle sezioni: testo sempre leggibile, colore solo sull'icona */
.feature-tag { color: var(--bc-slate) !important; }
.feature-tag i { color: var(--bs-primary); font-size: 1.1rem; }
.site-hb .feature-tag i { color: var(--bc-amber-text); }

/* Header trasparente sopra un hero scuro (pagina aziende) */
.logo-on-dark { display: none; }
.site-biz .header:not(.fixed-header) .logo-on-dark { display: inline-block; }
.site-biz .header:not(.fixed-header) .logo-on-light { display: none; }
.site-biz .header:not(.fixed-header) .navbar .navbar-nav .nav-item .nav-link,
.site-biz .header:not(.fixed-header) .btn-link,
.site-biz .header:not(.fixed-header) .navbar-toggler { color: #fff !important; }
.site-biz .header:not(.fixed-header) .navbar .navbar-nav .nav-link.active { color: var(--bc-amber) !important; }
.hero--biz .site-breadcrumb a { color: #fff; }

/* Calcolatori delle guide (assets/js/calc.js): senza JS restano visibili il form e l'avviso */
.calc-card { padding: 1.5rem; border-radius: 1rem; background: #fff; border: 1px solid var(--bs-border-color); box-shadow: 0 10px 30px rgba(43,58,68,.06); }
.calc-card .form-label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.calc-card .form-text { font-size: .8rem; }
.calc-result { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.25rem; border-radius: .75rem; background: #F4F7FA; }
.calc-result > div { flex: 1 1 8rem; }
.calc-result .calc-value { display: block; font-size: 1.6rem; font-weight: 800; color: var(--bs-primary); line-height: 1.2; }
.calc-result .calc-value--sm { font-size: 1.15rem; }
.calc-result .calc-label { display: block; font-size: .8rem; color: var(--bs-secondary-color, #5A6A85); }
.calc-warning:empty { display: none; }
.calc-warning { color: #8A5A00; font-size: .9rem; margin: .75rem 0 0; }
.calc-hop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .75rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; margin-bottom: .5rem; }
@media (min-width: 768px) { .calc-hop { grid-template-columns: 1fr 1fr 1fr 1.3fr 1.1fr auto auto; align-items: end; } }
.calc-hop .hop-ibu { font-weight: 700; white-space: nowrap; padding-bottom: .45rem; }
.calc-noscript { font-size: .9rem; }
[data-calc].is-ready .calc-noscript { display: none; }