/**
 * Kata header.
 *
 * Geometry is taken from the 1600px Figma frame and expressed as ratios so it
 * holds from phone to 4K:
 *
 *   page gutter  145 / 1600  =  9.0625%   (capped so 4K does not get absurd)
 *   utility bar  30px tall, black @ 50% over the page, 1px white @ 30% rule
 *   main bar     73px tall
 *   logo         132 x 50, at the inline-END (physical left in RTL)
 *   actions      search icon + 26px + CTA pill (129 x 36, radius 12)
 *   primary nav  at the inline-START (physical right in RTL), 33px gaps
 *
 * DIRECTION NOTE
 * The Figma composition places the KATA wordmark on the physical LEFT and the
 * primary navigation on the physical RIGHT. In an RTL document that means the
 * logo sits at the inline-END, which is the reverse of the usual convention.
 * That is implemented faithfully below via an explicit grid order rather than
 * by accident. See README-HEADER.md — the LTR behaviour is an open question.
 */

.kata-header {
	position: relative;
	z-index: 10;
	inline-size: 100%;

	/* 145/1600 of the viewport, floored on phones and capped on very wide screens. */
	--kata-header-gutter: clamp( 1rem, 9.0625vw, 9rem );
}

/*
 * The header's height is FIXED, not merely a minimum, and published to the
 * document so the hero can subtract it — Figma's first fold is 750px INCLUDING
 * the 105px header, not 750px beneath it.
 *
 * Fixed rather than min- because the hero's height is derived from this number:
 * if content could push the bars taller, the first fold would silently exceed
 * one viewport and the hero image would be pushed below the fold.
 *
 * 30px utility bar + 73px main bar = 103px, the drawn geometry.
 */
:root {
	--kata-header-utility: 30px;
	--kata-header-bar: 73px;
	--kata-header-height: calc( var( --kata-header-utility ) + var( --kata-header-bar ) );
}

/*
 * THE MOBILE BAR GOVERNS EVERYTHING BELOW 1280, NOT EVERYTHING BELOW 782.
 *
 * There is no tablet frame. Every frame in the file is 395 wide or 1440/1600/
 * 1920 wide, so the band between them was never drawn — and the build filled
 * the gap by switching the desktop bar on at 782, far earlier than it fits.
 *
 * It does not fit until about 1240: measured off node 2273:4978, the logo
 * (132) + search icon (25) + CTA pill (181) + nav row (515) are 853px of
 * content that cannot shrink, and the page gutters add 275 more. Between 782
 * and roughly 1240 that content was being folded into a space too small for
 * it — the pill's label broke over four lines (המו/קד/הטל/פוני at 800), two
 * nav items wrapped, and the bar grew into a ~139px band with the logo pushed
 * out of it altogether.
 *
 * So the switch moves to 1280, where the designed bar fits whole. The band
 * is CLOSED rather than relocated: 1279 already renders the mobile bar, which
 * is drawn for every width it now serves. Frames: 2273:4591 (mobile row,
 * 320–1279) and 2273:4978 (desktop row, 1280 up). TAC-12.
 */
@media ( max-width: 1279px ) {
	:root {
		/*
		 * The utility bar is hidden at this width; only the main bar remains,
		 * and it is 94.5 tall — the drawn figure, set further down this file.
		 *
		 * This said 70, which nothing rendered: anything positioning itself
		 * against the header (the hero's fold calculation, the mobile drawer's
		 * top padding) was working from a number 24.5 short of the bar it was
		 * measuring against.
		 */
		--kata-header-utility: 0px;
		--kata-header-bar: 94.5px;
	}
}

/*
 * The two bars stack flush. theme.json's blockGap would otherwise insert 24px
 * between them, which pushes the first fold past one viewport and reintroduces
 * exactly the gap the hero proportions were corrected for.
 */
.kata-header > *,
.kata-header__bar > * {
	/*
	 * The bar is a grid here but a flow group in the markup, so WordPress puts
	 * `margin-block-start: var(--wp--style--block-gap)` on every child except
	 * the first. On a centred grid item that margin is shared top and bottom,
	 * which pushed the phone mark and the menu toggle exactly half of it — 12px
	 * — below the logo they are supposed to sit level with.
	 */
	margin-block: 0;
}

