/*
 * Curiosity4U site chrome: fonts, base typography, header and footer.
 * Ported from the owner-approved M2 preview (prototypes/home-m2-preview/).
 * Classes carry a c4u- prefix because Neve uses some of the same names
 * (for example .site-footer). Tokens: style.css (DESIGN.md).
 * Fonts: self-hosted WOFF2, SIL OFL (assets/fonts/).
 */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
	--fs-1: 0.875rem;
	--fs-2: 1rem;
	--fs-3: 1.375rem;
	--fs-4: 1.75rem;
	--aegean-deep: #1B4456;
	--on-aegean: #F8F6F1;
	--on-aegean-soft: rgba(248, 246, 241, 0.86);
	--tone: #EFEBE3;
	--font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--font-text: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--gutter: clamp(16px, 4vw, 40px);
}

@media (min-width: 768px) {
	:root {
		--fs-2: 1.0625rem;
	}
}

/* ---------- Base ---------- */

body {
	background: var(--c4u-paper);
	color: var(--c4u-ink);
	font-family: var(--font-text);
	caret-color: var(--c4u-aegean);
}

h1,
h2,
h3 {
	font-family: var(--font-display);
}

::selection {
	background: var(--c4u-aegean);
	color: var(--c4u-white);
}

/* Neve's header element keeps no visual styles of its own. */
header.header {
	background: transparent;
	box-shadow: none;
}

.c4u-header :focus-visible,
.c4u-footer :focus-visible {
	outline: 3px solid var(--c4u-aegean);
	outline-offset: 3px;
	border-radius: 2px;
}

.c4u-wrap {
	width: 100%;
	max-width: calc(var(--c4u-content-width) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.c4u-header ul,
.c4u-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- CookieAdmin preferences ---------- */

/* The site sets only necessary and (with consent) analytics cookies. Hide the
   unused Functional and Advertisement categories in CookieAdmin's preference
   modal; their toggles stay in the markup, switched off. */
.cookieadmin_types:has(#cookieadmin-functional),
.cookieadmin_types:has(#cookieadmin-marketing) {
	display: none;
}

/* ---------- Header ---------- */

.c4u-header {
	background: var(--c4u-paper);
	color: var(--c4u-ink);
	font-family: var(--font-text);
}

.c4u-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--c4u-space-4) var(--c4u-space-8);
	padding-block: var(--c4u-space-6) var(--c4u-space-4);
}

.c4u-brand {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
	line-height: 1;
}

.c4u-brand:hover {
	color: inherit;
}

.c4u-brand__name {
	font-family: var(--font-display);
	font-size: var(--fs-4);
	font-weight: 600;
	letter-spacing: -0.005em;
}

.c4u-brand__descriptor {
	font-size: var(--fs-1);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--c4u-muted);
}

/* Header: owl mark left of the wordmark, sized to the two-line text block. */
.c4u-brand--mark {
	flex-direction: row;
	align-items: center;
	gap: var(--c4u-space-3);
}

.c4u-brand__text {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
}

.c4u-brand__mark {
	flex: none;
	width: 48px;
	height: 48px;
}

/* Mobile: keep the mark, wordmark and Menu button on one row down to 360px. */
@media (max-width: 767px) {
	.c4u-header__inner {
		column-gap: var(--c4u-space-4);
	}

	.c4u-brand--mark {
		gap: var(--c4u-space-2);
	}

	.c4u-brand__mark {
		width: 36px;
		height: 36px;
	}
}

.c4u-menu-toggle {
	display: none;
	align-items: center;
	gap: var(--c4u-space-2);
	min-height: 44px;
	padding: 0 var(--c4u-space-4) 0 var(--c4u-space-3);
	border: 1px solid var(--c4u-border);
	border-radius: var(--c4u-radius);
	background: var(--c4u-white);
	color: var(--c4u-ink);
	font: 500 var(--fs-2)/1 var(--font-text);
	cursor: pointer;
}

.c4u-header .c4u-menu-toggle,
.c4u-header .c4u-menu-toggle:hover,
.c4u-header .c4u-menu-toggle:focus {
	border: 1px solid var(--c4u-border);
	background: var(--c4u-white);
	color: var(--c4u-ink);
	box-shadow: none;
}

.c4u-menu-toggle__icon {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
}

.c4u-menu-toggle__bar {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.35s var(--ease-out);
}

.c4u-menu-toggle[aria-expanded="true"] .c4u-menu-toggle__bar--top {
	transform: translateY(4px) rotate(45deg);
}

.c4u-menu-toggle[aria-expanded="true"] .c4u-menu-toggle__bar--bottom {
	transform: translateY(-4px) rotate(-45deg);
}

.c4u-nav__list {
	display: flex;
	gap: var(--c4u-space-8);
}

.c4u-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--c4u-ink);
	font-weight: 500;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left calc(100% - 8px) / 0 1px no-repeat;
	transition: background-size 0.4s var(--ease-out), color 0.2s;
}

.c4u-nav a:hover,
.c4u-nav a[aria-current="page"] {
	color: var(--c4u-aegean);
	background-size: 100% 1px;
}

@media (max-width: 767px) {
	.c4u-js .c4u-menu-toggle {
		display: inline-flex;
	}

	.c4u-nav {
		flex-basis: 100%;
	}

	.c4u-js .c4u-nav {
		display: none;
	}

	.c4u-js .c4u-nav[data-open] {
		display: block;
	}

	.c4u-nav__list {
		flex-direction: column;
		gap: 0;
		padding-block: var(--c4u-space-2);
		background: var(--tone);
		border-radius: var(--c4u-radius);
	}

	.c4u-nav a {
		display: flex;
		padding-inline: var(--c4u-space-4);
		font-size: var(--fs-3);
		font-family: var(--font-display);
		font-weight: 600;
		background: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c4u-menu-toggle__bar,
	.c4u-nav a {
		transition: none;
	}
}

/* ---------- Footer ---------- */

.c4u-footer {
	padding-block: var(--c4u-space-16) var(--c4u-space-8);
	background: var(--c4u-aegean);
	color: var(--on-aegean);
	font-family: var(--font-text);
	font-size: var(--fs-2);
	line-height: 1.6;
}

.c4u-footer :focus-visible {
	outline-color: var(--on-aegean);
}

.c4u-footer__inner {
	display: grid;
	gap: var(--c4u-space-8);
}

.c4u-footer .c4u-brand,
.c4u-footer .c4u-brand:hover {
	color: var(--on-aegean);
}

.c4u-footer .c4u-brand__descriptor {
	color: var(--on-aegean-soft);
}

.c4u-footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--c4u-space-2) var(--c4u-space-6);
}

.c4u-footer-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--on-aegean);
	text-decoration: underline;
	text-decoration-color: rgba(208, 173, 104, 0.6);
}

.c4u-footer-nav a:not(:hover) {
	text-decoration: none;
}

.c4u-footer__fine {
	margin: 0;
	padding-top: var(--c4u-space-6);
	border-top: 1px solid rgba(208, 173, 104, 0.5);
	font-size: var(--fs-1);
	color: var(--on-aegean-soft);
}

@media (min-width: 768px) {
	.c4u-footer__inner {
		grid-template-columns: auto 1fr;
		align-items: center;
	}

	.c4u-footer-nav__list {
		justify-content: flex-end;
	}

	.c4u-footer__fine {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.c4u-footer-nav__list {
		column-gap: var(--c4u-space-4);
	}
}