/* =============================================================
   ovaltwo parent stylesheet (handle: ovaltwo-style)

   Neutral defaults. Child themes restyle through the custom
   properties below and the component root classes; see
   docs/child-integration.md.

   Mobile first, min-width queries only:
   - 992px  primary navigation expands (collapsed below)
   - 601px, 783px  mirror the WordPress admin bar's own breakpoints
   ============================================================= */

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */

:root {
	/* Colour */
	--color-text: #1f2328;
	--color-background: #fff;
	--color-muted: #59636e;
	--color-accent: #0a58ad;
	--color-on-accent: #fff;
	--color-rule: #d1d9e0;
	--color-surface: #f6f8fa;
	--color-focus: #0a58ad;

	/* Type */
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: var(--font-body);
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
	--step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.75rem);
	--step-3: clamp(1.73rem, 1.53rem + 1vw, 2.2rem);
	--step-4: clamp(2.07rem, 1.75rem + 1.6vw, 2.75rem);
	--step-5: clamp(2.3rem, 1.85rem + 2.25vw, 3.4rem);
	--leading-body: 1.6;
	--leading-heading: 1.2;

	/* Space */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4rem;

	/* Layout */
	--container-width: 72rem;
	--content-width: 42rem;
	--wide-width: 60rem;
	--gutter: clamp(1rem, 4vw, 2rem);
	--radius: 0.375rem;

	/* Header and navigation */
	--header-height: 4rem;
	--header-background: var(--color-background);
	--nav-link-color: var(--color-text);
	--nav-link-hover-color: var(--color-accent);
	--nav-link-current-color: var(--color-accent);
	--nav-link-open-color: var(--color-accent);

	/* Submenu panel */
	--submenu-background: var(--color-background);
	--submenu-border-color: var(--color-rule);
	--submenu-radius: var(--radius);
	--submenu-link-color: var(--color-text);
	--submenu-link-hover-color: var(--color-accent);
	--submenu-link-hover-background: var(--color-surface);
	--submenu-link-current-color: var(--color-accent);

	/* Focus */
	--focus-width: 2px;
	--focus-offset: 2px;

	/* Cards */
	--card-background: var(--color-background);
	--card-border-color: var(--color-rule);
	--card-radius: var(--radius);
	--card-padding: var(--space-m);

	/* Set by the theme from document state. Do not override. */
	--admin-bar-height: 0px;
	--admin-bar-fixed: 0px;
	--header-position: static;
	--header-offset: 0px;
}

/* Admin bar: --admin-bar-height is the space it takes at the top of the
   document; --admin-bar-fixed is the part that stays fixed while scrolling
   (WordPress makes the bar non-fixed at 600px and below). */
.has-admin-bar {
	--admin-bar-height: 46px;
}

/* Fixed header (opt-in via the ovaltwo_fixed_header filter; needs JS). */
.js.has-fixed-header {
	--header-position: fixed;
	--header-offset: var(--header-height);

	scroll-padding-top: calc(var(--admin-bar-fixed) + var(--header-height) + var(--space-s));
}

/* At 600px and below the admin bar scrolls away, so the header sticks
   instead of being fixed: it sits under the bar at the top of the page and
   takes its place once scrolled. */
.js.has-fixed-header.has-admin-bar {
	--header-position: sticky;
	--header-offset: 0px;
}

@media (min-width: 601px) {
	.has-admin-bar {
		--admin-bar-fixed: 46px;
	}

	.js.has-fixed-header.has-admin-bar {
		--header-position: fixed;
		--header-offset: var(--header-height);
	}
}

@media (min-width: 783px) {
	.has-admin-bar {
		--admin-bar-height: 32px;
		--admin-bar-fixed: 32px;
	}
}

/* -------------------------------------------------------------
   2. Base
   ------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Footer at the viewport bottom on short pages, after content on long ones. */