/* -------------------------------------------------------------------------
 * Utility bar
 * ---------------------------------------------------------------------- */

.kata-header__utility {
	display: flex;
	align-items: center;
	block-size: var( --kata-header-utility );
	padding-inline: var( --kata-header-gutter );
	overflow: hidden;
	background-color: rgba( 0, 0, 0, 0.5 );
	border-block-end: 1px solid rgba( 255, 255, 255, 0.3 );
}

/*
 * The utility links align with the logo beneath them, forming one column at the
 * inline-END (physical left in RTL). Expressed logically rather than as a
 * physical side, so the pair stays together if the document direction flips.
 */
.kata-header__utility-nav {
	inline-size: 100%;
}

.kata-header__utility-nav .wp-block-navigation-item__content {
	color: var( --wp--preset--color--white );
	text-decoration: none;
}

.kata-header__utility-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Main bar
 * ---------------------------------------------------------------------- */

.kata-header__bar {
	display: grid;
	align-items: center;
	/*
	 * The actions cluster HUGS THE NAV; it is not centred on the viewport.
	 *
	 * Measured off the 1600px Figma frame: the CTA pill ends at x=914 and the
	 * navigation begins at x=955 — a 41px gap — while the space between the
	 * logo and the search icon is some 445px. Nav and actions are one group at
	 * the inline-start; the logo sits alone at the inline-end and the slack
	 * falls between them.
	 *
	 * Hence `auto auto 1fr`: the two content tracks size to themselves and the
	 * final track absorbs the remainder. An equal-outer-track layout centres the
	 * cluster on the viewport, which puts it ~90px adrift of the drawing.
	 */
	grid-template-columns: auto auto 1fr;
	grid-template-areas: "nav actions brand";
	/* 41/1600 of the viewport, floored so it never becomes cramped. */
	gap: clamp( 16px, 2.5625vw, 41px );
	block-size: var( --kata-header-bar );
	padding-inline: var( --kata-header-gutter );
}

.kata-header__brand {
	grid-area: brand;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
}

.kata-header__brand img {
	inline-size: clamp( 96px, 8.25vw, 168px );
	block-size: auto;
}

.kata-header__actions {
	grid-area: actions;
	/* Figma: 26px between the search icon and the CTA pill. */
	gap: 26px;
	justify-content: flex-start;
}

.kata-header__primary {
	grid-area: nav;
	justify-content: flex-start;
}

.kata-header__primary .wp-block-navigation-item__content {
	color: var( --wp--preset--color--white );
	text-decoration: none;
}

.kata-header__primary .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/*
 * Submenu carets sit at the item's inline-end, matching Figma. Core places the
 * arrow after the label already; this only normalises the gap.
 */
.kata-header__primary .wp-block-navigation__submenu-icon {
	margin-inline-start: 6px;
}

/* -------------------------------------------------------------------------
 * Desktop dropdown — Figma 2082:6662
 *
 * A 172x176 black panel, radius 12, four 16px rows on a 41px pitch, with the
 * hovered row carrying a white-20% band and its label in bold.
 *
 * Core's default is a 200px surface-grey box with square corners, a hairline
 * border and no shadow, so effectively all of it is overridden.
 *
 * THE FRAME'S SEPARATOR LINES ARE NOT REPRODUCED. It has three of them, at
 * y 47, 88 and 129 — and each is `stroke: black` at 25% opacity, drawn on a
 * black panel. They render as nothing, which the frame's own export confirms:
 * those three rows come back pure black across the full width. Reproducing
 * them faithfully means drawing nothing, and inventing a visible line instead
 * would be a change to the design rather than an implementation of it.
 *
 * These rules are for the WIDE layout only.
 *
 * Below 1280px the same navigation becomes the drawer, and the drawer's
 * submenu is a different thing entirely — full width, black, indented, no
 * panel — styled in menu.css under the matching max-width query. The
 * selectors here would otherwise match it too and fight that stylesheet for
 * every row.
 * ---------------------------------------------------------------------- */

