/**
 * Coming Soon page.
 *
 * Loaded only on the coming-soon page itself (inc/coming-soon.php), so it's
 * deliberately its own small stylesheet rather than folded into landing.css
 * or child.css — every logged-out visitor to the site hits this page while
 * the gate is on, so it stays light: no extra font load (DM Sans is already
 * the site-wide face via the Customizer), just layout and colour on top of
 * child.css.
 *
 * Classic theme note: on the front end (not in the editor) core wraps every
 * group's children in its own .wp-block-group__inner-container even with no
 * theme.json — see CLAUDE.md. This page nests groups three deep
 * (.cc-coming-soon > .cc-coming-soon__row > .cc-coming-soon__col-text /
 * __col-image), so each level's wrapper needs handling: either the group
 * itself is the flex container (.cc-coming-soon__row) or the wrapper is
 * taken out of the box tree with `display: contents`.
 *
 * @package experthive-child
 */

/*
 * The site header's nav (Chefs, Listings, Requests, List a Service…) and the
 * footer are still ordinary front-end links, which for a logged-out visitor
 * just bounce straight back to this page — confusing, and it undercuts the
 * "nothing to see yet" framing. Both are hidden here rather than skipped at
 * the template level: ExpertHive/HiveTheme render page chrome through their
 * own component system, not a simple get_header()/get_footer(), so a
 * template-level bypass would be a bigger, riskier change than hiding two
 * elements on one page. The block's own logo (below) carries the branding
 * these leave behind. No page-ID scoping needed: this stylesheet is only
 * ever enqueued on the coming-soon page itself (inc/coming-soon.php).
 */
body .site-header,
body .site-footer {
	display: none;
}

/*
 * Full-width background: revised 2026-09-21 — the photo version (golden-hour
 * table shot, attachment 910) read as washed-out rather than as an actual
 * visible background once scrimmed enough to keep the text legible, and the
 * photo itself wasn't wanted regardless. Replaced with a genuine full-page
 * treatment instead of a photo: solid cream plus a fine navy dot-texture
 * tiled edge to edge — the same dot language the site already uses for its
 * heading ornaments and panel corners (see `content-title::before` in the
 * parent theme, and the corner dot fields built for the landing pages this
 * session), just spread across the whole background instead of one corner.
 * CSS only, no image request — stays as light as the plain-cream original.
 */
/*
 * Pinned to the true viewport, full stop — not full-bleed-within-the-flow.
 * Two things `width: 100vw` + `height: 100vh` on a normally-flowed element
 * *don't* fix, both reported from a real browser: (1) the page template
 * wraps `the_content()` in the parent theme's flexboxgrid `.container`
 * (max-width, auto-centered) plus its own vertical padding, so even at the
 * right width/height the box still sat wherever the ancestors' padding put
 * it — offset from the top, with matching space left below it, i.e. white
 * bars above and below; (2) a taller-than-viewport box still just grows
 * the document and scrolls, `height: 100vh` included. `position: fixed;
 * inset: 0` sidesteps both at once: fixed positioning is relative to the
 * viewport, not any ancestor, so `.container`'s padding and max-width stop
 * applying to this element entirely, and it can never make the *document*
 * taller than the viewport since it no longer participates in the normal
 * flow those ancestors lay out (they collapse to ~0 height with no other
 * content in them). Every element between `.container` and this one stays
 * `position: static` — confirmed empirically — so nothing else on the page
 * depends on this box staying inside it.
 *
 * Content still has to actually fit inside that fixed box, though — see the
 * `min(Xvh, Yvw)` clamps below on the logo, gaps, heading size and
 * form padding (mirrored in blocks/coming-soon-signup/style.css for the
 * parts that live in that block): each is bounded by *whichever* viewport
 * dimension is tighter, so a short-but-wide window and a narrow-but-tall
 * one both shrink the same stack correctly, not just one axis. `100dvh`
 * accounts for mobile browser chrome (the address bar) that `100vh`
 * doesn't; `100vh` stays as the fallback for browsers that don't parse
 * `dvh` (an unsupported unit invalidates the whole declaration, so the
 * earlier one wins). `overflow: hidden` is a last-resort clamp on top of
 * all that, not the primary fix — content sized to fit shouldn't need it.
 */
body .cc-coming-soon {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-block: clamp(0.75rem, min(3.5vh, 4vw), 2.5rem);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	overflow: hidden;
	background-color: #FFF1E5;
	background-image: radial-gradient(rgba(3, 39, 72, 0.1) 1.5px, transparent 1.5px);
	background-size: 28px 28px;
	text-align: center;
	z-index: 1;
}

