/*
 * Components: one section per template part, named like its file.
 * e.g. template-parts/layout/site-header.php  →  "=== site-header ==="
 */

/* ===================================================================
 * template-parts/layout/
 * =================================================================== */

/* === skip-link (header.php) === */
.skip-link:focus {
	position: fixed !important;
}

/* === site-header === */
.site-header {
	position: relative;
	z-index: 50;
	background: var(--wp--preset--color--white);
	border-block-end: 1px solid var(--wp--preset--color--line);

	@media (min-width: 1200px) {
		position: sticky;
		top: 0;
	}
}

.admin-bar .site-header {
	@media (min-width: 1200px) {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: 0.75rem;

	@media (min-width: 1200px) {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--40);
	}

	/* Phones: logo, search, CTA and the menu button share one row. */
	@media (max-width: 479px) {
		gap: 0.5rem;
	}
}

/* === site-branding === */
.site-branding {
	margin-inline-end: auto;

	a {
		display: block;
	}

	img {
		display: block;
		width: auto;
		max-height: 56px;

		@media (max-width: 479px) {
			max-height: 40px;
		}
	}
}

/* === menu-toggle === */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.75em;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	cursor: pointer;

	&:hover,
	&:focus-visible {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink);
	}

	@media (min-width: 1200px) {
		display: none;
	}

	@media (max-width: 479px) {
		padding: 0.625em;
	}
}

/* Phones: icon only (the label stays for screen readers). */
.menu-toggle__label {
	@media (max-width: 479px) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Without JS there is nothing to toggle: keep the button hidden, menu open. */
html:not(.js) .menu-toggle {
	display: none;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	display: block;
	width: 1.125em;
	height: 2px;
	background: currentColor;
}

.menu-toggle__icon {
	position: relative;

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 0;
	}

	&::before { top: -6px; }
	&::after { top: 6px; }
}

/* === primary-nav === */
.primary-nav {
	order: 10; /* below logo, actions and toggle on small screens */
	flex-basis: 100%;

	@media (min-width: 1200px) {
		order: 0;
		flex-basis: auto;
	}
}

/* Collapsed on small screens only when JS is running (see navigation.js). */
.js .primary-nav:not(.is-open) .primary-nav__menu {
	@media (max-width: 1199px) {
		display: none;
	}
}

.primary-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	font-family: var(--wp--preset--font-family--heading);

	@media (min-width: 1200px) {
		flex-direction: row;
		gap: var(--wp--preset--spacing--40);
	}

	> li {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-block-start: 1px solid var(--wp--preset--color--line);

		@media (min-width: 1200px) {
			flex-wrap: nowrap;
			border: 0;
		}
	}

	> li > a {
		flex: 1;
		padding-block: 0.75em;
		color: var(--wp--preset--color--muted);
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.02em;

		@media (min-width: 1200px) {
			padding-block: 1.25em;
			box-shadow: inset 0 -3px 0 transparent;
		}

		&:hover,
		&:focus-visible {
			color: var(--wp--preset--color--primary);
		}
	}

	> .current-menu-item > a,
	> .current-menu-ancestor > a {
		color: var(--wp--preset--color--primary);

		@media (min-width: 1200px) {
			box-shadow: inset 0 -3px 0 var(--wp--preset--color--primary);
		}
	}

	.sub-menu {
		display: none;
		flex-basis: 100%;
		list-style: none;
		margin: 0;
		padding: 0 0 0.75em 1em;
		font-family: var(--wp--preset--font-family--body);

		@media (min-width: 1200px) {
			position: absolute;
			top: 100%;
			left: -1rem;
			min-width: 16rem;
			padding: 0.5rem 0;
			background: var(--wp--preset--color--white);
			border: 1px solid var(--wp--preset--color--line);
			border-radius: 4px;
			box-shadow: 0 8px 24px rgb(20 22 23 / 12%);
		}

		a {
			display: block;
			padding: 0.4em 0;
			color: var(--wp--preset--color--ink);
			text-decoration: none;

			@media (min-width: 1200px) {
				padding: 0.5em 1rem;
			}

			&:hover,
			&:focus-visible {
				color: var(--wp--preset--color--primary);
				background: var(--wp--preset--color--surface);
			}
		}

		.current-menu-item > a {
			color: var(--wp--preset--color--primary);
			font-weight: 600;
		}
	}

	/* Open: via the toggle on every screen (navigation.js closes it on Esc, a second click,
	 * a click outside or when focus leaves the area). */
	> li.is-open > .sub-menu {
		display: block;
	}

	/* Mouse on desktop: hover opens it too, unless another dropdown was opened by its toggle.
	 * Not on touch screens, where hover would swallow the first tap on the area link. */
	@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
		&:not(:has(> li.is-open)) > li:hover > .sub-menu {
			display: block;
		}
	}
}

