/* ==========================================================================
   chrome.css — site header, site footer, mobile ask bar.
   Mobile-first. The only breakpoint is 900px, always min-width.
   Owns: parts/header.html, parts/footer.html, parts/ask-bar.html
   ========================================================================== */

:root {
	--cd-ask-bar-h: 74px;
}

/* --------------------------------------------------------------------------
   0. Skip link

   The header part ships a visible skip link on the theme's .cd-skip-link
   treatment, pointed at the #cd-content <main> every template renders. It only
   takes over when that target is actually on the page; otherwise it stays out of
   the tab order and WordPress's own skip link — which always resolves, because
   core writes the id itself — is left alone.
   -------------------------------------------------------------------------- */

.cd-skip-link--header {
	display: none;
}

body:has(#cd-content) .cd-skip-link--header {
	display: block;
}

body:has(#cd-content) #wp-skip-link {
	display: none;
}

/* --------------------------------------------------------------------------
   1. Header shell
   -------------------------------------------------------------------------- */

.cd-site-header {
	background: var(--cd-paper);
	border-bottom: 1px solid var(--cd-rule-soft);
}

/* Templates put .cd-site-header on the <header> wrapper as well as the part's
   own group. Only the outer one paints, so the hairline is never drawn twice. */
.cd-site-header .cd-site-header {
	background: none;
	border-bottom: 0;
}

.cd-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 10px 11px;
}

/* Block layout adds flow margins between children; the flex row owns spacing. */
.cd-site-header__inner > *,
.cd-brand > *,
.cd-brand__text > *,
.cd-site-header__end > * {
	margin-block: 0;
}

@media (min-width: 900px) {
	.cd-site-header__inner {
		padding-block: 15px;
		gap: 24px;
	}
}

/* --------------------------------------------------------------------------
   2. Brand — circular logo + wordmark + mono stock line
   -------------------------------------------------------------------------- */

.cd-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

@media (min-width: 900px) {
	.cd-brand {
		gap: 12px;
	}
}

.cd-brand .wp-block-site-logo {
	flex: none;
	line-height: 0;
	margin: 0;
}

/* The logo is a 34px circle; the link around it gets a 44px hit area without
   changing how big the circle looks. */
.cd-brand .wp-block-site-logo a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin-inline: -5px;
}

.cd-brand .wp-block-site-logo a,
.cd-brand .wp-block-site-logo img {
	display: block;
}

.cd-brand .wp-block-site-logo img {
	width: 34px;
	height: 34px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
}

@media (min-width: 900px) {
	.cd-brand .wp-block-site-logo img {
		width: 40px;
		height: 40px;
	}
}

/* The "cd" mark: an ink circle with the bright accent, drawn in CSS so it
   needs no media-library logo. It sits beside the site title link, which is
   the brand's one tab stop, so the mark itself is hidden from AT and focus. */
.cd-brand__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cd-ink);
	color: var(--cd-accent-bright);
	font: 800 13px/1 var(--cd-sans);
	letter-spacing: -.02em;
	text-decoration: none;
}

.cd-brand__mark:hover {
	color: var(--cd-accent-bright);
}

@media (min-width: 900px) {
	.cd-brand__mark {
		width: 40px;
		height: 40px;
		font-size: 15px;
	}
}

.cd-brand__text {
	min-width: 0;
}

.cd-brand .wp-block-site-title {
	font: 800 14px/1 var(--cd-sans);
	letter-spacing: -.01em;
	text-transform: lowercase;
	color: var(--cd-ink);
	margin: 0;
}

.cd-brand .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.cd-brand .wp-block-site-title a:hover {
	color: var(--cd-ink);
}

@media (min-width: 900px) {
	.cd-brand .wp-block-site-title {
		font-size: 17px;
		letter-spacing: -.015em;
	}
}

.cd-brand__meta {
	margin: 3px 0 0;
	font: 500 9.5px/1.4 var(--cd-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cd-ink-soft);
}

@media (min-width: 900px) {
	.cd-brand__meta {
		margin-top: 4px;
		font-size: 10px;
	}
}

/* --------------------------------------------------------------------------
   3. Header end — nav + search
   -------------------------------------------------------------------------- */

.cd-site-header__end {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: none;
}

/* --------------------------------------------------------------------------
   4. Navigation
   WP 7.0 renders one link list, always inside .wp-block-navigation__responsive-container.
   Core flips it to a desktop row at 600px; the design's breakpoint is 900px, so
   these rules out-specify core's (4 classes vs 3) at every width and then hand
   the desktop layout back at 900px.
   -------------------------------------------------------------------------- */

.cd-site-header .wp-block-navigation {
	font-family: var(--cd-sans);
}

/* --- The "Menu" affordance (hasIcon:false renders a text button) --- */

.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container-open {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	font: 600 11.5px var(--cd-sans);
	color: var(--cd-ink);
	cursor: pointer;
	/* The word "Menu" is only 30x18px of ink, well under the 44px minimum for
	   the primary navigation control on a phone. The hit area is grown with
	   padding and the accent rule is drawn on an ::after pinned to the text, so
	   the button reads exactly as before but is comfortably tappable. */
	position: relative;
	min-height: 44px;
	padding: 0 8px;
	margin-right: -8px;
}

