/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */
/*
1. SETTINGS
    1.1. Root Variables (Colors, Typography, Spacing, etc.)
2. GENERIC STYLES
    2.1. Reset & Box Sizing
    2.2. Base HTML & Body
3. BASE ELEMENT STYLES
    3.1. Typography (Headings, Paragraphs, Links)
    3.2. Lists
    3.3. Images
    3.4. Buttons (Base)
    3.5. Icons
4. OBJECTS & UTILITIES
    4.1. Container
    4.2. Visually Hidden
    4.3. Enhanced Focus Styles (Global)
5. COMPONENTS
    5.1. Site Header & Main Navigation
    5.2. Header Actions (Search/Accessibility Toggles)
    5.3. Search Overlay
    5.4. Accessibility Panel
    5.5. Hero Sections (Stacking)
    5.6. Post Header (Single Post - Sticky)
    5.7. Featured Image (Single Post)
    5.8. Post Content Formatting
    5.9. Page Links (Multi-page Posts)
    5.10. Content Listing Sections (Category/Featured/Related Posts Grids)
        5.10.1. Section Title
        5.10.2. Posts Grid
        5.10.3. Post Item Card
    5.11. Product Showcase (Card Style)
    5.12. Scroll Indicator Toolbar
    5.13. Pagination (Blog Index/Archive)
    5.14. Post Navigation (Single Post - Prev/Next)
    5.15. Comments Area
        5.15.1. Comment List & Items
        5.15.2. Comment Form
        5.15.3. Comment Navigation
    5.16. 404 Page Specific Styles
    5.17. Site Footer
6. ANIMATIONS
    6.1. Keyframes
    6.2. Animation Trigger Classes
7. ACCESSIBILITY OVERRIDES
    7.1. High Contrast Mode
8. RESPONSIVENESS & REDUCED MOTION
    8.1. Reduced Motion Preferences
    8.2. Smaller Desktops & Large Tablets (~1400px to ~993px)
    8.3. Tablet (Portrait) & Mobile Nav Toggle (~992px)
    8.4. Mobile (Large) & Tablet (Portrait) Layout Shifts (~768px)
    8.5. Mobile (Small) Typographic & Spacing Adjustments (~480px)
9. Cookie Consent (Banner, Modal)
   ========================================================================== */

/* ==========================================================================
   1. SETTINGS
   ========================================================================== */

/* --- 1.1. Root Variables --- */
:root {
	/* Colors */
	--color-background: #FDFDFD;
	--color-surface: #FFFFFF;
	--color-text: #222222;
	--color-text-muted: #555555;
	--color-border: #EAEAEA;
	--color-accent-hover: #000000;
	--color-accent-focus: #4f46e5;
	/* Indigo-like focus color */
	--color-focus-bg: rgba(79, 70, 229, 0.1);
	--color-hero-bg: #DBDADA;

	/* High Contrast Colors */
	--hc-background: #000000;
	--hc-text: #FFFFFF;
	--hc-text-muted: #DDDDDD;
	/* Lighter gray for muted text in HC */
	--hc-accent-focus: #FFFF00;
	/* Yellow focus */
	--hc-focus-bg: rgba(255, 255, 0, 0.2);
	--hc-border: #888888;

	/* Typography */
	--font-sans: 'Inter', sans-serif;
	--font-serif: 'Playfair Display', serif;

	/* Spacing */
	--space-xs: 0.5rem;
	/* 8px */
	--space-sm: 1rem;
	/* 16px */
	--space-md: 1.5rem;
	/* 24px */
	--space-lg: 2.5rem;
	/* 40px */
	--space-xl: 4rem;
	/* 64px */
	--space-xxl: 6rem;
	/* 96px */

	/* Borders & Transitions */
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--transition-duration: 0.6s;
	/* Main animation duration */
	--transition-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	/* Ease Out Quad */

	/* Layout */
	--header-height: 80px;
	--container-max-width: 1600px;
	--container-padding: var(--space-sm);
	--content-max-width: 75ch;
	/* Optimal for reading */

	/* Toolbar specific */
	--toolbar-width-collapsed: 60px;
	--toolbar-width-expanded: 200px;
	--toolbar-transition: width 0.3s ease, background-color 0.3s ease, padding 0.3s ease;

	/* Cookie Consent specific colors */
	--gray-800: #1f2937;
	--slate-100: #f1f5f9;
	--slate-600: #475569;
	--blue-300: #93c5fd;
	--blue-200: #bfdbfe;
	--blue-600: #2563eb;
	--blue-700: #1d4ed8;
	--white: #ffffff;
	--slate-500: #64748b;
	--slate-700: #334155;
	--slate-200: #e2e8f0;
	--slate-900: #0f172a;
	--slate-400: #94a3b8;
	--slate-800: #1e293b;
	--slate-50: #f8fafc;
	--slate-300: #cbd5e1;
}

/* ==========================================================================
   2. GENERIC STYLES
   ========================================================================== */

/* --- 2.1. Reset & Box Sizing --- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* --- 2.2. Base HTML & Body --- */
html {
	font-size: 100%;
	/* Typically 16px */
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-padding-top: calc(var(--header-height) + 1rem);
	/* Adjust scroll target position */
}

body {
	font-family: var(--font-sans);
	color: var(--color-text);
	background-color: var(--color-background);
	line-height: 1.7;
	min-height: 100vh;
	grid-template-rows: auto 1fr auto;
	/* Header, Main (flexible), Footer */
	font-weight: 300;
	overflow-x: hidden;
	/* Prevent horizontal scroll */
	transition: background-color 0.3s ease, color 0.3s ease;
}

main {
	display: block;
	/* Ensure main is treated as a block-level element */
}

/* ==========================================================================
   3. BASE ELEMENT STYLES
   ========================================================================== */

/* --- 3.1. Typography --- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 1em;
	letter-spacing: 0.5px;
}

h1 {
	font-size: clamp(3rem, 6vw, 3.5rem);
}

/* Adjusted clamp for h1 */
h2 {
	font-size: clamp(2rem, 4vw, 2.75rem);
}

h3 {
	font-size: clamp(1.3rem, 3vw, 1.6rem);
}

/* h4, h5, h6 can have more specific styles later or inherit */
p {
	margin-bottom: 1.5em;
	max-width: var(--content-max-width);
	/* Optimal reading line length */
}

a {
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, outline-color 0.3s ease, padding 0.3s ease, transform 0.2s ease;

}

article a {
	text-decoration: underline;
	font-weight: 500;
}

article p em {
	font-weight: 500;
}

a:hover {
	color: var(--color-accent-hover);
}

/* --- 3.2. Lists --- */
ul,
ol {
	list-style: none;
	/* Base reset, can be overridden in components */
}

/* --- 3.3. Images --- */
img {
	max-width: 100%;
	display: block;
	height: auto;
	border-radius: var(--border-radius-sm);
	background-color: #eee;
	/* Placeholder background */
}

/* --- 3.4. Buttons (Base) --- */
button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background-color: transparent;
	padding: 0;
	color: inherit;
	text-align: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* --- 3.5. Icons --- */
.icon {
	/* Basic icon class if used with SVG <use> or similar */
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
	fill: currentColor;
}

/* ==========================================================================
   4. OBJECTS & UTILITIES
   ========================================================================== */

/* --- 4.1. Container --- */
.container {
	width: 90%;
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

/* --- 4.2. Visually Hidden --- */
.visually-hidden,
.screen-reader-text {
	/* Common WP class */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
	/* Add this for single line text */
	clip-path: inset(50%);
	/* Modern alternative to clip */
}

/* --- 4.3. Enhanced Focus Styles (Global) --- */
a:focus-visible,
button:focus-visible,
[tabindex="0"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--color-accent-focus);
	outline-offset: 3px;
	background-color: var(--color-focus-bg);
	border-radius: 3px;
}

/* Remove default outline when focus is not programmatically visible (e.g., mouse click) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex="0"]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
	outline: none;
}

.wpcf7-text {
	border: 1px solid var(--color-border);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--border-radius-sm);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wpcf7-submit {
	margin-top: var(--space-sm);
	border: 1px solid var(--color-border);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--border-radius-sm);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-text-muted);
	background-color: #ffffff;
	transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.wpcf7-submit:hover {
	border-color: var(--color-text);
	color: var(--color-text);
	background-color: transparent;
	cursor: pointer;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--color-border);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #000000;
}

.wpcf7-form-control-wrap {
	position: relative;
	display: block;
	margin: auto;
	width: 100%;

}

.wpcf7 p {
	width: 100%;
}

.wpcf7-list-item {
	display: inline-block;
	margin: 2em 0 0 0;
}


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- 5.1. Site Header & Main Navigation --- */
.site-header {
	background-color: var(--color-background);
	padding: var(--space-sm) 0;
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-height);
	display: flex;
	align-items: center;
	transition: background-color 0.3s ease, border-color 0.3s ease;
	border-bottom: 1px solid var(--color-border);
}

.site-header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: nowrap;
	/* Ensures logo and actions stay on one line on desktop */
	width: 100%;
	/* Ensure container takes full width within header padding area */
}

.site-logo {
	flex-shrink: 0;
}

.site-logo img {
	max-width: 400px;
	/* Default desktop logo size */
	width: 100%;
	background-color: transparent;
	/* Assuming logo has transparency */
}

/* Base styles for the high-contrast logo - hidden by default */
.site-logo .high-contrast {
	display: none;
}

/* Style for the default logo - visible by default */
.site-logo .logo:not(.high-contrast) {
	display: block;
}

p.site-title {
	/* For text-based site titles */
	margin: 0;
}

.site-logo a,
p.site-title a {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--color-text);
	text-decoration: none;
	letter-spacing: 1px;
	border-bottom: none;
}

.site-logo a:hover,
p.site-title a:hover {
	color: var(--color-text-muted);
	border-bottom: none;
}

.main-navigation {
	flex-grow: 1;
	flex-shrink: 1;
	/* Allow shrinking */
	min-width: 0;
	/* Prevent overflow on flex item */
}

.main-navigation ul#primary-menu {
	/* Target WP generated menu */
	display: flex;
	justify-content: center;
	/* Or flex-end if aligned to right */
	gap: var(--space-lg);
	flex-wrap: nowrap;
	/* Prevent wrapping on desktop */
	list-style: none;
	padding: 0;
	margin: 0;
}

.main-navigation a {
	display: inline-block;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--color-text);
	padding: var(--space-xs) 0 calc(var(--space-xs) + 2px) 0;
	/* Space for underline */
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: none;
	background-image: linear-gradient(var(--color-text), var(--color-text));
	background-size: 0% 2px;
	background-position: center bottom;
	background-repeat: no-repeat;
	transition: background-size 0.3s var(--transition-timing), color 0.3s ease;
}

.main-navigation a:hover,
.main-navigation a:focus-visible,
.main-navigation .current-menu-item>a,
/* WP class */
.main-navigation a.active {
	/* Common active class */
	color: var(--color-text);
	background-size: 80% 2px;
}