body {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--admin-bar-height));
	min-height: calc(100dvh - var(--admin-bar-height));
	margin: 0;
	padding-block-start: var(--header-offset);
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: var(--leading-body);
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 var(--space-s);
	font-family: var(--font-heading);
	line-height: var(--leading-heading);
	text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); }

p,
ul,
ol,
dl,
blockquote,
figure,
pre,
table {
	margin-block: 0 var(--space-m);
}

ul,
ol {
	padding-inline-start: 1.5em;
}

a {
	color: var(--color-accent);
	text-underline-offset: 0.15em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}

img,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

iframe,
embed,
object,
svg {
	max-width: 100%;
}

blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space-m);
	border-inline-start: 4px solid var(--color-accent);
	font-size: var(--step-1);
}

blockquote cite {
	font-size: var(--step--1);
	font-style: normal;
	color: var(--color-muted);
}

figure {
	margin-inline: 0;
}

figcaption,
.wp-caption-text {
	margin-block-start: var(--space-xs);
	color: var(--color-muted);
	font-size: var(--step--1);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: var(--space-xs) var(--space-s);
	border: 1px solid var(--color-rule);
	overflow-wrap: anywhere;
	text-align: start;
	vertical-align: top;
}

th {
	background: var(--color-surface);
}

hr {
	margin-block: var(--space-xl);
	border: 0;
	border-block-start: 1px solid var(--color-rule);
}

code,
kbd,
samp,
pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.1em 0.3em;
	border-radius: var(--radius);
	background: var(--color-surface);
}

pre {
	overflow-x: auto;
	padding: var(--space-s);
	border-radius: var(--radius);
	background: var(--color-surface);
}

pre code {
	padding: 0;
	background: none;
}

button,
input,
select,
textarea {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Core content alignment (floats wrap text around media; not used for layout). */
.alignleft {
	float: left;
	margin-inline-end: var(--space-m);
}

.alignright {
	float: right;
	margin-inline-start: var(--space-m);
}

.aligncenter {
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
}

/* -------------------------------------------------------------
   3. Accessibility
   ------------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal;
}

.skip-link:focus {
	inset-block-start: calc(var(--admin-bar-fixed) + var(--space-xs));
	inset-inline-start: var(--space-xs);
	z-index: 1000;
	position: fixed;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-xs) var(--space-s);
	clip-path: none;
	background: var(--color-background);
	color: var(--color-text);
}

/* -------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------- */

.container {
	width: min(100% - 2 * var(--gutter), var(--container-width));
	margin-inline: auto;
}

.site-main {
	flex: 1 0 auto;
	padding-block: var(--space-xl) var(--space-2xl);
}

/* Singular views: header, image and footer share the content measure. */
.entry > .page-header,
.entry-image,
.entry-footer,
.post-navigation,
.comments-area {
	width: min(100% - 2 * var(--gutter), var(--content-width));
	margin-inline: auto;
}

.entry-content {
	display: flow-root;
	padding-inline: var(--gutter);
}

.entry-content > * {
	max-width: var(--content-width);
	margin: 0 auto var(--space-m);
}

.entry-content > :last-child {
	margin-block-end: 0;
}

.entry-content > :is(h2, h3, h4, h5, h6) {
	margin-block-start: var(--space-xl);
}

.entry-content > .alignwide {
	max-width: var(--wide-width);
}

.entry-content > .alignfull {
	max-width: none;
	margin-inline: calc(var(--gutter) * -1);
}

.entry-content > .alignleft {
	margin-inline-start: max(0px, (100% - var(--content-width)) / 2);
}

.entry-content > .alignright {
	margin-inline-end: max(0px, (100% - var(--content-width)) / 2);
}

/* -------------------------------------------------------------
   5. Site header and brand
   ------------------------------------------------------------- */

.site-header {
	position: var(--header-position);
	inset-block-start: var(--admin-bar-fixed);
	inset-inline: 0;
	z-index: 100;
	background: var(--header-background);
	/* Inset rule: adds no height, so the bar is exactly --header-height. */
	box-shadow: inset 0 -1px 0 var(--color-rule);
}

.site-header .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-m);
}