@media ( min-width: 1280px ) {

	/*
	 * The repeated class is deliberate. Core paints this panel through
	 * `.wp-block-navigation.has-background .wp-block-navigation__submenu-container`
	 * and borders it through a `:not(.has-background)` sibling — both three classes
	 * deep, which a plainly-scoped rule ties with and loses to on source order. The
	 * repeat buys more classes and settles it without an `!important`.
	 *
	 * THREE REPEATS, NOT ONE, AND THE PLACEMENT IS WHY.
	 *
	 * Core's RTL sheet hangs this panel off the reading edge by default —
	 * `.wp-block-navigation .has-child .wp-block-navigation__submenu-container`
	 * gives it `right: -1px`, which is very nearly what the frame draws. But
	 * this navigation is `items-justified-right`, and core has a FIVE-class
	 * rule for that case putting it back to `left: 0; right: auto`. Written for
	 * a left-to-right page, where the last item's panel would otherwise run off
	 * the screen; in a right-to-left one it throws the panel inward, off the
	 * item that opened it. Two repeats only tied with it, and a tie is settled
	 * by load order — which is not something to rest a layout on.
	 */
	.kata-header__primary
		.has-child
		.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		/*
		 * 172px is the drawn width, kept as a MINIMUM rather than a fixed size:
		 * the longest label in the frame is 137px and only just fits inside it, so
		 * a label an editor makes slightly longer would wrap mid-word in a fixed
		 * box. Core's `width: auto` on an absolutely positioned box already shrinks
		 * to fit, so only the floor needs stating.
		 *
		 * `!important` on that floor, and only on it. Core sets `min-width: 200px`
		 * from a five-class selector on the open state — deep enough that matching
		 * it means restating core's whole selector chain here, which then breaks
		 * silently whenever core edits it. The rest of this rule wins on
		 * specificity alone.
		 */
		min-inline-size: 172px !important;

		padding: 0;
		border: 0;
		border-radius: 12px;
		box-shadow: 0 7px 30px rgba( 0, 0, 0, 0.5 );

		/*
		 * `!important` again, and for the same reason as the button hovers.
		 *
		 * The navigation's overlay background is `surface`, and core puts that
		 * preset on the SUBMENU container too — the element carries
		 * `has-surface-background-color`, which core emits as an `!important`
		 * declaration. The panel is black in the frame while the mobile drawer
		 * behind the same setting is not, so the two cannot simply be given the
		 * same colour, and nothing but `!important` outranks a preset class.
		 */
		background-color: var( --wp--preset--color--black ) !important;

		/*
		 * HUNG FROM THE PARENT'S READING EDGE.
		 *
		 * 2082:6662 sets the panel's right edge against the right edge of the
		 * item that opens it — the edge the label itself is set against in this
		 * document — and the panel runs inward from there. Core positions it
		 * with a physical `left: 0`, so it hung from the item's FAR edge and
		 * reached 101px past the label into the middle of the page.
		 *
		 * Logical, not `right: 0`: the panel belongs on whichever edge the
		 * navigation reads from, so an English build hangs it off the left
		 * without a second rule.
		 */
		inset-inline-start: 0;
		inset-inline-end: auto;
	}

	/*
	 * THE ROWS CARRY NO GROUND OF THEIR OWN.
	 *
	 * Core gives a submenu item `background-color: inherit`, so each row took
	 * the panel's black — and a row is a square box. Four of them painted over
	 * the panel's 12px corners from the inside, which is why the panel read as
	 * a hard-cornered rectangle however the radius was set. The rounding on the
	 * outer rows below is on the LINK, and the link is transparent, so it had
	 * nothing to round.
	 *
	 * The panel is already black. The rows only need a ground when one is
	 * hovered.
	 */
	.kata-header__primary
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item {
		background-color: transparent;
	}

	.kata-header__primary .wp-block-navigation__submenu-container li > a {
		display: flex;
		align-items: center;
		/*
		 * No justify-content: the main axis is the inline one, and in this RTL
		 * document its start is already the physical right the labels are drawn
		 * against. Naming `flex-end` here would push them to the left.
		 */
		min-block-size: 41px;
		padding-block: 0;
		/* 18px from the edge the text is set against; the far side only has to
		   clear the longest label. */
		padding-inline: 18px 16px;
		font-size: 16px;
		line-height: 1.035;
		/* The rows are a fixed pitch, so a label must never become two lines. */
		white-space: nowrap;
	}

	/*
	 * The panel's 6px inset, carried by the outer rows instead of by the panel.
	 *
	 * As padding on the row itself it is inside the hover band, which is what puts
	 * the band against the rounded corners. As padding on the panel it would sit
	 * outside, and the band would stop 6px short of the top and bottom.
	 *
	 * Border-box sizing keeps the label centred where it is drawn: 47 less the 6
	 * leaves the same 41px content box as every other row.
	 */
	.kata-header__primary
		.wp-block-navigation__submenu-container
		li:first-child
		> a {
		min-block-size: 47px;
		padding-block-start: 6px;
		/*
		 * The band is rounded rather than the panel clipping it.
		 *
		 * `overflow: hidden` on the panel would do the same job, but core sets
		 * `overflow: visible` on the open state from a five-class selector and
		 * relies on it for nested submenus — so taking that away costs an
		 * `!important` and a behaviour. Rounding the two corners the band actually
		 * touches is the same picture with neither.
		 */
		border-start-start-radius: 12px;
		border-start-end-radius: 12px;
	}

	.kata-header__primary .wp-block-navigation__submenu-container li:last-child > a {
		min-block-size: 47px;
		padding-block-end: 6px;
		border-end-start-radius: 12px;
		border-end-end-radius: 12px;
	}

	/*
	 * The hovered row's label is bold in the frame.
	 *
	 * It is set on the row rather than the link so it also covers the row the
	 * keyboard has focus in. The panel does not resize under it: at 172px it is
	 * already wider than the longest label needs even in bold.
	 */
	.kata-header__primary .wp-block-navigation__submenu-container li > a:hover,
	.kata-header__primary
		.wp-block-navigation__submenu-container
		li
		> a:focus-visible {
		/*
		 * 2082:6663 — white at a fifth over the row, which is the band the
		 * comment on the corner radii above was written for. Only the bold was
		 * ever set, so there was nothing for those corners to round.
		 */
		background-color: rgba( 255, 255, 255, 0.2 );
		font-weight: 700;
		text-decoration: none;
	}
}