/* Specific focus style for nav links to override global if needed and add offset */
.main-navigation a:focus-visible {
	outline-offset: 6px;
	/* More offset for better visibility */
}

/* Mobile Menu Toggle Button - Initially hidden on desktop (now part of header-actions) */
.menu-toggle {
	display: none;
	/* Hidden on desktop */
	/* Styles from action-button will apply when shown */
}





/* New: Mobile Menu Close Button */
.menu-close {
	display: none;
	/* Hidden by default on desktop */
	position: absolute;
	top: var(--space-sm);
	/* Adjust as needed to align with header height */
	right: var(--space-sm);
	/* Aligned with header padding */
	width: 40px;
	height: 40px;
	font-size: 1.5rem;
	/* Adjust icon size */
	background: none;
	border: none;
	color: var(--color-text);
	/* Use main text color */
	cursor: pointer;
	z-index: 1010;
	/* Ensure it's above the menu overlay */
	padding: var(--space-xs);
	line-height: 1;
	transition: color 0.3s ease;
}

.menu-close:hover,
.menu-close:focus-visible {
	color: var(--color-accent-hover);
	/* Match hover color of other buttons */
	outline: 3px solid var(--color-accent-focus);
	outline-offset: 3px;
	border-radius: 50%;
	/* Make it circular like other action buttons */
	background-color: var(--color-focus-bg);
}

@media (max-width: 992px) {
	/* ... (Your existing .main-navigation.toggled-on styles) ... */

	.main-navigation.toggled-on .menu-close {
		display: flex;
		/* Show the close button when mobile nav is open */
		align-items: center;
		justify-content: center;
		/* Re-position it if needed for the full-screen overlay */
		top: var(--space-md);
		/* Example: Adjust top position for overlay */
		right: var(--space-md);
		/* Example: Adjust right position for overlay */
		color: var(--color-text);
		/* Ensure good contrast on mobile menu background */
	}

	.main-navigation.toggled-on .menu-close:hover,
	.main-navigation.toggled-on .menu-close:focus-visible {
		color: var(--color-accent-hover);
		background-color: var(--color-focus-bg);
	}
}

/* High Contrast Mode Adjustments for the new button */
body.high-contrast {
	.menu-close {
		color: var(--hc-text);
	}

	.menu-close:hover,
	.menu-close:focus-visible {
		color: var(--hc-accent-focus);
		background-color: var(--hc-focus-bg);
		border-color: var(--hc-accent-focus);
	}

	.main-navigation.toggled-on .menu-close {
		color: var(--hc-text);
	}

	.main-navigation.toggled-on .menu-close:hover,
	.main-navigation.toggled-on .menu-close:focus-visible {
		color: var(--hc-accent-focus);
		background-color: var(--hc-focus-bg);
	}
}

/* Reduced Motion Preference adjustments */
@media (prefers-reduced-motion: reduce) {

	.menu-close:hover,
	.menu-close:focus-visible {
		background-color: transparent !important;
		/* Disable background transition */
		transform: none !important;
		/* Disable any hover transform */
	}
}





















/* --- 5.2. Header Actions (Search/Accessibility Toggles) --- */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-shrink: 0;
	/* Prevent shrinking */
	position: relative;
	/* For positioning accessibility panel */
}

.action-button {
	/* For search, accessibility trigger etc. */
	width: 40px;
	height: 40px;
	font-size: 1.2rem;
	/* Icon size */
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-text-muted);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.action-button:hover {
	background-color: var(--color-text);
	color: var(--color-background);
	border-color: var(--color-text);
}

/* --- 5.3. Search Overlay --- */
.search-overlay {
	position: fixed;
	inset: 0;
	/* Covers the entire viewport */
	background-color: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 1000;
	/* Above header */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.search-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
	/* Show immediately */
}

.search-overlay__content {
	position: relative;
	width: 100%;
	max-width: 600px;
}

.search-overlay label {
	/* Hide label accessibly */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.search-overlay__input,
/* General class */
.search-overlay .search-field {
	/* WP search form field class */
	width: 100%;
	font-size: 1.5rem;
	padding: var(--space-sm) var(--space-xs);
	border: none;
	border-bottom: 2px solid var(--color-surface);
	/* White underline */
	background-color: transparent;
	color: var(--color-surface);
	/* White text */
	text-align: left;
	outline: none;
	/* Handled by focus-visible */
	transition: border-color 0.3s ease;
}

.search-overlay__input::placeholder {
	color: rgba(255, 255, 255, 0.6);
	/* Lighter placeholder */
}

/* Override global focus-visible for this specific context if needed */
.search-overlay__input:focus-visible,
.search-overlay .search-field:focus-visible {
	border-bottom-color: var(--color-surface);
	/* Or an accent color */
	background-color: transparent;
	/* Ensure no BG from global */
	outline: none;
	/* Remove global outline if it conflicts visually here */
}

/* Ensure no outline for non-keyboard focus */
.search-overlay__input:focus:not(:focus-visible),
.search-overlay .search-field:focus:not(:focus-visible) {
	outline: none;
}

.search-overlay__close {
	position: absolute;
	top: calc(-1 * var(--space-lg) - 20px);
	/* Position above the input */
	right: 0;
	font-size: 2rem;
	color: var(--color-surface);
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-xs);
	/* Easier to click */
	line-height: 1;
}

.search-overlay__close:hover {
	color: rgba(255, 255, 255, 0.7);
}

/* --- 5.4. Accessibility Panel --- */
.accessibility-panel {
	position: absolute;
	top: calc(100% + var(--space-sm));
	/* Position below the trigger */
	right: 0;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-md);
	padding: var(--space-md);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	z-index: 110;
	/* Above header content, below overlay */
	min-width: 220px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	/* Start slightly up */
	transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease;
}

.accessibility-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	/* Move to final position */
	transition-delay: 0s;
}

.accessibility-panel h4 {
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: var(--space-sm);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.accessibility-panel ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.accessibility-panel li {
	margin-bottom: var(--space-sm);
}

.accessibility-panel li:last-child {
	margin-bottom: 0;
}

.accessibility-panel button {
	width: 100%;
	text-align: left;
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
	background-color: var(--color-background);
	/* Default state */
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.accessibility-panel button:hover {
	background-color: #f0f0f0;
	/* Slightly darker background on hover */
	border-color: #ccc;
	/* Slightly darker border */
}

.accessibility-panel button[aria-pressed="true"] {
	font-weight: 600;
	background-color: var(--color-focus-bg);
	/* Use focus background */
	border-color: var(--color-accent-focus);
	/* Use focus color */
	color: var(--color-accent-focus);
	/* To match border */
}

.font-size-controls {
	display: flex;
	gap: var(--space-sm);
}

.font-size-controls button {
	flex: 1;
	/* Distribute space equally */
	text-align: center;
	font-weight: 600;
	padding: var(--space-xs);
}

#font-size-reset {
	/* ID for the reset button */
	margin-top: var(--space-xs);
	font-weight: 400;
	/* Normal weight */
	border-style: dashed;
	/* Visual distinction */
}

/* --- 5.5. Hero Sections (Stacking) --- */
.hero-stacking-container {
	position: relative;
	/* Establishes stacking context for sticky children */
}

.hero-section {
	display: flex;
	/* Using flex for alignment */
	align-items: center;
	min-height: 100vh;
	/* Full viewport height */
	background-color: var(--color-hero-bg);
	/* Fallback if no image */
	padding: var(--space-xl) 0;
	text-align: left;
	position: relative;
	/* Needed for z-index stacking of background and content */
	overflow: hidden;
	/* Prevent content overflow from scaled images */
}

/* Make subsequent hero sections sticky */
.hero-section:nth-child(n+2) {
	position: sticky;
	top: var(--header-height);
	/* Stick below the header */
	/* z-index needs to be lower than the one above it for stacking */
}

.hero-section:nth-child(2) {
	z-index: 2;
}

.hero-section:nth-child(3) {
	z-index: 3;
}

/* Add more if you have more than 3, or manage via JS if dynamic */
.hero-section .container {
	position: relative;
	/* Ensure content is above background */
	z-index: 2;
	/* Above background image link */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	align-items: center;
	gap: var(--space-xl);
}

.hero-content {
	max-width: 85ch;
	/* Good readability for hero text */
}

/* Style text for better readability over images */
.hero-content h1 {
	color: var(--color-surface);
	/* White text by default over dark overlay */
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	/* Subtle shadow for contrast */
}

.hero-content p {
	color: var(--color-surface);
	font-weight: 500;
	font-size: 1.5em;
}


.hero-content .cta-button {
	/* Style for Call To Action buttons in hero */
	background-color: var(--color-text);
	/* Or an accent color */
	color: var(--color-background);
	border: 2px solid var(--color-text);
	/* Match general button border */
	padding: var(--space-sm) var(--space-lg);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.hero-content .cta-button:hover {
	background-color: transparent;
	color: var(--color-surface);
	/* Match text color */
	border-color: var(--color-surface);
	/* Match text color */
	transform: translateY(-2px);
	/* Slight lift on hover */
}

/* Link wrapping the background image */
.hero-background-image-link {
	position: absolute;
	inset: 0;
	/* Cover the entire section */
	z-index: 1;
	/* Behind content */
	display: block;
	overflow: hidden;
	/* Clip image during scale */
}

.hero-background-image-link:focus-visible {
	outline: 3px solid var(--color-accent-focus);
	outline-offset: -4px;
	/* Inset outline for visibility on full-bleed element */
}

.hero-background-image-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Cover the area, may crop */
	border-radius: 0;
	/* No border radius for background */
	transition: transform 0.6s ease;
}

/* Dark overlay for text contrast, applied to the link */
.hero-background-image-link::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	/* Semi-transparent black */
	transition: background-color 0.3s ease;
}

/* Interaction effects on the background link */
.hero-background-image-link:hover img,
.hero-background-image-link:focus-visible img {
	/* transform: scale(1.03); Optional zoom effect */
}

.hero-background-image-link:hover::after,
.hero-background-image-link:focus-visible::after {
	background-color: rgba(0, 0, 0, 0.4);
	/* Slightly lighter on interaction */
}

/* --- 5.6. Post Header (Single Post - Sticky) --- */
.post-header {
	margin-bottom: var(--space-xl);
	position: sticky;
	top: var(--header-height);
	/* Stick below the main site header */
	background-color: var(--color-surface);
	z-index: 90;
	/* Below main header (100), above subsequent content */
	padding-top: var(--space-lg);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid transparent;
	/* Start transparent */
	transition: padding 0.4s var(--transition-timing), border-color 0.4s var(--transition-timing), box-shadow 0.4s var(--transition-timing);
}

.post-header .container {
	/* Inner container for alignment */
	padding-top: 0;
	/* Reset container padding if post-header has its own */
	padding-bottom: 0;
}