.site-brand {
	flex: 0 1 auto;
	min-width: 0;
	margin-inline-end: auto;
	overflow: hidden;
	color: var(--color-text);
	font-size: var(--step-1);
	font-weight: 700;
	line-height: var(--header-height);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -------------------------------------------------------------
   6. Primary navigation
   Base = collapsed layout. Without JS (no .js on <html>) the menu and
   its submenus stay expanded and the toggles stay hidden.
   ------------------------------------------------------------- */

.menu-toggle,
.submenu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nav-link-color);
	cursor: pointer;
}

.js .menu-toggle,
.js .submenu-toggle {
	display: inline-flex;
}

.submenu-toggle::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
}

.is-open > .submenu-toggle::after {
	transform: translateY(25%) rotate(-135deg);
}

.primary-nav {
	flex-basis: 100%;
	padding-block-end: var(--space-s);
}

.js .site-header:not(.is-menu-open) .primary-nav {
	display: none;
}

/* Open collapsed menu scrolls inside the viewport under a fixed header. */
.js.has-fixed-header .is-menu-open .primary-nav {
	max-height: calc(100vh - var(--admin-bar-height) - var(--header-height));
	max-height: calc(100dvh - var(--admin-bar-height) - var(--header-height));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.menu,
.sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-2xs);
}

.menu a,
.menu-item-label {
	flex: 1 1 auto;
	padding-block: var(--space-xs);
	color: var(--nav-link-color);
	text-decoration: none;
}

.js .menu-item-label {
	cursor: pointer;
}

.menu a:hover,
.js .menu-item-label:hover {
	color: var(--nav-link-hover-color);
	text-decoration: underline;
}

.menu .current-menu-item > a,
.menu .current-menu-ancestor > a,
.menu .current-menu-ancestor > .menu-item-label {
	color: var(--nav-link-current-color);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Open parent stays readable whether focus is on its toggle or inside its submenu. */
.menu .is-open > a,
.menu .is-open > .menu-item-label,
.menu .is-open > .submenu-toggle {
	color: var(--nav-link-open-color);
}

.sub-menu {
	flex-basis: 100%;
	padding: var(--space-2xs);
	border: 1px solid var(--submenu-border-color);
	border-radius: var(--submenu-radius);
	background: var(--submenu-background);
}

.js .menu-item-has-children:not(.is-open) > .sub-menu {
	display: none;
}

.sub-menu a {
	padding-inline: var(--space-s);
	border-radius: var(--submenu-radius);
	color: var(--submenu-link-color);
}

.sub-menu a:hover,
.sub-menu a:focus-visible {
	background: var(--submenu-link-hover-background);
	color: var(--submenu-link-hover-color);
}

.sub-menu .current-menu-item > a {
	color: var(--submenu-link-current-color);
}

@media (prefers-reduced-motion: no-preference) {
	.menu a,
	.sub-menu a,
	.submenu-toggle::after {
		transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
	}
}

/* Expanded layout. To change the breakpoint, see docs/child-integration.md. */
@media (min-width: 992px) {
	.js .menu-toggle {
		display: none;
	}

	.primary-nav {
		flex-basis: auto;
		padding-block-end: 0;
	}

	.js .site-header:not(.is-menu-open) .primary-nav {
		display: block;
	}

	.menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: var(--space-m);
	}

	.menu > li {
		position: relative;
	}

	.menu > li > a,
	.menu-item-label {
		flex: none;
	}

	.js .sub-menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		z-index: 110;
		min-width: 14rem;
	}

	/* Panels of the last two items open towards the start so they stay on screen. */
	.menu > li:nth-last-child(-n + 2) > .sub-menu {
		inset-inline: auto 0;
	}
}

/* -------------------------------------------------------------
   7. Page header and entry meta
   ------------------------------------------------------------- */

.page-header {
	margin-block-end: var(--space-xl);
}

.page-header h1 {
	margin: 0;
}

.page-description {
	max-width: var(--content-width);
	margin-block-start: var(--space-s);
	color: var(--color-muted);
}

