/*
 * Componenti — TurboFisco per Kadence
 * ---------------------------------------------------------------
 * Selettori usati in due livelli, dal piu' al meno certo:
 * 1) Classi core di WordPress (.wp-block-button__link, .wp-block-quote,
 *    .entry-content table, form/input/button, details/summary): stabili in
 *    qualsiasi versione di Kadence, non cambiano.
 * 2) Classi standard di Kadence Theme (.site-header, #site-navigation,
 *    .site-footer, .entry-hero, .content-container): stabili nelle versioni
 *    recenti, ma se dopo l'attivazione qualcosa non si applica (es. nome
 *    classe cambiato in una versione futura), apri l'ispettore del browser
 *    sull'elemento e aggiorna qui il selettore — nessun'altra parte del
 *    tema va toccata.
 *
 * Nessun selettore .rank-math-* viene toccato o nascosto: FAQ/HowTo/schema
 * di Rank Math restano intatti, qui si stilizzano solo gli elementi nativi
 * (details/summary, wp-block-quote) che l'editor puo' scegliere di usare.
 */

/* ==========================================================================
   HEADER / NAVIGAZIONE
   ========================================================================== */

.site-header {
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(15, 43, 76, 0.06);
  /* Un po' di respiro sopra il logo: prima toccava il bordo superiore
     della pagina (~0px), qui portato a ~1cm. */
  padding-top: 16px;
  padding-bottom: 16px;
}

.site-header a {
  color: var(--tf-navy);
}

#site-navigation .menu-item > a,
.main-navigation .menu-item > a {
  font-family: var(--tf-font-body);
  font-weight: 500;
  border-radius: var(--tf-radius-full);
  transition: background-color 0.15s ease, color 0.15s ease;
}

#site-navigation .menu-item > a:hover,
.main-navigation .menu-item > a:hover {
  background-color: #f3f4f6;
  color: var(--tf-navy);
}

/* Voci di menu "bottone" (Consulenza gratuita / Registrati gratis):
   stessa coppia pillola navy/amber della landing, applicata alla singola
   voce di menu tramite la classe CSS impostata su quella voce in
   Aspetto > Menu (o via REST, campo "classes"). */
#site-navigation .menu-item.tf-nav-btn-navy,
.main-navigation .menu-item.tf-nav-btn-navy,
#site-navigation .menu-item.tf-nav-btn-amber,
.main-navigation .menu-item.tf-nav-btn-amber {
  /* Spaziatura sulla voce di menu (il vero elemento flex), non sul link:
     applicata sul link, il margine non veniva conteggiato nella larghezza
     automatica del <li> flessibile e la pillola successiva ci finiva sopra. */
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

#site-navigation .menu-item.tf-nav-btn-navy > a,
.main-navigation .menu-item.tf-nav-btn-navy > a {
  background-color: var(--tf-navy);
  color: var(--tf-white);
  font-weight: 600;
  padding: 0.6rem 1.25rem;
}

#site-navigation .menu-item.tf-nav-btn-navy > a:hover,
.main-navigation .menu-item.tf-nav-btn-navy > a:hover {
  background-color: var(--tf-navy-dark);
  color: var(--tf-white);
}

#site-navigation .menu-item.tf-nav-btn-amber > a,
.main-navigation .menu-item.tf-nav-btn-amber > a {
  background-color: var(--tf-amber);
  color: var(--tf-navy);
  font-weight: 600;
  padding: 0.6rem 1.25rem;
}

#site-navigation .menu-item.tf-nav-btn-amber > a:hover,
.main-navigation .menu-item.tf-nav-btn-amber > a:hover {
  background-color: var(--tf-amber-dark);
  color: var(--tf-navy);
}

/* ==========================================================================
   BOTTONI — stessa geometria "pill" e stessa coppia navy/amber della landing
   ========================================================================== */

.wp-block-button__link,
button.button,
input[type="submit"],
.kt-button {
  font-family: var(--tf-font-body);
  font-weight: 600;
  border-radius: var(--tf-radius-full);
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Stile di default (fill): sfondo amber, testo navy — identico al CTA
   principale della landing */
.wp-block-button__link,
button.button,
input[type="submit"] {
  background-color: var(--tf-amber);
  color: var(--tf-navy);
  box-shadow: var(--tf-shadow-soft);
}

.wp-block-button__link:hover,
button.button:hover,
input[type="submit"]:hover {
  background-color: var(--tf-amber-dark);
  color: var(--tf-navy);
  transform: translateY(-2px);
  box-shadow: var(--tf-shadow-glow);
}

/* Stile "outline" del blocco Bottone core: bordo navy, come il CTA
   secondario della landing */
.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--tf-navy);
  border-color: var(--tf-navy);
  box-shadow: none;
}