.post-category {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: var(--space-sm);
	border-bottom: none;
	transition: opacity 0.4s var(--transition-timing), height 0.4s var(--transition-timing), margin 0.4s var(--transition-timing), visibility 0s linear 0.4s;
}

.post-category:hover {
	color: var(--color-text);
}

.post-title {
	/* Also used for page titles */
	font-size: clamp(2.2rem, 5vw, 3.5rem);
	margin-bottom: var(--space-sm);
	line-height: 1.2;
	transition: font-size 0.4s var(--transition-timing), margin-bottom 0.4s var(--transition-timing), text-align 0.4s var(--transition-timing);
}

.post-meta {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	margin-bottom: 0;
	/* No margin if it's the last element before sticky shrink */
	transition: opacity 0.4s var(--transition-timing), height 0.4s var(--transition-timing), margin 0.4s var(--transition-timing), visibility 0s linear 0.4s;
}

.post-meta a {
	color: var(--color-text-muted);
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.3s ease;
}

.post-meta a:hover {
	text-decoration-color: currentColor;
}

/* Styles for when the post header becomes sticky (JS adds 'is-sticky' class) */
.post-header.is-sticky {
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom-color: var(--color-border);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.post-header.is-sticky .post-category,
.post-header.is-sticky .post-meta,
.post-header.is-sticky .social-share-container {
	opacity: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
	visibility: hidden;
	pointer-events: none;
	transition-delay: 0s;
	/* Hide immediately */
}

.post-header.is-sticky .post-title {
	font-size: clamp(1.3rem, 2.5vw, 1.5rem);
	/* Shrink font size */
	margin-bottom: 0;
	text-align: center;
	/* Center title when sticky and alone */
}

/* --- 5.7. Featured Image (Single Post) --- */
.featured-image {
	margin: var(--space-xl) 0;
}

.featured-image img {
	/* width: 100%; */
	height: auto;
	max-height: 60vh;
	/* Limit height */
	object-fit: cover;
	border-radius: var(--border-radius-md);
}

.featured-image figcaption {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--space-xs);
}

/* --- 5.8. Post Content Formatting --- */
.post-content {
	/* Class for the main article content area */
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
}

.post-content h2,
.post-content h3,
.post-content h4 {
	margin-top: 2em;
	margin-bottom: 1em;
}

.post-content p {
	font-size: 1.05rem;
	/* Slightly larger body text for articles */
	margin-bottom: 1.5em;
}

.post-content ul,
.post-content ol {
	margin-left: 1.5em;
	/* Indentation */
	margin-bottom: 1.5em;
	padding-left: 1em;
	/* Space for markers */
}

.post-content ul {
	list-style: disc;
}

.post-content ol {
	list-style: decimal;
}

.post-content li {
	margin-bottom: 0.75em;
}

.post-content blockquote {
	border-left: 4px solid var(--color-border);
	margin: var(--space-lg) 0;
	/* Vertical spacing */
	padding: var(--space-sm) var(--space-lg);
	/* Internal padding */
	font-size: 1.1rem;
	font-style: italic;
	color: var(--color-text-muted);
}

.post-content blockquote p {
	margin-bottom: 0;
	/* Remove paragraph margin inside blockquote */
	max-width: none;
	/* Allow blockquote text to be wider */
}

.post-content img {
	/* Images within content */
	margin: var(--space-lg) auto;
	/* Center images */
	max-width: 100%;
	/* Ensure responsiveness */
	height: auto;
	display: block;
	border-radius: var(--border-radius-md);
}

.post-content .alignwide {
	/* WordPress class */
	max-width: calc(var(--content-max-width) + 200px);
	margin-left: auto;
	margin-right: auto;
}

.post-content .alignfull {
	/* WordPress class */
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.post-content .aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
	/* Or table for older WP compatibility */
}

.post-content .alignleft {
	float: left;
	margin-right: var(--space-md);
	margin-bottom: var(--space-md);
}

.post-content .alignright {
	float: right;
	margin-left: var(--space-md);
	margin-bottom: var(--space-md);
}

.post-content>*:last-child {
	margin-bottom: 0;
	/* Remove margin from the last element in content */
}

/* Affiliate Link Style (example) */
.affiliate-link {
	font-weight: 600;
	border-bottom: 1px dotted var(--color-text-muted);
	color: var(--color-text);
}

.affiliate-link:hover {
	border-bottom-style: solid;
	color: var(--color-accent-hover);
}

/* --- 5.9. Page Links (Multi-page Posts, e.g. `` in WP) --- */
.page-links {
	margin: var(--space-xl) 0;
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
	text-align: center;
	font-weight: 600;
}

.page-links .page-links-title {
	/* WP class for "Pages:" text */
	margin-right: var(--space-sm);
}

.page-links a,
.page-links>span {
	/* Target direct span children for current page */
	display: inline-block;
	padding: var(--space-xs) var(--space-sm);
	margin: 0 var(--space-xs) var(--space-xs) 0;
	/* Spacing for wrapping */
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
	color: var(--color-text);
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.page-links a:hover {
	background-color: var(--color-focus-bg);
	border-color: var(--color-border);
	color: var(--color-text);
}

.page-links>span {
	/* Current page number (not a link) */
	background-color: var(--color-text);
	color: var(--color-surface);
	border-color: var(--color-text);
	cursor: default;
}

/* --- 5.10. Content Listing Sections (Category/Featured/Related Posts Grids) --- */
.category-showcase,
.featured-posts,
.related-posts {
	padding: var(--space-xl) 0;
	margin-top: var(--space-xl);
	/* Ensure spacing from previous elements */
	background-color: var(--color-background);
	position: relative;
	/* For potential z-index needs if overlapping */
	z-index: 5;
	/* Above sticky elements when scrolling past */
}

/* Ensure first content section after hero stack has margin */
.hero-stacking-container+* {
	/* Selects any sibling immediately after hero stack */
	margin-top: var(--space-xl);
}

.related-posts {
	/* Specific styling for related posts section */
	border-top: 1px solid var(--color-border);
}

/* --- 5.10.1. Section Title --- */
.section-title {
	text-align: left;
	/* Or center, depending on design */
	margin-bottom: var(--space-xl);
	font-weight: 600;
	/* Uses h2 clamp size by default if it's an h2 element */
}

.related-posts .section-title {
	font-size: clamp(1.5rem, 3vw, 1.8rem);
	/* Slightly smaller for related posts */
}

/* --- 5.10.2. Posts Grid --- */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	/* Responsive columns */
	gap: var(--space-xl) var(--space-lg);
	/* Row gap, Column gap */
}

/* --- 5.10.3. Post Item Card --- */
.post-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.post-item__image-link {
	/* display: block; */
	display: inherit;
	overflow: hidden;
	/* Contain image scale effect */
	border-radius: var(--border-radius-sm);
	background-color: #eee;
	/* Placeholder for image load */
}

.post-item__image {
	width: 100%;
	aspect-ratio: 5 / 4;
	/* Common aspect ratio for cards */
	object-fit: cover;
	transition: transform 0.6s var(--transition-timing);
}

.post-item__image-link:hover .post-item__image,
.post-item__image-link:focus-visible .post-item__image {
	transform: scale(1.05);
	/* Zoom in effect */
}

/* Add focus style to the link itself */
.post-item__image-link:focus-visible {
	outline: 2px solid var(--color-accent-focus);
	outline-offset: 2px;
}

.post-item__category {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: var(--space-xs);
	border-bottom: none;
	/* Removed underline from base 'a' */
}

.post-item__category:hover {
	color: var(--color-text);
}

.post-item__title {
	/* For card titles */
	font-size: clamp(1.2rem, 2.5vw, 1.4rem);
	font-weight: 600;
	margin-bottom: var(--space-sm);
	line-height: 1.4;
}

.post-item__title a {
	color: var(--color-text);
	border-bottom: none;
	/* Remove base 'a' underline */
	background-image: linear-gradient(var(--color-text), var(--color-text));
	background-size: 0% 1px;
	/* Initially hidden underline */
	background-position: left bottom;
	background-repeat: no-repeat;
	transition: background-size 0.4s ease;
	text-decoration: none;
}

.post-item__title a:hover {
	background-size: 100% 1px;
	/* Reveal underline on hover */
}

.post-item__read-more {
	display: inline-block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-text);
	letter-spacing: 0.5px;
	border: 1px solid transparent;
	/* For focus style alignment */
	padding: var(--space-xs) var(--space-sm);
	margin: 0 calc(-1 * var(--space-sm));
	/* Negative margin to align focus outline */
	border-radius: var(--border-radius-sm);
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.post-item__read-more:hover {
	color: var(--color-text);
	/* Or an accent color */
	border-color: var(--color-text);
	/* Show border on hover */
}

/* Read more focus should use global focus unless specific design needed */

/* --- 5.11. Product Showcase (Card Style) --- */
.product-showcase-container {
	/* Wrapper if needed, e.g., within post content */
	margin: var(--space-xl) 0;
}

.product-showcase-container .section-title {
	margin-bottom: var(--space-lg);
	font-size: clamp(1.3rem, 2.8vw, 1.5rem);
	/* Smaller title for subsection */
}

/* Re-use posts-grid for layout if structure is similar */
.product-showcase-container .posts-grid {
	gap: var(--space-lg);
}

.product-showcase {
	/* Individual product card */
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-md);
	padding: var(--space-lg);
	background-color: var(--color-surface);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-showcase:hover {
	transform: translateY(-4px);
	/* Lift effect */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
	/* Stronger shadow */
}

.product-showcase img {
	width: 100%;
	aspect-ratio: 1 / 1;
	/* Square image for products */
	object-fit: cover;
	margin-bottom: var(--space-sm);
	border-radius: var(--border-radius-sm);
	/* Slightly rounded image corners */
}

.product-showcase__content h4 {
	/* Product title */
	margin-bottom: var(--space-xs);
	font-size: 1.1rem;
	font-family: var(--font-sans);
	/* Use sans-serif for product titles */
	font-weight: 600;
}

.product-showcase__content p {
	/* Product description */
	font-size: 0.95rem;
	margin-bottom: var(--space-md);
	color: var(--color-text-muted);
	max-width: none;
	/* Override default paragraph width for card context */
}

.product-showcase__button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background-color: var(--color-text);
	color: var(--color-background);
	padding: var(--space-xs) var(--space-md);
	border: 2px solid var(--color-text);
	border-radius: var(--border-radius-sm);
	font-weight: 400;
	/* Lighter weight than primary CTAs */
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.product-showcase__button svg {
	/* Icon within button */
	width: 1em;
	height: 1em;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

.product-showcase__button:hover {
	background-color: transparent;
	color: var(--color-text);
	border-color: var(--color-text);
	transform: translateY(-1px);
	/* Slight lift */
}

/* --- 5.12. Scroll Indicator Toolbar --- */
.scroll-indicator-toolbar {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--color-surface);
	border: 1:px solid var(--color-border);
	border-right: none;
	/* No border on the viewport edge */
	padding: var(--space-lg) 0;
	/* Vertical padding, horizontal handled on hover */
	border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
	box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.08);
	z-index: 60;
	/* Above content, below header */
	width: var(--toolbar-width-collapsed);
	overflow: hidden;
	/* Hide text when collapsed */
	transition: var(--toolbar-transition);
}

