/**
 * LMM Questionario - stili plugin-specifici (solo wrapping e micro-componenti NON duplicati
 * nel child theme). Tutti i pattern (progress bar, opzioni, scala, checklist, banner, tooltip)
 * vivono nel child theme: _questionario.css, _banners.css, _animations.css.
 *
 * Questo file copre gap di spacing/layout NON presenti nel child theme v1.2 che il
 * markup del plugin presume (footer, body/content vertical rhythm, onboarding layout).
 * Pattern plugin-scoped, non duplica CSS del child theme.
 */

/* ============================
   Body/content vertical rhythm
   ============================ */

.questionario .q-body {
    padding-top: 24px;
    padding-bottom: 24px;
}

.questionario .q-content > * + * {
    margin-top: 16px;
}

.questionario .q-question {
    margin-top: 12px;
    margin-bottom: 8px;
    line-height: 1.3;
}

.questionario .q-eyebrow {
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 600;
}

.questionario .q-instruction {
    color: var(--color-text-muted);
    margin-top: 4px;
    margin-bottom: 16px;
    font-size: var(--fs-small);
}

.questionario .q-why {
    margin-top: 8px;
    margin-bottom: 20px;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.questionario .q-why summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 500;
}

.questionario .q-why summary:hover {
    text-decoration: underline;
}

.questionario .q-why > p {
    margin-top: 8px;
}

/* ============================
   Footer (Indietro + Continua)
   ============================ */

.questionario .q-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 24px;
    padding-bottom: 16px;
    border-top: 1px solid var(--color-border-soft);
}

.questionario .q-back-link {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    text-decoration: none;
    padding: 10px 4px;
    display: inline-block;
    transition: color 0.15s;
}

.questionario .q-back-link:hover,
.questionario .q-back-link:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
}

.questionario .q-continue-btn {
    min-width: 180px;
}

.questionario .q-continue-btn:disabled,
.questionario .q-continue-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ============================
   Header (logo wordmark + close)
   ============================ */

.questionario .q-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border-soft);
}

.questionario .q-wordmark {
    font-family: var(--font-display, serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.questionario .q-wordmark .highlight {
    color: var(--color-primary);
}

.questionario .q-close {
    color: var(--color-text-muted);
    font-size: var(--fs-small);
    text-decoration: none;
    padding: 8px 4px;
}

.questionario .q-close:hover {
    color: var(--color-text);
}

/* ============================
   Onboarding / opt-in-l2 / riprendi — micro-layout
   ============================ */

.q-onboarding .q-body,
.q-opt-in-l2 .q-body,
.q-riprendi .q-body {
    padding-top: 40px;
    padding-bottom: 40px;
}

.q-onboarding .q-title-onboarding,
.q-opt-in-l2 .q-title-opt-in,
.q-riprendi .q-title-riprendi {
    font-family: var(--font-display, serif);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.2;
    margin: 16px 0 20px;
}

.q-onboarding .q-lead,
.q-opt-in-l2 .q-lead,
.q-riprendi .q-lead {
    font-size: var(--fs-body-lg);
    line-height: 1.55;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.q-onboarding .q-disclaimer-intro {
    background: var(--color-accent-soft, #f2eef3);
    border-left: 3px solid var(--color-primary);
    padding: 16px 20px;
    border-radius: 6px;
    margin: 24px 0 32px;
    font-size: var(--fs-small);
    line-height: 1.5;
}

.q-onboarding .q-disclaimer-intro p {
    margin: 0 0 8px;
}

.q-onboarding .q-disclaimer-intro p:last-child {
    margin-bottom: 0;
}

.q-onboarding .q-onboarding-facts {
    list-style: none;
    padding: 0;
    margin: 24px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.q-onboarding .q-onboarding-facts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.q-onboarding .q-start-btn {
    margin-top: 8px;
    margin-right: 20px;
}

.q-onboarding .q-how-it-works-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--fs-small);
    display: inline-block;
    padding: 10px 0;
}

.q-onboarding .q-how-it-works-link:hover {
    text-decoration: underline;
}

/* ============================
   Opt-in L2 actions
   ============================ */

.q-opt-in-l2 .q-opt-in-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
}

.q-opt-in-l2 .q-opt-in-no {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--fs-small);
    padding: 10px 4px;
}

.q-opt-in-l2 .q-opt-in-no:hover {
    text-decoration: underline;
}

/* ============================
   Riprendi actions
   ============================ */

.q-riprendi .q-riprendi-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
}

