/* ==========================================================================
   Weber & Co Directory — engine stylesheet
   Handle: wcd-directory   Enqueued: wp_enqueue_scripts:20, filemtime() version

   STRUCTURE ONLY. This file carries no site's look and no site's name. Every
   colour and every font value is one hop from an Elementor Kit global custom
   property with a literal fallback, so the component renders correctly on a
   site with no Elementor at all. Everything else in here is geometry.

   Rules this file is held to (CONTRACT.md §8.3, BUILD-2 §4), and the greps that
   prove them are in BUILD-2 §10.2:
     - exactly one forced declaration in the whole file, on [hidden]
     - no cascade layers: a layered rule loses to Elementor's unlayered CSS by
       definition, so it is the modern-looking answer that is backwards here
     - every selector starts with .wcd, so (0,2,0) beats the Kit's (0,1,1)
     - state is attributes, never .is-* classes
   ========================================================================== */


/* --------------------------------------------------------------- 1. Tokens */

.wcd {
	/* Colour. The four system Kit ids (primary/secondary/text/accent) are stable
	   across sites; the seven-character ids are per-site and are therefore used
	   for decoration only, never for body text or the focus ring. */
	--wcd-ink:    var(--e-global-color-primary,   #000);
	--wcd-brand:  var(--e-global-color-secondary, #005e89);
	--wcd-muted:  var(--e-global-color-5178666,   #434343);
	--wcd-paper:  var(--e-global-color-8f40535,   #fff);
	--wcd-tint:   var(--e-global-color-2131ec2,   #f9f9f9);
	--wcd-accent: var(--e-global-color-3b2f999,   #fdb810);

	/* The focus ring is the brand, never the highlight: #005e89 on white is
	   7.09:1 and on the tint 6.7:1, where the highlight yellow is 1.74:1 and
	   fails SC 1.4.11 outright. */
	--wcd-focus:  var(--wcd-brand);

	/* Translucent chrome, derived from the two tokens above rather than invented.
	   Each is declared twice: the first line is the literal an engine without
	   color-mix() keeps, the second is the derived value everything else uses. */
	--wcd-hairline: rgba(0, 0, 0, .12);
	--wcd-hairline: color-mix(in srgb, var(--wcd-ink) 12%, transparent);
	--wcd-field:    rgba(0, 0, 0, .32);
	--wcd-field:    color-mix(in srgb, var(--wcd-ink) 32%, transparent);
	--wcd-field-hi: rgba(0, 0, 0, .62);
	--wcd-field-hi: color-mix(in srgb, var(--wcd-ink) 62%, transparent);
	--wcd-glow:     rgba(0, 94, 137, .18);
	--wcd-glow:     color-mix(in srgb, var(--wcd-brand) 18%, transparent);
	--wcd-shadow:   rgba(0, 0, 0, .3);
	--wcd-shadow:   color-mix(in srgb, var(--wcd-ink) 30%, transparent);
	--wcd-scrim:    rgba(0, 0, 0, .55);
	--wcd-scrim:    color-mix(in srgb, var(--wcd-ink) 55%, transparent);

	/* Type. Only the body family is exposed by the Kit as a family; the other
	   groups are size/weight/line-height/tracking only and inherit the family. */
	--wcd-font:         var(--e-global-typography-accent-font-family, system-ui), sans-serif;

	--wcd-body-size:    var(--e-global-typography-accent-font-size,      18px);
	--wcd-body-weight:  var(--e-global-typography-accent-font-weight,    500);
	--wcd-body-lh:      var(--e-global-typography-accent-line-height,    22px);
	--wcd-body-ls:      var(--e-global-typography-accent-letter-spacing, -.54px);

	--wcd-meta-size:    var(--e-global-typography-33398f6-font-size,      15px);
	--wcd-meta-weight:  var(--e-global-typography-33398f6-font-weight,    700);
	--wcd-meta-lh:      var(--e-global-typography-33398f6-line-height,    18px);
	--wcd-meta-ls:      var(--e-global-typography-33398f6-letter-spacing, -.3px);

	--wcd-title-size:   var(--e-global-typography-9b387c9-font-size,      24px);
	--wcd-title-weight: var(--e-global-typography-9b387c9-font-weight,    500);
	--wcd-title-lh:     var(--e-global-typography-9b387c9-line-height,    28px);
	--wcd-title-ls:     var(--e-global-typography-9b387c9-letter-spacing, -.72px);

	/* The Kit's button group. It is the one group that exposes a text-transform,
	   which is what gives the submit control and the small caps their case. */
	--wcd-btn-size:     var(--e-global-typography-text-font-size,       18px);
	--wcd-btn-weight:   var(--e-global-typography-text-font-weight,     900);
	--wcd-btn-lh:       var(--e-global-typography-text-line-height,     20px);
	--wcd-btn-ls:       var(--e-global-typography-text-letter-spacing,  -.54px);
	--wcd-btn-case:     var(--e-global-typography-text-text-transform,  uppercase);

	/* Geometry — ours, not the Kit's. The first five are overwritten per
	   instance by the inline style on the section root. */
	--wcd-cols: 3;
	--wcd-cols-tablet: 2;
	--wcd-cols-mobile: 1;
	--wcd-row-gap: 28px;
	--wcd-col-gap: 28px;
	--wcd-pagination-gap: 48px;
	--wcd-control-h: 52px;
	--wcd-pill-radius: 37px;
	--wcd-card-radius: 0;

	color: var(--wcd-muted);
	font-family: var(--wcd-font);
	font-size: var(--wcd-body-size);
	font-weight: var(--wcd-body-weight);
	letter-spacing: var(--wcd-body-ls);
	line-height: var(--wcd-body-lh);
}

.wcd,
.wcd *,
.wcd *::before,
.wcd *::after {
	box-sizing: border-box;
}

/* The component's one forced declaration. Elementor's container display rules
   are broad enough to resurrect a hidden node, and a visibly-rendered [hidden]
   panel is a correctness bug, not a styling one. */
.wcd [hidden] {
	display: none !important;
}


/* ------------------------------------------------- 2. Visually hidden, focus */

/* clip-path rather than display:none, so the text stays in the accessibility
   tree and stays focusable. */
.wcd__sr {
	block-size: 1px;
	border: 0;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.wcd :focus-visible {
	outline: 3px solid var(--wcd-focus);
	outline-offset: 2px;
}

/* A heading is only focused programmatically, after a result swap. It must not
   then draw a ring around a whole line of text the user did not click. */
.wcd__sr:focus,
.wcd__sr:focus-visible {
	outline: 0;
}


/* --------------------------------------------------------------- 3. Filters */

.wcd__filters {
	display: block;
	margin-block-end: 28px;
}

.wcd__facets {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 20px;
	margin: 0;
}

/* Each control gets a readable minimum and is then free to grow, so two or
   three facets sit side by side instead of stacking five rows deep. */
.wcd__facet {
	flex: 1 1 auto;
	margin: 0;
	max-inline-size: 100%;
	min-inline-size: min(260px, 100%);
	position: relative;
}

.wcd__facet--q {
	flex-grow: 2;
}

.wcd__facet > label {
	display: block;
	font-size: var(--wcd-meta-size);
	font-weight: var(--wcd-meta-weight);
	line-height: var(--wcd-meta-lh);
	margin-block-end: 8px;
}

.wcd__facet select,
.wcd__facet input {
	background-color: var(--wcd-paper);
	border: 2px solid var(--wcd-field);
	border-radius: var(--wcd-card-radius);
	color: var(--wcd-ink);
	display: block;
	font: inherit;
	inline-size: 100%;
	min-block-size: var(--wcd-control-h);
	min-inline-size: 0;
	padding: 12px 14px;
}

.wcd__facet select {
	appearance: none;
	cursor: pointer;
	padding-inline-end: 44px;
	text-overflow: ellipsis;
}

/* The select indicator, drawn rather than fetched: no image request, and it
   takes its colour from the same token as the text it sits beside. */
.wcd__facet::after {
	background-color: var(--wcd-ink);
	block-size: 7px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "";
	inline-size: 12px;
	inset-block-end: calc((var(--wcd-control-h) - 7px) / 2);
	inset-inline-end: 18px;
	pointer-events: none;
	position: absolute;
}

/* The keyword field is an input, not a select — no indicator. */
.wcd__facet--q::after {
	content: none;
}

.wcd__facet select:hover,
.wcd__facet input:hover {
	border-color: var(--wcd-field-hi);
}

.wcd__facet select:focus,
.wcd__facet input:focus {
	border-color: var(--wcd-brand);
	box-shadow: 0 0 0 3px var(--wcd-glow);
	outline: 0;
}

.wcd__facet select:focus-visible,
.wcd__facet input:focus-visible {
	box-shadow: none;
	outline: 3px solid var(--wcd-focus);
	outline-offset: 2px;
}

.wcd__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin: 20px 0 0;
}

/* (0,2,0) beats the Kit's (0,1,1) button rule, whose 77px horizontal padding is
   sized for a page CTA and leaves this control ~160px wider than its label. */
.wcd .wcd__submit {
	background-color: var(--wcd-paper);
	border: 3px solid var(--wcd-ink);
	border-radius: var(--wcd-pill-radius);
	color: var(--wcd-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: var(--wcd-btn-size);
	font-weight: var(--wcd-btn-weight);
	letter-spacing: var(--wcd-btn-ls);
	line-height: var(--wcd-btn-lh);
	min-block-size: var(--wcd-control-h);
	padding: 11px 32px;
	text-transform: var(--wcd-btn-case);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
	white-space: nowrap;
}

.wcd .wcd__submit:hover,
.wcd .wcd__submit:focus-visible {
	background-color: var(--wcd-brand);
	border-color: var(--wcd-brand);
	color: var(--wcd-paper);
}

.wcd .wcd__reset {
	align-items: center;
	color: var(--wcd-brand);
	display: inline-flex;
	min-block-size: 44px;
	padding: 4px 0;
}

/* Rendered but `hidden` until a filter is set (templates/controls.php); the rule above sets
   display, which would otherwise beat the UA's [hidden] { display: none }. */
.wcd .wcd__reset[hidden] {
	display: none;
}


/* --------------------------------------------------------------- 4. Results */

.wcd__results {
	display: block;
}

.wcd__count {
	color: var(--wcd-muted);
	margin: 0 0 20px;
}

.wcd__list {
	display: grid;
	gap: var(--wcd-row-gap) var(--wcd-col-gap);
	grid-template-columns: repeat(var(--wcd-cols), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* minmax(0, 1fr) rather than 1fr: an unbroken URL in a card must not be able to
   blow its column out. */
.wcd__item {
	display: flex;
	margin: 0;
	min-inline-size: 0;
}

.wcd__item > .wcd__card {
	inline-size: 100%;
}

.wcd__empty {
	margin: 0;
	padding: 28px 24px;
	background-color: var(--wcd-tint);
}

/* Busy is a dim, never a hide: hiding collapses the layout and loses the scroll
   position under the reader's thumb. */
.wcd[data-wcd-busy] .wcd__list,
.wcd[data-wcd-busy] .wcd__empty,
.wcd[data-wcd-busy] .wcd__pagination {
	opacity: .55;
	pointer-events: none;
	transition: opacity .15s ease;
}


/* ----------------------------------------------------------------- 5. Cards */

/* Chrome — background, border, padding, hover — belongs to the site skin.
   What is here is the skeleton the skin cannot do without. */
.wcd__card {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	overflow-wrap: anywhere;
	position: relative;
}

.wcd__card > * {
	margin: 0;
}

.wcd__media {
	block-size: auto;
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
}

.wcd__title {
	font-size: var(--wcd-title-size);
	font-weight: var(--wcd-title-weight);
	letter-spacing: var(--wcd-title-ls);
	line-height: var(--wcd-title-lh);
}

.wcd__meta {
	font-size: var(--wcd-meta-size);
	font-weight: var(--wcd-meta-weight);
	letter-spacing: var(--wcd-meta-ls);
	line-height: var(--wcd-meta-lh);
}

/* The card's one link sits at the foot whatever the card's height. */
.wcd__more {
	align-items: center;
	align-self: flex-start;
	display: inline-flex;
	margin-block-start: auto;
	min-block-size: 44px;
	padding-block-start: 14px;
}


/* -------------------------------------------------- 6. Detail, and :target */

/* With the script absent the detail is revealed by the fragment in the address
   bar. The `hidden` attribute is deliberately NOT the mechanism here: an
   assistive technology honours [hidden] even where CSS overrides display, so
   `hidden` + :target would show the panel on screen and hide it from a reader.
   The script applies [hidden] only once the dialog is the presentation. */
.wcd__detail {
	display: none;
}

.wcd__detail:target {
	display: block;
}

.wcd[data-wcd-js] .wcd__detail:target {
	display: none;
}

.wcd[data-wcd-js] .wcd__dialog-body .wcd__detail {
	display: block;
}

.wcd__detail {
	border-block-start: 1px solid var(--wcd-hairline);
	margin-block-start: 14px;
	padding-block-start: 14px;
}

.wcd__dialog-body .wcd__detail {
	border: 0;
	margin: 0;
	padding: 0;
}

/* The panel carries its own name so the `:target` fallback has a heading. In
   the dialog that name is already the dialog's title, one line above, so the
   second copy is suppressed rather than printed twice. */
.wcd__dialog-body .wcd__detail-name {
	display: none;
}

.wcd__detail > * {
	margin: 0;
}

.wcd__detail > * + * {
	margin-block-start: 10px;
}

.wcd__detail-eyebrow {
	color: var(--wcd-brand);
	font-size: var(--wcd-meta-size);
	font-weight: var(--wcd-meta-weight);
	letter-spacing: .09em;
	line-height: var(--wcd-meta-lh);
	text-transform: var(--wcd-btn-case);
}

.wcd__detail-name {
	color: var(--wcd-ink);
	font-size: var(--wcd-title-size);
	font-weight: var(--wcd-title-weight);
	letter-spacing: var(--wcd-title-ls);
	line-height: var(--wcd-title-lh);
}

.wcd__facts {
	border-block-start: 1px solid var(--wcd-hairline);
	margin: 0;
	padding-block-start: 14px;
}

.wcd__facts dt {
	color: var(--wcd-ink);
	font-size: var(--wcd-meta-size);
	font-weight: var(--wcd-meta-weight);
	letter-spacing: .04em;
	line-height: var(--wcd-meta-lh);
	text-transform: var(--wcd-btn-case);
}

.wcd__facts dd {
	margin: 4px 0 0;
}

.wcd__facts dd + dt {
	margin-block-start: 14px;
}


/* ---------------------------------------------------------------- 7. Dialog */

/* One <dialog> per directory instance, opened with showModal() so it lives in
   the top layer — where no ancestor overflow:hidden or transform can clip it,
   which is what the off-canvas geometry it replaces was fighting by hand. */
.wcd__dialog {
	background: transparent;
	border: 0;
	color: inherit;
	max-block-size: 100%;
	max-inline-size: 100%;
	padding: 24px;
}

.wcd__dialog::backdrop {
	background-color: var(--wcd-scrim, rgba(0, 0, 0, .55));
}

.wcd__dialog-box {
	background-color: var(--wcd-paper);
	border-radius: 6px;
	box-shadow: 0 18px 50px var(--wcd-shadow);
	margin: 0 auto;
	max-inline-size: 560px;
	padding: 32px;
	position: relative;
	inline-size: 100%;
}

.wcd__dialog-box:focus,
.wcd__dialog-box:focus-visible {
	outline: 0;
}

/* A quiet control in the corner, not a call to action competing with the
   record's name. 44x44 for SC 2.5.8. */
.wcd .wcd__dialog-close {
	align-items: center;
	background-color: var(--wcd-paper);
	border: 2px solid var(--wcd-ink);
	border-radius: 999px;
	block-size: 44px;
	box-shadow: 0 4px 14px var(--wcd-shadow);
	color: var(--wcd-ink);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 22px;
	font-weight: 400;
	inline-size: 44px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	inset-block-start: -21px;
	inset-inline-end: -21px;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
	z-index: 3;
}

.wcd .wcd__dialog-close:hover,
.wcd .wcd__dialog-close:focus-visible {
	background-color: var(--wcd-brand);
	border-color: var(--wcd-brand);
	color: var(--wcd-paper);
}

/* The dialog is named by this <p>, never by a heading, so the page outline
   stays h1 -> h2 -> h3. */
.wcd__dialog-title {
	color: var(--wcd-ink);
	font-size: var(--wcd-title-size);
	font-weight: var(--wcd-title-weight);
	letter-spacing: var(--wcd-title-ls);
	line-height: var(--wcd-title-lh);
	margin: 0 44px 12px 0;
}

.wcd__dialog-title:empty {
	display: none;
}

.wcd__dialog-body {
	max-block-size: min(62vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
}


/* ------------------------------------------------------------ 8. Pagination */

.wcd__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: var(--wcd-pagination-gap);
}

.wcd .wcd__page {
	align-items: center;
	border: 2px solid transparent;
	color: var(--wcd-brand);
	display: inline-flex;
	justify-content: center;
	min-block-size: 44px;
	min-inline-size: 44px;
	padding: 4px 12px;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.wcd .wcd__page:hover,
.wcd .wcd__page:focus-visible {
	border-color: var(--wcd-brand);
	color: var(--wcd-brand);
}

/* core's paginate_links() gap marker. Decorative and aria-hidden, so it only
   has to sit on the same baseline as the pills it separates. */
.wcd__dots {
	align-items: center;
	color: var(--wcd-muted);
	display: inline-flex;
	justify-content: center;
	min-block-size: 44px;
	padding: 4px 4px;
}

/* The current page is a <span aria-current="page">, never a link — so the
   selector is the state, and CSS and the accessibility tree cannot drift. */
.wcd .wcd__page[aria-current="page"] {
	background-color: var(--wcd-brand);
	border-color: var(--wcd-brand);
	color: var(--wcd-paper);
	cursor: default;
}


/* ------------------------------------------------------------- 9. Link tone */

/* The Kit hovers links to its light teal, which is 3.11:1 on white and below
   the 4.5:1 floor. The component holds the brand colour and lets the skin move
   the underline instead. */
.wcd a {
	color: var(--wcd-brand);
}

.wcd a:hover {
	color: var(--wcd-brand);
}


/* ------------------------------------------------------------ 10. Reflow */

/* 1024 and 600 are the Kit's own active breakpoints, so the component reflows
   on the same line as everything around it. */
@media (max-width: 1024px) {
	.wcd__list {
		grid-template-columns: repeat(var(--wcd-cols-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.wcd__list {
		grid-template-columns: repeat(var(--wcd-cols-mobile), minmax(0, 1fr));
	}

	.wcd__facet {
		flex-basis: 100%;
	}

	.wcd__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.wcd .wcd__submit {
		inline-size: 100%;
	}

	.wcd .wcd__reset {
		justify-content: center;
	}

	.wcd__dialog {
		padding: 24px 16px;
	}

	.wcd__dialog-box {
		padding: 24px 20px;
	}

	.wcd .wcd__dialog-close {
		inset-block-start: -18px;
		inset-inline-end: -8px;
	}
}


@media (prefers-reduced-motion: reduce) {
	.wcd,
	.wcd * {
		scroll-behavior: auto;
		transition-duration: .01ms;
	}
}