.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 12px;
	height: 2px;
	background: var(--cd-accent);
}

.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container-open:hover::after {
	background: var(--cd-ink);
}

/* --- Overlay (closed) --- */

.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: none;
}

/* --- Overlay (open) --- */

.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--cd-paper);
	color: var(--cd-ink);
	padding: 14px var(--cd-gutter) 40px;
}

/* Core reserves room for an icon-sized close control and offsets the dialog to
   clear it. The text control is smaller, so the offsets are reset and the close
   button is positioned against the fixed overlay itself. */
.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	margin: 0;
	padding: 0;
	height: auto;
}

.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: static;
	margin-top: 0;
}

.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 46px;
}

.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	padding: 0;
}

.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font: 700 22px/1.2 var(--cd-sans);
	letter-spacing: -.02em;
	color: var(--cd-ink);
	padding: 10px 0;
}

/* Close mirrors the "Menu" affordance and sits where it sat. */
.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 21px;
	right: var(--cd-gutter);
	padding: 0 0 3px;
	background: none;
	border: 0;
	border-bottom: 2px solid var(--cd-accent);
	border-radius: 0;
	font: 600 11.5px var(--cd-sans);
	color: var(--cd-ink);
	cursor: pointer;
}

.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container-close:hover {
	border-bottom-color: var(--cd-ink);
}

/* --- Link styling (shared) --- */

.cd-site-header .wp-block-navigation .wp-block-navigation__container {
	gap: 24px;
	list-style: none;
	margin: 0;
}

.cd-site-header .wp-block-navigation .wp-block-navigation-item__content {
	font: 500 13.5px/1.2 var(--cd-sans);
	color: var(--cd-ink-muted);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}

.cd-site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--cd-ink);
	border-bottom-color: var(--cd-ink);
	text-decoration: none;
}

/* Current page — ink text with the accent underline. */
.cd-site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.cd-site-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	font-weight: 600;
	color: var(--cd-ink);
	border-bottom-color: var(--cd-accent);
}

/* --- Desktop: hand the row back to core's layout --- */

