body main header {
	margin-top: 3rem;
}

header h1 {
	margin: 0rem;
	padding-top: 1rem;
	font-family: 'Raleway', 'Chivo', 'Antic Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
header img {
	display: block;
	margin: auto;
	padding-bottom: 2rem;
}
header {
	margin-bottom: 1rem;
}

a {
	color: var(--primary);
	transition: all 0.2s ease;
}

a:focus {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: 2px;
}

main {
	max-width: none;
	width: 100%;
}

/* ========================================================================================================================= */
/*  Navigation Bar ========================================================================================================== */
/* ========================================================================================================================= */

/* Main navbar container */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: var(--navbar-bg);
	border-bottom: 2px solid var(--fg);
	z-index: 1000;
	padding: 0 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	padding: 1rem 0;
}

.navbar a:hover,
.navbar a:focus {
	border-bottom: 0;
}

.navbar-container {
	max-width: 2000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 4rem;
	padding: 0 2rem;
}

.navbar-nav {
	flex: 1;
	justify-content: flex-end;
}

.theme-toggle {
	margin-left: 2rem;
	align-self: center;
}

.theme-toggle-mobile {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 4px;
	transition: all 0.2s ease;
	font-size: var(--font-size);
	align-self: center;
}

/* Mobile Controls Container */
.navbar-controls-mobile {
	display: none;
}

/* Logo/brand section */
.navbar-brand {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--fg);
	font-weight: 600;
	font-size: var(--font-size);
}

.navbar-brand img {
	height: 3rem;
	width: auto;
	margin-right: 1rem;
}

.navbar-nav {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

ul {
	margin: 0;
}

ol ol {
	list-style: lower-alpha;
}

.navbar-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item {
	position: relative;
	padding: 0.5rem;
}

.nav-link {
	display: block;
	padding: 1rem 1.5rem;
	text-decoration: none;
	color: var(--fg);
	font-weight: 500;
	transition: all 0.2s ease;
	border-bottom: 2px solid transparent;
}

.nav-link:hover,
.nav-link:focus {
	background-color: var(--primary-light);
	border-bottom-color: var(--primary);
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Dropdown menu */
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--bg);
	border: 2px solid var(--fg);
	border-top: none;
	min-width: 20rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 1001;
}

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-item {
	display: block;
	padding: 1rem 1.5rem;
	text-decoration: none;
	color: var(--fg);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	transition: background-color 0.2s ease;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.dropdown-item:last-child {
	border-bottom: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--primary-light);
	outline: 2px solid var(--focus-ring);
	outline-offset: -2.5px;
}

/* Subitem styling for dropdowns */
.dropdown-subitem {
	padding-left: 2.5rem;
	font-size: 0.95em;
	color: var(--text-muted);
	background-color: rgba(0, 0, 0, 0.02);
}

.dropdown-subitem:hover,
.dropdown-subitem:focus {
	background-color: var(--primary-light);
	color: var(--fg);
}

[data-theme='dark'] .dropdown-subitem {
	background-color: rgba(255, 255, 255, 0.02);
}

.navbar-toggle {
	display: none;
	background: none;
	border: none;
	font-size: var(--font-size-xxl);
	color: var(--fg);
	cursor: pointer;
	padding: 0.8rem;
	border-radius: 4px;
	transition: all 0.2s ease;
	margin: 0;
	min-width: 44px;
	min-height: 44px;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
	background-color: var(--primary-light);
	outline: 2px solid var(--focus-ring);
	outline-offset: -2px;
}

