/* ==========================================================================
   WordPress integration only.

   Everything else in assets/css/ is the approved prototype, byte for byte.
   This file holds the handful of rules that exist because WordPress or a
   plugin renders different markup than the static build did — kept apart so
   the design files stay a clean copy of what the client signed off.

   No colour literals here either: tokens.css remains the single source
   (Ai/qa/tokens-audit.py enforces it).
   ========================================================================== */

/* --- Images ---------------------------------------------------------------
   WordPress writes the file's intrinsic width and height onto every <img>.
   Those attributes are presentational hints, so a `height="1250"` wins wherever
   the stylesheet does not set a height itself — which silently killed the
   `aspect-ratio` on the page heroes and stretched a 700x350 illustration to
   full height.

   The static build carried the design's own numbers in those attributes, so
   the problem could not appear there. Every other image class states its own
   width and height and overrides this on specificity; only the aspect-ratio
   ones need it.
   -------------------------------------------------------------------------- */

main img {
	height: auto;
}

/* --- Category filters -----------------------------------------------------
   The prototype's chips were <span>s that did nothing. They are real links
   here — two of the three documents had no URL at all before — which brings
   the default underline with them.
   -------------------------------------------------------------------------- */

a.cf-filter,
a.cf-filter:hover,
a.cf-filter:focus {
	text-decoration: none;
}

a.cf-filter:hover {
	border-color: var(--cf-ink);
}

/* --- Contact Form 7 -------------------------------------------------------
   CF7 emits <input type="submit">, which cannot hold the arrow <span> the
   prototype's <button> had. The glyph therefore comes from CSS.
   -------------------------------------------------------------------------- */

.cf-form__submit-row,
.wpcf7 .cf-form__submit-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	/* The note wraps under the button on narrow columns and had nothing
	   between it and whatever follows. */
	margin-bottom: 24px;
}

.wpcf7 .cf-form__note {
	margin: 0;
}

.wpcf7 input.cf-form__submit {
	position: relative;
}

.wpcf7 .cf-form__submit-row::after {
	content: "\2192";
	margin-left: -8px;
	color: var(--cf-cyan);
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
	order: 0;
}

/* CF7 wraps every field in a span; it must not become a layout box. */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

/*
 * .cf-form is a flex column with a 26px gap, so anything CF7 adds becomes a row
 * of its own. Its hidden-field fieldset sat first and pushed an empty 26px gap
 * above the form; the response box did the same below it until a message
 * arrives.
 */
.cf-form > .hidden-fields-container,
.cf-form > fieldset.hidden-fields-container {
	display: none;
}

.cf-form > .wpcf7-response-output:empty {
	display: none;
}

/* The last row keeps its own spacing; the form's gap already separates them. */
.wpcf7 .cf-form__pair {
	margin: 0;
}

/* The plugin's own validation text, matched to .cf-field__error in the design. */
.wpcf7 .wpcf7-not-valid-tip {
	margin: 8px 0 0;
	color: var(--cf-error);
	font-family: var(--cf-font-body);
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.5;
}

/* --- Consent --------------------------------------------------------------
   [acceptance] is used rather than a checkbox so the privacy link can sit
   inside the sentence — CF7's checkbox label is plain text, which had the link
   breaking onto its own line to the right.
   -------------------------------------------------------------------------- */

.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-acceptance label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--cf-muted);
	font-family: var(--cf-font-body);
	font-size: 14.5px;
	line-height: 1.6;
	cursor: pointer;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
}

.wpcf7 .wpcf7-acceptance a {
	color: var(--cf-link);
}

.wpcf7 .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-r-btn);
	font-family: var(--cf-font-body);
	font-size: var(--cf-fs-body-sm);
	line-height: var(--cf-lh-body-sm);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--cf-success);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: var(--cf-error);
	background: var(--cf-error-bg);
}

/* The topic checkboxes reuse the prototype's chip look. */
.wpcf7 .cf-topics {
	display: flex;
	flex-wrap: wrap;
	/* The prototype's .cf-topics gap is 10px; these chips sit on two rows, and
	   14px is what keeps the rows from reading as one block. */
	gap: 14px;
}

/*
 * CF7 puts TWO spans between .cf-topics and the chips:
 *
 *   div.cf-topics                 <- the flex container, gap lives here
 *     span.wpcf7-form-control-wrap
 *       span.wpcf7-checkbox
 *         span.wpcf7-list-item    <- the chips
 *
 * A flex gap only separates the container's own children, and .cf-topics has
 * exactly one — the wrap. Both spans have to fold away before the chips become
 * flex items themselves. The wrap needs naming explicitly: the general rule
 * further up this file gives every .wpcf7-form-control-wrap `display: block`.
 */
.wpcf7 .cf-topics .wpcf7-form-control-wrap,
.wpcf7 .cf-topics .wpcf7-form-control,
.wpcf7 .cf-topics .wpcf7-checkbox {
	display: contents;
}

.wpcf7 .cf-topics .wpcf7-list-item {
	display: inline-block;
	margin: 0;
}

/* Metrics copied from .cf-topic in kontakt.css so the CF7 chips and the
   prototype's chips are the same object. */
.wpcf7 .cf-topics .wpcf7-list-item-label {
	display: inline-block;
	padding: 11px 20px;
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-r-round);
	background: var(--cf-white);
	color: var(--cf-ink);
	font-family: var(--cf-font-body);
	font-weight: 500;
	font-size: 15px;
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
}

.wpcf7 .cf-topics input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Selected reads as selected: the field tint was too close to white to tell. */
.wpcf7 .cf-topics input[type="checkbox"]:checked + .wpcf7-list-item-label {
	border-color: var(--cf-ink);
	background: var(--cf-ink);
	color: var(--cf-white);
}

.wpcf7 .cf-topics input[type="checkbox"]:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--cf-cyan);
	outline-offset: 2px;
}

/* The privacy link sits next to the consent checkbox: CF7's own label is
   plain text, so the link has to live outside it. */
.cf-consent__link {
	display: inline;
}

.cf-consent .wpcf7-list-item {
	margin: 0;
}

/* --- Pagination -----------------------------------------------------------
   paginate_links() returns a <ul class="page-numbers"> whose items are also
   .page-numbers. Styling the class alone gave the list itself a button box and
   left the bullets in place. The container and the items are separated here.
   -------------------------------------------------------------------------- */

ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
	border: 0;
	background: none;
}

ul.page-numbers > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.page-numbers > li::marker {
	content: "";
}

li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--cf-line-border-40);
	border-radius: var(--cf-r-btn);
	background: var(--cf-white);
	color: var(--cf-ink);
	font-family: var(--cf-font-body);
	font-weight: 700;
	font-size: var(--cf-fs-body-sm);
	line-height: 1;
	text-decoration: none;
	transition: border-color .2s, background .2s, color .2s;
}

li > a.page-numbers:hover {
	border-color: var(--cf-ink);
}

li > .page-numbers.current {
	border-color: var(--cf-ink);
	background: var(--cf-ink);
	color: var(--cf-white);
}

li > .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* --- Accessibility --------------------------------------------------------
   The skip link the prototype did not have.
   -------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip-path: none;
	border-radius: var(--cf-r-btn);
	background: var(--cf-white);
	color: var(--cf-ink);
	font-family: var(--cf-font-body);
	font-size: var(--cf-fs-body-sm);
	text-decoration: none;
}