/* Nar Psikoteknik — component styles.
   Tokens (colours, fonts, sizes, spacing) come from theme.json; this file
   only adds what blocks cannot express. Flat and plain by default; glass
   is a small extra on four small floating surfaces (header capsule, menu
   sheet, address box, carousel controls). */

:root {
	--nar-surface: var(--wp--preset--color--surface);
	--nar-ink: var(--wp--preset--color--ink);
	--nar-ink-2: var(--wp--preset--color--ink-2);
	--nar-ink-3: var(--wp--preset--color--ink-3);
	--nar-rule: var(--wp--preset--color--rule);
	--nar-rule-strong: var(--wp--preset--color--rule-strong);
	--nar-red: var(--wp--preset--color--nar);
	--nar-display: var(--wp--preset--font-family--barlow-semi-condensed);
	--nar-radius: var(--wp--custom--radius, 22px);
	--nar-ease: cubic-bezier(.2, .7, .2, 1);
	--nar-slide-duration: 6s;

	/* Liquid glass, used only on small floating surfaces. */
	--nar-glass-fill: rgba(251, 249, 245, .64);
	--nar-glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, 0));
	--nar-glass-blur: 18px;
	--nar-glass-sat: 1.8;
	--nar-glass-rim: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .3) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .6));
	--nar-glass-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .8),
		inset 0 -1px 0 rgba(255, 255, 255, .25),
		0 0 0 1px rgba(27, 23, 20, .07),
		0 14px 36px -12px rgba(27, 23, 20, .30),
		0 2px 8px rgba(27, 23, 20, .07);

	/* Lucide icons (ISC), drawn with CSS masks so the blocks stay plain. */
	--nar-i-phone: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z%22/%3E%3C/svg%3E");
	--nar-i-mail: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2220%22 height=%2216%22 x=%222%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%22/%3E%3C/svg%3E");
	--nar-i-pin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E");
	--nar-i-home: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8%22/%3E%3Cpath d=%22M3 10a2 2 0 0 1 .71-1.53l7-6a2 2 0 0 1 2.58 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z%22/%3E%3C/svg%3E");
}

html { scroll-padding-top: calc(var(--wp--custom--header-height, 64px) + 2rem); }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:where(a):focus-visible,
:where(button, summary):focus-visible {
	outline: 2px solid var(--nar-red);
	outline-offset: 3px;
	border-radius: 2px;
}

.nar-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The page shell has no gaps between header, main and footer. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks { overflow-x: clip; }

/* ---------- liquid glass ---------- */

/* The header paints its glass on ::before: backdrop-filter on the capsule
   itself would trap the fixed-position menu sheet inside it. */
.site-header__inner::before,
:root .site-nav.site-nav .wp-block-navigation__responsive-container.is-menu-open,
.nar-addressbox,
.nar-carousel__controls {
	background: var(--nar-glass-sheen), var(--nar-glass-fill);
	-webkit-backdrop-filter: blur(var(--nar-glass-blur)) saturate(var(--nar-glass-sat));
	backdrop-filter: blur(var(--nar-glass-blur)) saturate(var(--nar-glass-sat));
	box-shadow: var(--nar-glass-shadow);
}

.site-header__inner {
	position: relative;
	z-index: 0;
}
.site-header__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
}

/* Specular rim: a 1px gradient border drawn with a mask, no extra layers. */
.site-header__inner::after,
.nar-addressbox::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: var(--nar-glass-rim);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header__inner::before,
	:root .site-nav.site-nav .wp-block-navigation__responsive-container.is-menu-open,
	.nar-addressbox,
	.nar-carousel__controls { background: rgba(251, 249, 245, .97); }
}

@media (prefers-reduced-transparency: reduce) {
	.site-header__inner::before,
	:root .site-nav.site-nav .wp-block-navigation__responsive-container.is-menu-open,
	.nar-addressbox,
	.nar-carousel__controls {
		background: var(--nar-surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* ---------- icons ---------- */

.nar-ico-phone { --nar-icon: var(--nar-i-phone); }
.nar-ico-mail { --nar-icon: var(--nar-i-mail); }
.nar-ico-pin { --nar-icon: var(--nar-i-pin); }
.nar-ico-home { --nar-icon: var(--nar-i-home); }

/* ---------- shared type ---------- */

.nar-label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--nar-ink-3);
}

.nar-lead {
	color: var(--nar-ink-2);
	font-size: clamp(1.1875rem, 1rem + .6vw, 1.4375rem);
	line-height: 1.6;
}

/* ---------- header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-top: .75rem;
	/* The strip around the capsule stays click-through. */
	pointer-events: none;
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* Below 600px the admin bar scrolls away with the page. */
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}

