/* ═══════════════════════════════════════════════════════════════════
   calc3-page-fixes.css — Fix layout single-calculator + related
   Risolve problemi preesistenti del child theme calc3-quotidiano:
   1) container main edge-to-edge → wrapper newspaper
   2) social share icons (telegram fallback)
   3) sezione calcolatori correlati senza grid/padding
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 0. PREVENZIONE OVERFLOW ORIZZONTALE GLOBALE ─── */
/* Cintura di sicurezza per AdSense ins/iframe e wrapper che si autocalcolano
   con width fissa basata su viewport pre-rotation o pre-resize. */

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

ins.adsbygoogle,
.adsbygoogle,
.calc3-ad-slot,
.calc3-ad-slot ins,
.calc3-ad-slot iframe,
[id^="aswift_"][id$="_host"],
[id^="aswift_"][id$="_host"] > iframe,
[id^="aswift_"][id$="_anchor"] {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Tabelle wide non collidono con viewport */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* WP standard screen-reader-text utility (ripristinato per child theme) */
.screen-reader-text {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  word-wrap: normal !important;
}


/* ─── 1. CONTAINER NEWSPAPER (main.site-main + content wrappers) ─── */

main.site-main {
  max-width: min(100vw, var(--paper-max));
  margin-inline: auto;
  padding-inline: var(--calc3-spacing-md);
  padding-block: var(--calc3-spacing-xl);
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Wrapper interni: si conformano sempre al main, non si estendono */
.calc3-main,
.calc3-container,
.calc3-calculator-page,
.calc3-quick-answer,
.calc3-calculator-container,
.calc3-calculator-main-content,
.calc3-ad-slot,
.calc3-content-block,
.calc3-related-calculators {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Calculator interno: il custom HTML del calcolatore può avere min-width o
   intrinsic content che eccede mobile. Forziamo wrap orizzontale. */
#vintage-scientific-calculator-app-container,
.vsc-calculator-vintage-container,
.calc3-calculator-block,
.calc3-calculator-main {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

/* Il custom_css di ogni calcolatore può avere min-width: 300px su .calculator/
   .results in flex side-by-side. Su mobile l'override min-width:100% del custom
   CSS non basta se il flex container non wrappa. Forziamo wrap + max-width sui
   children per evitare overflow orizzontale interno. */
@media (max-width: 767px) {
  #vintage-scientific-calculator-app-container .container,
  #vintage-scientific-calculator-app-container [class*="-container"],
  .vsc-calculator-vintage-container .container,
  .vsc-calculator-vintage-container [class*="-container"] {
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }

  #vintage-scientific-calculator-app-container .calculator,
  #vintage-scientific-calculator-app-container .results,
  #vintage-scientific-calculator-app-container aside,
  .vsc-calculator-vintage-container .calculator,
  .vsc-calculator-vintage-container .results,
  .vsc-calculator-vintage-container aside {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-basis: 100% !important;
  }
}

@media (min-width: 768px) {
  main.site-main {
    padding-inline: var(--calc3-spacing-xl);
  }
}

@media (min-width: 1024px) {
  main.site-main {
    padding-inline: var(--calc3-spacing-2xl);
  }
}

/* Breadcrumb spacing + rule separator */
.calc3-breadcrumb {
  margin-bottom: var(--calc3-spacing-md);
  padding-block: var(--calc3-spacing-sm);
  border-bottom: var(--rule-hair) solid var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.calc3-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--calc3-spacing-xs);
}

.calc3-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.calc3-breadcrumb__item:not(:last-child)::after {
  content: '/';
  margin-inline-start: var(--calc3-spacing-xs);
  color: var(--ink-faint);
}

.calc3-breadcrumb__item a {
  color: var(--ink-muted);
  text-decoration: none;
}

.calc3-breadcrumb__item a:hover,
.calc3-breadcrumb__item a:focus-visible {
  color: var(--rosso);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ─── 2. TELEGRAM ICON FALLBACK (se font non carica il glifo) ─── */
/* Se l'utente vede ancora un cerchio vuoto, mostriamo "TG" testuale */

.calc3-share-btn--telegram {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0;
}

.calc3-share-btn--telegram i.fab::before {
  font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', sans-serif;
  content: '\f3fe'; /* fa-telegram codepoint */
}

/* Se la font-family non risolve, fallback Unicode plane char */
@supports not (font-family: 'Font Awesome 6 Brands') {
  .calc3-share-btn--telegram i.fab::before {
    font-family: var(--font-mono);
    content: 'TG';
    font-weight: 700;
  }
}


/* ─── 3. SHARE BUTTONS spacing + size ─── */

.calc3-article-share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--calc3-spacing-sm);
  align-items: center;
  padding-block: var(--calc3-spacing-md);
  margin-block: var(--calc3-spacing-lg);
  border-top: var(--rule-hair) solid var(--ink-faint);
  border-bottom: var(--rule-hair) solid var(--ink-faint);
}

.calc3-article-share::before {
  content: 'Condividi';
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin-inline-end: var(--calc3-spacing-sm);
}

/* Mobile: label "Condividi" su riga propria sopra, le 5 icone restano
   allineate su un'unica riga sotto */
@media (max-width: 480px) {
  .calc3-article-share {
    gap: var(--calc3-spacing-xs);
  }
  .calc3-article-share::before {
    flex-basis: 100%;
    margin-inline-end: 0;
    margin-bottom: var(--calc3-spacing-xs);
  }
}

.calc3-share-btn {
  width: var(--calc3-touch-target);
  height: var(--calc3-touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--rule-thin) solid var(--ink);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.08s ease, color 0.08s ease;
}

.calc3-share-btn:focus-visible {
  outline: var(--rule-thin) solid var(--rosso);
  outline-offset: 3px;
}

/* ─── Hover: colore brand del social ─── */
.calc3-share-btn--facebook:hover,
.calc3-share-btn--facebook:focus-visible {
  background: #1877F2;
  border-color: #1877F2;
  color: #fff;
  outline: none;
}

.calc3-share-btn--twitter:hover,
.calc3-share-btn--twitter:focus-visible {
  background: #1DA1F2;
  border-color: #1DA1F2;
  color: #fff;
  outline: none;
}

.calc3-share-btn--whatsapp:hover,
.calc3-share-btn--whatsapp:focus-visible {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
  outline: none;
}

.calc3-share-btn--telegram:hover,
.calc3-share-btn--telegram:focus-visible {
  background: #229ED9;
  border-color: #229ED9;
  color: #fff;
  outline: none;
}

.calc3-share-btn--copy:hover,
.calc3-share-btn--copy:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  outline: none;
}


/* ─── 3b. COOKIE BANNER IUBENDA: slim bottom-sheet su mobile ─── */
/* L'integrazione iubenda di default occupa top:0/bottom:0 → full-screen mobile.
   Override per limitare altezza al 70vh, scroll interno, bottom-sheet snello. */

@media (max-width: 767px) {
  #iubenda-cs-banner.iubenda-cs-bottom,
  #iubenda-cs-banner {
    top: auto !important;
    bottom: 0 !important;
    inset-block-start: auto !important;
    inset-block-end: 0 !important;
    height: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-top: var(--rule-bold, 3px) solid var(--ink, #0e0d0c);
    box-shadow: 0 -4px 0 var(--ink, #0e0d0c);
    background: var(--paper, #f5efe1);
  }

  #iubenda-cs-banner .iubenda-cs-container,
  #iubenda-cs-banner .iubenda-cs-content,
  #iubenda-cs-banner .iubenda-cs-rationale,
  #iubenda-cs-banner .iubenda-banner-content {
    max-height: none !important;
    height: auto !important;
    padding: var(--calc3-spacing-md, 1.2rem) !important;
  }

  /* Tutti i bottoni del banner (Accetta/Rifiuta/Personalizza) ≥ 48px touch */
  #iubenda-cs-banner button,
  #iubenda-cs-banner .iubenda-cs-btn-container button,
  #iubenda-cs-banner [class*="iubenda-cs-accept"],
  #iubenda-cs-banner [class*="iubenda-cs-reject"],
  #iubenda-cs-banner [class*="iubenda-cs-customize"] {
    min-height: var(--calc3-touch-target, 48px) !important;
    padding-block: 0.75rem !important;
  }

  /* Bottoni in colonna su narrow mobile */
  #iubenda-cs-banner .iubenda-cs-buttons,
  #iubenda-cs-banner .iubenda-cs-btn-container {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--calc3-spacing-xs, 0.4rem) !important;
    padding: var(--calc3-spacing-sm, 0.8rem) var(--calc3-spacing-md, 1.2rem) !important;
    background: var(--paper, #f5efe1);
    border-top: var(--rule-hair, 1px) solid var(--ink-faint, #9a9382);
    position: sticky;
    bottom: 0;
  }

  /* Riduci dimensione testo body per accomodare maggior contenuto */
  #iubenda-cs-banner .iub-p,
  #iubenda-cs-banner #iubenda-cs-paragraph,
  #iubenda-cs-banner .iubenda-banner-content p {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }

  /* Close button (X) touch ≥ 48px */
  #iubenda-cs-banner .iubenda-cs-close-btn {
    min-width: var(--calc3-touch-target, 48px) !important;
    min-height: var(--calc3-touch-target, 48px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ─── 5b. GAUGE BMI — restyle editoriale brutalist ─── */
/* Il SVG gauge del calcolatore usa un linearGradient con CSS vars
   --colore-gauge-sinistra/destra. Le re-mappo sui token quotidiano. */

:root {
  --colore-gauge-sinistra: var(--calc3-gauge-zone-low);
  --colore-gauge-destra:   var(--calc3-gauge-zone-high);
}

/* Container gauge — paper-shade bg + border editoriale */
.gauge-container {
  padding: var(--calc3-spacing-md) var(--calc3-spacing-sm);
  background: var(--paper-shade);
  border-top: var(--rule-thin) solid var(--ink);
  border-bottom: var(--rule-thin) solid var(--ink);
  margin-block: var(--calc3-spacing-sm);
  max-width: 100%;
  box-sizing: border-box;
}

/* Arco principale gauge: stroke spessa brutalist */
.gauge-container svg.gauge > path[stroke*="gradient"],
.gauge-container svg.gauge > path[stroke^="url"] {
  stroke-width: 8;
  stroke-linecap: butt;
}

/* Centrocirchio: ink invece di grigio */
.gauge-container svg.gauge > circle[fill="#333"],
.gauge-container svg.gauge > circle[fill="rgb(51, 51, 51)"] {
  fill: var(--ink);
}

/* Needle originale: nascosta dal JS calc3-gauge-marker.js (display:none inline).
   Fallback: se il JS non gira, la needle resta visibile ma stilizzata ink. */
.gauge-container svg.gauge > line#gaugeNeedle,
.gauge-container svg.gauge > line[id*="needle" i] {
  stroke: var(--ink);
  stroke-width: 3;
  fill: var(--ink);
}

/* Marker BMI sull'arco (aggiunto da JS calc3-gauge-marker.js, stile OD) */
.gauge-container svg.gauge > #bmiMarker {
  transition: transform 0.3s ease-out;
}

/* Bmi-value-gauge display testuale */
#bmiValueGauge.bmi-value-gauge {
  font-family: var(--font);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--paper-bright);
  border: var(--rule-thin) solid var(--ink);
  padding: var(--calc3-spacing-xs) var(--calc3-spacing-sm);
  display: inline-block;
  border-radius: 0;
}


/* ─── 5. CALCULATOR WRAPPER — stile newspaper card (Step 2e) ─── */
/* Wrappa il rendering esistente del calcolatore (intoccato per non rompere
   il JS interno) con un container editoriale: border-top bold + paper-bright
   bg + spacing. */

.calc3-calculator-main {
  background: var(--paper-bright);
  border-top: var(--rule-bold) solid var(--ink);
  border-bottom: var(--rule-thin) solid var(--ink);
  padding: var(--calc3-spacing-lg) var(--calc3-spacing-md);
  margin-block: var(--calc3-spacing-md) var(--calc3-spacing-lg);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .calc3-calculator-main {
    padding: var(--calc3-spacing-xl);
  }
}

/* Mini eyebrow editoriale prima del calcolatore */
.calc3-calculator-main::before {
  content: 'Calcolatore · Strumento gratuito';
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rosso);
  margin-bottom: var(--calc3-spacing-sm);
  padding-bottom: var(--calc3-spacing-xs);
  border-bottom: var(--rule-hair) solid var(--ink-faint);
}

