/**
 * Wosol Theme - Layout & Grid Styles
 *
 * Container, section, flexbox, grid, spacing, and layout utilities.
 * All values derive from CSS variables in variables.css.
 */

/* =============================================
   CONTAINER
   Standard max-width wrapper with responsive padding.
   ============================================= */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.container-wide {
	width: 100%;
	max-width: var(--container-width-wide);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.container-fluid {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.container-narrow {
	width: 100%;
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

/* =============================================
   SECTIONS
   ============================================= */

section {
	padding-top: var(--section-padding-y);
	padding-bottom: var(--section-padding-y);
}

.section-sm { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.section-lg { padding-top: var(--spacing-5xl); padding-bottom: var(--spacing-5xl); }

/* =============================================
   FLEXBOX UTILITIES
   ============================================= */

.flex          { display: flex; }
.inline-flex   { display: inline-flex; }

.flex-row      { flex-direction: row; }
.flex-row-rev  { flex-direction: row-reverse; }
.flex-col      { flex-direction: column; }
.flex-col-rev  { flex-direction: column-reverse; }

.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-wrap-rev { flex-wrap: wrap-reverse; }

/* Alignment (align-items). */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

/* Justify content. */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* Common combined layouts (kept from plan for backwards compat). */
.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-start {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.flex-end {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

/* Flex grow/shrink helpers. */
.flex-1        { flex: 1 1 0%; }
.flex-auto     { flex: 1 1 auto; }
.flex-initial  { flex: 0 1 auto; }
.flex-none     { flex: none; }
.flex-grow     { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* =============================================
   GAP UTILITIES
   ============================================= */

.gap-0   { gap: 0; }
.gap-xs  { gap: var(--spacing-xs); }
.gap-sm  { gap: var(--spacing-sm); }
.gap-md  { gap: var(--spacing-md); }
.gap-lg  { gap: var(--spacing-lg); }
.gap-xl  { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }
.gap-3xl { gap: var(--spacing-3xl); }

/* =============================================
   GRID UTILITIES
   ============================================= */

.grid {
	display: grid;
	gap: var(--spacing-lg);
}

.grid-1 { display: grid; grid-template-columns: 1fr;                gap: var(--spacing-lg); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr);     gap: var(--spacing-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr);     gap: var(--spacing-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr);     gap: var(--spacing-lg); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr);     gap: var(--spacing-lg); }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr);     gap: var(--spacing-lg); }

.grid-auto      { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); }
.grid-auto-sm   { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-md); }
.grid-auto-lg   { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-xl); }

/* Column span utilities. */
.col-span-full { grid-column: 1 / -1; }
.col-span-2    { grid-column: span 2 / span 2; }
.col-span-3    { grid-column: span 3 / span 3; }
.col-span-4    { grid-column: span 4 / span 4; }