.site-header__inner {
	min-height: var(--wp--custom--header-height, 64px);
	gap: 1.25rem;
	padding: .5rem .5rem .5rem 1.25rem;
	border-radius: 999px;
	pointer-events: auto;
}
.site-header__inner > .brand { margin-right: auto; }

.brand { gap: .75rem; flex-shrink: 0; }
.brand .brand__mark { margin: 0; flex-shrink: 0; }
.brand .brand__mark img { width: 34px; height: auto; aspect-ratio: 830 / 972; display: block; }
.brand__text { gap: .3rem; }
.brand__text > * { margin: 0; }
.brand .wp-block-site-title { white-space: nowrap; }
.brand__sub {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1;
	color: var(--nar-ink-3);
	white-space: nowrap;
}

/* hamburger */
.site-nav .wp-block-navigation__responsive-container-open {
	width: 48px;
	height: 48px;
	justify-content: center;
	align-items: center;
	border-radius: 999px;
	color: var(--nar-ink);
	background: rgba(255, 255, 255, .55);
	box-shadow: inset 0 0 0 1px rgba(27, 23, 20, .08);
	transition: background-color .2s var(--nar-ease), color .2s var(--nar-ease);
}
.site-nav .wp-block-navigation__responsive-container-open:hover {
	background: var(--nar-ink);
	color: var(--nar-surface);
}

/* Menu: a sheet that slides in from the right (the sketch's "<"), not a
   full-screen overlay. Doubled class beats core's white overlay. */
:root .site-nav.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	left: auto;
	box-sizing: border-box;
	width: min(26rem, 100%);
	padding: 1.25rem clamp(1.5rem, 4vw, 2.5rem) 2rem;
	border-radius: var(--nar-radius) 0 0 var(--nar-radius);
	box-shadow: var(--nar-glass-shadow), 0 0 0 100vmax rgba(27, 23, 20, .18);
}
@media (prefers-reduced-motion: no-preference) {
	:root .site-nav.site-nav .wp-block-navigation__responsive-container.is-menu-open {
		animation: nar-sheet-in .45s var(--nar-ease) both;
	}
	@keyframes nar-sheet-in {
		from { transform: translateX(24px); opacity: 0; }
		to { transform: none; opacity: 1; }
	}
}
:root .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
:root .site-nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
}
:root .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
}
:root .site-nav .is-menu-open .wp-block-navigation__container { gap: 0; }
:root .site-nav .is-menu-open .wp-block-navigation-item { border-bottom: 1px solid rgba(27, 23, 20, .1); }
:root .site-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding-block: .9rem;
	font-family: var(--nar-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.15;
	color: var(--nar-ink);
}
:root .site-nav .is-menu-open .wp-block-navigation-item__content::after {
	content: "→";
	font-family: var(--wp--preset--font-family--barlow);
	font-size: 1.125rem;
	color: var(--nar-ink-3);
	transition: transform .2s var(--nar-ease), color .2s var(--nar-ease);
}
:root .site-nav .is-menu-open .wp-block-navigation-item__content:hover { color: var(--nar-red); }
:root .site-nav .is-menu-open .wp-block-navigation-item__content:hover::after {
	color: var(--nar-red);
	transform: translateX(3px);
}
.site-nav .wp-block-navigation__responsive-container-close {
	top: 1.5rem;
	right: clamp(1.5rem, 4vw, 2.5rem);
}

/* ---------- page shell: footer always at the bottom ---------- */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks > main { flex: 1 0 auto; }