/* Box "Risultato BMI" e simili: styling editoriale */
.calc3-calculator-main #bmiValue,
.calc3-calculator-main [id*="results-title"],
.calc3-calculator-main .calc-result-display,
.calc3-calculator-main [class*="result"]:not(.calc3-cta) {
  font-family: var(--font);
}

/* Bottoni del calcolatore (Calcola, Reset) — coerenti con stile newspaper */
.calc3-calculator-main button[type="submit"],
.calc3-calculator-main button.calc-btn,
.calc3-calculator-main .calc3-calculate-btn,
.calc3-calculator-main button[id*="alcula"],
.calc3-calculator-main button[id*="alcola"] {
  min-height: var(--calc3-touch-target);
  border-radius: 0;
  font-family: var(--font);
}


/* ─── 4. CALCOLATORI CORRELATI — grid editoriale ─── */

.calc3-related-calculators {
  margin-block: var(--calc3-spacing-2xl) var(--calc3-spacing-xl);
  padding-top: var(--calc3-spacing-xl);
  border-top: var(--rule-bold) solid var(--ink);
}

.calc3-related-calculators__title {
  font-family: var(--font);
  font-size: var(--t-titolo);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--calc3-spacing-sm) 0;
  color: var(--ink);
}

.calc3-related-calculators__title::before {
  content: 'Rubrica · ';
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rosso);
  vertical-align: super;
  font-weight: 400;
}

