/**
 * QuizGolf — Guida Regole 2023
 *
 * Design system per pagine guida-regole.php / -testo / -chiarimenti / -definizioni.
 * Ispirato visualmente al PDF ufficiale R&A/USGA/FIG 2023 (palette lavender + navy +
 * azzurro Scopo + rosso penalità) ma con typography Stitch QuizGolf (Poppins + Source Sans).
 *
 * Pattern coperti:
 * - chapter divider (full color blu intenso, hero card)
 * - rule title + scope box
 * - section header (navy band)
 * - subsection, sub-subsection numbered
 * - body block (lavender bg)
 * - penalty callout (rosso)
 * - chiarimento header + body
 * - cross-reference link
 * - glossario term (corsivo + sottile underline tratteggiato + tooltip)
 * - definizione card
 * - diagramma figure
 * - sidebar TOC sticky
 */

:root {
    /* Palette R&A/USGA/FIG — replica fedele del libro ufficiale Regole del Golf 2023. */
    /* Decisione editoriale Manuel 2026-05-19: le pagine Guida Regole adottano la palette */
    /* del libro originale per riconoscibilità + autorevolezza. Eccezione rispetto allo */
    /* Stitch design system del resto del sito (verde golf). Font Stitch (Poppins + Source */
    /* Sans 3) restano coerenti col resto del sito. */
    --qg-guida-navy: #1A2380;             /* Navy R&A — header sezioni, chiarimento, TOC active, chapter divider */
    --qg-guida-navy-deep: #000A91;        /* Navy intenso R&A — chapter divider full-color */
    --qg-guida-blu-link: #1F3DAE;         /* Blu link cross-reference (legacy R&A) */
    --qg-guida-link: #2563eb;             /* Blu link/term/tooltip — scelto da Manuel 2026-05-19, coerente in tutte le palette */
    --qg-guida-azzurro-scopo: #DCE9F5;    /* Azzurro chiaro — box "Scopo della Regola" */
    --qg-guida-azzurro-scopo-border: #B5D4F4;
    --qg-guida-lavender: #E8E7F5;         /* Lavender — body block (pattern firma libro) */
    --qg-guida-lavender-soft: #F2F1FA;    /* Lavender ancora più chiaro — sidebar TOC */
    --qg-guida-lavender-border: rgba(26, 35, 128, 0.10);  /* Border derivato navy con alpha */

    /* Rosso penalità — palette R&A */
    --qg-guida-rosso-penalita: #C8252F;
    --qg-guida-rosso-penalita-bg: #FBEEEF;

    /* Testo — palette R&A. Ammorbidito da #1A1A2E (quasi-nero) a #2c2c40 per ridurre la
     * percezione di "marcatura" del body — al peso 400 il colore quasi-nero rendeva il
     * testo visualmente più "carico" del PDF originale (che usa grigio scuro #1a1a1a su
     * bianco, ma noi abbiamo lavender bg che amplifica il contrast). */
    --qg-guida-text: #2c2c40;
    --qg-guida-text-soft: #4A4A66;
    --qg-guida-text-muted: #6E6E85;
    --qg-guida-bianco: #FFFFFF;

    /* Accent fallback (lime Stitch) per casi specifici */
    --qg-guida-accent: #c6ef2e;

    /* Spacing scale */
    --qg-guida-space-1: 4px;
    --qg-guida-space-2: 8px;
    --qg-guida-space-3: 12px;
    --qg-guida-space-4: 16px;
    --qg-guida-space-5: 24px;
    --qg-guida-space-6: 32px;
    --qg-guida-space-7: 48px;
    --qg-guida-space-8: 64px;

    /* Typography scale */
    --qg-guida-font-heading: "Poppins", sans-serif;
    --qg-guida-font-body: "Source Sans 3", "Source Sans Pro", sans-serif;
    --qg-guida-fs-h1: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
    --qg-guida-fs-h2: clamp(1.25rem, 1.4vw + 0.85rem, 1.5rem);
    --qg-guida-fs-h3: clamp(1.05rem, 0.9vw + 0.85rem, 1.2rem);
    --qg-guida-fs-h4: 1rem;
    --qg-guida-fs-body: 1rem;
    --qg-guida-fs-small: 0.875rem;
    --qg-guida-lh-body: 1.65;
    --qg-guida-lh-heading: 1.25;

    /* Radius + shadow */
    --qg-guida-radius-sm: 6px;
    --qg-guida-radius-md: 10px;
    --qg-guida-radius-lg: 16px;
    --qg-guida-shadow-sm: 0 1px 2px rgba(26, 35, 128, 0.06);
    --qg-guida-shadow-md: 0 4px 12px rgba(26, 35, 128, 0.08);
}

/* ---------- Layout shell ---------- */

.qg-guida-page {
    padding: var(--qg-guida-space-6) var(--qg-guida-space-5);
    color: var(--qg-guida-text);
    font-family: var(--qg-guida-font-body);
    font-size: var(--qg-guida-fs-body);
    font-weight: 400;
    line-height: var(--qg-guida-lh-body);
}

