/* =========================================================================
   ODJA theme — site chrome: header, nav, page header, footer, listings.
   Lean, hand-written CSS (no build step). Colours and fonts come from the
   theme.json presets, which the Theme Settings → Design tab can override.
   Block styles and content layout are in blocks.css (also loaded in the editor).
   ========================================================================= */

:root {
	--odja-primary: var(--wp--preset--color--primary);
	--odja-primary-dark: var(--wp--preset--color--primary-dark);
	--odja-primary-light: var(--wp--preset--color--primary-light);
	--odja-secondary: var(--wp--preset--color--secondary);
	--odja-highlight: var(--wp--preset--color--highlight);
	--odja-fg: var(--wp--preset--color--foreground);
	--odja-muted: var(--wp--preset--color--muted);
	--odja-surface: var(--wp--preset--color--surface);
	--odja-bg: var(--wp--preset--color--background);
	--odja-border: #e2ddd2;
	--odja-on-dark-muted: #b9c3d3;
	--odja-maxw: 1180px;
	--odja-gutter: 20px;
	--odja-header-h: 84px;
	--odja-font-heading: var(--wp--preset--font-family--heading);
	--odja-font-body: var(--wp--preset--font-family--body);
}

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

body {
	margin: 0;
	overflow-x: clip; /* keeps full-width blocks from adding a scrollbar-width overflow */

	/* PMPro's login, checkout and account screens. */
	--pmpro--color--accent: var(--odja-primary-dark);
	--pmpro--color--accent--variation: var(--odja-secondary);
	--pmpro--color--contrast: var(--odja-fg);
	--pmpro--base--border-radius: 6px;
	--pmpro--btn--border-radius: 4px;
}

img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--odja-primary); outline-offset: 2px; }

/* ---------- Accessibility ---------- */
/* Core outputs this class (e.g. the pagination heading); visible on focus for skip links. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
	clip-path: none;
	color: var(--odja-fg);
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 8px;
	padding: 12px 20px;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/* ---------- Layout ---------- */
.odja-container { width: 100%; max-width: var(--odja-maxw); margin: 0 auto; padding: 0 var(--odja-gutter); }
.odja-section { padding: 56px 0 72px; }

.odja-eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .8125rem;
	font-weight: 600;
	margin: 0 0 10px;
}

