/*
Theme Name: Maureen Chiquet
Theme URI: https://maureenchiquet.com
Author: Stephen Gravitt
Description: Custom block theme for artist Maureen Chiquet's oil painting portfolio.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maureenchiquet
*/

@font-face {
	font-family: 'Karla';
	src: url('assets/fonts/karla/Karla-VariableFont.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Karla';
	src: url('assets/fonts/karla/Karla-Italic-VariableFont.woff2') format('woff2');
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}

/* Header height variable — used by hero to fill remaining viewport */
:root {
	--header-height: 51px;
}

html,
html[data-color-scheme='light'] {
	--color-bg: var(--wp--preset--color--base);
	--color-surface: var(--wp--preset--color--surface);
	--color-text: var(--wp--preset--color--contrast);
	--color-muted: var(--wp--preset--color--muted);
	--color-border: var(--wp--preset--color--accent);
	--color-canvas: var(--wp--preset--color--base);
	--color-dark-canvas: #F5F5F5;
}

html[data-color-scheme='dark'] {
	--color-bg: #0F0F0F;
	--color-surface: #1A1A1A;
	--color-text: #FAFAF8;
	--color-muted: #777777;
	--color-border: #333333;
	--color-canvas: #0F0F0F;
	--color-dark-canvas: #111111;
	--wp--preset--color--base: #0F0F0F;
	--wp--preset--color--surface: #1A1A1A;
	--wp--preset--color--contrast: #FAFAF8;
	--wp--preset--color--heading: #E8E8E8;
	--wp--preset--color--body-text: #CCCCCC;
	--wp--preset--color--muted: #777777;
	--wp--preset--color--accent: #333333;
	--wp--preset--color--white: #FFFFFF;
}

/* Dark mode: invert body background */
html[data-color-scheme='dark'] body {
	background-color: var(--color-bg);
	color: var(--color-text);
}

/* Screen reader text */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	width: auto;
	background: #fff;
	padding: 1rem;
	z-index: 999999;
	position: fixed;
	top: 5px;
	left: 5px;
}

/* Skip to content link */
.skip-to-content {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 999999;
	padding: 1rem 2rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.skip-to-content:focus {
	position: fixed;
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* Focus styles */
:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Navigation focus: ensure contrast against light backgrounds */
.wp-block-navigation a:focus-visible {
	outline-color: var(--wp--preset--color--contrast);
}

/* Form input focus styles */
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible,
.gform_wrapper input:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--contrast);
}

/* Better text wrapping */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
	margin-top: 0;
}

p {
	text-wrap: pretty;
}

/* ============================================
   BLOCK STYLES
   Reusable visual treatments applied via className
   ============================================ */

/* Section Label — small uppercase heading used as section dividers */
.is-style-section-label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--muted);
}

/* Label — small uppercase paragraph (CTA links, back links, post terms) */
.is-style-label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.is-style-label a {
	text-decoration: none;
}

.is-style-label a:hover {
	color: var(--wp--preset--color--contrast);
}

/* Arrow indicator on label links — perfectly vertically centered */
.is-style-label .arrow-right::after {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-left: 0.5em;
	vertical-align: middle;
	position: relative;
	top: -0.08em;
}

.is-style-label .arrow-left::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-left: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-right: 0.5em;
	vertical-align: middle;
	position: relative;
	top: -0.08em;
}

/* Meta — slightly smaller text for attributions, dates, medium descriptions */
.is-style-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Nav Link — uppercase paragraph used in filter tabs */
.is-style-nav-link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* ============================================
   BUTTON SYSTEM
   Primary:   solid dark background, white text
   Secondary: outline with dark border, transparent bg
   Link:      text-only with underline
   ============================================ */

/* Base button reset */
.wp-element-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	border: none;
	border-radius: 0;
	cursor: pointer;
	padding: 0.875rem 2.5rem;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Primary (default) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
button[type="submit"],
input[type="submit"] {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--white);
}

/* Secondary (outline) */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--contrast);
}