.scroll-indicator-toolbar:hover {
	width: var(--toolbar-width-expanded);
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

.scroll-indicator-toolbar ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* Make list items fill width */
	gap: var(--space-md);
}

.scroll-indicator-toolbar li {
	line-height: 1;
	/* Prevent extra height */
	width: 100%;
	display: flex;
	/* For centering content if needed */
	justify-content: center;
	align-items: center;
}

.scroll-indicator-toolbar li.divider {
	height: 1px;
	background-color: var(--color-border);
	margin: var(--space-xs) auto;
	padding: 0;
	width: 60%;
	/* Width when collapsed */
	transition: width 0.3s ease;
}

.scroll-indicator-toolbar:hover li.divider {
	width: 80%;
	/* Wider when expanded */
}

.scroll-indicator-toolbar a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Center content (dot/icon) by default */
	gap: var(--space-sm);
	padding: var(--space-xs) var(--space-sm);
	width: auto;
	/* Fit content */
	min-width: calc(var(--toolbar-width-collapsed) - 2 * var(--space-sm));
	/* Click area when collapsed */
	max-width: 100%;
	border-radius: var(--border-radius-sm);
	position: relative;
	/* For pseudo-elements or absolute positioning if needed */
	border-bottom: none;
	/* Override base 'a' style */
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--color-text-muted);
	transition: color 0.3s ease, font-weight 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
	white-space: nowrap;
	/* Prevent text wrapping */
	min-height: 24px;
	/* Consistent height */
}

/* Expand text links and align left on toolbar hover */
.scroll-indicator-toolbar:hover a:has(.label-text) {
	display: flex;
	/* Use flex for alignment control */
	width: 100%;
	/* Fill the expanded toolbar */
	justify-content: flex-start;
	/* Align icon+text to the left */
}

/* Keep dot links centered even when toolbar expands */
.scroll-indicator-toolbar:hover a:has(.dot) {
	justify-content: center;
}

/* Toolbar Item Hover & Active Effects */
.scroll-indicator-toolbar a:hover {
	color: var(--color-text);
	background-color: transparent;
	/* Base hover doesn't need background */
}

.scroll-indicator-toolbar a:hover .dot {
	/* Scale effect for DOTS on hover */
	transform: scale(1.6);
}

.scroll-indicator-toolbar a:has(.label-text):hover {
	/* Background effect for ICON+TEXT links on hover */
	background-color: var(--color-focus-bg);
}

/* Focus style for toolbar links */
.scroll-indicator-toolbar a:focus-visible {
	outline-offset: -3px;
	/* Inset outline */
	color: var(--color-text);
	/* Ensure text is visible */
	background-color: var(--color-focus-bg);
	/* Match global focus */
}

/* Style for the dot (Hero sections) */
.scroll-indicator-toolbar .dot {
	display: block;
	width: 10px;
	height: 10px;
	background-color: var(--color-border);
	border-radius: 50%;
	transition: transform 0.2s ease, background-color 0.3s ease;
	flex-shrink: 0;
	/* Prevent dot from shrinking */
}

.scroll-indicator-toolbar a.active .dot {
	background-color: var(--color-text);
	/* Active dot color */
	transform: scale(1.5);
	/* Enlarge active dot */
}

.scroll-indicator-toolbar a.active:hover .dot {
	transform: scale(1.7);
	/* Slightly larger hover on active */
}

/* Style for icon and text (Content sections) */
.scroll-indicator-toolbar .icon-placeholder {
	/* Container for icon */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	/* Icon container width */
	height: 1em;
	font-size: 1.1em;
	/* Base size for icon */
	color: var(--color-text-muted);
	/* Icon color matches text */
	transition: color 0.3s ease, transform 0.2s ease;
	order: 0;
	/* Icon first */
	flex-shrink: 0;
}

.scroll-indicator-toolbar .icon-placeholder svg {
	width: 1em;
	height: 1em;
	stroke: currentColor;
	/* SVG color controlled by parent 'a' tag color */
	fill: none;
	stroke-width: 1.5;
}

.scroll-indicator-toolbar .label-text {
	order: 1;
	/* Text second */
	display: none;
	/* Hide label text initially */
	opacity: 0;
	pointer-events: none;
	/* Not interactive when hidden */
	transition: opacity 0.2s 0.1s ease;
	/* Fade in with slight delay */
}

.scroll-indicator-toolbar:hover .label-text {
	display: inline;
	/* Show text on toolbar hover */
	opacity: 1;
	transition-delay: 0s;
	/* Fade in immediately on hover */
	pointer-events: auto;
	/* Make text interactive */
}

/* Active state for text links in toolbar */
.scroll-indicator-toolbar a.active {
	color: var(--color-text);
	font-weight: 600;
}

.scroll-indicator-toolbar a.active .icon-placeholder {
	color: var(--color-text);
	/* Active icon color */
}

/* Scale active icon slightly when toolbar is collapsed */
.scroll-indicator-toolbar:not(:hover) a.active .icon-placeholder {
	transform: scale(1.3);
}

/* Conditional display: Hide dot if text label exists */
.scroll-indicator-toolbar a:has(.label-text) .dot {
	display: none;
}

/* Conditional display: Hide icon+text if dot exists */
.scroll-indicator-toolbar a:has(.dot) .icon-placeholder,
.scroll-indicator-toolbar a:has(.dot) .label-text {
	display: none;
}

/* --- 5.13. Pagination (Blog Index/Archive) --- */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-xl);
	padding: var(--space-lg) 0;
	border-top: 1px solid var(--color-border);
	flex-wrap: wrap;
	/* Allow wrapping on smaller screens */
}

.pagination a,
.pagination span {
	/* Includes current page span and ellipsis span */
	display: inline-block;
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	min-width: 36px;
	/* Ensure consistent width for numbers */
	text-align: center;
}

.pagination span[aria-current="page"] {
	/* Current page indicator */
	background-color: var(--color-text);
	color: var(--color-surface);
	border-color: var(--color-text);
	font-weight: 600;
	cursor: default;
}

.pagination a:hover {
	background-color: var(--color-focus-bg);
	border-color: var(--color-border);
	/* Keep border consistent on hover */
	color: var(--color-text);
}

.pagination span.dots,
/* WP class for ellipsis */
.pagination span:not([aria-current]) {
	/* General ellipsis */
	border: none;
	/* Remove border from ellipsis */
	padding: var(--space-xs);
	/* Adjust padding if needed */
	color: var(--color-text-muted);
	cursor: default;
}

/* --- 5.14. Post Navigation (Single Post - Prev/Next) --- */
.navigation.post-navigation {
	/* WP class structure */
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	/* Align tops of text blocks */
	gap: var(--space-lg);
	flex-wrap: wrap;
	/* Allow stacking on smaller screens */
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	flex-basis: 48%;
	/* Try to keep side-by-side */
	flex-grow: 1;
	min-width: 150px;
	/* Prevent excessive squishing */
}

.post-navigation .nav-next {
	text-align: right;
}

.post-navigation a {
	color: var(--color-text);
	font-weight: 600;
	border-bottom: none;
	/* Override base 'a' */
	display: block;
	/* Make the whole area clickable */
	padding: var(--space-sm);
	/* Add padding for better click area */
	border: 1px solid transparent;
	/* For focus style alignment */
	border-radius: var(--border-radius-sm);
}

.post-navigation a:hover {
	color: var(--color-accent-hover);
	background-color: var(--color-focus-bg);
	/* Subtle background on hover */
}

.post-navigation .nav-subtitle {
	/* "Previous Post" / "Next Post" text */
	display: block;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	font-weight: 400;
	margin-bottom: var(--space-xs);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.post-navigation .nav-title {
	/* Actual post title */
	font-size: 1.1rem;
	font-family: var(--font-serif);
	line-height: 1.4;
}

/* --- 5.15. Comments Area --- */
.comments-area {
	margin-top: var(--space-xxl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
}

.comments-title,
.comment-reply-title {
	/* Title for comments section and reply form */
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: var(--space-lg);
	font-family: var(--font-serif);
	font-weight: 600;
	text-align: left;
}

/* --- 5.15.1. Comment List & Items --- */
.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-xl) 0;
	/* Space below list before form (if no replies) */
}

.comment-list .comment,
.comment-list .pingback {
	/* WP classes */
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-lg);
	border-bottom: 1px dashed var(--color-border);
}

