/* ==========================================================================
   Block-markup bridge
   --------------------------------------------------------------------------
   style.css was written for hand-authored HTML. WordPress wraps the same
   content in block markup, so a handful of selectors need re-pointing:

     <a class="btn">          -> <div class="wp-block-button btn"><a class="wp-block-button__link">
     <ul class="menu-list">   -> <figure class="wp-block-table menu-list"><table>
     <dl>                     -> <figure class="wp-block-table shop-dl"><table>
     <ol class="facts"><li>   -> <div class="facts"><div class="facts__item">
     <h2><small>             -> <h2> + <p class="menu-sub">
     style="…"                -> .u-* utility classes

   Everything else keeps its original class name and needs no bridging.
   ========================================================================== */

/* ---------- Layout: let our own containers do the work ---------- */

.wp-block-group.alignfull {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* WordPress adds its own constraint; .wrap already handles it. */
.wp-block-group.wrap,
.wp-block-group.wrap--narrow {
	max-width: none;
}

/* Block groups must not introduce spacing of their own. */
.wp-block-group.card,
.wp-block-group.card__body,
.wp-block-group.card__media,
.wp-block-group.shop,
.wp-block-group.shop__body,
.wp-block-group.shop__media,
.wp-block-group.hero__art,
.wp-block-group.broeder__art {
	margin-block: 0;
}

/* The card media wrapper is a group now, not a plain div. */
.wp-block-group.card__media .wp-block-image,
.wp-block-group.card__media figure {
	margin: 0;
	width: 100%;
	height: 100%;
}

.wp-block-group.card__media .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-group.shop__media .wp-block-image,
.wp-block-group.shop__media figure {
	margin: 0;
}

/* Images: the block wraps every <img> in a <figure>. */
.wp-block-image.framed {
	margin: 0;
}

.wp-block-image.framed img {
	border: 8px solid var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	width: 100%;
}

.wp-block-image.shot-main,
.wp-block-image.shot-inset,
.wp-block-image.photo,
.wp-block-image.friar,
.wp-block-image.broeder__wordmark {
	margin: 0;
}

.dark .wp-block-image.photo img {
	border-radius: var(--radius);
	border: 8px solid var(--paper);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
	width: 100%;
}

.wp-block-image.map figcaption,
.wp-block-image figcaption.wp-element-caption {
	font-size: .82rem;
	color: var(--ink-faint);
	margin-top: .6rem;
	line-height: 1.5;
}

/* ---------- Buttons ---------- */

.wp-block-buttons.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: var(--s3);
}

/* overrides.css loads after style.css, so .wp-block-buttons.btn-row above ties
   on specificity with style.css's `.hero .btn-row { margin-top: var(--s4) }`
   and wins on order — shrinking the hero's button gap. Restate the hero case. */
.hero .wp-block-buttons.btn-row {
	margin-top: var(--s4);
}

/* The button block puts our class on the WRAPPER as well as the link, so
   style.css's own .btn rule paints the wrapper too — a pill inside a pill,
   with double padding. Strip the wrapper back to a bare box. */
.wp-block-button.btn,
.wp-block-button.btn--ghost,
.wp-block-button.btn--crust,
.wp-block-button.btn--broeder,
.wp-block-button.btn--light {
	display: inline-block;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
	transition: none;
	font-size: inherit;
}

.wp-block-button.btn:hover {
	transform: none;
	box-shadow: none;
}

.wp-block-button.btn > .wp-block-button__link {
	--btn-bg: var(--ink);
	--btn-fg: var(--paper);
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .85rem 1.5rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-size: .93rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	border: 1px solid var(--btn-bg);
	border-radius: 100px;
	transition: transform .18s ease, box-shadow .18s ease,
	            background-color .18s ease, color .18s ease;
}

.wp-block-button.btn > .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.wp-block-button.btn > .wp-block-button__link:active {
	transform: translateY(0);
}

.wp-block-button.btn--ghost > .wp-block-button__link {
	--btn-bg: transparent;
	--btn-fg: var(--ink);
	border-color: var(--ink);
}

.wp-block-button.btn--ghost > .wp-block-button__link:hover {
	background: var(--ink);
	color: var(--paper);
}

