/* The hire-form disclosure (Wayne, 2 Oct): the form in the hire pattern starts COLLAPSED
 * behind a labelled summary wearing the brand double-chevron. It is a core Details block
 * with the class pwr-hire-disclosure — native <details>, so opening needs no JS and the
 * summary is a real, labelled, keyboard target. The summary TEXT is the label, editable in
 * the pattern like any other text.
 *
 * The chevron is the theme's own copy of the brand arrow (assets/images/ui/arrow-right.svg,
 * from the media library's arrows-orange-right — its orange is baked in), rotated to point
 * down at rest and up when open, on a ::after so the summary text stays plain. */

.wp-block-details.pwr-hire-disclosure > summary {
	display: flex;
	align-items: center;
	/* No box since 2 Oct (Wayne): the label rides right, up against the chevron. */
	justify-content: flex-end;
	text-align: right;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	cursor: pointer;
	list-style: none; /* the brand chevron replaces the triangle marker */
	/* Heading-family voice, a couple of notches under the band's H2 (Wayne, 2 Oct —
	   level with it was too big). XL is the h4 step. */
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xl);
	line-height: var(--wp--custom--leading--xl);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--normal);
}
.wp-block-details.pwr-hire-disclosure > summary::-webkit-details-marker { display: none; }

.wp-block-details.pwr-hire-disclosure > summary::after {
	content: "";
	flex: none;
	/* em-sized so the chevron rides the label's heading scale */
	width: 0.55em;
	height: 0.55em;
	background: url(../images/ui/arrow-right.svg) center / contain no-repeat;
	transform: rotate(90deg); /* closed: the chevron points down */
}
.wp-block-details.pwr-hire-disclosure[open] > summary::after {
	transform: rotate(-90deg); /* open: it points back up */
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-details.pwr-hire-disclosure > summary::after {
		transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
	}
}

.wp-block-details.pwr-hire-disclosure > summary:hover {
	color: var(--wp--preset--color--orange);
}
.wp-block-details.pwr-hire-disclosure > summary:focus-visible {
	outline: none;
	box-shadow: var(--wp--preset--shadow--focus);
}

/* The open panel: the form gets room to breathe inside the hairline. */
.wp-block-details.pwr-hire-disclosure > :not(summary) {
	margin: 0;
	padding: var(--wp--preset--spacing--m);
	padding-top: var(--wp--preset--spacing--s);
}

/* ── The companion copy ties itself to the form (Wayne, 2 Oct) ────────────────────────────
   The pattern's extra contact details (.pwr-hire-extra, the group beside the form) appear
   WITH the form: hidden while the disclosure is closed, revealed when it opens — whether by
   the auto-open or by hand, since :has() reads the open attribute either way. Scoped inside
   @supports so a browser without :has() simply always shows the copy, which is the right
   failure. The fade rides the motion guard; reduced-motion visitors get the same tie with
   no animation. */
@supports selector(:has(*)) {
	.wp-block-columns:has(.pwr-hire-disclosure:not([open])) .pwr-hire-extra {
		display: none;
	}
	.wp-block-columns:has(.pwr-hire-disclosure[open]) .pwr-hire-extra {
		display: block;
	}
	@media (prefers-reduced-motion: no-preference) {
		.wp-block-columns:has(.pwr-hire-disclosure[open]) .pwr-hire-extra {
			animation: pwr-hire-extra-in 0.45s var(--wp--custom--motion--ease-standard) both;
		}
	}
}
@keyframes pwr-hire-extra-in {
	from { opacity: 0; transform: translateY(10px); }
}

/* ── The form OPEN (design review, 15 Oct 2026) ──────────────────────────────────────────
   "Start your hire today": always expanded, "Get started" the size of the heading. The
   <details> above is replaced in the synced band by `wp powershift hireforms` with a plain
   group — .pwr-hire-form, the H2 and the form — and the same group wraps the form on the Hire
   now and Get in touch pages inside their glass surface. The disclosure rules stay for any
   copy of the pattern not yet rewritten; with no <details> on the page the companion copy's
   :has() rule above never matches and the copy simply shows, which is what "open" means. */
.pwr-hire-form {
	padding: var(--wp--preset--spacing--m);
}
.pwr-hire-form__title {
	margin: 0 0 var(--wp--preset--spacing--m);
}
/* The form's own heading in the glass reads at the band heading's size; theme.json's h2 scale
   does that already, so there is nothing to size here — only the band's left heading has its
   margin reset, and this matches it. */


/* ── The open form, folded by script (web catch-up, 23 Oct) ─────────────────────────────
   assets/js/disclosure.js turns "Get started" into a button and the rest of the group into a
   panel that opens as the visitor reaches it. None of this applies until the script has run:
   no JS, no button, and the form is open as above. The chevron is the summary's. */
.pwr-hire-form__toggle {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	width: 100%;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}
.pwr-hire-form__toggle::after {
	content: "";
	flex: none;
	width: 0.55em;
	height: 0.55em;
	background: url(../images/ui/arrow-right.svg) center / contain no-repeat;
	transform: rotate(90deg);
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}
.pwr-hire-form.is-open .pwr-hire-form__toggle::after { transform: rotate(-90deg); }
.pwr-hire-form__toggle:hover { color: var(--wp--preset--color--orange); }
.pwr-hire-form__toggle:focus-visible { box-shadow: var(--wp--preset--shadow--focus); }
/* The heading's gap moves inside the panel, so folded the heading is the whole group and the
   gap opens with the form instead of jumping in ahead of it. */
.pwr-hire-form:has(.pwr-hire-form__toggle) .pwr-hire-form__title { margin-bottom: 0; }
/* doubled: the flow layout's `* + *` gap would otherwise sit under a folded heading */
.pwr-hire-form__panel.pwr-hire-form__panel { overflow: hidden; margin-block-start: 0; }
/* a box, not padding: padding would survive the panel's height of 0 and show as a strip */
.pwr-hire-form__panel::before { content: ""; display: block; height: var(--wp--preset--spacing--m); }
.pwr-hire-form__panel > :first-child { margin-top: 0; }