/*
 * vml/search-dialog.
 *
 * The magnifier in the header and the search panel it opens. The panel is a
 * native <dialog> rendered as the last child of the sticky header and
 * opened non-modally, so it sits in normal flow: opening it grows the header
 * downward and pushes the page, while the bars above it stay put — the
 * magnifier and the hamburger do not move when used. The field and the
 * submit button repeat the search page's look (blocks/core-search.css), so
 * the panel and the page read as the same search.
 *
 * Loaded only where the block appears, in practice the header on every page.
 */

/* The toggle is a link (it works without JavaScript), but its job is icon
   button. 44px hit area: WCAG 2.5.8 asks 24, the CTA pill next to it is 33px
   tall, and a round 44px frame centers the icon on the same axis. */
.vml-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 9999px;
	color: var(--wp--preset--color--ink);
}

.vml-search__toggle:hover {
	background-color: var(--wp--preset--color--surface);
}

.vml-search__icon {
	display: block;
}

/* On mobile the main menu collapses to the hamburger and the CTA pill hides,
   so the row is hamburger + magnifier. The hamburger belongs at the screen
   edge; order swaps only these two adjacent controls, so the tab order stays
   sensible. */
@media (max-width: 1023px) {

	.vml-search {
		order: -1;
	}
}

/* ------------------------------------------------------------------- panel */

/* Position and size undo the UA's floating-box dialog styles: static keeps
   the non-modally opened element in the header's flow. */
.vml-search__dialog {
	position: static;
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

/* The unfold. A translate slide cannot push, because transforms do not take
   part in layout; a grid track from 0fr to 1fr animates the band's real
   height, so the header and the page glide down with it. Pure CSS: keyframes
   on [open], no script. Close is instant on purpose: an exit animation would
   need [open] kept alive while it runs, which means reimplementing close in
   JavaScript. Reduced motion is handled by theme.css, which zeroes every
   animation duration. */
.vml-search__dialog[open] {
	display: grid;
	grid-template-rows: 1fr;
	animation: vml-search-unfold 0.25s ease-out;
}

@keyframes vml-search-unfold {

	from {
		grid-template-rows: 0fr;
	}
}

/* min-block-size lets the grid track actually shrink the panel to zero, and
   the clip hides the content until the track has room for it.

   Two details keep the unfold from jumping. Block padding must not live here:
   a border-box can never be shorter than its padding, so 3.5rem + 4rem would
   floor the panel at 120px and the first half of the animation would pop into
   place instead of animating — the band's vertical space is the form's margin
   instead. And the clip is overflow: clip, not hidden: hidden makes the panel
   programmatically scrollable, so the autofocus that show() triggers scrolled
   the clipped content 46px up and it slid back as the track grew. clip cannot
   scroll. */
.vml-search__panel {
	position: relative;
	min-block-size: 0;
	overflow: clip;
	inline-size: 100%;
	max-inline-size: var(--wp--custom--width--outer);
	margin-inline: auto;
	padding-inline: var(--wp--custom--edge--padding);
}

/* The form sits centered in the band like the search field on the results
   page; the close control keeps to the band's top right corner. The block
   margins are the band's vertical padding, see .vml-search__panel. */
.vml-search__form {
	max-inline-size: 36rem;
	margin-block: 3.5rem 4rem;
	margin-inline: auto;
}

.vml-search__label {
	display: block;
	margin-block-end: 1rem;
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
}

.vml-search__row {
	display: flex;
}

.vml-search__input {
	flex: 1;
	min-inline-size: 0;
	padding: 0.875rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

/* Focus lands here the moment the panel opens, so this ring is the first
   thing seen. At the theme's default 2px offset it floats around the grey
   border and reads as a double frame; pulled onto the border line the two
   merge into one crisp ring. */
.vml-search__input:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline-offset: -1px;
}

.vml-search__submit {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	margin-inline-start: 0.5rem;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	cursor: pointer;
}

.vml-search__submit:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

.vml-search__close {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: var(--wp--custom--edge--padding);
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.75rem;
	border: 0;
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.vml-search__close:hover {
	color: var(--wp--preset--color--primary);
}