/* ==========================================================================
   Header
   Converted from design-reference/showroom-floor.css §3.

   The sticky element is the <header> template part itself, not the bar inside
   it. `position: sticky` is bounded by the element's containing block, and a
   bar inside a <header> that is only as tall as the bar has nowhere to stick
   to — it would scroll away with its parent. So the templates give the part a
   class and it sticks against the page.

   The export's 72px bar has no token behind it. It becomes spacing--70 (80px)
   on a desktop and spacing--60 (64px) on a phone, where 80px of chrome is a
   sixth of the viewport. Both are real steps in the scale, which is the same
   move my-list.css makes using spacing--80 as a thumbnail track.

   Its wordmark does not carry over either: the export sets it in the display
   face at 20px, under the 28px floor. Both recorded in
   design-reference/README.md.
   ========================================================================== */

.tfs-header-outer {
	position: sticky;
	top: 0;
	/* Above the listing's filter scrim (40) and below its drawer (60), so a
	   drawer covers the header but a dimmed page does not hide it. */
	z-index: 50;
	background-color: var(--wp--preset--color--surface);
	border-bottom: var(--wp--custom--hairline);
}

/* Core puts a preset step above every child of the site wrapper. The header
   and the bar above it are chrome, not content, and sit flush. */
.wp-site-blocks > .tfs-header-outer,
.wp-site-blocks > .tfs-announce-outer {
	margin-block-start: 0;
}

/*
 * A sticky header hides whatever a Tab lands on behind it. scroll-margin is
 * honoured when the browser scrolls a newly focused element into view, so this
 * is the whole fix: one step more than the tallest the bar ever gets.
 *
 * :where() keeps the specificity at zero, so it is a default any component can
 * override rather than a rule anything has to fight.
 */
:where(a[href], area, button, input, select, summary, textarea, [tabindex]:not([tabindex="-1"])) {
	scroll-margin-block-start: var(--wp--preset--spacing--80);
}

/* --------------------------------------------------------------------------
   The bar
   -------------------------------------------------------------------------- */

/*
 * The inner row is a single constrained child, so core centres it at the
 * content width and this file only has to lay out what is inside it. That is
 * also why the row is not the constrained container itself: an auto margin on
 * a flex item absorbs free space instead of centring, and core sets
 * `margin-inline: auto !important` on every constrained child.
 */
.tfs-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--preset--spacing--60);
}

.tfs-header .tfs-header__inner > * {
	margin-block-start: 0;
}

@media (min-width: 782px) {
	.tfs-header__inner {
		min-height: var(--wp--preset--spacing--70);
		gap: var(--wp--preset--spacing--40);
	}
}

/* --------------------------------------------------------------------------
   Brand

   Height is capped and width follows, so a mark with different proportions
   lands the same. The mark ships with the theme rather than being uploaded —
   see blocks/site-brand/render.php. If the file is missing the site name stands
   in as text; the note on that rule says why it is not set in the display face
   the export uses.
   -------------------------------------------------------------------------- */

.tfs-brand {
	flex: 0 0 auto;
	min-width: 0;
}

.tfs-brand__link {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tfs-brand__link:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Focus indicators are exempt from the no-shadow rule: outline, never shadow. */
.tfs-brand__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/*
 * Body face, not display. The export sets the wordmark in the display face at
 * 20px, and CLAUDE.md floors display type at 28px and reserves that face for H1
 * and H2 — so this is the same call the room landing page's tile name already
 * makes, and it is made here for the same reason. Recorded in
 * design-reference/README.md.
 *
 * The display tracking goes with it: -0.01em is drawn for Libre Caslon at
 * display sizes and only makes Instrument Sans at 20px look cramped.
 */
.tfs-brand__link--text {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sub);
	letter-spacing: 0;
	line-height: var(--wp--custom--line-height--tight);
}

/*
 * The cap is on the height and the width follows, so a replacement mark with
 * different proportions lands at the same size without this file changing.
 *
 * 40px and 48px are their own token pair rather than spacing steps. 48px is
 * spacing--50, but 40px is not a step in the scale at all, and borrowing a
 * spacing token for one cap while inventing a number for the other is how the
 * two drift apart. Both caps sit comfortably inside the bar's own min-height —
 * 64px on a phone, 80px from 782px up — so the square mark never makes the
 * header taller than it already is.
 *
 * The source is 144px square for a mark that renders at 48 on a desktop and 40
 * on a phone — 3.0x and 3.6x. There is no srcset and does not need to be one:
 * a single file already covers every density the header will ever be asked
 * for, and the browser downscales it. The intrinsic size is declared on the tag
 * in blocks/site-brand/render.php and has to be kept in step with the file.
 */
.tfs-brand__logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: var(--wp--custom--logo-height--mobile);
	height: auto;
}

@media (min-width: 782px) {
	.tfs-brand__logo {
		max-height: var(--wp--custom--logo-height--desktop);
	}
}

/* --------------------------------------------------------------------------
   Utilities — delivery, search, list, phone

   No cart and no account: this site sells nothing online and has no logins.
   -------------------------------------------------------------------------- */

.tfs-utils {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--step--8);
	/* Pushes the group to the end of the row. Safe here — these are flex items
	   of this file's own container, not of a constrained layout. */
	margin-inline-start: auto;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
}

@media (min-width: 782px) {
	.tfs-utils {
		gap: var(--wp--preset--spacing--30);
	}
}

.tfs-utils__button,
.tfs-utils__list,
.tfs-utils__phone,
.tfs-utils__deliver {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--step--8);
	min-height: var(--wp--custom--control--tap-target-minimum);
	min-width: var(--wp--custom--control--tap-target-minimum);
	padding: 0;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
}

.tfs-utils__button:hover,
.tfs-utils__list:hover,
.tfs-utils__phone:hover,
.tfs-utils__deliver:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: none;
}

.tfs-utils__button:focus-visible,
.tfs-utils__list:focus-visible,
.tfs-utils__phone:focus-visible,
.tfs-utils__deliver:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/*
 * The delivery signpost. Hidden below the desktop breakpoint, where this row
 * is already four tap targets wide — the drawer carries it there instead.
 * Underlined because it is prose in a row of icons, and nothing else here
 * looks like a sentence.
 */
.tfs-utils__deliver {
	display: none;
	min-width: 0;
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 1024px) {
	.tfs-utils__deliver {
		display: inline-flex;
	}
}

/* The word is for a desktop; on a phone the bookmark icon and the number carry
   it, and the accessible name is on the link either way. */
.tfs-utils__list-label {
	display: none;
}

@media (min-width: 1024px) {
	.tfs-utils__list-label {
		display: inline;
	}
}

.tfs-utils__count {
	display: inline-block;
	min-width: var(--wp--custom--control--box);
	padding-inline: var(--wp--custom--step--4);
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--wp--preset--color--surface);
	background-color: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius);
}

/*
 * An empty list has nothing to announce. display:none takes it out of the
 * accessibility tree too, so the link reads "My list" rather than "My list 0" —
 * and the badge appears the moment the first piece is saved.
 */
.tfs-utils__count[data-count="0"] {
	display: none;
}

/* The number on a desktop, the icon on a phone. Both are the same link and the
   same tap target; only what it shows changes. */
.tfs-utils__phone-number {
	display: none;
}

@media (min-width: 1024px) {
	.tfs-utils__phone-icon {
		display: none;
	}

	.tfs-utils__phone-number {
		display: inline;
		font-variant-numeric: tabular-nums;
	}
}