/* -------------------------------------------------------------------------
 * Search
 *
 * core/search in "button-only" mode ships an accessible expanding field:
 * the icon is a real button with an accessible name, and the input is
 * revealed on activation. No custom overlay needed.
 * ---------------------------------------------------------------------- */

.kata-header__search .wp-block-search__button {
	padding: 0;
	/*
	 * ROOM AROUND THE GLYPH, WITHOUT MOVING THE BOXES.
	 *
	 * The 26 between this and the CTA pill is the frame's own spacing and is
	 * unchanged. What the icon had was no room of its own: the button was a
	 * bare 25px box drawn tight to the glyph, so the mark sat closer to its
	 * neighbours than any other control in the bar does.
	 *
	 * 44 square is the target size WCAG 2.5.5 asks for, so the number is one
	 * with a reason behind it rather than a nudge — and it puts 9.5 of clear
	 * air on each side of the mark, which is what does the spacing.
	 */
	min-inline-size: 44px;
	min-block-size: 44px;
	border: 0;
	background: transparent;
	color: var( --wp--preset--color--white );
	/*
	 * The button box is taller than the icon — core sizes it to the collapsed
	 * field, not to the glyph. It is a flex container, so without this the
	 * 25px icon is placed at the cross-axis start and rides some 8px above the
	 * centreline the pills either side of it sit on.
	 */
	align-items: center;
	justify-content: center;
}

.kata-header__search .wp-block-search__button svg {
	inline-size: 25px;
	block-size: 25px;
	fill: currentColor;
}

.kata-header__search .wp-block-search__input {
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 12px;
	background-color: rgba( 255, 255, 255, 0.08 );
	color: var( --wp--preset--color--white );
}

.kata-header__search .wp-block-search__input::placeholder {
	color: rgba( 255, 255, 255, 0.6 );
}

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