/*
 * Admin bar preview only: it's also `position: fixed; top: 0`, so without
 * this the two fixed elements would overlap instead of the page pushing
 * this one down the way it would for a normal-flow element. 32px desktop,
 * 46px under WordPress's own 782px responsive breakpoint for the admin bar
 * itself. A logged-out visitor never has an admin bar and is unaffected.
 */
body.admin-bar .cc-coming-soon {
	top: 32px;
	height: calc(100vh - 32px);
	height: calc(100dvh - 32px);
}

@media screen and (max-width: 48.875em) {

	body.admin-bar .cc-coming-soon {
		top: 46px;
		height: calc(100vh - 46px);
		height: calc(100dvh - 46px);
	}
}

/*
 * Even with .cc-coming-soon correctly offset and sized around it, the admin
 * bar still left a 32px (46px narrow) scroll behind — confirmed by testing:
 * document.documentElement.scrollHeight was exactly 32px taller than
 * clientHeight at every size, with the visible content itself measuring no
 * overflow at all. The cause is core's own `html { margin-top: 32px
 * !important }` (wp-includes/admin-bar.php, _admin_bar_bump_cb() — an
 * inline style, not a stylesheet this can simply load after), which reserves
 * that space at the `html` element's own box regardless of what's inside it,
 * so the *document* measures taller than the viewport even though nothing
 * visible needs the extra room once .cc-coming-soon is handling its own
 * offset. `:root` duplicates the `html` selector while raising specificity
 * to (0,1,1), which beats core's bare `html` (0,0,1) at equal !important
 * regardless of which stylesheet the browser happens to parse first — more
 * reliable than depending on print order. Safe here specifically because
 * nothing else on this page depends on html's margin-top for position: the
 * header/footer are hidden and .cc-coming-soon already has its own explicit
 * top offset above.
 *
 * Unconditional (no `.admin-bar` gate): `html` can never be a descendant of
 * `body` in a selector — `body.admin-bar html` is invalid and matches
 * nothing, which is why this is written as plain `html:root` instead. That's
 * fine rather than a compromise: with no admin bar, core never sets
 * margin-top away from its 0 default in the first place, so this rule is a
 * harmless no-op for every logged-out visitor and only actually does
 * anything when the bar (and core's inline style) is present.
 */
html:root {
	margin-top: 0 !important;
}

/*
 * Two columns at wide viewports (revised 2026-09-22 — the icon-only version
 * still read as plain; this adds real photography back, but as a proper
 * right-hand column rather than a background, so it can't reopen the
 * "washed out" or "no scrolling" problems the last two revisions fixed).
 *
 * `.cc-coming-soon > .wp-block-group__inner-container` is the row itself —
 * `display: contents` isn't used here (unlike the other `display:contents`
 * spots in this file) because this wrapper is *itself* the flex container
 * that needs `align-items`/`justify-content`/`gap`, not a pass-through.
 *
 * Below 68em wide, or wherever height is genuinely tight (the
 * `@media … and (min-height: …)` guard), this collapses to exactly the
 * single-column, image-free, centered layout already proved to never
 * scroll at every size down to a landscape phone — `.cc-coming-soon__row`
 * just becomes that column directly (`flex-direction: column`), and
 * `.cc-coming-soon__col-image` is `display: none`. The two-column,
 * photography version is additive on top of that base, gated to viewports
 * with real room for it, not a separate layout that has to be independently
 * proven not to scroll at every size.
 */
/*
 * 2026-10-08: the wrapper is a column now — the two-column row, then the
 * chef recruitment strip (.cc-coming-soon__recruit) as its sibling — and the
 * pair is centred in the viewport together. The row therefore no longer
 * takes `height: 100%`; it is as tall as its content.
 */
.cc-coming-soon > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, min(3vh, 3vw), 2.25rem);
	width: 100%;
	height: 100%;
	max-width: 40rem;
}

