/* Header, footer and extras driven by Theme Options (generated by DEVOUR).
   Colors and sizes come from CSS variables printed from the options. */

/* ---------------------------------------------------------------- layout */
.wpm-container {
	box-sizing: content-box;
	max-width: var(--wpm-container, var(--wp--style--global--wide-size, 1200px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1rem) var(--wp--style--root--padding-right, 1rem);
}

/* Page frame: header, main and footer touch (no block gap between them). */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.site-main {
	padding-block: var(--wpm-section-spacing, 3rem);
}

/* Full-width sections: no frame padding above a page that starts with one or below a page that ends with one,
   adjacent full-width sections touch, and an align-full block always spans the viewport (even if a section
   style sets width: 100%, which would only fill the padded content box). */
.site-main:has(> .alignfull:first-child),
.site-main:has(> .wp-block-post-content:first-child > .alignfull:first-child) {
	padding-block-start: 0;
}

.site-main:has(> .alignfull:last-child),
.site-main:has(> .wp-block-post-content:last-child > .alignfull:last-child) {
	padding-block-end: 0;
}

.is-layout-constrained > .alignfull + .alignfull {
	margin-block-start: 0;
}

.has-global-padding > .alignfull {
	width: auto;
	max-width: none;
}

/* ---------------------------------------------------------------- header */
.wpm-site-header {
	background: var(--wpm-header-bg);
	color: var(--wpm-header-text);
	z-index: 100;
}

.wpm-header--width-content .wpm-container { --wpm-container: var(--wp--style--global--content-size, 720px); }
.wpm-header--width-full .wpm-container { --wpm-container: none; }

.wpm-header--border .wpm-header__bar {
	border-bottom: 1px solid var(--wpm-border);
}

.wpm-header--sticky {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	transition: box-shadow 0.2s ease;
}

.wpm-header--sticky.is-scrolled {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.wpm-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem 2rem;
	padding-block: var(--wpm-header-padding);
	transition: padding 0.2s ease;
}

.wpm-header--shrink.is-scrolled .wpm-header__inner {
	padding-block: calc(var(--wpm-header-padding) * 0.5);
}

.wpm-header__brand {
	display: flex;
	align-items: center;
	gap: 0.25rem 0.75rem;
	flex-wrap: wrap;
	min-width: 0;
}

.wpm-logo {
	display: inline-flex;
	line-height: 0;
}

.wpm-logo__img {
	width: var(--wpm-logo-width);
	max-width: 60vw;
	height: auto;
	transition: width 0.2s ease;
}

.wpm-header--shrink.is-scrolled .wpm-logo__img {
	width: calc(var(--wpm-logo-width) * 0.8);
}

.wpm-site-header .wpm-site-title {
	margin: 0;
	line-height: 1.2;
}

.wpm-site-header .wpm-site-title a {
	color: var(--wpm-header-text);
	text-decoration: none;
}

.wpm-site-tagline {
	margin: 0;
	font-size: 0.875rem;
	opacity: 0.75;
	flex-basis: 100%;
}

.wpm-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
	min-width: 0;
}

.wpm-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* small screens: logo + menu button on the first row, extras wrap below */
@media (max-width: 781px) {
	.wpm-header__inner {
		flex-wrap: wrap;
		gap: 0.75rem 1rem;
	}

	.wpm-header__brand {
		flex: 1 1 0;
	}

	.wpm-header__nav {
		flex: 0 0 auto;
	}

	.wpm-header__actions {
		order: 3;
		flex-basis: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.wpm-logo__img {
		max-width: 50vw;
	}
}

/* logo right: mirror the bar */
.wpm-header--logo-right .wpm-header__inner { flex-direction: row-reverse; }
.wpm-header--logo-right .wpm-header__nav { justify-content: flex-start; }

/* logo center: logo on its own row, menu + actions centered below */
.wpm-header--logo-center .wpm-header__inner {
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}
.wpm-header--logo-center .wpm-header__brand {
	flex-basis: 100%;
	justify-content: center;
	flex-direction: column;
}
.wpm-header--logo-center .wpm-header__nav { flex: 0 1 auto; justify-content: center; }

/* menu colors */
.wpm-site-header .wp-block-navigation,
.wpm-site-header .wp-block-navigation a,
.wpm-site-header .wp-block-navigation__responsive-container-open,
.wpm-site-header .wp-block-navigation__responsive-container-close {
	color: var(--wpm-header-menu);
	text-decoration: none;
}

.wpm-site-header .wp-block-navigation a:hover,
.wpm-site-header .wp-block-navigation a:focus,
.wpm-site-header .wp-block-navigation .current-menu-item > a {
	color: var(--wpm-header-menu-hover);
}

.wpm-site-header .wp-block-navigation__submenu-container,
.wpm-site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wpm-header-bg) !important;
	color: var(--wpm-header-menu) !important;
	border-color: var(--wpm-border) !important;
}

