/*
 * =====================================================================
 * pillar-components.css — lamiamenopausa.it
 * ---------------------------------------------------------------------
 * Stili dei componenti distintivi delle pillar del progetto.
 * Estratti e consolidati dal template-gutenberg-pillar.md (aprile 2026).
 *
 * Usa le CSS variables definite nel main stylesheet del child theme
 * kadence-lmm-child (definite in brand-identity §1, §2, §5).
 *
 * Posizione consigliata:
 *   /wp-content/themes/kadence-lmm-child/assets/css/pillar-components.css
 *
 * Include:
 *   wp_enqueue_style( 'kadence-lmm-pillar', get_stylesheet_directory_uri() 
 *                     . '/assets/css/pillar-components.css', [], filemtime(...) );
 *   nel functions.php del child theme, DOPO il main stylesheet, così
 *   eventuali override del tema base vanno in cascata correttamente.
 * =====================================================================
 */


/* =========================================================
 * 1. Box "In sintesi" — .pillar-intro-box
 * Sfondo accent-soft, 5 bullet di take-away in apertura pillar
 * ========================================================= */

.pillar-intro-box {
  background: var(--color-accent-soft);
  padding: 32px 36px;
  border-radius: var(--radius-lg);
  margin: 32px 0 48px;
}

.pillar-intro-box .pillar-intro-eyebrow {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 12px;
}

.pillar-intro-box .pillar-intro-list {
  margin: 0;
  padding-left: 20px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-body);
}

.pillar-intro-list li {
  margin-bottom: 10px;
}

.pillar-intro-list li strong {
  color: var(--color-text-body);
  font-weight: 600;
}

@media (max-width: 768px) {
  .pillar-intro-box {
    padding: 24px 20px;
    margin: 24px 0 32px;
  }
  .pillar-intro-list {
    font-size: 16px;
  }
}


/* =========================================================
 * 2. Citazione fonte — .pillar-fonte-box
 * Box distintivo per linee guida cliniche (NICE, NAMS, SIGO)
 * ========================================================= */

.pillar-fonte-box {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--color-white-pure);
  border-left: 4px solid var(--color-primary-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.pillar-fonte-eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 12px;
}

.pillar-fonte-quote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-body);
  font-style: italic;
}

.pillar-fonte-caption {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.pillar-fonte-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pillar-fonte-link:hover {
  color: var(--color-primary-dark);
}


/* =========================================================
 * 3. Riquadro "▸ Approfondimento" — .pillar-approfondimento
 * Basato su <details>/<summary> nativo, collassabile.
 * Marker ▸ custom con rotazione all'apertura.
 * ========================================================= */

.pillar-approfondimento {
  margin: 24px 0;
  padding: 0;
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pillar-approfondimento > summary {
  padding: 16px 20px 16px 44px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-body);
  list-style: none;
  position: relative;
  user-select: none;
}

/* Disabilita il default marker del browser */
.pillar-approfondimento > summary::-webkit-details-marker {
  display: none;
}
.pillar-approfondimento > summary::marker {
  content: '';
}

/* Marker ▸ custom */
.pillar-approfondimento > summary::before {
  content: '▸';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-size: 14px;
  transition: transform 0.2s ease;
}

.pillar-approfondimento[open] > summary::before {
  transform: translateY(-50%) rotate(90deg);
}

.pillar-approfondimento[open] > summary {
  border-bottom: 1px solid var(--color-border-soft);
}

/* Contenuto interno (dopo il summary) */
.pillar-approfondimento > *:not(summary) {
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.65;
}

.pillar-approfondimento > *:not(summary):first-of-type {
  padding-top: 16px;
}

.pillar-approfondimento > *:not(summary):last-child {
  padding-bottom: 20px;
}

/* Liste interne all'approfondimento */
.pillar-approfondimento ul,
.pillar-approfondimento ol {
  margin: 0;
  padding-left: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .pillar-approfondimento > summary::before {
    transition: none;
  }
}


/* =========================================================
 * 4. Box "I numeri" — .pillar-numeri-box
 * Dati epidemiologici strutturati (SWAN, NAMS, ecc.)
 * ========================================================= */

.pillar-numeri-box {
  margin: 32px 0;
  padding: 28px 32px;
  background: var(--color-white-pure);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.pillar-numeri-eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 14px;
}

.pillar-numeri-intro {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0 0 20px;
}

/* Grid variante: quando ci sono 2-4 dati chiave in evidenza */
.pillar-numeri-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 20px 0;
}

.pillar-numeri-item {
  text-align: center;
}

.pillar-numeri-value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 4px;
}

.pillar-numeri-label {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.35;
}

