/*
 * assets/css/global.css
 * i-dia theme global stylesheet: variables, reset, layout, brand rules,
 * SVG recoloring support, image handling support, Gutenberg block-style
 * mirrors, and reusable long-form content ("prose") rules shared by
 * single.php, front-page.php, and any future article/recipe template.
 * Pure CSS3 only. No frameworks/preprocessors.
 * Enqueued via functions.php using get_asset_url() (asset base path
 * constant). @font-face rules are generated in PHP and injected on the
 * 'idia-fonts' handle.
 *
 * NOTE: Pastel and primary-dark-blue hex values below are PLACEHOLDERS
 * chosen to pass WCAG AA contrast against --idia-color-dark-blue text.
 * Replace with the confirmed brand hex codes before production launch.
 */

/* ==========================================================================
   1. Color variables
   ========================================================================== */

:root {
	--idia-color-dark-blue: #0d2240;
	--idia-color-white: #ffffff;
	--idia-color-gray: #6b6f76;

	--idia-color-pastel-pink: #f6d9e2;
	--idia-color-pastel-purple: #e6dcf2;
	--idia-color-pastel-yellow: #f9edc4;
	--idia-color-pastel-green: #dcefdc;
	--idia-color-pastel-blue: #dbe8f6;

	--idia-color-text: var(--idia-color-dark-blue);
	--idia-color-text-muted: var(--idia-color-gray);
	--idia-color-background: var(--idia-color-white);
	--idia-color-link: var(--idia-color-dark-blue);
	--idia-color-focus-ring: var(--idia-color-dark-blue);

	--idia-icon-color: var(--idia-color-dark-blue);
	--idia-icon-color-inverted: var(--idia-color-white);
	--idia-icon-color-muted: var(--idia-color-gray);

	--font-primary: 'Nicky Sans', sans-serif;
	--font-signature: 'Honestine Signature', cursive;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	--line-height-tight: 1.2;
	--line-height-body: 1.6;
	--line-height-loose: 1.8;

	--letter-spacing-tight: -0.01em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.04em;

	--heading-text-transform: uppercase;
	--button-text-transform: uppercase;
	--button-letter-spacing: var(--letter-spacing-wide);

	--space-xxs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;

	--shadow-card: 0 1px 3px rgba(13, 34, 64, 0.08), 0 1px 2px rgba(13, 34, 64, 0.06);
	--shadow-elevated: 0 4px 12px rgba(13, 34, 64, 0.12);

	--idia-max-width: 1200px;
	--idia-content-max-width: 720px;

	--icon-size-sm: 1rem;
	--icon-size-md: 1.5rem;
	--icon-size-lg: 2rem;

	--aspect-ratio-standard: 3 / 2;
	--aspect-ratio-square: 1 / 1;
	--aspect-ratio-wide: 16 / 9;
	--aspect-ratio-hero: 21 / 9;
}

/* ==========================================================================
   5. Global reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img, picture, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

a {
	text-decoration: none;
	color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--idia-color-focus-ring);
	outline-offset: 2px;
}

/* Standard WP visually-hidden utility, used for accessible text that
   accompanies decorative icons (rating stars, "opens in new tab", etc). */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   6. Global layout rules
   ========================================================================== */

body {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	letter-spacing: var(--letter-spacing-normal);
	color: var(--idia-color-text);
	background-color: var(--idia-color-background);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--idia-color-dark-blue);
	margin-bottom: var(--space-sm);
}

h1, h2 { text-transform: var(--heading-text-transform); }
h3, h4, h5, h6 { text-transform: none; }

p {
	margin-bottom: var(--space-md);
	text-transform: none;
}

ul li, ol li { margin-bottom: var(--space-xs); }

a {
	color: var(--idia-color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

button,
.idia-button,
input[type="submit"],
input[type="button"] {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	text-transform: var(--button-text-transform);
	letter-spacing: var(--button-letter-spacing);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-md);
	border-radius: 4px;
	background-color: var(--idia-color-dark-blue);
	color: var(--idia-color-white);
	box-shadow: var(--shadow-card);
}

button:hover, .idia-button:hover { box-shadow: var(--shadow-elevated); }

/* ==========================================================================
   5. Brand-specific rules
   ========================================================================== */

.idia-signature {
	font-family: var(--font-signature);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-normal);
	color: var(--idia-color-dark-blue);
}