@media (min-width: 900px) {
	.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: none;
	}

	.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: flex;
		position: relative;
		inset: auto;
		width: auto;
		padding: 0;
		background: none;
		z-index: auto;
	}

	.cd-site-header .wp-block-navigation .wp-block-navigation__responsive-dialog {
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   5. Header search — desktop only, per the design
   -------------------------------------------------------------------------- */

.cd-site-header .cd-search {
	display: none;
}

@media (min-width: 900px) {
	.cd-site-header .cd-search {
		display: flex;
		flex: none;
		width: 210px;
		gap: 8px;
		padding: 8px 12px;
		border-radius: var(--cd-r-input);
	}

	.cd-site-header .cd-search__icon {
		width: 11px;
		height: 11px;
	}

	.cd-site-header .cd-search input[type="search"] {
		font-size: 12.5px;
		line-height: 1.4;
	}
}

/* The circle glyph doubles as the submit control so it stays keyboard-reachable
   with a visible focus ring, and the form still works with JS disabled. */
.cd-search__submit {
	order: -1;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: inherit;
}

.cd-search__submit:hover .cd-search__icon {
	border-color: var(--cd-ink);
	background: var(--cd-accent);
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */

.cd-footer {
	background: var(--cd-ink);
	color: #fff;
}

.cd-footer__inner {
	padding-block: 22px 24px;
}

@media (min-width: 900px) {
	.cd-footer__inner {
		padding-block: 40px 36px;
	}
}

/* --- CTA row --- */

.cd-footer__cta {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

@media (min-width: 900px) {
	.cd-footer__cta {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 48px;
	}
}

.cd-footer__pitch {
	max-width: 560px;
}

.cd-footer .cd-footer__title {
	font: 800 22px/1.15 var(--cd-sans);
	letter-spacing: -.025em;
	color: #fff;
	margin: 0;
}

@media (min-width: 900px) {
	.cd-footer .cd-footer__title {
		font-size: 34px;
		line-height: 1.1;
		letter-spacing: -.03em;
	}
}

.cd-footer .cd-footer__lede {
	margin: 8px 0 0;
	font: 400 12.5px/1.5 var(--cd-sans);
	color: var(--cd-on-dark-muted);
}

@media (min-width: 900px) {
	.cd-footer .cd-footer__lede {
		margin-top: 10px;
		font-size: 14.5px;
		line-height: 1.55;
	}
}

/* The trailing sentence rides in the lede on desktop and under the button on
   mobile — the design does both, so exactly one copy is ever displayed. */
.cd-footer__lede-more {
	display: none;
}

@media (min-width: 900px) {
	.cd-footer__lede-more {
		display: inline;
	}
}

.cd-footer__action {
	display: flex;
	flex-direction: column;
	flex: none;
}

.cd-footer .cd-footer__btn {
	width: 100%;
	font-size: 13.5px;
	padding: 15px;
	border-radius: var(--cd-r-image);
}

@media (min-width: 900px) {
	.cd-footer .cd-footer__btn {
		width: auto;
		font-size: 15px;
		padding: 16px 34px;
		white-space: nowrap;
	}
}

.cd-footer .cd-footer__note {
	margin: 9px 0 0;
	font: 500 10.5px/1.5 var(--cd-sans);
	color: var(--cd-on-dark-soft);
	text-align: center;
}

@media (min-width: 900px) {
	.cd-footer .cd-footer__note {
		display: none;
	}
}

/* --- Base row: platform chips + legal --- */

.cd-footer__base {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 22px;
}

@media (min-width: 900px) {
	.cd-footer__base {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
		margin-top: 40px;
		padding-top: 26px;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}
}

.cd-footer .cd-footer__eyebrow {
	margin: 0;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .09em;
	color: var(--cd-on-dark-soft);
}

@media (min-width: 900px) {
	.cd-footer .cd-footer__eyebrow {
		font-size: 10px;
	}
}

.cd-footer__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 11px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.cd-footer__tags {
		gap: 8px;
		margin-top: 12px;
	}
}

.cd-footer__tags .cd-tag-outline {
	text-transform: uppercase;
}

.cd-footer .cd-footer__legal {
	margin: 0;
	font: 500 10px/1.7 var(--cd-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cd-on-dark-soft);
	text-align: left;
}

@media (min-width: 900px) {
	.cd-footer .cd-footer__legal {
		flex: none;
		font-size: 10.5px;
		line-height: 1.8;
		text-align: right;
	}
}

/* Designer credit — the last line of the footer, bottom left. */
.cd-footer .cd-footer__credit {
	margin: 22px 0 0;
	font: 500 10px/1.7 var(--cd-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cd-on-dark-soft);
}

.cd-footer .cd-footer__credit a {
	color: var(--cd-on-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cd-footer .cd-footer__credit a:hover,
.cd-footer .cd-footer__credit a:focus {
	color: var(--cd-accent-bright);
}

@media (min-width: 900px) {
	.cd-footer .cd-footer__credit {
		margin-top: 26px;
		font-size: 10.5px;
	}
}

/* --------------------------------------------------------------------------
   7. Ask bar — the mobile conversion surface that replaces the cart.
   Under 900px only. Fixed, so it survives a long product page; the site
   wrapper carries matching bottom padding so it never sits on the last line.
   -------------------------------------------------------------------------- */

.cd-ask-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--cd-ink);
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* The fixed bar needs clearance or it covers the last line of the page. Putting
   that clearance on .wp-site-blocks added it *below* the footer — a band of
   paper between the dark footer and the dark bar, which reads as a gap. The
   clearance belongs inside the footer, so the dark band simply runs on behind
   the bar and the two meet. */
/* Applied to the INNERMOST .cd-footer only. The templates put the class on the
   template-part wrapper and parts/footer.html carries it too, so a plain
   `.cd-footer` selector matches both nested elements and the clearance is added
   twice — 148px of dead black between the legal line and the bar.
   :not(:has(.cd-footer)) picks the inner one, which is also the element that
   paints the dark background. */
body:has(.cd-ask-bar) .cd-footer {
	padding-bottom: 0;
}

body:has(.cd-ask-bar) .cd-footer:not(:has(.cd-footer)) {
	padding-bottom: var(--cd-ask-bar-h);
}

.cd-ask-bar__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}

.cd-ask-bar .cd-ask-bar__meta {
	flex: none;
	margin: 0;
	font: 500 9px/1.4 var(--cd-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	white-space: nowrap;
}

.cd-ask-bar .cd-ask-bar__btn {
	flex: 1;
	font-size: 13.5px;
	padding: 14px;
	border-radius: 9px;
}

@media (min-width: 900px) {
	.cd-ask-bar {
		display: none;
	}

	body:has(.cd-ask-bar) .cd-footer,
	body:has(.cd-ask-bar) .cd-footer:not(:has(.cd-footer)) {
		padding-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   Home in the navigation

   The overlay menu is the only way back to the front page on a phone: the
   header logo is a home link, but nothing in the open menu says so. A Home item
   was added to the navigation for that reason.

   On desktop the design's nav is Shop / Sold / About / Sell to me / Contact —
   the logo carries Home there — so the item is hidden once the row is visible.
   It stays in the DOM and in the overlay, which is where it is needed.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.cd-site-header .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__container > .wp-block-navigation-item:first-child {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   The ask bar's wrapper must not take up space

   `wp:template-part` renders a real <div> into the flow, and the site's block
   gap gives it a 22px top margin. The bar inside it is position:fixed, so the
   wrapper is 0px tall — the margin was pure paper below the dark footer on
   every template that includes the bar (shop, sold, search, both product
   taxonomies, single product).
   -------------------------------------------------------------------------- */

.wp-site-blocks > .wp-block-template-part:has(.cd-ask-bar) {
	margin-block: 0;
	line-height: 0;
}