/* ============================================================
   Add To Cart site chrome: utility bar, navigation, footer.

   Values from the Claude Design mockup, Homepage.dc.html.

   Loaded on EVERY page, and only in preview. This is the one
   stylesheet in the rebuild that is not homepage-scoped, so it
   is kept in its own file rather than bolted onto the band
   stylesheet: what ships site-wide should be easy to see.

   Width matches --atc-content-max rather than the mockup's
   1200px, so the logo lines up with the band content beneath
   it. Two different measures would read as a mistake.
   ============================================================ */

/* ===========================================================================
 * FORM CONTROLS: ALWAYS USE TWO CLASSES. Read this before styling any input,
 * button or select in an ATC component.
 *
 * The parent theme and the Customizer's inline stylesheet both style form
 * controls by ATTRIBUTE SELECTOR:
 *
 *   input[type="text"], input[type="email"], ... { border: ... }
 *   button[type="submit"]                        { color: #fff }
 *
 * Those are specificity (0,1,1). A single class is (0,1,0), so it LOSES, and
 * it loses silently: no error, no warning, and the stylesheet reads correctly.
 * The only way to see it is to inspect the computed style on the rendered page.
 *
 * This has cost real time three times:
 *   - the cheat sheet submit sat WHITE on yellow at 1.27:1 for weeks (phase 2)
 *   - the header SEARCH label shipped white on yellow (5 Sep)
 *   - the search field's border was never once the colour we specified, first
 *     as 2px black and then as a hairline; it wore the theme's rgba(0,0,0,.1)
 *     throughout (5 Sep)
 *
 * THE RULE: scope every form-control declaration with its component's block
 * class as well as the element class, e.g.
 *
 *   .atc-nav .atc-nav__searchfield { ... }     GOOD  (0,2,0), beats (0,1,1)
 *   .atc-nav__searchfield          { ... }     BAD   (0,1,0), silently lost
 *
 * Reach for !important only where two classes still is not enough, which so
 * far is only where the theme itself used !important.
 *
 * CSS cannot un-set another rule, only outrank it, so there is no central
 * reset that makes single-class rules safe. The convention IS the fix.
 * ======================================================================== */

.atc-chrome { font-family: var(--atc-font, "Poppins", -apple-system, sans-serif); }

/* ---------- utility bar ---------- */

