/**
 * Shared template typography
 * ----------------------------------------------------
 * Scope: supported taxonomy archives, product singles and post singles.
 * ETheme-Block uses the same --eth-* scale and semantic colour vocabulary;
 * this layer gives the theme templates a matching contract without changing
 * loop-card variants or headings inside the article/product body.
 */

/* Page-level H1: matches the plugin Hero default (0.8 × theme H1). */
.eth-hero__title,
.eth-product-info__title,
.eth-article-header__title {
    font-size: calc(var(--eth-fs-h1) * var(--eth-template-title-scale, 0.8));
    font-family: var(--eth-font-heading);
    font-weight: var(--eth-fw-bold);
    line-height: var(--eth-lh-heading);
    white-space: normal;
    text-wrap: wrap;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Archive/product/article section H2s: matches regular plugin module headings. */
.eth-section__title,
.eth-product-section__title {
    font-size: calc(var(--eth-fs-h2) * var(--eth-template-section-scale, 1));
    font-family: var(--eth-font-heading);
    font-weight: var(--eth-fw-heading);
    line-height: var(--eth-lh-heading);
    color: var(--eth-text-title);
    white-space: normal;
    text-wrap: wrap;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Supporting subtitle and introductory copy share the plugin body contract. */
.eth-hero__subtitle,
.eth-product-info__subtitle,
.eth-article-header__subtitle {
    font-size: calc(var(--eth-fs-h4) * var(--eth-template-description-scale, 1));
    font-family: var(--eth-font-body);
    color: var(--eth-text-muted);
    white-space: normal;
    text-wrap: wrap;
    word-break: normal;
    overflow-wrap: break-word;
}

.eth-hero__content > p,
.eth-hero__content > ul,
.eth-hero__content > ol,
.eth-image-text__content > p,
.eth-image-text__content > ul,
.eth-image-text__content > ol,
.eth-product-info__description,
.eth-article-header__excerpt {
    font-size: calc(var(--eth-fs-body) * var(--eth-template-description-scale, 1));
    font-family: var(--eth-font-body);
    color: var(--eth-text-muted);
    line-height: var(--eth-lh-body);
}

/* Keep explicitly coloured choices aligned with ETheme-Block's five options. */
body.eth-template-title-color-primary :is(.eth-hero__title, .eth-product-info__title),
body.eth-template-title-color-primary .eth-article-header .eth-article-header__title {
    color: var(--eth-primary);
}
body.eth-template-title-color-secondary :is(.eth-hero__title, .eth-product-info__title),
body.eth-template-title-color-secondary .eth-article-header .eth-article-header__title {
    color: var(--eth-secondary);
}
body.eth-template-title-color-dark :is(.eth-hero__title, .eth-product-info__title),
body.eth-template-title-color-dark .eth-article-header .eth-article-header__title {
    color: var(--eth-dark);
}
body.eth-template-title-color-light :is(.eth-hero__title, .eth-product-info__title),
body.eth-template-title-color-light .eth-article-header .eth-article-header__title {
    color: var(--eth-light);
}
body.eth-template-title-color-theme .eth-article-header:not(.eth-article-header--has-bg) .eth-article-header__title {
    color: var(--eth-text-title);
}

body.eth-template-section-color-primary :is(.eth-section__title, .eth-product-section__title) { color: var(--eth-primary); }
body.eth-template-section-color-secondary :is(.eth-section__title, .eth-product-section__title) { color: var(--eth-secondary); }
body.eth-template-section-color-dark :is(.eth-section__title, .eth-product-section__title) { color: var(--eth-dark); }
body.eth-template-section-color-light :is(.eth-section__title, .eth-product-section__title) { color: var(--eth-light); }

body.eth-template-description-color-primary :is(.eth-hero__subtitle, .eth-product-info__subtitle, .eth-article-header__subtitle, .eth-hero__content > p, .eth-hero__content > ul, .eth-hero__content > ol, .eth-image-text__content > p, .eth-image-text__content > ul, .eth-image-text__content > ol, .eth-product-info__description, .eth-article-header__excerpt) { color: var(--eth-primary); }
body.eth-template-description-color-secondary :is(.eth-hero__subtitle, .eth-product-info__subtitle, .eth-article-header__subtitle, .eth-hero__content > p, .eth-hero__content > ul, .eth-hero__content > ol, .eth-image-text__content > p, .eth-image-text__content > ul, .eth-image-text__content > ol, .eth-product-info__description, .eth-article-header__excerpt) { color: var(--eth-secondary); }
body.eth-template-description-color-dark :is(.eth-hero__subtitle, .eth-product-info__subtitle, .eth-article-header__subtitle, .eth-hero__content > p, .eth-hero__content > ul, .eth-hero__content > ol, .eth-image-text__content > p, .eth-image-text__content > ul, .eth-image-text__content > ol, .eth-product-info__description, .eth-article-header__excerpt) { color: var(--eth-dark); }
body.eth-template-description-color-light :is(.eth-hero__subtitle, .eth-product-info__subtitle, .eth-article-header__subtitle, .eth-hero__content > p, .eth-hero__content > ul, .eth-hero__content > ol, .eth-image-text__content > p, .eth-image-text__content > ul, .eth-image-text__content > ol, .eth-product-info__description, .eth-article-header__excerpt) { color: var(--eth-light); }

/* Custom colours are allowed to win on image-backed article Heroes. */
body.eth-template-description-color-primary .eth-article-header .eth-article-header__subtitle,
body.eth-template-description-color-primary .eth-article-header .eth-article-header__excerpt { color: var(--eth-primary); }
body.eth-template-description-color-secondary .eth-article-header .eth-article-header__subtitle,
body.eth-template-description-color-secondary .eth-article-header .eth-article-header__excerpt { color: var(--eth-secondary); }
body.eth-template-description-color-dark .eth-article-header .eth-article-header__subtitle,
body.eth-template-description-color-dark .eth-article-header .eth-article-header__excerpt { color: var(--eth-dark); }
body.eth-template-description-color-light .eth-article-header .eth-article-header__subtitle,
body.eth-template-description-color-light .eth-article-header .eth-article-header__excerpt { color: var(--eth-light); }

@media (max-width: 768px) {
    .eth-hero__title,
    .eth-product-info__title,
    .eth-article-header__title {
        line-height: var(--eth-lh-heading);
    }
}