/* The map pin in "Vind een winkel" is stripped with every other inline SVG.
   It returns as a mask rather than a background-image so it still flips to
   --paper on hover, the way stroke="currentColor" did. Scoped to the hero:
   the other .btn--ghost buttons never carried an icon. */
.hero .wp-block-button.btn--ghost > .wp-block-button__link::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10.5c0 5.4-8 12-8 12s-8-6.6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10.3' r='2.9'/%3E%3C/svg%3E");
	        mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10.5c0 5.4-8 12-8 12s-8-6.6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10.3' r='2.9'/%3E%3C/svg%3E");
}

.wp-block-button.btn--crust > .wp-block-button__link {
	--btn-bg: var(--crust);
	--btn-fg: #fff;
}

.wp-block-button.btn--broeder > .wp-block-button__link {
	--btn-bg: var(--broeder);
	--btn-fg: #fff;
}

.wp-block-button.btn--broeder > .wp-block-button__link:hover {
	--btn-bg: #97201a;
}

.wp-block-button.btn--light > .wp-block-button__link {
	--btn-bg: transparent;
	--btn-fg: var(--paper);
	border-color: rgba(248, 242, 230, .45);
}

.wp-block-button.btn--light > .wp-block-button__link:hover {
	background: var(--paper);
	color: var(--espresso);
}

/* ---------- Hero (comp layout) ----------
   The image block wraps every <img> in a <figure>, which breaks the
   height:100% chain the full-bleed photo depends on. */
.wp-block-group.hero__photo,
.wp-block-group.hero__copy,
.wp-block-group.hero__promo {
	margin-block: 0;
}

/* .promo is the exception: its negative bottom margin from style.css is what
   tucks the Brabantse Broeder card down over the stat bar. WordPress's
   :where(.is-layout-flow) > :last-child zeroes it, so restate it here. */
.wp-block-group.promo {
	margin-block: 0 clamp(-3rem, -1rem - 1.6vw, -1rem);
}

.wp-block-group.hero__photo .wp-block-image,
.wp-block-group.hero__photo figure {
	margin: 0;
	width: 100%;
	height: 100%;
}

.wp-block-group.hero__photo .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 45% 50%;
}

.wp-block-group.promo .wp-block-image,
.wp-block-group.promo figure {
	margin: 0;
}

.wp-block-group.promo > .wp-block-group {
	min-width: 0;
}

/* ---------- Stat bar ----------
   <li><svg/><b>2</b><span>winkels<br>in de regio</span></li> comes back from
   the list block as <li><b>2</b> winkels<br>in de regio</li> — the SVG and the
   <span> are stripped. Flex still yields [icon][number][label]; the icon
   returns as a ::before, the same trick the header phone pill uses. */
.wp-block-list.hero__stats {
	list-style: none;
}

/* The margin-top style.css puts on the list loses to WordPress's
   :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }.
   Hang the gap on the .wrap group that holds the list instead, which also
   replaces the 24px block gap WordPress would otherwise inject there. */
.hero .wp-block-group.wrap:has(> .hero__stats) {
	margin-block-start: clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
}

.wp-block-list.hero__stats {
	margin-block-start: 0;
}

.wp-block-list.hero__stats li {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-size: .82rem;
	line-height: 1.32;
	color: var(--ink-faint);
}

.wp-block-list.hero__stats li::before {
	content: "";
	width: 28px;
	height: 28px;
	flex: none;
	background: no-repeat center/contain;
}

.wp-block-list.hero__stats li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1802a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 9.6 5 4h14l1.6 5.6a3 3 0 0 1-5.8 1.5 3 3 0 0 1-5.6 0 3 3 0 0 1-5.8-1.5Z'/%3E%3Cpath d='M5 11.6V20h14v-8.4'/%3E%3Cpath d='M9.7 20v-4.8h4.6V20'/%3E%3C/svg%3E"); }
.wp-block-list.hero__stats li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1802a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.2c0-3.3 3.6-6 8-6s8 2.7 8 6V16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1Z'/%3E%3Cpath d='M8.6 8.4 7.2 12.4M12 7.6v4.8M15.4 8.4l1.4 4'/%3E%3C/svg%3E"); }
.wp-block-list.hero__stats li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1802a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.3 14.8A8.6 8.6 0 0 1 9.2 3.7a8.6 8.6 0 1 0 11.1 11.1Z'/%3E%3Cpath d='M17 3.2l.6 1.7 1.7.6-1.7.6-.6 1.7-.6-1.7-1.7-.6 1.7-.6Z'/%3E%3C/svg%3E"); }

