/* ========================================================================
   PATTERN UI DEL QUESTIONARIO — v1.2
   Tutti i pattern dinamici. La logica JS è nel plugin lmm-questionario.
   Il child theme fornisce solo il CSS e il markup di esempio.
   ======================================================================== */


/* ============================
   1. PROGRESS BAR + STAGE BADGE
   ============================ */

.q-progress {
  padding: 16px 40px;
  border-bottom: 1px solid var(--color-border-soft);
}
.q-progress-bar {
  height: 3px;
  background: var(--color-border-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.q-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.q-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xsmall);
  color: var(--color-text-muted);
}
.q-stage-badge {
  padding: 2px 8px;
  background: var(--color-accent-soft);
  color: var(--color-primary);
  border-radius: 10px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.q-stage-badge.level-2 {
  background: #e0e6d9;
  color: var(--color-secondary);
}

@media (max-width: 768px) {
  .q-progress { padding: 12px 20px; }
}


/* ============================
   2. OPZIONI COME CARD CLICCABILI (radio multi-button)
   ============================ */

.q-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.q-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--color-white-pure);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.q-option:hover {
  border-color: var(--color-primary-light);
  background: var(--color-accent-soft);
}
.q-option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.q-option.selected {
  border-color: var(--color-primary);
  background: var(--color-accent-soft);
}
.q-option-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  background: white;
}
.q-option.selected .q-option-radio {
  border-color: var(--color-primary);
}
.q-option.selected .q-option-radio::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.q-option-text {
  flex: 1;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}
.q-option-hint {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-top: 2px;
}


/* ============================
   3. SCALA 0-4 MRS-ADAPTED
   Desktop: grid 5 colonne con numero grande sopra, etichetta sotto
   Mobile: stack verticale a flex con numero a sinistra in pillola
   ============================ */

.q-scale-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.q-scale-option {
  text-align: center;
  padding: 20px 12px;
  background: var(--color-white-pure);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  color: inherit;
}
.q-scale-option:hover {
  border-color: var(--color-primary-light);
  background: var(--color-accent-soft);
}
.q-scale-option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.q-scale-option.selected {
  border-color: var(--color-primary);
  background: var(--color-accent-soft);
}
.q-scale-number {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  line-height: 1;
  margin-bottom: 8px;
}
.q-scale-option.selected .q-scale-number {
  color: var(--color-primary);
}
.q-scale-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  display: block;
  margin-bottom: 2px;
}
.q-scale-hint {
  font-size: 10px;
  color: var(--color-text-muted);
  display: none;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .q-scale-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .q-scale-option {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
  }
  .q-scale-number {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .q-scale-option.selected .q-scale-number {
    background: var(--color-primary);
    color: white;
  }
  .q-scale-label-group {
    flex: 1;
  }
  .q-scale-label {
    font-size: 14px;
    margin-bottom: 1px;
  }
  .q-scale-hint {
    display: block;
    font-size: 11px;
  }
}


/* ============================
   4. MICRO-DOMANDA CONTESTUALE INLINE
   ============================ */

.q-micro-wrap {
  background: var(--color-accent-soft);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-top: 24px;
  border-left: 3px solid var(--color-primary-light);
  animation: slideDown 0.3s ease;
}
.q-micro-eyebrow {
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  margin-bottom: 8px;
  display: block;
}
.q-micro-eyebrow::before {
  content: '↳';
  font-family: var(--font-mono);
  margin-right: 4px;
}
.q-micro-question {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .q-micro-wrap { padding: 16px; margin-top: 16px; }
}


/* ============================
   5. CHECKLIST INDICATORI PBAC (NUOVO v1.2 — §12.6)
   Pattern testuale-zero-immagini per Q2.2 (sanguinamento mestruale).
   Checkbox QUADRATA (non rotonda) per distinguerla da radio.
   Logica scoring softFlag/redFlag gestita dal plugin.
   ============================ */

.q-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.q-checklist-eyebrow {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: 8px;
  font-style: italic;
}
.q-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-white-pure);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.q-checklist-item:hover {
  border-color: var(--color-primary-light);
  background: var(--color-accent-soft);
}
.q-checklist-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.q-checklist-item.selected {
  border-color: var(--color-primary);
  background: var(--color-accent-soft);
}
.q-checklist-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: white;
  margin-top: 2px;
  position: relative;
}
.q-checklist-item.selected .q-checklist-checkbox {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.q-checklist-item.selected .q-checklist-checkbox::after {
  content: '✓';
  color: white;
  font-size: 14px;
  font-weight: var(--fw-bold);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.q-checklist-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}


/* ============================
   6. TOOLTIP INLINE (NUOVO v1.2 — §12.7)
   Termini abbreviati o tecnici (GSM, POI, MRS, TOS, PBAC) glossati con
   sottolineatura tratteggiata. Hover desktop / tap mobile.
   ============================ */

.tooltip-term {
  text-decoration: underline dotted var(--color-text-muted);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: help;
  position: relative;
}
.tooltip-term:hover,
.tooltip-term:focus-visible {
  text-decoration-color: var(--color-primary);
  outline: none;
}

.tooltip-content {
  font-style: normal;
  pointer-events: none;
}

/* === DESKTOP: hover tooltip === */
@media (hover: hover) and (pointer: fine) {
  .tooltip-content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--color-text);
    color: var(--color-white-pure);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.45;
    width: max-content;
    max-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: var(--z-tooltip);
  }
  .tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-text);
  }
  .tooltip-term:hover .tooltip-content,
  .tooltip-term:focus-visible .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* === MOBILE / TOUCH: tap tooltip (plugin lmm-questionario gestisce .open) === */