.atc-utility { width: 100%; background: var(--atc-black, #0A0A0A); }

.atc-utility__inner {
	max-width: var(--atc-content-max, 1102px);
	margin: 0 auto;
	padding: 0 24px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.atc-utility__link {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--atc-white, #FFFFFF);
	text-decoration: none;
	padding: 4px 0;
}
.atc-utility__link:hover,
.atc-utility__link:focus { color: var(--atc-yellow, #FFE600); }
.atc-utility__link:focus-visible { outline: 2px solid var(--atc-yellow, #FFE600); outline-offset: 3px; }

.atc-utility__link--pill {
	background: var(--atc-yellow, #FFE600);
	color: var(--atc-black, #0A0A0A);
	font-weight: 800;
	padding: 7px 16px;
	border-radius: 999px;
	margin: 6px 0;
}
.atc-utility__link--pill:hover,
.atc-utility__link--pill:focus { color: var(--atc-black, #0A0A0A); background: var(--atc-white, #FFFFFF); }

/* ---------- main navigation ---------- */

.atc-nav {
	width: 100%;
	background: var(--atc-white, #FFFFFF);
	border-bottom: 2px solid var(--atc-black, #0A0A0A);
}

.atc-nav__inner {
	max-width: var(--atc-content-max, 1102px);
	margin: 0 auto;
	padding: 0 24px;
	min-height: 78px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	box-sizing: border-box;
}

.atc-nav__logo { display: block; flex: 0 0 auto; }
.atc-nav__logo img { height: 30px; width: auto; display: block; }

.atc-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 32px;
}

.atc-nav__item { position: relative; }

.atc-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--atc-black, #0A0A0A);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.atc-nav__label:hover,
.atc-nav__label:focus { color: var(--atc-black, #0A0A0A); }
.atc-nav__label:focus-visible { outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: 4px; }

.atc-nav__caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 150ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-nav__item--has-children[data-open="1"] .atc-nav__caret { transform: rotate(180deg); }

.atc-nav__item--soon .atc-nav__label { color: var(--atc-ink-500, #767676); cursor: default; }

.atc-nav__soon {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .14em;
	background: var(--atc-yellow, #FFE600);
	color: var(--atc-black, #0A0A0A);
	padding: 3px 7px;
	border-radius: 999px;
}

/* The dropdown panels are not in the mockup, which draws the top
   level only. Treatment follows the band system: white plate,
   2px rule, offset shadow. */
.atc-nav__sub {
	position: absolute;
	top: calc(100% + 14px);
	left: -18px;
	z-index: 60;
	min-width: 232px;
	list-style: none;
	margin: 0;
	padding: 10px 0;
	background: var(--atc-white, #FFFFFF);
	border: 2px solid var(--atc-black, #0A0A0A);
	box-shadow: 6px 6px 0 0 var(--atc-yellow, #FFE600);
	display: none;
}

.atc-nav__item--has-children:hover .atc-nav__sub,
.atc-nav__item--has-children:focus-within .atc-nav__sub,
.atc-nav__item--has-children[data-open="1"] .atc-nav__sub { display: block; }

/* A hover bridge across the 14px gap, so the panel does not close
   while the pointer travels down to it. */
.atc-nav__item--has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 16px;
}

.atc-nav__sub a {
	display: block;
	padding: 9px 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--atc-black, #0A0A0A);
	text-decoration: none;
}
.atc-nav__sub a:hover,
.atc-nav__sub a:focus { background: var(--atc-yellow, #FFE600); color: var(--atc-black, #0A0A0A); }

.atc-nav__toggle { display: none; }

/* ---------- footer ---------- */

.atc-footer {
	width: 100%;
	background: var(--atc-black, #0A0A0A);
	/* WHITE IS THE DEFAULT HERE, not inherited black. The page sets black text
	   on body, so anything in this footer that does not name a colour renders
	   black on a black ground and disappears. Setting it once on the footer
	   means a new element added later is legible by default rather than
	   invisible until somebody notices. */
	color: var(--atc-white, #FFFFFF);
	border-top: 4px solid var(--atc-yellow, #FFE600);
	padding: 72px 24px 40px;
	box-sizing: border-box;
	font-family: var(--atc-font, "Poppins", -apple-system, sans-serif);
}

.atc-footer__inner { max-width: var(--atc-content-max, 1102px); margin: 0 auto; }

.atc-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 2px solid var(--atc-ink-700, #2E2E2E);
}

.atc-footer__logo { height: 26px; width: auto; display: block; margin-bottom: 20px; }

.atc-footer__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 16px;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.atc-footer__socials a { color: var(--atc-white, #FFFFFF); text-decoration: none; }
.atc-footer__socials a:hover,
.atc-footer__socials a:focus { color: var(--atc-yellow, #FFE600); }

.atc-footer__links { display: flex; flex-direction: column; gap: 12px; }
.atc-footer__links a { color: var(--atc-white, #FFFFFF); font-size: 16px; text-decoration: none; }
.atc-footer__links a:hover,
.atc-footer__links a:focus { color: var(--atc-yellow, #FFE600); }

.atc-footer__signuptitle {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--atc-white, #FFFFFF);
}

.atc-footer__embed { width: 100%; }

.atc-footer__acknowledgement {
	margin: 28px 0 0;
	max-width: 78ch;
	font-size: 13px;
	line-height: 1.6;
	color: var(--atc-ink-300, #CFCFCF);
}

.atc-footer__legal {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 18px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--atc-ink-400, #A3A3A3);
}
.atc-footer__legal a { color: var(--atc-white, #FFFFFF); text-decoration: none; }
.atc-footer__legal a:hover,
.atc-footer__legal a:focus { color: var(--atc-yellow, #FFE600); }

/* ---------- narrow ---------- */

/* ---------- beating the Customizer's homepage paragraph rule ---------- */

/*
 * THE FOOTER'S PARAGRAPHS NEED TWO CLASSES AND !important. Not defensive
 * habit: an inline Customizer rule says
 *
 *     body.home h2.entry-title, body.home p { color: var(--clr_black) !important }
 *
 * That is specificity (0,1,2) WITH !important, so it beats any single-class
 * rule of ours, and it applies on the front page only. The exact symptom: the
 * footer headings were white on every episode post and black on the homepage,
 * on desktop and mobile alike, which is why testing a post kept showing them
 * correct.
 *
 * A two-class selector reaches (0,2,0), and with !important on both sides the
 * higher specificity wins. Same trap as the play strips in phase 4; it will
 * catch anything else that puts a <p> on a dark ground on the front page.
 */
.atc-footer .atc-footer__platformlabel,
.atc-footer .atc-footer__signuptitle {
	color: var(--atc-white, #FFFFFF) !important;
}

.atc-footer .atc-footer__acknowledgement {
	color: var(--atc-ink-300, #CFCFCF) !important;
}

/* ---------- breathing room under the header ---------- */

/*
 * The old theme header carried its own space beneath it. This one ends on a
 * 2px rule, so the first thing on the page began 8px under the navigation:
 * on an episode post the h1 was almost touching it.
 *
 * The padding goes INSIDE the first section rather than under the chrome as a
 * margin. These templates open with a full-bleed coloured block, so a margin
 * would push that block down and leave a white strip between the nav and the
 * colour. Padding keeps the block flush to the header and moves only its
 * contents.
 *
 * Not on the front page: the rebuilt hero is designed to sit hard against the
 * navigation and carries its own 64px.
 */
body:not(.home) .atc-chrome + .megaphone-section { padding-top: 44px; }

/* ---------- footer platform icons ---------- */

/* Two groups, Subscribe and Follow, because they are different
   asks: one gets you the episodes, the other is where else we
   are. Icon only, so the accessible name lives on the anchor's
   aria-label and the SVG is hidden from assistive tech. */

.atc-footer__platforms + .atc-footer__platforms { margin-top: 18px; }

.atc-footer__platformlabel {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--atc-white, #FFFFFF);
}

.atc-footer__icons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 14px;
	align-items: center;
}

.atc-footer__icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40px, so the tap target clears the 36px floor even though the
	   mark inside is 20px. */
	width: 40px;
	height: 40px;
	border: 2px solid var(--atc-ink-700, #2E2E2E);
	border-radius: 999px;
	color: var(--atc-white, #FFFFFF);
	text-decoration: none;
	transition: color 150ms var(--atc-ease, cubic-bezier(.22,1,.36,1)),
	            border-color 150ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-footer__icons a:hover,
.atc-footer__icons a:focus-visible {
	color: var(--atc-yellow, #FFE600);
	border-color: var(--atc-yellow, #FFE600);
}
.atc-footer__icons a:focus-visible { outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: 3px; }

.atc-footer__icon { display: block; }

/* ---------- beehiiv subscribe form sizing ---------- */

/*
 * BEEHIIV'S LOADER DOES NOT SIZE ITS OWN WRAPPER, so we do.
 *
 * The script injects an iframe at height:2000px inside a div it sets to
 * height:0 with overflow:hidden, then never corrects it. The form renders
 * perfectly inside the frame and is clipped to nothing. Verified by opening
 * subscribe-forms.beehiiv.com/v3/forms/<id> directly: the form is 52px tall
 * and correctly styled, so this is a resize-message failure on their side, not
 * a styling problem on ours.
 *
 * The height is generous on purpose. On submit the SUCCESS MESSAGE replaces the
 * form inside the frame and is taller than it, so a tight 52px would hide the
 * one thing a person is waiting to see. The frame is transparent, so the spare
 * room below the form is invisible.
 */
.atc-footer__embed div,
.atc-newsletter__embed div {
	/* Every level, not just the first: the loader nests a sizing div inside a
	   positioning div and it is the INNER one that is left at height:0. */
	height: auto !important;
	overflow: visible !important;
}

.atc-footer__embed iframe,
.atc-newsletter__embed iframe {
	height: 96px !important;
	width: 100%;
	display: block;
	border: 0;
	background: transparent;
	margin: 0;
}

@media (max-width: 900px) {
	.atc-utility__inner { justify-content: center; gap: 18px; padding: 6px 18px; }

	.atc-nav__inner { padding: 0 18px; min-height: 64px; flex-wrap: wrap; }
	.atc-nav__logo img { height: 26px; }

	/* The menu collapses behind a toggle. It is rendered in the
	   markup either way, so it still works with no JavaScript:
	   without the script the panel simply stays open below the
	   logo rather than being hidden behind a button that cannot
	   be pressed. */
	.atc-nav__toggle {
		display: block;
		width: 44px;
		height: 44px;
		border: 2px solid var(--atc-black, #0A0A0A);
		border-radius: 8px;
		background: var(--atc-white, #FFFFFF);
		cursor: pointer;
		position: relative;
	}
	.atc-nav__toggle span,
	.atc-nav__toggle span::before,
	.atc-nav__toggle span::after {
		content: "";
		position: absolute;
		left: 11px;
		width: 18px;
		height: 2px;
		background: var(--atc-black, #0A0A0A);
	}
	.atc-nav__toggle span { top: 20px; }
	.atc-nav__toggle span::before { top: -6px; left: 0; }
	.atc-nav__toggle span::after { top: 6px; left: 0; }

	.atc-nav__menu {
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding-bottom: 12px;
	}
	.atc-nav__menu[hidden] { display: none; }

	.atc-nav__item { width: 100%; border-top: 1px solid var(--atc-ink-200, #E6E6E6); }
	.atc-nav__label { width: 100%; justify-content: space-between; padding: 14px 0; }

	.atc-nav__sub {
		position: static;
		min-width: 0;
		border: 0;
		box-shadow: none;
		padding: 0 0 10px 14px;
	}
	.atc-nav__item--has-children:hover .atc-nav__sub,
	.atc-nav__item--has-children:focus-within .atc-nav__sub { display: none; }
	.atc-nav__item--has-children[data-open="1"] .atc-nav__sub { display: block; }
	.atc-nav__item--has-children::after { content: none; }

	/* Stacked, every column is full width, so the 40px desktop gutter reads as
	   a gap rather than a column break and the footer runs on for screens. */
	.atc-footer { padding: 40px 18px 28px; }
	.atc-footer__grid { gap: 24px; padding-bottom: 24px; }
	.atc-footer__logo { margin-bottom: 14px; }
	.atc-footer__platforms + .atc-footer__platforms { margin-top: 14px; }
	.atc-footer__platformlabel { margin-bottom: 6px; }
	.atc-footer__links { gap: 10px; }
	.atc-footer__acknowledgement { margin-top: 20px; }
}

/* ---------- phone ---------- */

@media (max-width: 767px) {
	/*
	 * THE NEWSLETTER PILL COMES OUT OF THE UTILITY BAR ON A PHONE.
	 *
	 * Three links plus a pill do not fit on one line at this width, so the pill
	 * wrapped to its own row and turned a 44px utility strip into a two-storey
	 * block sitting above the logo. Nathan's call: keep the three links, drop
	 * the pill. Nothing is lost, because Newsletter is in the nav and the
	 * footer carries a subscribe form of its own.
	 */
	.atc-utility__link--pill { display: none; }

	.atc-utility__inner { min-height: 40px; gap: 16px; padding: 4px 18px; }
	.atc-utility__link { font-size: 10px; }

	/*
	 * The footer read as a long column of loosely related blocks, because a
	 * three-column grid stacking to one column keeps its 32px column gap as
	 * vertical space between every group. Tightened, and the groups that belong
	 * together are pulled closer than the ones that do not.
	 */
	.atc-footer { padding: 36px 18px 24px; }
	.atc-footer__grid { gap: 24px; padding-bottom: 24px; }

	.atc-footer__logo { height: 22px; margin-bottom: 14px; }

	.atc-footer__platforms + .atc-footer__platforms { margin-top: 14px; }
	.atc-footer__platformlabel { margin-bottom: 6px; }
	.atc-footer__icons { gap: 10px; }
	.atc-footer__icons a { width: 38px; height: 38px; }

	.atc-footer__links { gap: 8px; }
	.atc-footer__links a { font-size: 15px; }

	.atc-footer__acknowledgement { margin-top: 18px; font-size: 12px; }
	.atc-footer__legal { margin-top: 12px; gap: 14px; }
}

/* ---------------------------------------------------------------------------
 * Footer platforms: label BESIDE the icons, not above them.
 *
 * Two stacked groups each with a heading over a row of icons cost four
 * vertical bands in a footer that was already long. Inline, the whole block is
 * two rows instead of four, which is most of the height Nathan wanted back.
 *
 * The label gets a fixed min-width so the SUBSCRIBE and FOLLOW icon rows start
 * at the same x. Without it the shorter word pulls its icons left and the two
 * rows read as unrelated.
 *
 * These rules sit after the media queries deliberately: the layout is inline at
 * every width, so the mobile blocks' margin-bottom on the label (which assumed
 * a stacked label) must not win. Narrowest case is SUBSCRIBE plus three 40px
 * targets, about 220px, which clears a 320px screen.
 * ------------------------------------------------------------------------- */
.atc-footer__platforms {
	display: flex;
	align-items: center;
	gap: 14px;
}

.atc-footer .atc-footer__platformlabel {
	margin: 0;
	flex: 0 0 auto;
	min-width: 86px;
}

.atc-footer__platforms + .atc-footer__platforms { margin-top: 10px; }

/* ---------------------------------------------------------------------------
 * The footer and newsletter forms now stack: field on top, button underneath.
 *
 * That makes them taller than the 96px frame set for the old side-by-side row,
 * and beehiiv's loader does not size its own iframe, so the height is ours to
 * get right. Field plus gap plus button is about 104px in the newsletter and
 * 98px in the footer; 120px clears both and still holds the success message,
 * which replaces the form rather than adding to it.
 * ------------------------------------------------------------------------- */
.atc-footer__embed iframe,
.atc-newsletter__embed iframe { height: 120px !important; }

/* ---------------------------------------------------------------------------
 * Stop the logo and toggle jumping when the mobile menu opens.
 *
 * .atc-nav__inner is min-height 64px, align-items:center, no vertical padding.
 * CLOSED, the only line is the 44px toggle, centred in 64px, so it sits 10px
 * below the top. OPEN, .atc-nav__menu takes flex-basis:100% and wraps to a
 * second line; the container is then taller than its min-height, so line one
 * collapses to its natural 44px and the toggle snaps to the very top, touching
 * the utility bar. That 10px is the jump Nathan saw.
 *
 * Holding the 10px as real padding makes both states identical: 44px toggle
 * plus 10px top and bottom is exactly the 64px min-height, so the closed state
 * does not change, and the open state keeps the same offset because padding
 * survives the wrap in a way centring does not.
 *
 * Scoped in its own media query on purpose. This file's mobile rules sit above
 * it, and an unscoped rule appended here would leak to every width.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.atc-nav__inner { padding: 10px 18px; }
}

/* ---------------------------------------------------------------------------
 * Sticky nav: the logo and menu pin to the top, the utility bar scrolls away.
 *
 * All widths, desktop included. No JavaScript. Three things have to be true at
 * once, and each was found the hard way:
 *
 * 1. .atc-chrome must not box its children. A sticky element can only stay
 *    pinned while its PARENT is still in view, and .atc-chrome is just the
 *    header: 106px, of which the nav is 66px. That gave 40px of travel, so the
 *    nav pinned for exactly the height of the utility bar and then left with
 *    its parent, which reads as not sticking at all. display:contents removes
 *    the box so the nav's containing block becomes .megaphone-main-wrapper,
 *    which spans the page. The element stays in the DOM, so the
 *    ".atc-chrome + .megaphone-section" rule above still matches, and
 *    font-family still inherits.
 *
 * 2. No ancestor may be a scroll container. The parent theme sets
 *    overflow-x:hidden on .megaphone-main-wrapper, which makes it a scrollport
 *    on both axes, and its height grows with content so it never scrolls:
 *    scrollHeight and clientHeight both measured 12452px while the document
 *    did the scrolling. Sticky resolves against its nearest scrollport, so the
 *    nav was pinned to a box that never moves. overflow-x:clip clips the same
 *    way without creating a scrollport. overflow-y may stay visible beside
 *    clip; the "visible becomes auto" coercion only applies when the other
 *    axis is neither visible nor clip.
 *
 * 3. z-index must clear the page. 400 sits above ordinary content and below
 *    the parent theme's 501-and-up band, where its player bar and overlays
 *    live.
 *
 * Sticky rather than fixed, so the nav keeps its space in the flow and nothing
 * below needs a compensating offset.
 * ------------------------------------------------------------------------- */
.megaphone-main-wrapper {
	overflow-x: clip;
	overflow-y: visible;
}

.atc-chrome { display: contents; }

.atc-nav {
	position: sticky;
	top: 0;
	z-index: 400;
}

/* ---------------------------------------------------------------------------
 * Header search.
 *
 * Desktop: a magnifier sitting after the last menu item; pressing it drops a
 * full width field onto its own line under the nav row.
 * Mobile: no magnifier at all. The field rides with the hamburger menu and
 * sits ABOVE the menu items, so opening the menu offers search first.
 *
 * The field is one element serving both, which is why .atc-nav__inner already
 * being a wrapping flex row does most of the work: flex-basis 100% pushes the
 * form to a line of its own at any width, and `order` decides whether it lands
 * above or below the menu items.
 *
 * Search is not decoration here. 90 days of GA4 shows 165 searches over 215
 * distinct queries with NO search control on the homepage at all, and the
 * queries are overwhelmingly guest and brand names: people re-finding one
 * episode. This is the way in; result quality is tracked separately.
 * ------------------------------------------------------------------------- */
.atc-nav__item--search { display: flex; align-items: center; }

.atc-nav__searchtoggle {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 40px keeps the tap target respectable while the mark inside is 18px. */
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--atc-black, #0A0A0A);
	cursor: pointer;
}

.atc-nav__searchtoggle:hover { background: var(--atc-ink-100, #F2F2F2); }
.atc-nav__searchtoggle:focus-visible {
	outline: 3px solid var(--atc-yellow, #FFE600);
	outline-offset: 2px;
}

.atc-nav__search {
	flex-basis: 100%;
	display: flex;
	gap: 12px;
	padding: 0 0 18px;
}

.atc-nav__search[hidden] { display: none; }

/*
 * TWO CLASSES, per the convention at the top of this file. As a single class
 * this block silently lost height, padding and background to the theme's
 * attribute selectors: the field rendered 40px tall with a transparent
 * background and 20px padding, none of which is what is written here.
 */
.atc-nav .atc-nav__searchfield {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	box-sizing: border-box;
	padding: 0 16px;
	border-radius: 8px;
	background: var(--atc-white, #FFFFFF);
	color: var(--atc-black, #0A0A0A);
	font-family: inherit;
	/* 16px is not a style choice: iOS zooms the page when a focused field is
	   under 16px, which on a sticky header throws the layout sideways. */
	font-size: 16px;
}

.atc-nav .atc-nav__searchfield::placeholder { color: var(--atc-ink-600, #767676); opacity: 1; }

.atc-nav .atc-nav__searchsubmit {
	flex: 0 0 auto;
	height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--atc-yellow, #FFE600);
	color: var(--atc-black, #0A0A0A);
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

.atc-nav__searchsubmit:focus-visible {
	outline: 3px solid var(--atc-black, #0A0A0A);
	outline-offset: 3px;
}

@media (max-width: 900px) {
	/* No magnifier on a phone: the menu is the way in. */
	.atc-nav__item--search { display: none; }

	/*
	 * Order is what puts the field above the menu items. In the markup the form
	 * follows the list, because that is the order desktop needs; here it is
	 * pulled in front. Logo and hamburger stay on line one at the default 0.
	 */
	.atc-nav__search { order: 1; padding-bottom: 14px; }
	.atc-nav__menu   { order: 2; }
}

/*
 * The form's flex-basis:100% only drops it to a new line if the row is allowed
 * to wrap, and the base .atc-nav__inner is nowrap: wrap was only ever set
 * inside the mobile query. Without this the field squeezed into the nav row at
 * 195px instead of spanning it.
 */
.atc-nav__inner { flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
 * Three UAT fixes on the header search.
 * ------------------------------------------------------------------------- */

/*
 * 1. The nav row jumped up 19px when the search opened, ending under the
 * utility bar. IDENTICAL cause to the mobile hamburger jump: .atc-nav__inner is
 * min-height 78px with align-items:center and NO vertical padding, so closed,
 * its single 40px line is centred and the logo sits 24px down. Open, the form
 * wraps, the container passes its min-height, line one collapses to its natural
 * 40px, and the logo lands at 5px.
 *
 * 19px of real padding is the same trick: 40px line + 19 top + 19 bottom = the
 * 78px min-height exactly, so the closed state does not move, and padding
 * survives the wrap where centring does not.
 */
.atc-nav__inner { padding: 19px 24px; }

/*
 * 2. The SEARCH label rendered WHITE on yellow. The parent theme styles
 * button[type="submit"] white at (0,1,1), which beats a single class. This is
 * the third time that rule has bitten: it did the same to the cheat sheet
 * button in phase 2, where it sat at 1.27:1 and unreadable for weeks. Two
 * classes plus !important, matching how that one was finally fixed.
 */
.atc-nav .atc-nav__searchsubmit { color: var(--atc-black, #0A0A0A) !important; }

/*
 * 3. Focus rings go black, not yellow. Yellow on the white nav was both ugly
 * and weak: #FFE600 on white is about 1.4:1, so as an indicator it barely
 * exists. Black is ~19:1 and keeps the keyboard affordance that a plain
 * outline:none would throw away.
 */
.atc-nav__searchfield:focus-visible,
.atc-nav__searchtoggle:focus-visible {
	outline: 3px solid var(--atc-black, #0A0A0A);
	outline-offset: 2px;
}

/*
 * Search field: a light hairline, not the heavy black rule.
 *
 * It was 2px solid black, borrowed from the cheat sheet field which sits on a
 * BLACK plate where a heavy white edge is the only thing defining it. On the
 * white nav that same weight reads as a box drawn around nothing.
 *
 * ink-400 (#A3A3A3) at 1px is the lightest existing token that stays near the
 * 3:1 guideline for a control boundary, at 2.5:1. ink-300 looks lighter still
 * but falls to 1.56:1, where the field stops announcing itself as a field. The
 * black focus ring does the heavy lifting once someone is actually in it, so
 * the resting state can afford to be quiet.
 */

/*
 * SPECIFICITY. Both earlier border rules on .atc-nav__searchfield lost silently.
 * The Customizer emits an INLINE sheet with
 *   input[type="text"], input[type="email"], ... input[type="search"] { border: ... }
 * at (0,1,1), which beats a single class at (0,1,0). So the field has been
 * wearing the theme's rgba(0,0,0,0.1) the whole time, not the 2px black we
 * thought, and not the hairline either. Two classes is (0,2,0) and wins without
 * reaching for !important. Same family as the white submit label.
 */
.atc-nav .atc-nav__searchfield {
	border: 1px solid var(--atc-ink-400, #A3A3A3);
}

/*
 * Focus: the hairline darkens, and that is all.
 *
 * Nathan's reasoning was that the placeholder clearing already signals the
 * field is live. It does not: placeholders persist while a field is focused and
 * empty, and only clear on the first keystroke (verified in-page). So with no
 * focus change there is no signal at all until someone types, and a keyboard
 * user tabbing through gets nothing whatsoever.
 *
 * This is the smallest honest indicator: no ring, no glow, no size change that
 * would shift the layout by a pixel. Just grey to black on a 1px edge.
 */
.atc-nav .atc-nav__searchfield:focus,
.atc-nav .atc-nav__searchfield:focus-visible {
	outline: none;
	border-color: var(--atc-black, #0A0A0A);
}