/* b.is-word loses its class in conversion; it is always the third item. */
.wp-block-list.hero__stats li:nth-child(3) b {
	font-size: clamp(1rem, .92rem + .35vw, 1.15rem);
}

/* ---------- Photo tiles ----------
   .tiles survives as a raw-HTML block, but the arrow SVG inside .tile__go
   is stripped with every other inline SVG. */
.tile__go::before {
	content: "";
	width: 18px;
	height: 18px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241813' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ---------- Price list: <ul class="menu-list"> became a table ---------- */

.wp-block-table.menu-list {
	margin: 0;
}

.wp-block-table.menu-list table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
}

.wp-block-table.menu-list tr {
	border-bottom: 1px dotted var(--line);
}

.wp-block-table.menu-list tr:last-child {
	border-bottom: 0;
}

.wp-block-table.menu-list td {
	border: 0;
	padding: .6rem 0;
	vertical-align: baseline;
	word-break: normal;
}

.wp-block-table.menu-list td:first-child {
	width: 100%;
	font-weight: 500;
}

.wp-block-table.menu-list td:last-child {
	text-align: right;
	white-space: nowrap;
	padding-left: 1.5rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* The <i> sub-line became an <em>, which tables preserve. */
.wp-block-table.menu-list em {
	display: block;
	font-style: normal;
	font-size: .86rem;
	color: var(--ink-faint);
	font-weight: 400;
	line-height: 1.5;
	margin-top: .1rem;
}

/* The <small> subtitle inside a menu <h2>. */
.menu-sub {
	margin: -.85rem 0 1.25rem;
	font-family: var(--sans);
	font-size: .86rem;
	font-weight: 400;
	color: var(--ink-faint);
	letter-spacing: 0;
}

/* ---------- Shop details: <dl> became a table ---------- */

.wp-block-table.shop-dl {
	margin: 1.1rem 0 0;
}

.wp-block-table.shop-dl table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
}

.wp-block-table.shop-dl td {
	border: 0;
	padding: .35rem 0;
	vertical-align: top;
	font-size: .95rem;
}

.wp-block-table.shop-dl td:first-child {
	width: 7.5rem;
	color: var(--ink-faint);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding-top: .5rem;
}

/* ---------- Opening hours: <dl class="hours__list"> became a table -------- */

.wp-block-table.hours__list {
	margin: 0;
}

.wp-block-table.hours__list table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
}

.wp-block-table.hours__list td {
	border: 0;
	border-bottom: 1px dotted var(--line);
	padding: .5rem 0;
}

.wp-block-table.hours__list td:first-child {
	font-weight: 500;
}

.wp-block-table.hours__list td:last-child {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.wp-block-table.hours__list tr:last-child td {
	border-bottom: 0;
}

/* "gesloten" is wrapped in <em> precisely so it survives into a table cell. */
.wp-block-table.hours__list em {
	font-style: normal;
	font-weight: 400;
	color: var(--ink-faint);
}

.dark .wp-block-table.hours__list td {
	border-bottom-color: rgba(248, 242, 230, .16);
}

/* ---------- Numbered facts: <ol class="facts"> became nested groups ------- */

.wp-block-group.facts {
	display: grid;
	gap: 1.4rem;
	margin: var(--s4) 0 0;
	counter-reset: besselink-fact;
}

.wp-block-group.facts__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
	counter-increment: besselink-fact;
}

.wp-block-group.facts__item::before {
	content: counter(besselink-fact, decimal-leading-zero);
	font-family: var(--display);
	font-size: .82rem;
	font-weight: 600;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid var(--crust);
	color: var(--crust-deep);
	border-radius: 50%;
}

/* The heading and paragraph are siblings of ::before, so span the 2nd column. */
.wp-block-group.facts__item > * {
	grid-column: 2;
}

.wp-block-group.facts__item > *:first-child {
	margin-top: .25rem;
}

.wp-block-group.facts__item h3 {
	font-size: 1.08rem;
	margin-bottom: .15em;
}

.wp-block-group.facts__item p {
	font-size: .95rem;
	color: var(--ink-soft);
	margin: 0;
}

/* ---------- Text links that used to sit bare in a card ---------- */