/* Responsive grid fallbacks. */
@media (max-width: 767px) {
	.grid-2,
	.grid-3,
	.grid-4,
	.grid-5,
	.grid-6 {
		grid-template-columns: 1fr;
	}

	.grid-auto,
	.grid-auto-sm,
	.grid-auto-lg {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.grid-3,
	.grid-4,
	.grid-5,
	.grid-6 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-auto {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}

/* =============================================
   SPACING UTILITIES - MARGIN
   ============================================= */

/* All directions. */
.m-0   { margin: 0 !important; }
.m-xs  { margin: var(--spacing-xs) !important; }
.m-sm  { margin: var(--spacing-sm) !important; }
.m-md  { margin: var(--spacing-md) !important; }
.m-lg  { margin: var(--spacing-lg) !important; }
.m-xl  { margin: var(--spacing-xl) !important; }
.m-2xl { margin: var(--spacing-2xl) !important; }
.m-3xl { margin: var(--spacing-3xl) !important; }
.m-auto { margin: auto !important; }

/* Top. */
.mt-0   { margin-top: 0 !important; }
.mt-xs  { margin-top: var(--spacing-xs) !important; }
.mt-sm  { margin-top: var(--spacing-sm) !important; }
.mt-md  { margin-top: var(--spacing-md) !important; }
.mt-lg  { margin-top: var(--spacing-lg) !important; }
.mt-xl  { margin-top: var(--spacing-xl) !important; }
.mt-2xl { margin-top: var(--spacing-2xl) !important; }
.mt-3xl { margin-top: var(--spacing-3xl) !important; }
.mt-4xl { margin-top: var(--spacing-4xl) !important; }
.mt-auto { margin-top: auto !important; }

/* Bottom. */
.mb-0   { margin-bottom: 0 !important; }
.mb-xs  { margin-bottom: var(--spacing-xs) !important; }
.mb-sm  { margin-bottom: var(--spacing-sm) !important; }
.mb-md  { margin-bottom: var(--spacing-md) !important; }
.mb-lg  { margin-bottom: var(--spacing-lg) !important; }
.mb-xl  { margin-bottom: var(--spacing-xl) !important; }
.mb-2xl { margin-bottom: var(--spacing-2xl) !important; }
.mb-3xl { margin-bottom: var(--spacing-3xl) !important; }
.mb-4xl { margin-bottom: var(--spacing-4xl) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Left. */
.ml-0   { margin-left: 0 !important; }
.ml-xs  { margin-left: var(--spacing-xs) !important; }
.ml-sm  { margin-left: var(--spacing-sm) !important; }
.ml-md  { margin-left: var(--spacing-md) !important; }
.ml-lg  { margin-left: var(--spacing-lg) !important; }
.ml-xl  { margin-left: var(--spacing-xl) !important; }
.ml-auto { margin-left: auto !important; }

/* Right. */
.mr-0   { margin-right: 0 !important; }
.mr-xs  { margin-right: var(--spacing-xs) !important; }
.mr-sm  { margin-right: var(--spacing-sm) !important; }
.mr-md  { margin-right: var(--spacing-md) !important; }
.mr-lg  { margin-right: var(--spacing-lg) !important; }
.mr-xl  { margin-right: var(--spacing-xl) !important; }
.mr-auto { margin-right: auto !important; }

/* Vertical (top + bottom). */
.my-0   { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xs  { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-sm  { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-md  { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-lg  { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-xl  { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.my-2xl { margin-top: var(--spacing-2xl) !important; margin-bottom: var(--spacing-2xl) !important; }
.my-3xl { margin-top: var(--spacing-3xl) !important; margin-bottom: var(--spacing-3xl) !important; }

/* Horizontal (left + right). */
.mx-0    { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xs   { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-sm   { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-md   { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-lg   { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-xl   { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* =============================================
   SPACING UTILITIES - PADDING
   ============================================= */

/* All directions. */
.p-0   { padding: 0 !important; }
.p-xs  { padding: var(--spacing-xs) !important; }
.p-sm  { padding: var(--spacing-sm) !important; }
.p-md  { padding: var(--spacing-md) !important; }
.p-lg  { padding: var(--spacing-lg) !important; }
.p-xl  { padding: var(--spacing-xl) !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }
.p-3xl { padding: var(--spacing-3xl) !important; }

/* Top. */
.pt-0   { padding-top: 0 !important; }
.pt-xs  { padding-top: var(--spacing-xs) !important; }
.pt-sm  { padding-top: var(--spacing-sm) !important; }
.pt-md  { padding-top: var(--spacing-md) !important; }
.pt-lg  { padding-top: var(--spacing-lg) !important; }
.pt-xl  { padding-top: var(--spacing-xl) !important; }
.pt-2xl { padding-top: var(--spacing-2xl) !important; }
.pt-3xl { padding-top: var(--spacing-3xl) !important; }
.pt-4xl { padding-top: var(--spacing-4xl) !important; }

/* Bottom. */
.pb-0   { padding-bottom: 0 !important; }
.pb-xs  { padding-bottom: var(--spacing-xs) !important; }
.pb-sm  { padding-bottom: var(--spacing-sm) !important; }
.pb-md  { padding-bottom: var(--spacing-md) !important; }
.pb-lg  { padding-bottom: var(--spacing-lg) !important; }
.pb-xl  { padding-bottom: var(--spacing-xl) !important; }
.pb-2xl { padding-bottom: var(--spacing-2xl) !important; }
.pb-3xl { padding-bottom: var(--spacing-3xl) !important; }
.pb-4xl { padding-bottom: var(--spacing-4xl) !important; }

/* Left. */
.pl-0   { padding-left: 0 !important; }
.pl-xs  { padding-left: var(--spacing-xs) !important; }
.pl-sm  { padding-left: var(--spacing-sm) !important; }
.pl-md  { padding-left: var(--spacing-md) !important; }
.pl-lg  { padding-left: var(--spacing-lg) !important; }
.pl-xl  { padding-left: var(--spacing-xl) !important; }
.pl-2xl { padding-left: var(--spacing-2xl) !important; }

/* Right. */
.pr-0   { padding-right: 0 !important; }
.pr-xs  { padding-right: var(--spacing-xs) !important; }
.pr-sm  { padding-right: var(--spacing-sm) !important; }
.pr-md  { padding-right: var(--spacing-md) !important; }
.pr-lg  { padding-right: var(--spacing-lg) !important; }
.pr-xl  { padding-right: var(--spacing-xl) !important; }
.pr-2xl { padding-right: var(--spacing-2xl) !important; }

/* Vertical. */
.py-0   { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs  { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-sm  { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-md  { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-lg  { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-xl  { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-2xl { padding-top: var(--spacing-2xl) !important; padding-bottom: var(--spacing-2xl) !important; }
.py-3xl { padding-top: var(--spacing-3xl) !important; padding-bottom: var(--spacing-3xl) !important; }
.py-4xl { padding-top: var(--spacing-4xl) !important; padding-bottom: var(--spacing-4xl) !important; }

/* Horizontal. */
.px-0   { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs  { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-sm  { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-md  { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-lg  { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-xl  { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.px-2xl { padding-left: var(--spacing-2xl) !important; padding-right: var(--spacing-2xl) !important; }

/* =============================================
   DISPLAY UTILITIES
   ============================================= */

.block         { display: block !important; }
.inline-block  { display: inline-block !important; }
.inline        { display: inline !important; }
.hidden        { display: none !important; }
.grid-display  { display: grid !important; }

/* =============================================
   VISIBILITY UTILITIES
   ============================================= */

.visible   { visibility: visible; }
.invisible { visibility: hidden; }

/*
 * NOTE: .sr-only is defined in reset.css (ACCESSIBILITY HELPERS section) with
 * the required :focus reveal behavior for skip-links. Do NOT redeclare it
 * here — a bare copy without the :focus rule would override reset.css (which
 * loads earlier) and silently break keyboard accessibility.
 */

/* Responsive display helpers. */
@media (max-width: 767px) {
	.hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
	.hidden-desktop { display: none !important; }
}

@media (max-width: 1023px) {
	.hidden-tablet-down { display: none !important; }
}

@media (min-width: 1024px) {
	.hidden-desktop-up { display: none !important; }
}

/* =============================================
   POSITION UTILITIES
   ============================================= */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; top: 0; }
.static   { position: static; }

.inset-0 {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* =============================================
   ASPECT RATIO
   ============================================= */

.aspect-square {
	position: relative;
	aspect-ratio: 1 / 1;
}

.aspect-video {
	position: relative;
	aspect-ratio: 16 / 9;
}

.aspect-4-3 {
	position: relative;
	aspect-ratio: 4 / 3;
}

.aspect-3-2 {
	position: relative;
	aspect-ratio: 3 / 2;
}

.aspect-21-9 {
	position: relative;
	aspect-ratio: 21 / 9;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1 / 1) {
	.aspect-square { padding-bottom: 100%; }
	.aspect-video  { padding-bottom: 56.25%; }
	.aspect-4-3    { padding-bottom: 75%; }
	.aspect-3-2    { padding-bottom: 66.66%; }
	.aspect-21-9   { padding-bottom: 42.85%; }

	.aspect-square > *,
	.aspect-video > *,
	.aspect-4-3 > *,
	.aspect-3-2 > *,
	.aspect-21-9 > * {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.aspect-child {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* =============================================
   OVERFLOW UTILITIES
   ============================================= */

.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-scroll  { overflow: scroll; }
.overflow-visible { overflow: visible; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* =============================================
   WIDTH & HEIGHT UTILITIES
   ============================================= */

.w-full       { width: 100% !important; }
.w-auto       { width: auto !important; }
.w-screen     { width: 100vw !important; }
.w-1\/2       { width: 50% !important; }
.w-1\/3       { width: 33.333% !important; }
.w-2\/3       { width: 66.666% !important; }
.w-1\/4       { width: 25% !important; }
.w-3\/4       { width: 75% !important; }

.max-w-full      { max-width: 100% !important; }
.max-w-container { max-width: var(--container-width) !important; }
.max-w-narrow    { max-width: 640px !important; }
.max-w-prose     { max-width: 65ch !important; }

.h-full   { height: 100% !important; }
.h-auto   { height: auto !important; }
.h-screen { height: 100vh !important; }
.min-h-screen { min-height: 100vh !important; }

/* =============================================
   BACKGROUND UTILITIES
   ============================================= */

.bg-primary          { background-color: var(--color-primary) !important; }
.bg-primary-dark     { background-color: var(--color-primary-dark) !important; }
.bg-secondary        { background-color: var(--color-secondary) !important; }
.bg-accent           { background-color: var(--color-accent) !important; }
.bg-white            { background-color: var(--color-white) !important; }
.bg-surface          { background-color: var(--color-surface) !important; }
.bg-surface-alt      { background-color: var(--color-surface-alt) !important; }
.bg-transparent      { background-color: transparent !important; }

/* =============================================
   BORDER RADIUS UTILITIES
   ============================================= */

.rounded-none { border-radius: 0 !important; }
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.rounded-2xl  { border-radius: var(--radius-2xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* =============================================
   SHADOW UTILITIES
   ============================================= */

.shadow-none { box-shadow: var(--shadow-none) !important; }
.shadow-xs   { box-shadow: var(--shadow-xs) !important; }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.shadow-md   { box-shadow: var(--shadow-md) !important; }
.shadow-lg   { box-shadow: var(--shadow-lg) !important; }
.shadow-xl   { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl  { box-shadow: var(--shadow-2xl) !important; }

/* =============================================
   CURSOR UTILITIES
   ============================================= */

.cursor-pointer      { cursor: pointer; }
.cursor-not-allowed  { cursor: not-allowed; }
.cursor-default      { cursor: default; }

/* =============================================
   SITE HEADER
   Sticky global header with logo + nav.
   ============================================= */

.wosol-site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	width: 100%;
	background-color: var(--color-white);
	border-bottom: var(--border-width-thin) solid var(--color-border);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.wosol-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-lg);
	min-height: 80px;
	padding-top: var(--spacing-sm);
	padding-bottom: var(--spacing-sm);
}

/* Skip link visible on focus (see reset.css .sr-only). */
.skip-link:focus {
	position: fixed;
	top: var(--spacing-sm);
	left: var(--spacing-sm);
	z-index: var(--z-toast);
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border-radius: var(--radius-sm);
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

/* =============================================
   SITE BRANDING (logo area)
   ============================================= */

.wosol-site-branding {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.2;
}

.wosol-site-branding__logo img,
.wosol-site-branding .custom-logo {
	max-height: 56px;
	width: auto;
	display: block;
}

.wosol-site-branding__title {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.1;
}

.wosol-site-branding__title a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.wosol-site-branding__title a:hover,
.wosol-site-branding__title a:focus {
	color: var(--color-secondary);
}

.wosol-site-branding__tagline {
	margin: 2px 0 0;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	letter-spacing: var(--letter-spacing-wide);
}

/* =============================================
   PRIMARY NAVIGATION
   ============================================= */

.wosol-nav {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
}

.wosol-nav__menu-wrapper {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
}

.wosol-nav__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wosol-nav__menu > li {
	position: relative;
	margin: 0;
}

.wosol-nav__menu a {
	display: inline-flex;
	align-items: center;
	padding: var(--spacing-sm) var(--spacing-md);
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast);
}

.wosol-nav__menu a:hover,
.wosol-nav__menu a:focus {
	color: var(--color-secondary);
	background-color: var(--color-surface);
	text-decoration: none;
}

.wosol-nav__menu a:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

.wosol-nav__menu .current-menu-item > a,
.wosol-nav__menu .current_page_item > a,
.wosol-nav__menu .current-menu-ancestor > a {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	background-color: transparent;
	position: relative;
}

.wosol-nav__menu .current-menu-item > a::after,
.wosol-nav__menu .current_page_item > a::after,
.wosol-nav__menu .current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: var(--spacing-md);
	right: var(--spacing-md);
	bottom: 4px;
	height: 2px;
	background-color: var(--color-accent);
	border-radius: var(--radius-full);
}

/* Sub-menu (dropdown). */
.wosol-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: var(--spacing-sm) 0;
	margin: 0;
	list-style: none;
	background-color: var(--color-white);
	border: var(--border-width-thin) solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity var(--transition-fast),
		transform var(--transition-fast),
		visibility var(--transition-fast);
	z-index: var(--z-dropdown);
}

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

.wosol-nav__menu .sub-menu a {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-sm);
	border-radius: 0;
}

/* Nav CTA area (phone/contact button on desktop). */
.wosol-nav__cta {
	display: inline-flex;
	align-items: center;
}

/* Mobile hamburger toggle - hidden on desktop. */
.wosol-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 40px;
	height: 32px;
	padding: 4px;
	background: transparent;
	border: var(--border-width-thin) solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--transition-fast);
}

.wosol-nav__toggle:hover,
.wosol-nav__toggle:focus {
	border-color: var(--color-border);
}

.wosol-nav__toggle:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

.wosol-nav__toggle-bar {
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--color-primary);
	border-radius: var(--radius-full);
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Toggle "X" state when menu is open. */
.wosol-nav__toggle[aria-expanded="true"] .wosol-nav__toggle-bar:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}

.wosol-nav__toggle[aria-expanded="true"] .wosol-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}

.wosol-nav__toggle[aria-expanded="true"] .wosol-nav__toggle-bar:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}

/* Prevent body scroll when mobile menu is open. */
body.wosol-menu-open {
	overflow: hidden;
}

/* =============================================
   RESPONSIVE - MOBILE NAVIGATION
   ============================================= */

@media (max-width: 1023px) {
	.wosol-site-header__inner {
		min-height: 64px;
	}

	.wosol-nav__toggle {
		display: flex;
	}

	.wosol-nav__menu-wrapper {
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-2xl);
		background-color: var(--color-white);
		border-top: var(--border-width-thin) solid var(--color-border);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--transition-normal), visibility var(--transition-normal);
		z-index: var(--z-fixed);
	}

	.wosol-nav__menu-wrapper.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.wosol-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.wosol-nav__menu > li {
		border-bottom: var(--border-width-thin) solid var(--color-border-light);
	}

	.wosol-nav__menu a {
		display: block;
		padding: var(--spacing-md) 0;
		font-size: var(--font-size-md);
	}

	.wosol-nav__menu .current-menu-item > a::after,
	.wosol-nav__menu .current_page_item > a::after,
	.wosol-nav__menu .current-menu-ancestor > a::after {
		display: none;
	}

	.wosol-nav__menu .sub-menu {
		position: static;
		display: block;
		opacity: 1;
		visibility: visible;
		transform: none;
		padding: 0 0 0 var(--spacing-md);
		margin: 0;
		background: transparent;
		border: none;
		box-shadow: none;
		min-width: 0;
	}

	.wosol-nav__cta {
		margin-top: var(--spacing-lg);
		justify-content: center;
	}

	.wosol-nav__cta .wosol-btn {
		width: 100%;
	}
}

/* =============================================
   SITE FOOTER
   ============================================= */

.wosol-site-footer {
	background-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
	padding-top: var(--spacing-4xl);
	padding-bottom: 0;
	margin-top: var(--spacing-4xl);
}

.wosol-site-footer a {
	color: var(--color-text-inverse);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.wosol-site-footer a:hover,
.wosol-site-footer a:focus {
	color: var(--color-accent-light);
	text-decoration: none;
}

.wosol-site-footer__top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--spacing-2xl);
	padding-bottom: var(--spacing-3xl);
	border-bottom: var(--border-width-thin) solid rgba(255, 255, 255, 0.08);
}

.wosol-site-footer__col-title {
	font-family: var(--font-primary);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-inverse);
	margin: 0 0 var(--spacing-md);
	letter-spacing: var(--letter-spacing-wide);
}

.wosol-site-footer__brand-name {
	font-family: var(--font-primary);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-inverse);
	margin: 0 0 var(--spacing-sm);
}

.wosol-site-footer__brand-tagline {
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
	max-width: 380px;
	margin: 0 0 var(--spacing-lg);
}

.wosol-site-footer__contact {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.8);
}

.wosol-site-footer__contact-label {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-inverse);
	margin-right: var(--spacing-xs);
}

/* Footer nav menu. */
.wosol-footer-nav__menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.wosol-footer-nav__menu a {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--font-size-sm);
	transition: color var(--transition-fast), padding-left var(--transition-fast);
	display: inline-block;
}

.wosol-footer-nav__menu a:hover,
.wosol-footer-nav__menu a:focus {
	color: var(--color-text-inverse);
	padding-left: 4px;
}

/* Social links. */
.wosol-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	padding: 0;
	margin: 0;
	list-style: none;
}

.wosol-social__item {
	display: inline-flex;
}

.wosol-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--color-text-inverse);
	border-radius: var(--radius-full);
	transition:
		background-color var(--transition-fast),
		transform var(--transition-fast),
		color var(--transition-fast);
}

.wosol-social__link:hover,
.wosol-social__link:focus {
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	transform: translateY(-2px);
}

.wosol-social__icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Footer bottom bar (copyright). */
.wosol-site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	padding: var(--spacing-lg) 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--font-size-sm);
}

.wosol-site-footer__copyright {
	margin: 0;
}

.wosol-site-footer__legal-links {
	display: inline-flex;
	gap: var(--spacing-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Responsive footer. */
@media (max-width: 1023px) {
	.wosol-site-footer__top {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.wosol-site-footer {
		padding-top: var(--spacing-3xl);
		margin-top: var(--spacing-3xl);
	}

	.wosol-site-footer__top {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.wosol-site-footer__bottom {
		flex-direction: column;
		text-align: center;
	}
}