/*
 * Site chrome: header, full-screen menu, footer (header.php, footer.php,
 * js/main.js), following design draft V2. Also .contact-block, the one way
 * contact details are set (menu, footer, Introduction block).
 */
@layer components {
	/* =====================================================================
	   Contact block: label, company and address, email and telephone
	   ===================================================================== */
	.contact-block {
		display: grid;
		gap: var(--space-3);
		font-style: normal;
		font-size: var(--type-small-size);
		line-height: var(--type-small-line);
		color: var(--muted-foreground);
	}

	.contact-block__label {
		font-size: var(--type-label-size);
		line-height: var(--type-label-line);
		letter-spacing: var(--type-label-tracking);
		font-weight: 500;
		text-transform: uppercase;
		color: var(--eyebrow);
	}

	/* Links keep the width of their words, so the hover line and the focus
	   ring sit under the text, not across the column. */
	.contact-block__direct {
		display: grid;
		justify-items: start;
		gap: var(--space-1);
	}

	.contact-block__key {
		color: var(--subtle-foreground);
	}

	.contact-block__uid {
		color: var(--subtle-foreground);
		font-size: var(--type-caption-size);
		line-height: var(--type-caption-line);
		letter-spacing: 0.04em;
	}

	.contact-block a {
		color: var(--foreground);
	}

	.contact-block a:is(:hover, :focus-visible) {
		color: var(--accent);
	}

	/* =====================================================================
	   Header: a slim burgundy contact bar, then the white bar. Emblem and
	   wordmark left; pages and Contact right in small capitals. Hover and
	   the current page take the burgundy.
	   ===================================================================== */
	.site-header {
		position: fixed;
		inset: 0 0 auto;
		z-index: 50;
		background: var(--background);
		transition:
			box-shadow var(--duration-base) var(--ease-out),
			translate var(--duration-base) var(--ease-out);
	}

	.site-header--scrolled {
		box-shadow: 0 1px 0 var(--hairline);
	}

	/* Slides away while scrolling down, back on the way up (main.js). */
	.site-header--hidden:not(:focus-within) {
		translate: 0 -100%;
	}

	.site-main {
		padding-top: calc(var(--header-height) + var(--topbar-height));
	}

	.site-header__topbar {
		display: none;
	}

	.site-header__topbar-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8);
		height: var(--topbar-height);
		font-size: var(--type-caption-size);
		line-height: var(--type-caption-line);
		font-weight: 500;
		color: var(--heading);
	}

	/* Items divided by full-height white rules, as in the draft. */
	.site-header__topbar-list {
		display: flex;
		align-self: stretch;
		margin-left: auto;
	}

	.site-header__topbar-list li {
		display: flex;
		align-items: center;
	}

	.site-header__topbar-list li + li {
		margin-left: var(--space-6);
		padding-left: var(--space-6);
		box-shadow: inset 1px 0 var(--heading);
	}

	.site-header__topbar-place {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.site-header__topbar-place::before {
		content: "";
		width: var(--space-3);
		height: var(--space-3);
		background: currentColor;
		mask: var(--icon-globe) center / contain no-repeat;
	}

	/* At least 24 px tall, so each is a comfortable target (WCAG 2.5.8). */
	.site-header__topbar a {
		display: inline-flex;
		align-items: center;
		min-height: var(--space-6);
		color: inherit;
	}

	.site-header__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8);
		height: var(--header-height);
	}

	/* Emblem beside the wordmark: CALVIN · FAREL over LEAVE A LEGACY between rules. */
	.site-header__brand {
		flex: none;
		display: flex;
		align-items: center;
		gap: var(--space-3);
		color: var(--heading);
		text-decoration: none;
	}

	.site-header__emblem {
		width: var(--space-10);
		height: var(--space-10);
	}

	.site-header__wordmark {
		display: grid;
		justify-items: center;
		gap: var(--space-1);
	}

	.site-header__name {
		display: flex;
		align-items: center;
		gap: 0.3em;
		margin-right: -0.22em;
		font-family: var(--font-heading);
		font-size: 1.125rem;
		line-height: 1.25rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
	}

	.site-header__dot {
		width: 0.25rem;
		height: 0.25rem;
		margin-right: 0.22em;
		border-radius: 50%;
		background: var(--primary);
	}

	.site-header__motto {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		font-family: var(--font-heading);
		font-size: 0.625rem;
		line-height: 0.75rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}

	.site-header__motto::before,
	.site-header__motto::after {
		content: "";
		width: var(--space-6);
		height: var(--border-width);
		background: var(--primary);
	}

	.site-header__nav {
		display: flex;
		align-items: center;
		gap: var(--space-10);
	}

	.site-header__menu {
		display: flex;
		gap: var(--space-10);
		list-style: none;
		padding: 0;
	}

	.site-header__menu a,
	.site-header__contact,
	.site-header__toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-height: var(--space-12);
		font-size: 0.8125rem;
		line-height: var(--type-button-line);
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
		color: var(--heading);
	}

	.site-header__menu a:is(:hover, :focus-visible),
	.site-header__menu a[aria-current],
	.site-header__contact:is(:hover, :focus-visible) {
		color: var(--primary);
	}

	/* Menu toggle (below 64rem): two lines, a cross while the menu is open.
	   48 px square, the icon flush with the bar's right edge.
	   Opening, the lines first slide together, then turn into the cross;
	   closing runs the same two steps backwards. */
	.site-header__toggle {
		--toggle-ease: cubic-bezier(0.65, 0, 0.35, 1);
		--toggle-step: 200ms;

		display: none;
		justify-content: center;
		width: var(--space-12);
		height: var(--space-12);
		margin-right: calc(var(--space-3) * -1);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.site-header__toggle-icon {
		position: relative;
		width: var(--space-6);
		height: 0.5rem;
	}

	.site-header__toggle-icon::before,
	.site-header__toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 1.5px;
		border-radius: 1px;
		background: currentColor;
		/* Closing: unturn first, then slide apart. */
		transition:
			rotate var(--toggle-step) var(--toggle-ease),
			translate var(--toggle-step) var(--toggle-ease) var(--toggle-step);
	}

	.site-header__toggle-icon::before {
		top: 0;
	}

	.site-header__toggle-icon::after {
		bottom: 0;
	}

	/* Opening: slide together first, then turn. */
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::before,
	.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after {
		transition:
			translate var(--toggle-step) var(--toggle-ease),
			rotate var(--toggle-step) var(--toggle-ease) var(--toggle-step);
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::before {
		translate: 0 calc(0.25rem - 0.75px);
		rotate: 45deg;
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after {
		translate: 0 calc(-0.25rem + 0.75px);
		rotate: -45deg;
	}

	@media (prefers-reduced-motion: reduce) {
		.site-header__toggle {
			--toggle-step: 0ms;
		}
	}

	/* While the menu is open the header holds still above it. */
	:root.has-menu-open .site-header {
		translate: none;
	}

	@media (max-width: 63.99rem) {
		.site-header__nav {
			display: none;
		}

		.site-header__toggle {
			display: inline-flex;
		}
	}

	@media (min-width: 64rem) {
		.site-header__topbar {
			display: block;
		}

		/* Small desktops and landscape tablets: the pages keep one line each. */
		.site-header__nav,
		.site-header__menu {
			gap: clamp(var(--space-5), 3.2vw - 0.75rem, var(--space-10));
		}
	}

	@media (min-width: 64rem) and (max-width: 79.99rem) {
		.site-header__menu a,
		.site-header__contact {
			font-size: var(--type-button-size);
		}
	}

	@media (min-width: 64rem) {

		.site-header__emblem {
			width: var(--space-12);
			height: var(--space-12);
		}

		.site-header__name {
			font-size: 1.375rem;
			line-height: 1.5rem;
		}

		.site-header__motto {
			font-size: 0.6875rem;
		}
	}

	/* =====================================================================
	   Menu panel (below 64rem): burgundy, from the header's foot to the
	   bottom of the screen; the header stays above it. The pages in the
	   serif, the current one in gold, the contact details at the foot.

	   Opening, the panel fades in and its contents settle down into place
	   a moment later; closing, everything fades out together, quicker.
	   ===================================================================== */
	.site-menu {
		--menu-in: 420ms;
		--menu-out: 260ms;

		position: fixed;
		inset: var(--header-height) 0 0;
		z-index: 49;
		background-color: var(--background);
		opacity: 0;
		transition: opacity var(--menu-out) cubic-bezier(0.4, 0, 1, 1);
	}

	.site-menu--open {
		opacity: 1;
		transition: opacity var(--menu-in) var(--ease-out);
	}

	.site-menu__inner {
		opacity: 0;
		translate: 0 calc(var(--space-3) * -1);
		transition:
			opacity calc(var(--menu-out) * 0.8) cubic-bezier(0.4, 0, 1, 1),
			translate var(--menu-out) cubic-bezier(0.4, 0, 1, 1);
	}

	.site-menu--open .site-menu__inner {
		opacity: 1;
		translate: 0 0;
		transition:
			opacity var(--menu-in) var(--ease-out) 80ms,
			translate calc(var(--menu-in) * 1.6) var(--ease-out) 80ms;
	}

	@media (prefers-reduced-motion: reduce) {
		.site-menu {
			--menu-in: 1ms;
			--menu-out: 1ms;
		}

		.site-menu__inner {
			translate: none;
		}
	}

	@media (min-width: 64rem) {
		.site-menu {
			display: none;
		}
	}

	:root.has-menu-open {
		overflow: hidden;
	}

	.site-menu__scroll {
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.site-menu__inner {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		padding-block: var(--space-8) max(var(--space-8), env(safe-area-inset-bottom));
	}

	.site-menu__nav {
		flex: 1;
		padding-bottom: var(--space-10);
	}

	.site-menu__list {
		display: grid;
		list-style: none;
		padding: 0;
	}

	/* Each link fills its row, at least 52 px tall. */
	.site-menu__list a {
		display: flex;
		align-items: center;
		min-height: 3.25rem;
		font-family: var(--font-heading);
		font-size: 1.5rem;
		line-height: 2rem;
		text-decoration: none;
		color: var(--heading);
		-webkit-tap-highlight-color: transparent;
	}

	.site-menu__list a:is(:hover, :focus-visible, :active),
	.site-menu__list a[aria-current] {
		color: var(--accent);
	}

	.site-menu__contact {
		padding-top: var(--space-6);
		box-shadow: inset 0 1px var(--hairline);
	}

	/* =====================================================================
	   Footer (design draft V2): burgundy with the faint engraving, on the
	   content grid. The brand on the left, set apart by a fine gold rule
	   that fades at both ends; two rows of columns divided by a hairline;
	   a gold frame line rising on the right and running out along the
	   bottom; the base line beneath it.
	   ===================================================================== */
	.site-footer {
		--engraving-position: 30% 40%;

		position: relative;
		overflow: clip;
	}

	.site-footer__container {
		--container: 80rem;
	}

	.site-footer__frame {
		display: none;
	}

	.site-footer__main {
		display: grid;
		gap: var(--space-12);
		padding-block: var(--space-20) var(--space-12);
	}

	.site-footer__brand {
		position: relative;
		display: grid;
		justify-items: start;
		align-content: start;
	}

	.site-footer__name {
		font-family: var(--font-heading);
		font-size: 1.75rem;
		line-height: 2.25rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--heading);
		text-decoration: none;
	}

	.site-footer__descriptor,
	.site-footer__statement {
		font-size: var(--type-small-size);
		line-height: var(--type-small-line);
		color: var(--muted-foreground);
	}

	.site-footer__descriptor {
		margin-top: var(--space-4);
	}

	/* Square, hairline-framed icons in gold. */
	.site-footer__socials {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
		margin-top: var(--space-8);
	}

	.site-footer__social {
		--fill-color: var(--accent);

		display: grid;
		place-items: center;
		width: var(--space-12);
		height: var(--space-12);
		color: var(--accent);
		box-shadow: inset 0 0 0 1px var(--border);
	}

	.site-footer__social .social-icon {
		width: var(--space-5);
		height: var(--space-5);
	}

	.site-footer__social:is(:hover, :focus-visible) {
		color: var(--ramp-burgundy-900);
		box-shadow: inset 0 0 0 1px var(--accent);
	}

	.site-footer__columns {
		display: grid;
	}

	.site-footer__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10) var(--grid-gap);
		padding-block: var(--space-10);
	}

	.site-footer__row:first-child {
		padding-top: 0;
	}

	.site-footer__row + .site-footer__row {
		box-shadow: inset 0 1px var(--hairline);
	}

	.site-footer__label {
		margin-bottom: var(--space-4);
		font-size: var(--type-label-size);
		line-height: var(--type-label-line);
		letter-spacing: var(--type-label-tracking);
		font-weight: 700;
		text-transform: uppercase;
		color: var(--heading);
	}

	.site-footer__list,
	.site-footer__text {
		font-size: var(--type-small-size);
		line-height: var(--space-8);
		color: var(--muted-foreground);
	}

	.site-footer__list {
		list-style: none;
		padding: 0;
	}

	/* Rows stay 32px apart, but a wrapped entry keeps its lines together,
	   so "Investment Approach" never reads as two links. */
	.site-footer__list > li {
		padding-block: var(--space-1);
		line-height: var(--space-6);
	}

	/* An address or a number is never broken inside. */
	.site-footer__list a:is([href^="mailto:"], [href^="tel:"]),
	.contact-block a[href^="tel:"] {
		white-space: nowrap;
	}

	/* Phones: Contact takes the whole row, so the e-mail stays on one line. */
	@media (max-width: 39.99rem) {
		.site-footer__column--contact {
			grid-column: 1 / -1;
		}
	}

	.site-footer__text {
		font-style: normal;
	}

	.site-footer__list a,
	.site-footer__legal a {
		color: var(--muted-foreground);
	}

	.site-footer__list a:is(:hover, :focus-visible),
	.site-footer__list a[aria-current] {
		color: var(--heading);
	}

	/* "Telephone" before the number, quiet like .contact-block__key. */
	.site-footer__key {
		color: var(--subtle-foreground);
	}

	.site-footer__base {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-3) var(--space-8);
		padding-block: var(--space-6) var(--space-8);
		box-shadow: inset 0 1px var(--hairline);
		font-size: var(--type-caption-size);
		line-height: var(--type-caption-line);
		color: var(--muted-foreground);
	}

	.site-footer__legal {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-6);
		list-style: none;
		padding: 0;
	}

	.site-footer__legal a:is(:hover, :focus-visible) {
		color: var(--heading);
	}

	@media (min-width: 40rem) {
		.site-footer__row {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 48rem) {
		.site-footer__container {
			--gutter: var(--space-12);
		}
	}

	/* Desktop: brand on columns 1–4 behind a fading gold rule, columns on 5–12. */
	@media (min-width: 64rem) {
		.site-footer__container {
			--gutter: var(--space-16);
		}

		.site-footer__main {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--grid-gap);
			padding-block: var(--space-24) var(--space-16);
		}

		.site-footer__brand {
			grid-column: 1 / 5;
			padding-right: var(--space-10);
		}

		.site-footer__brand::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: calc(var(--space-16) * -1);
			width: var(--border-width);
			background: linear-gradient(to bottom, var(--hairline) 70%, transparent);
		}

		.site-footer__columns {
			grid-column: 6 / -1;
		}

		/* The base line sits under the frame, so the hairline is the frame's. */
		.site-footer__base {
			box-shadow: none;
			padding-block: var(--space-6) var(--space-6);
		}

		/* Small desktops: the brand above the columns, as on tablets, so the
		   three columns keep their width. */
		@media (max-width: 79.99rem) {
			.site-footer__brand,
			.site-footer__columns {
				grid-column: 1 / -1;
			}

			.site-footer__brand::after {
				display: none;
			}
		}

		.site-footer__frame {
			display: block;
			top: var(--space-30);
			right: var(--space-6);
			bottom: var(--space-16);
			left: 0;
			--frame-color: color-mix(in srgb, var(--ramp-gold-300) 80%, transparent);
		}
	}
}