.idia-bg-pastel-pink,
.idia-bg-pastel-purple,
.idia-bg-pastel-yellow,
.idia-bg-pastel-green,
.idia-bg-pastel-blue {
	color: var(--idia-color-dark-blue) !important;
}

.idia-bg-pastel-pink { background-color: var(--idia-color-pastel-pink); }
.idia-bg-pastel-purple { background-color: var(--idia-color-pastel-purple); }
.idia-bg-pastel-yellow { background-color: var(--idia-color-pastel-yellow); }
.idia-bg-pastel-green { background-color: var(--idia-color-pastel-green); }
.idia-bg-pastel-blue { background-color: var(--idia-color-pastel-blue); }

.has-pastel-pink-background-color,
.has-pastel-purple-background-color,
.has-pastel-yellow-background-color,
.has-pastel-green-background-color,
.has-pastel-blue-background-color {
	color: var(--idia-color-dark-blue) !important;
}

.idia-bg-pastel-gradient {
	background-image: linear-gradient(135deg, var(--idia-color-pastel-pink), var(--idia-color-pastel-blue));
}

.idia-bg-pastel-gradient .idia-text-panel {
	background-color: var(--idia-color-white);
	color: var(--idia-color-dark-blue);
	padding: var(--space-md);
	border-radius: 4px;
}

.idia-content-narrow,
article.idia-post,
.wp-block-group.idia-content-narrow,
.wp-block-post-content {
	max-width: var(--idia-content-max-width);
	margin-left: auto;
	margin-right: auto;
}

.idia-card {
	background-color: var(--idia-color-white);
	border-radius: 6px;
	box-shadow: var(--shadow-card);
	padding: var(--space-md);
}

/* ==========================================================================
   7. SVG recoloring support
   ========================================================================== */

.idia-icon-svg {
	width: var(--icon-size-md);
	height: var(--icon-size-md);
	color: var(--idia-icon-color);
	fill: none;
	stroke: currentColor;
	flex-shrink: 0;
}

.idia-icon-svg--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.idia-icon-svg--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.idia-icon-svg--filled { fill: currentColor; stroke: none; }
.idia-icon-svg--inverted { color: var(--idia-icon-color-inverted); }
.idia-icon-svg--muted { color: var(--idia-icon-color-muted); }

button .idia-icon-svg,
.idia-button .idia-icon-svg { color: currentColor; }

.idia-divider-svg {
	color: var(--idia-color-gray);
	stroke: currentColor;
	fill: none;
	width: 100%;
	height: 1rem;
}

.idia-bunting-image img,
.idia-logo-image img {
	width: auto;
	height: auto;
}

/* ==========================================================================
   8. Image handling support
   ========================================================================== */

.idia-figure {
	margin: 0;
	position: relative;
	overflow: hidden;
}

.idia-figure img,
.idia-responsive-image,
.idia-placeholder-image {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.idia-figure--standard { aspect-ratio: var(--aspect-ratio-standard); }
.idia-figure--square { aspect-ratio: var(--aspect-ratio-square); }
.idia-figure--wide { aspect-ratio: var(--aspect-ratio-wide); }
.idia-figure--hero { aspect-ratio: var(--aspect-ratio-hero); }

.idia-figure--standard img,
.idia-figure--square img,
.idia-figure--wide img,
.idia-figure--hero img { height: 100%; }

.idia-figure-caption {
	font-size: 0.875rem;
	color: var(--idia-color-text-muted);
	margin-top: var(--space-xs);
	text-transform: none;
}

.idia-illustration,
.idia-bunting-image img {
	aspect-ratio: auto;
	object-fit: contain;
	width: auto;
	max-width: 100%;
}

.idia-placeholder-image {
	border: 1px dashed var(--idia-color-gray);
}

.woocommerce ul.products li.product img {
	aspect-ratio: var(--aspect-ratio-square);
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   9. Gutenberg custom block styles (front-end render)
   ========================================================================== */

.is-style-signature {
	font-family: var(--font-signature);
	font-weight: var(--font-weight-regular);
	color: var(--idia-color-dark-blue);
	font-size: 1.5rem;
}

.is-style-editorial {
	text-transform: none;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-tight);
	border-bottom: 2px solid var(--idia-color-dark-blue);
	padding-bottom: var(--space-xs);
}

.is-style-brand-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--idia-color-dark-blue);
	border: 2px solid var(--idia-color-dark-blue);
	box-shadow: none;
}

