/* ==========================================================================
   WordPress reconciliation — job [2042]

   Rules that exist only because WordPress's markup differs from the
   prototype's. Keep design decisions OUT of this file: the design system is
   assets/css/nzwc.css, a straight port of the approved prototype, and it stays
   that way so it can be re-ported when the prototype changes.
   ========================================================================== */

/* wp_get_attachment_image() emits width and height attributes on every image.
   Those become presentation hints, so both dimensions are definite and the
   design system's `aspect-ratio` rules silently stop applying — images render
   at their full intrinsic height instead of the designed crop.

   :where() is load-bearing. It zeroes this rule's specificity, so it still
   beats the width/height attributes (presentation hints lose to any author
   rule) but loses to every rule in the design system. Written plainly as
   `img[width][height]`, it matches or outranks the eighteen places nzwc.css
   sets an explicit image height — .hero .media img, .featureband .media img,
   .supporters .row img, .split img, the carousel slides — and, loading after
   nzwc.css, silently flattened all of them. */
:where(img[width][height]) {
	height: auto;
}

/* The admin bar is fixed, and the over-hero header is positioned under it. */
body.admin-bar .site-header.over {
	top: 32px;
}

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

/* WordPress wraps captioned images; the design system styles the figure. */
.wp-caption,
figure.wp-block-image {
	max-width: 100%;
	margin: 0;
}

/* The prototype draws the mobile search box as a static div with placeholder
   text. The real thing is a form, so the input and submit button inside it are
   stripped back to inherit the pill the design system already styles. */
.mnav .search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.mnav .search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.mnav .search input[type="search"]::placeholder {
	color: var(--muted);
	opacity: 1;
}

.mnav .search button {
	display: grid;
	place-items: center;
	padding: 0;
	color: var(--muted);
}

@media (max-width: 1024px) {
	/* A section with nothing published under it has no pane to open, so its
	   row in the mobile menu is a link straight to the landing page instead of
	   a button. It has to look identical to the button rows beside it. */
	.mnav .sections a {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 0;
		font-weight: 600;
		font-size: 20px;
		text-align: left;
	}

	.mnav .sections a::before {
		content: "";
		width: 4px;
		height: 24px;
		background: var(--c);
		margin-right: 14px;
	}

	.mnav .sections a .chev {
		margin-left: auto;
		color: var(--ink-40);
		font-size: 18px;
	}
}

/* Copy NZWC has still to supply. Deliberately visible — an empty space reads
   as finished, a marked placeholder reads as a to-do. */
.nzwc-tbc {
	color: var(--muted);
	font-style: italic;
	font-weight: 400;
	opacity: .75;
}

/* An image slot with nothing in it yet keeps the designed box so the layout
   does not collapse while the photography is outstanding. */
.nzwc-noimage {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--bone);
	border-radius: var(--radius);
}