.kata-header__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Figma: the pill is 129 x 36. A minimum rather than a fixed width, so a
	   longer label in another language widens it instead of overflowing. */
	min-inline-size: 129px;
	min-block-size: 36px;
	padding-block: 0;
	padding-inline: var( --wp--preset--spacing--40 );
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * The phone is an ICON, never a second pill
 *
 * The bar carried TWO calls to action — this outlined pill reading
 * המוקד הטלפוני, and the filled צור קשר beside it. Neither governing frame
 * draws the outlined one: 2273:4978 has exactly one CTA (the filled pill)
 * plus the search glyph, and 2273:4591 has a bare 36x36 phone mark and no
 * wording at all. The words המוקד הטלפוני appear in no header in the file.
 *
 * It is also the thing that broke. Its label is 13 characters in a pill the
 * frame never budgeted for — about 120px plus its 26px gap — which is most of
 * what put the bar over its width between 782 and 1279.
 *
 * Hidden here rather than deleted from the template, because the SAME block
 * is the mobile phone mark: the `tel:` href is content and belongs to the
 * Site Editor, and only the mark is presentation. The narrow query below
 * turns this back on as the icon the frame draws. Two classes to match the
 * rule that does so, and placed before it so the narrow one wins in range.
 * TAC-12.
 * ---------------------------------------------------------------------- */

.kata-header__bar .kata-header__phone {
	display: none;
}

/* -------------------------------------------------------------------------
 * Narrow viewports
 *
 * The dedicated Kata mobile menu is a later phase. Until then the primary
 * navigation uses core's own responsive overlay (`overlayMenu: "mobile"`),
 * which is keyboard accessible and traps focus correctly — a working menu
 * rather than a decorative button that does nothing.
 *
 * The layout below matches the mobile Figma header: logo at the inline-end,
 * controls grouped at the inline-start.
 * ---------------------------------------------------------------------- */