/* Lista variante: quando i numeri hanno bisogno di narrativa */
.pillar-numeri-list {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-body);
}

.pillar-numeri-list li {
  margin-bottom: 8px;
}

.pillar-numeri-fonte {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 16px 0 0;
  line-height: 1.45;
  font-style: italic;
}

@media (max-width: 640px) {
  .pillar-numeri-box {
    padding: 22px 20px;
  }
  .pillar-numeri-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pillar-numeri-value {
    font-size: 20px;
  }
}


/* =========================================================
 * 5. Mini-CTA embedded — .pillar-mini-cta
 * Richiamo al questionario in-line nel flusso della pillar
 * ========================================================= */

.pillar-mini-cta {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--color-accent);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.pillar-mini-cta-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--color-text-body);
  margin: 0;
}

.pillar-mini-cta-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-body);
  margin: 0;
}

/*
 * NOTA PER CLAUDE CODE:
 * Se nel child theme esiste già una classe .btn-primary con lo
 * stesso styling (terracotta su CTA), sostituisci queste regole
 * con @extend o con una class aggiuntiva sul link. Se non esiste,
 * queste definizioni diventano fallback valide.
 */
.pillar-mini-cta-btn {
  background: var(--color-primary);
  color: var(--color-white-pure);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  margin-top: 4px;
  display: inline-block;
  transition: background 0.15s ease;
}

.pillar-mini-cta-btn:hover {
  background: var(--color-primary-dark);
  color: var(--color-white-pure);
}

@media (max-width: 640px) {
  .pillar-mini-cta {
    padding: 20px 22px;
  }
  .pillar-mini-cta-title {
    font-size: 17px;
  }
}


/* =========================================================
 * 6. Medical reviewer box — .pillar-reviewer-box
 * Box distintivo con firma Isabel Magnelli, pre-footer
 * ========================================================= */

.pillar-reviewer-box {
  margin: 48px 0 32px;
  padding: 28px 32px;
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-primary);
}

.pillar-reviewer-eyebrow {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 14px;
}

.pillar-reviewer-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-body);
  margin: 0 0 12px;
}

.pillar-reviewer-tagline {
  font-size: 13px;
  color: var(--color-text-body-light);
  margin: 0 0 12px;
}

.pillar-reviewer-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .pillar-reviewer-box {
    padding: 22px 20px;
  }
}


/* =========================================================
 * 7. Contenuti correlati — .pillar-correlati
 * Sezione finale con 3 card link ad altre pillar/strumenti
 * ========================================================= */

.pillar-correlati {
  margin: 48px 0 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.pillar-correlati-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-body);
  margin: 0 0 24px;
}

.pillar-correlati-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pillar-correlati-card {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  background: var(--color-white-pure);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.pillar-correlati-card:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
}

.pillar-correlati-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  background: var(--color-accent-soft);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 10px;
  margin-bottom: 12px;
}

.pillar-correlati-heading {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-body);
  margin: 0 0 8px;
  line-height: 1.35;
}

.pillar-correlati-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .pillar-correlati-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-correlati-card {
    transition: none;
  }
  .pillar-correlati-card:hover {
    transform: none;
  }
}


/* =========================================================
 * 8. Disclaimer editoriale — .disclaimer
 * Pattern riutilizzato dal §12.10 del brand-identity.
 * Non ridefinito qui se è già presente nel main stylesheet —
 * verificare before adding. In caso di conflitto, il main
 * stylesheet vince (questo file è caricato dopo).
 * 
 * Definizione di fallback, da attivare SOLO se la classe
 * .disclaimer non esiste già globalmente nel child theme.
 *
 * .disclaimer {
 *   margin-top: 40px;
 *   padding: 14px 18px;
 *   font-size: 12px;
 *   color: var(--color-text-muted);
 *   font-style: italic;
 *   line-height: 1.6;
 *   text-align: center;
 *   border-top: 1px dashed var(--color-border);
 *   border-bottom: 1px dashed var(--color-border);
 * }
 * ========================================================= */


/* =========================================================
 * 9. Regole globali per il body delle pillar
 * Ipotizzando che il page template `page-pillar.php` avvolga
 * il contenuto Gutenberg in un wrapper con classe .pillar-content
 * ========================================================= */

.pillar-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Spacing tra FAQ successive (H3 + P + H3) */
.pillar-content h3 + p + h3 {
  margin-top: 32px;
}

/* Liste generali più aperte nelle pillar */
.pillar-content ul,
.pillar-content ol {
  margin: 16px 0;
  padding-left: 24px;
}

.pillar-content ul li,
.pillar-content ol li {
  margin-bottom: 8px;
  line-height: 1.65;
}

