/* ==========================================================================
   Vertex — WordPress additions
   --------------------------------------------------------------------------
   assets/css/style.css is the static build's stylesheet, transferred verbatim
   and deliberately left untouched so it stays diffable against /static. Every
   rule that exists only because the site now runs on WordPress lives here.

   Sections:
     1. Reset hardening
     2. Admin bar
     3. Editor-driven page-head photography
     4. Contact Form 7 → .field contract
     5. Blog
     6. WordPress core content classes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset hardening
   -------------------------------------------------------------------------- */
/* Several component rules set `display` at the same specificity as the UA's
   [hidden] rule and load later, which silently wins. Anything relying on the
   attribute — CF7's response output, the success panels — needs this. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   2. Admin bar
   --------------------------------------------------------------------------
   The homepage hero is sized to exactly one viewport:
     .hero { min-height: calc(100vh - var(--header-h) - 1px) }
   For a logged-in user the admin bar takes 32px off the top of the viewport,
   so the fold the static build measured to the pixel would otherwise overshoot
   by that much and push the credential strip under it.

   The 100vh mechanism is only live above 980px (style.css line ~1855 drops
   min-height to 0 below that), and the admin bar is a fixed 32px at every width
   above 782px, so one rule covers every case the hero cares about.

   .site-header is position:sticky/top:0 and needs offsetting separately at all
   three of the admin bar's own breakpoints — fixed 32px, fixed 46px, then
   absolute (scrolls away) below 600px. */
@media screen and (min-width: 981px) {
	body.admin-bar .hero { min-height: calc(100vh - var(--header-h) - 32px - 1px); }
}

body.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar .site-header { top: 0; }
}

/* --------------------------------------------------------------------------
   3. Editor-driven page-head photography
   --------------------------------------------------------------------------
   The static build hardcoded one ::before rule per page (.page-head--plastic
   and friends) pointing at a fixed file. Pages are editor-composed now, so the
   banner image arrives as an inline custom property and this single variant
   consumes it. The gradient is copied verbatim from those rules — it is
   load-bearing for contrast (the README measures the worst case at 4.78:1). */
.page-head--photo { overflow: hidden; }

.page-head--photo::before {
	z-index: -2;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	mask-image: none;
	-webkit-mask-image: none;
	background-image:
		linear-gradient(100deg, rgba(13, 18, 32, .95) 0%, rgba(13, 18, 32, .9) 38%,
		                        rgba(13, 18, 32, .62) 72%, rgba(13, 18, 32, .45) 100%),
		var(--head-img);
}

/* --------------------------------------------------------------------------
   4. Contact Form 7 → .field contract
   --------------------------------------------------------------------------
   The stylesheet's form states key off `.field.is-invalid` plus a sibling
   `.field__error`, which is what the static build's own validation produced.
   CF7 instead marks the control with .wpcf7-not-valid and injects its own
   <span class="wpcf7-not-valid-tip"> after it. Rather than script the two
   together, the CF7 classes are given the same appearance. */
.wpcf7 form .wpcf7-not-valid-tip {
	display: block;
	margin: 6px 0 0;
	font: 400 12.5px/1.4 var(--mono);
	color: #c62828;
}

.field input.wpcf7-not-valid,
.field select.wpcf7-not-valid,
.field textarea.wpcf7-not-valid {
	border-color: #c62828;
	background: #fff8f8;
}

/* CF7 wraps every control in a <span class="wpcf7-form-control-wrap">, which
   would otherwise break the full-width inputs the panel relies on. */
.field .wpcf7-form-control-wrap { display: block; }

/* CF7's own status line, restyled as the static build's .form-note. */
.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 0;
	border-left: 3px solid var(--heat);
	border-radius: var(--radius-sm);
	background: var(--heat-soft);
	font-size: 14px;
	color: var(--ink);
}
.wpcf7 form.sent .wpcf7-response-output { display: none; }
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { display: block; }

/* The submit button's spinner sits inline; keep it from shifting the row. */
.wpcf7-spinner { position: absolute; margin: 0 0 0 10px; }
.rfq__foot { position: relative; }

/* CF7 emits a hidden <p> of form data at the top of the form on some setups. */
.wpcf7 form > p:empty { display: none; }

/* --------------------------------------------------------------------------
   5. Blog
   --------------------------------------------------------------------------
   The static site has no blog. Rather than introduce a second visual language,
   the archive reuses the capability-card grid (.caps/.cap) and the single post
   reuses the inner-page document shape (.layout > .prose + .aside). Only the
   pieces with no static equivalent are defined here. */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 0 0 10px;
	font: 400 12.5px/1.5 var(--mono);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--slate-2);
}
.page-head .post-meta { color: #a2b0bd; }
.post-meta__cat { color: var(--heat-2); }

.cap__meta {
	margin: 0 0 10px;
	font: 400 12px/1.5 var(--mono);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--slate-2);
}

/* Pagination, modelled on the chip row (.chips li). */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 46px;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--white);
	font: 500 14px/1 var(--mono);
	color: var(--slate);
	transition: border-color .18s var(--ease), color .18s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--brand); color: var(--brand); }
.pagination .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.pagination .page-numbers.dots { border-color: transparent; background: none; }

/* Search form, used by the 404 and search templates. */
.searchform { display: flex; gap: 10px; margin-top: 8px; }
.searchform input[type="search"] { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   6. WordPress core content classes
   --------------------------------------------------------------------------
   Post bodies are authored in the classic editor, so the alignment and caption
   classes it produces need to exist. Everything else in .prose is already
   covered by the static stylesheet. */
.prose .alignleft {
	float: left;
	margin: 6px 28px 20px 0;
	max-width: 50%;
}
.prose .alignright {
	float: right;
	margin: 6px 0 20px 28px;
	max-width: 50%;
}
.prose .aligncenter {
	display: block;
	margin-inline: auto;
}
.prose .alignwide,
.prose .alignfull { max-width: 100%; }

.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }

.prose .wp-caption { max-width: 100%; }
.prose .wp-caption-text,
.prose figcaption {
	margin-top: 10px;
	font: 400 13px/1.5 var(--mono);
	color: var(--slate-2);
}

.prose blockquote {
	margin: 28px 0;
	padding-left: 22px;
	border-left: 3px solid var(--heat);
	font-family: var(--display);
	font-size: 1.2rem;
	color: var(--ink);
}

.prose .wp-block-image { margin: 28px 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 640px) {
	.prose .alignleft,
	.prose .alignright {
		float: none;
		margin: 20px 0;
		max-width: 100%;
	}
}