@media (max-width: 768px) {
	.navbar-toggle {
		display: block;
	}

	.navbar-nav {
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--bg);
		border-top: 2px solid var(--fg);
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: all 0.3s ease;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		flex: none;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		z-index: 999;
	}

	/* Hide desktop theme toggle on mobile */
	.theme-toggle {
		display: none !important;
	}

	.theme-toggle-mobile {
		display: flex;
		font-size: var(--font-size);
		margin-top: 0.5rem;
	}

	/* Theme toggle icon visibility for mobile */
	.theme-toggle-mobile .sun-icon,
	.theme-toggle-mobile .moon-icon {
		transition: opacity 0.3s ease;
	}

	.theme-toggle-mobile .sun-icon {
		opacity: 1;
	}

	.theme-toggle-mobile .moon-icon {
		opacity: 0;
		position: absolute;
	}

	[data-theme='dark'] .theme-toggle-mobile .sun-icon {
		opacity: 0;
	}

	[data-theme='dark'] .theme-toggle-mobile .moon-icon {
		opacity: 1;
	}

	.navbar-controls-mobile {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.navbar-nav.active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Hide nav links from keyboard navigation when menu is closed (mobile only) */
	.navbar-nav:not(.active) .nav-link,
	.navbar-nav:not(.active) .dropdown-item {
		visibility: hidden;
		pointer-events: none;
		position: absolute;
		left: -9999px;
	}

	.nav-item {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.nav-item:last-child {
		border-bottom: none;
	}

	.nav-link {
		padding: 1.2rem 2rem;
		border-bottom: none;
	}

	.dropdown-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: none;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: none;
		background-color: rgba(0, 0, 0, 0.05);
	}

	.dropdown-item {
		padding-left: 3rem;
	}

	.dropdown-subitem {
		padding-left: 4.5rem;
	}
}

.skip-link {
	position: fixed;
	top: -40px;
	left: 6px;
	background: var(--fg);
	color: var(--bg);
	padding: 8px;
	text-decoration: none;
	border-radius: 4px;
	z-index: 1001;
	transition: top 0.3s;
	font-size: var(--font-size);
	font-weight: 600;
}

.skip-link:focus {
	top: 6px;
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}