.comment-list li:last-child>.comment,
/* Target direct .comment article */
.comment-list li:last-child>.pingback {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.comment-list .children {
	/* Nested comments */
	list-style: none;
	padding-left: var(--space-lg);
	/* Indentation for replies */
	margin-top: var(--space-lg);
	border-left: 2px solid var(--color-border);
}

.comment-body {
	/* Wrapper for individual comment content */
	display: grid;
	grid-template-columns: auto 1fr;
	/* Avatar | Content */
	gap: var(--space-md);
	align-items: start;
	/* Align avatar top with text block */
}

.comment-author .avatar {
	/* WP class */
	width: 50px;
	height: 50px;
	border-radius: 50%;
	grid-row: 1 / 3;
	/* Span avatar across author name and meta rows */
	margin-top: var(--space-xs);
	/* Align better with text */
}

.comment-meta {
	/* Author name, date, permalink */
	grid-column: 2 / 3;
	font-size: 0.85rem;
	margin-bottom: var(--space-sm);
}

.comment-meta .fn {
	/* Author name, WP class */
	font-weight: 600;
	font-size: 1rem;
	font-style: normal;
	color: var(--color-text);
	margin-right: var(--space-xs);
}

.comment-meta .says {
	display: none;
}

/* Usually redundant */
.comment-meta a {
	/* Timestamp link */
	color: var(--color-text-muted);
	text-decoration: none;
	border-bottom: 1px dotted var(--color-text-muted);
}

.comment-meta a:hover {
	color: var(--color-text);
	border-bottom-style: solid;
}

.comment-content {
	/* Actual comment text */
	grid-column: 2 / 3;
}

.comment-content p {
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 1em;
	max-width: none;
	/* Allow comment text to flow full width of its column */
}

.comment-content>*:last-child {
	margin-bottom: 0;
}

.reply {
	/* Container for reply link */
	grid-column: 2 / 3;
	font-size: 0.9rem;
	margin-top: var(--space-sm);
}

.reply .comment-reply-link {
	/* WP class */
	font-weight: 600;
	color: var(--color-accent-focus);
	border-bottom: none;
	padding: var(--space-xs);
	/* Make it easier to click */
	margin-left: calc(-1 * var(--space-xs));
	/* Align padding effect */
	border-radius: var(--border-radius-sm);
}

.reply .comment-reply-link:hover {
	background-color: var(--color-focus-bg);
	color: var(--color-accent-focus);
	/* Keep color consistent on hover */
}

/* --- 5.15.2. Comment Form --- */
.comment-form label {
	display: block;
	margin-bottom: var(--space-xs);
	font-weight: 600;
	font-size: 0.9rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	display: block;
	width: 100%;
	padding: var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: var(--space-md);
	background-color: var(--color-surface);
	color: var(--color-text);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus handled by global :focus-visible */
.comment-form textarea {
	min-height: 150px;
	resize: vertical;
}

.comment-form .comment-notes,
/* "Your email address will not be published..." */
.comment-form .logged-in-as {
	/* "Logged in as..." */
	font-size: 0.9rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}

.comment-form .required {
	/* Asterisk for required fields */
	color: red;
	/* Or your theme's accent/error color */
	margin-left: var(--space-xs);
}

.comment-form .form-submit {
	/* Wrapper for submit button */
	margin-top: var(--space-md);
	margin-bottom: 0;
}

.comment-form .submit {
	/* Submit button */
	display: inline-block;
	background-color: var(--color-text);
	color: var(--color-background);
	padding: var(--space-sm) var(--space-lg);
	border: 2px solid var(--color-text);
	border-radius: var(--border-radius-sm);
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
	cursor: pointer;
}

.comment-form .submit:hover {
	background-color: transparent;
	color: var(--color-text);
	border-color: var(--color-text);
	transform: translateY(-1px);
}

/* --- 5.15.3. Comment Navigation (Older/Newer Comments Links) --- */
.comment-navigation {
	/* WP class */
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
	display: flex;
	justify-content: space-between;
}

.comment-navigation a {
	color: var(--color-text);
	font-weight: 600;
	border-bottom: none;
}

.comment-navigation a:hover {
	color: var(--color-accent-hover);
}

/* --- 5.16. 404 Page Specific Styles --- */
.error-404 .page-header {
	/* Assuming a .page-header wraps the title */
	text-align: center;
	margin-bottom: var(--space-xl);
}

.error-404 .page-title {
	/* h1 on 404 page */
	margin-bottom: var(--space-md);
}

.error-404 .page-content p {
	/* Introductory text on 404 */
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.error-404 .search-form {
	/* WP search form on 404 */
	display: flex;
	align-items: stretch;
	/* Make input and button same height */
	gap: var(--space-xs);
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.error-404 .search-form label {
	/* Usually wraps the input */
	flex-grow: 1;
	/* Input takes available space */
	margin: 0;
	padding: 0;
}

.error-404 .search-field {
	/* Text input */
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	appearance: none;
	-webkit-appearance: none;
}

/* Focus handled by global :focus-visible */
.error-404 .search-submit {
	/* Submit button */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-md);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sm);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	flex-shrink: 0;
	/* Prevent button from shrinking */
	font-size: 1.1rem;
	/* Controls icon size if using em and SVG */
	line-height: 1;
}

.error-404 .search-submit svg {
	/* If using SVG icon in button */
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.error-404 .search-submit:hover {
	background-color: var(--color-text);
	color: var(--color-background);
	border-color: var(--color-text);
}

/* Focus handled by global :focus-visible, but can be specific: */
.error-404 .search-submit:focus-visible {
	color: var(--color-accent-focus);
	/* Optional: Change icon color on focus */
	background-color: var(--color-surface);
	/* Keep background on focus */
}

/* --- 5.17. Site Footer --- */
.site-footer {
	background-color: var(--color-background);
	color: var(--color-text-muted);
	padding: var(--space-xl) 0;
	margin-top: var(--space-xxl);
	/* Push footer down */
	border-top: 1px solid var(--color-border);
	transition: background-color 0.3s ease, border-color 0.3s ease;
	position: relative;
	/* For potential z-index needs if content overlaps */
	z-index: 5;
	/* Consistent with content sections */
}

.site-footer .container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	/* Responsive columns */
	gap: var(--space-lg);
	align-items: start;
	/* Align column tops */
}

.footer-col h4 {
	font-size: 1rem;
	margin-bottom: var(--space-md);
	font-family: var(--font-sans);
	/* Sans-serif for footer headings */
	font-weight: 600;
	color: var(--color-text);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.footer-col ul li {
	margin-bottom: var(--space-sm);
}

.footer-col a {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	border-bottom: 1px solid transparent;
	/* Base 'a' style reset */
}

.footer-col a:hover {
	color: var(--color-text);
	border-bottom-color: var(--color-text);
	/* Underline on hover */
}

.footer-social ul {
	/* Social links list */
	display: flex;
	gap: var(--space-md);
	/* justify-content: center; If centered in its column */
}

.footer-social a {
	/* Social icon links */
	border-bottom: none;
	/* No underline for icons */
	display: inline-block;
	/* For proper spacing/sizing */
}

.footer-social svg {
	width: 24px;
	height: 24px;
	fill: var(--color-text-muted);
	transition: fill 0.3s ease;
}

.footer-social a:hover svg,
.footer-social a:focus-visible svg {
	fill: var(--color-text);
}

.footer-accessibility {
	/* Container for accessibility toggles in footer */
	/* display: flex; justify-content: center; If needed */
}

.accessibility-toggle {
	/* Button for HC mode, font size etc. in footer */
	margin-top: var(--space-sm);
	border: 1px solid var(--color-border);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--border-radius-sm);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-text-muted);
	transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.accessibility-toggle:hover {
	border-color: var(--color-text);
	color: var(--color-text);
	background-color: transparent;


}







.footer-copyright {
	grid-column: 1 / -1;
	/* Span all columns */
	text-align: center;
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
	font-size: 0.9rem;
}

/* ==========================================================================
   6. ANIMATIONS
   ========================================================================== */

/* --- 6.1. Keyframes --- */
@keyframes fadeInSlideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- 6.2. Animation Trigger Classes --- */
.animate-on-scroll {
	/* Class to trigger animation on scroll (JS dependent) */
	opacity: 0;
	/* Start hidden */
	/* Fallback transition if JS/IntersectionObserver fails */
	transition: opacity var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
}

.animate-on-scroll.is-visible {
	/* Class added by JS */
	opacity: 1;
	transform: translateY(0);
	animation: fadeInSlideUp var(--transition-duration) var(--transition-timing) forwards;
}

/* ==========================================================================
   7. ACCESSIBILITY OVERRIDES
   ========================================================================== */

/* --- 7.1. High Contrast Mode --- */
body.high-contrast {
	/* Override base color variables */
	--color-background: var(--hc-background);
	--color-surface: var(--hc-background);
	--color-text: var(--hc-text);
	--color-text-muted: var(--hc-text-muted);
	--color-border: var(--hc-border);
	--color-accent-hover: var(--hc-text);
	/* Links will be bg white, text black on hover */
	--color-hero-bg: var(--hc-background);
	--color-accent-focus: var(--hc-accent-focus);
	/* Yellow for focus outline */
	--color-focus-bg: var(--hc-focus-bg);
	/* Transparent yellow for focus bg */

	/* Global element overrides for HC */
	/* a {
		border-bottom-color: var(--hc-text);
	} */

	a:hover {
		background-color: var(--hc-focus-bg);
		color: var(--hc-accent-focus);
		border-bottom-color: var(--hc-accent-focus);
	}

	img {
		filter: contrast(1.2) grayscale(0.3);
	}

	/* Increase contrast, slight desaturation */

	/* Component-specific overrides for HC */
	/* Header & Navigation */
	.site-header {
		border-bottom-color: var(--hc-border);
	}

	.main-navigation a {
		background-image: linear-gradient(var(--hc-text), var(--hc-text));
	}

	.main-navigation a:hover,
	.main-navigation a:focus-visible,
	.main-navigation .current-menu-item>a,
	.main-navigation a.active {
		background-color: var(--hc-focus-bg);
		/* Consistent with other focus */
		color: var(--hc-accent-focus);
	}

	.menu-toggle {
		border-color: var(--hc-border);
		color: var(--hc-text);
	}

	.menu-toggle:hover,
	.menu-toggle:focus-visible {
		background-color: var(--hc-focus-bg);
		border-color: var(--hc-accent-focus);
		color: var(--hc-accent-focus);
	}

	/* Mobile nav dropdown background */
	/* This rule now applies to the full-screen overlay for better control */
	.main-navigation.toggled-on {
		background-color: var(--hc-background);
		box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
		/* Light shadow */
	}

	.main-navigation.toggled-on ul#primary-menu li {
		border-bottom-color: var(--hc-border);
	}

	/* Header Actions */
	.action-button {
		border-color: var(--hc-border);
		color: var(--hc-text);
	}

	.action-button:hover {
		background-color: var(--hc-text);
		color: var(--hc-background);
		border-color: var(--hc-text);
	}

	/* Search Overlay */
	.search-overlay__input,
	.search-overlay .search-field {
		border-bottom-color: var(--hc-text);
		color: var(--hc-text);
	}

	.search-overlay__input::placeholder {
		color: rgba(255, 255, 255, 0.7);
	}

	.search-overlay__close {
		color: var(--hc-text);
	}

	.search-overlay__input:focus-visible,
	.search-overlay .search-field:focus-visible {
		border-bottom-color: var(--hc-accent-focus);
		/* Yellow focus underline */
	}

	/* Accessibility Panel */
	.accessibility-panel {
		background-color: var(--hc-background);
		border-color: var(--hc-border);
	}

	.accessibility-panel h4 {
		color: var(--hc-text);
	}

	.accessibility-panel button {
		background-color: transparent;
		/* Panel background is already dark */
		border-color: var(--hc-border);
		color: var(--hc-text);
	}

	.accessibility-panel button:hover {
		background-color: var(--hc-focus-bg);
		/* Consistent focus/hover */
		border-color: var(--hc-accent-focus);
		color: var(--hc-accent-focus);
	}

	.accessibility-toggle:hover {
		background-color: var(--hc-focus-bg) !important;
		color: var(--hc-accent-focus) !important;
		border-color: var(--hc-accent-focus) !important;
		outline: 3px solid var(--hc-accent-focus) !important;
		outline-offset: 3px !important;
	}


	.accessibility-panel button[aria-pressed="true"] {
		background-color: var(--hc-focus-bg);
		border-color: var(--hc-accent-focus);
		color: var(--hc-accent-focus);
		/* Yellow text for active */
	}


	.footer-social svg:hover {
		background-color: var(--hc-focus-bg) !important;
		color: var(--hc-accent-focus) !important;
		border-color: var(--hc-accent-focus) !important;
		outline: 3px solid var(--hc-accent-focus) !important;
		outline-offset: 3px !important;
	}


	/* Hero Sections */
	.hero-content .cta-button {
		background-color: var(--hc-background);
		color: var(--hc-text);
		border-color: var(--hc-text);
	}

	.hero-content .cta-button:hover {
		background-color: var(--hc-text);
		color: var(--hc-background);
	}

	.hero-background-image-link::after {
		background-color: rgba(0, 0, 0, 0.3);
		/* Darker overlay if image is too light */
	}

	/* Post Header (Sticky) */
	.post-header {
		background-color: var(--hc-background);
	}

	.post-header.is-sticky {
		border-bottom-color: var(--hc-border);
	}

	.post-category,
	.post-meta,
	.post-meta a {
		color: var(--hc-text-muted);
	}

	.post-title {
		color: var(--hc-text);
	}

	/* Logo visibility in High Contrast mode */
	.site-logo .logo:not(.high-contrast) {
		display: none;
		/* Hide default logo */
	}

	.site-logo .high-contrast {
		display: block;
		/* Show high-contrast logo */
	}

	/* Fix: Ensure high-contrast logo does not get a background on hover/focus */
	.site-logo a.high-contrast:hover,
	.site-logo a.high-contrast:focus-visible {
		background-color: transparent !important;
		color: inherit !important;
		/* Keep original color, not affected by general link hover */
		border-bottom-color: transparent !important;
		/* Remove underline */
		outline: none !important;
		/* Remove any outline that might appear due to default 'a' focus */
	}

	/* High Contrast Hero Text & Overlay Adjustments */
	.hero-content h1,
	.hero-content p {
		color: var(--hc-text);
		/* Force text to white in high contrast mode */
		text-shadow: none;
		/* Remove text shadow as it might reduce contrast */
	}




	.hero-background-image-link::after {
		background-color: var(--hc-background);
		/* Make overlay fully opaque black */
	}

	/* Consistent button/link styling in High Contrast Mode */
	.wpcf7-submit,
	.hero-content .cta-button,
	.product-showcase__button,
	.comment-form .submit,
	.error-404 .search-submit {
		/* Ensure base state is high-contrast appropriate */
		background-color: var(--hc-background);
		color: var(--hc-text);
		border-color: var(--hc-text);
	}

	.wpcf7-submit:hover,
	.wpcf7-submit:focus-visible,
	.hero-content .cta-button:hover,
	.hero-content .cta-button:focus-visible,
	.product-showcase__button:hover,
	.product-showcase__button:focus-visible,
	.comment-form .submit:hover,
	.comment-form .submit:focus-visible,
	.error-404 .search-submit:hover,
	.error-404 .search-submit:focus-visible {
		background-color: var(--hc-focus-bg) !important;
		color: var(--hc-accent-focus) !important;
		border-color: var(--hc-accent-focus) !important;
		outline: 3px solid var(--hc-accent-focus) !important;
		outline-offset: 3px !important;
	}

	/* Post Content */
	.post-content blockquote {
		border-left-color: var(--hc-border);
		color: var(--hc-text-muted);
	}

	.page-links a,
	.page-links>span {
		border-color: var(--hc-border);
		color: var(--hc-text);
		background-color: transparent;
	}

	.page-links>span {
		/* Current page */
		background-color: var(--hc-text);
		color: var(--hc-background);
		border-color: var(--hc-text);
	}

	.page-links a:hover {
		background-color: var(--hc-focus-bg);
		color: var(--hc-accent-focus);
		border-color: var(--hc-accent-focus);
	}

	/* Content Listing Sections */
	.post-item__title a {
		background-image: linear-gradient(var(--hc-text), var(--hc-text));
	}

	/* Product Showcase */
	.product-showcase {
		background-color: var(--hc-background);
		border-color: var(--hc-border);
	}

	/* Scroll Indicator Toolbar */
	.scroll-indicator-toolbar {
		background-color: var(--hc-background);
		border-color: var(--hc-border);
	}

	.scroll-indicator-toolbar .dot {
		background-color: var(--hc-border);
	}

	.scroll-indicator-toolbar a.active .dot {
		background-color: var(--hc-text);
	}

	.scroll-indicator-toolbar a {
		color: var(--hc-text);
	}

	.scroll-indicator-toolbar a:hover {
		background-color: transparent;
	}

	/* Use focus style for hover indication */
	.scroll-indicator-toolbar a:focus-visible,
	.scroll-indicator-toolbar a:has(.label-text):hover {
		background-color: var(--hc-focus-bg);
		color: var(--hc-accent-focus);
	}

	.scroll-indicator-toolbar a.active {
		color: var(--hc-accent-focus);
	}

	.scroll-indicator-toolbar a.active .icon-placeholder {
		color: var(--hc-accent-focus);
	}

	.scroll-indicator-toolbar li.divider {
		background-color: var(--hc-border);
	}

	/* Pagination */
	.pagination {
		border-top-color: var(--hc-border);
	}

	.pagination a,
	.pagination span {
		border-color: var(--hc-border);
		color: var(--hc-text);
		background-color: transparent;
	}

	.pagination span[aria-current="page"] {
		background-color: var(--hc-text);
		color: var(--hc-background);
		border-color: var(--hc-text);
	}

	.pagination a:hover {
		background-color: var(--hc-focus-bg);
		border-color: var(--hc-accent-focus);
		color: var(--hc-accent-focus);
	}

	.pagination span:not([aria-current]) {
		color: var(--hc-text);
	}

	/* Ellipsis */

	/* Post Navigation (Single) */
	.navigation.post-navigation {
		border-top-color: var(--hc-border);
	}

	.post-navigation a {
		color: var(--hc-text);
	}

	.post-navigation a:hover {
		background-color: var(--hc-focus-bg);
		color: var(--hc-accent-focus);
	}

	.post-navigation .nav-subtitle {
		color: var(--hc-text-muted);
	}

	/* Comments Area */
	.comments-area,

	.comment-navigation {
		border-top-color: var(--hc-border);
	}

	.comments-title,
	.comment-reply-title,
	.comment-author .fn {
		color: var(--hc-text);
	}

	.comment-meta a,
	.comment-form .comment-notes,
	.comment-form .logged-in-as {
		color: var(--hc-text-muted);
	}

	.comment-list .comment,
	.comment-list .pingback {
		border-bottom-color: var(--hc-border);
	}

	.comment-list .children {
		border-left-color: var(--hc-border);
	}

	.reply .comment-reply-link {
		color: var(--hc-accent-focus);
	}

	.reply .comment-reply-link:hover {
		background-color: var(--hc-focus-bg);
	}

	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"],
	.comment-form textarea {
		background-color: var(--hc-background);
		border-color: var(--hc-border);
		color: var(--hc-text);
	}

	.comment-navigation a {
		color: var(--hc-text);
	}

	.comment-navigation a:hover {
		color: var(--hc-accent-focus);
		/* Use focus color for hover */
	}

	/* 404 Page */
	.error-404 .search-field {
		background-color: var(--hc-background);
		border-color: var(--hc-border);
		color: var(--hc-text);
	}

	/* Footer */
	.site-footer,
	.footer-copyright {
		border-top-color: var(--hc-border);
	}

	.footer-col h4 {
		color: var(--hc-text);
	}

	.footer-col a {
		color: var(--hc-text-muted);
		border-bottom-color: var(--hc-text-muted);
	}

	.footer-col a:hover {
		color: var(--hc-text);
		/* background-color: var(--hc-text-muted); */
		/* Light background for dark text */
		border-bottom-color: var(--hc-text);

		background-color: var(--hc-focus-bg);
		color: var(--hc-accent-focus);
	}

	.footer-social svg {
		fill: var(--hc-text);
	}
}

/* ==========================================================================
   8. RESPONSIVENESS & REDUCED MOTION
   ========================================================================== */

/* --- 8.1. Reduced Motion Preferences --- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	/* Reset specific animated/transitioned elements */
	.animate-on-scroll {
		transition: opacity 0.01ms ease;
		transform: none !important;
		animation: none !important;
	}

	.animate-on-scroll.is-visible {
		opacity: 1;
		transform: none;
	}

	.post-item__image {
		transform: none !important;
	}

	.hero-content .cta-button:hover,
	.product-showcase__button:hover,
	.comment-form .submit:hover {
		transform: none !important;
	}

	.product-showcase:hover {
		transform: none;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	/* Disable sticky elements as they involve motion */
	.site-header,
	.post-header,
	.hero-section:nth-child(n+2) {
		position: static !important;
	}

	/* Reset padding/margins affected by sticky removal if necessary */
	.hero-section {
		padding-top: var(--space-xl);
		/* Ensure consistent padding */
	}

	main>.hero-section:first-of-type {
		margin-top: 0;
	}

	/* Reset if header was sticky */
	body {
		scroll-padding-top: 1rem;
		/* Reset scroll padding if header is no longer sticky */
	}

	/* Disable transition effects on overlays/panels */
	.search-overlay {
		transition: opacity 0.01ms ease, visibility 0.01ms ease;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.accessibility-panel {
		transition: opacity 0.01ms ease, visibility 0.01ms ease, transform 0.01ms ease;
		transform: translateY(0);
		/* Ensure it's visible if open */
	}

	/* Disable toolbar expansion and complex hovers */
	.scroll-indicator-toolbar {
		width: var(--toolbar-width-collapsed) !important;
		transition: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.scroll-indicator-toolbar .label-text {
		display: none !important;
	}

	.scroll-indicator-toolbar a {
		justify-content: center !important;
	}

	.scroll-indicator-toolbar a:hover,
	.scroll-indicator-toolbar a:hover .dot,
	.scroll-indicator-toolbar:not(:hover) a.active .icon-placeholder {
		transform: none !important;
	}

	.scroll-indicator-toolbar a.active .dot {
		transform: scale(1.3);
	}

	/* Keep some active indication */
	.main-navigation ul#primary-menu {
		transition: none !important;
	}

}

/* --- 8.2. Smaller Desktops & Large Tablets (~1400px to ~993px) --- */
/* This media query will make the desktop navigation more compact */
@media (max-width: 1400px) and (min-width: 993px) {
	.main-navigation ul#primary-menu {
		gap: var(--space-md);
	}

	.main-navigation a {
		font-size: 0.8rem;
	}

	.site-logo img {
		max-width: 280px;
	}

	.site-header {}

	/* .site-header .container {
		width: auto;
	} */
}

/* --- 8.3. Tablet (Portrait) & Mobile Nav Toggle (~992px and below) --- */
/* This media query will activate the mobile navigation */
@media (max-width: 992px) {

	/* Hide the desktop navigation */
	.main-navigation {
		display: none;

		/* When toggled on, it becomes the full-screen overlay */
		&.toggled-on {
			display: flex;
			flex-direction: column;
			/* Stack menu items vertically */
			position: fixed;
			/* Fixed to viewport */
			inset: 0;
			/* Cover entire viewport */
			background-color: var(--color-background);
			/* Use theme background or a specific overlay color */
			z-index: 1000;
			/* Above everything */
			overflow-y: auto;
			/* Enable scrolling for long menus */
			align-items: center;
			/* Center the menu items */
			padding-top: var(--header-height);
			/* Start below the header */
			transition: opacity 0.3s ease, visibility 0s linear 0.3s;
			opacity: 1;
			visibility: visible;
		}
	}

	/* Show the mobile menu toggle button */
	.menu-toggle {
		display: flex;
	}

	/* Adjust main navigation ul when it becomes the overlay */
	.main-navigation ul#primary-menu {
		display: flex;
		/* Always display flex when nav is open */
		flex-direction: column;
		width: 100%;
		gap: 0;
		/* Remove horizontal gap */
		background-color: transparent;
		/* Parent .main-navigation handles the background */
		border-top: none;
		/* No border top here */
		box-shadow: none;
		/* No shadow here */
		position: static;
		/* No absolute positioning within fixed overlay */
		top: auto;
		left: auto;
		right: auto;
		padding: var(--space-md) 0;
		/* Add some padding within the overlay */
	}

	.main-navigation ul#primary-menu li {
		width: 100%;
		border-bottom: 1px solid var(--color-border);
	}

	.main-navigation ul#primary-menu li:last-child {
		border-bottom: none;
	}

	.main-navigation ul#primary-menu a {
		display: block;
		/* Full width links */
		padding: var(--space-md) var(--space-sm);
		text-align: center;
		background-size: 0% 2px !important;
		/* Reset desktop underline effect */
		border-bottom: none;
		/* Remove any accidental base 'a' underlines */
	}

	.main-navigation ul#primary-menu a:hover,
	.main-navigation ul#primary-menu a:focus-visible,
	.main-navigation ul#primary-menu .current-menu-item>a,
	.main-navigation ul#primary-menu a.active {
		background-color: var(--color-focus-bg);
		/* Use focus bg for hover/active */
		color: var(--color-accent-focus);
		/* Use focus color for text */
	}

	/* Hero layout adjustment for smaller screens */
	.hero-section .container {
		grid-template-columns: 1fr;
		/* Stack hero content */
	}

	.hero-content {
		margin-bottom: var(--space-lg);
		/* Space below content when stacked */
	}

	/* Accessibility Panel positioning on mobile */
	.accessibility-panel {
		right: auto;
		left: 35%;
		transform: translateX(-50%) translateY(-10px);
	}

	.accessibility-panel.is-open {
		transform: translateX(-50%) translateY(0);
	}
}