/* Home: header, carousel and footer strip share one screen. */
.page-template-page-landing .wp-site-blocks > main,
.page-template-page-landing .wp-site-blocks > main > .wp-block-post-content {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.page-template-page-landing .wp-site-blocks > main > .wp-block-post-content > .nar-carousel { flex: 1 0 auto; }

/* ---------- carousel ---------- */

.nar-carousel {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
}
:root .nar-carousel > * { margin-block: 0; }

.nar-slide.wp-block-cover {
	min-height: clamp(20rem, 60svh, 40rem);
	padding: clamp(3rem, 8vw, 6rem) clamp(4rem, 9vw, 8rem);
}
/* Text-only slides centre their slogan; with an illustration it sits in
   the empty upper half the images leave for it (docs/GORSEL-BRIEF.md). */
.nar-slide:has(> .wp-block-cover__image-background) {
	align-items: flex-start;
	padding-top: clamp(1.75rem, 7svh, 4.5rem);
}
.nar-slide .wp-block-cover__inner-container {
	width: 100%;
	text-align: center;
	color: var(--nar-ink);
}
:root .nar-slide .wp-block-cover__inner-container > * { margin-block: 0; }

:root .nar-slide .nar-slide__title {
	font-family: var(--nar-display);
	font-weight: 600;
	font-size: clamp(2.5rem, 1.25rem + 7.5vw, 8.5rem);
	line-height: .9;
	letter-spacing: -.02em;
	color: var(--nar-ink);
	text-wrap: balance;
}
/* Smaller over an illustration so the slogan stays in the empty sky. */
:root .nar-slide:has(> .wp-block-cover__image-background) .nar-slide__title {
	font-size: clamp(2.5rem, 1rem + 5vw, 6.5rem);
}
.nar-slide__title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 4px;
	margin: clamp(1rem, 2vw, 1.75rem) auto 0;
	border-radius: 2px;
	background: var(--nar-red);
}
:root .nar-slide .nar-slide__text {
	margin-top: clamp(.875rem, 1.6vw, 1.25rem);
	font-size: clamp(1.25rem, .95rem + 1.3vw, 2.125rem);
	font-weight: 500;
	line-height: 1.25;
	color: var(--nar-ink-2);
	text-wrap: balance;
}
/* Slides over a dark illustration (nar-slide--dark): light slogan. */
:root .nar-slide--dark .nar-slide__title,
:root .nar-slide--dark .nar-slide__text { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
:root .nar-slide--dark .nar-slide__title { color: var(--nar-surface); }
:root .nar-slide--dark .nar-slide__text { color: rgba(251, 249, 245, .86); }
/* "Güvenli sürüş" illustration: phones show the traffic (focal point in
   the block, 60%), the pomegranate would sit under the slogan there. From
   600px up, portrait screens crop the sides, so slide the frame right to
   keep the pomegranate at the end of the road in view. Wider-than-16:9
   screens show the full width either way. */
@media (min-width: 600px) {
	.nar-slide--guvenli-surus > .wp-block-cover__image-background { object-position: 76% 20% !important; }
}

/* With JavaScript (html.js is set in <head>, before first paint) the
   slides share one grid cell from the start, so the page never shows
   three stacked slides and then collapses. Without JS they stack. */
.js .nar-carousel {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	min-height: clamp(22rem, 55svh, 40rem);
	/* Keep pinch-zoom; horizontal swipes go to the script. */
	touch-action: pan-y pinch-zoom;
}
.js .nar-carousel > .nar-slide {
	grid-area: 1 / 1;
	min-height: 0;
}
.js .nar-carousel:not(.is-ready) > .nar-slide ~ .nar-slide,
.nar-carousel.is-ready > .nar-slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s var(--nar-ease), visibility 0s linear .7s;
}
.nar-carousel.is-ready > .nar-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .7s var(--nar-ease);
}
@media (prefers-reduced-motion: no-preference) {
	.nar-carousel.is-started > .nar-slide.is-active .wp-block-cover__inner-container > * {
		animation: nar-rise .8s var(--nar-ease) both;
	}
	.nar-carousel.is-started > .nar-slide.is-active .wp-block-cover__inner-container > :nth-child(2) { animation-delay: .12s; }

	@keyframes nar-rise {
		from { opacity: 0; transform: translateY(14px); }
		to { opacity: 1; transform: none; }
	}
}
@media (prefers-reduced-motion: reduce) {
	.nar-carousel.is-ready > .nar-slide,
	.nar-carousel.is-ready > .nar-slide.is-active { transition: none; }
}

/* Edge arrows, after the reference: a dark half-diamond on each side with
   a thin chevron. The button itself stays rectangular so its focus ring
   is not clipped. */