.is-style-outline .wp-block-button__link:hover {
  background-color: var(--tf-amber-light);
  border-color: var(--tf-amber-dark);
  color: var(--tf-navy);
  transform: translateY(-2px);
}

/* ==========================================================================
   HERO / TITOLO ARTICOLO — richiama il cielo caldo con i due bagliori
   (amber in alto a sinistra, navy in basso a destra) della hero della landing
   ========================================================================== */

.entry-hero,
.page-header,
.site-content > .entry-header {
  position: relative;
  overflow: hidden;
  background-color: var(--tf-warm);
  background-image:
    radial-gradient(45% 45% at 85% 20%, rgba(15, 43, 76, 0.1) 0%, rgba(15, 43, 76, 0) 70%),
    radial-gradient(55% 55% at 15% 80%, rgba(249, 156, 0, 0.18) 0%, rgba(249, 156, 0, 0) 70%);
}

/* ==========================================================================
   CARD — box de "come funziona" / articoli correlati, angoli morbidi e ombra
   calda come le card della landing
   ========================================================================== */

.tf-card,
.wp-block-group.is-style-tf-card {
  background-color: var(--tf-white);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-2xl);
  box-shadow: var(--tf-shadow-card);
  padding: 1.5rem;
}

/* Alternanza di sezioni in stile landing (bg-warm / bg-warm-soft / bianco):
   applicabile a un blocco Gruppo/Riga di Kadence dal pannello "Classi
   CSS aggiuntive", senza toccare l'HTML generato dal tema. */
.tf-section-warm {
  background-color: var(--tf-warm);
}

.tf-section-warm-soft {
  background-color: var(--tf-warm-soft);
}

.tf-section-navy {
  background-color: var(--tf-navy);
  color: var(--tf-white);
}

.tf-section-navy h1,
.tf-section-navy h2,
.tf-section-navy h3 {
  color: var(--tf-white);
}

/* ==========================================================================
   CITAZIONI / TESTIMONIANZE — richiama la sezione "Cosa dicono i nostri
   utenti" della landing: barra navy laterale, virgolette amber
   ========================================================================== */

.entry-content blockquote,
.wp-block-quote {
  position: relative;
  background-color: var(--tf-warm-soft);
  border-left: 4px solid var(--tf-navy);
  border-radius: var(--tf-radius-lg);
  padding: 1.25rem 1.5rem;
  font-style: normal;
}

.entry-content blockquote::before,
.wp-block-quote::before {
  content: "\201C";
  font-family: var(--tf-font-heading);
  font-size: 2.5rem;
  color: var(--tf-amber);
  line-height: 0;
  position: relative;
  top: 0.75rem;
  margin-right: 0.25rem;
}

.entry-content blockquote cite,
.wp-block-quote cite {
  font-family: var(--tf-font-body);
  color: var(--tf-text-muted);
  font-style: normal;
}

/* ==========================================================================
   TABELLE — coefficienti/aliquote/scadenze: intestazione navy, righe
   alternate, numeri in monospace se marcati con .tf-num
   ========================================================================== */

.entry-content table {
  border-collapse: collapse;
  width: 100%;
  border-radius: var(--tf-radius-lg);
  overflow: hidden;
  box-shadow: var(--tf-shadow-card);
}