/* --- 8.4. Mobile (Large) & Tablet (Portrait) Layout Shifts (~768px) --- */
/* This media query ensures the header elements stay on one line even on smaller tablets */
@media (max-width: 768px) {

	/* Maintain the logo on the left and action buttons on the right, without wrapping */
	.site-header .container {
		flex-wrap: nowrap;
		/* Prevent header elements from wrapping at this breakpoint */
		justify-content: space-between;
		/* Keep logo and actions spaced */
	}

	/* Keep site-header sticky and its height consistent */
	.site-header {
		position: sticky;
		height: var(--header-height);
		padding: var(--space-sm) 0;
		/* Reset padding if it was adjusted at 768px previously */
	}

	/* Revert orders and full widths for header elements if they were set to stack */
	.site-logo,
	.header-actions,
	.main-navigation {
		order: unset;
		/* Remove explicit order values */
		width: unset;
		/* Remove explicit width values */
		margin-top: unset;
		/* Remove explicit margin-top values */
	}

	.site-logo img {
		width: 200px;
	}

	/* Hero adjustments */
	.hero-section {
		padding-top: var(--space-xl);
		min-height: 70vh;
		/* Reduce minimum height */
	}

	.hero-section:nth-child(n+2) {
		position: static;
	}

	/* Ensure no stickiness */
	main>.hero-section:first-of-type {
		margin-top: 0;
	}

	/* Reset margin if any */

	/* Grid adjustments */
	.posts-grid {
		grid-template-columns: 1fr;
		/* Single column grid */
		gap: var(--space-xl);
		/* Adjust gap for single column */
	}

	/* Footer adjustments */
	.site-footer .container {
		grid-template-columns: 1fr;
		/* Single column */
		text-align: center;
		/* Center footer content */
	}

	.footer-col ul {
		padding-left: 0;
		/* Remove list indentation */
	}

	.footer-social ul {
		justify-content: center;
		/* Center social icons */
	}

	.footer-col {
		margin-bottom: var(--space-md);
		/* Adjust spacing */
	}

	.footer-accessibility {
		display: flex;
		justify-content: center;
	}

	/* Hide scroll toolbar on smaller screens */
	.scroll-indicator-toolbar {
		display: none;
	}

	/* Post header sticky position adjust for static main header */
	.post-header {
		top: 0;
		/* Stick to the very top when main site header is static */
	}

	.page-header {
		/* General page header (archives, etc.) */
		padding-top: var(--space-md);
	}
}