.cc-coming-soon__row {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.cc-coming-soon__row > .wp-block-group__inner-container {
	display: contents;
}

.cc-coming-soon__col-text {
	display: flex;
	width: 100%;
}

.cc-coming-soon__col-text > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.cc-coming-soon__col-image {
	display: none;
}

@media only screen and (min-width: 68em) and (min-height: 30rem) {

	/* 61rem = text column (30) + widest gap (5) + photo column (26). With
	   `space-between` the two columns sit on the wrapper's edges at every
	   width, so the recruitment strip below — 100% of the same wrapper —
	   spans exactly the box the columns make, not the screen. */
	.cc-coming-soon > .wp-block-group__inner-container {
		max-width: 61rem;
	}

	.cc-coming-soon__row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: clamp(2.5rem, 5vw, 5rem);
	}

	.cc-coming-soon__col-text {
		flex: 1 1 26rem;
		max-width: 30rem;
	}

	.cc-coming-soon__col-text > .wp-block-group__inner-container {
		align-items: flex-start;
		text-align: left;
	}

	.cc-coming-soon__col-image {
		display: block;
		position: relative;
		flex: 1 1 22rem;
		/* No wider than it is tall (less a little), so the two photos — sized
		   from the height — still overlap as a collage on a short screen. */
		max-width: min(26rem, calc(min(52vh, 28rem) * 0.96));
		height: min(52vh, 28rem);
	}

	.cc-coming-soon__col-image > .wp-block-group__inner-container {
		display: contents;
	}
}

/* Sizes and gaps below use clamp(min, min(Xvh, Yvw), max) throughout — see
   the "Pinned to the true viewport" comment above for why min(vh, vw). */

/*
 * The wordmark is the page's only branding (the site header is hidden, and
 * the round brand-mark badge that sat under it was removed 2026-10-08), so
 * it is sized to lead the column. Attachment 749 at 1024px, not the 200px
 * header file, which blurred at this size.
 */
.cc-coming-soon .cc-coming-soon__logo {
	flex: none;
	width: clamp(11rem, min(31vh, 44vw), 21rem);
	height: auto;
	margin: 0 0 clamp(0.5rem, min(3vh, 4vw), 2rem);
}

.cc-coming-soon .cc-coming-soon__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Landscape phone: the signup form's success / duplicate message is two
   lines taller than the blank form and overflowed the box by a pixel at
   667x375, so the wordmark and the row gap give the height back. */
@media only screen and (max-height: 26rem) {

	.cc-coming-soon .cc-coming-soon__logo {
		width: 8rem;
		margin-bottom: 0.375rem;
	}

	.cc-coming-soon > .wp-block-group__inner-container {
		gap: 0.5rem;
	}
}

/* Once someone has signed up, the form is replaced by a taller thank-you
   (.cc-signup__done) and the intro's "leave your email" has done its job —
   on short screens it steps aside so the thank-you and the strip both fit. */
@media only screen and (max-height: 44rem) {

	.cc-coming-soon__col-text:has(.cc-signup__done, .cc-signup__error) .cc-coming-soon__body {
		display: none;
	}
}

/* The smallest landscape phones (568x320): the intro paragraph goes too. */
@media only screen and (max-height: 21rem) {

	.cc-coming-soon .cc-coming-soon__eyebrow,
	.cc-coming-soon .cc-coming-soon__body {
		display: none;
	}
}