/* Reset esplicito font-weight 400 sui blocchi body delle pagine guida.
 * Lo Stitch CSS Tailwind compilato ha pattern come `body a { font-weight: 700 }` che
 * fa ereditare bold ai miei <a class="qg-guida-term"> + <a class="qg-guida-xref">.
 * Forzo 400 con !important per essere certi di battere qualsiasi peso ereditato
 * (browser fallback, classi Tailwind, ecc.). Strong, heading, label restano col loro peso. */
.qg-guida-page p,
.qg-guida-page li,
.qg-guida-page div,
.qg-guida-rule-section__body,
.qg-guida-rule-section__body p,
.qg-guida-rule-section__body li,
.qg-guida-rule-section__body div,
.qg-guida-clarification__body,
.qg-guida-clarification__body p,
.qg-guida-clarification__body li,
.qg-guida-clarification__body div,
.qg-guida-rule__scope,
.qg-guida-rule__scope p,
.qg-guida-rule__scope li,
.qg-guida-scope p,
.qg-guida-scope li,
.qg-guida-definition,
.qg-guida-definition p,
.qg-guida-definition li,
.qg-guida-definition div,
.qg-guida-body,
.qg-guida-body p,
.qg-guida-body li {
    font-weight: 400 !important;
}

/* Eccezioni — gli elementi che DEVONO restare bold (heading, strong, label, badge) */
.qg-guida-page h1,
.qg-guida-page h2,
.qg-guida-page h3,
.qg-guida-page h4,
.qg-guida-page h5,
.qg-guida-page h6,
.qg-guida-page strong,
.qg-guida-page b,
.qg-guida-page .qg-guida-rule__title,
.qg-guida-page .qg-guida-rule__scope-label,
.qg-guida-page .qg-guida-rule-section__label,
.qg-guida-page .qg-guida-section,
.qg-guida-page .qg-guida-clarification-group__header,
.qg-guida-page .qg-guida-clarification__title,
.qg-guida-page .qg-guida-definition__title,
.qg-guida-page .qg-guida-hero__kicker,
.qg-guida-page .qg-guida-toc__title,
.qg-guida-page .qg-guida-toc__kicker,
.qg-guida-page .qg-guida-jumplist__item,
.qg-guida-page .qg-guida-toc__rule-num,
.qg-guida-page .qg-guida-clarifications__intro {
    font-weight: 700 !important;
}

/* Sub-sub-comma N.Xy(z) primo paragrafo: semibold per distinguerlo come "label" */
.qg-guida-rule-section__body [id*="("] > p.block_6:first-child {
    font-weight: 600 !important;
}

.qg-guida-container {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--qg-guida-space-7);
    align-items: start;
}

/* V.3.85 Audit Fernando: variante per pagine senza sidebar TOC verticale
   (es. /guida-regole-definizioni.php dopo rimozione "Salta a lettera"). */
.qg-guida-container--single {
    grid-template-columns: 1fr;
    gap: var(--qg-guida-space-5);
}

@media (max-width: 1024px) {
    .qg-guida-container { grid-template-columns: 1fr; gap: var(--qg-guida-space-5); }
}

/* V.3.85 Audit Fernando: alfabeto orizzontale sticky in cima allo scroll.
   Stesso pattern di stitch_topbar ma su pagina, sotto la topbar fissa. */
