/* ttdl/hero-search — Homepage hero content. Sits inside a wp:cover with
   its own overlay/min-height, so this stylesheet owns typography/layout
   only, never background/image treatment. */

/*
 * The 700px measure is the hero's real content box, not a new value: this rule
 * used to read `max-width: 780px; padding: 56px 40px`, and 780 - 2*40 = 700 was
 * always what the text actually wrapped inside. The inline gutter now belongs to
 * the container (see CONTAINER ALIGNMENT below), so it is stated directly.
 * Anything measured against a 700px box -- notably the headline's font-size
 * ceiling further down -- is therefore unchanged.
 */
.ttdl-hero-search {
	max-width: 700px;
	color: var(--wp--preset--color--ivory-050);
	padding-block: 56px;
}

/*
 * CONTAINER ALIGNMENT.
 *
 * The hero content used to sit on its own grid rather than the site's. Two
 * things caused it, and both are fixed here at the container level rather than
 * with a compensating offset:
 *
 *   1. The cover's inner container is a FLEX ITEM of a cover whose content
 *      position is "center left", so it shrink-wraps its children and packs to
 *      the left. `max-width` + `margin-inline: auto` cannot centre a
 *      shrink-to-fit item, so the 1240px cap that used to be declared on it
 *      never took effect -- the container simply measured 780 + 56 + 320 =
 *      1156px and started at the cover's own padding edge.
 *   2. .ttdl-hero-search then added its own 40px inline padding, pushing the
 *      text a further 40px inward.
 *
 * Measured left edges before: hero 57px at every width from 601px up and 37px
 * below that, while the sections below sat at 100px (1440) and 24px (1280 and
 * narrower) -- the section container being min(1240, viewport - 48) centred.
 *
 * The fix gives the inner container a real width so a cap can apply, and hands
 * the gutter to the SHARED container token (--wp--custom--container--max /
 * --pad, already declared in theme.json), so the hero and the sections below are
 * driven by the same numbers rather than by two independent sets.
 *
 * Deliberately NOT inside a media query. The misalignment was measured at every
 * width, so the correction applies at every width; scoping it to the 1200px
 * breakpoint would have left the defect in place at 1040/768/390/320. No new
 * breakpoint is introduced, and the two existing hero breakpoints (601-640 and
 * <=600) keep their own tuning.
 *
 * Requires :has(). In a browser without it these rules are dropped and the hero
 * simply keeps its former, self-consistent layout -- the same fail-closed
 * posture the Stay Awhile card's reveal already relies on.
 */

/* The cover's 17px inline padding would offset the container from the page grid
   wherever the container is wider than the cover's content box (1280px measured
   41px instead of 24px). The container below owns the gutter instead. Vertical
   padding and the full-bleed background are untouched. */
.wp-block-cover:has(.ttdl-hero-search) {
	padding-inline: 0;
}

/*
 * The same core rule that forces `width: auto` on the inner container also
 * forces `margin: 0`, so `margin-inline: auto` there is discarded and the
 * container stays pinned left. Centring is therefore done by the cover packing
 * its single flex item instead.
 *
 * The selector deliberately names the exact core configuration it is
 * overriding -- core ships
 *   .wp-block-cover.has-custom-content-position.is-position-center-left
 *     { align-items: center; justify-content: flex-start }
 * at three classes, so three classes plus :has() wins on specificity rather
 * than on stylesheet order, which for block styles is not guaranteed.
 *
 * Horizontal packing ONLY. The cover keeps its is-position-center-left class
 * and its vertical centring, and the hero text stays left-aligned inside the
 * container -- what moves is the container, onto the page grid.
 */
.wp-block-cover.has-custom-content-position.is-position-center-left:has(.ttdl-hero-search) {
	justify-content: center;
}

/*
 * flex-basis, not width. WordPress core ships
 *   .wp-block-cover.has-custom-content-position:not(.is-position-center-center)
 *     .wp-block-cover__inner-container { width: auto; margin: 0 }
 * at specificity (0,4,0), higher than a block stylesheet can reach here without
 * an escalation war, so `width: 100%` was silently discarded and the container
 * kept shrink-wrapping. As a flex item of the cover its basis decides its main
 * size regardless of `width`, so `flex: 1 1 100%` gets there without fighting
 * core on specificity -- and for the same reason no `margin-inline: auto` is
 * declared here, since it would be inert.
 */
.wp-block-cover__inner-container:has(> .ttdl-hero-search) {
	flex: 1 1 100%;
	max-width: calc(var(--wp--custom--container--max, 1240px) + 2 * var(--wp--custom--container--pad, 24px));
	padding-inline: var(--wp--custom--container--pad, 24px);
}

.ttdl-hero-search__eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-300);
	margin-bottom: 18px;
}