/* Screen reader only content */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body {
	padding-top: 4rem;
	overflow-x: hidden;
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.page-content {
	margin-top: 2rem;
}

/* ========================================================================================================================= */
/*  Side Navigation Layout ================================================================================================== */
/* ========================================================================================================================= */

.page-layout {
	display: grid;
	grid-template-columns: 300px 1fr 400px;
	gap: 2rem;
	margin-top: 2rem;
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 2rem;
	overflow-x: hidden;
}

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

.homepage-layout {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 2rem;
	margin-top: 2rem;
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 2rem;
	overflow-x: hidden;
}

.side-nav {
	position: sticky;
	top: 6rem;
	height: fit-content;
	background-color: var(--bg);
	border-right: 2px solid var(--secondary);
	padding-right: 2rem;
	width: 100%;
}

.side-nav h3 {
	color: var(--secondary);
	margin-bottom: 1rem;
	font-size: var(--font-size-xl);
}

.side-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.side-nav li {
	margin-bottom: 0.5rem;
}

.side-nav a {
	display: block;
	padding: 0.8rem 1rem;
	text-decoration: none;
	color: var(--fg);
	border-left: 3px solid transparent;
	transition: all 0.2s ease;
	border-radius: 0 4px 4px 0;
}

.side-nav a:hover,
.side-nav a:focus,
.side-nav a.active {
	background-color: color-mix(in srgb, var(--secondary-light) 40%, transparent);
	border-left-color: var(--secondary);
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Subitem styling for side navigation */
.side-nav-subitem {
	padding-left: 2rem;
	font-size: 0.95em;
	color: var(--text-muted);
	margin-left: 1rem;
}

.side-nav-subitem:hover,
.side-nav-subitem:focus {
	color: var(--fg);
}

.main-content {
	min-height: 60vh;
	width: 100%;
	max-width: none;
}

.main-content p {
	text-align: start;
}

.main-content section {
	margin-bottom: 2rem;
}

.pou dl dd,
.main-content ul,
.about-section dl dd {
	text-align: start;
}

.pou dt {
	text-align: center;
}

/* Mobile responsive for 	side navigation */
@media (max-width: 768px) {
	.page-layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.side-nav {
		position: static;
		border-right: none;
		border-bottom: 2px solid var(--secondary);
		padding-right: 0;
		padding-bottom: 2rem;
		width: 100%;
	}

	.side-nav a {
		border-left: none;
		border-bottom: 2px solid transparent;
		border-radius: 4px 4px 0 0;
	}

	.side-nav a:hover,
	.side-nav a:focus,
	.side-nav a.active {
		border-left-color: transparent;
		border-bottom-color: var(--secondary);
	}
}

/* Mobile responsive for homepage layout */
@media (max-width: 1024px) {
	.homepage-layout {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/* Tablet responsive for Instagram widget */
@media (max-width: 1024px) {
	.page-layout {
		grid-template-columns: 300px 1fr;
		gap: 1rem;
	}

	.elfsight-instagram-widget {
		grid-column: 1 / -1;
		margin-top: 2rem;
	}
}

/* ========================================================================================================================= */
/*  Page Specific Styles ==================================================================================================== */
/* ========================================================================================================================= */

.page-header-with-image {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 2rem;
	margin-top: 6rem;
	padding: 0;
}

/* Full-width image container */
.page-header-image-container {
	width: 100%;
	margin-bottom: 1.5rem;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.page-header-image {
	height: 35vh;
	width: auto;
	display: block;
	object-fit: contain;
}

.page-header-image-subtitle {
	text-align: center;
	font-size: 0.875rem;
	color: var(--fg-faded);
	font-style: italic;
	margin: 0;
	padding: 0.75rem 1rem 1rem;
	background: var(--bg);
}

.page-header-with-image .page-header-content {
	padding: 0 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

/* About Us page */
.about-section {
	margin: 2rem 0;
	padding: 2rem;
	border-radius: 4px;
}

.about-section h3 {
	color: var(--secondary);
	margin-bottom: 1rem;
}

/* Campaigns page */
.campaign-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	margin: 4rem 0 2rem 0;
}

.campaign-grid > * {
	flex: 0 1 30rem;
	max-width: 100%;
}

.campaign-grid a {
	text-decoration: none;
}

.campaign-card {
	border: 2px solid var(--fg);
	padding: 2rem;
	border-radius: 4px;
	transition: transform 0.2s ease;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.campaign-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.campaign-card h3 {
	color: var(--secondary);
}

.campaign-card p {
	text-align: center;
}

/* Articles page */
.articles-list {
	margin: 2rem 0;
}

.article-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: 1.5rem 0;
}

.article-item:last-child {
	border-bottom: none;
}

.article-meta {
	font-size: var(--font-size);
	color: var(--text-muted);
	margin-top: 0.5rem;
}

/* Resources page */
.resources-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
	gap: 2rem;
	margin: 2rem 0;
}

.resource-card {
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 1.5rem;
	border-radius: 4px;
	text-align: center;
}

.resource-card h3 {
	color: var(--secondary);
	margin-bottom: 1rem;
}

/* Prisoner Support page */
.prisoner-support {
	margin: 2rem 0;
}

.prisoner-case {
	border: 2px solid var(--fg);
	margin: 2rem 0;
	padding: 2rem;
	border-radius: 4px;
	background-color: var(--primary-light);
}

.prisoner-case h3 {
	color: var(--secondary);
	margin-bottom: 1rem;
}

.prisoner-case .status {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	background-color: var(--primary);
	color: white;
	border-radius: 2px;
	font-size: var(--font-size);
	margin-bottom: 1rem;
}

#take-action {
	color: var(--primary);
	font-size: var(--font-size-xl);
	font-weight: 600;
	margin-top: 2rem;
	margin-bottom: 2rem;
	text-align: center;
}

#logo {
	margin-bottom: 2rem;
	width: 100%;
	max-width: 300px;
	height: auto;
}

dt {
	color: var(--secondary);
}

button:focus,
input:focus,
textarea:focus,
select:focus {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: 2px;
}

a:focus,
.nav-link:focus,
.dropdown-item:focus,
.side-nav a:focus {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-contrast: high) {
	.nav-link:focus,
	.dropdown-item:focus,
	.navbar-toggle:focus,
	.side-nav a:focus,
	a:focus,
	button:focus,
	input:focus,
	textarea:focus,
	select:focus {
		outline: 4px solid var(--focus-ring);
		outline-offset: 2px;
	}
}

/* Utility classes */
.text-center {
	text-align: center;
}

.mb-2 {
	margin-bottom: 2rem;
}

.mt-2 {
	margin-top: 2rem;
}

.campaign-updates-list {
	list-style: none;
	margin-left: 1.5rem;
}

.mutual-aid-section a {
	text-decoration: none;
}

.mutual-aid-section a h3 {
	transition: all 0.2s ease;
	font-size: var(--font-size-lg);
	color: var(--primary);
}

.mutual-aid-section a h3:hover {
	color: var(--primary-hover);
	font-size: var(--font-size-lg-hover);
}

/* ========================================================================================================================= */
/*  Enhanced Decorative Elements with Secondary Colors ===================================================================== */
/* ========================================================================================================================= */

hr {
	border: none;
	height: 3px;
	background: linear-gradient(90deg, transparent 0%, var(--secondary-light) 15%, var(--secondary) 50%, var(--secondary-dark) 85%, transparent 100%);
	margin: 3rem auto;
	max-width: 60%;
	border-radius: 2px;
	position: relative;
}

hr::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background: var(--secondary);
	border-radius: 50%;
	box-shadow: -20px 0 0 var(--secondary-light), 20px 0 0 var(--secondary-light);
}

/* Decorative section dividers */
.section-divider {
	border: none;
	height: 2px;
	background: var(--secondary);
	margin: 2rem 0;
	border-radius: 1px;
	width: 100%;
}

.section-divider.gradient {
	background: linear-gradient(90deg, var(--secondary-dark) 0%, var(--secondary) 50%, var(--secondary-dark) 100%);
}

blockquote::before {
	font-size: 3rem;
	color: var(--secondary);
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	font-family: Georgia, serif;
	line-height: 1;
}

/* Secondary color accents for special elements */
.accent-border {
	border-color: var(--secondary) !important;
}

.accent-bg {
	background-color: var(--secondary-light) !important;
}

.accent-text {
	color: var(--secondary) !important;
}

/* Utility classes for secondary color usage */
.secondary-text {
	color: var(--secondary) !important;
}

.secondary-text-light {
	color: var(--secondary-light) !important;
}

.secondary-text-dark {
	color: var(--secondary-dark) !important;
}

.secondary-bg {
	background-color: var(--secondary) !important;
}

.secondary-bg-light {
	background-color: var(--secondary-light) !important;
}

.secondary-border {
	border: 1px solid var(--secondary) !important;
}

.secondary-border-left {
	border-left: 3px solid var(--secondary) !important;
}

.secondary-border-bottom {
	border-bottom: 2px solid var(--secondary) !important;
}

/* Special decorative elements */
.decorative-accent {
	position: relative;
}

.decorative-accent::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--secondary) 20%, var(--secondary-dark) 80%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
	.dropdown-menu,
	.navbar-nav,
	.campaign-card,
	.nav-link {
		transition: none;
	}
}