/* Link-style button (tertiary) */
.wp-block-button.is-style-link .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--heading);
	padding: 0;
	border: none;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wp-block-button.is-style-link .wp-block-button__link:hover {
	color: var(--wp--preset--color--contrast);
	background: transparent;
}

/* Sticky header — semi-transparent at top */
.home .is-position-sticky {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background-color 0.3s ease;
}

.home .is-position-sticky.is-scrolled {
	background: rgba(255, 255, 255, 0.97);
}

html[data-color-scheme='dark'] .home .is-position-sticky {
	background: rgba(15, 15, 15, 0.85);
}

html[data-color-scheme='dark'] .home .is-position-sticky.is-scrolled {
	background: rgba(15, 15, 15, 0.97);
}

/* Header: fixed to top of viewport on all pages/devices.
   WordPress sticky doesn't work here because the <header> template-part
   wrapper is the same height as the header, giving sticky no room to stick. */
header.wp-block-template-part {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* Offset body content so it doesn't hide behind the fixed header */
.wp-site-blocks {
	padding-top: var(--header-height, 51px);
}

/* Remove WordPress block gap between fixed header and main content */
.wp-site-blocks > main {
	margin-top: 0 !important;
}

/* Also remove gap between header template part and main */
.wp-site-blocks > header + main,
.wp-site-blocks > header + .wp-block-group {
	margin-top: 0 !important;
}

/* Remove backdrop-filter when nav is open — it creates a containing block that breaks fixed positioning */
.is-position-sticky:has(.is-menu-open) {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Lock body scroll when mobile nav is open */
body:has(.is-menu-open),
html:has(.is-menu-open) {
	overflow: hidden !important;
}

/* Mobile navigation overlay — opaque, full-screen, scrollable */
.wp-block-navigation__responsive-container.is-menu-open {
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--heading) !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}

/* Content layout — centered column */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center !important;
	gap: 1.25rem;
	padding-top: 4rem;
	padding-bottom: 2rem;
	min-height: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center !important;
}

/* Nav link styling */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--heading);
}

/* Disable hover-open in mobile overlay — only toggle via click */
.wp-block-navigation__responsive-container.is-menu-open .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .has-child:not(.open-on-click):focus-within > .wp-block-navigation__submenu-container {
	display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex !important;
}

/* Submenu parent: link + arrow on same row, submenu drops below.
   padding-left offsets the arrow width so "About" text aligns with other centered links. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	padding-left: 44px !important;
}

/* Submenu container drops to its own row below */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	flex-basis: 100% !important;
}

/* Submenu toggle arrow — visible, tappable, styled as accordion trigger */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: 0.25em;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	transition: transform 0.2s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
}

/* Parent link + arrow sit in a row */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
	display: inline-flex;
}

/* Submenu children: hidden by default, left-aligned under About's "A" */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: none !important;
	align-items: flex-start !important;
	gap: 0.75rem;
	padding-top: 0.5rem !important;
	padding-left: calc(50% - 5rem) !important;
	padding-right: 0 !important;
	border-left: none !important;
}

/* Show submenu when toggle is expanded */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex !important;
}

/* Child items: smaller, indented feel via lighter weight and smaller size */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	position: relative;
	padding-left: 1rem;
}

/* Subtle dash prefix to show parent relationship */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "—";
	position: absolute;
	left: -0.25rem;
	color: var(--wp--preset--color--accent);
	font-weight: 300;
}

/* Close button: match hamburger position exactly */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: 12px;
	right: 24px;
	z-index: 100001;
	width: 40px;
	height: 40px;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hamburger button: ensure visible touch target */
.wp-block-navigation__responsive-container-open {
	padding: 0.5rem;
}

/* Link underline defaults */
a {
	text-underline-offset: 0.15em;
}

/* Smooth scrolling for non-reduced-motion users */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Mobile: prevent oversized images in stacked columns */
@media (max-width: 781px) {
	.wp-block-column img[style*="min-height"] {
		min-height: 300px !important;
	}
}