.q-riprendi .q-riprendi-restart {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--fs-small);
    padding: 10px 4px;
}

.q-riprendi .q-riprendi-age {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

/* ============================
   Transizione (3 dots pulse)
   ============================ */

.q-transizione .q-body {
    padding: 80px 0;
    text-align: center;
}

.q-transizione .q-pulse-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.q-transizione .q-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: lmmPulseDot 1.2s ease-in-out infinite;
}

.q-transizione .q-pulse-dot:nth-child(2) { animation-delay: 0.2s; }
.q-transizione .q-pulse-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes lmmPulseDot {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .q-transizione .q-pulse-dot { animation: none; opacity: 0.7; }
}

/* ============================
   Mobile responsive tweaks
   ============================ */

@media (max-width: 768px) {
    .questionario .q-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
        padding-top: 20px;
    }
    .questionario .q-footer .q-continue-btn {
        width: 100%;
        min-width: 0;
    }
    .questionario .q-footer .q-back-link {
        text-align: center;
        padding: 12px 4px;
    }
    .q-onboarding .q-opt-in-actions,
    .q-opt-in-l2 .q-opt-in-actions,
    .q-riprendi .q-riprendi-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .q-onboarding .q-start-btn,
    .q-opt-in-l2 .btn-primary,
    .q-riprendi .btn-primary {
        width: 100%;
    }
}


/* ============================================================
   OUTPUT /orientamento — Step 7 v1.2
   Gap child theme (_output.css scheletrico) riempito qui con
   pattern plugin-scoped. Responsabilità: layout + typography
   specifici del rendering output Track A-H e Track F.
   ============================================================ */

.output-page-wrapper { padding: 32px 0 64px; }
.output-loading { padding: 60px 20px; text-align: center; }
.output-loading h1 { font-size: var(--fs-h2, 28px); margin-bottom: 12px; }

.output-fallback { padding: 60px 20px; text-align: center; max-width: 620px; margin: 0 auto; }
.output-fallback h1 { font-size: var(--fs-h2, 28px); margin-bottom: 12px; }

