/*
 * Workshop Catalog: the visual skin.
 *
 * 1. Tokens: theme.json presets become the --aff-* names the plugin's components read (see DESIGN.md).
 * 2. Base: page, headings, links, focus.
 * 3. Chrome: utility bar, header, navigation, search, footer.
 * 4. Home page: hero and sections.
 * 5. Content pages.
 * 6. Component refinements on top of the plugin's own component stylesheet.
 *
 * Restraint rules: corners 4 to 6 px, 1 px borders, no blur shadows, no gradient fills, no glass. Safety yellow is a
 * highlight only: it marks the current item, the project tick and the tray button, never a large surface.
 */

/* ------------------------------------------------------------------ 1. tokens */
:root {
	--wc-chalk: var(--wp--preset--color--chalk, #f7f9fa);
	--wc-white: var(--wp--preset--color--white, #fff);
	--wc-ink: var(--wp--preset--color--ink, #182b3a);
	--wc-workshop: var(--wp--preset--color--workshop, #225c88);
	--wc-workshop-strong: var(--wp--preset--color--workshop-strong, #1a4a70);
	--wc-yellow: var(--wp--preset--color--yellow, #f2c94c);
	--wc-steel: var(--wp--preset--color--steel, #647583);
	--wc-steel-strong: var(--wp--preset--color--steel-strong, #4f6070);
	--wc-tint: var(--wp--preset--color--tint, #e8eef2);
	--wc-line: var(--wp--preset--color--line, #d5dde3);
	--wc-display: var(--wp--preset--font-family--display, 'Barlow', 'Segoe UI', system-ui, sans-serif);
	--wc-body: var(--wp--preset--font-family--body, 'Source Sans 3', system-ui, sans-serif);
	--wc-gutter: clamp(1rem, 4vw, 2rem);
	--wc-wide: 76rem;
	--wc-section: clamp(2.75rem, 6vw, 5rem);

	/* Names the plugin's component stylesheet reads. */
	--aff-color-ink: var(--wc-ink);
	--aff-color-muted: var(--wc-steel-strong);
	--aff-color-surface: var(--wc-white);
	--aff-color-page: var(--wc-chalk);
	--aff-color-tint: var(--wc-tint);
	--aff-color-line: var(--wc-line);
	--aff-color-control: var(--wc-steel);
	--aff-color-brand: var(--wc-workshop);
	--aff-color-brand-strong: var(--wc-workshop-strong);
	--aff-color-brand-ink: var(--wc-white);
	--aff-color-accent: var(--wc-yellow);
	--aff-color-focus: var(--wc-ink);
	--aff-color-positive: var(--wp--preset--color--positive, #176b45);
	--aff-color-negative: var(--wp--preset--color--negative, #b3261e);
	--aff-font-display: var(--wc-display);
	--aff-font-body: var(--wc-body);
	--aff-radius-control: 4px;
	--aff-radius-card: 6px;
}

/* ------------------------------------------------------------------ 2. base */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--wc-chalk); color: var(--wc-ink); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.wp-site-blocks { overflow-x: clip; }
.wp-site-blocks > * + * { margin-block-start: 0; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { text-wrap: balance; }
:where(.wp-site-blocks) :focus-visible { outline: 3px solid var(--wc-ink); outline-offset: 3px; }
.skip-link:focus { position: fixed; z-index: 100000; top: .5rem; left: .5rem; padding: .75rem 1rem; background: var(--wc-ink); color: var(--wc-white); font-weight: 700; clip: auto; clip-path: none; width: auto; height: auto; }
.wc-wrap { width: 100%; max-width: calc(var(--wc-wide) + 2 * var(--wc-gutter)); margin-inline: auto; padding-inline: var(--wc-gutter); box-sizing: border-box; }
.wc-wrap > * { max-width: none; }

/* ------------------------------------------------------------------ 3. chrome */
.wc-utility { background: var(--wc-ink); color: var(--wc-chalk); padding: .5rem var(--wc-gutter); }
.wc-utility__text, .wc-utility p { margin: 0; font-size: .875rem; line-height: 1.4; text-align: center; }
.wc-utility a { color: var(--wc-yellow); font-weight: 600; }
.wc-utility :focus-visible { outline-color: var(--wc-yellow); }

.wc-header { background: var(--wc-white); border-bottom: 1px solid var(--wc-line); }
.wc-header__bar { gap: .75rem 1.5rem; padding-block: .875rem; }
.wc-brand { gap: .75rem; }
.wc-site-title, .wc-site-title a { margin: 0; font-family: var(--wc-display); font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--wc-ink); text-decoration: none; }
.wc-logo img { display: block; width: auto; height: 44px; }
.wc-header__actions { gap: .5rem; flex: 0 0 auto; }
.wc-shop-link, .wc-compare-link { margin: 0; }
.wc-shop-link a, .wc-compare-link a {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .875rem; border-radius: 4px;
	font-weight: 700; text-decoration: none; white-space: nowrap;
}
.wc-shop-link a { border: 1px solid var(--wc-workshop); background: var(--wc-workshop); color: var(--wc-white); }
.wc-shop-link a:hover { border-color: var(--wc-workshop-strong); background: var(--wc-workshop-strong); color: var(--wc-white); }
.wc-compare-link a { border: 1px solid var(--wc-steel); background: var(--wc-white); color: var(--wc-ink); }
.wc-compare-link a:hover { background: var(--wc-tint); }
.wc-compare-link__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem; border-radius: 999px; background: var(--wc-yellow); color: var(--wc-ink); font-size: .8125rem; line-height: 1; }

.wc-search { flex: 1 1 18rem; max-width: 34rem; margin: 0; }
.wc-search .wp-block-search__inside-wrapper { gap: 0; border: 1px solid var(--wc-steel); border-radius: 4px; background: var(--wc-white); overflow: hidden; padding: 0; }
.wc-search .wp-block-search__input { min-height: 46px; padding: 0 .875rem; border: 0; background: transparent; color: var(--wc-ink); font: inherit; }
.wc-search .wp-block-search__input:focus-visible { outline-offset: -3px; }
.wc-search .wp-block-search__button { min-height: 46px; margin: 0; padding: 0 1.125rem; border: 0; border-radius: 0; background: var(--wc-workshop); color: var(--wc-white); font-weight: 700; }
.wc-search .wp-block-search__button:hover { background: var(--wc-workshop-strong); }
.wc-search .wp-block-search__label { font-weight: 700; margin-bottom: .375rem; }
.wc-search--page { max-width: 36rem; }

.wc-header__nav { border-top: 1px solid var(--wc-line); background: var(--wc-white); }
.wc-nav { width: 100%; }
.wc-nav .wp-block-navigation__container { gap: 0 .25rem; }
.wc-nav .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 48px; padding: 0 .75rem; border-bottom: 3px solid transparent; color: var(--wc-ink); font-weight: 600; text-decoration: none; }
.wc-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--wc-steel); }
.wc-nav .current-menu-item > .wp-block-navigation-item__content, .wc-nav [aria-current="page"] { border-bottom-color: var(--wc-yellow); }
.wc-nav .wp-block-navigation__responsive-container-open { min-height: 48px; min-width: 48px; color: var(--wc-ink); }
.wc-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wc-white); color: var(--wc-ink); padding: 1rem var(--wc-gutter); }
.wc-nav .is-menu-open .wp-block-navigation-item__content { min-height: 52px; font-size: 1.25rem; border-bottom: 1px solid var(--wc-line); width: 100%; }

.wc-footer { margin-top: var(--wc-section); padding-block: clamp(2.25rem, 5vw, 3.5rem); background: var(--wc-ink); color: var(--wc-chalk); }
.wc-footer a { color: var(--wc-chalk); text-decoration: underline; text-underline-offset: 3px; }
.wc-footer a:hover { color: var(--wc-yellow); }
.wc-footer :focus-visible { outline-color: var(--wc-yellow); }
.wc-footer h2 { margin: 0 0 .75rem; color: var(--wc-white); font-size: 1.375rem; }
.wc-footer h2::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: .75rem; background: var(--wc-yellow); }
.wc-footer__cols { gap: 2rem; margin-bottom: 1.5rem; }
.wc-footer__list { margin: 0; padding: 0; list-style: none; }
.wc-footer__list li { margin: 0; }
.wc-footer__list a { display: inline-flex; align-items: center; min-height: 44px; }
.wc-footer .aff-disclosure, .wc-footer__legal { max-width: 52rem; margin: 0 0 1rem; color: #c9d3da; font-size: .9375rem; }
.wc-footer .aff-disclosure a, .wc-footer .aff-disclosure__link { color: var(--wc-chalk); }

/* ------------------------------------------------------------------ 4. home page */
.wc-home > * + * { margin-block-start: 0; }
.wc-section { padding-block: var(--wc-section); }
.wc-section--tint { background: var(--wc-tint); }
.wc-section-title { position: relative; margin: 0 0 1rem; padding-top: 1.125rem; font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3rem); }
.wc-section-title::before {
	content: ""; position: absolute; top: 0; left: 0; width: 5.5rem; height: 12px; box-sizing: border-box; border-bottom: 2px solid var(--wc-ink);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='10'%3E%3Crect width='2' height='10' fill='%23182b3a'/%3E%3C/svg%3E") repeat-x left top;
}
.wc-section-title::after { content: ""; position: absolute; top: 0; left: 5.5rem; width: 12px; height: 12px; background: var(--wc-yellow); }
.wc-lede { margin: 0 0 1.5rem; max-width: 42rem; color: var(--wc-ink); }
.wc-more { margin: 1.5rem 0 0; font-weight: 700; }

.wc-hero { position: relative; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); background: var(--wc-chalk); border-bottom: 1px solid var(--wc-line); }
.wc-hero__inner { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.wc-hero__title { margin: 0 0 1rem; font-size: clamp(2.5rem, 1.2rem + 4.4vw, 4.25rem); line-height: 1; letter-spacing: 0; max-width: 18ch; }
.wc-hero__lede { margin: 0 0 1.5rem; max-width: 34rem; }
.wc-hero__actions { gap: .75rem; }
.wc-hero__actions .wp-block-button__link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.375rem; font-size: 1.0625rem; font-weight: 700; text-decoration: none; }
.wc-hero__actions .is-style-outline .wp-block-button__link { background: var(--wc-white); color: var(--wc-workshop); border: 2px solid var(--wc-workshop); }
.wc-hero__actions .is-style-outline .wp-block-button__link:hover { background: var(--wc-tint); color: var(--wc-workshop-strong); }
.wc-hero__image { margin: 0; border: 1px solid var(--wc-line); border-bottom: 10px solid var(--wc-yellow); border-radius: 6px 6px 0 0; background: var(--wc-tint); overflow: hidden; }
.wc-hero__image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.wc-principles { gap: 2rem; margin: 0; }
.wc-principles h3 { margin: 0 0 .5rem; font-size: 1.625rem; }
.wc-principles p { margin: 0; }

/* ------------------------------------------------------------------ 5. content pages */
.wc-main { padding-block: clamp(1.5rem, 4vw, 2.5rem) 0; }
.wc-page-title { margin: 0 0 1rem; font-size: clamp(2.5rem, 1.6rem + 3.4vw, 3.75rem); }
.wc-prose { max-width: 44rem; }
.wc-prose > * + * { margin-block-start: 1.125rem; }
.wc-prose h2 { margin-top: 2rem; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.wc-prose h3 { margin-top: 1.5rem; }
.wc-prose ul, .wc-prose ol { padding-left: 1.375rem; }
.wc-prose li + li { margin-top: .375rem; }
.wc-prose a { text-underline-offset: 3px; }
.wc-feature-image { margin: 0 0 1.5rem; border: 1px solid var(--wc-line); border-radius: 6px; overflow: hidden; }
.wc-feature-image img { display: block; width: 100%; height: auto; }
.aff-review-note { padding: .875rem 1rem; border: 1px solid var(--wc-ink); border-left-width: 6px; border-radius: 4px; background: var(--wc-white); }
.aff-review-note p { margin: 0; }

/* ------------------------------------------------------------------ 6. component refinements */
.wc-main .aff-catalog__title, .wc-main .aff-hero__title { color: var(--wc-ink); }
.wc-main .aff-catalog__head { padding-bottom: 1.25rem; border-bottom: 1px solid var(--wc-line); margin-bottom: 1.5rem; }
.aff-breadcrumbs a { text-underline-offset: 3px; }
.aff-section > h2, .aff-offers > h2 { position: relative; padding-top: 1rem; }
.aff-section > h2::before {
	content: ""; position: absolute; top: 0; left: 0; width: 4rem; height: 12px; box-sizing: border-box; border-bottom: 2px solid var(--wc-ink);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='10'%3E%3Crect width='2' height='10' fill='%23182b3a'/%3E%3C/svg%3E") repeat-x left top;
}
.aff-card:hover { border-color: var(--wc-steel); }
.aff-card__actions .aff-button { font-size: .9375rem; }
.aff-bench { grid-template-rows: auto 1fr; }
.aff-bench__title { font-size: 1.875rem; }
.aff-bench__media, .aff-content-card__media { border-bottom: 1px solid var(--wc-line); }
.aff-tile::before { content: ""; width: 2rem; height: 4px; margin-bottom: .5rem; background: var(--wc-yellow); }
.aff-tile__title { font-size: 1.75rem; }
.aff-table--compare thead th { background: var(--wc-white); }
.aff-hero__title { margin-top: 0; }
.aff-product-page > .aff-breadcrumbs { margin-top: 0; }
.aff-offers { padding: 1.25rem; border: 1px solid var(--wc-line); border-radius: 6px; background: var(--wc-white); }
.aff-offers > h2 { margin-top: 0; }
.aff-offer { background: var(--wc-chalk); }
/* Retailer CTAs are equally important: keep every retailer button in the primary blue style. */
.aff-hero .aff-cta .aff-button[data-aff-provider],
.aff-offers .aff-button[data-aff-provider] {
	background: var(--wc-workshop) !important;
	border-color: var(--wc-workshop) !important;
	color: var(--wc-white) !important;
}
.aff-hero .aff-cta .aff-button[data-aff-provider]:hover,
.aff-offers .aff-button[data-aff-provider]:hover {
	background: var(--wc-workshop-strong) !important;
	border-color: var(--wc-workshop-strong) !important;
	color: var(--wc-white) !important;
}
.aff-summary p { max-width: 44rem; }
.aff-filters-panel { background: var(--wc-white); }
.aff-state { background: var(--wc-white); border-left-width: 4px; border-left-color: var(--wc-yellow); }

@media (min-width: 48em) {
	.wc-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.wc-header__bar { flex-wrap: nowrap; }
	.wc-search { margin-inline: auto; }
}
@media (max-width: 47.99em) {
	.wc-header__bar { display: grid; grid-template-columns: 1fr auto; }
	.wc-search { grid-column: 1 / -1; order: 3; max-width: none; }
	.wc-hero__image { order: -1; }
	.wc-hero__image img { aspect-ratio: 16 / 10; }
}
@media (min-width: 64em) {
	.wc-principles { gap: 3rem; }
}
@media print {
	.wc-utility, .wc-header__nav, .wc-search, .aff-tray, .aff-filters-panel { display: none !important; }
}
.wc-prose:has(.aff-compare-page), .wc-prose:has(.aff-contact) { max-width: none; }

/* With a logo that already contains the name, the text title is not repeated. */
.wc-brand:has(.wc-logo img) .wc-site-title { display: none; }
.wc-logo img { height: auto; max-height: 88px; width: auto; margin: 0; }
/* Align the logo, the navigation text and the page content on one left edge. */
.wc-logo, .wc-logo a { margin: 0; line-height: 0; }
.wc-nav .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content { padding-left: 0; }
.wc-header__bar { padding-block: 1rem; }
@media (max-width: 47.99em) { .wc-logo img { max-width: 180px; height: auto; } }

/* ---- Theme options (Appearance, Theme options) ---- */
.wc-logo img { width: var(--wc-logo-width, 260px); max-width: 100%; max-height: none; height: auto; }
@media (max-width: 47.99em) { .wc-logo img { width: min(var(--wc-logo-width, 260px), 180px); max-width: 180px; } }
.wc-no-utility .wc-utility { display: none; }
.wc-header-minimal .wc-header__bar .wc-search { display: none; }
.wc-header-centered .wc-header__bar { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .75rem; }
.wc-header-centered .wc-brand { justify-content: center; }
.wc-header-centered .wc-search { width: 100%; max-width: 34rem; margin: 0; order: 0; }
.wc-header-centered .wc-header__nav .wc-nav { justify-content: center; }
.wc-header-centered .wc-nav .wp-block-navigation__container { justify-content: center; }
.wc-no-footer-cols .wc-footer__cols { display: none; }
.wc-footer-light .wc-footer { background: var(--wc-tint); color: var(--wc-ink); border-top: 1px solid var(--wc-line); }
.wc-footer-light .wc-footer a { color: var(--wc-workshop); }
.wc-footer-light .wc-footer a:hover { color: var(--wc-workshop-strong); }
.wc-footer-light .wc-footer :focus-visible { outline-color: var(--wc-ink); }
.wc-footer-light .wc-footer h2 { color: var(--wc-ink); }
.wc-footer-light .wc-footer .aff-disclosure, .wc-footer-light .wc-footer__legal { color: var(--wc-steel-strong); }
.wc-footer-light .wc-footer .aff-disclosure a, .wc-footer-light .wc-footer .aff-disclosure__link { color: var(--wc-workshop); }