/* Footer nav: allow wrapping on mobile */
@media (max-width: 600px) {
	footer .wp-block-navigation__container {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
	}
}

/* Contact Form 7 */
.wpcf7 label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.5rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	color: var(--wp--preset--color--body-text);
	text-transform: none;
	letter-spacing: 0;
}

.wpcf7 textarea {
	min-height: 80px;
	max-height: 120px;
	height: 80px;
	resize: vertical;
}

.wpcf7 .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.wpcf7 input[type="submit"] {
	margin-top: 0.5rem;
}

.wpcf7-response-output {
	margin-top: 1rem;
	font-size: 0.8125rem;
}

@media (max-width: 600px) {
	.wpcf7 .form-row {
		grid-template-columns: 1fr;
	}
}

/* Gravity Forms */
.gform_wrapper label.gfield_label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.gform_wrapper .gfield_required_text {
	font-size: 0;
	visibility: hidden;
}

.gform_wrapper .gfield_required_text::before {
	content: "*";
	font-size: var(--wp--preset--font-size--x-small);
	visibility: visible;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	color: var(--wp--preset--color--body-text);
}

.gform_wrapper textarea {
	min-height: 80px;
	max-height: 150px;
	height: 80px;
	resize: vertical;
}

.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button {
	margin-top: 0.5rem;
}

/* GF two-column field layout */
.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}

.gform_wrapper .gform_fields > .gfield {
	grid-column: 1 / -1;
}

.gform_wrapper .gform_fields > .gf_left_half {
	grid-column: 1;
}

.gform_wrapper .gform_fields > .gf_right_half {
	grid-column: 2;
}

@media (max-width: 600px) {
	.gform_wrapper .gform_fields {
		grid-template-columns: 1fr;
	}

	.gform_wrapper .gform_fields > .gf_left_half,
	.gform_wrapper .gform_fields > .gf_right_half {
		grid-column: 1;
	}
}

/* Mobile: site title fills header height */
@media (max-width: 781px) {
	.wp-block-site-title {
		font-size: 1.375rem !important;
		line-height: 1 !important;
	}
}

/* Uppercase small text should always use the heading font (Karla) */
p[style*="text-transform:uppercase"],
.has-muted-color[style*="text-transform:uppercase"],
.has-heading-color[style*="text-transform:uppercase"] {
	font-family: var(--wp--preset--font-family--heading);
}

/* Load More button loading state */
.load-more-artwork .wp-block-button__link[disabled] {
	opacity: 0.5;
	cursor: wait;
}

/* Work category filter nav */
.work-category-filters {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--50);
	flex-wrap: wrap;
}
.work-category-filters .is-style-nav-link {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	transition: color 0.2s ease;
}
.work-category-filters .is-style-nav-link:hover {
	color: var(--wp--preset--color--heading) !important;
}
.work-category-filters .is-style-nav-link.is-active {
	color: var(--wp--preset--color--heading) !important;
	border-bottom: 1px solid var(--wp--preset--color--heading);
	padding-bottom: 2px;
}

/* Selected Work grid: responsive stacking */
@media (max-width: 781px) {
	.selected-work-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 782px) and (max-width: 1024px) {
	.selected-work-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Media type filters */
.media-type-filters .is-style-nav-link {
	transition: color 0.2s ease;
}

.media-type-filters .is-style-nav-link:hover {
	color: var(--wp--preset--color--heading) !important;
}

.media-type-filters .is-style-nav-link.is-active {
	color: var(--wp--preset--color--heading) !important;
	border-bottom: 1px solid var(--wp--preset--color--heading);
	padding-bottom: 2px;
}

/* Media grid cards: tight text grouping under thumbnails */
ul.is-layout-grid .wp-block-group > .wp-block-post-title,
ul.is-layout-grid .wp-block-group > .is-style-meta,
ul.is-layout-grid .wp-block-group > p {
	margin-top: 0;
	margin-bottom: 0;
}

/* Media hero: grab cursor for drag navigation */
.media-item-hero,
.media-item-hero * {
	cursor: grab;
}

.media-item-hero:active,
.media-item-hero:active * {
	cursor: grabbing;
}

.media-item-hero .media-hero-arrow:hover {
	cursor: pointer;
}

.media-item-hero iframe {
	cursor: default;
}

/* Media hero: prev/next navigation arrows */
.media-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.3s, background 0.3s;
}