/* search icon */
.wpm-header-search .wp-block-search__button {
	background: transparent;
	color: var(--wpm-header-menu);
	border: 0;
	padding: 0.25rem;
	margin: 0;
}

.wpm-header-search .wp-block-search__button:hover {
	background: transparent;
	color: var(--wpm-header-menu-hover);
}

.wpm-header-cta {
	display: inline-block;
	padding: 0.55em 1.1em;
	text-decoration: none;
	white-space: nowrap;
}

/* top bar */
.wpm-topbar {
	background: var(--wpm-topbar-bg);
	color: var(--wpm-topbar-text);
	font-size: 0.875rem;
	text-align: center;
	padding-block: 0.5rem;
}

.wpm-topbar a {
	color: inherit;
}

/* social icons follow the surrounding text color */
.wpm-social.wp-block-social-links {
	margin: 0;
	gap: 0.5rem;
}

.wpm-social .wp-social-link,
.wpm-social .wp-social-link a {
	color: currentColor !important;
}

/* ---------------------------------------------------------------- footer */
.wpm-site-footer {
	background: var(--wpm-footer-bg);
	color: var(--wpm-footer-text);
	font-size: 0.875rem;
}

.wpm-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-block: 2rem;
}

.wpm-footer__copy p,
.wpm-powered {
	margin: 0;
}

.wpm-site-footer a,
.wpm-site-footer .wp-block-navigation a {
	color: var(--wpm-footer-link);
}

/* footer widget row: 1-6 equal columns, 2 per row on tablets, stacked on phones */
.wpm-footer-widgets__grid {
	display: grid;
	grid-template-columns: repeat(var(--wpm-footer-cols, 3), minmax(0, 1fr));
	gap: 2rem 2.5rem;
	padding-block: 3rem 2.5rem;
}

.wpm-footer-widgets + .wpm-footer__bar {
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.wpm-footer-widgets__col {
	min-width: 0;
}

.wpm-footer-widgets .widget + .widget {
	margin-top: 1.5rem;
}

.wpm-footer-widgets .widget-title,
.wpm-footer-widgets .wp-block-heading {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	color: inherit;
}

.wpm-footer-widgets ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpm-footer-widgets li + li {
	margin-top: 0.4rem;
}

.wpm-widget-placeholder {
	margin: 0;
	padding: 1.25rem;
	border: 2px dashed color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 6px;
	text-align: center;
	opacity: 0.8;
}

@media (max-width: 1000px) {
	.wpm-footer-widgets--cols-4 .wpm-footer-widgets__grid,
	.wpm-footer-widgets--cols-5 .wpm-footer-widgets__grid,
	.wpm-footer-widgets--cols-6 .wpm-footer-widgets__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.wpm-footer-widgets__grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 700px) {
	.wpm-footer__inner {
		flex-direction: column;
		text-align: center;
	}
}

/* ------------------------------------------------------------------ blog */
.wpm-post-list:not(.is-layout-grid) > li + li {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--wpm-border);
}

.wpm-post-list.is-layout-grid {
	gap: 2rem;
}

@media (max-width: 781px) {
	.wpm-post-list.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

.wpm-post-meta {
	gap: 0.25rem 1rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

.wpm-single-nav {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wpm-border);
}

/* ---------------------------------------------------------- back to top */
.wpm-back-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 99;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px !important;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.wpm-back-to-top[hidden] {
	display: none;
}

/* ------------------------------------------------- responsive visibility */
/* Add as "Additional CSS class(es)" on any block, e.g. a desktop and a mobile version of a hero image.
   The switch is at 782px, WordPress' own mobile breakpoint. */
@media (max-width: 781px) {
	.wpm-hide-mobile { display: none !important; }
}

@media (min-width: 782px) {
	.wpm-hide-desktop { display: none !important; }
}