/* =========================================================
 * 10. Box "Promesse / non-promesse" — .pillar-promesse-grid
 * Due colonne affiancate con liste parallele sì/no.
 * Componente usato nella pagina editoriale /metodo/ §06
 * (non in pillar cliniche — ma vive qui per centralizzazione
 *  dei pattern pagina del child theme).
 * ========================================================= */

.pillar-promesse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
}

.pillar-promesse-col {
  padding: 24px 28px;
  background: var(--color-white-pure);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.pillar-promesse-col-si {
  border-left: 4px solid var(--color-primary);
}

.pillar-promesse-col-no {
  border-left: 4px solid var(--color-text-muted);
}

.pillar-promesse-heading {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 14px;
  line-height: 1.3;
}

.pillar-promesse-col-si .pillar-promesse-heading {
  color: var(--color-primary);
}

.pillar-promesse-col-no .pillar-promesse-heading {
  color: var(--color-text-muted);
}

.pillar-promesse-list {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-body);
}

.pillar-promesse-list li {
  margin-bottom: 8px;
}

.pillar-promesse-list li:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .pillar-promesse-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pillar-promesse-col {
    padding: 20px 22px;
  }
}

/* Subgrid: allinea row-per-row i bullet tra le 2 colonne sì/no (desktop/tablet).
 * Il media query mobile sopra stacka a 1 col e disattiva il subgrid naturalmente. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .pillar-promesse-grid {
      grid-template-rows: auto repeat(6, auto);
    }
    .pillar-promesse-col {
      grid-row: 1 / -1;
      display: grid;
      grid-template-rows: subgrid;
      row-gap: 8px;
    }
    .pillar-promesse-col .pillar-promesse-heading {
      grid-row: 1;
      margin: 0;
    }
    .pillar-promesse-col .pillar-promesse-list {
      grid-row: 2 / -1;
      display: grid;
      grid-template-rows: subgrid;
    }
    .pillar-promesse-list li {
      margin-bottom: 0;
    }
  }
}


/*
 * FINE pillar-components.css
 * Tutte le classi documentate in template-gutenberg-pillar.md § componenti.
 */

/* =========================================================
 * 6-bis. Medical reviewer box — layout flex foto + testo
 * Aggiunto 2026-04-21 Sess 25 per unificare reviewer box
 * tra 5 pillar (foto Isabel piccola a sinistra + bio completa)
 * ========================================================= */

.pillar-reviewer-box {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.pillar-reviewer-photo {
  flex: 0 0 96px;
}

.pillar-reviewer-photo img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.pillar-reviewer-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pillar-reviewer-text > * {
  margin: 0 0 12px;
}

.pillar-reviewer-text > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .pillar-reviewer-box {
    flex-direction: column;
    gap: 16px;
  }
  .pillar-reviewer-photo {
    flex: 0 0 auto;
  }
  .pillar-reviewer-photo img {
    width: 80px;
    height: 80px;
  }
}


/* ============================================================
   Onboarding "Come funziona" accordion panel
   Native <details>/<summary>, zero-JS, WCAG built-in
   Blocco D — DEC-04 (d) accordion inline
   ============================================================ */

.lmm-howitworks-panel {
  margin: 48px 0 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-divider, #E5E0D8);
}

.lmm-howitworks-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin: 0 0 16px;
}

.lmm-howitworks-item {
  border-top: 1px solid var(--color-divider, #E5E0D8);
}

.lmm-howitworks-item:last-child {
  border-bottom: 1px solid var(--color-divider, #E5E0D8);
}

.lmm-howitworks-item > summary {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  padding: 16px 32px 16px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  color: var(--color-black, #2B1F1A);
  user-select: none;
}

/* Hide default disclosure marker (Chrome/Safari/Firefox) */
.lmm-howitworks-item > summary::-webkit-details-marker { display: none; }
.lmm-howitworks-item > summary::marker { content: ''; }

/* Custom +/− indicator */
.lmm-howitworks-item > summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

.lmm-howitworks-item[open] > summary::after {
  content: '−';
}

.lmm-howitworks-item > summary:hover {
  color: var(--color-primary);
}

.lmm-howitworks-item > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

.lmm-howitworks-item > p {
  padding: 0 0 16px;
  margin: 0;
  color: var(--color-body, #2B1F1A);
  line-height: 1.55;
  font-family: var(--font-body);
}

.lmm-howitworks-item > p a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile */
@media (max-width: 640px) {
  .lmm-howitworks-panel {
    margin: 32px 0 24px;
    padding-top: 24px;
  }
  .lmm-howitworks-item > summary {
    font-size: 1rem;
    padding: 14px 28px 14px 0;
  }
}