.media-item-hero:hover .media-hero-arrow,
.media-hero-arrow:focus-visible {
	opacity: 1;
}

.media-hero-arrow:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.media-hero-arrow:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.8);
	outline-offset: 2px;
}

.media-hero-arrow--prev {
	left: 24px;
}

.media-hero-arrow--next {
	right: 24px;
}

/* Touch devices: always show arrows */
@media (hover: none) {
	.media-hero-arrow {
		opacity: 0.7;
	}
}

@media (max-width: 600px) {
	.media-hero-arrow {
		width: 44px;
		height: 44px;
		opacity: 0.7;
	}

	.media-hero-arrow--prev {
		left: 12px;
	}

	.media-hero-arrow--next {
		right: 12px;
	}
}

/* Media item hero: responsive video embed */
.media-item-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Media grid: thumbnail with gaussian blur background */
.media-item-thumbnail {
	position: relative;
	display: block;
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--20);
	aspect-ratio: 16/10;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Blurred background layer */
.media-item-thumbnail::before {
	content: "";
	position: absolute;
	inset: -20px;
	background: inherit;
	filter: blur(20px) saturate(1.2);
	z-index: 0;
}

/* Dim the blur slightly so the foreground pops */
.media-item-thumbnail::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.15);
	z-index: 1;
}

/* Foreground image: contained, centered, full visible */
.media-item-thumbnail .media-item-foreground {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* Fallback for items without images */
.media-item-thumbnail img:not(.media-item-foreground) {
	aspect-ratio: 16/10;
	object-fit: cover;
	width: 100%;
	display: block;
}

.media-item-thumbnail:hover .media-item-foreground {
	opacity: 0.9;
}

.media-play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* Video: play triangle */
.media-play-overlay--video::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent var(--wp--preset--color--heading);
	margin-left: 3px;
}

/* Podcast/audio: waveform bars */
.media-play-overlay--audio {
	gap: 3px;
}

.media-play-overlay--audio::before,
.media-play-overlay--audio::after {
	content: "";
	display: block;
	background: var(--wp--preset--color--heading);
	border-radius: 1px;
}

.media-play-overlay--audio::before {
	width: 3px;
	height: 16px;
}

.media-play-overlay--audio::after {
	width: 3px;
	height: 10px;
}

.media-play-overlay--audio .bar-1,
.media-play-overlay--audio .bar-2,
.media-play-overlay--audio .bar-3 {
	width: 3px;
	background: var(--wp--preset--color--heading);
	border-radius: 1px;
}

.media-play-overlay--audio .bar-1 { height: 10px; }
.media-play-overlay--audio .bar-2 { height: 18px; }
.media-play-overlay--audio .bar-3 { height: 12px; }

/* Mobile typography: ensure readability and WCAG compliance */
@media (max-width: 781px) {
	body {
		font-size: 1.125rem;
	}

	/* Section labels — ensure minimum 14px on mobile */
	[style*="font-size:0.8125rem"][style*="text-transform:uppercase"] {
		font-size: 0.9375rem !important;
	}

	/* Card titles and meta — ensure minimum 15px on mobile */
	[style*="font-size:0.875rem"] {
		font-size: 1rem !important;
	}

	/* Footer copyright */
	[style*="font-size:0.75rem"][style*="text-transform:uppercase"] {
		font-size: 0.875rem !important;
	}

	/* Post titles in grids */
	.wp-block-post-title {
		font-size: 1rem !important;
	}
}

/* ============================================
   MOBILE SPACING
   Tighten whitespace on small screens to reduce
   scroll depth while keeping an open, airy feel.
   ============================================ */