.is-style-recipe-steps {
	list-style: none;
	counter-reset: idia-recipe-step;
}

.is-style-recipe-steps li {
	counter-increment: idia-recipe-step;
	position: relative;
	padding-left: var(--space-lg);
	margin-bottom: var(--space-sm);
}

.is-style-recipe-steps li::before {
	content: counter(idia-recipe-step);
	position: absolute;
	left: 0;
	top: 0;
	width: var(--icon-size-md);
	height: var(--icon-size-md);
	border-radius: 50%;
	background-color: var(--idia-color-dark-blue);
	color: var(--idia-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	font-size: 0.875rem;
}

.is-style-editorial-pullquote {
	border-left: none;
	padding: var(--space-md) var(--space-lg);
	text-align: center;
	font-size: 1.5rem;
	font-weight: var(--font-weight-medium);
	color: var(--idia-color-dark-blue);
}

.is-style-bunting-divider img {
	object-fit: contain;
	aspect-ratio: auto;
	width: 100%;
	height: auto;
	max-height: 60px;
}

.is-style-pastel-notice {
	padding: var(--space-md);
	border-radius: 6px;
	color: var(--idia-color-dark-blue) !important;
}

/* ==========================================================================
   10. Long-form content ("prose") rules
   ==========================================================================
   Applied via the .idia-prose wrapper class around the_content() output
   (single.php) and any future recipe/article template. The global
   reset above strips list markers and margins for utility contexts
   (nav menus, cards, grids) — prose content needs real bullets/numbers
   and blockquote treatment restored, scoped so it never leaks into
   navigation or component markup elsewhere on the page.
   ========================================================================== */

.idia-prose p {
	margin-bottom: var(--space-md);
}

.idia-prose ul,
.idia-prose ol {
	list-style: revert;
	padding-left: 1.5em;
	margin-bottom: var(--space-md);
}

.idia-prose li {
	margin-bottom: var(--space-xs);
}

.idia-prose h2,
.idia-prose h3,
.idia-prose h4 {
	margin-top: var(--space-lg);
}

.idia-prose blockquote {
	border-left: 3px solid var(--idia-color-dark-blue);
	padding: var(--space-sm) var(--space-md);
	margin: var(--space-md) 0;
	color: var(--idia-color-text);
	font-style: normal;
	background-color: var(--idia-color-white);
}

.idia-prose blockquote p:last-child {
	margin-bottom: 0;
}

.idia-prose img,
.idia-prose figure {
	border-radius: 4px;
	margin: var(--space-md) 0;
}

.idia-prose a {
	text-decoration-thickness: 1px;
}

.idia-prose hr {
	border: none;
	border-top: 1px solid var(--idia-color-gray);
	margin: var(--space-lg) 0;
}

/* ==========================================================================
   Structural layout
   ========================================================================== */

.idia-header-inner,
.idia-footer-inner,
.idia-content-inner {
	max-width: var(--idia-max-width);
	margin: 0 auto;
	padding: 0 var(--space-sm);
}

.idia-mobile-drawer-toggle { display: none; }

@media (max-width: 768px) {
	.idia-primary-nav { display: none; }
	.idia-mobile-drawer-toggle { display: inline-block; }
}

/* ==========================================================================
   WooCommerce typography and color inheritance
   ========================================================================== */

.woocommerce,
.woocommerce-page {
	font-family: var(--font-primary);
	line-height: var(--line-height-body);
	color: var(--idia-color-text);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	text-transform: var(--button-text-transform);
	letter-spacing: var(--button-letter-spacing);
	background-color: var(--idia-color-dark-blue);
	color: var(--idia-color-white);
	box-shadow: var(--shadow-card);
}

.woocommerce ul.products li.product .price {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	color: var(--idia-color-dark-blue);
}

.woocommerce span.onsale {
	background-color: var(--idia-color-dark-blue);
	color: var(--idia-color-white);
}



/* ==========================================================================
   Wide footer section (rebuilt from single-line footer)
   ==========================================================================
   Uses the dark-blue-background/white-text inversion already used by
   buttons and sale badges elsewhere — a valid, pre-established
   contrast pattern (never white text on a pastel background; this is
   white text on a solid dark-blue background, which is different).
   ========================================================================== */

.idia-site-footer {
	background-color: var(--idia-color-dark-blue);
	color: var(--idia-color-white);
	margin-top: var(--space-xl);
}

.idia-footer-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}