.entry-content table th {
  background-color: var(--tf-navy);
  color: var(--tf-white);
  font-family: var(--tf-font-heading);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
}

.entry-content table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--tf-border);
}

.entry-content table tr:nth-child(even) td {
  background-color: var(--tf-warm-soft);
}

.entry-content table td.tf-num,
.entry-content table .tf-num {
  font-family: var(--tf-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   FAQ — stesso stile "riga cliccabile" della sezione Domande Frequenti
   della landing. Copre il blocco core Dettagli (details/summary) usato
   dagli articoli con FAQPage JSON-LD; non tocca markup/classi di Rank Math.
   ========================================================================== */

.entry-content details {
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-lg);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.entry-content details summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--tf-font-body);
  font-weight: 600;
  color: var(--tf-navy);
  padding: 1rem 1.25rem;
  transition: background-color 0.15s ease;
}

.entry-content details summary::-webkit-details-marker {
  display: none;
}

.entry-content details summary:hover {
  background-color: var(--tf-warm-soft);
}

.entry-content details[open] summary {
  background-color: var(--tf-warm-soft);
  border-bottom: 1px solid var(--tf-border);
}

.entry-content details > *:not(summary) {
  padding: 0 1.25rem 1.25rem;
}

/* Se sul sito e' attivo anche il plugin Kadence Blocks, l'Accordion usa
   .wp-block-kadence-accordion / .kt-accordion-panel: stesso trattamento
   visivo, opzionale, non fa nulla se il plugin non e' installato. */
.wp-block-kadence-accordion .kt-accordion-panel-trigger {
  font-family: var(--tf-font-body);
  color: var(--tf-navy);
}

/* ==========================================================================
   FOOTER — bg navy, testo bianco, link amber al hover, identico al footer
   della landing
   ========================================================================== */

.site-footer,
footer.site-footer {
  background-color: var(--tf-navy);
  color: rgba(255, 255, 255, 0.8);
}

.site-footer a {
  color: var(--tf-white);
}

.site-footer a:hover {
  color: var(--tf-amber);
  text-decoration: underline;
}

.site-footer .widget-title,
.site-footer h2,
.site-footer h3 {
  color: var(--tf-white);
}

/* Blocco logo + link legali, agganciato subito sotto il footer di Kadence
   (vedi funzione turbofisco_child_footer_legal in functions.php: il footer
   builder di Kadence si configura solo da Customizer, non raggiungibile via
   REST API, quindi qui il blocco e' aggiunto in coda al body con lo stesso
   sfondo navy per risultare visivamente parte dello stesso footer, senza
   margine/stacco visibile). */
.tf-footer-legal {
  background-color: var(--tf-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem 2rem;
  margin-top: -1px;
}

.tf-footer-legal-email {
  margin: 0;
  font-family: var(--tf-font-body);
  font-size: 0.875rem;
}

.tf-footer-legal-email a {
  color: rgba(255, 255, 255, 0.8);
}

.tf-footer-legal-email a:hover {
  color: var(--tf-amber);
  text-decoration: underline;
}

.tf-footer-legal-logo img {
  display: block;
  height: 56px;
  width: auto;
}

.tf-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 1.5rem;
  font-family: var(--tf-font-body);
  font-size: 0.875rem;
}

.tf-footer-legal-links a {
  color: rgba(255, 255, 255, 0.8);
}

.tf-footer-legal-links a:hover {
  color: var(--tf-amber);
  text-decoration: underline;
}

/* ==========================================================================
   FORM — commenti, ricerca: raggio coerente, focus ring amber come i
   focus-visible della landing
   ========================================================================== */

.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="url"],
.entry-content textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-form input[type="search"] {
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-md);
  font-family: var(--tf-font-body);
}

.entry-content input:focus,
.entry-content textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus,
.search-form input:focus {
  outline: none;
  border-color: var(--tf-amber);
  box-shadow: 0 0 0 3px rgba(249, 156, 0, 0.35);
}