/*
 * Site chrome: skip link, header + menu, footer (the city string), mobile call
 * bar. Ported from the mockup's assets/styles.css.
 *
 * Consumes the --rl-* tokens from design-system.css, which is enqueued first.
 * Hooks are wired to header.php, footer.php and assets/js/theme.js
 * (data-header, data-menu, data-nose, data-callbar).
 *
 * NOT LOADED IN THE EDITOR — only design-system.css and editor.css are added via
 * add_editor_style(). The chrome isn't in the canvas, so it needs nothing there.
 */

/* ------------------------------------------------------------- skip link --- */
.rl-skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 50;
	padding: 10px 16px;
	background: var(--rl-warm);
	color: var(--rl-night-deep);
	font-weight: 600;
	text-decoration: none;
}

.rl-skip:focus {
	top: 12px;
}

/* ---------------------------------------------------------------- header --- */
.rl-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 20;
	color: var(--rl-snow);
	transition: background-color 300ms ease, box-shadow 300ms ease;
}

/* Logged-in editors see the admin bar; the fixed header must sit below it
   rather than hide the wordmark under it. */
.admin-bar .rl-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.rl-header::before { /* legibility over the photo's sky */
	content: "";
	position: absolute;
	inset: 0 0 -40px;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 340px 120px at 150px 38px, rgba(14, 19, 32, 0.78), rgba(14, 19, 32, 0) 70%),
		linear-gradient(to bottom, rgba(14, 19, 32, 0.66), rgba(14, 19, 32, 0));
	transition: opacity 300ms ease;
}

/* Scrolled, or on a page with no hero to sit over (header.php adds --solid). */
.rl-header.is-stuck,
.rl-header.rl-header--solid {
	background: rgba(21, 28, 42, 0.94);
	box-shadow: 0 1px 0 rgba(185, 192, 207, 0.12);
}

.rl-header.is-stuck::before,
.rl-header.rl-header--solid::before {
	opacity: 0;
}

.rl-header__inner {
	width: min(100% - 2 * var(--rl-gutter), var(--rl-max));
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: var(--rl-header-h);
}

/* Pages that don't open with the hero must clear the fixed bar. The hero sits
   flush beneath it. Decided server-side (rudolph_starts_with_hero()). */
.rl-main--offset {
	padding-top: var(--rl-header-h);
}

/* --- the wordmark: RUD●LPH, the "o" is Rudolph's nose --- */
.rl-mark {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	line-height: 1;
	margin-right: auto;
}

.rl-mark__word {
	display: inline-flex;
	align-items: center;
	font: 500 1.625rem/1 var(--rl-display);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.rl-mark__nose {
	width: 0.92em;
	height: 0.92em;
	margin: 0 0.04em 0 0.02em;
	overflow: visible;
}

.rl-mark__halo {
	fill: var(--rl-red);
	opacity: 0.28;
	transform-origin: center;
	transform-box: fill-box;
}

.rl-mark__glass {
	fill: var(--rl-red);
}

.rl-mark__shine {
	fill: var(--rl-red-shine);
	opacity: 0.85;
}

.rl-mark__sub {
	font: 400 0.6875rem/1 var(--rl-text);
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--rl-mist);
	padding-left: 0.14em;
}

/* Until the hero's switch-on has played, the nose is dark; it lights last.
   No-JS, reduced motion, repeat visits and pages without a hero all start with
   html.rl-played (set in the <head>), so they skip straight to the lit nose. */
.rl-mark__glass,
.rl-mark__halo {
	transition: fill 300ms ease, opacity 300ms ease;
}

.js:not(.rl-played) .rl-mark__glass {
	fill: var(--rl-red-unlit);
}

.js:not(.rl-played) .rl-mark__halo {
	opacity: 0;
}

.rl-mark__nose.is-lit .rl-mark__halo {
	animation: rl-nose 900ms var(--rl-ease-out);
}

@keyframes rl-nose {
	0% {
		opacity: 0;
		transform: scale(0.4);
	}

	40% {
		opacity: 0.7;
		transform: scale(1.6);
	}

	100% {
		opacity: 0.28;
		transform: scale(1);
	}
}