.nar-carousel__arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	width: clamp(2.25rem, 3.6vw, 3.75rem);
	height: clamp(4.5rem, 7.2vw, 7.5rem);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nar-surface);
	cursor: pointer;
	transform: translateY(-50%);
}
.nar-carousel__arrow--prev { left: 0; }
.nar-carousel__arrow--next { right: 0; }
.nar-carousel__arrow::before,
.nar-carousel__arrow::after {
	content: "";
	position: absolute;
}
.nar-carousel__arrow::before {
	inset: 0;
	background: var(--nar-ink);
	transition: background-color .2s var(--nar-ease);
}
.nar-carousel__arrow--prev::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.nar-carousel__arrow--next::before { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.nar-carousel__arrow::after {
	top: 50%;
	width: 26%;
	aspect-ratio: 1;
	border: solid currentColor;
	border-width: 0 0 1.5px 1.5px;
}
.nar-carousel__arrow--prev::after { left: 18%; transform: translateY(-50%) rotate(45deg); }
.nar-carousel__arrow--next::after { right: 18%; transform: translateY(-50%) rotate(-135deg); }
.nar-carousel__arrow:hover::before,
.nar-carousel__arrow:focus-visible::before { background: var(--nar-red); }
.nar-carousel__arrow:focus-visible { outline-offset: -2px; }
/* Light arrows while a dark slide is showing (set by nar.js). */
.nar-carousel.is-dark-slide .nar-carousel__arrow { color: var(--nar-ink); }
.nar-carousel.is-dark-slide .nar-carousel__arrow::before { background: var(--nar-surface); }
.nar-carousel.is-dark-slide .nar-carousel__arrow:hover,
.nar-carousel.is-dark-slide .nar-carousel__arrow:focus-visible { color: var(--nar-surface); }
.nar-carousel.is-dark-slide .nar-carousel__arrow:hover::before,
.nar-carousel.is-dark-slide .nar-carousel__arrow:focus-visible::before { background: var(--nar-red); }

/* Slide bars + pause button on a small glass pill, bottom centre, so they
   stay legible over the illustrations. */
.nar-carousel__controls {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: clamp(.75rem, 2.5vw, 1.5rem);
	display: flex;
	align-items: center;
	gap: .125rem;
	padding: .25rem .375rem .25rem .5rem;
	border-radius: 999px;
	transform: translateX(-50%);
}
.nar-carousel__dot,
.nar-carousel__toggle {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nar-ink);
	cursor: pointer;
}
.nar-carousel__dot {
	position: relative;
	width: 2.75rem;
	height: 1.75rem;
}
.nar-carousel__dot::before,
.nar-carousel__dot::after {
	content: "";
	position: absolute;
	left: .25rem;
	right: .25rem;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 2px;
}
/* Track at 3:1 against the pill (WCAG 1.4.11); the fill is ink. */
.nar-carousel__dot::before { background: var(--nar-ink-3); opacity: .55; }
.nar-carousel__dot::after {
	background: var(--nar-ink);
	transform: scaleX(0);
	transform-origin: left;
}
.nar-carousel__dot[aria-current="true"]::after { transform: none; }
@media (prefers-reduced-motion: no-preference) {
	.nar-carousel.is-playing .nar-carousel__dot[aria-current="true"]::after {
		animation: nar-progress var(--nar-slide-duration) linear both;
	}
	.nar-carousel.is-paused .nar-carousel__dot[aria-current="true"]::after { animation-play-state: paused; }
	@keyframes nar-progress {
		from { transform: scaleX(0); }
		to { transform: none; }
	}
}
.nar-carousel__dot:hover::before { opacity: 1; }

.nar-carousel__toggle {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-left: .125rem;
	border-radius: 999px;
}
.nar-carousel__toggle::before {
	content: "";
	width: 8px;
	height: 10px;
	/* pause: two bars */
	background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px);
}
.nar-carousel__toggle[aria-pressed="true"]::before {
	/* play: triangle */
	width: 9px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.nar-carousel__toggle:hover { background: rgba(27, 23, 20, .08); }

/* ---------- inner pages & blog ---------- */

.nar-page { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70); }
.nar-page__title { margin-bottom: var(--wp--preset--spacing--50); text-wrap: balance; }
.nar-page__image { margin-bottom: var(--wp--preset--spacing--50); }
.nar-page__image img { border-radius: var(--nar-radius); }
/* Long information text (Nedir page): section headings a step below the
   page title, with room above each section. */
.nar-bilgilendirme { margin-top: var(--wp--preset--spacing--60); }
:root .nar-bilgilendirme h2 {
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
	text-wrap: balance;
}
:root .nar-bilgilendirme > h2:first-child { margin-top: 0; }
.nar-bilgilendirme p,
.nar-bilgilendirme li { color: var(--nar-ink-2); }
.nar-bilgilendirme li + li { margin-top: .4em; }
.nar-bilgilendirme strong { color: var(--nar-ink); }
.nar-lead a { text-underline-offset: 3px; }