@media ( max-width: 1279px ) {
	/*
	 * THE MOBILE BAR IS DRAWN, not derived. Frame 523:6784 gives it exactly:
	 * logo 122 x 46.5 at (20, 24), the phone mark 36 x 36 at x=279.58, and the
	 * menu toggle 29.42 x 18.08 at x=345.58 — so the bar is 94.5 tall and the
	 * hero image begins at 122.
	 */
	.kata-header {
		--kata-header-gutter: 20px;
	}

	.kata-header__utility {
		display: none;
	}

	.kata-header__bar {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "nav actions brand";
		block-size: 94.5px;
		align-items: center;
		gap: 0;
	}

	.kata-header__brand img,
	.kata-header__brand .custom-logo {
		inline-size: 122px;
		block-size: auto;
		max-inline-size: none;
	}

	.kata-header__actions {
		justify-content: flex-start;
		gap: 0;
	}

	/*
	 * The "צור קשר" pill and the search are desktop affordances; the drawn
	 * mobile bar carries a phone mark instead. Both stay in the template — they
	 * are not deleted, only unshown — so the Site Editor still owns them.
	 */
	/*
	 * Two classes deep on purpose: the buttons block's own layout rule is a
	 * single class and lands later in the cascade, so a one-class `display:
	 * none` here loses to it and the pill stays on the bar.
	 */
	.kata-header__bar .kata-header__cta,
	.kata-header__bar .kata-header__search {
		display: none;
	}

	/*
	 * The phone mark. A real, editable button block underneath: the href is
	 * content and stays in the template, and only the mark itself is
	 * presentation, painted as a mask so it inherits  and needs
	 * no SVG upload — which the project has not decided on.
	 */
	.kata-header__bar .kata-header__phone {
		display: block;
	}

	.kata-header__phone .wp-block-button__link {
		display: block;
		inline-size: 36px;
		block-size: 36px;
		padding: 0;
		border: 0;
		background-color: currentColor;
		color: var( --wp--preset--color--white );
		font-size: 0;
		-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 31.6406'%3E%3Cpath d='M20.1094 8.4375C20.6919 8.4375 21.1641 7.9653 21.1641 7.38281C21.1641 6.80032 20.6919 6.32812 20.1094 6.32812C19.5269 6.32812 19.0547 6.80032 19.0547 7.38281C19.0547 7.9653 19.5269 8.4375 20.1094 8.4375Z M24.3281 8.4375C24.9106 8.4375 25.3828 7.9653 25.3828 7.38281C25.3828 6.80032 24.9106 6.32812 24.3281 6.32812C23.7456 6.32812 23.2734 6.80032 23.2734 7.38281C23.2734 7.9653 23.7456 8.4375 24.3281 8.4375Z M28.5469 8.4375C29.1294 8.4375 29.6016 7.9653 29.6016 7.38281C29.6016 6.80032 29.1294 6.32812 28.5469 6.32812C27.9644 6.32812 27.4922 6.80032 27.4922 7.38281C27.4922 7.9653 27.9644 8.4375 28.5469 8.4375Z M23.7103 31.6406C25.4467 31.6406 26.8594 30.2212 26.8594 28.4766V24.2578C26.8594 23.8041 26.5692 23.4013 26.139 23.2575L19.8258 21.1481C19.5167 21.0449 19.1776 21.0902 18.9065 21.2709L16.2218 23.0607C13.3405 21.6935 9.93509 18.3182 8.58059 15.4882L10.3698 12.8044C10.5504 12.5334 10.5957 12.1941 10.4925 11.8851L8.38315 5.57198C8.23936 5.14167 7.83654 4.85156 7.38281 4.85156H3.16406C1.4194 4.85156 0 6.26421 0 8.00065C0 13.8279 2.64966 19.8086 7.26961 24.4093C11.8845 29.0049 17.877 31.6406 23.7103 31.6406ZM3.16406 6.96094H6.62323L8.3283 12.0639L6.50531 14.7984C6.31266 15.0874 6.27462 15.4526 6.40364 15.7751C7.10501 17.5285 8.50859 19.5005 10.3558 21.328C12.1908 23.1434 14.1725 24.5317 15.9358 25.237C16.2582 25.3659 16.6236 25.3279 16.9125 25.1353L19.6471 23.3123L24.75 25.0174V28.4766C24.75 29.068 24.2933 29.5312 23.7103 29.5312C12.607 29.5312 2.10938 19.0678 2.10938 8.00065C2.10938 7.41762 2.57266 6.96094 3.16406 6.96094Z M19.7058 18.9041C20.0998 19.0673 20.5535 18.9771 20.8552 18.6755L24.765 14.7656H28.5469C32.6565 14.7656 36 11.4537 36 7.38281C36 3.31193 32.6565 0 28.5469 0H20.1094C16.0385 0 12.7266 3.31193 12.7266 7.38281C12.7266 11.0957 15.4816 14.1772 19.0547 14.6905V17.9297C19.0547 18.3563 19.3117 18.7408 19.7058 18.9041ZM14.8359 7.38281C14.8359 4.47504 17.2016 2.10938 20.1094 2.10938H28.5469C31.4934 2.10938 33.8906 4.47504 33.8906 7.38281C33.8906 10.2906 31.4934 12.6562 28.5469 12.6562H24.3281C24.0484 12.6562 23.7801 12.7673 23.5824 12.9651L21.1641 15.3835V13.7109C21.1641 13.1285 20.6918 12.6562 20.1094 12.6562C17.2016 12.6562 14.8359 10.2906 14.8359 7.38281Z'/%3E%3C/svg%3E" );
		mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 31.6406'%3E%3Cpath d='M20.1094 8.4375C20.6919 8.4375 21.1641 7.9653 21.1641 7.38281C21.1641 6.80032 20.6919 6.32812 20.1094 6.32812C19.5269 6.32812 19.0547 6.80032 19.0547 7.38281C19.0547 7.9653 19.5269 8.4375 20.1094 8.4375Z M24.3281 8.4375C24.9106 8.4375 25.3828 7.9653 25.3828 7.38281C25.3828 6.80032 24.9106 6.32812 24.3281 6.32812C23.7456 6.32812 23.2734 6.80032 23.2734 7.38281C23.2734 7.9653 23.7456 8.4375 24.3281 8.4375Z M28.5469 8.4375C29.1294 8.4375 29.6016 7.9653 29.6016 7.38281C29.6016 6.80032 29.1294 6.32812 28.5469 6.32812C27.9644 6.32812 27.4922 6.80032 27.4922 7.38281C27.4922 7.9653 27.9644 8.4375 28.5469 8.4375Z M23.7103 31.6406C25.4467 31.6406 26.8594 30.2212 26.8594 28.4766V24.2578C26.8594 23.8041 26.5692 23.4013 26.139 23.2575L19.8258 21.1481C19.5167 21.0449 19.1776 21.0902 18.9065 21.2709L16.2218 23.0607C13.3405 21.6935 9.93509 18.3182 8.58059 15.4882L10.3698 12.8044C10.5504 12.5334 10.5957 12.1941 10.4925 11.8851L8.38315 5.57198C8.23936 5.14167 7.83654 4.85156 7.38281 4.85156H3.16406C1.4194 4.85156 0 6.26421 0 8.00065C0 13.8279 2.64966 19.8086 7.26961 24.4093C11.8845 29.0049 17.877 31.6406 23.7103 31.6406ZM3.16406 6.96094H6.62323L8.3283 12.0639L6.50531 14.7984C6.31266 15.0874 6.27462 15.4526 6.40364 15.7751C7.10501 17.5285 8.50859 19.5005 10.3558 21.328C12.1908 23.1434 14.1725 24.5317 15.9358 25.237C16.2582 25.3659 16.6236 25.3279 16.9125 25.1353L19.6471 23.3123L24.75 25.0174V28.4766C24.75 29.068 24.2933 29.5312 23.7103 29.5312C12.607 29.5312 2.10938 19.0678 2.10938 8.00065C2.10938 7.41762 2.57266 6.96094 3.16406 6.96094Z M19.7058 18.9041C20.0998 19.0673 20.5535 18.9771 20.8552 18.6755L24.765 14.7656H28.5469C32.6565 14.7656 36 11.4537 36 7.38281C36 3.31193 32.6565 0 28.5469 0H20.1094C16.0385 0 12.7266 3.31193 12.7266 7.38281C12.7266 11.0957 15.4816 14.1772 19.0547 14.6905V17.9297C19.0547 18.3563 19.3117 18.7408 19.7058 18.9041ZM14.8359 7.38281C14.8359 4.47504 17.2016 2.10938 20.1094 2.10938H28.5469C31.4934 2.10938 33.8906 4.47504 33.8906 7.38281C33.8906 10.2906 31.4934 12.6562 28.5469 12.6562H24.3281C24.0484 12.6562 23.7801 12.7673 23.5824 12.9651L21.1641 15.3835V13.7109C21.1641 13.1285 20.6918 12.6562 20.1094 12.6562C17.2016 12.6562 14.8359 10.2906 14.8359 7.38281Z'/%3E%3C/svg%3E" );
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	/*
	 * Both controls centre on the bar themselves. Left to the grid, each was
	 * centred as a BOX — and the nav's box is taller than its toggle, because
	 * it also holds the closed overlay — so the toggle sat 12px low.
	 */
	.kata-header__primary {
		display: flex;
		align-items: center;
		margin-inline-end: 0;
	}

	.kata-header__bar .kata-header__phone,
	.kata-header__bar .kata-header__phone .wp-block-button {
		display: flex;
		align-items: center;
	}

	.kata-header__actions {
		margin-inline-start: 30px;
	}

	/*
	 * The drawn toggle is three staggered bars — 29.42 x 18.08, each a
	 * different length — not the block's default even glyph.
	 */
	.kata-header__primary .wp-block-navigation__responsive-container-open {
		inline-size: 29.4167px;
		block-size: 18.0833px;
		padding: 0;
		background-color: currentColor;
		color: var( --wp--preset--color--white );
		-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29.4167 18.0833'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 9.04167C0 8.55843 0.391755 8.16667 0.875 8.16667H28.5412C29.0244 8.16667 29.4162 8.55843 29.4162 9.04167C29.4162 9.5249 29.0244 9.91667 28.5412 9.91667H0.875C0.391755 9.91667 0 9.5249 0 9.04167ZM3.83025 17.2083C3.83025 16.7251 4.222 16.3333 4.70525 16.3333H28.5417C29.0249 16.3333 29.4167 16.7251 29.4167 17.2083C29.4167 17.6916 29.0249 18.0833 28.5417 18.0833H4.70525C4.222 18.0833 3.83025 17.6916 3.83025 17.2083ZM10.4672 0.875C10.4672 0.391755 10.859 0 11.3422 0H28.5417C29.0249 0 29.4167 0.391755 29.4167 0.875C29.4167 1.35825 29.0249 1.75 28.5417 1.75H11.3422C10.859 1.75 10.4672 1.35825 10.4672 0.875Z'/%3E%3C/svg%3E" );
		mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29.4167 18.0833'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 9.04167C0 8.55843 0.391755 8.16667 0.875 8.16667H28.5412C29.0244 8.16667 29.4162 8.55843 29.4162 9.04167C29.4162 9.5249 29.0244 9.91667 28.5412 9.91667H0.875C0.391755 9.91667 0 9.5249 0 9.04167ZM3.83025 17.2083C3.83025 16.7251 4.222 16.3333 4.70525 16.3333H28.5417C29.0249 16.3333 29.4167 16.7251 29.4167 17.2083C29.4167 17.6916 29.0249 18.0833 28.5417 18.0833H4.70525C4.222 18.0833 3.83025 17.6916 3.83025 17.2083ZM10.4672 0.875C10.4672 0.391755 10.859 0 11.3422 0H28.5417C29.0249 0 29.4167 0.391755 29.4167 0.875C29.4167 1.35825 29.0249 1.75 28.5417 1.75H11.3422C10.859 1.75 10.4672 1.35825 10.4672 0.875Z'/%3E%3C/svg%3E" );
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	.kata-header__primary .wp-block-navigation__responsive-container-open svg {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * The bar follows the reader down the page — the black row above it does not
 *
 * ON THE WRAPPER, NOT ON `.kata-header`.
 *
 * A sticky box travels inside its own containing block, and `.kata-header`
 * sits inside the template part's `<header>`, which is exactly 103px tall —
 * the header's own height. There is nowhere to travel, so it scrolled away
 * with its parent and looked like sticky simply not working. One level up the
 * containing block is the page, which is what it has to be measured against.
 *
 * TOP IS NEGATIVE, and that is what leaves the utility row behind. The whole
 * header sticks, offset upward by exactly the height of the row that is not
 * meant to stay — so it scrolls off, the main bar meets the top of the screen,
 * and stops there.
 *
 * Wide layout only, and it moves with the layout — 1280, not 782.
 *
 * Below the switch the utility row is already collapsed into the drawer, so
 * there is nothing to leave behind. More than that, the drawer at those
 * widths is `position: fixed; inset: 0; z-index: 90` while this rule gives
 * the header 100, so a sticky header over an open drawer would paint its own
 * stuck ground across the top of the menu. Leaving sticky at 782 while the
 * bar itself became the mobile one would have introduced exactly that. The
 * two belong to the same state and move together.
 * ---------------------------------------------------------------------- */

@media ( min-width: 1280px ) {
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		inset-block-start: calc( -1 * var( --kata-header-utility ) );
		/*
		 * Above the page, below the intro film — the film covers everything
		 * including this, and the submenu panel opens from inside the header so
		 * it rides along with it.
		 */
		z-index: 100;
	}

	/*
	 * NO GROUND UNTIL IT IS ACTUALLY STUCK.
	 *
	 * At rest the bar sits on whatever the page opens with, and that differs:
	 * black on the homepage, 35,39,40 on About, 41,46,49 on a category page.
	 * Any colour painted here would be a visible band on two of the three. So
	 * it stays transparent where it is drawn, and takes a ground only once it
	 * has left the page behind — where it has to be opaque, because content is
	 * passing underneath it.
	 *
	 * `surface`, the site's grey, rather than a new value: it is already the
	 * ground under About, the category pages and most sections, so a bar
	 * wearing it reads as the same material the page is made of. There is no
	 * stuck state in Figma to take a colour from, and inventing a hex for one
	 * would put a shade on the site that exists nowhere else in it.
	 */
	.kata-header__bar {
		transition: background-color 200ms var( --kata-ease-out, ease-out );
	}

	.is-header-stuck .kata-header__bar {
		background-color: var( --wp--preset--color--surface );
	}
}