/*
 * The site around the calculators: header and footer (Site). Every colour, space and size
 * is an ACSS token; the icons are ACSS icons (data-icon). Both run as wide as the page's
 * content (Bricks' container, 1100px) inside ACSS's gutter, so their edges line up with it.
 */

/*
 * A surface raised off the page (cards, the header, a chosen tab): white while the page is
 * light. ACSS turns --white black in dark mode, a hole in the page, so there it is a step
 * lighter than the page and the answer panel instead. calc.css falls back to white.
 */
:root {
	--ov-raised: light-dark(var(--white, #fff), var(--base-hover, #38332c));
}

.ov-site-header,
.ov-site-footer {
	--ov-shell: min(100% - 2 * var(--gutter, 1rem), 1100px);
}

/* Header: the brand, the links with their icons, then the one action. */
.ov-site-header {
	position: relative;
	z-index: 10;
	border-block-end: 1px solid var(--base-light, #e8dfd0);
	background: var(--ov-raised, var(--white, #fff));
}

.ov-site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-l, 2rem);
	inline-size: var(--ov-shell);
	min-block-size: 4.25rem;
	margin-inline: auto;
}

.ov-site-brand {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--space-2xs, 0.35rem);
	color: var(--text-dark, #1d1a17);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-decoration: none;
}

.ov-site-brand__mark {
	inline-size: 1.75rem;
	block-size: 1.75rem;
	fill: none;
	stroke: var(--primary, #b0552a);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ov-site-nav {
	display: flex;
	align-items: center;
	gap: var(--space-m, 1.5rem);
}

.ov-site-nav__link,
.ov-site-menu__panel > a:not(.btn--primary) {
	--icon-size: 1.125rem;
	--icon-color: currentColor;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs, 0.35rem);
	color: var(--text-dark-muted, #6b625a);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s;
}

.ov-site-header svg[data-icon] path,
.ov-site-footer svg[data-icon] path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ov-site-nav__link:hover,
.ov-site-menu__panel > a:not(.btn--primary):hover {
	color: var(--text-dark, #1d1a17);
}

.ov-site-nav__link[aria-current],
.ov-site-menu__panel > a[aria-current]:not(.btn--primary) {
	color: var(--primary, #b0552a);
	font-weight: 600;
}

.ov-site-header__action {
	--icon-size: 1.1em;
	--icon-color: currentColor;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-inline-start: auto;
}

/* Light and dark: a moon while the page is light, a sun while it is dark. */
.ov-site-mode {
	--icon-size: 1.25rem;
	--icon-color: currentColor;
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-inline-start: auto;
	padding: 0;
	border: 0;
	border-radius: var(--radius-circle, 50%);
	background: var(--base, #f4ede3);
	color: var(--text-dark, #1d1a17);
	cursor: pointer;
	transition: background 0.15s;
}

.ov-site-mode:hover {
	background: var(--base-light, #e8dfd0);
}

/* Beside the action it belongs with, not the header's wide gap away. */
.ov-site-mode + .ov-site-header__action {
	margin-inline-start: calc(var(--space-s, 1rem) - var(--space-l, 2rem));
}

.ov-site-mode svg + svg,
:root[data-brx-theme="dark"] .ov-site-mode svg:first-child {
	display: none;
}

:root[data-brx-theme="dark"] .ov-site-mode svg + svg {
	display: block;
}

/* The phone menu: a <details>, so it opens without a script. Hidden on a wide screen. */
.ov-site-menu {
	display: none;
}

.ov-site-menu__toggle {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-inline-start: calc(var(--space-xs, 0.5rem) * -1);
	cursor: pointer;
	list-style: none;
}

.ov-site-menu__toggle::-webkit-details-marker {
	display: none;
}

/* Three bars, the middle one a span; open, they cross. */
.ov-site-menu__toggle span,
.ov-site-menu__toggle span::before,
.ov-site-menu__toggle span::after {
	display: block;
	inline-size: 1.375rem;
	block-size: 2px;
	border-radius: 2px;
	background: var(--text-dark, #1d1a17);
	transition: rotate 0.2s, translate 0.2s, opacity 0.2s;
}

.ov-site-menu__toggle span {
	position: relative;
}

.ov-site-menu__toggle span::before,
.ov-site-menu__toggle span::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.ov-site-menu__toggle span::before {
	translate: 0 -7px;
}

.ov-site-menu__toggle span::after {
	translate: 0 7px;
}

.ov-site-menu[open] .ov-site-menu__toggle span {
	background: transparent;
}

.ov-site-menu[open] .ov-site-menu__toggle span::before {
	translate: 0;
	rotate: 45deg;
}

.ov-site-menu[open] .ov-site-menu__toggle span::after {
	translate: 0;
	rotate: -45deg;
}

.ov-site-menu__panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 0.35rem);
	padding: var(--space-s, 1rem) var(--gutter, 1rem) var(--space-m, 1.5rem);
	border-block-end: 1px solid var(--base-light, #e8dfd0);
	background: var(--ov-raised, var(--white, #fff));
	box-shadow: 0 12px 24px color-mix(in oklch, var(--neutral, #000) 10%, transparent);
}

.ov-site-menu__panel > a:not(.btn--primary) {
	--icon-size: 1.25rem;
	gap: var(--space-xs, 0.5rem);
	min-block-size: var(--ov-touch, 3rem);
	font-size: var(--text-l, 1.125rem);
}

.ov-site-menu__panel > .btn--primary {
	align-self: flex-start;
	margin: var(--space-xs, 0.5rem) 0 0;
}

@media (max-width: 63.99em) {
	.ov-site-menu {
		display: block;
	}

	.ov-site-nav,
	.ov-site-header__inner > .ov-site-header__action {
		display: none;
	}

	.ov-site-header__inner {
		gap: var(--space-xs, 0.5rem);
		min-block-size: 3.75rem;
	}
}

/* Footer: the brand and its line, the columns of links, then the small print. */
.ov-site-footer {
	margin-block-start: var(--space-2xl, 4rem);
	padding-block: var(--space-xl, 3rem) var(--space-m, 1.5rem);
	background: var(--base, #f4ede3);
	color: var(--text-dark-muted, #6b625a);
}

.ov-site-footer__inner,
.ov-site-footer__base {
	inline-size: var(--ov-shell);
	margin-inline: auto;
}

.ov-site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
	gap: var(--space-xl, 3rem);
}

.ov-site-footer__about p {
	max-inline-size: 30ch;
	margin: var(--space-s, 1rem) 0 0;
}

.ov-site-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--space-l, 2rem);
}

.ov-site-footer__title {
	margin: 0 0 var(--space-s, 1rem);
	color: var(--text-dark-muted, #6b625a);
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: var(--text-xs, 0.75rem);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ov-site-footer ul {
	display: grid;
	gap: var(--space-xs, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ov-site-footer__cols a {
	color: var(--text-dark, #1d1a17);
	text-decoration: none;
}

.ov-site-footer__cols a:hover {
	color: var(--primary, #b0552a);
}

.ov-site-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xs, 0.5rem) var(--space-l, 2rem);
	margin-block-start: var(--space-xl, 3rem);
	padding-block-start: var(--space-m, 1.5rem);
	border-block-start: 1px solid var(--base-semi-light, #ddd2c1);
	font-size: var(--text-s, 0.875rem);
}

.ov-site-footer__base p {
	margin: 0;
}

@media (max-width: 47.99em) {
	.ov-site-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-l, 2rem);
	}

	.ov-site-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Home: the question on the cream, the most looked-up foods beside it, then the sections. */
.ov-home {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* ⚠️ a plain column grows to a slider's full row, and the page ran off the screen */
	gap: var(--space-2xl, 4rem);
}

.ov-home__hero {
	display: grid;
	gap: var(--space-xl, 3rem);
	align-items: center;
	padding-block: var(--space-2xl, 4rem);
	background: var(--base, #f4ede3);
	box-shadow: 0 0 0 100vmax var(--base, #f4ede3);
	clip-path: inset(0 -100vmax); /* the cream to the screen's edges, as the answer panel's */
}

.ov-home__intro h1 {
	margin: 0;
	font-size: var(--h1, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-wrap: balance;
}

.ov-home__intro p {
	max-inline-size: 46ch;
	margin: var(--space-s, 1rem) 0 0;
	color: var(--text-dark-muted, #6b625a);
	font-size: var(--text-l, 1.125rem);
}

.ov-home__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.5rem);
	margin-block-start: var(--space-l, 2rem);
}

/* A button's icon: the text's colour, a little larger than its letters, drawn like the nav's. */
.ov-home__buttons > a {
	--icon-size: 1.15em;
	--icon-color: currentColor;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

.ov-home__buttons svg[data-icon] path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ov-home__quick {
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--ov-raised, var(--white, #fff));
	overflow: hidden;
}

.ov-home__quick h2 {
	margin: 0;
	padding: var(--space-s, 1rem) var(--space-m, 1.5rem);
	font-size: var(--text-l, 1.125rem);
}

.ov-home__quick ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ov-home__quick a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-s, 1rem);
	padding: var(--space-s, 1rem) var(--space-m, 1.5rem);
	border-block-start: 1px solid var(--base-light, #e8dfd0);
	color: var(--text-dark, #1d1a17);
	text-decoration: none;
	transition: background-color 0.15s;
}

.ov-home__quick a:hover {
	background: var(--primary-ultra-light, #fdf1ec);
}

.ov-home__quick-name {
	font-weight: 600;
}

.ov-home__quick-line {
	color: var(--primary, #b0552a);
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: var(--text-s, 0.875rem);
	white-space: nowrap;
}

.ov-home__section > h2 {
	margin: 0;
}

.ov-home__section .ov-page__links + .ov-page__links {
	margin-block-start: var(--space-l, 2rem);
}

.ov-page__links-lead {
	max-inline-size: 60ch;
	margin: var(--space-2xs, 0.35rem) 0 var(--space-m, 1.5rem);
	color: var(--text-dark-muted, #6b625a);
}

.ov-page__links-head + .ov-page__links-lead {
	margin-block-start: calc(var(--space-s, 1rem) * -0.5);
}

.ov-home__all {
	color: var(--primary, #b0552a);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ov-home__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* How it works: three numbered cards, the numbers ACSS boxed icons. */
.ov-home__steps ol {
	--icon-size: 1rem;
	--icon-padding: 0.5rem;
	--icon-radius: var(--radius-circle, 50%);
	--icon-border-width: 0;
	--icon-background: var(--primary, #b0552a);
	--icon-color: var(--white, #fff);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-m, 1.5rem);
	margin: var(--space-m, 1.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.ov-home__steps li {
	padding: var(--space-m, 1.5rem);
	border: var(--border, 1px solid #ddd);
	border-radius: var(--radius-m, 0.75rem);
	background: var(--ov-raised, var(--white, #fff));
}

.ov-home__steps h3 {
	margin: var(--space-s, 1rem) 0 var(--space-2xs, 0.35rem);
	font-size: var(--text-l, 1.125rem);
}

.ov-home__steps p {
	margin: 0;
	color: var(--text-dark-muted, #6b625a);
}

@media (min-width: 64em) {
	.ov-home__hero {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--space-2xl, 4rem);
	}
}

@media (max-width: 47.99em) {
	.ov-home__hero {
		padding-block: var(--space-l, 2rem);
	}

	.ov-home__buttons > a {
		flex: 1 1 auto;
	}

	.ov-home__steps ol {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-s, 1rem);
	}
}

/* The site's own pages (About, Privacy): a reading measure and room between the parts. */
.ov-prose {
	max-inline-size: 68ch;
	color: var(--text-dark-muted, #6b625a);
	line-height: 1.7;
}

.ov-prose > * {
	margin: 0 0 var(--space-s, 1rem);
}

.ov-prose h2 {
	margin-block: var(--space-l, 2rem) var(--space-xs, 0.5rem);
	color: var(--text-dark, #1d1a17);
	font-size: var(--h4, 1.375rem);
	line-height: 1.3;
}

.ov-prose__lead {
	color: var(--text-dark, #1d1a17);
	font-size: var(--text-l, 1.125rem);
}

.ov-prose__date {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: var(--text-s, 0.875rem);
	letter-spacing: 0.02em;
}

.ov-prose ul {
	padding-inline-start: 1.25em;
}

.ov-prose li + li {
	margin-block-start: var(--space-2xs, 0.35rem);
}

.ov-prose a {
	color: var(--primary, #b0552a);
	text-underline-offset: 0.2em;
}