/* ---------- Buttons ---------- */
.odja-btn {
	display: inline-block;
	padding: 10px 22px;
	background: var(--odja-primary-dark);
	color: #fff;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color .2s ease;
}
.odja-btn:hover, .odja-btn:focus-visible { background: var(--odja-secondary); color: #fff; }

/* ---------- Top bar ---------- */
.odja-topbar { background: var(--odja-secondary); color: var(--odja-on-dark-muted); font-size: .875rem; }
.odja-topbar__inner {
	max-width: var(--odja-maxw);
	margin: 0 auto;
	padding: 6px var(--odja-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	flex-wrap: wrap;
}
.odja-topbar__contact, .odja-topbar__account { display: flex; gap: 4px 20px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.odja-topbar__item { color: inherit; text-decoration: none; }
.odja-topbar__item:hover, .odja-topbar__item:focus-visible { color: #fff; text-decoration: underline; }
.odja-topbar__account .odja-topbar__item { color: #fff; font-weight: 600; }

/* ---------- Header ---------- */
.odja-header { position: sticky; top: 0; z-index: 50; background: var(--odja-bg); border-bottom: 1px solid var(--odja-border); }
.admin-bar .odja-header { top: var(--wp-admin--admin-bar--height, 0); }
.odja-header.is-scrolled { box-shadow: 0 2px 14px rgba(20, 40, 75, .08); }

.odja-header__inner {
	max-width: var(--odja-maxw);
	margin: 0 auto;
	padding: 0 var(--odja-gutter);
	min-height: var(--odja-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* ---------- Wordmark ---------- */
.odja-logo { display: inline-flex; align-items: center; gap: 14px; color: var(--odja-secondary); text-decoration: none; }
.odja-logo__img { width: auto; height: 56px; object-fit: contain; }
.odja-logo__mark {
	display: inline-grid;
	place-items: center;
	flex: none;
	min-width: 56px;
	height: 56px;
	padding: 0 8px;
	border: 2px solid var(--odja-primary);
	border-bottom-width: 4px;
	color: var(--odja-primary-dark);
	font-family: var(--odja-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .08em;
}
.odja-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.odja-logo__name { font-family: var(--odja-font-heading); font-size: 1.25rem; font-weight: 600; }
.odja-logo__sub { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--odja-highlight); color: var(--odja-muted); font-size: .8125rem; }

/* ---------- Primary nav ---------- */
.odja-header__nav { display: flex; align-items: center; gap: 8px; position: relative; }
.odja-menu { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.odja-menu li { position: relative; display: flex; align-items: center; }
.odja-menu a { display: block; padding: 10px 12px; font-weight: 600; color: var(--odja-secondary); text-decoration: none; }
.odja-menu a:hover, .odja-menu a:focus-visible { color: var(--odja-primary-dark); }
.odja-menu .current-menu-item > a, .odja-menu .current_page_item > a, .odja-menu .current-menu-ancestor > a { color: var(--odja-primary-dark); }
.odja-header__cta { margin-left: 12px; }

.odja-header__search { background: none; border: none; cursor: pointer; color: var(--odja-secondary); padding: 10px; display: inline-flex; }
.odja-header__toggle { display: none; }

/* Sliding underline */
.odja-menu__underline {
	position: absolute;
	bottom: 2px;
	height: 3px;
	background: var(--odja-primary);
	left: 0;
	width: 0;
	opacity: 0;
	transition: left .25s ease, width .25s ease, opacity .2s ease;
	pointer-events: none;
}
.odja-menu__underline.is-visible { opacity: 1; }

/* Submenu */
.odja-submenu-toggle { background: none; border: none; cursor: pointer; color: var(--odja-secondary); padding: 4px; margin-left: -8px; }
.odja-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	background: var(--odja-bg);
	border: 1px solid var(--odja-border);
	border-top: 3px solid var(--odja-primary);
	box-shadow: 0 10px 28px rgba(20, 40, 75, .12);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
	z-index: 60;
}
.odja-menu .sub-menu a { padding: 8px 18px; font-weight: 500; }
.odja-menu li:hover > .sub-menu, .odja-menu li.is-open > .sub-menu, .odja-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; }

/* ---------- Search overlay ---------- */
.odja-search-overlay {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: color-mix(in srgb, var(--odja-secondary) 96%, transparent);
}
.odja-search-overlay[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: odja-fade .25s ease;
}
.odja-search-overlay::backdrop { background: transparent; }
@keyframes odja-fade { from { opacity: 0; } }
.odja-search-overlay__close { position: absolute; top: 28px; right: 28px; background: none; border: none; color: #fff; cursor: pointer; }
.odja-search-overlay__form { display: flex; align-items: center; gap: 12px; width: min(680px, 90vw); border-bottom: 2px solid #fff; padding-bottom: 12px; }
.odja-search-overlay__form:focus-within { border-bottom-color: var(--odja-primary-light); }
/* The form's underline (above) is the input's focus indicator. */
.odja-search-overlay__form input { flex: 1; background: none; border: none; outline: none; color: #fff; font-size: 28px; }
.odja-search-overlay__form button { background: none; border: none; color: #fff; cursor: pointer; }

/* ---------- Inner page header ---------- */
.odja-page-header {
	position: relative;
	padding: 56px 0 48px;
	background-color: var(--odja-secondary);
	background-image: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--odja-primary) 40%, transparent), transparent 60%);
	color: #fff;
	overflow: hidden;
}
.odja-page-header--image { padding: 120px 0 56px; }
.odja-page-header__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.odja-page-header__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--odja-secondary) 90%, transparent), color-mix(in srgb, var(--odja-secondary) 45%, transparent)); }
.odja-page-header__inner { position: relative; max-width: var(--odja-maxw); margin: 0 auto; padding: 0 var(--odja-gutter); }
.odja-page-header .odja-eyebrow, .odja-page-header .odja-eyebrow a { color: var(--odja-primary-light); text-decoration: none; }
.odja-page-header .odja-eyebrow a:hover { color: #fff; text-decoration: underline; }
.odja-page-header__title {
	font-family: var(--odja-font-heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.15;
	color: #fff;
	margin: 0;
	max-width: 22em;
}
.odja-page-header__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 20px;
	background: var(--odja-highlight);
}

/* ---------- 404 ---------- */
.odja-404 { position: relative; padding: 112px 0 88px; background: var(--odja-secondary); color: #fff; overflow: hidden; border-bottom: 4px solid var(--odja-highlight); }
.odja-404__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.odja-404__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--odja-secondary) 94%, transparent) 30%, color-mix(in srgb, var(--odja-secondary) 55%, transparent)); }
.odja-404__inner { position: relative; max-width: var(--odja-maxw); margin: 0 auto; padding: 0 var(--odja-gutter); }
.odja-404__code {
	position: absolute;
	right: var(--odja-gutter);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--odja-font-heading);
	font-size: clamp(6rem, 18vw, 13rem);
	font-weight: 600;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px color-mix(in srgb, var(--odja-highlight) 70%, transparent);
	pointer-events: none;
}
.odja-404 .odja-eyebrow { color: var(--odja-primary-light); }
.odja-404__title { max-width: 14em; margin: 0; font-family: var(--odja-font-heading); font-size: var(--wp--preset--font-size--xx-large); font-weight: 600; line-height: 1.15; color: #fff; }
.odja-404__lead { max-width: 34em; margin: 16px 0 0; color: #dfe5ee; font-size: var(--wp--preset--font-size--large); }
.odja-404__search { display: flex; gap: 8px; max-width: 520px; margin-top: 32px; }
.odja-404__search input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid transparent; border-radius: 4px; font: inherit; color: var(--odja-fg); background: #fff; }
.odja-404__search input:focus { outline: 3px solid var(--odja-primary-light); outline-offset: 1px; }
.odja-404__search .odja-btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; padding-inline: 24px; }
.odja-404__search .odja-btn:hover { background: var(--odja-highlight); color: var(--odja-secondary); }
.odja-404__links-eyebrow { color: var(--odja-primary-dark); }
.odja-404__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.odja-404__links a { display: block; height: 100%; padding: 22px 24px; background: var(--odja-bg); border: 1px solid var(--odja-border); border-top: 4px solid var(--odja-primary); border-radius: 4px; color: var(--odja-fg); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.odja-404__links a:hover, .odja-404__links a:focus-visible { border-top-color: var(--odja-highlight); transform: translateY(-2px); }
.odja-404__link-title { display: block; font-family: var(--odja-font-heading); font-size: 1.25rem; font-weight: 600; color: var(--odja-secondary); }
.odja-404__link-title::after { content: " →"; color: var(--odja-primary-dark); }
.odja-404__link-desc { display: block; margin-top: 6px; color: var(--odja-muted); font-size: .9375rem; }
.odja-404__home { margin: 40px 0 0; text-align: center; }
@media (max-width: 782px) {
	.odja-404 { padding: 72px 0 64px; }
	.odja-404__code { display: none; }
}

/* ---------- Card grid (blog, search, archives) ---------- */
.odja-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.odja-card { display: flex; flex-direction: column; background: var(--odja-bg); border: 1px solid var(--odja-border); border-top: 3px solid var(--odja-primary); border-radius: 4px; overflow: hidden; }
.odja-card__media { display: block; aspect-ratio: 3 / 2; background: var(--odja-surface); }
.odja-card__media img { width: 100%; height: 100%; object-fit: cover; }
.odja-card__body { padding: 20px 22px 24px; }
.odja-card__meta { margin: 0 0 6px; color: var(--odja-muted); font-size: var(--wp--preset--font-size--small); }
.odja-card__title { font-size: var(--wp--preset--font-size--large); margin: 0 0 8px; }
.odja-card__title a { color: inherit; text-decoration: none; }
.odja-card__title a:hover { color: var(--odja-primary-dark); text-decoration: underline; }
.odja-card__excerpt { color: var(--odja-muted); font-size: .975rem; }
.odja-archive-intro { margin-bottom: 40px; }

/* ---------- Footer ---------- */
.odja-footer { background: var(--odja-secondary); color: var(--odja-on-dark-muted); font-size: .9375rem; }
.odja-footer a { color: #fff; text-decoration: none; }
.odja-footer a:hover, .odja-footer a:focus-visible { color: var(--odja-primary-light); text-decoration: underline; }
.odja-footer__inner {
	max-width: var(--odja-maxw);
	margin: 0 auto;
	padding: 64px var(--odja-gutter) 48px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
}
.odja-footer__logo, .odja-footer__logo:hover { color: #fff; text-decoration: none; }
.odja-footer__logo .odja-logo__mark { border-color: var(--odja-primary-light); color: #fff; }
.odja-footer__logo .odja-logo__sub { color: var(--odja-on-dark-muted); }
.odja-footer__about { max-width: 30em; margin: 20px 0 0; }
.odja-footer__heading {
	margin: 0 0 14px;
	color: var(--odja-highlight);
	font-family: var(--odja-font-body);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.odja-footer__col p, .odja-footer__col address { margin: 0 0 8px; font-style: normal; }
.odja-footer__menu { list-style: none; margin: 0; padding: 0; }
.odja-footer__menu li { margin: 0 0 8px; }
.odja-footer__bottom {
	max-width: var(--odja-maxw);
	margin: 0 auto;
	padding: 20px var(--odja-gutter) 28px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	font-size: .875rem;
}
.odja-footer__copy { margin: 0 auto 0 0; }
.odja-footer__credit { margin: 0; }
.odja-footer__socials { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }

/* ---------- Pagination ---------- */
.pagination, .navigation.pagination { margin-top: 48px; display: flex; justify-content: center; }
.page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border: 1px solid var(--odja-border); border-radius: 4px; text-decoration: none; }
.page-numbers.current { background: var(--odja-primary-dark); color: #fff; border-color: var(--odja-primary-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.odja-header__toggle {
		display: inline-flex;
		flex-direction: column;
		gap: 5px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 10px;
		color: var(--odja-secondary);
		position: relative;
		z-index: 70;
	}
	.odja-header__toggle span { width: 24px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
	.odja-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.odja-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.odja-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.odja-header__nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(340px, 86vw);
		background: var(--odja-bg);
		flex-direction: column;
		align-items: stretch;
		padding: 96px 24px 24px;
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
		box-shadow: -8px 0 30px rgba(20, 40, 75, .18);
		z-index: 60;
	}
	.odja-header__nav.is-open { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
	.odja-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.odja-menu li { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--odja-border); }
	.odja-menu a { padding: 12px 0; }
	.odja-menu__underline { display: none; }
	.odja-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		border: none;
		box-shadow: none;
		padding: 0 0 8px 16px;
		min-width: 0;
		width: 100%;
		display: none;
	}
	.odja-menu .sub-menu li { border-bottom: 0; }
	.odja-menu .sub-menu a { padding: 8px 0; }
	.odja-menu li.is-open > .sub-menu { display: block; }
	.odja-header__cta { margin: 20px 0 0; text-align: center; }
	body.odja-nav-open { overflow: hidden; }
}

@media (max-width: 782px) {
	.odja-footer__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
	.admin-bar .odja-header { top: 0; }
}

@media (max-width: 600px) {
	:root { --odja-header-h: 72px; }
	.odja-logo { gap: 10px; }
	.odja-logo__mark { min-width: 44px; height: 44px; font-size: .875rem; }
	.odja-logo__img { height: 44px; }
	.odja-logo__name { font-size: 1rem; }
	.odja-logo__sub { font-size: .6875rem; }
	.odja-topbar__contact { display: none; }
	.odja-topbar__inner { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}