/* Without JS there are no toggles: keyboard focus opens the dropdown on desktop. */
html:not(.js) .primary-nav__menu > li:focus-within > .sub-menu {
	@media (min-width: 1200px) {
		display: block;
	}
}

/* Without JS the sub-menus stay listed on small screens (nothing could open them). */
html:not(.js) .primary-nav__menu .sub-menu {
	@media (max-width: 1199px) {
		display: block;
	}
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	border: 0;
	border-radius: 4px;
	cursor: pointer;

	@media (min-width: 1200px) {
		width: 1.5rem;
		height: 1.5rem;
	}

	&::before {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		border-inline-end: 2px solid currentColor;
		border-block-end: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
	}

	&:hover,
	&:focus-visible {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary);
	}

	&[aria-expanded="true"]::before {
		transform: translateY(2px) rotate(-135deg);
	}
}

/* === header-actions === */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 4px;
	color: var(--wp--preset--color--ink);

	&:hover,
	&:focus-visible,
	&[aria-expanded="true"] {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary);
	}
}

.header-actions__cta {
	white-space: nowrap;

	@media (max-width: 479px) {
		padding-inline: 0.875em;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* === header-search === */
.header-search {
	padding-block: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-block-start: 1px solid var(--wp--preset--color--line);

	.search-form {
		margin: 0 auto;
	}
}

/* === about-contact === */
.about-contact {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);

	a:not(.button) {
		color: var(--wp--preset--color--white);

		&:hover,
		&:focus-visible {
			background: var(--wp--preset--color--white);
			color: var(--wp--preset--color--primary-dark);
		}
	}

	:focus-visible {
		outline-color: var(--wp--preset--color--white);
	}
}

.about-contact__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--60);

	@media (min-width: 768px) {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
}

.about-contact__title {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: uppercase;
}

.about-contact .site-info {
	margin-block-end: 1.25em;

	p + p {
		margin-block-start: 0.25em;
	}
}

/* === site-footer === */
.site-footer {
	background: var(--wp--preset--color--white);
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--40);

	.site-branding img {
		max-height: 48px;
	}

	.copyright {
		flex-basis: 100%;
	}
}

/* === footer-nav === */
.footer-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);

	a {
		color: var(--wp--preset--color--muted);

		&:hover,
		&:focus-visible {
			color: var(--wp--preset--color--primary);
		}
	}
}

/* === site-info === */
.site-info {
	font-style: normal;

	p {
		margin: 0;
	}

	a {
		color: inherit;
	}
}

/* === social-links === */
.social-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);

	a {
		color: inherit;
	}
}

/* === copyright === */
.copyright {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* ===================================================================
 * template-parts/content/
 * =================================================================== */

/* === page-header === */
.page-header {
	margin-block-end: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--white);
	border-block-end: 1px solid var(--wp--preset--color--line);

	.page-title {
		margin: 0;
		font-size: var(--wp--preset--font-size--xx-large);
	}

	.page-description {
		margin-block-start: var(--wp--preset--spacing--20);
		max-width: var(--wp--style--global--content-size, 760px);
		color: var(--wp--preset--color--muted);

		p:last-child {
			margin: 0;
		}
	}
}

/* Templates that start with the page-header band: no gap between it and the site header. */
.site-main:has(> .page-header:first-child) {
	padding-block-start: 0;
}

/* === breadcrumbs === */
.breadcrumbs {
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);

	ol {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li + li::before {
		content: "›";
		margin-inline: 0.5em;
		color: var(--wp--preset--color--accent);
	}

	a {
		color: var(--wp--preset--color--muted);

		&:hover,
		&:focus-visible {
			color: var(--wp--preset--color--primary);
		}
	}
}

/* === section-nav === */
.section-nav {
	align-self: start;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;

	a {
		display: block;
		padding: 0.375em 0.75em;
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		border-inline-start: 3px solid transparent;

		&:hover,
		&:focus-visible {
			background: var(--wp--preset--color--surface);
			color: var(--wp--preset--color--primary);
		}

		&[aria-current="page"] {
			border-inline-start-color: var(--wp--preset--color--primary);
			color: var(--wp--preset--color--primary-dark);
			font-weight: 700;
		}
	}
}