.page-description > :last-child {
	margin-block-end: 0;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-s);
	color: var(--color-muted);
	font-size: var(--step--1);
}

.page-header .entry-meta {
	margin-block-start: var(--space-s);
}

.entry-image {
	margin-block: 0 var(--space-xl);
}

.entry-image img {
	width: 100%;
}

.entry-footer {
	margin-block-start: var(--space-xl);
	padding-block-start: var(--space-m);
	border-block-start: 1px solid var(--color-rule);
	color: var(--color-muted);
	font-size: var(--step--1);
}

.entry-footer p {
	margin-block: 0 var(--space-xs);
}

/* -------------------------------------------------------------
   8. Listings: entry cards
   ------------------------------------------------------------- */

.entry-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--space-l);
}

.entry-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: var(--card-padding);
	border: 1px solid var(--card-border-color);
	border-radius: var(--card-radius);
	background: var(--card-background);
}

.entry-card.sticky {
	border-color: var(--color-accent);
	box-shadow: inset 0 0 0 1px var(--color-accent);
}

.entry-card figure {
	margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 0;
}

.entry-card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.entry-card h2 {
	margin: 0;
	font-size: var(--step-2);
}

.entry-card h2 a {
	color: inherit;
	text-decoration: none;
}

.entry-card h2 a:hover {
	text-decoration: underline;
}

.entry-card p {
	margin: 0;
}

.read-more {
	margin-block-start: auto;
	font-weight: 600;
}

/* -------------------------------------------------------------
   9. Pagination and post navigation (core markup)
   ------------------------------------------------------------- */

.pagination,
.post-navigation {
	margin-block-start: var(--space-xl);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--space-s);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius);
	text-decoration: none;
}

.page-numbers.current {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-on-accent);
}

.page-numbers.dots {
	border-color: transparent;
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-m);
}

.post-navigation .nav-next {
	text-align: end;
}

.meta-nav {
	display: block;
	color: var(--color-muted);
	font-size: var(--step--1);
}

/* -------------------------------------------------------------
   10. Empty state and search form
   ------------------------------------------------------------- */

.empty-state {
	display: grid;
	gap: var(--space-s);
	justify-items: start;
	max-width: var(--content-width);
}

.empty-state > * {
	margin: 0;
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	inline-size: min(100%, 32rem);
}

.search-form label {
	flex: 1 1 12rem;
	min-width: 0;
}

.search-field,
.comment-form textarea,
.comment-form input:is([type="text"], [type="email"], [type="url"]) {
	inline-size: 100%;
	padding: var(--space-xs) var(--space-s);
	border: 1px solid var(--color-muted);
	border-radius: var(--radius);
	background: var(--color-background);
}

.search-submit,
.comment-form .submit {
	padding: var(--space-xs) var(--space-m);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--color-on-accent);
	cursor: pointer;
}

/* -------------------------------------------------------------
   11. Comments
   ------------------------------------------------------------- */

.comments-area {
	margin-block-start: var(--space-2xl);
}

.comment-list,
.comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	padding-inline-start: var(--space-l);
}

.comment-body {
	padding-block: var(--space-m);
	border-block-end: 1px solid var(--color-rule);
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-muted);
	font-size: var(--step--1);
}

.comment-meta .avatar {
	border-radius: 50%;
}

.comment-form {
	display: grid;
	gap: var(--space-s);
}

.comment-form p {
	margin: 0;
}

.comment-form label {
	display: block;
}

/* -------------------------------------------------------------
   12. Site footer
   ------------------------------------------------------------- */

.site-footer {
	padding-block: var(--space-xl);
	border-block-start: 1px solid var(--color-rule);
	background: var(--color-surface);
	font-size: var(--step--1);
}

.footer-menus {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--space-l);
	margin-block-end: var(--space-l);
}

.footer-menu {
	display: grid;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu a {
	color: var(--color-text);
}

.site-info {
	margin: 0;
	color: var(--color-muted);
}