/* Boi_Theme content typography — CMS blocks + category descriptions
 * ==================================================================
 * I contenuti editoriali (CMS blocks, category descriptions) contengono
 * HTML misto con inline styles hardcoded (colori esadecimali vecchi,
 * font-family preimpostati dai WYSIWYG). Queste regole normalizzano:
 *   - Font family al tema (Inter body, Roboto Condensed headings)
 *   - Spacing consistente tra <p>, <h*>, <ul>, <ol>
 *   - Colors via tokens invece di hardcoded
 *   - Inline color:#xxx WYSIWYG override per la palette tema
 *   - Link style coerente
 *
 * Il contenuto DB NON viene modificato — solo override CSS al render.
 *
 * Scope: `.std` (vanilla CMS wrapper), `.category-description`,
 * `.cms-page`, `.page-title` — i wrapper standard usati dai template
 * catalog/category/view.phtml, cms/content.phtml, cms/page.phtml.
 */

/* ---------- Font family enforcement ---------- */
.std,
.std *,
.category-description,
.category-description *,
.cms-page .std,
.cms-page .std * {
    font-family: var(--boi-font-body);
}
.std h1,
.std h2,
.std h3,
.std h4,
.std h5,
.std h6,
.category-description h1,
.category-description h2,
.category-description h3,
.category-description h4,
.category-description h5,
.category-description h6 {
    font-family: var(--boi-font-headings);
    color: var(--sys-ink);
    letter-spacing: -0.01em;            /* SF-style optical tight */
    line-height: var(--lh-tight);
    margin: 1.25em 0 0.6em;
    font-weight: 600;
}
.std h1, .category-description h1 { font-size: var(--fs-2xl); }
.std h2, .category-description h2 { font-size: var(--fs-xl); }
.std h3, .category-description h3 { font-size: var(--fs-lg); }
.std h4, .category-description h4 { font-size: var(--fs-md); }
.std h5, .category-description h5 { font-size: var(--fs-base); }
.std h6, .category-description h6 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Paragraph + spacing ---------- */
.std p,
.category-description p,
.cms-page p {
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--c-text);
    margin: 0 0 1em;
}
.std > *:first-child,
.category-description > *:first-child,
.cms-page > *:first-child {
    margin-top: 0;
}
.std > *:last-child,
.category-description > *:last-child,
.cms-page > *:last-child {
    margin-bottom: 0;
}

/* ---------- Lists (già base in styles.css, solo refinement) ---------- */
.std ul li,
.std ol li,
.category-description ul li,
.category-description ol li {
    line-height: var(--lh-relaxed);
    margin-bottom: 0.3em;
}

/* ---------- Text emphasis ---------- */
.std strong,
.category-description strong,
.cms-page strong {
    font-weight: 700;
    color: var(--sys-ink);
}
.std em,
.category-description em {
    font-style: italic;
    color: var(--sys-ink);
}

/* ---------- Links ---------- */
.std a,
.category-description a,
.cms-page a {
    color: var(--c-link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--t), border-bottom-color var(--t);
}
.std a:hover,
.category-description a:hover,
.cms-page a:hover {
    color: var(--c-link-hover);
    border-bottom-color: currentColor;
}

/* ---------- Override inline styles dei WYSIWYG vecchi ----------
 * I CMS block admin-uploaded hanno tipicamente `style="color: #RRGGBB"`
 * o `style="font-family: ..."` incorporato — residuo del WYSIWYG.
 * Lascio i colori custom (tipo verde promo #339966) perché sono scelte
 * di copywriting intenzionali, ma resetto i font-family forzati a quello
 * del tema (priorità bassa: inline style vince sempre, ma la selettività
 * di `* !important` è invasiva, quindi rimane un residuo).
 *
 * Tecnica: override via attribute selector SOLO dove inline style
 * imposta font-family (pattern noto nei WYSIWYG). I colori rimangono
 * intatti. */
.std [style*="font-family"],
.category-description [style*="font-family"],
.cms-page [style*="font-family"] {
    font-family: var(--boi-font-body) !important;
}

/* ---------- Category description wrapper: layout ---------- */
.category-description {
    margin-bottom: 24px;
    padding: 20px 0;
    border-bottom: 0.5px solid var(--sys-hairline);
    max-width: 960px;                    /* misura optimale per lettura */
}

/* ---------- Category page title ---------- */
.page-title h1 {
    font-family: var(--boi-font-headings);
    letter-spacing: -0.01em;
    font-weight: 700;
}

/* ---------- Images in content: responsive + spacing ---------- */
.std img,
.category-description img,
.cms-page img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
    border-radius: var(--r-sm);
}

/* ---------- Blockquote (poco usato ma se capita) ---------- */
.std blockquote,
.category-description blockquote {
    border-left: 3px solid var(--sys-blue);
    background: var(--sys-surface-alt);
    padding: 12px 20px;
    margin: 1em 0;
    font-style: italic;
    color: var(--sys-ink-soft);
}