.nav-link:focus,
.dropdown-item:focus,
.campaign-card:focus,
.resource-card:focus {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}

/* ========================================================================================================================= */
/*  Component Styles ======================================================================================================== */
/* ========================================================================================================================= */

/* Page Header Component */
.page-header {
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--secondary);
}

.page-header h1 {
	margin: 1.5rem 0 0.5rem 0;
	color: var(--fg);
}

.page-header p {
	margin: 0;
	font-size: var(--font-size);
	line-height: 1.6;
	color: var(--fg);
	text-align: center;
}

/* Footer Component */
.site-footer {
	background: var(--footer-bg);
	color: var(--fg);
	padding: 2rem 0;
	margin: 3rem 0 0 0;
	border-top: 2px solid var(--primary);
}

.footer-content {
	max-width: 2000px;
	margin: 0 auto;
	padding: 0 2rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}

.footer-section h4 {
	margin: 0 0 1rem 0;
	color: var(--secondary);
	font-size: var(--font-size);
}

.footer-section dl {
	margin: 0;
}

.footer-section dt {
	font-weight: bold;
	margin-top: 1rem;
}

.footer-section dt:first-child {
	margin-top: 0;
}

.footer-section dd {
	margin: 0.25rem 0 0 0;
}

.footer-section ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-section li {
	margin: 0.5rem 0;
}

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

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