@media (max-width: 781px) {
	/* Header height on mobile (smaller site title = shorter header) */
	:root {
		--header-height: 48px;
	}

	/* Section padding: reduce top/bottom on mobile.
	   Patterns use spacing|60 (section tops) which clamps down naturally,
	   but some sections need extra tightening when stacked vertically. */
	.wp-block-group.alignfull > .wp-block-group,
	.wp-block-group[class*="has-background"] {
		padding-top: calc(var(--wp--preset--spacing--60) * 0.8);
		padding-bottom: calc(var(--wp--preset--spacing--60) * 0.8);
	}

	/* Heading margins: tighten breathing room on mobile */
	h1.wp-block-heading,
	.wp-block-post-title {
		margin-bottom: 0.75rem;
	}

	h2.wp-block-heading {
		margin-bottom: 0.625rem;
	}

	/* Grid gaps: tighter on mobile for card grids */
	.wp-block-post-template.is-layout-grid,
	ul.is-layout-grid {
		gap: var(--wp--preset--spacing--30) !important;
	}

	/* Stacked columns: add vertical spacing between when they stack */
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		gap: var(--wp--preset--spacing--40) !important;
	}

	/* Images in stacked columns: prevent excessive height */
	.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column .wp-block-image img {
		max-height: 60vh;
		object-fit: cover;
	}

	/* Footer: reduce top padding on mobile */
	footer .wp-block-group[style*="padding-top"] {
		padding-top: var(--wp--preset--spacing--50) !important;
	}

	/* Footer: tighter bottom padding too */
	footer .wp-block-group[style*="padding-bottom"] {
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}
}

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

.color-scheme-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.25rem;
	color: currentColor;
	display: flex;
	align-items: center;
	opacity: 0.7;
	transition: opacity 0.2s;
	flex-shrink: 0;
}

.color-scheme-toggle:hover {
	opacity: 1;
}

html[data-color-scheme='dark'] .icon-sun {
	display: block;
}

html[data-color-scheme='dark'] .icon-moon {
	display: none;
}

html:not([data-color-scheme='dark']) .icon-sun {
	display: none;
}

html:not([data-color-scheme='dark']) .icon-moon {
	display: block;
}

/* ============================================
   DARK MODE OVERRIDES
   Fixes for elements that use hardcoded light
   colors and don't adapt to dark mode.
   ============================================ */

/* Fix 1: Header background — ensure the has-base-background-color group
   always inherits the overridden --wp--preset--color--base in dark mode.
   The CSS var is already re-mapped in the token layer above, but some
   WordPress block styles apply a static generated value from theme.json at
   build time.  This rule guarantees the correct dark surface is used. */
html[data-color-scheme='dark'] .wp-block-group.has-base-background-color {
	background-color: var(--wp--preset--color--base) !important;
}

/* Fix 2: heading color — WordPress sometimes outputs .has-heading-color
   from theme.json's heading color (#444444 light value).  Re-map it so
   headings use the dark-mode heading token instead of going gray. */
html[data-color-scheme='dark'] .has-heading-color,
html[data-color-scheme='dark'] .has-heading-color.has-text-color {
	color: var(--wp--preset--color--heading) !important;
}

/* Fix 3: wp:separator gets a light border from core — darken it */
html[data-color-scheme='dark'] .wp-block-separator {
	border-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent) !important;
}

/* Fix 4: media play overlay — white circle on dark backgrounds looks broken */
html[data-color-scheme='dark'] .media-play-overlay {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.25);
}

html[data-color-scheme='dark'] .media-play-overlay--video::after {
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
}

html[data-color-scheme='dark'] .media-play-overlay--audio::before,
html[data-color-scheme='dark'] .media-play-overlay--audio::after,
html[data-color-scheme='dark'] .media-play-overlay--audio .bar-1,
html[data-color-scheme='dark'] .media-play-overlay--audio .bar-2,
html[data-color-scheme='dark'] .media-play-overlay--audio .bar-3 {
	background: rgba(255, 255, 255, 0.85);
}