.qg-guida-jumplist--sticky {
    position: sticky;
    top: 64px;
    z-index: 50;
    background: var(--qg-guida-bg, #faf9f7);
    padding: 12px 0;
    margin: 0 -8px 24px;
    border-bottom: 1px solid var(--qg-guida-lavender-border, rgba(94, 96, 206, 0.18));
    backdrop-filter: blur(6px);
}

/* Sidebar TOC sticky */
.qg-guida-toc {
    position: sticky;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: var(--qg-guida-space-4);
    background: var(--qg-guida-lavender-soft);
    border: 1px solid var(--qg-guida-lavender-border);
    border-radius: var(--qg-guida-radius-md);
    font-size: var(--qg-guida-fs-small);
}

.qg-guida-toc__kicker {
    margin: 0 0 var(--qg-guida-space-2);
    color: var(--qg-guida-text-muted);
    font-family: var(--qg-guida-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.qg-guida-toc__title {
    margin: 0 0 var(--qg-guida-space-3);
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-size: 1rem;
    font-weight: 700;
}

.qg-guida-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.qg-guida-toc__list li { margin-bottom: var(--qg-guida-space-1); }

.qg-guida-toc__link {
    display: block;
    padding: 4px 8px;
    color: var(--qg-guida-text-soft);
    text-decoration: none;
    border-radius: var(--qg-guida-radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.qg-guida-toc__link:hover,
.qg-guida-toc__link.is-active {
    background: var(--qg-guida-lavender);
    color: var(--qg-guida-navy);
}

.qg-guida-toc__link:focus-visible {
    outline: 2px solid var(--qg-guida-navy);
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    .qg-guida-toc {
        position: static;
        max-height: 320px;
    }
}

/* Main content area */
.qg-guida-main { min-width: 0; }

/* ---------- Page hero / kicker ---------- */

.qg-guida-hero {
    margin-bottom: var(--qg-guida-space-6);
}

.qg-guida-hero__kicker {
    margin: 0 0 var(--qg-guida-space-2);
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.qg-guida-hero h1 {
    margin: 0 0 var(--qg-guida-space-3);
    color: var(--qg-guida-text);
    font-family: var(--qg-guida-font-heading);
    font-size: var(--qg-guida-fs-h1);
    font-weight: 800;
    line-height: var(--qg-guida-lh-heading);
}

.qg-guida-hero__lead {
    max-width: 62ch;
    margin: 0;
    color: var(--qg-guida-text-soft);
    font-size: 1.05rem;
}

/* ---------- Chapter divider (full color block) ---------- */

.qg-guida-chapter-divider {
    margin: var(--qg-guida-space-7) 0 var(--qg-guida-space-6);
    padding: var(--qg-guida-space-7) var(--qg-guida-space-5);
    background: var(--qg-guida-navy-deep);
    color: var(--qg-guida-bianco);
    border-radius: var(--qg-guida-radius-lg);
    text-align: center;
}

.qg-guida-chapter-divider__roman {
    margin: 0 0 var(--qg-guida-space-3);
    font-family: var(--qg-guida-font-heading);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.qg-guida-chapter-divider h2 {
    margin: 0 0 var(--qg-guida-space-3);
    color: var(--qg-guida-bianco);
    font-family: var(--qg-guida-font-heading);
    font-size: clamp(1.5rem, 1.8vw + 0.8rem, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
}

.qg-guida-chapter-divider__meta {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

/* ---------- Rule article ---------- */

.qg-guida-rule {
    margin-bottom: var(--qg-guida-space-7);
    scroll-margin-top: 96px;
}

.qg-guida-rule__title {
    margin: 0 0 var(--qg-guida-space-4);
    color: var(--qg-guida-text);
    font-family: var(--qg-guida-font-heading);
    font-size: var(--qg-guida-fs-h2);
    font-weight: 800;
    line-height: var(--qg-guida-lh-heading);
}

/* Scope box (azzurro chiaro) — pattern firma del libro */
.qg-guida-scope {
    margin: 0 0 var(--qg-guida-space-5);
    padding: var(--qg-guida-space-4) var(--qg-guida-space-5);
    background: var(--qg-guida-azzurro-scopo);
    border-left: 4px solid var(--qg-guida-azzurro-scopo-border);
    border-radius: var(--qg-guida-radius-md);
}

.qg-guida-scope__label {
    margin: 0 0 var(--qg-guida-space-2);
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-size: var(--qg-guida-fs-h4);
    font-weight: 700;
}

.qg-guida-scope p { margin: 0 0 var(--qg-guida-space-2); }
.qg-guida-scope p:last-child { margin-bottom: 0; }
.qg-guida-scope ul {
    margin: var(--qg-guida-space-2) 0 0 var(--qg-guida-space-5) !important;
    padding-left: var(--qg-guida-space-3) !important;
    list-style: disc outside !important;
}
.qg-guida-scope li {
    display: list-item !important;
    list-style-position: outside !important;
    margin-bottom: var(--qg-guida-space-1);
}

/* Section header (navy band) — es. "4.1 I Bastoni" */
.qg-guida-section {
    margin-top: var(--qg-guida-space-6);
    margin-bottom: var(--qg-guida-space-4);
    padding: var(--qg-guida-space-3) var(--qg-guida-space-4);
    background: var(--qg-guida-navy);
    color: var(--qg-guida-bianco);
    border-radius: var(--qg-guida-radius-sm);
    font-family: var(--qg-guida-font-heading);
    font-size: var(--qg-guida-fs-h3);
    font-weight: 700;
    scroll-margin-top: 96px;
}

/* Subsection (es. "4.1a I Bastoni Consentiti") */
.qg-guida-subsection-title {
    margin: var(--qg-guida-space-5) 0 var(--qg-guida-space-3);
    color: var(--qg-guida-text);
    font-family: var(--qg-guida-font-heading);
    font-size: var(--qg-guida-fs-h3);
    font-weight: 700;
    line-height: var(--qg-guida-lh-heading);
    scroll-margin-top: 96px;
}

/* Sub-subsection numbered "(1) Bastoni Conformi" */
.qg-guida-subsubsection-title {
    margin: var(--qg-guida-space-4) 0 var(--qg-guida-space-2);
    color: var(--qg-guida-text);
    font-family: var(--qg-guida-font-heading);
    font-size: 1.02rem;
    font-weight: 700;
}

.qg-guida-subsubsection-title__label {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Body block (lavender bg) — il pattern firma del libro */
.qg-guida-body {
    padding: var(--qg-guida-space-4) var(--qg-guida-space-5);
    background: var(--qg-guida-lavender);
    border: 1px solid var(--qg-guida-lavender-border);
    border-radius: var(--qg-guida-radius-md);
    margin: 0 0 var(--qg-guida-space-4);
}

.qg-guida-body > * + * { margin-top: var(--qg-guida-space-3); }
.qg-guida-body p { margin: 0; }

.qg-guida-body ul,
.qg-guida-body ol {
    margin: 0 0 0 var(--qg-guida-space-4);
    padding: 0;
}

.qg-guida-body li + li { margin-top: var(--qg-guida-space-2); }
.qg-guida-body li ul,
.qg-guida-body li ol {
    margin-top: var(--qg-guida-space-2);
    margin-left: var(--qg-guida-space-5);
}

.qg-guida-body strong { color: var(--qg-guida-text); font-weight: 700; }

/* Penalità callout (rosso) */
.qg-guida-penalty {
    margin: var(--qg-guida-space-4) 0;
    padding: var(--qg-guida-space-3) var(--qg-guida-space-4);
    background: var(--qg-guida-rosso-penalita-bg);
    border-left: 4px solid var(--qg-guida-rosso-penalita);
    border-radius: var(--qg-guida-radius-sm);
    color: var(--qg-guida-rosso-penalita);
    font-weight: 700;
}

.qg-guida-penalty strong { color: var(--qg-guida-rosso-penalita); }

/* Cross-reference link "Vedi Regola X.X" — usa --qg-guida-link (#2563eb).
 * !important su font-weight per battere Stitch `body a { font-weight: 700 }`. */
.qg-guida-xref {
    color: var(--qg-guida-link) !important;
    text-decoration: none;
    font-weight: 500 !important;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.qg-guida-xref:hover,
.qg-guida-xref:focus-visible { border-bottom-color: var(--qg-guida-link); }
.qg-guida-xref:focus-visible {
    outline: 2px solid var(--qg-guida-link);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Glossario term inline ---------- */
/* Term + tooltip in --qg-guida-link (#2563eb scelto da Manuel 2026-05-19).
 * !important su font-weight per battere Stitch `body a { font-weight: 700 }`:
 * il termine glossario deve essere visivamente distinto via colore + italic + dotted underline,
 * NON via bold (sarebbe troppo carico visivamente nelle regole/chiarimenti). */

.qg-guida-term {
    font-style: italic;
    font-weight: 400 !important;
    color: var(--qg-guida-link) !important;
    border-bottom: 1px dotted var(--qg-guida-link);
    cursor: help;
    text-decoration: none;
    transition: background-color 0.15s ease;
    padding: 0 1px;
}

.qg-guida-term:hover,
.qg-guida-term:focus-visible {
    background: rgba(37, 99, 235, 0.08);
    border-bottom-style: solid;
}

.qg-guida-term:focus-visible {
    outline: 2px solid var(--qg-guida-link);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Tooltip (popover) — posizionato via JS, stile statico qui */
.qg-guida-term-tooltip {
    position: absolute;
    z-index: 1000;
    max-width: 320px;
    padding: var(--qg-guida-space-3) var(--qg-guida-space-4);
    background: var(--qg-guida-text);
    color: var(--qg-guida-bianco);
    border-radius: var(--qg-guida-radius-md);
    box-shadow: var(--qg-guida-shadow-md);
    font-size: 0.92rem;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.qg-guida-term-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.qg-guida-term-tooltip__title {
    display: block;
    margin-bottom: 4px;
    font-family: var(--qg-guida-font-heading);
    font-weight: 700;
    color: var(--qg-guida-bianco);
}

.qg-guida-term-tooltip__cta {
    display: inline-block;
    margin-top: var(--qg-guida-space-2);
    color: var(--qg-guida-azzurro-scopo-border);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    pointer-events: auto;
}

/* ---------- Chiarimento ---------- */

.qg-guida-clarification-group {
    margin-top: var(--qg-guida-space-6);
}

.qg-guida-clarification-group__header {
    margin: 0 0 var(--qg-guida-space-4);
    padding: var(--qg-guida-space-3) var(--qg-guida-space-4);
    background: var(--qg-guida-navy);
    color: var(--qg-guida-bianco);
    border-radius: var(--qg-guida-radius-sm);
    font-family: var(--qg-guida-font-heading);
    font-size: var(--qg-guida-fs-h3);
    font-weight: 700;
}

.qg-guida-clarification {
    margin-bottom: var(--qg-guida-space-4);
    scroll-margin-top: 96px;
}

.qg-guida-clarification__title {
    margin: 0 0 var(--qg-guida-space-2);
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Badge data ultimo aggiornamento del chiarimento R&A (V.3.101).
   Sorgente: PDF "Chiarimenti Aggiuntivi alle Regole del Golf 2023" gennaio 2026. */
.qg-clarification-date {
    margin-top: var(--qg-guida-space-3);
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.qg-clarification-date--added,
.qg-clarification-date--reintegrated {
    color: #1f6f3f;
}

.qg-clarification-date--retired {
    color: #b32d2d;
}

/* Marker "Ritirato" appare PRIMA del corpo del chiarimento (banner). */
.qg-guida-clarification > .qg-clarification-date--retired {
    display: inline-block;
    margin-top: 0;
    margin-bottom: var(--qg-guida-space-3);
    padding: 2px 10px;
    background: #fdecec;
    border: 1px solid #f3c6c6;
    border-radius: 999px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

/* ---------- Definizione card ---------- */

.qg-guida-definition {
    margin-bottom: var(--qg-guida-space-5);
    padding: var(--qg-guida-space-4) var(--qg-guida-space-5);
    background: var(--qg-guida-lavender);
    border: 1px solid var(--qg-guida-lavender-border);
    border-radius: var(--qg-guida-radius-md);
    scroll-margin-top: 96px;
}

.qg-guida-definition__title {
    margin: 0 0 var(--qg-guida-space-3);
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-size: var(--qg-guida-fs-h3);
    font-weight: 700;
    line-height: var(--qg-guida-lh-heading);
}

.qg-guida-definition > * + * { margin-top: var(--qg-guida-space-3); }
.qg-guida-definition p { margin: 0; }
.qg-guida-definition ul,
.qg-guida-definition ol,
.qg-guida-definition ul.list_,
.qg-guida-definition ul.list_2 {
    margin: 0 0 0 var(--qg-guida-space-5) !important;
    padding-left: var(--qg-guida-space-3) !important;
    list-style: disc outside !important;
}
.qg-guida-definition ul.list_2 {
    margin-left: var(--qg-guida-space-6) !important;
    list-style: circle outside !important;
}
.qg-guida-definition li,
.qg-guida-definition li.block_7 {
    display: list-item !important;
    list-style-position: outside !important;
}
.qg-guida-definition li + li { margin-top: var(--qg-guida-space-2); }

/* ---------- Diagramma figure ---------- */

.qg-guida-figure {
    margin: var(--qg-guida-space-5) 0;
    padding: var(--qg-guida-space-3);
    background: var(--qg-guida-bianco);
    border: 1px solid var(--qg-guida-lavender-border);
    border-radius: var(--qg-guida-radius-md);
    text-align: center;
}

.qg-guida-figure__label {
    display: inline-block;
    margin-bottom: var(--qg-guida-space-2);
    padding: 2px 10px;
    background: var(--qg-guida-navy);
    color: var(--qg-guida-bianco);
    border-radius: var(--qg-guida-radius-sm);
    font-family: var(--qg-guida-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qg-guida-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--qg-guida-radius-sm);
}

.qg-guida-figure figcaption {
    margin-top: var(--qg-guida-space-2);
    color: var(--qg-guida-text-soft);
    font-size: var(--qg-guida-fs-small);
    line-height: 1.5;
    text-align: left;
    padding: 0 var(--qg-guida-space-3);
}

/* ---------- Macro card index (landing page) ---------- */

.qg-guida-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--qg-guida-space-5);
    margin-bottom: var(--qg-guida-space-6);
}

.qg-guida-card {
    display: flex;
    flex-direction: column;
    padding: var(--qg-guida-space-5);
    background: var(--qg-guida-lavender);
    border: 1px solid var(--qg-guida-lavender-border);
    border-radius: var(--qg-guida-radius-lg);
    text-decoration: none;
    color: var(--qg-guida-text);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 200px;
}

.qg-guida-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--qg-guida-shadow-md);
}

.qg-guida-card:focus-visible {
    outline: 2px solid var(--qg-guida-navy);
    outline-offset: 3px;
}

.qg-guida-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--qg-guida-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--qg-guida-navy);
    color: var(--qg-guida-bianco);
    border-radius: var(--qg-guida-radius-md);
    font-size: 1.5rem;
}

.qg-guida-card__title {
    margin: 0 0 var(--qg-guida-space-2);
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
}

.qg-guida-card__desc {
    margin: 0 0 var(--qg-guida-space-3);
    color: var(--qg-guida-text-soft);
    font-size: 0.95rem;
}

.qg-guida-card__cta {
    margin-top: auto;
    color: var(--qg-guida-navy);
    font-weight: 700;
    font-family: var(--qg-guida-font-heading);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---------- Search jump (per termine veloce in pagina) ---------- */

.qg-guida-jumplist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qg-guida-space-1);
    margin-bottom: var(--qg-guida-space-5);
    padding: var(--qg-guida-space-3);
    background: var(--qg-guida-lavender-soft);
    border-radius: var(--qg-guida-radius-md);
}

.qg-guida-jumplist__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--qg-guida-space-2);
    background: var(--qg-guida-bianco);
    border: 1px solid var(--qg-guida-lavender-border);
    border-radius: var(--qg-guida-radius-sm);
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.qg-guida-jumplist__item:hover,
.qg-guida-jumplist__item:focus-visible {
    background: var(--qg-guida-navy);
    color: var(--qg-guida-bianco);
}

.qg-guida-jumplist__item:focus-visible {
    outline: 2px solid var(--qg-guida-navy);
    outline-offset: 2px;
}

/* ---------- A11y: reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .qg-guida-card,
    .qg-guida-term,
    .qg-guida-term-tooltip,
    .qg-guida-xref,
    .qg-guida-jumplist__item,
    .qg-guida-toc__link {
        transition: none;
    }
    .qg-guida-card:hover { transform: none; }
}

/* ---------- Mobile tweaks ---------- */

@media (max-width: 640px) {
    .qg-guida-page { padding: var(--qg-guida-space-4) var(--qg-guida-space-3); }
    .qg-guida-body,
    .qg-guida-definition,
    .qg-guida-scope { padding: var(--qg-guida-space-3) var(--qg-guida-space-4); }
    .qg-guida-chapter-divider { padding: var(--qg-guida-space-5) var(--qg-guida-space-4); }
    .qg-guida-card { padding: var(--qg-guida-space-4); }
}

/* ---------- Pagina Regole — render markup legacy ---------- */
/* Stili scoped a `.qg-guida-rule-section` per evitare leak su altre pagine.
 * Mappa le class del markup originale (block_6, block_7, list_, list_2, sotto_comma,
 * text-color-red, text-color-lightBlue) ai pattern visivi R&A. */

.qg-guida-rule {
    margin-bottom: var(--qg-guida-space-7);
    scroll-margin-top: 96px;
}

.qg-guida-rule__title {
    margin: 0 0 var(--qg-guida-space-4);
    color: var(--qg-guida-text);
    font-family: var(--qg-guida-font-heading);
    font-size: var(--qg-guida-fs-h2);
    font-weight: 800;
    line-height: var(--qg-guida-lh-heading);
}

.qg-guida-rule-section {
    margin-bottom: var(--qg-guida-space-5);
    scroll-margin-top: 96px;
}

.qg-guida-rule-section__label {
    margin: var(--qg-guida-space-6) 0 var(--qg-guida-space-3);
    padding: var(--qg-guida-space-3) var(--qg-guida-space-4);
    background: var(--qg-guida-navy);
    color: var(--qg-guida-bianco);
    border-radius: var(--qg-guida-radius-sm);
    font-family: var(--qg-guida-font-heading);
    font-size: var(--qg-guida-fs-h3);
    font-weight: 700;
    scroll-margin-top: 96px;
}

.qg-guida-rule-section__body {
    padding: var(--qg-guida-space-4) var(--qg-guida-space-5);
    background: var(--qg-guida-lavender);
    border: 1px solid var(--qg-guida-lavender-border);
    border-radius: var(--qg-guida-radius-md);
    color: var(--qg-guida-text);
}

.qg-guida-rule-section__body p.block_6,
.qg-guida-rule-section__body > p {
    margin: 0 0 var(--qg-guida-space-3);
}

.qg-guida-rule-section__body p:last-child { margin-bottom: 0; }

/* Liste — alta specificità + !important per battere reset Tailwind `ul{list-style:none}` */
.qg-guida-rule-section__body ul,
.qg-guida-rule-section__body ul.list_,
.qg-guida-rule-section__body ul.list_1 {
    margin: var(--qg-guida-space-2) 0 var(--qg-guida-space-3) var(--qg-guida-space-5) !important;
    padding-left: var(--qg-guida-space-3) !important;
    list-style: disc outside !important;
}

.qg-guida-rule-section__body ul.list_2 {
    margin: var(--qg-guida-space-2) 0 var(--qg-guida-space-2) var(--qg-guida-space-6) !important;
    padding-left: var(--qg-guida-space-3) !important;
    list-style: circle outside !important;
}

.qg-guida-rule-section__body li,
.qg-guida-rule-section__body li.block_7 {
    display: list-item !important;
    list-style-position: outside !important;
    margin-bottom: var(--qg-guida-space-2);
    line-height: var(--qg-guida-lh-body);
}

.qg-guida-rule-section__body li.block_7:last-child { margin-bottom: 0; }

/* Sotto-comma (es. 1.2a, 1.3b) — card interna leggermente offset */
.qg-guida-rule-section__body .sotto_comma {
    margin: var(--qg-guida-space-4) 0;
    padding: var(--qg-guida-space-3) var(--qg-guida-space-4);
    background: rgba(255, 255, 255, 0.5);
    border-left: 3px solid var(--qg-guida-navy);
    border-radius: 0 var(--qg-guida-radius-sm) var(--qg-guida-radius-sm) 0;
}

.qg-guida-rule-section__body .sotto_comma h3 {
    margin: 0 0 var(--qg-guida-space-2);
    color: var(--qg-guida-text);
    font-family: var(--qg-guida-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: var(--qg-guida-lh-heading);
}

.qg-guida-rule-section__body .sotto_comma .sotto_comma {
    background: rgba(26, 35, 128, 0.04);
    border-left-color: var(--qg-guida-link);
}

/* Sub-sub-comma N_Xy(z) — div con id che inizia con un paragrafo numerato */
.qg-guida-rule-section__body [id*="("] > p.block_6:first-child {
    font-weight: 600;
    color: var(--qg-guida-text);
}

.qg-guida-rule-section__body [id*="("] u {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: 700;
}

/* Semantic color classes legacy */
.qg-guida-rule-section__body .text-color-red,
.qg-guida-rule-section__body .text-color-red strong {
    color: var(--qg-guida-rosso-penalita);
    font-weight: 700;
}

.qg-guida-rule-section__body .text-color-lightBlue,
.qg-guida-rule-section__body .text-color-lightBlue strong {
    color: var(--qg-guida-link);
    font-weight: 400;
}

.qg-guida-rule-section__body em {
    font-style: italic;
}

/* Term glossario inline nelle regole — il parser PHP wrappa già <em>termine</em> in <a class="qg-guida-term"> */
.qg-guida-rule-section__body a.qg-guida-term em,
.qg-guida-rule-section__body a.qg-guida-term {
    color: var(--qg-guida-link);
}

/* Scope box dentro la regola */
.qg-guida-rule__scope {
    margin: 0 0 var(--qg-guida-space-5);
    padding: var(--qg-guida-space-4) var(--qg-guida-space-5);
    background: var(--qg-guida-azzurro-scopo);
    border-left: 4px solid var(--qg-guida-azzurro-scopo-border);
    border-radius: var(--qg-guida-radius-md);
}

.qg-guida-rule__scope-label {
    margin: 0 0 var(--qg-guida-space-2);
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-size: var(--qg-guida-fs-h4);
    font-weight: 700;
}

.qg-guida-rule__scope p { margin: 0 0 var(--qg-guida-space-2); }
.qg-guida-rule__scope p:last-child { margin-bottom: 0; }
.qg-guida-rule__scope ul,
.qg-guida-rule__scope ul.list_ {
    margin: var(--qg-guida-space-2) 0 0 var(--qg-guida-space-5) !important;
    padding-left: var(--qg-guida-space-3) !important;
    list-style: disc outside !important;
}
.qg-guida-rule__scope li,
.qg-guida-rule__scope li.block_7 {
    display: list-item !important;
    list-style-position: outside !important;
    margin-bottom: var(--qg-guida-space-1);
}

/* TOC numerico sidebar — varianti per pagina Regole */
.qg-guida-toc__link--rule {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.qg-guida-toc__link--rule .qg-guida-toc__rule-num {
    flex: 0 0 auto;
    min-width: 22px;
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-weight: 700;
    font-size: 0.78rem;
}

.qg-guida-toc__link--rule .qg-guida-toc__rule-title {
    flex: 1 1 auto;
    line-height: 1.3;
    font-size: 0.84rem;
}

/* ---------- Chiarimenti (integrazione dopo le Regole, come nel libro PDF) ---------- */

.qg-guida-clarifications {
    margin-top: var(--qg-guida-space-7);
    padding-top: var(--qg-guida-space-5);
    border-top: 2px solid var(--qg-guida-lavender-border);
}

.qg-guida-clarifications__intro {
    margin: 0 0 var(--qg-guida-space-4);
    padding: var(--qg-guida-space-2) var(--qg-guida-space-4);
    background: rgba(26, 35, 128, 0.04);
    border-radius: var(--qg-guida-radius-sm);
    color: var(--qg-guida-text-soft);
    font-family: var(--qg-guida-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.qg-guida-clarification-group {
    margin-bottom: var(--qg-guida-space-5);
}

.qg-guida-clarification-group__header {
    margin: var(--qg-guida-space-5) 0 var(--qg-guida-space-3);
    padding: var(--qg-guida-space-2) var(--qg-guida-space-4);
    background: var(--qg-guida-bianco);
    border: 1px solid var(--qg-guida-lavender-border);
    border-left: 4px solid var(--qg-guida-navy);
    border-radius: var(--qg-guida-radius-sm);
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: var(--qg-guida-lh-heading);
    scroll-margin-top: 96px;
}

.qg-guida-clarification {
    margin-bottom: var(--qg-guida-space-4);
    padding: var(--qg-guida-space-3) var(--qg-guida-space-4);
    background: var(--qg-guida-bianco);
    border: 1px solid var(--qg-guida-lavender-border);
    border-radius: var(--qg-guida-radius-md);
    scroll-margin-top: 96px;
}

.qg-guida-clarification__title {
    margin: 0 0 var(--qg-guida-space-2);
    color: var(--qg-guida-link);
    font-family: var(--qg-guida-font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.qg-guida-clarification__body {
    color: var(--qg-guida-text);
}

.qg-guida-clarification__body p.block_30,
.qg-guida-clarification__body p.block_29,
.qg-guida-clarification__body > p {
    margin: 0 0 var(--qg-guida-space-2);
}

.qg-guida-clarification__body p:last-child { margin-bottom: 0; }

/* Liste chiarimenti — stesso pattern delle regole */
.qg-guida-clarification__body ul,
.qg-guida-clarification__body ul.list_,
.qg-guida-clarification__body ul.list_1 {
    margin: var(--qg-guida-space-2) 0 var(--qg-guida-space-2) var(--qg-guida-space-5) !important;
    padding-left: var(--qg-guida-space-3) !important;
    list-style: disc outside !important;
}

.qg-guida-clarification__body ul.list_2 {
    margin: var(--qg-guida-space-2) 0 var(--qg-guida-space-2) var(--qg-guida-space-6) !important;
    padding-left: var(--qg-guida-space-3) !important;
    list-style: circle outside !important;
}

.qg-guida-clarification__body li,
.qg-guida-clarification__body li.block_7 {
    display: list-item !important;
    list-style-position: outside !important;
    margin-bottom: var(--qg-guida-space-1);
    line-height: var(--qg-guida-lh-body);
}

.qg-guida-clarification__body p.block_36 {
    margin: var(--qg-guida-space-3) 0 var(--qg-guida-space-2);
    color: var(--qg-guida-navy);
    font-family: var(--qg-guida-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
}

.qg-guida-clarification__body em { font-style: italic; }

/* ---------- Palette preview switcher (banner) ---------- */
/* Visibile solo su ?palette=default|preview|randa-web. Su URL standard non si mostra. */

.qg-palette-switcher {
    position: sticky;
    top: 84px;
    z-index: 60;
    margin: 0 0 var(--qg-guida-space-5);
    padding: 10px 16px;
    background: var(--qg-guida-navy);
    color: var(--qg-guida-bianco);
    border-radius: var(--qg-guida-radius-md);
    box-shadow: var(--qg-guida-shadow-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--qg-guida-font-heading);
    font-size: 0.88rem;
}

.qg-palette-switcher__label {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.qg-palette-switcher__current {
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--qg-guida-radius-sm);
}

.qg-palette-switcher__actions {
    display: inline-flex;
    gap: 8px;
}

.qg-palette-switcher__btn {
    padding: 6px 14px;
    background: var(--qg-guida-bianco);
    color: var(--qg-guida-navy);
    border-radius: var(--qg-guida-radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid transparent;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.qg-palette-switcher__btn:hover { opacity: 0.9; }
.qg-palette-switcher__btn:active { transform: scale(0.97); }

.qg-palette-switcher__btn:focus-visible {
    outline: 2px solid var(--qg-guida-bianco);
    outline-offset: 3px;
}

.qg-palette-switcher__btn--active {
    background: transparent;
    color: var(--qg-guida-bianco);
    border-color: var(--qg-guida-bianco);
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 26c (V.3.45) — Diagrammi ufficiali R&A inline nelle sezioni delle Regole.
 *
 * Inseriti via Opzione B: dopo il body della sotto-sezione (es. dopo il testo
 * della 17.1d compare il diagramma corrispondente). Il blocco e' un <aside>
 * con role implicito di figura aggiuntiva, non sostituisce il testo.
 *
 * Layout: single-column su mobile, 2 colonne su sezione con 2+ diagrammi
 * (es. la 17.2 ha 3 figure dell'eccezione 17.2e + opzioni 17.2b).
 * ------------------------------------------------------------------------- */

.qg-guida-rule-section__diagrammi {
    margin: 24px 0 8px;
    padding: 20px;
    background: var(--qg-guida-lavanda, #eef0f8);
    border-left: 4px solid var(--qg-guida-navy, #1e3a8a);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .qg-guida-rule-section__diagrammi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Quando c'e' un solo diagramma nella sezione, occupa tutta la larghezza
       per leggibilita' migliore (testo nei diagrammi 200dpi). */
    .qg-guida-rule-section__diagrammi:has(> .qg-guida-diagramma:only-of-type) {
        grid-template-columns: 1fr;
    }
}

.qg-guida-diagramma {
    margin: 0;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.qg-guida-diagramma__img {
    display: block;
    width: 100%;
    height: auto;
    background: #ffffff;
}

.qg-guida-diagramma__caption {
    padding: 10px 14px;
    font-family: var(--qg-guida-font-sans, system-ui, sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--qg-guida-navy, #1e3a8a);
    background: #ffffff;
    border-top: 1px solid var(--qg-guida-lavanda, #eef0f8);
}

.qg-guida-diagramma__credit {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(30, 58, 138, 0.25);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--qg-guida-grigio-scuro, #475569);
    font-style: italic;
}

@media (prefers-reduced-motion: no-preference) {
    .qg-guida-diagramma {
        transition: box-shadow 200ms ease, transform 200ms ease;
    }
    .qg-guida-diagramma:hover {
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
        transform: translateY(-1px);
    }
}

/* ---------------------------------------------------------------------------
 * V.3.54 — CTA "Esercitati su questa Regola/Definizione" inline nella guida.
 * Apre /quiz_per_regola.php?rule=N.X o /quiz_per_definizione.php?def=Anchor.
 * Pill con icona + label + counter, palette navy QuizGolf (--def: lavender).
 * ------------------------------------------------------------------------- */

.qg-guida-quiz-cta {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--qg-guida-navy, #1e3a8a);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}

.qg-guida-quiz-cta:hover {
    background: var(--qg-guida-navy-dark, #152c66);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    color: #fff;
}

.qg-guida-quiz-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.qg-guida-quiz-cta .material-symbols-outlined {
    font-size: 18px;
}

.qg-guida-quiz-cta__count {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.qg-guida-quiz-cta__arrow {
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.qg-guida-quiz-cta:hover .qg-guida-quiz-cta__arrow {
    transform: translateX(2px);
}

/* V.3.85 Audit Fernando: variante --def per le definizioni ora usa blu
   navy (uguale alla variante regole) anziché lavender, su esplicita
   richiesta di Fernando. Resta solo il modifier per coerenza con i
   selettori PHP esistenti.
   Testo bianco gia' ereditato da .qg-guida-quiz-cta. */
.qg-guida-quiz-cta--def {
    background: var(--qg-guida-navy, #1e3a8a);
}
.qg-guida-quiz-cta--def:hover {
    background: var(--qg-guida-navy-dark, #152c66);
}

@media (prefers-reduced-motion: reduce) {
    .qg-guida-quiz-cta,
    .qg-guida-quiz-cta__arrow {
        transition: none;
    }
    .qg-guida-quiz-cta:hover {
        transform: none;
    }
}