/* --- nav --- */
.rl-nav ul {
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rl-nav a {
	font: 400 0.9375rem/1 var(--rl-text);
	text-decoration: none;
	padding: 10px 0;
	position: relative;
}

.rl-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms var(--rl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.rl-nav a:hover::after {
		transform: scaleX(1);
	}
}

/* --- call button --- */
.rl-header__call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 0.9375rem/1 var(--rl-text);
	text-decoration: none;
	padding: 12px 18px;
	border: 1px solid rgba(238, 241, 247, 0.4);
	border-radius: 999px;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.rl-header__call svg {
	width: 16px;
	height: 16px;
	fill: var(--rl-warm);
}

@media (hover: hover) and (pointer: fine) {
	.rl-header__call:hover {
		border-color: var(--rl-snow);
		background: rgba(238, 241, 247, 0.08);
	}
}

/* --- small-screen menu: a <details>, so it works with no JS --- */
.rl-menu {
	display: none;
	position: relative;
}

.rl-menu summary {
	list-style: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-content: center;
	gap: 6px;
	cursor: pointer;
	border-radius: 999px;
}

.rl-menu summary::-webkit-details-marker {
	display: none;
}

.rl-menu summary span {
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform 200ms var(--rl-ease-out);
}

.rl-menu[open] summary span:first-child {
	transform: translateY(3.75px) rotate(45deg);
}

.rl-menu[open] summary span:last-child {
	transform: translateY(-3.75px) rotate(-45deg);
}

.rl-menu ul {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 220px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: var(--rl-night-deep);
	border: 1px solid rgba(185, 192, 207, 0.16);
	border-radius: 12px;
	box-shadow: 0 18px 40px -16px rgba(14, 19, 32, 0.7);
}

.rl-menu a {
	display: block;
	padding: 12px 14px;
	text-decoration: none;
	border-radius: 8px;
}

.rl-menu a:hover,
.rl-menu a:focus-visible {
	background: var(--rl-dusk-raise);
}

@media (max-width: 1020px) {
	.rl-nav {
		display: none;
	}

	.rl-menu {
		display: block;
	}
}

@media (max-width: 640px) {
	/* The number hides; the button keeps its aria-label ("Call …"). */
	.rl-header__call span {
		display: none;
	}

	.rl-header__call {
		padding: 0;
		width: 44px;
		height: 44px;
		justify-content: center;
	}

	.rl-header__inner {
		gap: 10px;
	}

	.rl-mark__word {
		font-size: 1.375rem;
	}
}

/* ------------------------------------------------ footer: the city string --- */
.rl-footer {
	padding-block: clamp(40px, 6vw, 72px) 110px;
	color: var(--rl-mist);
}

.rl-cities {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0;
	margin: 0;
	padding: 0 0 28px;
	list-style: none;
	font: 300 clamp(1.6rem, 3.6vw, 3.2rem)/1.2 var(--rl-display);
	color: var(--rl-city-ink);
	border-bottom: 1px solid rgba(185, 192, 207, 0.14);
}

.rl-cities li {
	display: inline-flex;
	align-items: center;
}

.rl-cities li:not(:last-child)::after { /* a length of cord between towns, one bulb hanging from it */
	content: "";
	flex: none;
	width: 1.4em;
	height: 0.5em;
	margin: 0 0.3em;
	background:
		radial-gradient(circle at 50% 72%, var(--rl-cord-bulb) 0 0.12em, transparent 0.13em),
		linear-gradient(var(--rl-cord), var(--rl-cord)) 0 0.16em / 100% 1px no-repeat;
}

.rl-cities .is-home {
	color: var(--rl-warm);
}

.rl-cities li.is-home:not(:last-child)::after {
	background:
		radial-gradient(circle at 50% 72%, var(--rl-amber) 0 0.12em, rgba(240, 181, 69, 0.35) 0.14em, transparent 0.34em),
		linear-gradient(var(--rl-cord), var(--rl-cord)) 0 0.16em / 100% 1px no-repeat;
}

.rl-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
	margin-top: 56px;
}

.rl-footer__id {
	display: flex;
	gap: 18px;
	align-items: center;
}

.rl-footer__id img {
	width: 64px;
	height: 64px;
}

.rl-footer__id p {
	font-size: 0.9375rem;
	line-height: 1.55;
}

.rl-footer__links {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.rl-footer__links a {
	text-decoration: none;
	overflow-wrap: anywhere;
}

.rl-footer__links a:hover {
	color: var(--rl-snow);
	text-decoration: underline;
}

.rl-footer__legal {
	margin-top: 48px;
	font-size: 0.8125rem;
	color: var(--rl-city-ink);
}

/* ------------------------------------------------------ mobile call bar --- */
.rl-callbar {
	display: none;
}

@media (max-width: 760px) {
	.rl-callbar {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom));
		z-index: 30;
		min-height: 54px;
		border-radius: 999px;
		background: var(--rl-warm);
		color: var(--rl-night-deep);
		font: 600 1rem/1 var(--rl-text);
		text-decoration: none;
		box-shadow: 0 12px 30px -10px rgba(14, 19, 32, 0.7);
		transform: translateY(160%);
		transition: transform 320ms var(--rl-ease-out);
	}

	.rl-callbar.is-shown {
		transform: translateY(0);
	}

	.rl-callbar:active {
		transform: scale(0.97);
	}
}