.cc-coming-soon .cc-coming-soon__eyebrow {
	flex: none;
	margin: 0 0 clamp(0.375rem, min(1.2vh, 1.5vw), 0.75rem);
	color: #B8401F;
	font-size: clamp(0.6875rem, min(1.6vh, 1.8vw) + 0.35rem, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cc-coming-soon h1 {
	flex: none;
	margin: 0;
	color: #0F1727;
	font-size: clamp(1.375rem, min(5vh, 5.5vw) + 0.5rem, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
}

.cc-coming-soon .cc-coming-soon__body {
	flex: none;
	max-width: 34rem;
	margin: clamp(0.5rem, min(2vh, 2.2vw), 1.5rem) 0 0;
	color: rgba(15, 23, 39, 0.65);
	font-size: clamp(0.875rem, min(2vh, 2.2vw) + 0.45rem, 1.125rem);
	line-height: 1.5;
}

/* The signup block's own margin/padding (blocks/coming-soon-signup/style.css)
   is clamped the same way, so it shrinks with everything above it rather
   than holding a fixed gap while the rest of the stack compresses. */

/*
 * Chef recruitment strip (2026-10-08; it was a small navy card under the
 * signup form). A navy flex container with one row, placed after the two
 * columns and as wide as the box they make: label and one-line pitch, the
 * three Founding Chef terms from the recruitment page's hero card, and the
 * button to that page (1019, exempt from the gate) — not to the application
 * form. Navy so it reads as a separate audience from the guest signup.
 *
 * The legacy wrapper is the flex row. Below 68em there is one centred
 * column, so the strip narrows to the signup form's width and the terms are
 * dropped; under 36rem of height it also loses the pitch sentence there.
 */
.cc-coming-soon .cc-coming-soon__recruit {
	flex: none;
	width: 100%;
	max-width: 26rem;
	margin: 0;
	padding: clamp(0.625rem, min(1.8vh, 2.2vw), 1.125rem) clamp(0.875rem, min(2.4vh, 2.6vw), 1.5rem);
	border-radius: 4px;
	background-color: #032748;
	text-align: left;
}

.cc-coming-soon .cc-coming-soon__recruit > .wp-block-group__inner-container {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem clamp(1rem, 2vw, 1.5rem);
}

.cc-coming-soon .cc-coming-soon__recruit p {
	margin: 0;
}

.cc-coming-soon .cc-coming-soon__recruit-lead {
	flex: 1 1 auto;
	min-width: 0;
}

.cc-coming-soon .cc-coming-soon__recruit-eyebrow {
	margin-bottom: 0.125rem;
	color: #FFB4A6;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.cc-coming-soon .cc-coming-soon__recruit-title {
	color: rgba(255, 241, 229, 0.92);
	font-size: clamp(0.9375rem, min(1.6vh, 1.8vw) + 0.5rem, 1.1875rem);
	font-weight: 500;
	line-height: 1.3;
}

.cc-coming-soon .cc-coming-soon__recruit-title strong {
	color: #fff;
	font-weight: 700;
}

.cc-coming-soon .cc-coming-soon__recruit-terms {
	display: none;
}

.cc-coming-soon .cc-coming-soon__recruit-link {
	flex: none;
}

.cc-coming-soon .cc-coming-soon__recruit-link a {
	display: inline-block;
	padding: 0.5rem 0.875rem;
	border-radius: 4px;
	background-color: #fff;
	color: #032748;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.cc-coming-soon .cc-coming-soon__recruit-link a:hover,
.cc-coming-soon .cc-coming-soon__recruit-link a:focus-visible {
	background-color: #FFF1E5;
}

@media only screen and (max-width: 26em) {

	.cc-coming-soon .cc-coming-soon__recruit > .wp-block-group__inner-container {
		flex-wrap: wrap;
	}
}

@media only screen and (max-height: 36rem) {

	.cc-coming-soon .cc-coming-soon__recruit-title {
		display: none;
	}
}

@media only screen and (min-width: 68em) and (min-height: 30rem) {

	.cc-coming-soon .cc-coming-soon__recruit {
		max-width: none;
	}

	/* The pitch is the one part allowed to wrap; the terms and the button
	   keep their lines. */
	.cc-coming-soon .cc-coming-soon__recruit-lead {
		flex: 1 1 11rem;
	}

	/* One line of pitch costs little here, so it stays at any height. */
	.cc-coming-soon .cc-coming-soon__recruit-title {
		display: block;
	}

	.cc-coming-soon .cc-coming-soon__recruit-eyebrow {
		font-size: 0.78125rem;
		white-space: nowrap;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms {
		display: block;
		flex: none;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms > .wp-block-group__inner-container {
		display: flex;
		align-items: stretch;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms p {
		padding: 0 0.625rem;
		border-left: 1px solid rgba(255, 241, 229, 0.18);
		color: rgba(255, 241, 229, 0.7);
		font-size: 0.8125rem;
		line-height: 1.35;
		white-space: nowrap;
	}

	/* The wordmark file has clear space on its left; pull it back so the
	   lettering sits on the column's text edge. */
	.cc-coming-soon .cc-coming-soon__logo {
		margin-left: -0.65rem;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms p:last-child {
		padding-right: 0;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms strong {
		display: block;
		color: #fff;
		font-size: 1.0625rem;
		line-height: 1.25;
		white-space: nowrap;
	}

	.cc-coming-soon .cc-coming-soon__recruit-link a {
		padding: 0.625rem 1.125rem;
		font-size: 0.875rem;
	}
}

/*
 * Tablet (one centred column, 48em up, with height to spare): the strip
 * widens to the intro paragraph's measure and wraps to two rows — label,
 * pitch and button, then the three terms as equal columns under a rule.
 * (Owner's request 2026-10-08; they were hidden below the two-column layout.)
 */
@media only screen and (min-width: 48em) and (max-width: 67.99em) and (min-height: 44rem), only screen and (max-width: 47.99em) and (min-height: 41rem) {

	.cc-coming-soon .cc-coming-soon__recruit {
		max-width: 36rem;
	}

	.cc-coming-soon .cc-coming-soon__recruit > .wp-block-group__inner-container {
		flex-wrap: wrap;
		row-gap: 0.875rem;
	}

	/* Zero basis, so the pitch wraps beside the button instead of pushing
	   the button onto a row of its own. */
	.cc-coming-soon .cc-coming-soon__recruit-lead {
		flex: 1 1 0;
	}

	.cc-coming-soon .cc-coming-soon__recruit-eyebrow {
		font-size: 0.78125rem;
		white-space: nowrap;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms {
		display: block;
		order: 3;
		flex: 1 0 100%;
		padding-top: 0.875rem;
		border-top: 1px solid rgba(255, 241, 229, 0.18);
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms > .wp-block-group__inner-container {
		display: flex;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms p {
		flex: 1 1 0;
		padding: 0 0.875rem;
		border-left: 1px solid rgba(255, 241, 229, 0.18);
		color: rgba(255, 241, 229, 0.7);
		font-size: 0.8125rem;
		line-height: 1.35;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms p:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms strong {
		display: block;
		color: #fff;
		font-size: 1.0625rem;
		line-height: 1.25;
	}
}

/* Phone portrait shares the two-row strip above (owner's request
   2026-10-09), at the signup form's width and a size smaller. */
@media only screen and (max-width: 47.99em) and (min-height: 41rem) {

	.cc-coming-soon .cc-coming-soon__recruit {
		max-width: 26rem;
	}

	.cc-coming-soon .cc-coming-soon__recruit > .wp-block-group__inner-container {
		row-gap: 0.625rem;
	}

	/* Three full-width rows: label and pitch, the terms, then the button. */
	.cc-coming-soon .cc-coming-soon__recruit-lead {
		flex: 1 0 100%;
	}

	.cc-coming-soon .cc-coming-soon__recruit-eyebrow {
		font-size: 0.6875rem;
		white-space: normal;
	}

	.cc-coming-soon .cc-coming-soon__recruit-title {
		font-size: 0.9375rem;
	}

	.cc-coming-soon .cc-coming-soon__recruit-link {
		order: 4;
		flex: 1 0 100%;
	}

	.cc-coming-soon .cc-coming-soon__recruit-link a {
		display: block;
		text-align: center;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms {
		padding-top: 0.625rem;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms p {
		padding: 0 0.5rem;
		font-size: 0.75rem;
	}

	.cc-coming-soon .cc-coming-soon__recruit-terms strong {
		font-size: 0.9375rem;
	}
}

/*
 * The signup form fills its 26rem measure: it was a shrink-to-fit flex item
 * centred by its own auto margins, which left it indented in the
 * left-aligned wide layout.
 */
.cc-coming-soon .cc-signup {
	width: 100%;
}

@media only screen and (min-width: 68em) and (min-height: 30rem) {

	.cc-coming-soon .cc-signup {
		margin-inline: 0;
	}
}

/*
 * Two-photo collage — the right column, wide viewports only (see the
 * `@media (min-width: 68em)` block above, which is the only place
 * `.cc-coming-soon__col-image` is ever `display: block`). Adapted from the
 * homepage hero's own three-photo collage (`.ec-lp-collage` in
 * landing.css), simplified to two images and sized against the column's own
 * box (percentages, `aspect-ratio`) rather than that pattern's fixed `rem`
 * offsets, so it scales with `.cc-coming-soon__col-image`'s own
 * `min(64vh, 30rem)` height instead of holding a fixed size regardless of
 * how much room is actually available.
 *
 * The two photos (attachments 803 arrival, 808 farewell) are deliberately
 * a pair rather than one dominant image or an arbitrary two — first knock,
 * last handshake, the two ends of the same evening — and, like the earlier
 * single hero photo this replaced, neither is from the family/couples/
 * girls-trip sets: a service moment with no visible child/partner/group
 * context reads as universal rather than signalling one audience, which
 * still matters since this page is the front door for everyone.
 */
.cc-coming-soon__photo {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 16px 40px rgba(3, 39, 72, 0.16);
}

.cc-coming-soon__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Sized from the column's HEIGHT, not its width (fixed 2026-10-14). The
 * column is `min(52vh, 28rem)` tall, so on a short laptop screen it is much
 * shorter than it is wide; a photo sized as a share of the width (68% wide at
 * 3:4) came out taller than the column and hung down over the recruitment
 * strip — at 1280x600 by 65px. Height in percent keeps both photos inside the
 * column at every size; `max-width` only bites on a tall, narrow column, and
 * the image is `object-fit: cover`, so it crops rather than distorts there.
 */
.cc-coming-soon__photo--1 {
	top: 0;
	left: 0;
	height: 86%;
	max-width: 68%;
	aspect-ratio: 3 / 4;
}

.cc-coming-soon__photo--2 {
	right: 0;
	bottom: 0;
	height: 66%;
	max-width: 52%;
	aspect-ratio: 3 / 4;
	border: 5px solid #FFF1E5;
}