/* Fix 5: wp-block-post-featured-image backgrounds — WordPress core gives
   these a white background in some themes; override to transparent in dark. */
html[data-color-scheme='dark'] .wp-block-post-featured-image,
html[data-color-scheme='dark'] .wp-block-post-featured-image img {
	background-color: transparent;
}

/* Fix 6: Gravity Forms / WPForms — input backgrounds should use dark surface */
html[data-color-scheme='dark'] .gform_wrapper input[type="text"],
html[data-color-scheme='dark'] .gform_wrapper input[type="email"],
html[data-color-scheme='dark'] .gform_wrapper select,
html[data-color-scheme='dark'] .gform_wrapper textarea,
html[data-color-scheme='dark'] .wpcf7 input[type="text"],
html[data-color-scheme='dark'] .wpcf7 input[type="email"],
html[data-color-scheme='dark'] .wpcf7 select,
html[data-color-scheme='dark'] .wpcf7 textarea {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--accent);
}

/* Fix 7: screen-reader-text focus — hardcoded #fff background */
html[data-color-scheme='dark'] .screen-reader-text:focus {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

/* Fix 8: nav submenu dropdown — background and text in dark mode */
html[data-color-scheme='dark'] .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--accent) !important;
}

html[data-color-scheme='dark'] .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
html[data-color-scheme='dark'] .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--contrast) !important;
}

html[data-color-scheme='dark'] .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
html[data-color-scheme='dark'] .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--surface) !important;
}

/* Fix 9: buttons in dark mode
   --contrast flips to near-white (#FAFAF8), so any button that uses it as a
   background needs dark text instead of --white. */

/* Primary button: near-white bg → dark text */
html[data-color-scheme='dark'] .wp-block-button:not(.is-style-outline):not(.is-style-link) .wp-block-button__link,
html[data-color-scheme='dark'] button[type="submit"],
html[data-color-scheme='dark'] input[type="submit"] {
	color: #0F0F0F !important;
}

html[data-color-scheme='dark'] .wp-block-button:not(.is-style-outline):not(.is-style-link) .wp-block-button__link:hover,
html[data-color-scheme='dark'] button[type="submit"]:hover,
html[data-color-scheme='dark'] input[type="submit"]:hover {
	color: #0F0F0F !important;
}

/* Outline button hover: fills with --contrast (near-white) → dark text */
html[data-color-scheme='dark'] .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: #0F0F0F !important;
}

/* ============================================
   NAV CURRENT-PAGE HIGHLIGHTING
   Inactive: 0.55 opacity. Active: full opacity + font-weight 700.
   No ancestor/parent highlighting — avoids false emphasis on submenu parents.
   ============================================ */

/* All desktop nav items share the same base color — opacity does the dimming.
   theme.json sets navigation-link color to --muted, but --contrast is correct
   since we're dimming via opacity. This also normalizes <a> vs <button> items. */
.wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	opacity: 0.65;
	transition: opacity 0.2s ease;
}

/* Normalize button-rendered nav items (submenu parents) to match link items */
.wp-block-navigation:not(.is-menu-open) button.wp-block-navigation-item__content {
	font-weight: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	opacity: 0.9;
}

/* Active / current page only — full brightness + heavier weight */
.wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation .current-menu-item:not(.current-menu-ancestor):not(.current-menu-parent) > .wp-block-navigation-item__content {
	opacity: 1;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* Default page template — container is centered, children flow left naturally */
.page-content-wrap {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-left: auto;
	margin-right: auto;
}
/* Horizontal padding only at narrower viewports; centering handles breathing room at desktop */
@media (max-width: 1199px) {
	.page-content-wrap {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
}
.page-content-wrap .wp-block-post-content {
	max-width: 760px;
}

/* Hide page title + its spacing when ACF toggle is set */
.hide-page-title .wp-block-post-title {
	display: none;
	margin: 0 !important;
	padding: 0 !important;
}