.tlink-row {
	margin: 0;
}

.card__body .tlink-row {
	margin-top: auto;
	padding-top: 1rem;
}

.card__body .tlink-row .tlink {
	align-self: flex-start;
}

/* ---------- Tag lists ---------- */

.wp-block-list.tags {
	padding-left: 0;
}

/* ---------- Utility classes replacing inline styles ---------- */

.u-m0            { margin: 0 !important; }
.u-mt-4          { margin-top: 2rem; }
.u-mt-5          { margin-top: 2.5rem; }
.u-mt-6          { margin-top: 2.75rem; }
.u-mb-6          { margin-bottom: 2.75rem; }
.u-jc-center     { justify-content: center; }
.u-ta-left       { text-align: left; }
.u-measure-56    { max-width: 56ch; margin-inline: auto; }
.u-measure-58    { max-width: 58ch; margin-inline: auto; }
.u-measure-60    { max-width: 60ch; margin-inline: auto; }
.u-narrow-820    { max-width: 820px; margin-inline: auto; }
.u-crust         { color: var(--crust-deep); }
.u-sub           { color: var(--ink-faint); font-size: .92rem; }
.u-ar-wide       { aspect-ratio: 12 / 5; }

.u-img-wide img  { width: 100%; max-width: 900px; margin-inline: auto; }

.u-wordmark-center img {
	margin: 0 auto 1.5rem;
	max-width: 280px;
}

/* ---------- Header / footer template parts ---------- */

/* style.css lays the header out with `.site-header__inner { display: flex }`
   and pushes everything right of the logo over with `.brand { margin-right:
   auto }`. The block header has no `.brand` — the logo is a Site Logo block —
   so without this the nav sits flush against the logo. */
.wp-block-group.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--s3);
	min-height: 94px;
}

/* Direct child only. The navigation block keeps a second, hidden copy of the
   site logo inside its responsive dialog (.cloned-for-mobile) for the mobile
   overlay; a descendant selector here forces that clone visible at desktop
   and pushes the nav onto a second line. */
.wp-block-group.site-header__inner > .wp-block-site-logo {
	margin-right: auto;
	display: flex;
	align-items: center;
}

.wp-block-group.site-header__inner > .wp-block-site-logo img {
	height: 66px;
	width: auto;
	max-width: none;
	transition: opacity .2s ease;
}

.wp-block-group.site-header__inner > .wp-block-site-logo a:hover img {
	opacity: .78;
}

/* The phone CTA is a <p> wrapping a link, not a link itself, so the pill
   styling lands on the paragraph and the anchor needs neutralising. */
.wp-block-group.site-header .header-cta a {
	color: inherit;
	text-decoration: none;
}

/* …and the inline phone SVG did not survive the conversion. */
.wp-block-group.site-header .header-cta::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

.wp-block-group.site-header .wp-block-navigation {
	gap: .3rem;
}

.wp-block-group.site-header .wp-block-navigation a {
	padding: .5rem .8rem;
	border-radius: 100px;
	font-size: .92rem;
	text-decoration: none;
	color: var(--ink-soft);
}

.wp-block-group.site-header .wp-block-navigation a:hover {
	color: var(--ink);
	background: rgba(193, 128, 42, .12);
}

.wp-block-group.site-header .header-cta {
	margin: 0;
}

.wp-block-group.site-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}


/* ---------- Guard rails ---------- */

/* Extendable's root padding lands on <body> and insets every alignfull
   section. .wrap does our gutters; the body must stay flush. */
body {
	padding-left: 0;
	padding-right: 0;
}

/* WordPress inserts margin-block-start between sibling blocks. style.css
   owns all vertical rhythm — the injected gap is drift, not design. */
.wp-block-group.card__body > * + *,
.wp-block-group.shop__body > * + *,
.wp-block-group.facts__item > * + *,
.wp-block-group.hours > * + * {
	margin-block-start: 0;
}

/* ---------- Mobile navigation ----------
   The navigation block collapses to its overlay below 600px. style.css
   collapses at 940px, and dresses the toggle as a 46px outlined circle
   rather than a bare 24px glyph. Both gaps are closed here. */

/* The block's own rules are (0,2,0) and (0,3,0); prefixing with .site-header
   outranks them without !important. */