.idia-footer-column {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.idia-footer-heading {
	color: var(--idia-color-white);
	font-size: 1rem;
	margin-bottom: var(--space-xs);
}

.idia-footer-site-title {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	font-size: 1.25rem;
	color: var(--idia-color-white);
	text-transform: var(--heading-text-transform);
	margin: 0;
}

.idia-footer-logo--inverted img {
	max-height: 2.5rem;
}

.idia-footer-tagline {
	color: var(--idia-color-white);
	opacity: 0.85;
	font-size: 0.9375rem;
	margin: 0;
}

.idia-footer-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.idia-footer-menu a {
	color: var(--idia-color-white);
	text-decoration: none;
	font-size: 0.9375rem;
	opacity: 0.9;
	transition: opacity 0.15s ease;
}

.idia-footer-menu a:hover {
	opacity: 1;
	text-decoration: underline;
}

.idia-footer-menu a:focus-visible {
	outline: 2px solid var(--idia-color-white);
	outline-offset: 2px;
}

.idia-footer-contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.idia-footer-contact-list a {
	color: var(--idia-color-white);
	opacity: 0.9;
	font-size: 0.9375rem;
}

.idia-footer-contact-list a:hover {
	opacity: 1;
	text-decoration: underline;
}

.idia-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.idia-footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
}

.idia-footer-copyright {
	color: var(--idia-color-white);
	opacity: 0.8;
	font-size: 0.8125rem;
	margin: 0;
	text-transform: none;
}

.idia-footer-legal-link {
	color: var(--idia-color-white);
	opacity: 0.8;
	font-size: 0.8125rem;
	text-decoration: underline;
}

.idia-footer-legal-link:hover {
	opacity: 1;
}

/* Responsive: collapse to a single stacked column on mobile */
@media (max-width: 768px) {
	.idia-footer-columns {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.idia-footer-bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ==========================================================================
   Header navigation layout
   ==========================================================================
   The base reset strips list styling but doesn't lay menus out
   horizontally, and .idia-header-inner had no flex rule — this fixes
   both, plus removes the global underline rule for nav links and adds
   branded hover/focus/active states.
   ========================================================================== */

.idia-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
}

.idia-site-branding {
	flex-shrink: 0;
}

.idia-site-title {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	font-size: 1.25rem;
	text-transform: var(--heading-text-transform);
	text-decoration: none;
	color: var(--idia-color-dark-blue);
}

/* Primary nav: horizontal row on desktop */
.idia-primary-nav {
	flex: 1 1 auto;
}

.idia-primary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.idia-primary-menu li {
	margin-bottom: 0;
	position: relative;
}

.idia-primary-menu a {
	display: inline-block;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	color: var(--idia-color-dark-blue);
	padding: var(--space-xs) 0;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease;
}

.idia-primary-menu a:hover,
.idia-primary-menu a:focus-visible {
	border-bottom-color: var(--idia-color-dark-blue);
}

.idia-primary-menu .current-menu-item > a,
.idia-primary-menu .current_page_item > a {
	border-bottom-color: var(--idia-color-dark-blue);
	font-weight: var(--font-weight-bold);
}

/* Submenus (WordPress default .sub-menu): pure-CSS dropdown on hover/focus */
.idia-primary-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 200px;
	flex-direction: column;
	gap: 0;
	padding: var(--space-xs);
	background-color: var(--idia-color-pastel-blue);
	border: 2px solid var(--idia-color-dark-blue);
	border-radius: 8px;
}

.idia-primary-menu li:hover > .sub-menu,
.idia-primary-menu li:focus-within > .sub-menu {
	display: flex;
}

