/**
 * Prospero Theme Main Styles
 *
 * @package Prospero
 * @since 1.0.0
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

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

:root {
	/* Colors will be set dynamically from customizer */
	--color-primary: #007bff;
	--color-secondary: #6c757d;
	--color-tertiary: #28a745;
	--color-text: #333333;
	--color-text-dark: #f7f7f7;
	--color-highlight: #ffc107;
	--color-background: #ffffff;
	--color-background-dark: #2b2a33;
	
	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 3rem;
	--spacing-xl: 4rem;
	
	/* Typography */
	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-family-heading: var(--font-family-base);
	
	/*
	 * Form fields (inputs, textareas, selects)
	 *
	 * Consumed by the shared form-field rules below. Dark-mode overrides
	 * live in dark-mode.css. All values are derived from the Customizer
	 * colors so changing the palette re-themes forms automatically.
	 *
	 * Accessibility targets (European Accessibility Act / WCAG 2.1):
	 *   - Non-text UI boundaries (input border) >= 3:1 vs adjacent colors
	 *     (WCAG 1.4.11). Mixing 55% of --color-text into --color-background
	 *     produces roughly #8F on white (~3.2:1) or #9f on dark (~4:1).
	 *   - Placeholder text (acts as informational text) >= 4.5:1 for WCAG
	 *     AA. 65% text mix gives about 5.7:1 on white.
	 *   - The input fill is slightly tinted against the page background so
	 *     the field is clearly locatable even before the border is parsed.
	 */
	--prospero-input-bg: color-mix(in srgb, var(--color-background) 92%, var(--color-text));
	--prospero-input-border: color-mix(in srgb, var(--color-text) 55%, var(--color-background));
	--prospero-input-border-hover: color-mix(in srgb, var(--color-text) 75%, var(--color-background));
	--prospero-input-border-focus: var(--color-primary);
	--prospero-input-text: var(--color-text);
	--prospero-input-placeholder: color-mix(in srgb, var(--color-text) 65%, var(--color-background));
	--prospero-input-focus-ring: color-mix(in srgb, var(--color-primary) 30%, transparent);
	--prospero-input-radius: 6px;
	--prospero-input-padding-y: 0.625rem;
	--prospero-input-padding-x: 0.875rem;
}

body {
	margin: 0;
	font-family: var(--font-family-base);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-background);
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-heading);
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: var(--spacing-sm);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
	margin-top: 0;
	margin-bottom: var(--spacing-sm);
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover,
a:focus {
	color: var(--color-highlight);
}