.calc3-related-calculators__intro {
  font-family: var(--font);
  font-style: italic;
  font-size: var(--t-sommario);
  color: var(--ink-soft);
  margin: 0 0 var(--calc3-spacing-lg) 0;
  max-width: 60ch;
}

.calc3-related-calculators__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--calc3-spacing-lg);
  margin-bottom: var(--calc3-spacing-lg);
}

@media (min-width: 600px) {
  .calc3-related-calculators__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--calc3-spacing-xl);
  }
}

@media (min-width: 1024px) {
  .calc3-related-calculators__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.calc3-related-calculators__item,
.calc3-related-calculators__grid > * {
  padding: var(--calc3-spacing-md);
  background: var(--paper-bright);
  border-top: var(--rule-thin) solid var(--ink);
  min-width: 0;
}

.calc3-related-calculators__item a,
.calc3-related-calculators__grid a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}

.calc3-related-calculators__item a:hover,
.calc3-related-calculators__grid a:hover {
  color: var(--rosso);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.calc3-related-calculators__more {
  padding-block: var(--calc3-spacing-md);
  text-align: end;
  border-top: var(--rule-hair) solid var(--ink-faint);
}

.calc3-related-calculators__more a {
  display: inline-flex;
  align-items: center;
  min-height: var(--calc3-touch-target);
  padding: var(--calc3-spacing-xs) var(--calc3-spacing-md);
  font-family: var(--font);
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: 4px;
}

.calc3-related-calculators__more a:hover,
.calc3-related-calculators__more a:focus-visible {
  color: var(--rosso);
  outline: none;
}

.calc3-related-calculators__more a:focus-visible {
  outline: var(--rule-thin) solid var(--rosso);
  outline-offset: 3px;
}