/* An item without a link (menu URL "#"): same box as a link, muted. */
.section-nav :is(.section-nav__title, li) > span {
	display: block;
	padding: 0.375em 0.75em;
	border-inline-start: 3px solid transparent;
	color: var(--wp--preset--color--muted);
}

.section-nav__title {
	margin-block-end: 0.5em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
}

.section-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* === child-tiles === */
.child-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
}

.child-tiles__tile {
	display: flex;
	flex-direction: column;
	gap: 0.375em;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	border-block-start: 4px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	text-decoration: none;

	&:hover,
	&:focus-visible {
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--primary-dark);
		border-color: var(--wp--preset--color--primary);
	}
}

.child-tiles__title {
	font-weight: 700;
}

.child-tiles__text {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* === content-single === */
.entry-header {
	margin-block-end: var(--wp--preset--spacing--40);

	.entry-title {
		margin-block-end: var(--wp--preset--spacing--20);
	}
}

.entry-footer {
	margin-block-start: var(--wp--preset--spacing--50);
}

.page-links {
	margin-block: var(--wp--preset--spacing--40);
}

/* === content-card === */
.card-grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);

	@media (min-width: 640px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@media (min-width: 960px) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;

	.post-thumbnail img {
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}
}

.card__body {
	padding: var(--wp--preset--spacing--40);
}

.card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 0.75em;
	margin-block-end: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);

	.updated-wrapper {
		display: none;
	}
}

.card__label {
	padding: 0.125em 0.5em;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;

	&:hover,
	&:focus-visible {
		background: var(--wp--preset--color--primary-dark);
		color: var(--wp--preset--color--white);
	}
}

.card__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.3;
	margin-block-end: var(--wp--preset--spacing--20);

	a {
		color: var(--wp--preset--color--ink);
		text-decoration: none;

		&:hover,
		&:focus-visible {
			color: var(--wp--preset--color--primary);
		}
	}
}

.card__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);

	p:last-child {
		margin: 0;
	}
}

/* === content-none === */
.no-results {
	margin-block-end: var(--wp--preset--spacing--50);
}

/* === content-404 === */
.error-404 {
	max-width: var(--wp--style--global--content-size, 760px);
	margin-block-end: var(--wp--preset--spacing--50);
}

.error-404__areas {
	margin-block-end: var(--wp--preset--spacing--50);
}

/* ===================================================================
 * template-parts/post/
 * =================================================================== */

/* === post-meta === */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-block-end: var(--wp--preset--spacing--30);

	a {
		color: inherit;
	}
}

/* === post-thumbnail === */
.post-thumbnail {
	margin: 0 0 var(--wp--preset--spacing--40);

	img {
		display: block;
		width: 100%;
		height: auto;
	}

	.card & {
		margin: 0;
	}
}

/* === post-tags === */
.post-tags {
	font-size: var(--wp--preset--font-size--small);
}

.post-tags__label {
	font-weight: 600;
}

/* === post-navigation === */
.post-navigation {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);

	.nav-links {
		display: flex;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--40);
	}

	.nav-next {
		margin-inline-start: auto;
		text-align: end;
	}
}

.post-navigation__label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* === pagination === */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;

	.page-numbers {
		padding: 0.25em 0.75em;
		border: 1px solid var(--wp--preset--color--line);
		text-decoration: none;
	}

	.current {
		background: var(--wp--preset--color--primary-dark);
		color: var(--wp--preset--color--white);
		border-color: var(--wp--preset--color--primary-dark);
	}
}

/* ===================================================================
 * Root-level components
 * =================================================================== */

/* === searchform (searchform.php) === */
.search-form {
	display: flex;
	gap: 0.5em;
	margin-block-end: var(--wp--preset--spacing--40);
	max-width: 32rem;
}

.search-form__input {
	flex: 1;
	min-width: 0;
	padding: 0.5em 0.75em;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 4px;
}

.search-form__submit {
	padding: 0.5em 1em;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 4px;
	cursor: pointer;

	&:hover,
	&:focus-visible {
		background: var(--wp--preset--color--primary-dark);
		color: var(--wp--preset--color--white);
	}
}


/* ===================================================================
 * template-parts/front/
 * =================================================================== */

/* === hero === */
.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 50vh;
	padding-block: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	text-align: center;
	isolation: isolate;

	@media (min-width: 640px) {
		min-height: 70vh;
	}

	/* Darkens the media so white text keeps its contrast on any frame. */
	&.has-media::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgb(0 0 0 / 45%);
	}

	.button {
		margin-block-start: var(--wp--preset--spacing--30);
	}
}