/* External link icon */
a[target="_blank"]:not(.no-external-icon)::after,
a[rel~="external"]:not(.no-external-icon)::after {
	content: "\f147";
	font-family: "prospero-icons" !important;
	font-style: normal;
	font-weight: normal;
	margin-left: 0.25em;
	font-size: 0.85em;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Exclude icon from certain elements */
.social-navigation a[target="_blank"]::after,
.btn[target="_blank"]::after,
.button[target="_blank"]::after,
button a[target="_blank"]::after,
.wp-block-button a[target="_blank"]::after,
.custom-logo-link[target="_blank"]::after,
.site-title a[target="_blank"]::after,
.partner-logo a[target="_blank"]::after,
.partner-item a[target="_blank"]::after,
.prospero-team .team-social-link[target="_blank"]::after,
.team-lightbox-social a[target="_blank"]::after {
	content: none;
}

/* ==========================================================================
   Icon Font
   ========================================================================== */

@font-face {
	font-family: "prospero-icons";
	src: url("../fonts/prospero-icons.woff2") format("woff2"),
		url("../fonts/prospero-icons.ttf") format("truetype"),
		url("../fonts/prospero-icons.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.icon,
[class^="icon-"],
[class*=" icon-"] {
	font-family: "prospero-icons" !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Social Icons */
.icon-facebook::before { content: "\f4d0"; }
.icon-instagram::before { content: "\f8a5"; }
.icon-linkedin::before { content: "\f23f"; }
.icon-xing::before { content: "\f3d3"; }
.icon-youtube::before { content: "\f379"; }
.icon-pinterest::before { content: "\f4ad"; }
.icon-whatsapp::before { content: "\f47a"; }
.icon-telegram::before { content: "\f744"; }
.icon-signal::before { content: "\f9a6"; }

/* Contact Icons */
.icon-phone::before { content: "\f16f"; }
.icon-mail::before { content: "\f3bb"; }
.icon-globe::before { content: "\f0fd"; }
.icon-map-pin::before { content: "\f110"; }
.icon-map-pinned::before { content: "\f06d"; }
.icon-at-sign::before { content: "\f219"; }

/* Navigation Icons */
.icon-menu::before { content: "\f07c"; }
.icon-x::before { content: "\f44f"; }
.icon-search::before { content: "\f5ae"; }
.icon-external-link::before { content: "\f147"; }
.icon-link::before { content: "\f416"; }

/* Arrow Icons */
.icon-arrow-up::before { content: "\f129"; }
.icon-arrow-down::before { content: "\f598"; }
.icon-arrow-left::before { content: "\f0fc"; }
.icon-arrow-right::before { content: "\f401"; }
.icon-chevron-up::before { content: "\f46b"; }
.icon-chevron-down::before { content: "\f4fa"; }
.icon-chevron-left::before { content: "\f026"; }
.icon-chevron-right::before { content: "\f41e"; }
.icon-circle-arrow-up::before { content: "\f0f3"; }
.icon-circle-arrow-down::before { content: "\f19e"; }
.icon-circle-arrow-left::before { content: "\f389"; }
.icon-circle-arrow-right::before { content: "\f217"; }
.icon-circle-chevron-up::before { content: "\f2b2"; }
.icon-circle-chevron-down::before { content: "\f4c3"; }
.icon-circle-chevron-left::before { content: "\f060"; }
.icon-circle-chevron-right::before { content: "\f553"; }

/* User Icons */
.icon-user::before { content: "\f53b"; }
.icon-users::before { content: "\f040"; }
.icon-circle-user::before { content: "\f181"; }
.icon-log-out::before { content: "\f3f6"; }

/* Action Icons */
.icon-plus::before { content: "\f317"; }
.icon-minus::before { content: "\f02f"; }
.icon-check::before { content: "\f313"; }
.icon-circle-plus::before { content: "\f1ea"; }
.icon-circle-minus::before { content: "\f0b1"; }
.icon-circle-check::before { content: "\f364"; }
.icon-circle-check-big::before { content: "\f540"; }
.icon-circle-x::before { content: "\f16e"; }
.icon-square-check-big::before { content: "\f3cd"; }
.icon-square-arrow-out-up-right::before { content: "\f2e5"; }

/* Feedback Icons */
.icon-heart::before { content: "\f001"; }
.icon-star::before { content: "\f1e4"; }
.icon-thumbs-up::before { content: "\f264"; }
.icon-thumbs-down::before { content: "\f3d7"; }
.icon-bookmark::before { content: "\f0ae"; }
.icon-flag::before { content: "\f34c"; }

/* Notification Icons */
.icon-bell::before { content: "\f35f"; }
.icon-info::before { content: "\f2e0"; }
.icon-circle-help::before { content: "\f46a"; }
.icon-circle-alert::before { content: "\f4aa"; }
.icon-triangle-alert::before { content: "\f5b1"; }
.icon-shield-check::before { content: "\f05a"; }

/* Content Icons */
.icon-pencil::before { content: "\f18c"; }
.icon-quote::before { content: "\f0cd"; }
.icon-message-circle::before { content: "\f485"; }
.icon-hash::before { content: "\f31c"; }
.icon-paperclip::before { content: "\f275"; }
.icon-lightbulb::before { content: "\f28e"; }
.icon-milestone::before { content: "\f34e"; }

/* File Icons */
.icon-files::before { content: "\f489"; }
.icon-folder-open::before { content: "\f457"; }
.icon-folder-down::before { content: "\f0df"; }
.icon-download::before { content: "\f3b7"; }
.icon-save::before { content: "\f289"; }
.icon-printer::before { content: "\f234"; }

/* Layout Icons */
.icon-layout-grid::before { content: "\f520"; }
.icon-layout-list::before { content: "\f53d"; }
.icon-filter::before { content: "\f10e"; }
.icon-ellipsis::before { content: "\f0f0"; }
.icon-ellipsis-vertical::before { content: "\f4be"; }

/* Tool Icons */
.icon-settings::before { content: "\f3dc"; }
.icon-settings-2::before { content: "\f355"; }
.icon-share::before { content: "\f131"; }
.icon-send::before { content: "\f24c"; }
.icon-shopping-cart::before { content: "\f067"; }
.icon-eye::before { content: "\f15e"; }
.icon-zoom-in::before { content: "\f2b3"; }
.icon-zoom-out::before { content: "\f267"; }
.icon-undo::before { content: "\f117"; }
.icon-rotate-cw::before { content: "\f4c0"; }
.icon-rotate-ccw::before { content: "\f30c"; }
.icon-refresh-cw::before { content: "\f422"; }
.icon-podcast::before { content: "\f34b"; }

/* Theme Icons */
.icon-sun::before { content: "\f1dc"; }
.icon-moon::before { content: "\f023"; }

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
	max-width: var(--content-width, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
	padding-top: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
}

/* ==========================================================================
   Top Bar (optional contact bar above the header)
   ==========================================================================

   Managed via Customizer → Top Bar. Rendered by
   template-parts/top-bar.php when enabled and at least one of the
   phone / email fields is filled. Sits above the site header in normal
   flow — when the sticky header activates, the top bar scrolls off and
   only the header pins to the viewport.
   ========================================================================== */

.site-top-bar {
	/* A subtle band derived from the Customizer background color, similar
	 * to how the footer is darkened. Stays visible in both light and dark
	 * modes (see dark-mode.css for the dark variant). */
	background-color: color-mix(in srgb, var(--color-background) 94%, var(--color-text));
	color: color-mix(in srgb, var(--color-text) 80%, var(--color-background));
	font-size: 0.85rem;
	line-height: 1.4;
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.site-top-bar .top-bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--spacing-sm);
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

.site-top-bar .top-bar-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-top-bar .top-bar-link:hover,
.site-top-bar .top-bar-link:focus {
	color: var(--color-text);
	text-decoration: underline;
}

.site-top-bar .top-bar-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	text-decoration: none;
}

.site-top-bar .top-bar-icon {
	font-size: 1rem;
	line-height: 1;
	flex-shrink: 0;
}

.site-top-bar .top-bar-text {
	display: inline-flex;
	gap: 0.35rem;
}

.site-top-bar .top-bar-prefix {
	color: color-mix(in srgb, var(--color-text) 60%, var(--color-background));
}

/* Mobile: icons only. The textual prefix + value is hidden visually;
 * screen readers still get the contact info from aria-label on the link. */
@media (max-width: 767px) {
	.site-top-bar .top-bar-inner {
		justify-content: center;
		gap: var(--spacing-md);
	}

	.site-top-bar .top-bar-text {
		display: none;
	}

	.site-top-bar .top-bar-icon {
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	background-color: var(--color-background);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: var(--spacing-sm) 0;
	transition: background-color 0.3s ease;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.custom-logo {
	max-height: 60px;
	width: auto;
}

/* Logo light/dark mode switching */
.custom-logo-link.logo-dark {
	display: none;
}

.custom-logo-link.logo-light {
	display: block;
}

.site-title {
	margin: 0;
	font-size: 1.5rem;
}

.site-title a {
	color: var(--color-text);
}

.site-description {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-secondary);
}

/* Sticky Header */
.site-header.sticky-header {
	transition: transform 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.site-header.sticky-header.is-sticky {
	position: fixed;
	/* Offset by the pinned top bar height (0 when no top bar is present). */
	top: var(--prospero-top-bar-height, 0px);
	left: 0;
	right: 0;
	z-index: 1000;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
	padding: calc(var(--spacing-sm) * 0.6) 0;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	/* Track the Customizer background color, with 95% opacity so the
	 * backdrop blur still produces a subtle frosted effect. */
	background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
}

body.dark-mode .site-header.sticky-header.is-sticky {
	background-color: color-mix(in srgb, var(--color-background-dark) 95%, transparent);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/*
 * When the sticky header is active, pin the top bar to the viewport
 * top as well so contact options stay reachable while scrolling. The
 * sticky header sits directly underneath (top: --prospero-top-bar-height).
 * body.padding-top reserves the combined height so page content isn't
 * hidden under the two bars.
 */
body.header-is-stuck .site-top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

body.dark-mode.header-is-stuck .site-top-bar {
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

body.header-is-stuck {
	padding-top: calc(var(--prospero-top-bar-height, 0px) + 90px);
}

.site-header.sticky-header.is-sticky .custom-logo {
	max-height: 50px;
	transition: max-height 0.3s ease;
}

/*
 * Sticky mode, logo-center: the two-row stacking (logo on row 1, menu
 * + actions on row 2) is preserved intentionally - collapsing to a
 * single row would squash long / full-width menus against the logo.
 * Instead we just tighten the row gap in sticky mode so the rows sit
 * visually closer, which is the actual source of wasted space in the
 * fixed header. Horizontal layout is untouched, so any menu length
 * continues to fit. Transition keeps the change smooth.
 */
.site-header.sticky-header.logo-center .header-inner {
	transition: row-gap 0.3s ease, gap 0.3s ease;
}

.site-header.sticky-header.logo-center.is-sticky .header-inner {
	row-gap: var(--spacing-xs);
}

/* ==========================================================================
   Header Layout
   ========================================================================== */

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	flex-shrink: 0;
}

/* Logo Position Variants */
.site-header.logo-left .header-inner {
	flex-direction: row;
}

.site-header.logo-center .header-inner {
	flex-wrap: wrap;
	justify-content: center;
}

.site-header.logo-center .site-branding {
	width: 100%;
	justify-content: center;
	order: 1;
}

.site-header.logo-center .main-navigation {
	order: 2;
}

.site-header.logo-center .header-actions {
	order: 3;
}

.site-header.logo-right .header-inner {
	flex-direction: row-reverse;
}

/* Menu Position Variants (Desktop) */
@media (min-width: 1025px) {
	.site-header.menu-left .main-navigation {
		margin-right: auto;
	}

	.site-header.menu-center .main-navigation {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.site-header.menu-center .header-inner {
		position: relative;
	}

	.site-header.menu-right .main-navigation {
		margin-left: auto;
	}

	/* Logo + Menu center: stack them */
	.site-header.logo-center.menu-center .main-navigation {
		position: static;
		transform: none;
	}
}

/* ==========================================================================
   Desktop Navigation
   ========================================================================== */

.desktop-menu {
	display: none;
}

@media (min-width: 1025px) {
	.desktop-menu {
		display: flex;
		align-items: center;
	}

	.desktop-menu ul {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		gap: var(--spacing-md);
	}

	.desktop-menu li {
		position: relative;
	}

	.desktop-menu a {
		display: block;
		padding: var(--spacing-xs) 0;
		color: var(--color-text);
		font-weight: 500;
		white-space: nowrap;
		text-decoration: none;
	}

	/*
	 * Visible hover / focus feedback for regular menu links. A color
	 * shift alone was too subtle; an underline with a small offset
	 * reads as interactive without shifting the link's layout box.
	 * The CTA button variant resets this below so it keeps its
	 * button-style hover (background change) instead.
	 */
	.desktop-menu a:hover,
	.desktop-menu a:focus {
		color: var(--color-primary);
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}

	/* Desktop dropdown submenus */
	.desktop-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background: var(--color-background);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		min-width: 200px;
		padding: var(--spacing-xs);
		border-radius: 4px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: all 0.2s ease;
		z-index: 1000;
		flex-direction: column;
		gap: 0;
	}

	.desktop-menu li:hover > .sub-menu,
	.desktop-menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.desktop-menu .sub-menu a {
		padding: var(--spacing-xs) var(--spacing-sm);
	}

	.desktop-menu .sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}

	/* Hide mobile toggle on desktop */
	.mobile-menu-toggle {
		display: none;
	}

	/* Always hamburger option */
	.has-hamburger-menu .desktop-menu {
		display: none;
	}

	.has-hamburger-menu .mobile-menu-toggle {
		display: flex;
	}
}

/* ==========================================================================
   Mobile Menu Toggle
   ========================================================================== */

.mobile-menu-toggle {
	display: none; /* Hidden by default, shown on mobile via media query */
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.05);
	border: 2px solid transparent;
	padding: 0.4rem;
	cursor: pointer;
	min-width: 40px;
	min-height: 40px;
	border-radius: 50%;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.mobile-menu-toggle:hover {
	background-color: rgba(0, 0, 0, 0.1);
	border-color: var(--color-primary);
}

.menu-toggle-icon {
	font-size: 1.5rem;
	color: var(--color-text);
	line-height: 1;
}

/* Show menu icon, hide x icon by default */
.mobile-menu-toggle .icon-menu {
	display: block;
}

.mobile-menu-toggle .icon-x {
	display: none;
}

/* When expanded: hide menu icon, show x icon */
.mobile-menu-toggle[aria-expanded="true"] .icon-menu {
	display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .icon-x {
	display: block;
}

/* ==========================================================================
   Mobile Menu Panel (Slide-in)
   ========================================================================== */

.mobile-menu-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 320px;
	height: 100vh;
	height: 100dvh;
	background-color: var(--color-background);
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
	z-index: 10000;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mobile-menu-panel.is-open {
	transform: translateX(0);
}

.mobile-menu-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: var(--spacing-md);
	border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.mobile-menu-close {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	width: 44px;
	height: 44px;
	font-size: 1.75rem;
	cursor: pointer;
	color: var(--color-text);
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.mobile-menu-close:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.mobile-menu-nav {
	flex: 1;
	overflow: hidden;
	position: relative;
}

.mobile-menu-panels {
	height: 100%;
	position: relative;
}

.mobile-menu-panel-content {
	height: 100%;
	overflow-y: auto;
	padding: var(--spacing-md);
}

/* Mobile menu list */
.mobile-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu-list li {
	border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.mobile-menu-list li:last-child {
	border-bottom: none;
}

.mobile-menu-list a {
	display: block;
	padding: var(--spacing-sm) 0;
	color: var(--color-text);
	font-size: 1.0625rem;
	font-weight: 500;
	transition: color 0.2s ease;
}

.mobile-menu-list a:hover {
	color: var(--color-primary);
}

/* Menu item with submenu */
.mobile-menu-list .menu-item-inner {
	display: flex;
	align-items: center;
}

.mobile-menu-list .menu-item-inner a {
	flex: 1;
}

.submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	width: 44px;
	height: 44px;
	cursor: pointer;
	color: var(--color-text);
	font-size: 1.5rem;
	transition: color 0.2s ease;
}

.submenu-toggle:hover {
	color: var(--color-primary);
}

/* Submenu panels */
.submenu-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-background);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	padding: var(--spacing-md);
	z-index: 1;
}

.submenu-panel.is-open {
	transform: translateX(0);
}

.submenu-back {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	background: none;
	border: none;
	padding: var(--spacing-sm) 0;
	margin-bottom: var(--spacing-sm);
	cursor: pointer;
	color: var(--color-primary);
	font-size: 1rem;
	font-weight: 500;
}

.submenu-back:hover {
	text-decoration: underline;
}

.submenu-back-icon {
	font-size: 1.25rem;
}

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

.submenu-panel .sub-menu li {
	border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.submenu-panel .sub-menu li:last-child {
	border-bottom: none;
}

.submenu-panel .sub-menu a {
	display: block;
	padding: var(--spacing-sm) 0;
	color: var(--color-text);
	font-size: 1rem;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Desktop: hide mobile elements */
@media (min-width: 1025px) {
	.mobile-menu-panel,
	.mobile-menu-overlay {
		display: none;
	}

	/* Exception: always hamburger mode */
	.has-hamburger-menu .mobile-menu-panel,
	.has-hamburger-menu .mobile-menu-overlay {
		display: block;
	}
}

/* Mobile header adjustments */
@media (max-width: 1024px) {
	/* Hide desktop menu on mobile */
	.desktop-menu {
		display: none !important;
	}

	/* Show mobile menu toggle */
	.mobile-menu-toggle {
		display: flex !important;
	}

	.site-header .header-inner {
		flex-wrap: nowrap;
		gap: var(--spacing-sm);
	}

	/* Prevent header overflow */
	.site-branding {
		flex: 1;
		min-width: 0;
		overflow: hidden;
	}

	.custom-logo-link {
		display: block;
		max-width: 100%;
	}

	.custom-logo {
		max-height: 50px;
		max-width: 100%;
		height: auto;
		width: auto;
	}

	/* Reset logo center on mobile */
	.site-header.logo-center .site-branding {
		width: auto;
		order: 0;
		justify-content: flex-start;
	}

	.site-header.logo-center .header-actions {
		order: 0;
	}

	.site-header.logo-right .header-inner {
		flex-direction: row;
	}

	.site-title-wrap {
		display: none;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/*
 * Button base - shared structural styles. Visual properties
 * (background, text, border, radius, font transform) come from
 * CSS custom properties populated by prospero_dynamic_css() from
 * the Customizer. Defaults mirror the PHP defaults so the buttons
 * still render if the dynamic CSS is not loaded.
 */
.button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.submit-button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	background-color: var(--prospero-btn-primary-bg, var(--color-primary));
	color: var(--prospero-btn-primary-text, #fff);
	border: 2px solid var(--prospero-btn-primary-border, var(--color-primary));
	border-radius: var(--prospero-btn-primary-radius, 4px);
	text-transform: var(--prospero-btn-primary-text-transform, none);
	letter-spacing: var(--prospero-btn-primary-letter-spacing, normal);
}

.button:hover,
.button:focus,
.button-primary:hover,
.button-primary:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button.is-style-primary .wp-block-button__link:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
.submit-button:hover,
.submit-button:focus {
	background-color: var(--prospero-btn-primary-hover-bg, color-mix(in srgb, var(--color-primary) 80%, black));
	color: var(--prospero-btn-primary-hover-text, var(--prospero-btn-primary-text, #fff));
}

.button-secondary,
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--prospero-btn-secondary-bg, var(--color-secondary));
	color: var(--prospero-btn-secondary-text, #fff);
	border: 2px solid var(--prospero-btn-secondary-border, var(--color-secondary));
	border-radius: var(--prospero-btn-secondary-radius, 4px);
	text-transform: var(--prospero-btn-secondary-text-transform, none);
	letter-spacing: var(--prospero-btn-secondary-letter-spacing, normal);
	/* Secondary buttons are slightly smaller than primary. */
	padding: 0.625rem 1.25rem;
	font-size: 0.9375rem;
}

.button-secondary:hover,
.button-secondary:focus,
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus {
	background-color: var(--prospero-btn-secondary-hover-bg, color-mix(in srgb, var(--color-secondary) 80%, black));
	color: var(--prospero-btn-secondary-hover-text, var(--prospero-btn-secondary-text, #fff));
}

.button-tertiary,
.wp-block-button.is-style-tertiary .wp-block-button__link {
	background-color: var(--prospero-btn-tertiary-bg, var(--color-tertiary));
	color: var(--prospero-btn-tertiary-text, #fff);
	border: 2px solid var(--prospero-btn-tertiary-border, var(--color-tertiary));
	border-radius: var(--prospero-btn-tertiary-radius, 4px);
	text-transform: var(--prospero-btn-tertiary-text-transform, none);
	letter-spacing: var(--prospero-btn-tertiary-letter-spacing, normal);
	/* Tertiary buttons are smaller than secondary. */
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.button-tertiary:hover,
.button-tertiary:focus,
.wp-block-button.is-style-tertiary .wp-block-button__link:hover,
.wp-block-button.is-style-tertiary .wp-block-button__link:focus {
	background-color: var(--prospero-btn-tertiary-hover-bg, color-mix(in srgb, var(--color-tertiary) 80%, black));
	color: var(--prospero-btn-tertiary-hover-text, var(--prospero-btn-tertiary-text, #fff));
}

/* ==========================================================================
   Form Fields
   ==========================================================================

   Modern, sleek form controls that respect Customizer colors and dark
   mode via --prospero-input-* variables (see :root for defaults and
   dark-mode.css for dark-mode overrides). `input[type="submit"]`,
   `button[type="submit"]`, `input[type="file"]` and `input[type="checkbox"|"radio"]`
   are intentionally excluded so they keep their own styling.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: var(--prospero-input-padding-y) var(--prospero-input-padding-x);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--prospero-input-text);
	background-color: var(--prospero-input-bg);
	/* 1.5px gives a more perceptible outline than 1px without looking heavy. */
	border: 1.5px solid var(--prospero-input-border);
	border-radius: var(--prospero-input-radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
input[type="time"]:hover,
textarea:hover,
select:hover {
	border-color: var(--prospero-input-border-hover);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--prospero-input-border-focus);
	box-shadow: 0 0 0 3px var(--prospero-input-focus-ring);
}

input::placeholder,
textarea::placeholder {
	color: var(--prospero-input-placeholder);
	opacity: 1; /* Firefox defaults placeholders to 56% opacity; normalise it */
}

input:disabled,
textarea:disabled,
select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Select - custom chevron indicator (neutral gray works in both modes) */
select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 12px 8px;
}

/* Textarea */
textarea {
	min-height: 7.5rem;
	resize: vertical;
}

/* Safari autofill override so the browser's yellow fill doesn't replace
 * the themed background in light mode. Uses a big inset shadow trick. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--prospero-input-bg) inset;
	-webkit-text-fill-color: var(--prospero-input-text);
	transition: background-color 5000s ease-in-out 0s;
}

/* Labels - subtle emphasis, aligned with form fields */
.form-group label,
.form-field label,
form p > label {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
	font-weight: 500;
}

/* Screen-reader-only labels should not force layout changes */
.screen-reader-text label,
label.screen-reader-text {
	margin: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background-color: color-mix(in srgb, var(--color-background) 92%, black);
	color: var(--color-text);
	padding: var(--spacing-lg) 0 var(--spacing-md);
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--spacing-md);
}

.social-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--spacing-md);
}

.footer-navigation a,
.social-navigation a {
	color: inherit;
}

/* Social Menu Icons */
.social-navigation ul {
	justify-content: center;
}

.social-navigation a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.08);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.social-navigation a:hover {
	background-color: rgba(0, 0, 0, 0.15);
	transform: scale(1.1);
}

.social-navigation a::before {
	font-family: "prospero-icons" !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 1.25rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Social platform icons based on URL */
.social-navigation a[href*="facebook.com"]::before { content: "\f4d0"; }
.social-navigation a[href*="instagram.com"]::before { content: "\f8a5"; }
.social-navigation a[href*="linkedin.com"]::before { content: "\f23f"; }
.social-navigation a[href*="xing.com"]::before { content: "\f3d3"; }
.social-navigation a[href*="youtube.com"]::before { content: "\f379"; }
.social-navigation a[href*="pinterest.com"]::before { content: "\f4ad"; }
.social-navigation a[href*="whatsapp.com"]::before,
.social-navigation a[href*="wa.me"]::before { content: "\f47a"; }
.social-navigation a[href*="t.me"]::before,
.social-navigation a[href*="telegram."]::before { content: "\f744"; }
.social-navigation a[href*="signal.org"]::before { content: "\f9a6"; }
.social-navigation a[href*="twitter.com"]::before,
.social-navigation a[href*="x.com"]::before { content: "\f3d3"; }
.social-navigation a[href*="tiktok.com"]::before { content: "\f379"; }
.social-navigation a[href*="vimeo.com"]::before { content: "\f379"; }
.social-navigation a[href*="threads.net"]::before { content: "\f219"; }
.social-navigation a[href*="mastodon"]::before { content: "\f219"; }
.social-navigation a[href*="bluesky"]::before,
.social-navigation a[href*="bsky.app"]::before { content: "\f219"; }
.social-navigation a[href^="mailto:"]::before { content: "\f3bb"; }
.social-navigation a[href^="tel:"]::before { content: "\f16f"; }

/* Fallback icon for unknown platforms */
.social-navigation a:not([href*="facebook"]):not([href*="instagram"]):not([href*="linkedin"]):not([href*="xing"]):not([href*="youtube"]):not([href*="pinterest"]):not([href*="whatsapp"]):not([href*="wa.me"]):not([href*="t.me"]):not([href*="telegram"]):not([href*="signal"]):not([href*="twitter"]):not([href*="x.com"]):not([href*="tiktok"]):not([href*="vimeo"]):not([href*="threads"]):not([href*="mastodon"]):not([href*="bluesky"]):not([href*="bsky.app"]):not([href^="mailto:"]):not([href^="tel:"])::before {
	content: "\f416";
}

.site-info {
	text-align: center;
	font-size: 0.875rem;
	opacity: 0.8;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 2.5rem;
	z-index: 999999999;
	text-decoration: underline;
}

.skip-link:focus {
	background-color: var(--color-background);
	color: var(--color-text);
	left: 6px;
	padding: 15px 23px 14px;
	text-decoration: none;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	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-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Messages & Alerts
   ========================================================================== */

.message {
	padding: var(--spacing-sm) var(--spacing-md);
	margin-bottom: var(--spacing-md);
	border-radius: 4px;
	border-left: 4px solid transparent;
}

.message.success {
	background-color: #d4edda;
	color: #155724;
	border-left-color: #28a745;
}

.message.error {
	background-color: #f8d7da;
	color: #721c24;
	border-left-color: #dc3545;
}

.message p:last-child {
	margin-bottom: 0;
}

/* Dark mode message styles */
body.dark-mode .message.success {
	background-color: rgba(40, 167, 69, 0.2);
	color: #8ae89f;
}

body.dark-mode .message.error {
	background-color: rgba(220, 53, 69, 0.2);
	color: #f5a6ae;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

/* ==========================================================================
   Logged In Navigation
   ========================================================================== */

.logged-in-navigation {
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.logged-in-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm) var(--spacing-md);
	list-style: none;
	padding: 0;
	margin: 0;
}

.logged-in-navigation a {
	color: var(--color-text);
	text-decoration: none;
	padding: var(--spacing-xs) 0;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.logged-in-navigation a:hover,
.logged-in-navigation .current-menu-item a {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

.logged-in-navigation .menu-item-logout a {
	color: var(--color-error, #dc3545);
}

.logged-in-navigation .menu-item-logout a:hover {
	border-bottom-color: var(--color-error, #dc3545);
}

/* Account Navigation (sidebar style for My Account page) */
.account-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.account-navigation li {
	margin-bottom: var(--spacing-xs);
}

.account-navigation a {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	color: var(--color-text);
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.account-navigation a:hover,
.account-navigation .current-menu-item a {
	background-color: var(--color-primary);
	color: #fff;
}

.account-navigation .menu-item-logout a {
	color: var(--color-error, #dc3545);
}

.account-navigation .menu-item-logout a:hover {
	background-color: var(--color-error, #dc3545);
	color: #fff;
}

/* ==========================================================================
   Avatar Section
   ========================================================================== */

.avatar-section {
	margin-bottom: var(--spacing-lg);
}

.avatar-section h3 {
	margin-bottom: var(--spacing-md);
}

.avatar-preview {
	margin-bottom: var(--spacing-md);
}

.avatar-preview img {
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--color-border, #e0e0e0);
}

.avatar-form .form-group {
	margin-bottom: var(--spacing-sm);
}

.avatar-form input[type="file"] {
	padding: var(--spacing-sm);
	border: 2px dashed var(--color-border, #e0e0e0);
	border-radius: 4px;
	background: var(--color-background);
	width: 100%;
	cursor: pointer;
}

.avatar-form input[type="file"]:hover {
	border-color: var(--color-primary);
}

.avatar-actions {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.section-divider {
	border: none;
	border-top: 1px solid var(--color-border, #e0e0e0);
	margin: var(--spacing-lg) 0;
}

/* User account dropdown in main menu */
.menu-item-user-account {
	position: relative;
}

.menu-item-user-account > .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--color-background);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	min-width: 150px;
	padding: var(--spacing-xs);
	border-radius: 4px;
	z-index: 1000;
	list-style: none;
}

.menu-item-user-account:hover > .sub-menu,
.menu-item-user-account:focus-within > .sub-menu {
	display: block;
}

.menu-item-user-account > .sub-menu a {
	display: block;
	padding: var(--spacing-xs) var(--spacing-sm);
	white-space: nowrap;
}

/*
 * Menu item icons (login / logout / account / user dropdown trigger)
 *
 * Use inline-flex on the anchor so the icon and text are properly
 * baseline-centered by the flex container instead of relying on
 * vertical-align which aligns to text baseline and makes the icon
 * appear to sit too low. Gap replaces the old margin-right trick.
 * Icons are slightly larger than the text they sit next to so they
 * read as glyphs rather than afterthoughts.
 */
.menu-item-login > a,
.menu-item-logout > a,
.menu-item-account > a,
.menu-item-user-account > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.menu-item-login > a [class^="icon-"],
.menu-item-logout > a [class^="icon-"],
.menu-item-account > a [class^="icon-"],
.menu-item-user-account > a [class^="icon-"] {
	font-size: 1.15em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ==========================================================================
   Menu Item CTA Button
   ==========================================================================

   Rendered when a menu item has the `menu-item-cta` class. The class is
   added automatically by inc/nav-menu.php when the "Display as CTA
   button" checkbox on a menu item is enabled (Appearance → Menus).

   Visual styling is delegated to a dedicated --prospero-btn-menu-cta-*
   variable group, distinct from primary/secondary/tertiary so it can
   be styled differently from content buttons (Customizer → Button
   Styles → Menu CTA Button).
   ========================================================================== */

/*
 * Padding is split between desktop and mobile so the CTA's TOTAL outer
 * height (padding + border) equals the regular menu link height:
 *
 *   Desktop menu link: 0.5rem top + text + 0.5rem bottom
 *   Desktop CTA:       calc(0.5rem - 2px) + 2px border + text + 2px border + calc(0.5rem - 2px)
 *
 *   Mobile menu link:  1rem top + text + 1rem bottom
 *   Mobile CTA:        calc(1rem - 2px) + 2px border + text + 2px border + calc(1rem - 2px)
 *
 * Line-height is inherited (1.6), so the text box is identical in both,
 * which lets the CTA sit perfectly in line with the rest of the menu.
 */
.desktop-menu li.menu-item-cta > a,
.mobile-menu-list li.menu-item-cta > a,
.mobile-menu-list li.menu-item-cta .menu-item-inner > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background-color: var(--prospero-btn-menu-cta-bg, var(--color-primary));
	color: var(--prospero-btn-menu-cta-text, #fff);
	border: 2px solid var(--prospero-btn-menu-cta-border, var(--color-primary));
	border-radius: var(--prospero-btn-menu-cta-radius, 4px);
	font-weight: 600;
	text-decoration: none;
	text-transform: var(--prospero-btn-menu-cta-text-transform, none);
	letter-spacing: var(--prospero-btn-menu-cta-letter-spacing, normal);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.desktop-menu li.menu-item-cta > a {
	padding: calc(var(--spacing-xs) - 2px) var(--spacing-sm);
}

.mobile-menu-list li.menu-item-cta > a,
.mobile-menu-list li.menu-item-cta .menu-item-inner > a {
	padding: calc(var(--spacing-sm) - 2px) var(--spacing-sm);
}

.desktop-menu li.menu-item-cta > a:hover,
.desktop-menu li.menu-item-cta > a:focus,
.mobile-menu-list li.menu-item-cta > a:hover,
.mobile-menu-list li.menu-item-cta > a:focus,
.mobile-menu-list li.menu-item-cta .menu-item-inner > a:hover,
.mobile-menu-list li.menu-item-cta .menu-item-inner > a:focus {
	background-color: var(--prospero-btn-menu-cta-hover-bg, color-mix(in srgb, var(--color-primary) 80%, black));
	color: var(--prospero-btn-menu-cta-hover-text, var(--prospero-btn-menu-cta-text, #fff));
	border-color: var(--prospero-btn-menu-cta-hover-bg, var(--prospero-btn-menu-cta-border, var(--color-primary)));
	/* Cancel the underline hover applied to regular menu links. */
	text-decoration: none;
}

/* On mobile the list row has its own bottom border - neutralise it so
 * the CTA reads as a self-contained button within the list. */
.mobile-menu-list li.menu-item-cta {
	border-bottom: none;
}

/* ==========================================================================
   FAQ Accordion
   ==========================================================================

   Styles used by archive-faq.php, taxonomy-faq_category.php,
   single-faq.php and the FAQ list block (when rendered with the
   accordion option). Expand/collapse behavior is handled by
   assets/js/faq-accordion.js via aria-expanded + the `hidden` attr
   on .faq-answer, so the closed items are also hidden from screen
   readers. All colors derive from the Customizer variables so the
   accordion tracks light / dark mode automatically.
   ========================================================================== */

.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	margin: 0 0 var(--spacing-lg);
}

.faq-accordion-item {
	border: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, var(--color-background) 96%, var(--color-text));
	overflow: hidden;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

body.dark-mode .faq-accordion-item {
	border-color: color-mix(in srgb, var(--color-text-dark) 15%, transparent);
	background: color-mix(in srgb, var(--color-background-dark) 88%, var(--color-text-dark));
}

.faq-accordion-item:hover,
.faq-accordion-item:focus-within {
	border-color: color-mix(in srgb, var(--color-text) 35%, transparent);
}

body.dark-mode .faq-accordion-item:hover,
body.dark-mode .faq-accordion-item:focus-within {
	border-color: color-mix(in srgb, var(--color-text-dark) 35%, transparent);
}

.faq-accordion-item .faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	width: 100%;
	padding: var(--spacing-sm);
	background: transparent;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 500;
	text-align: left;
	line-height: 1.4;
	cursor: pointer;
	transition: color 0.2s ease;
}

.faq-accordion-item .faq-question:hover,
.faq-accordion-item .faq-question:focus {
	color: var(--color-primary);
}

.faq-accordion-item .faq-question:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

.faq-accordion-item .faq-question-text {
	flex: 1;
	min-width: 0;
}

.faq-accordion-item .faq-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.25rem;
	line-height: 1;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--color-text) 10%, transparent);
	color: inherit;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body.dark-mode .faq-accordion-item .faq-toggle {
	background-color: color-mix(in srgb, var(--color-text-dark) 12%, transparent);
}

.faq-accordion-item .faq-question[aria-expanded="true"] .faq-toggle {
	background-color: var(--color-primary);
	color: #fff;
}

.faq-accordion-item .faq-answer {
	padding: 0 var(--spacing-md) var(--spacing-md);
	line-height: 1.7;
}

.faq-accordion-item .faq-answer > :first-child {
	margin-top: 0;
}

.faq-accordion-item .faq-answer > :last-child {
	margin-bottom: 0;
}

/* Category group headings inside the FAQ list (archive + block when
 * no specific category is selected). Sits above the per-group
 * accordion. The :first-child rule means the first group has no
 * extra top margin; later groups get comfortable breathing room. */
.prospero-faq-list .faq-group-title {
	margin: var(--spacing-lg) 0 var(--spacing-sm);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-text);
}

.prospero-faq-list > .faq-group-title:first-child {
	margin-top: 0;
}

body.dark-mode .prospero-faq-list .faq-group-title {
	color: var(--color-text-dark);
}

/* Archive / taxonomy / single layout niceties */
.faq-archive-template .page-header,
.single-faq .page-header {
	margin-bottom: var(--spacing-lg);
}

.faq-archive-link {
	margin: var(--spacing-sm) 0 0;
	font-size: 0.9rem;
}

.faq-archive-link a {
	color: color-mix(in srgb, var(--color-text) 70%, transparent);
	text-decoration: none;
}

.faq-archive-link a:hover,
.faq-archive-link a:focus {
	color: var(--color-text);
	text-decoration: underline;
}

body.dark-mode .faq-archive-link a {
	color: color-mix(in srgb, var(--color-text-dark) 70%, transparent);
}

body.dark-mode .faq-archive-link a:hover,
body.dark-mode .faq-archive-link a:focus {
	color: var(--color-text-dark);
}

.single-faq .faq-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-xs);
}

.single-faq .faq-category {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.single-faq .faq-category:hover,
.single-faq .faq-category:focus {
	color: var(--color-text);
	text-decoration: underline;
}

body.dark-mode .single-faq .faq-category {
	color: color-mix(in srgb, var(--color-text-dark) 70%, transparent);
}

body.dark-mode .single-faq .faq-category:hover,
body.dark-mode .single-faq .faq-category:focus {
	color: var(--color-text-dark);
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.error-404-template {
	padding: var(--spacing-xl) 0;
}

.error-404-content {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

.error-code {
	display: block;
	font-size: 8rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-primary);
	opacity: 0.3;
	margin-bottom: var(--spacing-sm);
}

.error-404-content .page-title {
	margin-bottom: var(--spacing-md);
}

.error-message {
	font-size: 1.125rem;
	color: var(--color-text);
	opacity: 0.8;
	margin-bottom: var(--spacing-lg);
}

.error-search {
	margin-bottom: var(--spacing-lg);
}

.error-search h2 {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-sm);
}

.error-suggestions {
	margin-bottom: var(--spacing-lg);
}

.error-suggestions h2 {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-sm);
}

.suggestions-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-sm) var(--spacing-md);
}

.suggestions-list a {
	color: var(--color-primary);
	text-decoration: none;
}

.suggestions-list a:hover {
	text-decoration: underline;
}

.error-back {
	margin-top: var(--spacing-lg);
}

/* ==========================================================================
   Search Results
   ========================================================================== */

.search-results-template {
	padding: var(--spacing-lg) 0;
}

.search-results-template .page-header {
	margin-bottom: var(--spacing-lg);
}

.search-results-template .page-title span {
	color: var(--color-primary);
}

.search-form-header {
	max-width: 500px;
	margin-top: var(--spacing-md);
}

.results-count {
	color: var(--color-text);
	opacity: 0.7;
	margin-bottom: var(--spacing-md);
}

.search-results-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.search-result-item {
	display: flex;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	background: var(--color-background);
	border: 1px solid var(--color-border, #e0e0e0);
	border-radius: 8px;
	transition: box-shadow 0.2s ease;
}

.search-result-item:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.result-thumbnail {
	flex-shrink: 0;
	width: 100px;
}

.result-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	object-fit: cover;
}

.result-content {
	flex: 1;
	min-width: 0;
}

.result-type {
	display: inline-block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	margin-bottom: var(--spacing-xs);
}

.result-title {
	font-size: 1.25rem;
	margin: 0 0 var(--spacing-xs);
}

.result-title a {
	color: var(--color-text);
	text-decoration: none;
}

.result-title a:hover {
	color: var(--color-primary);
}

.result-excerpt {
	font-size: 0.9375rem;
	color: var(--color-text);
	opacity: 0.8;
	margin-bottom: var(--spacing-sm);
}

.result-excerpt p {
	margin: 0;
}

.result-meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	font-size: 0.875rem;
}

.result-date {
	color: var(--color-text);
	opacity: 0.6;
}

.result-link {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 500;
}

.result-link:hover {
	text-decoration: underline;
}

.no-results {
	text-align: center;
	max-width: 500px;
	margin: 0 auto;
	padding: var(--spacing-lg) 0;
}

.no-results h2 {
	margin-bottom: var(--spacing-sm);
}

.search-suggestions {
	text-align: left;
	background: var(--color-background);
	border: 1px solid var(--color-border, #e0e0e0);
	border-radius: 8px;
	padding: var(--spacing-md);
	margin: var(--spacing-lg) 0;
}

.search-suggestions h3 {
	font-size: 1rem;
	margin-bottom: var(--spacing-sm);
}

.search-suggestions ul {
	margin: 0;
	padding-left: var(--spacing-md);
}

.search-suggestions li {
	margin-bottom: var(--spacing-xs);
}

/* Search form styling - inherits field styling from the global form rules. */
.search-form {
	display: flex;
	gap: var(--spacing-sm);
	align-items: stretch;
}

.search-form label {
	flex: 1;
}

.search-form .search-submit {
	flex-shrink: 0;
}

/* ==========================================================================
   Header Search
   ========================================================================== */

.header-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.05);
	border: 2px solid transparent;
	padding: 0.4rem;
	cursor: pointer;
	font-size: 1.125rem;
	color: var(--color-text);
	min-width: 40px;
	min-height: 40px;
	border-radius: 50%;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.header-search-toggle:hover {
	background-color: rgba(0, 0, 0, 0.1);
	border-color: var(--color-primary);
}

.header-search-toggle:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/*
 * Search Overlay
 *
 * Background follows the Customizer background color (with 98% opacity
 * so the blurred page behind it is still subtly visible).
 */
.search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: color-mix(in srgb, var(--color-background) 98%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.search-overlay-inner {
	width: 100%;
	max-width: 700px;
	padding: var(--spacing-lg);
	position: relative;
}

.search-overlay-close {
	position: absolute;
	top: 0;
	right: 0;
	background: none;
	border: none;
	color: var(--color-text);
	font-size: 2rem;
	cursor: pointer;
	padding: 0.5rem;
	line-height: 1;
	transition: opacity 0.2s ease;
}

.search-overlay-close:hover {
	opacity: 0.7;
}

.search-overlay-close:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.search-overlay-content {
	margin-top: var(--spacing-lg);
}

.search-overlay .search-form {
	flex-direction: column;
	gap: var(--spacing-md);
}

.search-overlay .search-form label {
	width: 100%;
}

/*
 * Search overlay field - hero-size variant. Overrides the global input
 * rules with a borderless underline style, but still pulls colors from
 * the same --prospero-input-* variable system so it stays theme-aware.
 */
.search-overlay .search-field {
	padding: var(--spacing-md) var(--spacing-lg);
	font-size: 1.5rem;
	border: none;
	border-bottom: 2px solid var(--prospero-input-border);
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.search-overlay .search-field:hover {
	border-bottom-color: var(--prospero-input-border-hover);
}

.search-overlay .search-field:focus {
	border-color: transparent;
	border-bottom-color: var(--prospero-input-border-focus);
	box-shadow: none;
}

.search-overlay .search-submit {
	align-self: flex-start;
	padding: var(--spacing-sm) var(--spacing-lg);
	font-size: 1rem;
}

/* ==========================================================================
   Back to Top Button
   ========================================================================== */

.back-to-top {
	position: fixed;
	bottom: var(--spacing-lg);
	right: var(--spacing-lg);
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	z-index: 999;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.back-to-top:hover {
	background-color: color-mix(in srgb, var(--color-primary) 80%, black);
	transform: translateY(-2px);
}

.back-to-top:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.back-to-top-icon {
	font-size: 1.5rem;
	line-height: 1;
}

/* ==========================================================================
   Projects Template
   ========================================================================== */

.projects-template .page-header {
	margin-bottom: var(--spacing-lg);
}

.projects-template .page-title {
	margin-bottom: var(--spacing-sm);
}

.projects-template .page-description {
	max-width: 800px;
	margin-bottom: var(--spacing-lg);
}

/*
 * Taxonomy / projects filter buttons
 *
 * Subtle by default (text color + soft border). Primary color is only
 * used for the active/current filter so it doesn't compete with the
 * actual primary CTA buttons on the page.
 */
.projects-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-lg);
}

.filter-button {
	padding: var(--spacing-xs) var(--spacing-sm);
	border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
	background: transparent;
	color: color-mix(in srgb, var(--color-text) 75%, transparent);
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 500;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.filter-button:hover,
.filter-button:focus {
	color: var(--color-text);
	border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
	background: transparent;
}

.filter-button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.filter-button.active {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: transparent;
}

body.dark-mode .filter-button {
	border-color: color-mix(in srgb, var(--color-text-dark) 25%, transparent);
	color: color-mix(in srgb, var(--color-text-dark) 75%, transparent);
}

body.dark-mode .filter-button:hover,
body.dark-mode .filter-button:focus {
	color: var(--color-text-dark);
	border-color: color-mix(in srgb, var(--color-text-dark) 45%, transparent);
	background: transparent;
}

body.dark-mode .filter-button.active {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: transparent;
}

/* Projects Grid */
.projects-grid {
	display: grid;
	gap: var(--spacing-lg);
}

.projects-grid[data-columns="1"] { grid-template-columns: 1fr; }
.projects-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.projects-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.projects-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

/* Project Card Styles */
.projects-grid .project-item {
	background: rgba(0, 0, 0, 0.02);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .projects-grid .project-item {
	background: rgba(255, 255, 255, 0.05);
}

.projects-grid .project-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.dark-mode .projects-grid .project-item:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.projects-grid .project-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.projects-grid .project-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--color-background);
}

body.dark-mode .projects-grid .project-image {
	background: var(--color-background-dark);
}

.projects-grid .project-image a {
	display: block;
	height: 100%;
}

.projects-grid .project-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.projects-grid .project-image a:hover .project-thumbnail {
	transform: scale(1.05);
}

.projects-grid .project-content {
	padding: var(--spacing-md);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.projects-grid .project-title {
	margin: 0 0 var(--spacing-xs);
	font-size: 1.25rem;
}

.projects-grid .project-title a {
	color: var(--color-text);
	text-decoration: none;
	transition: color 0.3s ease;
}

body.dark-mode .projects-grid .project-title a {
	color: var(--color-text-dark);
}

.projects-grid .project-title a:hover {
	color: var(--color-primary);
}

.projects-grid .project-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-sm);
}

.projects-grid .project-tag {
	font-size: 0.75rem;
	padding: 2px 8px;
	background: var(--color-primary);
	color: #fff;
	border-radius: 3px;
}

.projects-grid .project-excerpt {
	flex: 1;
	margin-bottom: var(--spacing-sm);
	color: var(--color-secondary);
	font-size: 0.9rem;
	line-height: 1.5;
}

body.dark-mode .projects-grid .project-excerpt {
	color: rgba(255, 255, 255, 0.7);
}

.projects-grid .project-link {
	margin-top: auto;
}

/* Loading State */
.projects-loading {
	text-align: center;
	padding: var(--spacing-lg);
	color: var(--color-secondary);
}

.loading-spinner {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

body.dark-mode .loading-spinner {
	border-color: rgba(255, 255, 255, 0.1);
	border-top-color: var(--color-primary);
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* No Projects Message */
.no-projects {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--spacing-xl);
	color: var(--color-secondary);
}

/* ==========================================================================
   Single Project Template
   ========================================================================== */

.single-project .project-header {
	padding: var(--spacing-lg) 0;
	text-align: center;
}

.single-project .project-categories {
	margin-bottom: var(--spacing-sm);
}

.single-project .project-category {
	display: inline-block;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	margin: 0 var(--spacing-xs);
}

.single-project .project-category:hover {
	color: var(--color-highlight);
}

.single-project .project-title {
	font-size: 2.5rem;
	margin-bottom: var(--spacing-sm);
}

.single-project .project-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-xs);
}

.single-project .project-tag {
	font-size: 0.75rem;
	padding: 4px 12px;
	background: var(--color-secondary);
	color: #fff;
	border-radius: 3px;
}

.single-project .project-featured-image {
	margin-bottom: var(--spacing-lg);
}

.single-project .project-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.single-project .project-content-wrapper {
	padding: var(--spacing-lg) 0;
}

.single-project .project-content {
	max-width: 800px;
	margin: 0 auto var(--spacing-lg);
	font-size: 1.1rem;
	line-height: 1.8;
}

.single-project .project-website {
	text-align: center;
	margin-top: var(--spacing-lg);
}

/* Project Gallery */
.single-project .project-gallery-section {
	padding: var(--spacing-xl) 0;
	background: rgba(0, 0, 0, 0.02);
}

body.dark-mode .single-project .project-gallery-section {
	background: rgba(255, 255, 255, 0.02);
}

.single-project .section-title {
	text-align: center;
	margin-bottom: var(--spacing-lg);
}

.single-project .project-gallery {
	column-count: 3;
	column-gap: var(--spacing-md);
}

.single-project .gallery-item {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: var(--spacing-md);
	break-inside: avoid;
}

.single-project .gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.single-project .gallery-item:hover img {
	transform: scale(1.05);
}

/* Project Testimonial */
.single-project .project-testimonial-section {
	padding: var(--spacing-xl) 0;
}

.single-project .project-testimonial {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	gap: var(--spacing-lg);
	align-items: flex-start;
	padding: var(--spacing-lg);
	background: rgba(0, 0, 0, 0.02);
	border-radius: 8px;
}

body.dark-mode .single-project .project-testimonial {
	background: rgba(255, 255, 255, 0.05);
}

.single-project .project-testimonial .testimonial-image {
	flex-shrink: 0;
}

.single-project .project-testimonial .testimonial-thumbnail {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.single-project .project-testimonial .testimonial-text {
	font-size: 1.1rem;
	font-style: italic;
	line-height: 1.6;
	margin: 0 0 var(--spacing-sm);
}

.single-project .project-testimonial .testimonial-author {
	display: block;
	font-weight: 600;
	font-style: normal;
	color: var(--color-primary);
}

/* ==========================================================================
   Blog Template Layouts
   ========================================================================== */

.blog-template .blog-page-intro {
	max-width: 800px;
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	color: var(--color-secondary);
	line-height: 1.7;
}

body.dark-mode .blog-template .blog-page-intro {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.blog-template .blog-page-intro p:last-child {
	margin-bottom: 0;
}

.blog-template .page-header {
	margin-bottom: var(--spacing-lg);
}

.blog-template .page-title {
	margin-bottom: var(--spacing-sm);
}

.blog-template .page-description {
	max-width: 700px;
}

/* Blog Category Filter
 * Inherits the subtle styling from the shared .filter-button rules above.
 * Only layout-level overrides live here. */
.blog-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .blog-category-filter {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.blog-category-filter .filter-button {
	padding: 8px 16px;
	border-radius: var(--border-radius, 4px);
}

/* Blog Posts Loading State */
.blog-posts.loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* Blog Pagination Container */
.blog-pagination {
	margin-top: var(--spacing-xl);
}

.blog-pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--border-radius, 4px);
	text-decoration: none;
	color: var(--color-text);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.dark-mode .blog-pagination .page-numbers {
	border-color: rgba(255, 255, 255, 0.2);
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers:focus {
	background: rgba(0, 0, 0, 0.05);
	border-color: var(--color-primary);
}

body.dark-mode .blog-pagination .page-numbers:hover,
body.dark-mode .blog-pagination .page-numbers:focus {
	background: rgba(255, 255, 255, 0.1);
}

.blog-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* AJAX pagination list style */
.blog-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.blog-pagination ul li {
	margin: 0;
}

/* Blog Grid Layout */
.blog-template .posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
}

.blog-template .posts-grid[data-columns="2"] {
	grid-template-columns: repeat(2, 1fr);
}

.blog-template .posts-grid[data-columns="4"] {
	grid-template-columns: repeat(4, 1fr);
}

.blog-template .posts-grid .blog-post-item {
	background: var(--color-background);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

body.dark-mode .blog-template .posts-grid .blog-post-item {
	background: color-mix(in srgb, var(--color-background-dark) 90%, white);
}

.blog-template .posts-grid .blog-post-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Sticky post in grid - full width */
.blog-template .posts-grid .blog-post-item.sticky-post {
	grid-column: 1 / -1;
	flex-direction: row;
}

.blog-template .posts-grid .blog-post-item.sticky-post .post-thumbnail {
	flex: 0 0 50%;
	max-width: 50%;
}

.blog-template .posts-grid .blog-post-item.sticky-post .post-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.blog-template .posts-grid .blog-post-item.sticky-post .entry-title {
	font-size: 1.5rem;
}

.blog-template .posts-grid .post-thumbnail {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.blog-template .posts-grid .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.blog-template .posts-grid .blog-post-item:hover .post-thumbnail img {
	transform: scale(1.05);
}

.blog-template .posts-grid .post-content {
	padding: var(--spacing-md);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.blog-template .sticky-label {
	display: inline-block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	padding: 4px 8px;
	background: var(--color-highlight);
	color: var(--color-sticky-label-text, #1a1a1a);
	border-radius: 3px;
	margin-bottom: var(--spacing-xs);
}

.blog-template .posts-grid .sticky-label {
	/* Inherits from .blog-template .sticky-label */
}

.blog-template .posts-grid .entry-title {
	margin: 0 0 var(--spacing-xs);
	font-size: 1.1rem;
	line-height: 1.3;
}

.blog-template .posts-grid .entry-title a {
	color: var(--color-text);
	text-decoration: none;
}

body.dark-mode .blog-template .posts-grid .entry-title a {
	color: var(--color-text-dark);
}

.blog-template .posts-grid .entry-title a:hover {
	color: var(--color-primary);
}

.blog-template .posts-grid .entry-meta {
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	margin-bottom: var(--spacing-sm);
}

body.dark-mode .blog-template .posts-grid .entry-meta {
	color: color-mix(in srgb, var(--color-text-dark) 60%, transparent);
}

.blog-template .posts-grid .entry-summary {
	flex: 1;
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: var(--spacing-sm);
}

.blog-template .posts-grid .entry-footer {
	margin-top: auto;
}

/* Blog List Layout */
.blog-template .posts-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.blog-template .posts-list .blog-list-item {
	display: flex;
	gap: var(--spacing-lg);
	padding: var(--spacing-lg);
	background: var(--color-background);
	border-radius: var(--border-radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s ease;
}

body.dark-mode .blog-template .posts-list .blog-list-item {
	background: color-mix(in srgb, var(--color-background-dark) 90%, white);
}

.blog-template .posts-list .blog-list-item:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.blog-template .posts-list .blog-list-item.sticky-post {
	border-left: 4px solid var(--color-primary);
}

/*
 * List layout uses a 1:2 thumbnail-to-content ratio so the image stays
 * proportional on any container width (previously the thumbnail was a
 * fixed 200px, which collapses to well under a third on wide layouts).
 * `flex-basis: 0` makes the `flex-grow` values the sole driver of the
 * split; `min-width: 0` on the content column lets long words wrap
 * inside the flex child instead of forcing the column to widen.
 */
.blog-template .posts-list .post-thumbnail {
	flex: 1 1 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--border-radius);
}

.blog-template .posts-list .post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.blog-template .posts-list .blog-list-item:hover .post-thumbnail img {
	transform: scale(1.05);
}

.blog-template .posts-list .post-content {
	flex: 2 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.blog-template .posts-list .sticky-label {
	align-self: flex-start;
}

.blog-template .posts-list .entry-header {
	margin-bottom: var(--spacing-sm);
}

.blog-template .posts-list .entry-title {
	margin: 0 0 var(--spacing-xs);
	font-size: 1.35rem;
	line-height: 1.3;
}

.blog-template .posts-list .entry-title a {
	color: var(--color-text);
	text-decoration: none;
}

body.dark-mode .blog-template .posts-list .entry-title a {
	color: var(--color-text-dark);
}

.blog-template .posts-list .entry-title a:hover {
	color: var(--color-primary);
}

.blog-template .posts-list .entry-meta {
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

body.dark-mode .blog-template .posts-list .entry-meta {
	color: color-mix(in srgb, var(--color-text-dark) 60%, transparent);
}

.blog-template .posts-list .entry-meta > span:not(:last-child)::after {
	content: "";
	margin-left: var(--spacing-sm);
}

.blog-template .posts-list .entry-summary {
	flex: 1;
	line-height: 1.6;
	margin-bottom: var(--spacing-sm);
}

.blog-template .posts-list .entry-summary p {
	margin: 0;
}

.blog-template .posts-list .entry-footer {
	margin-top: auto;
}

/* Blog Pagination */
.blog-template .pagination {
	margin-top: var(--spacing-xl);
}

/* No Posts */
.blog-template .no-posts {
	text-align: center;
	padding: var(--spacing-xl);
	color: var(--color-secondary);
}

/* Related Projects Section */
.related-projects {
	padding: var(--spacing-xl) 0;
	background: rgba(0, 0, 0, 0.02);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .related-projects {
	background: rgba(255, 255, 255, 0.02);
	border-top-color: rgba(255, 255, 255, 0.1);
}

.related-projects .section-title {
	text-align: center;
	margin-bottom: var(--spacing-lg);
}

.related-projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
}

.related-project-card {
	background: var(--color-background);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .related-project-card {
	background: color-mix(in srgb, var(--color-background-dark) 90%, white);
}

.related-project-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.related-project-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.related-project-thumbnail {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.related-project-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.related-project-card:hover .related-project-thumbnail img {
	transform: scale(1.05);
}

.related-project-title {
	padding: var(--spacing-md);
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
}

body.dark-mode .related-project-title {
	color: var(--color-text-dark);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs {
	padding-top: var(--spacing-sm);
	padding-bottom: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
}

.breadcrumb-trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	gap: 0.25rem;
}

.breadcrumb-item {
	display: inline-flex;
	align-items: center;
}

/*
 * Breadcrumbs are navigational side-info, not a main CTA. They should
 * stay in the muted text color family and only gain full text color on
 * hover/focus — the primary/secondary/tertiary accent colors are
 * intentionally NOT used here.
 */
.breadcrumb-item a {
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	text-decoration: none;
	transition: color 0.2s ease;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
	color: var(--color-text);
	text-decoration: underline;
}

.breadcrumb-item-current span {
	color: var(--color-text);
	font-weight: 500;
}

body.dark-mode .breadcrumb-item a {
	color: color-mix(in srgb, var(--color-text-dark) 60%, transparent);
}

body.dark-mode .breadcrumb-item a:hover,
body.dark-mode .breadcrumb-item a:focus {
	color: var(--color-text-dark);
}

body.dark-mode .breadcrumb-item-current span {
	color: var(--color-text-dark);
}

.breadcrumb-separator {
	margin: 0 0.5rem;
	color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

body.dark-mode .breadcrumb-separator {
	color: color-mix(in srgb, var(--color-text-dark) 45%, transparent);
}

/* Schema.org compatibility for SEO plugin breadcrumbs */
.breadcrumbs [itemscope] {
	display: inline;
}

/* Yoast breadcrumb styling */
.breadcrumbs .yoast-breadcrumb {
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.breadcrumbs .yoast-breadcrumb a {
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	text-decoration: none;
}

.breadcrumbs .yoast-breadcrumb a:hover {
	color: var(--color-text);
	text-decoration: underline;
}

body.dark-mode .breadcrumbs .yoast-breadcrumb,
body.dark-mode .breadcrumbs .yoast-breadcrumb a {
	color: color-mix(in srgb, var(--color-text-dark) 60%, transparent);
}

body.dark-mode .breadcrumbs .yoast-breadcrumb a:hover {
	color: var(--color-text-dark);
}

/* Rank Math breadcrumb styling */
.breadcrumbs .rank-math-breadcrumb {
	font-size: 0.875rem;
}

.breadcrumbs .rank-math-breadcrumb a {
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	text-decoration: none;
}

.breadcrumbs .rank-math-breadcrumb a:hover {
	color: var(--color-text);
	text-decoration: underline;
}

body.dark-mode .breadcrumbs .rank-math-breadcrumb a {
	color: color-mix(in srgb, var(--color-text-dark) 60%, transparent);
}

body.dark-mode .breadcrumbs .rank-math-breadcrumb a:hover {
	color: var(--color-text-dark);
}

/* ==========================================================================
   Single Post Template
   ========================================================================== */

.single-post .post-header {
	text-align: center;
	padding: var(--spacing-xl) 0 var(--spacing-lg);
}

/*
 * On a single post the category is supplemental info — show it as
 * a subtle uppercase text label rather than a filled pill. The filled
 * primary-color badge was competing with the actual CTA buttons on
 * the page.
 */
.single-post .post-categories {
	margin-bottom: var(--spacing-sm);
}

.single-post .post-category {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: color-mix(in srgb, var(--color-text) 70%, transparent);
	margin: 0 0.75rem 0.25rem 0;
	transition: color 0.2s ease;
}

.single-post .post-category:hover,
.single-post .post-category:focus {
	color: var(--color-text);
	text-decoration: underline;
}

body.dark-mode .single-post .post-category {
	color: color-mix(in srgb, var(--color-text-dark) 70%, transparent);
}

body.dark-mode .single-post .post-category:hover,
body.dark-mode .single-post .post-category:focus {
	color: var(--color-text-dark);
}

.single-post .post-title {
	font-size: 2.5rem;
	line-height: 1.2;
	margin-bottom: var(--spacing-md);
}

.single-post .post-meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--spacing-sm) var(--spacing-md);
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	font-size: 0.9rem;
	margin-bottom: var(--spacing-md);
}

body.dark-mode .single-post .post-meta {
	color: color-mix(in srgb, var(--color-text-dark) 60%, transparent);
}

.single-post .post-meta a {
	color: inherit;
	text-decoration: none;
}

.single-post .post-meta a:hover,
.single-post .post-meta a:focus {
	color: var(--color-text);
	text-decoration: underline;
}

body.dark-mode .single-post .post-meta a:hover,
body.dark-mode .single-post .post-meta a:focus {
	color: var(--color-text-dark);
}

.single-post .post-tags {
	margin-top: var(--spacing-sm);
}

.single-post .post-tag {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	background: rgba(0, 0, 0, 0.05);
	color: var(--color-secondary);
	font-size: 0.8rem;
	border-radius: 3px;
	text-decoration: none;
	margin: 0 0.25rem 0.25rem 0;
	transition: background 0.2s ease, color 0.2s ease;
}

body.dark-mode .single-post .post-tag {
	background: rgba(255, 255, 255, 0.1);
}

.single-post .post-tag:hover {
	background: var(--color-primary);
	color: #fff;
}

.single-post .post-featured-image {
	margin-bottom: var(--spacing-lg);
}

.single-post .post-featured-image img {
	width: 100%;
	height: auto;
	border-radius: var(--border-radius);
}

.single-post .post-content-wrapper {
	padding-bottom: var(--spacing-lg);
}

.single-post .post-content {
	max-width: 800px;
	margin: 0 auto;
	font-size: 1.1rem;
	line-height: 1.8;
}

.single-post .page-links {
	max-width: 800px;
	margin: var(--spacing-lg) auto 0;
	padding-top: var(--spacing-md);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .single-post .page-links {
	border-top-color: rgba(255, 255, 255, 0.1);
}

.single-post .page-links-title {
	font-weight: 600;
	margin-right: var(--spacing-sm);
}

.single-post .page-link {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	margin: 0 0.25rem;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 3px;
}

body.dark-mode .single-post .page-link {
	background: rgba(255, 255, 255, 0.1);
}

/* Post Footer - Author Bio */
.single-post .post-footer {
	padding: var(--spacing-lg) 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .single-post .post-footer {
	border-top-color: rgba(255, 255, 255, 0.1);
}

.single-post .author-bio {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	background: rgba(0, 0, 0, 0.02);
	border-radius: var(--border-radius);
}

body.dark-mode .single-post .author-bio {
	background: rgba(255, 255, 255, 0.02);
}

.single-post .author-avatar img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.single-post .author-info {
	flex: 1;
}

.single-post .author-name {
	margin: 0 0 var(--spacing-xs);
	font-size: 1.1rem;
}

.single-post .author-name a {
	color: inherit;
	text-decoration: none;
}

.single-post .author-name a:hover {
	color: var(--color-primary);
}

.single-post .author-description {
	margin: 0;
	color: var(--color-secondary);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Related Posts Section */
.related-posts {
	padding: var(--spacing-xl) 0;
	background: rgba(0, 0, 0, 0.02);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .related-posts {
	background: rgba(255, 255, 255, 0.02);
	border-top-color: rgba(255, 255, 255, 0.1);
}

.related-posts .section-title {
	text-align: center;
	margin-bottom: var(--spacing-lg);
}

.related-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
}

.related-post-card {
	background: var(--color-background);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .related-post-card {
	background: color-mix(in srgb, var(--color-background-dark) 90%, white);
}

.related-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.related-post-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.related-post-thumbnail {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.related-post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.related-post-card:hover .related-post-thumbnail img {
	transform: scale(1.05);
}

.related-post-content {
	padding: var(--spacing-md);
}

.related-post-title {
	margin: 0 0 var(--spacing-xs);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.4;
}

body.dark-mode .related-post-title {
	color: var(--color-text-dark);
}

.related-post-date {
	font-size: 0.8rem;
	color: var(--color-secondary);
}

/* ==========================================================================
   Pre-Footer Widget Area
   ========================================================================== */

.pre-footer-area {
	padding: var(--spacing-xl) 0;
	background: rgba(0, 0, 0, 0.03);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark-mode .pre-footer-area {
	background: rgba(255, 255, 255, 0.03);
	border-top-color: rgba(255, 255, 255, 0.08);
}

.pre-footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
}

.pre-footer-widget {
	grid-column: span 1;
}

.pre-footer-widget.span-2 {
	grid-column: span 2;
}

.pre-footer-widget.span-3 {
	grid-column: span 3;
}

.pre-footer-widget .widget-title {
	margin: 0 0 var(--spacing-md);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-text);
}

body.dark-mode .pre-footer-widget .widget-title {
	color: var(--color-text-dark);
}

/* Widget content styles */
.pre-footer-widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pre-footer-widget ul li {
	padding: var(--spacing-xs) 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .pre-footer-widget ul li {
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

.pre-footer-widget ul li:last-child {
	border-bottom: none;
}

.pre-footer-widget a {
	color: var(--color-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

body.dark-mode .pre-footer-widget a {
	color: var(--color-text-dark);
}

.pre-footer-widget a:hover {
	color: var(--color-primary);
}

/* Text widget */
.pre-footer-widget.widget_text p:last-child {
	margin-bottom: 0;
}

/* Search widget */
.pre-footer-widget .search-form {
	display: flex;
	gap: var(--spacing-xs);
}

.pre-footer-widget .search-field {
	flex: 1;
	padding: var(--spacing-xs) var(--spacing-sm);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--border-radius);
	background: var(--color-background);
	color: var(--color-text);
}

body.dark-mode .pre-footer-widget .search-field {
	background: var(--color-background-dark);
	border-color: rgba(255, 255, 255, 0.15);
	color: var(--color-text-dark);
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--spacing-lg: 2rem;
		--spacing-xl: 3rem;
	}

	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }

	/* 404 page responsive */
	.error-code {
		font-size: 5rem;
	}

	/* Search results responsive */
	.search-result-item {
		flex-direction: column;
	}

	.result-thumbnail {
		width: 100%;
		max-width: 150px;
	}

	.search-form {
		flex-direction: column;
	}

	/* Back to top responsive */
	.back-to-top {
		bottom: var(--spacing-md);
		right: var(--spacing-md);
		width: 44px;
		height: 44px;
	}

	/* Projects grid responsive - 2 columns on tablet */
	.projects-grid[data-columns="3"],
	.projects-grid[data-columns="4"] {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Single project responsive */
	.single-project .project-title {
		font-size: 2rem;
	}

	.single-project .project-gallery {
		column-count: 2;
	}

	.single-project .project-testimonial {
		flex-direction: column;
		text-align: center;
	}

	.single-project .project-testimonial .testimonial-image {
		margin: 0 auto;
	}

	/* Related content responsive - 2 columns on tablet */
	.related-projects-grid,
	.related-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Pre-footer responsive - 2 columns on tablet */
	.pre-footer-widgets {
		grid-template-columns: repeat(2, 1fr);
	}

	.pre-footer-widget.span-3 {
		grid-column: span 2;
	}

	/* Blog grid responsive - 2 columns on tablet */
	.blog-template .posts-grid,
	.blog-template .posts-grid[data-columns="3"],
	.blog-template .posts-grid[data-columns="4"] {
		grid-template-columns: repeat(2, 1fr);
	}

	.blog-template .posts-grid .blog-post-item.sticky-post {
		flex-direction: column;
	}

	.blog-template .posts-grid .blog-post-item.sticky-post .post-thumbnail {
		flex: none;
		max-width: 100%;
	}

	/* Blog list responsive - the 1:2 flex ratio already scales the
	 * thumbnail down with the container, so no explicit width override
	 * is needed on tablet. Kept as an anchor in case a future tweak
	 * needs to diverge from the desktop ratio. */

	/* Single post responsive */
	.single-post .post-title {
		font-size: 2rem;
	}

	.single-post .post-meta {
		flex-direction: column;
		gap: var(--spacing-xs);
	}

	.single-post .author-bio {
		flex-direction: column;
		text-align: center;
	}

	.single-post .author-avatar {
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	.container {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}

	h1 { font-size: 1.75rem; }
	h2 { font-size: 1.5rem; }

	/* 404 page responsive */
	.error-code {
		font-size: 4rem;
	}

	/* Projects grid responsive - 1 column on mobile */
	.projects-grid {
		grid-template-columns: 1fr !important;
	}

	/* Single project responsive */
	.single-project .project-title {
		font-size: 1.75rem;
	}

	.single-project .project-gallery {
		column-count: 1;
	}

	/* Related content responsive - 1 column on mobile */
	.related-projects-grid,
	.related-posts-grid {
		grid-template-columns: 1fr;
	}

	/* Pre-footer responsive - 1 column on mobile */
	.pre-footer-widgets {
		grid-template-columns: 1fr;
	}

	.pre-footer-widget.span-2,
	.pre-footer-widget.span-3 {
		grid-column: span 1;
	}

	/* Blog grid responsive - 1 column on mobile */
	.blog-template .posts-grid {
		grid-template-columns: 1fr !important;
	}

	/* Blog list responsive - stack on mobile. Reset the flex-grow on
	 * both columns so they each span the full row width once the
	 * container switches to `flex-direction: column`. */
	.blog-template .posts-list .blog-list-item {
		flex-direction: column;
	}

	.blog-template .posts-list .post-thumbnail {
		flex: 0 0 auto;
		width: 100%;
		max-width: 300px;
	}

	.blog-template .posts-list .post-content {
		flex: 0 0 auto;
		width: 100%;
	}

	/* Single post responsive */
	.single-post .post-title {
		font-size: 1.75rem;
	}
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.prospero-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.prospero-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.prospero-lightbox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}

.prospero-lightbox-content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.prospero-lightbox-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.prospero-lightbox-image {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.prospero-lightbox-caption {
	margin-top: var(--spacing-sm);
	color: #fff;
	font-size: 0.9rem;
	text-align: center;
	max-width: 600px;
}

.prospero-lightbox-close,
.prospero-lightbox-prev,
.prospero-lightbox-next {
	position: absolute;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	z-index: 10;
}

.prospero-lightbox-close {
	top: -50px;
	right: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 28px;
	line-height: 40px;
}

.prospero-lightbox-prev,
.prospero-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 80px;
	font-size: 36px;
	line-height: 80px;
}

.prospero-lightbox-prev {
	left: -70px;
	border-radius: 4px 0 0 4px;
}

.prospero-lightbox-next {
	right: -70px;
	border-radius: 0 4px 4px 0;
}

.prospero-lightbox-close:hover,
.prospero-lightbox-prev:hover,
.prospero-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.25);
}

.prospero-lightbox-close:focus,
.prospero-lightbox-prev:focus,
.prospero-lightbox-next:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Lightbox responsive */
@media (max-width: 768px) {
	.prospero-lightbox-prev,
	.prospero-lightbox-next {
		top: auto;
		bottom: 20px;
		transform: none;
		width: 60px;
		height: 50px;
		line-height: 50px;
		border-radius: 4px;
	}

	.prospero-lightbox-prev {
		left: 20px;
	}

	.prospero-lightbox-next {
		right: 20px;
	}

	.prospero-lightbox-close {
		top: 20px;
		right: 20px;
	}

	.prospero-lightbox-image {
		max-height: 70vh;
	}
}