@media (hover: none), (pointer: coarse) {
  .tooltip-content {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    transform: none;
    background: var(--color-text);
    color: var(--color-white-pure);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    z-index: var(--z-tooltip);
    transition: opacity 0.18s ease;
  }
  .tooltip-term.open .tooltip-content {
    opacity: 1;
    visibility: visible;
  }
}


/* ============================
   8. PDF MODE — modalità rendering per generazione PDF client-side
   Applicata temporaneamente al clone di #questionario-output da
   lmm-pdf-client.js durante html2canvas. Scopo:
   - tutti gli <details> forzati open, senza markers
   - sidebar/nav/button nascosti (non rilevanti per PDF)
   - sfondo bianco puro (stampa pulita)
   - larghezza fissa A4-friendly (794px @ 96dpi = ~210mm)
   ============================ */

.pdf-mode {
  background: #ffffff !important;
  width: 794px !important;
  max-width: 794px !important;
  padding: 24px 32px !important;
  color: #2a2420;
  font-family: var(--font-body, sans-serif);
}

.pdf-mode details,
.pdf-mode details[open] {
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 16px;
  page-break-inside: avoid;
}

.pdf-mode details > summary {
  list-style: none;
  pointer-events: none;
  padding: 10px 0;
  border-bottom: 1px solid #d9d3c9;
  font-weight: 600;
}
.pdf-mode details > summary::-webkit-details-marker,
.pdf-mode details > summary::after {
  display: none !important;
}

.pdf-mode details > *:not(summary) {
  display: block !important;
  visibility: visible !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 12px 0 !important;
}

/* Blocchi che in layout normale sono inline-block o con descender font-serif:
   in pdf-mode li forziamo block + padding-bottom per evitare taglio nel raster html2canvas */
.pdf-mode .output-track-badge {
  display: block !important;
  width: 100% !important;
  padding-bottom: 10px !important;
}
.pdf-mode .output-headline,
.pdf-mode .output-headline-f {
  padding-bottom: 14px !important;
  line-height: 1.3 !important;
}
.pdf-mode .output-summary,
.pdf-mode .output-lead-italic {
  padding-bottom: 10px !important;
  line-height: 1.6 !important;
}

.pdf-mode .output-sidebar,
.pdf-mode .output-sidebar-nav,
.pdf-mode .output-newsletter,
.pdf-mode [data-action] {
  display: none !important;
}

.pdf-mode .output-body {
  grid-template-columns: 1fr !important;
  display: block !important;
}

.pdf-mode .output-main {
  width: 100% !important;
}

.pdf-mode .output-header,
.pdf-mode .output-footer {
  page-break-inside: avoid;
}

.pdf-mode .banner-mood,
.pdf-mode .banner-redflag {
  page-break-inside: avoid;
}

.pdf-mode .output-accordion-group {
  display: block !important;
}