/* Focus rings in the hero: white, visible on the dark background and on any video frame. */
.hero :focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* === hero (pause button, inserted by hero-video.js while the video can play) === */
.hero__pause {
	position: absolute;
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	padding: 0.375em 0.75em;
	background: rgb(0 0 0 / 60%);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;

	&:hover,
	&:focus-visible {
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--ink);
	}
}

/* The front page starts with the hero: no gap above it. */
.home .site-main {
	padding-block-start: 0;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__content {
	max-width: 56rem;
}

.hero__title {
	margin-block-end: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 500;
	text-transform: uppercase;
	text-shadow: 0 2px 12px rgb(0 0 0 / 35%);
}

.hero__text {
	margin-inline: auto;
	max-width: 40rem;
	font-size: var(--wp--preset--font-size--medium);
}

/* === questions === */
.questions {
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--white);
	border-block: 1px solid var(--wp--preset--color--line);
}

.questions__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);

	@media (min-width: 960px) {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: start;
	}
}

.questions__title {
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: uppercase;
}

.questions__intro p {
	color: var(--wp--preset--color--muted);
}

/* Forminator's form, restyled with theme tokens (its own CSS still loads). */
.questions__form .forminator-ui.forminator-custom-form {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);

	.forminator-label {
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
	}

	:is(.forminator-input, .forminator-textarea) {
		padding: 0.625em 0.75em;
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--ink);
		border: 1px solid var(--wp--preset--color--muted);
		border-radius: 4px;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--base);

		&:focus {
			border-color: var(--wp--preset--color--primary);
			box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
			outline: 0;
		}
	}

	:is(.forminator-checkbox, .forminator-checkbox-label, .forminator-description) {
		color: var(--wp--preset--color--muted);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
	}

	.forminator-error-message {
		color: var(--wp--custom--color--error); /* theme.json settings.custom: not in the editor palette */
		background: none;
	}

	.forminator-button-submit {
		padding: 0.625em 1.25em;
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
		border: 2px solid var(--wp--preset--color--primary);
		border-radius: 4px;
		font-family: var(--wp--preset--font-family--body);
		font-weight: 600;
		box-shadow: none;

		&:hover,
		&:focus-visible {
			background: var(--wp--preset--color--primary-dark);
			border-color: var(--wp--preset--color--primary-dark);
			color: var(--wp--preset--color--white);
		}
	}
}

/* === areas === */
.areas {
	padding-block: var(--wp--preset--spacing--60);
	scroll-margin-top: 5rem; /* below the sticky header when jumped to from the hero */
}

.areas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* === area-tile === */
.area-tile {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-block-start: 4px solid var(--wp--preset--color--primary);
	border-radius: 4px;
}

.area-tile__title {
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;

	a {
		color: var(--wp--preset--color--ink);
		text-decoration: none;

		&:hover,
		&:focus-visible {
			color: var(--wp--preset--color--primary);
		}
	}
}

.area-tile__about {
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);

	summary {
		color: var(--wp--preset--color--primary);
		font-weight: 600;
		cursor: pointer;

		&:hover,
		&:focus-visible {
			color: var(--wp--preset--color--primary-dark);
		}
	}

	p {
		margin: 0.5em 0 0;
		color: var(--wp--preset--color--muted);
	}
}

.area-tile__pages {
	list-style: none;
	margin: 0;
	padding: 0;

	li {
		position: relative;
		padding-inline-start: 1.5em;

		& + li {
			margin-block-start: 0.375em;
		}

		/* Chevron bullet in the accent colour (decorative). */
		&::before {
			content: "";
			position: absolute;
			left: 0.25em;
			top: 0.55em;
			width: 0.4em;
			height: 0.4em;
			border-inline-end: 2px solid var(--wp--preset--color--accent);
			border-block-start: 2px solid var(--wp--preset--color--accent);
			transform: rotate(45deg);
		}
	}

	a {
		color: var(--wp--preset--color--ink);
		text-decoration: none;

		&:hover,
		&:focus-visible {
			color: var(--wp--preset--color--primary);
			text-decoration: underline;
		}
	}
}

/* === news === */
.news {
	padding-block: var(--wp--preset--spacing--60);
}

.news__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);
}

.news__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: uppercase;
}

.news__all {
	font-weight: 600;
}

/* === search-result === */
.search-count {
	color: var(--wp--preset--color--muted);
}

.search-results {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
}

.search-result {
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.search-result__type {
	margin-block-end: 0.25em;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.search-result__title {
	margin-block-end: 0.25em;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.search-result__excerpt p:last-child {
	margin: 0;
}