/* ==========================================================================
   FAQ Hero (neilkelly/faq-hero)
   Figma: "15 - FAQ HUB" / Hero (1791:41)
   Dark full-bleed band: heading, supporting line, prominent search field.
   Token-driven, plain CSS. Wrapper: .wp-block-neilkelly-faq-hero.nk-faq-hero
   ========================================================================== */
.wp-block-neilkelly-faq-hero.nk-faq-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: var(--wp--custom--components--faq--hero-min-height);
	/* The transparent header overlays this hero, so reserve its full height
	   (announcement + header row + the header's internal top pad) and add the
	   Figma nav→heading gap of 64px (spacing--16). Top-aligned like Figma 1791:41
	   rather than centered. */
	padding: calc(
			var(--wp--custom--components--site-header--announcement-height) +
			var(--wp--custom--layout--header--height) +
			var(--wp--preset--spacing--8) +
			var(--wp--preset--spacing--16)
		) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--19);
	background: var(--wp--preset--color--surface-dark);
	overflow: hidden;
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
}

.wp-block-neilkelly-faq-hero .nk-faq-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.wp-block-neilkelly-faq-hero .nk-faq-hero__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.3;
	display: block;
}

/* Scrim keeps the white heading + search legible over any photo. */
.wp-block-neilkelly-faq-hero .nk-faq-hero__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--brand-black) 45%, transparent);
}

/* Left-aligned copy on a centred content column.
   The BOX stays centred — the section's align-items:center does that — while everything
   inside it ranges left, so the H1, the supporting line and the search field all start
   on the same edge as the sections below.
   THE CAP IS WHAT ALIGNS IT. content-width (1296) on this inner element, with the
   gutter padding on the section outside it, resolves to exactly the content box both
   neighbours use: 72 from the edge at 1440, 312 at 1920. The two get there by different
   routes — faq-hub__columns caps at max-width (1440) and pads in by the gutter as
   border-box, the breadcrumb trail caps at content-width and pads outside it as
   content-box (there is no universal reset in this theme) — but all three now land on
   the same 1296. Keep the cap here and the padding on the section: putting both on one
   box is the double-inset faq-hub's own comment warns about.
   Replaces the old 900px hero-content-max-width, which centred a narrower column of its
   own and left that token referenced by nothing. */
.wp-block-neilkelly-faq-hero .nk-faq-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	max-width: var(--wp--custom--layout--content-width);
}

.wp-block-neilkelly-faq-hero .nk-faq-hero__heading {
	margin: 0;
	/* Size + case from the shared .nk-headline--content class (mapped in render.php). */
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--hero);
	letter-spacing: var(--wp--custom--letter-spacing--snug);
	color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-faq-hero .nk-faq-hero__subheading {
	margin: 0;
	max-width: var(--wp--custom--components--faq--hero-body-max-width);
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-height--md);
	color: var(--wp--preset--color--brand-white);
}

/* --- Search field --- */
.wp-block-neilkelly-faq-hero .nk-faq-hero__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	width: 100%;
	max-width: var(--wp--custom--components--faq--search-max-width);
	/* Include padding + border in the width so the box is exactly search-max-width
	   (610px), matching the Resources hero search field. */
	box-sizing: border-box;
	margin-top: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--2) var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--full);
	background: color-mix(in srgb, var(--wp--preset--color--brand-white) 18%, transparent);
}

/* Visible label is redundant with the field; keep it for SR users only. */
.wp-block-neilkelly-faq-hero .nk-faq-hero__search-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wp-block-neilkelly-faq-hero .nk-faq-hero__search-icon {
	flex-shrink: 0;
	display: inline-flex;
	width: var(--wp--preset--spacing--5);
	height: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-faq-hero .nk-faq-hero__search-icon svg { width: 100%; height: 100%; }

.wp-block-neilkelly-faq-hero .nk-faq-hero__search-input {
	flex: 1 1 0;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-faq-hero .nk-faq-hero__search-input::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--brand-white) 70%, transparent);
	opacity: 1;
}

/* Clear (×) button — recolour the native icon white to sit on the dark search
   bar (the browser default renders it dark grey). Masked SVG so we control fill. */
.wp-block-neilkelly-faq-hero .nk-faq-hero__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 0.85em;
	height: 0.85em;
	margin-left: var(--wp--preset--spacing--2);
	cursor: pointer;
	background-color: var(--wp--preset--color--brand-white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4 12 12 M12 4 4 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4 12 12 M12 4 4 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-neilkelly-faq-hero .nk-faq-hero__search-input:focus { outline: none; }

.wp-block-neilkelly-faq-hero .nk-faq-hero__search-submit {
	flex-shrink: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	/* Colors match .nk-faq-hub__woven-btn (black fill, white text), no border. */
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--brand-black);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	color: var(--wp--preset--color--brand-white);
	cursor: pointer;
	transition: background-color 160ms ease;
}

.wp-block-neilkelly-faq-hero .nk-faq-hero__search-submit:hover,
.wp-block-neilkelly-faq-hero .nk-faq-hero__search-submit:focus-visible {
	background: var(--wp--preset--color--neutral-800);
}

/* Keyboard focus — visible ring on the dark band. */
.wp-block-neilkelly-faq-hero .nk-faq-hero__search:focus-within {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 3px;
}

.wp-block-neilkelly-faq-hero .nk-faq-hero__search-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 2px;
}

/* No block-gap seam between full-bleed sections. */
.wp-block-neilkelly-faq-hero { margin-block: 0; }

/* --- Responsive --- */
@media (max-width: 1023px) {
	.wp-block-neilkelly-faq-hero.nk-faq-hero { padding-inline: var(--wp--preset--spacing--12); }
}

@media (max-width: 767px) {
	.wp-block-neilkelly-faq-hero.nk-faq-hero {
		padding: calc(
				var(--wp--custom--components--site-header--announcement-height) +
				var(--wp--custom--layout--header--height) +
				var(--wp--preset--spacing--8)
			) var(--wp--preset--spacing--6) var(--wp--preset--spacing--14);
	}
	.wp-block-neilkelly-faq-hero .nk-faq-hero__heading { font-size: var(--wp--preset--font-size--xl-md); }
	.wp-block-neilkelly-faq-hero .nk-faq-hero__subheading { font-size: var(--wp--preset--font-size--base); }
	.wp-block-neilkelly-faq-hero .nk-faq-hero__search {
		flex-wrap: wrap;
		border-radius: var(--wp--custom--radius--card);
	}
	.wp-block-neilkelly-faq-hero .nk-faq-hero__search-input { flex-basis: 60%; }
	.wp-block-neilkelly-faq-hero .nk-faq-hero__search-submit { width: 100%; }
}