.output {
    display: block;
    max-width: 1080px;
    margin: 0 auto;
}
.output-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0 24px;
    border-bottom: 1px solid var(--color-border, #e5e0d8);
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.output-wordmark {
    font-family: var(--font-heading, serif);
    font-size: var(--fs-h4, 20px);
    font-weight: var(--fw-semibold, 600);
    color: var(--color-text, #2a2420);
    text-decoration: none;
}
.output-wordmark .highlight { color: var(--color-primary, #b25a3a); font-style: italic; }
.output-meta {
    font-size: var(--fs-small, 13px);
    color: var(--color-text-muted, #6e6459);
    margin: 0;
}

/* ----- Layout body ----- */
.output-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
}
.output-main { min-width: 0; }
.output-sidebar { min-width: 0; }

@media (max-width: 900px) {
    .output-body { grid-template-columns: 1fr; gap: 32px; }
}

/* ----- Content heading ----- */
.output-track-badge {
    display: inline-block;
    font-size: var(--fs-xsmall, 12px);
    font-weight: var(--fw-bold, 700);
    letter-spacing: var(--ls-eyebrow, 0.08em);
    text-transform: uppercase;
    color: var(--color-primary, #b25a3a);
    margin-bottom: 12px;
}
.output-headline {
    font-family: var(--font-heading, serif);
    font-size: var(--fs-h1, 36px);
    font-weight: var(--fw-semibold, 600);
    line-height: 1.2;
    margin: 0 0 20px;
    color: var(--color-text, #2a2420);
}
.output-summary {
    font-size: var(--fs-body-lg, 18px);
    line-height: 1.55;
    color: var(--color-text, #2a2420);
    margin: 0 0 32px;
}

/* ----- Accordion ----- */
.output-accordion-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.output-accordion {
    background: var(--color-bg-alt, #faf7f2);
    border-radius: var(--radius-lg, 14px);
    padding: 0;
    overflow: hidden;
}
.output-accordion[open] { background: var(--color-white-pure, #ffffff); box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.output-accordion-summary {
    padding: 18px 20px;
    font-family: var(--font-heading, serif);
    font-size: var(--fs-h4, 20px);
    font-weight: var(--fw-semibold, 600);
    cursor: pointer;
    list-style: none;
    color: var(--color-text, #2a2420);
    position: relative;
}
.output-accordion-summary::-webkit-details-marker { display: none; }
.output-accordion-summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    font-size: 22px;
    font-family: var(--font-heading, serif);
    color: var(--color-primary, #b25a3a);
    transition: transform 0.2s ease;
}
.output-accordion[open] .output-accordion-summary::after { content: "−"; }
.output-accordion-body { padding: 0 20px 20px; line-height: 1.6; }
.output-accordion-body p { margin: 0 0 12px; }
.output-accordion-cosa_non_ti_diciamo {
    background: var(--color-banner-mood-bg-from, #e8eee4);
    border-left: 3px solid var(--color-secondary, #6e8a5a);
}

/* ----- Action list (cosa_puoi_fare) ----- */
.output-action-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.output-action {
    padding: 12px 14px;
    background: var(--color-white-pure, #ffffff);
    border-radius: var(--radius-md, 10px);
    border-left: 3px solid var(--color-border, #e5e0d8);
    line-height: 1.5;
}
.output-action-priority-alta          { border-left-color: var(--color-primary, #b25a3a); }
.output-action-priority-media-alta    { border-left-color: var(--color-primary-light, #d4855e); }
.output-action-priority-media         { border-left-color: var(--color-secondary, #6e8a5a); }
.output-action-priority-complementare { border-left-color: var(--color-secondary-light, #9bb180); }
.output-action-priority-opzionale     { border-left-color: var(--color-text-muted, #6e6459); }
.output-action-label   { font-weight: var(--fw-semibold, 600); }
.output-action-when    { color: var(--color-text, #2a2420); }
.output-action-priority {
    display: inline-block;
    margin-left: 4px;
    font-size: var(--fs-small, 13px);
    font-style: italic;
    color: var(--color-text-muted, #6e6459);
}

/* ----- Related ----- */
.output-related {
    margin: 24px 0 32px;
    padding: 20px 24px;
    background: var(--color-bg-alt, #faf7f2);
    border-radius: var(--radius-lg, 14px);
    text-align: left;
}
.output-related h3 {
    font-family: var(--font-heading, serif);
    font-size: var(--fs-h4, 20px);
    margin: 0 0 12px;
    text-align: left;
}
.output-related ul {
    list-style: disc outside;
    padding-left: 22px;
    margin: 0;
    text-align: left;
}
.output-related li {
    padding: 4px 0;
    line-height: 1.5;
    text-align: left;
}
.output-related li::marker { color: var(--color-primary, #b25a3a); }
.output-related a {
    color: var(--color-primary, #b25a3a);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.output-related a:hover { text-decoration: none; }

/* ----- Disclaimer ----- */
.output-disclaimer {
    margin: 32px 0 16px;
    padding: 20px 24px;
    background: var(--color-banner-storage-bg, #f3efe8);
    border-left: 3px solid var(--color-text-muted, #6e6459);
    border-radius: 0 var(--radius-lg, 14px) var(--radius-lg, 14px) 0;
}
.output-disclaimer-title {
    font-family: var(--font-heading, serif);
    font-size: var(--fs-h4, 18px);
    margin: 0 0 10px;
    color: var(--color-text, #2a2420);
}
.output-disclaimer-text {
    font-size: var(--fs-body-sm, 15px);
    line-height: 1.55;
    color: var(--color-text, #2a2420);
    margin: 0 0 10px;
}
.output-disclaimer-text:last-child { margin-bottom: 0; }
.output-disclaimer-differential {
    padding-top: 10px;
    border-top: 1px dashed var(--color-border, #e5e0d8);
    font-style: italic;
}

/* ----- Sidebar ----- */
.output-sidebar-inner {
    position: sticky;
    top: 24px;
    padding: 20px;
    background: var(--color-bg-alt, #faf7f2);
    border-radius: var(--radius-lg, 14px);
}
.output-sidebar-title {
    font-family: var(--font-heading, serif);
    font-size: var(--fs-h4, 18px);
    margin: 0 0 12px;
}
.output-sidebar-note {
    font-size: var(--fs-small, 13px);
    color: var(--color-text-muted, #6e6459);
    line-height: 1.5;
    margin: 10px 0 0;
    font-style: italic;
}
.output-sidebar-divider {
    border: 0;
    border-top: 1px solid var(--color-border, #e5e0d8);
    margin: 20px 0;
}
.output-cta-primary[data-action="download-pdf"][disabled],
.output-cta-primary[data-action="download-pdf"][aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}
.output-newsletter {
    padding: 4px 0;
}
.output-newsletter-title {
    font-family: var(--font-heading, serif);
    font-size: var(--fs-h4, 17px);
    margin: 0 0 8px;
}
.output-newsletter-intro {
    font-size: var(--fs-small, 13px);
    line-height: 1.5;
    color: var(--color-text-muted, #6e6459);
    margin: 0 0 12px;
}
.output-newsletter-placeholder {
    padding: 12px 14px;
    background: var(--color-white-pure, #ffffff);
    border-radius: var(--radius-md, 10px);
    border: 1px dashed var(--color-border, #e5e0d8);
    font-size: var(--fs-small, 13px);
    color: var(--color-text-muted, #6e6459);
    margin: 0;
}

/* Zoho Campaigns embed form overrides: forza full-width sidebar, nasconde
   title strip duplicato, uniforma font al brand. Target selectors from Zoho embed v2.0. */
.output-newsletter #customForm,
.output-newsletter [name="SIGNUP_BODY"] {
    width: 100% !important;
    max-width: 100% !important;
    font-family: var(--font-body, inherit) !important;
    border: 0 !important;
    background: transparent !important;
}
.output-newsletter #SIGNUP_HEADING { display: none !important; }
.output-newsletter #zcampaignOptinForm { padding: 0 !important; }
.output-newsletter #zcampaignOptinForm > div[style*="width: 218px"] {
    width: 100% !important;
    margin-top: 12px !important;
}
.output-newsletter #EMBED_FORM_EMAIL_LABEL {
    font-family: var(--font-body, inherit) !important;
    text-align: left !important;
    padding: 8px 12px !important;
    border-radius: var(--radius-md, 8px) !important;
    border: 1px solid var(--color-border, #e5e0d8) !important;
}
.output-newsletter #zcWebOptin {
    width: 100% !important;
    height: auto !important;
    font-family: var(--font-body, inherit) !important;
    font-size: var(--fs-body-sm, 15px) !important;
    font-weight: var(--fw-semibold, 600) !important;
    background-color: var(--color-primary, #b25a3a) !important;
    padding: 12px 16px !important;
    line-height: 1.2 !important;
    border-radius: var(--radius-md, 8px) !important;
}
.output-newsletter #zcampaignOptinForm > div[style*="width: 113px"] {
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 8px !important;
}
.output-sidebar-nav h4 {
    font-size: var(--fs-xsmall, 12px);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow, 0.08em);
    color: var(--color-text-muted, #6e6459);
    margin: 0 0 8px;
}
.output-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.output-sidebar-nav a {
    font-size: var(--fs-body-sm, 15px);
    color: var(--color-text, #2a2420);
    text-decoration: none;
    padding: 4px 0;
    display: block;
}
.output-sidebar-nav a:hover { color: var(--color-primary, #b25a3a); text-decoration: underline; }
@media (max-width: 900px) {
    .output-sidebar-inner { position: static; }
    .output-sidebar-nav { display: none; }
}

/* ----- Footer bio ----- */
.output-footer {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #e5e0d8);
}
.output-bio {
    padding: 20px;
    background: var(--color-bg-alt, #faf7f2);
    border-radius: var(--radius-lg, 14px);
}
.output-bio-name {
    font-family: var(--font-heading, serif);
    font-size: var(--fs-h4, 18px);
    margin: 0 0 8px;
}
.output-bio-text {
    font-size: var(--fs-body-sm, 15px);
    line-height: 1.6;
    color: var(--color-text, #2a2420);
    margin: 0;
}

/* ============================================================
   TRACK F — Layout sparso dedicato (§12 brand playbook)
   ============================================================ */

.output-track-f {
    max-width: 720px;
}
.output-track-f-body {
    padding: 0;
}
.output-headline-f {
    text-align: center;
    font-size: var(--fs-h1, 32px);
    margin-bottom: 24px;
}
.output-lead-italic {
    font-style: italic;
    font-size: var(--fs-body-lg, 18px);
    line-height: 1.6;
    margin: 0 auto 32px;
    color: var(--color-text, #2a2420);
    max-width: 640px;
}
.output-divider-terracotta {
    width: 60px;
    height: 3px;
    background: var(--color-primary, #b25a3a);
    margin: 0 auto 40px;
    border-radius: 3px;
}
.output-section-f {
    margin: 0 0 32px;
}
.output-section-f-title {
    font-family: var(--font-heading, serif);
    font-size: var(--fs-h3, 22px);
    font-weight: var(--fw-semibold, 600);
    margin: 0 0 12px;
    color: var(--color-text, #2a2420);
}
.output-section-f p { line-height: 1.65; margin: 0 0 12px; }
.output-section-f-cosa_non_ti_diciamo {
    padding: 20px;
    background: var(--color-banner-mood-bg-from, #e8eee4);
    border-left: 3px solid var(--color-secondary, #6e8a5a);
    border-radius: 0 var(--radius-lg, 14px) var(--radius-lg, 14px) 0;
}
.output-f-actions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.output-f-action {
    padding: 12px 14px;
    background: var(--color-white-pure, #ffffff);
    border-radius: var(--radius-md, 10px);
    border-left: 3px solid var(--color-border, #e5e0d8);
}
.output-f-action-priority-alta       { border-left-color: var(--color-primary, #b25a3a); }
.output-f-action-priority-media-alta { border-left-color: var(--color-primary-light, #d4855e); }
.output-f-action-priority-media      { border-left-color: var(--color-secondary, #6e8a5a); }
.output-f-action-when { color: var(--color-text, #2a2420); }
.output-f-action-priority {
    display: inline-block;
    margin-left: 4px;
    font-size: var(--fs-small, 13px);
    font-style: italic;
    color: var(--color-text-muted, #6e6459);
}

.output-f-actions-footer {
    margin: 40px 0 24px;
    text-align: center;
}
.output-f-discreet-links {
    margin-top: 16px;
    font-size: var(--fs-small, 13px);
}
.output-f-discreet-links a {
    color: var(--color-text-muted, #6e6459);
    text-decoration: underline;
    margin: 0 8px;
}

@media (max-width: 600px) {
    .output-headline          { font-size: var(--fs-h2, 28px); }
    .output-headline-f        { font-size: var(--fs-h2, 26px); }
    .output-summary           { font-size: var(--fs-body, 16px); }
    .output-accordion-summary { font-size: var(--fs-h5, 17px); padding: 16px; }
    .output-accordion-body    { padding: 0 16px 16px; }
    .output-bio, .output-related, .output-disclaimer { padding: 16px; }
}