.nar-posts .wp-block-post-template { border-top: 1px solid var(--nar-ink); }
.nar-post {
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--nar-rule);
}
:root .nar-post > * { margin-block: 0; }
:root .nar-post > * + * { margin-top: .5rem; }
.nar-post__title { font-size: var(--wp--preset--font-size--x-large); }
.nar-post .wp-block-post-excerpt__excerpt { color: var(--nar-ink-2); margin: 0; }

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

.site-footer {
	border-top: 1px solid var(--nar-rule);
	padding-block: clamp(1rem, 2.2vw, 1.5rem) 1rem;
	color: var(--nar-ink-2);
}
:root .site-footer__inner > * { margin-block: 0; }

.site-footer__strip {
	align-items: center;
	gap: .75rem 2rem;
}
:root .site-footer__strip > * { margin: 0; }

.site-footer__phone a {
	font-family: var(--nar-display);
	font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	color: var(--nar-ink-2);
	text-decoration: none;
	transition: color .2s var(--nar-ease);
}
.site-footer__phone a:hover { color: var(--nar-red); }

.nar-iconlinks { gap: .375rem; }
:root .nar-iconlinks > .nar-iconlink { margin: 0; }
.nar-iconlink a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	color: var(--nar-ink);
	transition: background-color .2s var(--nar-ease), color .2s var(--nar-ease);
}
.nar-iconlink a::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--nar-icon) center / contain no-repeat;
	mask: var(--nar-icon) center / contain no-repeat;
}
.nar-iconlink a:hover {
	background: var(--nar-ink);
	color: var(--nar-surface);
}

:root .site-footer__legal {
	margin-top: .75rem;
	font-size: .8125rem;
	color: var(--nar-ink-3);
}

/* ---------- address box ---------- */

.nar-addressbox {
	display: none;
	position: fixed;
	z-index: 60;
	left: 50%;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	width: min(30rem, calc(100% - 2rem));
	padding: 1.5rem 1.5rem 1.25rem;
	border-radius: var(--nar-radius);
	transform: translateX(-50%);
}
.nar-addressbox:target:not([data-js]),
.nar-addressbox.is-open { display: block; }
@media (prefers-reduced-motion: no-preference) {
	.nar-addressbox:target:not([data-js]),
	.nar-addressbox.is-open { animation: nar-box-in .35s var(--nar-ease) both; }
	@keyframes nar-box-in {
		from { opacity: 0; transform: translate(-50%, 12px); }
		to { opacity: 1; transform: translateX(-50%); }
	}
}
:root .nar-addressbox > * { margin-block: 0; }
.nar-addressbox:focus { outline: none; }
.nar-addressbox:focus-visible { outline: 2px solid var(--nar-red); outline-offset: 3px; }

:root .nar-addressbox__title {
	font-size: var(--wp--preset--font-size--x-small);
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--nar-ink-3);
}
:root .nar-addressbox__text {
	margin-top: .5rem;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.5;
	text-wrap: pretty;
	color: var(--nar-ink);
}
:root .nar-addressbox__close {
	margin-top: 1rem;
	text-align: right;
}
.nar-addressbox__close a {
	display: inline-block;
	padding: .5rem 1rem;
	border: 1px solid var(--nar-rule-strong);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--nar-ink);
	text-decoration: none;
}
.nar-addressbox__close a:hover { border-color: var(--nar-ink); }

/* In the editor the box is shown in place so it can be edited. */
.block-editor-block-list__layout .nar-addressbox {
	display: block;
	position: relative;
	left: auto;
	bottom: auto;
	transform: none;
	margin-top: 1rem;
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
	.site-header { padding-top: .5rem; }
	.site-header__inner { min-height: 56px; padding-left: 1rem; }
	.site-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; }
	.brand__sub { font-size: .625rem; letter-spacing: .12em; }

	.nar-slide.wp-block-cover { padding-inline: 2.75rem; }
}

/* The sheet is full width here, so it loses its rounded edge. */
@media (max-width: 26rem) {
	:root .site-nav.site-nav .wp-block-navigation__responsive-container.is-menu-open { border-radius: 0; }
}

@media (max-width: 420px) {
	.site-footer__strip { justify-content: center; }
	.site-footer__legal { text-align: center; }
}