/**
 * Product content.
 *
 * Applies the product line colors to editor-built content inside a
 * pl-color--{slug} <main> (front end) or a pl-color--{slug} editor canvas
 * (see assets/js/editor.js). Loads only on single products, product line
 * pages and the product edit screen, so nothing here reaches other pages
 * or sites.
 */

/* ── Headings ─────────────────────────────────────────────────────────────
 * :where() keeps specificity low so blocks that set their own heading
 * color, and headings given a color in the editor (.has-text-color), keep
 * it. The editor selector matches the front end's specificity (0,1,1) and
 * post content scope, so the same headings stay black in both. The canvas
 * is the iframe <body>, or a <div> when the editor isn't iframed. The
 * editor root container carries .wp-block-post-content in post-only mode
 * too.
 */

main[class*="pl-color--"] :where(.wp-block-post-content) :where(h2, h3, h4, h5, h6):where(:not(.has-text-color)),
:is(body, div):where(.editor-styles-wrapper)[class*="pl-color--"] :where(.wp-block-post-content) :where(h2, h3, h4, h5, h6):where(:not(.has-text-color)) {
	color: var(--pl-heading-color, currentColor);
}

/* ── Theme primary color ──────────────────────────────────────────────────
 * The CHS blocks take their accent color from --wp--custom--color--primary
 * (Payback brown in the payback-nutrition theme). Pointing it at the
 * product heading color inside the post content makes any block an editor
 * adds follow the product. It is scoped to the post content only: the
 * header, footer, Product Hero and the related products / dealer sections
 * keep the theme colors.
 *
 * The heading color, not the base color, because blocks mostly use primary
 * for text on white; for swine and organic the base color is too light for
 * that. Secondary (dark brown) is left alone.
 */

main[class*="pl-color--"] .wp-block-post-content,
.editor-styles-wrapper[class*="pl-color--"] .wp-block-post-content {
	--wp--custom--color--primary: var(--pl-heading-color);
}

/* Buttons keep the theme primary, in a product color band too. The theme
 * value is captured at :root, before the post content re-points it, and
 * handed back to the buttons. Species button styles set their own colors
 * and aren't affected. */

:root {
	--pl-theme-primary: var(--wp--custom--color--primary);
}

:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) :is(.wp-block-button__link, .wp-element-button) {
	--wp--custom--color--primary: var(--pl-theme-primary);
}

/* ── Color bands ──────────────────────────────────────────────────────────
 * Blocks that fill a whole area with primary get the base (band) color, and
 * their white text switches to --pl-text-color-on-bg, which is black on the
 * light lines (dairy, poultry, swine, organic, overflow).
 */

:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) :is(.full-width-cta, .hero--bg-primary, .breadcrumbs--blue) {
	background-color: var(--pl-base-color);
}

/* !important: full-width-cta/style.css sets this color with !important. */
:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) .full-width-cta * {
	color: var(--pl-text-color-on-bg) !important;
}

:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) :is(
	.hero--bg-primary .hero__text,
	.hero--bg-primary .hero__text :not(.wp-block-button__link, h1, h2, h3, h4, h5, h6),
	.hero.hero--bg-primary .hero__caption,
	.breadcrumbs--blue .breadcrumbs__link,
	.breadcrumbs--blue .breadcrumbs__link:hover,
	.breadcrumbs--blue .breadcrumbs__link:focus,
	.breadcrumbs--blue .breadcrumbs__item::after,
	.breadcrumbs--blue .breadcrumbs__current
) {
	color: var(--pl-text-color-on-bg);
}

:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) .hero--bg-primary .hero__text .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--pl-text-color-on-bg);
	color: var(--pl-text-color-on-bg);
}

/* ── White text on primary ────────────────────────────────────────────────
 * Open, active and hover states that put white text on primary.
 */

:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) :is(
	.tabbed-content--nav-left .tabbed-content__tab.is-active,
	.wp-block-acf-carousel .carousel__btn:hover,
	.wp-block-acf-carousel .carousel__btn:focus-visible,
	.recent-news__cta-link:hover,
	.address-by-country__radio-label:hover,
	.address-by-country__radio:checked + .address-by-country__radio-label,
	.news-grid-filter-button,
	.news-grid-modal__checkbox:checked + .news-grid-modal__checkbox-text,
	.news-grid-modal__close:hover,
	.news-grid-pagination .page-numbers.current
) {
	color: var(--pl-text-color-on-bg);
}

/* ── Product color bands ──────────────────────────────────────────────────
 * The "Product color" palette entry (class-colors.php). At :root its preset
 * var falls back to the theme primary; re-pointing it inside each
 * pl-color--{slug} element makes it resolve to that element's line color.
 *
 * On a product color background, text and headings use
 * --pl-text-color-on-bg: white on the dark lines, black on the light ones
 * (white on swine yellow, for example, fails contrast). Blocks inside a
 * band that use the theme primary for text (headings in CHS Media and
 * Text, for example) get the band text color too. Colors set
 * in the editor (.has-text-color) win. A CHS Hero with its colored
 * background on is treated the same way.
 */

[class*="pl-color--"] {
	--wp--preset--color--product: var(--pl-base-color);
}

:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) :is(.has-product-background-color, .hero--bg-primary) {
	--wp--custom--color--primary: var(--pl-text-color-on-bg);
}

:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) .has-product-background-color:not(.has-text-color) {
	color: var(--pl-text-color-on-bg);
}

:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) :is(.has-product-background-color, .hero--bg-primary) :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: var(--pl-text-color-on-bg);
}

/* Links in a product color band take the band text color too, whatever
 * link color was picked in the editor. Buttons are left alone. */
:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) .has-product-background-color a:not(.wp-block-button__link, .wp-element-button) {
	color: var(--pl-text-color-on-bg);
	text-decoration: underline;
}

/* Outline and Link buttons in a product color band take the band text
 * color too, for text, border and the Link arrow. They have no fill, so the
 * theme brown handed back to buttons above would sit on the band color. */
:is(main[class*="pl-color--"] .wp-block-post-content, .editor-styles-wrapper[class*="pl-color--"]) .has-product-background-color .wp-block-button:is(.is-style-outline, .is-style-link) .wp-block-button__link {
	--wp--custom--color--primary: var(--pl-text-color-on-bg);
	--wp--custom--color--secondary: var(--pl-text-color-on-bg);
}

/* ── Product line breadcrumbs ─────────────────────────────────────────────
 * Hidden on mobile on product line pages only; single products keep them.
 */

@media screen and (max-width: 767px) {
	.tax-chs_inc_product_line .wp-block-acf-breadcrumbs {
		display: none;
	}
}

.tax-chs_inc_product_line main.wp-block-group {
  margin-block: 0;
}