.ttdl-hero-search__heading {
	font-family: var(--wp--preset--font-family--serif-display);
	/*
	 * hero-xl tops out at 5rem (80px) from ~1224px up. At 80px the headline's
	 * longest line measures ~717px against the hero's 700px content box and
	 * breaks to a 3rd orphan line at 1440px.
	 *
	 * The ceiling is set by the Georgia fallback, not by DM Serif Display:
	 * font-display is swap, so the fallback renders during every cold load.
	 * Measured widths of that line in a 700px box -- 76px: DM Serif 681px
	 * (19px slack) but Georgia 696px (3.7px slack, i.e. a coin flip);
	 * 72px: DM Serif 645px (55px) and Georgia 660px (40px). Hence 4.5rem.
	 *
	 * Cap engages at ~988px ((72 - 38.4) / 3.4), so 1040px renders at 72px
	 * rather than 73.76px -- a 1.76px reduction. 768px (64.51px) and the
	 * <=600px override (34px) are below the cap and unchanged.
	 */
	font-size: min(var(--wp--preset--font-size--hero-xl, 56px), 4.5rem);
	line-height: 1.05;
	color: var(--wp--preset--color--ivory-050);
	margin: 0 0 18px;
}

.ttdl-hero-search__deck {
	font-size: 19px;
	line-height: 1.55;
	color: rgba(252, 249, 243, 0.88);
	margin: 0 0 28px;
	max-width: 54ch;
}

.ttdl-hero-search__form {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--preset--border-radius--s);
	padding: 8px 8px 8px 18px;
	margin-bottom: 20px;
	max-width: 620px;
}

.ttdl-hero-search__input {
	flex: 1;
	border: none;
	outline: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	min-height: 44px;
	background: transparent;
	color: var(--wp--preset--color--text-primary);
}

.ttdl-hero-search__input:focus-visible {
	box-shadow: var(--wp--custom--shadow--inset-focus);
}

.ttdl-hero-search__submit {
	flex: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	background: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--ivory-050);
	border: none;
	border-radius: var(--wp--preset--border-radius--s);
	padding: 12px 20px;
	min-height: 44px;
	cursor: pointer;
}

.ttdl-hero-search__submit:hover,
.ttdl-hero-search__submit:focus-visible {
	background: var(--wp--preset--color--navy-900);
}

.ttdl-hero-search__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ttdl-hero-search__chip {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--ivory-050);
	border: 1px solid rgba(252, 249, 243, 0.4);
	padding: 9px 16px;
	border-radius: var(--wp--preset--border-radius--s);
	text-decoration: none;
}

.ttdl-hero-search__chip:hover,
.ttdl-hero-search__chip:focus-visible {
	color: var(--wp--preset--color--gold-300, var(--wp--preset--color--gold-500));
}

.ttdl-hero-search__cta {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--navy-900);
	background: var(--wp--preset--color--gold-500);
	border: 1px solid var(--wp--preset--color--gold-500);
	padding: 9px 16px;
	border-radius: var(--wp--preset--border-radius--s);
	text-decoration: none;
}

.ttdl-hero-search__cta:hover,
.ttdl-hero-search__cta:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-900) !important;
}

/*
 * Narrow band just above the mobile breakpoint. At 601px the 34px override
 * stops applying and hero-xl resumes at 58.8px, and the headline used to break
 * to a 3rd line from 601px to ~628px (measured; the Georgia fallback is the
 * binding case, since font-display is swap). Heading only -- padding and deck
 * are deliberately left alone.
 *
 * 3.25rem is hero-xl's own clamp minimum, not an arbitrary value.
 *
 * The pressure this relieves has eased: the content box across this band used
 * to be 487-526px (viewport - 34px cover padding - 80px hero padding) and is
 * now 553-592px, because the hero takes the shared 24px gutter instead of its
 * own. Re-measured with the rule in place, the longest line is 466px in a 553px
 * box at 601px. The override is kept anyway -- it is now conservative rather
 * than load-bearing, and dropping it would change the rendered type size, which
 * this task does not authorise. It should be re-tested if the headline copy
 * changes.
 */
@media (min-width: 601px) and (max-width: 640px) {
	.ttdl-hero-search__heading {
		font-size: 3.25rem;
	}
}

@media (max-width: 600px) {
	/* Vertical only. The inline gutter is the container's shared 24px at every
	   width now, so the old 20px here would have re-introduced a hero-specific
	   edge that no other section on the page uses. */
	.ttdl-hero-search {
		padding-block: 32px;
	}

	.ttdl-hero-search__heading {
		font-size: 34px;
	}

	.ttdl-hero-search__deck {
		font-size: 16px;
	}

	/* Input keeps flexbox's default min-width:auto = its 185px intrinsic width,
	   and the submit is flex:0 0 auto (112px, unshrinkable), fixing the line at
	   307px against a 292px content box below 414px. That 15px is what pushed
	   the button past the white background; releasing the minimum lets the
	   input absorb it. Inert at 414-600px, where the input is growing. */
	.ttdl-hero-search__input {
		min-width: 0;
	}

	/* Cover's inner container is a flex item; its min-width:auto pinned the hero
	   to a 357.8px min-content, overflowing narrow viewports. */
	.wp-block-cover__inner-container:has(> .ttdl-hero-search) {
		min-width: 0;
	}
}