/* --- 8.5. Mobile (Small) Typographic & Spacing Adjustments (~480px) --- */
@media (max-width: 480px) {

	/* Adjust global spacing variables for smallest screens */
	:root {
		--space-sm: 0.75rem;
		--space-md: 1rem;
		--space-lg: 1.5rem;
		--space-xl: 2.5rem;
		--space-xxl: 3.5rem;
		--container-padding: var(--space-md);
	}





	/* Typography adjustments */
	h1 {
		font-size: clamp(2rem, 8vw, 2.5rem);
	}

	h2 {
		font-size: clamp(1.6rem, 6vw, 2rem);
	}

	h3 {
		font-size: clamp(1.2rem, 5vw, 1.4rem);
	}

	.main-navigation ul#primary-menu a {
		font-size: 1rem;
		/* Ensure readability */
	}


	.container.post-container {
		width: 100%;
	}

	.hero-content h1 {
		font-size: clamp(2rem, 8vw, 2.2rem);
	}

	.hero-content p {
		font-size: 0.95rem;
	}

	.post-title {
		font-size: clamp(1.6rem, 7vw, 1.8rem);
	}

	/* Single post/page title */
	.section-title {
		font-size: clamp(1.5rem, 6vw, 1.8rem);
	}

	/* Titles for post grids etc */
	.post-item__title {
		font-size: clamp(1rem, 5vw, 1.1rem);
	}

	/* Card titles */
	.footer-col h4 {
		font-size: 0.9rem;
	}

	.footer-col a,
	.footer-copyright {
		font-size: 0.85rem;
	}
}

/*--------------------------------------------------------------
9.0 Cookie Consent (Banner, Modal)
--------------------------------------------------------------*/
#cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-background);
	color: var(--color-text);
	padding: 1rem 1.5rem;
	z-index: 100;
	display: none;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
	border-top: 1px solid var(--slate-600);
}

#cookie-banner .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

@media (min-width: 768px) {
	#cookie-banner .container {
		flex-direction: row;
		justify-content: space-between;
	}
}

#cookie-banner p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	flex-grow: 1;
	text-align: center;
}

@media (min-width: 768px) {
	#cookie-banner p {
		text-align: left;
	}
}

#cookie-banner p a {
	color: var(--blue-300);
	text-decoration: underline;
}

#cookie-banner p a:hover {
	color: var(--blue-200);
}

#cookie-banner .cookie-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

#cookie-banner button {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 0.375rem;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
	border: 1px solid transparent;
}

#cookie-banner #accept-all-cookies {
	background-color: var(--slate-900);
	color: var(--white);
	border-color: var(--blue-600);
}

#cookie-banner #accept-all-cookies:hover {
	background-color: var(--blue-700);
	border-color: var(--blue-700);
}

#cookie-banner #customize-cookies {
	background-color: var(--color-background);
	color: var(--slate-900);
	border-color: var(--slate-500);
}

#cookie-banner #customize-cookies:hover {
	background-color: var(--slate-700);
	border-color: var(--slate-600);
}

#cookie-modal-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 90;
	display: none;
}

#cookie-settings-modal {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-height: 60vh;
	background-color: var(--white);
	color: var(--slate-800);
	border-radius: 0.5rem 0.5rem 0 0;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
	z-index: 95;
	display: none;
	flex-direction: column;
}

.cookie-modal-header {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--slate-200);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cookie-modal-header h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--slate-900);
	margin: 0;
}

.cookie-modal-close-btn {
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--slate-400);
	cursor: pointer;
	padding: 0.25rem;
}

.cookie-modal-close-btn:hover {
	color: var(--slate-600);
}

.cookie-modal-body {
	padding: 1.5rem;
	overflow-y: auto;
	flex-grow: 1;
}

.cookie-modal-body p {
	font-size: 0.875rem;
	color: var(--slate-600);
	margin-bottom: 1.5rem;
}

.cookie-modal-body p a {
	color: var(--blue-600);
	text-decoration: underline;
}

.cookie-modal-body p a:hover {
	color: var(--blue-800);
}

.cookie-category {
	border: 1px solid var(--slate-200);
	border-radius: 0.375rem;
	margin-bottom: 1rem;
	padding: 1rem;
}

.cookie-category-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.cookie-category-header h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--slate-800);
	margin: 0;
}

.cookie-category-description {
	font-size: 0.875rem;
	color: var(--slate-500);
	margin-top: 0.5rem;
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--slate-300);
	transition: 0.3s;
	border-radius: 24px;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.3s;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toggle-switch input:checked+.toggle-slider {
	background-color: var(--blue-600);
}

.toggle-switch input:focus+.toggle-slider {
	box-shadow: 0 0 0 2px var(--blue-200);
}

.toggle-switch input:checked+.toggle-slider:before {
	transform: translateX(20px);
}

.toggle-switch input:disabled+.toggle-slider {
	background-color: var(--slate-200);
	cursor: not-allowed;
}

.toggle-switch input:disabled+.toggle-slider:before {
	background-color: var(--slate-100);
}

.cookie-modal-footer {
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--slate-200);
	background-color: var(--slate-50);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.75rem;
}

.cookie-modal-footer button {
	padding: 0.6rem 1.2rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 0.375rem;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
	border: 1px solid transparent;
}

#save-cookie-prefs {
	background-color: var(--blue-600);
	color: var(--white);
	border-color: var(--blue-600);
}

#save-cookie-prefs:hover {
	background-color: var(--blue-700);
	border-color: var(--blue-700);
}

#accept-all-cookies-modal {
	background-color: var(--slate-200);
	color: var(--slate-700);
	border-color: var(--slate-300);
}

#accept-all-cookies-modal:hover {
	background-color: var(--slate-300);
	border-color: var(--slate-400);
}


/* ==========================================================================
   AI Image Overlay Styles - Revisited and Refined
   ========================================================================== */

/*
   This section defines the core styling for the AI image overlay.
   It creates a wrapper around the image and an absolute overlay span,
   designed to handle responsiveness, border-radius inheritance,
   and smooth hover effects, while eliminating common visual glitches.
*/

/* The primary wrapper for images that will have the AI overlay.
   PHP injects this div around the <img> or <figure> tag. */