@media (max-width: 768px) {
	.footer-content {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ========================================================================================================================= */
/*  Elfsight Instagram Widget Component ==================================================================================== */
/* ========================================================================================================================= */

.elfsight-instagram-widget {
	background: var(--bg);
	padding: 1.5rem;
	position: sticky;
	top: 6rem;
	height: fit-content;
	overflow-y: hidden;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: none;
}

.elfsight-instagram-widget .social-media-links {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-size: var(--font-size-xl);
}

.elfsight-instagram-widget .social-media-links .pswg-social-media-links,
.elfsight-instagram-widget .social-media-links .na4a-social-media-links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
}

.elfsight-instagram-widget .social-media-links .pswg-social-media-links a,
.elfsight-instagram-widget .social-media-links .na4a-social-media-links a {
	font-size: var(--font-size-lg);
}

.elfsight-instagram-widget .social-media-links .pswg-social-media-links a:hover,
.elfsight-instagram-widget .social-media-links .na4a-social-media-links a:hover {
	font-size: var(--font-size-lg-hover);
}

.elfsight-instagram-container {
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	position: relative;
}

.elfsight-instagram-container::before {
	content: 'Loading Instagram feed...';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--fg);
	font-style: italic;
	opacity: 0.7;
	z-index: 1;
}

.elfsight-instagram-container:has(.elfsight-app-95fb872a-c93f-4154-a6ad-687d57e7bdb8 > *)::before {
	display: none;
}

/* Ensure Elfsight widget has proper sizing, rounded corners, and no borders */
.elfsight-app-95fb872a-c93f-4154-a6ad-687d57e7bdb8 {
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	border: none !important;
	border-radius: 12px !important;
}

.elfsight-app-95fb872a-c93f-4154-a6ad-687d57e7bdb8 iframe {
	width: 100% !important;
	height: 100% !important;
	border: none !important;
}

