/* 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 ---------- */
/* `.category-description p` deliberately omitted: the wrapper uses
 * `font: var(--ty-cat-desc)` (16px Inter/text-muted) and inner <p>
 * must inherit, so a brand page (text wrapped in <p>) and a category
 * page (bare text) render identically. Only spacing/margin is set
 * for <p> here. */
.std p,
.cms-page p {
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--c-text);
    margin: 0 0 1em;
}
/* Brand pages wrap copy in <p>, category pages emit bare text. The
 * wrapper's `font: var(--ty-cat-desc)` shorthand must reach <p>, so
 * here we restore inheritance (the `.std p` rule above otherwise
 * forces 14px/text-color since brand page wrapper is .category-description.std). */
.category-description p {
    font: inherit;
    color: inherit;
    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: 20px;
    padding: 6px 0 16px;
    border-bottom: 0.5px solid var(--sys-hairline);
    /* No max-width: descrizione fills the full col-main (default) o
       l'intera page width in 1column. Il 960px reading-cap precedente
       risultava troppo stretto sulle category page con sidebar 240px,
       perché la col-main è già ~928px e il cap non lasciava margine. */
}

/* ---------- 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);
}

/* ---------- Brand option page header (logo + title inline) ----------
 * Pagine /airoh-helmets/ e simili: logo brand + titolo H1 affiancati
 * sulla stessa riga (logo a sinistra come pill compatto cream, titolo
 * a destra). La cream pill mantiene coerenza visiva con la rail brand
 * del megamenu e con la cream tile della option page brand.
 *
 * Mobile: stack verticale (logo sopra, titolo sotto). */
.shopby-page-title--with-logo {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.shopby-page-title--with-logo h1 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
}
.shopby-page-title--with-logo .shopby-option-image {
    order: 2;
}
.shopby-page-title .shopby-option-image {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 26px;
    background: linear-gradient(180deg, #faf7f0 0%, #efeadd 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
    color: #14110d;                  /* drives inline-SVG currentColor */
}
.shopby-page-title .shopby-option-image img,
.shopby-page-title .shopby-option-image .shopby-option-logo {
    display: block;
    /* Explicit height drives the size — inline SVGs without width/height
       attributes default to 300x150 unless one dimension is fixed. width:auto
       lets the viewBox aspect ratio compute the other axis. */
    height: 72px;
    width: auto;
    max-width: 280px;
    margin: 0;
    object-fit: contain;
    border-radius: 0;
}
.shopby-page-title .shopby-option-image img {
    filter: saturate(0.92);
}
@media (max-width: 600px) {
    .shopby-page-title--with-logo {
        gap: 12px;
    }
    .shopby-page-title .shopby-option-image {
        padding: 12px 18px;
    }
    .shopby-page-title .shopby-option-image img,
    .shopby-page-title .shopby-option-image .shopby-option-logo {
        height: 56px;
        max-width: 200px;
    }
}

/* ---------- 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);
}