.idia-primary-menu .sub-menu li {
	width: 100%;
}

.idia-primary-menu .sub-menu a {
	display: block;
	padding: var(--space-xs) var(--space-sm);
	border-bottom: none;
	border-radius: 6px;
}

.idia-primary-menu .sub-menu a:hover,
.idia-primary-menu .sub-menu a:focus-visible {
	background-color: var(--idia-color-white);
}

/* Mobile drawer toggle: needs a visible hamburger icon — currently
   only screen-reader text exists in the markup. Drawn in pure CSS
   with three stacked bars, no SVG required. */
.idia-mobile-drawer-toggle {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 8px;
}

.idia-mobile-drawer-toggle::before,
.idia-mobile-drawer-toggle::after,
.idia-mobile-drawer-toggle span[aria-hidden] {
	content: "";
	position: absolute;
	left: 50%;
	width: 1.5rem;
	height: 2px;
	background-color: var(--idia-color-dark-blue);
	transform: translateX(-50%);
}

.idia-mobile-drawer-toggle::before { top: 0.75rem; }
.idia-mobile-drawer-toggle::after { top: 1.25rem; }

/* Mobile drawer nav: stacks vertically (it's an off-canvas menu, not
   a horizontal bar), unlike .idia-primary-menu above. */
.idia-mobile-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.idia-mobile-menu li {
	margin-bottom: 0;
}

.idia-mobile-menu a {
	display: block;
	padding: var(--space-sm);
	color: var(--idia-color-dark-blue);
	text-decoration: none;
	border-bottom: 1px solid var(--idia-color-pastel-blue);
}

.idia-mobile-drawer-nav {
	background-color: var(--idia-color-white);
	padding: var(--space-sm);
}


/* ==========================================================================
   Mobile drawer: slide-in overlay panel
   ==========================================================================
   Mirrors the mini-cart's pattern: fixed overlay + sliding panel,
   visibility controlled by an "is-open" class (not [hidden]) so the
   transform/opacity transitions can actually animate. Slides from the
   right, matching the mini-cart's direction for consistency.
   ========================================================================== */

.idia-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
}

.idia-mobile-drawer.is-open {
	pointer-events: auto;
}

.idia-mobile-drawer-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(13, 34, 64, 0.6);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.idia-mobile-drawer.is-open .idia-mobile-drawer-overlay {
	opacity: 1;
}

.idia-mobile-drawer-nav {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(85vw, 320px);
	background-color: var(--idia-color-white);
	transform: translateX(100%);
	transition: transform 0.25s ease;
	padding: var(--space-lg) var(--space-md) var(--space-md);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.idia-mobile-drawer.is-open .idia-mobile-drawer-nav {
	transform: translateX(0);
}

.idia-mobile-drawer-close {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 8px;
	background-color: var(--idia-color-pastel-purple);
	color: var(--idia-color-dark-blue);
	font-size: 1.5rem;
	line-height: 1;
}

.idia-mobile-drawer-close:hover {
	background-color: var(--idia-color-pastel-blue);
}

.idia-mobile-drawer-close:focus-visible {
	outline: 2px solid var(--idia-color-focus-ring);
	outline-offset: 2px;
}

.idia-mobile-menu {
	margin-top: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.idia-mobile-menu li {
	margin-bottom: 0;
}

.idia-mobile-menu a {
	display: block;
	padding: var(--space-sm);
	color: var(--idia-color-dark-blue);
	text-decoration: none;
	border-bottom: 1px solid var(--idia-color-pastel-blue);
}

.idia-mobile-menu a:focus-visible {
	outline: 2px solid var(--idia-color-focus-ring);
	outline-offset: 2px;
}

/* Body scroll lock while the drawer is open */
body.idia-mobile-drawer-open {
	overflow: hidden;
}

/* Reduced motion: instant show/hide, no slide/fade animation */
@media (prefers-reduced-motion: reduce) {
	.idia-mobile-drawer-overlay,
	.idia-mobile-drawer-nav {
		transition: none !important;
	}
}


/* Generic page template spacing (page.php) */
.idia-page-header {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-md);
}

.idia-page-content {
	margin-bottom: var(--space-xl);
}