@media (max-width: 1024px) {
	.page-layout {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.elfsight-instagram-widget {
		position: static;
		margin: 1rem 0;
		max-height: none;
		border-radius: 8px;
		padding: 1rem;
	}

	.elfsight-instagram-container {
		min-height: 300px;
	}

	.side-nav {
		border-right: none;
	}
}

@media (max-width: 768px) {
	.page-layout,
	.homepage-layout {
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Ensure main content doesn't add spacing */
	.main-content {
		margin: 0 !important;
		padding: 0 !important;
	}

	.elfsight-instagram-widget {
		margin: 0 !important;
		padding: 0 !important;
	}

	.elfsight-instagram-container {
		min-height: 250px;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* ========================================================================================================================= */
/*  Light/Dark Mode Theme System ============================================================================================ */
/* ========================================================================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Chivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Antic+Slab:wght@400&display=swap');

/* Enhanced CSS Custom Properties for Light/Dark Mode with WCAG 2.2 AAA Compliance */
:root {
	/* Light Mode (Default) - WCAG 2.2 AAA Compliant */
	--fg: #0e0e0e;
	--bg: #ffffff;
	--form-bg: #fbfbfb;
	--form-fg: #0e0e0e;
	--form-fg-placeholder: #0e0e0e9a;

	/* Semantic Colors for Light Mode */
	--primary: #d96635;
	--primary-hover: #c67e50;
	--primary-dark: #753730;
	--primary-light: rgba(217, 102, 53, 0.15);
	--secondary: #a69748;
	--secondary-light: #b8a966;
	--secondary-dark: #515030;
	--border: #e0e0e0;
	--border-hover: #d96635;
	--shadow: rgba(0, 0, 0, 0.1);
	--shadow-light: rgba(0, 0, 0, 0.05);
	--text-muted: #595959;
	--focus-ring: #d96635;
	--focus-ring-light: rgba(217, 102, 53, 0.4);

	/* Component-specific colors */
	--navbar-bg: #e2dccc;
	--navbar-border: var(--border);
	--dropdown-bg: var(--bg);
	--dropdown-border: var(--border);
	--dropdown-shadow: var(--shadow);
	--side-nav-border: var(--border);
	--footer-bg: #e2dccc;
	--footer-border: var(--border);
	--widget-bg: var(--bg);
	--widget-border: var(--border);
	--widget-shadow: var(--shadow);

	--font-size: 1.8rem;
	--font-size-lg: 2rem;
	--font-size-lg-hover: 2.2rem;
	--font-size-xl: 2.4rem;
	--font-size-xxl: 3rem;
	--font-size-hover: 1.82rem;
}

/* Dark Mode - WCAG 2.2 AAA Compliant */
[data-theme='dark'] {
	--fg: #fefefe;
	--bg: #000000;
	--form-bg: #1a1a1a;
	--form-fg: #fefefe;
	--form-fg-placeholder: #fefefe9a;

	/* Semantic Colors for Dark Mode */
	--primary: #d96635;
	--primary-hover: #c67e50;
	--primary-dark: #753730;
	--primary-light: rgba(217, 102, 53, 0.25);
	--secondary: #a69748;
	--secondary-light: #b8a966;
	--secondary-dark: #515030;
	--border: #333333;
	--border-hover: #d96635;
	--shadow: rgba(0, 0, 0, 0.3);
	--shadow-light: rgba(0, 0, 0, 0.1);
	--text-muted: #e6e6e6;
	--focus-ring: #d96635;
	--focus-ring-light: rgba(217, 102, 53, 0.5);

	/* Component-specific colors */
	--navbar-bg: #3a3937;
	--navbar-border: var(--border);
	--dropdown-bg: #3a3937;
	--dropdown-border: var(--border);
	--dropdown-shadow: var(--shadow);
	--side-nav-border: var(--border);
	--footer-bg: #3a3937;
	--footer-border: var(--border);
	--widget-bg: var(--bg);
	--widget-border: var(--border);
	--widget-shadow: var(--shadow);

	--font-size: 1.8rem;
	--font-size-lg: 2rem;
	--font-size-lg-hover: 2.2rem;
	--font-size-xl: 2.4rem;
	--font-size-xxl: 3rem;
	--font-size-hover: 1.82rem;
}

/* System preference fallback - WCAG 2.2 AAA Compliant */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--fg: #fefefe;
		--bg: #000000;
		--form-bg: #1a1a1a;
		--form-fg: #fefefe;
		--form-fg-placeholder: #fefefe9a;

		/* Semantic Colors for Dark Mode */
		--primary: #d96635;
		--primary-hover: #c67e50;
		--primary-dark: #753730;
		--primary-light: rgba(217, 102, 53, 0.25);
		--secondary: #a69748;
		--secondary-light: #b8a966;
		--secondary-dark: #515030;
		--border: #333333;
		--border-hover: #d96635;
		--shadow: rgba(0, 0, 0, 0.3);
		--shadow-light: rgba(0, 0, 0, 0.1);
		--text-muted: #e6e6e6;
		--focus-ring: #d96635;
		--focus-ring-light: rgba(217, 102, 53, 0.5);

		/* Component-specific colors */
		--navbar-bg: #3a3937;
		--navbar-border: var(--border);
		--dropdown-bg: #3a3937;
		--dropdown-border: var(--border);
		--dropdown-shadow: var(--shadow);
		--side-nav-border: var(--border);
		--footer-bg: #3a3937;
		--footer-border: var(--border);
		--widget-bg: var(--bg);
		--widget-border: var(--border);
		--widget-shadow: var(--shadow);

		--font-size: 1.8rem;
		--font-size-lg: 2rem;
		--font-size-lg-hover: 2.2rem;
		--font-size-xl: 2.4rem;
		--font-size-xxl: 3rem;
		--font-size-hover: 1.82rem;
	}
}

/* Smooth transitions for theme switching */
* {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Theme Toggle Button Styles */
.theme-toggle {
	background: none;
	border: 2px solid var(--border);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size);
	color: var(--fg);
	transition: all 0.2s ease;
	margin: 0;
}

.theme-toggle:hover,
.theme-toggle:focus {
	background-color: var(--primary-light);
	border-color: var(--primary);
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.theme-toggle:active {
	transform: scale(0.95);
}

/* Theme toggle icons */
.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
	transition: opacity 0.3s ease;
}

.theme-toggle .sun-icon {
	opacity: 1;
}

.theme-toggle .moon-icon {
	opacity: 0;
	position: absolute;
}

[data-theme='dark'] .theme-toggle .sun-icon {
	opacity: 0;
}

[data-theme='dark'] .theme-toggle .moon-icon {
	opacity: 1;
}

@media (prefers-contrast: high) {
	:root {
		--primary: #d96635;
		--primary-hover: #753730;
		--focus-ring: #000000;
		--text-muted: #000000;
	}

	[data-theme='dark'] {
		--primary: #d96635;
		--primary-hover: #c67e50;
		--focus-ring: #ffffff;
		--text-muted: #ffffff;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}

	.theme-toggle:active {
		transform: none;
	}

	/* Remove all animations and transitions for users who prefer reduced motion */
	.dropdown-menu,
	.navbar-nav,
	.campaign-card,
	.nav-link,
	.theme-toggle,
	.skip-link {
		transition: none !important;
		animation: none !important;
	}
}

/* ========================================================================================================================= */
/*  WCAG 2.2 AAA Compliance Enhancements ================================================================================== */
/* ========================================================================================================================= */

/* Ensure all interactive elements meet minimum size requirements */
button,
input[type='button'],
input[type='submit'],
input[type='reset'],
.nav-link,
.dropdown-item,
.side-nav a {
	min-height: 44px;
	min-width: 44px;
}

/* Enhanced focus indicators for all interactive elements */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.side-nav a:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Ensure sufficient color contrast for all text elements */
.text-muted,
.article-meta,
.footer-section dd {
	color: var(--text-muted);
}

/* Enhanced hover states for better accessibility */
.nav-link:hover,
.dropdown-item:hover,
.side-nav a:hover,
.campaign-card:hover,
.resource-card:hover {
	background-color: var(--primary-light);
	transform: none;
}

a:hover {
	color: var(--primary-hover);
	transition: all 0.2s ease;
	font-size: var(--font-size-hover);
}

/* Ensure proper spacing for touch targets on mobile */
@media (max-width: 768px) {
	.nav-link,
	.dropdown-item,
	.side-nav a {
		padding: 1.2rem 2rem;
	}

	.theme-toggle-mobile {
		min-width: 44px;
		min-height: 44px;
		padding: 0.8rem;
	}
}