.ai-image-wrapper {
	position: relative;
	/* Establishes positioning context for the absolute overlay */
	display: inline-block;
	/* Allows the wrapper to shrink-wrap the image content */
	line-height: 0;
	/* Prevents extra whitespace below the image due to inline-block */
	max-width: 100%;
	/* Ensures the wrapper respects its parent's width */
	height: auto;
	/* Ensures height scales with content */
	overflow: hidden;
	/* Crucial for clipping the overlay and scaled image content within defined border-radius */

	/* Inherit border-radius from the parent element by default.
       This is key for dynamic matching with WordPress image blocks/themes. */
	border-radius: inherit;

	/* Explicitly remove any default borders/outlines that might appear,
       which can cause the "thin black line" issue. */
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Specific border-radius overrides for common WordPress image contexts.
   These ensure the wrapper's radius matches the actual image's visual radius,
   which might be set on a parent element (like <figure>) or directly on the img. */

/* For images within the .featured-image container (often large post thumbnails) */
.featured-image .ai-image-wrapper,
.featured-image.wp-block-image .ai-image-wrapper {
	border-radius: var(--border-radius-md);
	/* Apply medium radius as per theme setting */
}

/* For images within content listing cards like .post-item */
.post-item__image-link .ai-image-wrapper {
	border-radius: var(--border-radius-sm);
	/* Apply small radius as per theme setting */
}

/* For images within product showcase cards */
.product-showcase .ai-image-wrapper {
	border-radius: var(--border-radius-sm);
	/* Apply small radius as per theme setting */
}

/* Ensure the <img> inside the wrapper respects its container.
   These are generally covered by global img styles, but reiterated for clarity. */
.ai-image-wrapper img {
	display: block;
	/* Ensure it behaves as a block within the wrapper */
	max-width: 100%;
	/* Responsive sizing */
	height: auto;
	/* Maintain aspect ratio */
	/* Ensure no conflicting styles on the image itself that might escape the wrapper */
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: inherit;
	/* Image also inherits border-radius for visual alignment within wrapper */
}

/* The overlay text element */
.ai-image-overlay {
	position: absolute;
	bottom: 0;
	/* Position at the bottom of the wrapper */
	left: 0;
	width: 100%;
	/* Refined aesthetics for better visibility and blending */
	/* background-color: rgba(0, 0, 0, 0.75); */
	background-color: #f1f5f9;
	/* Increased opacity for better text contrast */
	color: #000000;
	/* White text for maximum contrast */
	font-family: var(--font-sans);
	/* Ensures consistent typography */
	font-size: 0.9rem;
	/* Slightly larger for improved readability */
	font-weight: 500;
	/* Medium weight for clarity */
	/* padding: var(--space-xs) var(--space-sm); */
	padding: 2rem;
	/* Consistent padding around text */
	text-align: center;
	box-sizing: border-box;
	/* Ensures padding is included in the width */
	text-transform: uppercase;
	/* Styling choice */
	letter-spacing: 0.5px;
	/* Spacing for readability */
	white-space: nowrap;
	/* Prevents text from wrapping within the narrow band */
	overflow: hidden;
	/* Hides any text that overflows */
	text-overflow: ellipsis;
	/* Adds "..." if text is clipped */
	/* text-shadow: 0 0 4px rgba(0, 0, 0, 0.7); */
	/* Stronger text shadow for contrast */

	/* Initial state and transition for hover effect */
	opacity: 1;
	/* Starts hidden */
	transition: opacity 0.3s ease, background-color 0.3s ease;
	/* Smooth fade and color change */

	/* Crucial for interaction: allows clicks on the image below to pass through */
	pointer-events: none;

	/* Inherit the bottom border-radius directly from the wrapper for perfect alignment */
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;

	/* Ensure no conflicting borders/outlines on the overlay itself */
	border: none !important;
	outline: none !important;
	box-shadow: none !important;

	/* Responsive adjustments for smaller screens */
	@media (max-width: 480px) {
		font-size: 0.75rem;
		/* Smaller font on very small screens */
/* 		padding: 0.3rem var(--space-xs); */
		/* Adjusted padding */
	}
}

/* Activate the overlay on hover or keyboard focus of the wrapper */
.ai-image-wrapper:hover .ai-image-overlay,
.ai-image-wrapper:focus-within .ai-image-overlay {
	opacity: .9;
	/* Make visible */
	/* background-color: rgba(0, 0, 0, 0.85); */
	/* Slightly darker background on hover for emphasis */
}


/* High Contrast Mode Adjustments for the AI Image Overlay */
body.high-contrast .ai-image-overlay {
	background-color: rgba(0, 0, 0, 0.9);
	/* Even darker background in HC */
	color: var(--hc-text);
	/* Force white text */
	border: 1px solid var(--hc-accent-focus);
	/* Strong yellow border for visibility */
	text-shadow: none;
	/* Remove text shadow in high contrast */
	box-shadow: 0 0 0 2px var(--hc-accent-focus);
	/* Add outline-like shadow for focus/hover */
}

/* Ensure no visual artifacts from global focus styles on the wrapper itself in HC */
body.high-contrast .ai-image-wrapper:focus-within {
	outline: none !important;
	box-shadow: none !important;
}

/* Reduced Motion Preference adjustments */
@media (prefers-reduced-motion: reduce) {
	.ai-image-overlay {
		transition: none !important;
		/* Disable all transitions */
	}

	.ai-image-wrapper:hover .ai-image-overlay,
	.ai-image-wrapper:focus-within .ai-image-overlay {
		opacity: 1;
		/* Instantly show without fade */
		background-color: rgba(0, 0, 0, 0.75);
		/* No hover color change */
	}
}

/* ==========================================================================
   5.18. Social Share Buttons
   ========================================================================== */

/* Main container for the social share section */
.social-share-container {
	margin-top: var(--space-xl);
	/* Consistent spacing */
	margin-bottom: var(--space-xl);
	padding-top: var(--space-lg);
	padding-bottom: var(--space-lg);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	/* Space between prompt and buttons */
	text-align: center;
}

/* Responsive adjustment for wider screens */
@media (min-width: 640px) {
	.social-share-container {
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--space-lg);
		/* Larger gap in row layout */
	}
}

/* Prompt text "Share this article:" */
.social-share-prompt {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* Container for the individual buttons */
.social-share-buttons {
	display: flex;
	gap: var(--space-sm);
	/* Adjusted gap between buttons */
	flex-wrap: wrap;
	/* Allow wrapping for responsiveness */
	justify-content: center;
	/* Center buttons if they wrap */
	align-items: center;
	/* Vertically align icons and text */
}

/* Base styles for all share buttons, now mimicking .comment-form .submit */
.share-button {
	display: inline-flex;
	/* To align icon and text horizontally */
	align-items: center;
	/* Vertically center icon and text */
	justify-content: center;
	/* Center content within button if space allows */

	/* Inherit styling from .comment-form .submit */
	background-color: var(--color-text);
	/* Black background */
	color: var(--color-background);
	/* White text/icon */
	padding: var(--space-sm) var(--space-sm);
	/* Padding matching submit button */
	border: 2px solid var(--color-text);
	/* Black border */
	border-radius: var(--border-radius-sm);
	/* Border radius matching submit button */
	font-weight: 600;
	/* Font weight matching submit button */
	font-size: 0.9rem;
	/* Font size matching submit button */
	text-transform: uppercase;
	/* Uppercase text matching submit button */
	letter-spacing: 1px;
	/* Letter spacing matching submit button */

	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
	cursor: pointer;
	text-decoration: none;
	/* Remove underline for links */
	box-shadow: none;
	/* Ensure no unwanted shadow */
	flex-shrink: 0;
	/* Prevent buttons from shrinking */
	overflow: hidden;
	/* Ensure content stays within button bounds */
}

/* Visually show the text label (no longer hidden) */
.share-button-text {
	/* No visually-hidden properties here, allow text to display normally */
	white-space: nowrap;
	/* Prevent text wrapping */
}

/* Icon inside the share buttons */
.share-icon {
	width: 20px;
	/* Adjusted icon size to fit better within button */
	height: 20px;
	/* Adjusted icon size */
	margin-right: 0.5rem;
	/* Space between icon and text */
	fill: currentColor;
	/* Inherits color from parent .share-button */
	transition: fill 0.3s ease;
	/* Smooth fill transition on hover */
}

/* Hover/Focus effects for all share buttons, mimicking .comment-form .submit:hover */
.share-button:hover,
.share-button:focus-visible {
	background-color: transparent;
	/* Background becomes transparent on hover */
	color: var(--color-text);
	/* Text/icon color changes to primary text color */
	border-color: var(--color-text);
	/* Border color changes to primary text color */
	transform: translateY(-1px);
	/* Slight lift on hover */
	outline: none;
	/* Explicitly remove any default blue outline */
	outline-offset: 0;
	/* Explicitly remove any default blue outline offset */
}

/* Specific colors for individual social buttons are REMOVED as per request.
   All buttons will now use the var(--color-text) as background and var(--color-background) as text color by default. */
.share-button-facebook {
	/* Keeping class selectors for specificity if needed later */
}

.share-button-facebook:hover {
	/* Keeping for consistency */
}

.share-button-twitter {
	/* Keeping class selectors for specificity if needed later */
}

.share-button-twitter:hover {
	/* Keeping for consistency */
}

.share-button-linkedin {
	/* Keeping class selectors for specificity if needed later */
}

.share-button-linkedin:hover {
	/* Keeping for consistency */
}

.share-button-email {
	/* Keeping class selectors for specificity if needed later */
}

.share-button-email:hover {
	/* Keeping for consistency */
}


/* High Contrast Mode overrides for social share buttons */
body.high-contrast {
	.social-share-container {
		border-color: var(--hc-border);
	}

	.social-share-prompt {
		color: var(--hc-text);
	}

	.share-button {
		border: 1px solid var(--hc-text);
		/* Add border for visibility in HC */
		color: var(--hc-text);
		background-color: transparent;
		/* Start transparent in HC */
		box-shadow: none;

		/* Ensure HC styles override any brand colors if they were active */
		background-color: transparent !important;
		color: var(--hc-text) !important;
		border-color: var(--hc-text) !important;
	}

	.share-button:hover,
	.share-button:focus-visible {
		background-color: var(--hc-focus-bg);
		/* Subtle background in HC */
		border-color: var(--hc-accent-focus);
		/* Accent border in HC */
		color: var(--hc-accent-focus);
		/* Accent color for icon/text in HC */
		outline: 3px solid var(--hc-accent-focus);
		outline-offset: 3px;
		transform: none;
		/* Disable transform in HC hover */
	}
}

/* Reduced Motion Preference adjustments */
@media (prefers-reduced-motion: reduce) {
	.share-button {
		transition: none !important;
		/* Disable all transitions */
	}

	.share-button:hover,
	.share-button:focus-visible {
		transform: none !important;
		/* Disable hover transform */
	}
}