@media (min-width: 600px) and (max-width: 940px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

@media (max-width: 940px) {
	/* style.css turns .nav into an absolutely-positioned dropdown panel below
	   940px. Both the <nav> and the <ul> carry class "nav", so those rules
	   land on the block navigation and drag the toggle button out of the
	   header with them. The block has its own overlay — neutralise ours. */
	.site-header nav.wp-block-navigation.nav {
		position: static;
		inset: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: none;
		border: 0;
		padding: 0;
		box-shadow: none;
	}

	.site-header ul.wp-block-navigation__container.nav {
		position: static;
		display: flex;
		flex-direction: column;
		background: none;
		border: 0;
		padding: 0;
		box-shadow: none;
	}

	.wp-block-group.site-header__inner {
		min-height: 84px;
	}

	.wp-block-group.site-header__inner > .wp-block-site-logo img {
		height: 56px;
	}

	/* style.css hides the pill on mobile — the number reappears inside the
	   menu as .nav__phone. */
	.wp-block-group.site-header .header-cta {
		display: none;
	}

	/* Match .nav-toggle: 46px outlined circle, 20px icon. */
	.site-header .wp-block-navigation__responsive-container-open {
		width: 46px;
		height: 46px;
		align-items: center;
		justify-content: center;
		background: none;
		border: 1px solid var(--line);
		border-radius: 100px;
		color: var(--ink);
	}

	.site-header .wp-block-navigation__responsive-container-open svg {
		width: 20px;
		height: 20px;
	}

	/* The open overlay, in the site's own colours. Core paints it #fff with
	   `.wp-block-navigation:not(.has-background) .wp-block-navigation__…
	   .is-menu-open:not(.disable-default-overlay)` — five classes' worth of
	   specificity, so match its shape and add one. */
	.site-header .wp-block-navigation:not(.has-background)
	  .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background-color: var(--paper);
		color: var(--ink);
		padding: 1.5rem 1.25rem 2rem;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open a {
		font-size: 1.05rem;
		font-weight: 500;
		color: var(--ink-soft);
		padding: .85rem .4rem;
		border-bottom: 1px solid rgba(222, 208, 182, .6);
		border-radius: 0;
		width: 100%;
	}

	.site-header .wp-block-navigation__responsive-container-close {
		width: 46px;
		height: 46px;
		border: 1px solid var(--line);
		border-radius: 100px;
		color: var(--ink);
	}

	.site-header .wp-block-navigation__responsive-container-close svg {
		width: 20px;
		height: 20px;
	}
}

/* The phone item belongs to the mobile menu only. */
.site-header .wp-block-navigation-item.nav__phone {
	display: none;
}

@media (max-width: 940px) {
	.site-header .wp-block-navigation-item.nav__phone {
		display: block;
	}

	.site-header .wp-block-navigation-item.nav__phone a {
		margin-top: .9rem;
		border-bottom: 0;
		font-weight: 600;
		color: var(--crust-deep);
	}
}

/* ---------- Mobile navigation: undo the parent theme's overlay dressing ----------
   Extendable dresses the open overlay itself: a border-bottom plus .75rem of
   padding on every <li>, and 1.25rem/600 type on every link. style.css draws
   its hairline under the <a> instead, so the two stack into a double rule and
   the type sits a size too large. Re-point both onto style.css's values.

   Extendable's selectors reach (0,8,2), so the rules below repeat their shape
   with .site-header in front rather than reaching for !important. */

.has-modal-open .site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container > li.wp-block-navigation-item:not(.wp-block-navigation__submenu-container) {
	border-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.has-modal-open .site-header .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container > li:not(.wp-block-navigation__submenu-container) > a.wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: .85rem .4rem;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--ink-soft);
	border-bottom: 1px solid rgba(222, 208, 182, .6);
	border-radius: 0;
}

/* The phone number closes the list: no rule under it, and it sits apart. */
.has-modal-open .site-header .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container > li.nav__phone > a.wp-block-navigation-item__content {
	margin-top: .9rem;
	border-bottom: 0;
	font-weight: 600;
	color: var(--crust-deep);
}

/* Extendable outlines every focused element, and the overlay moves focus to
   its first link as it opens — which drew a box around "Home" on every open.
   Keep the ring for keyboard users only. */
.site-header .wp-block-navigation a:focus:not(:focus-visible) {
	outline: none;
	text-decoration: none;
}