/* Mobile overrides: simpler z-index-first solution to ensure mobile nav and
   dropdowns are above the overlay and remain tappable on all browsers.
   This avoids pointer-events hacks which can be inconsistent on some devices. */

:root {
	--vr-theme-color: #0a4e8a;
	/* primary theme color — remember this as the main color */
}

/* Keep overlay visual dimming but under the nav */
.overlay-bg {
	z-index: 1005;
	/* slightly above page but below mobile nav */
	background-color: rgba(0, 0, 0, 0.45) !important;
	/* ensure consistent dim */
}

/* Ensure the mobile nav panel is above the overlay */
#navMobile {
	z-index: 2010;
	/* well above overlay */
	position: fixed;
	/* ensure stacking context */
}

/* Dropdown menus inside the mobile nav must be above the overlay and nav */
.nav-mobile .dropdown-menu,
.nav-mobile .menu-sub-items,
.nav-mobile .profile-dropdown-mobile .menu-sub-items,
.mobile-language-dropdown .dropdown-menu {
	position: relative;
	/* keep them in the nav stacking context */
	z-index: 2020;
	/* above nav and overlay */
	pointer-events: auto;
	/* enable taps */
}

/* Ensure any clickable nav controls inside the mobile nav are interactive */
.nav-mobile .nav-link,
.nav-mobile .dropdown-item,
.nav-mobile .menu-sub-items .nav-link {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
	touch-action: manipulation;
}

/* Increase touch area for mobile dropdown items */
.nav-mobile .dropdown .menu-sub-items .nav-link,
.nav-mobile .profile-dropdown-mobile .menu-sub-items .dropdown-item,
.mobile-language-dropdown .dropdown-item {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* If another theme or plugin sets overlay z-index higher, this ensures nav still wins */
@media (max-width: 1200px) {
	#navMobile {
		z-index: 99999;
	}

	.nav-mobile .dropdown-menu {
		z-index: 100000;
	}
}

/* Make sure mobile dropdowns are visible when Bootstrap (or JS) adds the .show class.
   This overrides global rules like .dropdown-menu { display: none !important; } */
.nav-mobile .dropdown.show>.menu-sub-items,
.nav-mobile .dropdown.show>.dropdown-menu,
.nav-mobile .menu-sub-items.show,
.nav-mobile .dropdown-menu.show,
.mobile-language-dropdown.show>.dropdown-menu,
.mobile-language-dropdown .dropdown-menu.show {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Also allow nested .dropdown to expand inside mobile nav */
.nav-mobile .dropdown .dropdown.show>.dropdown-menu,
.nav-mobile .dropdown .dropdown-menu.show {
	display: block !important;
}

/* Force readable text color inside the mobile nav panel to avoid white-on-white issues
   Some inline/theme styles set .nav-mobile links to white; when the mobile panel background
   is light (white) those rules make text invisible. Use high-specificity overrides here. */
#navMobile .nav-mobile-inner .nav-item .nav-link,
#navMobile .nav-mobile-inner .nav-item a,
#navMobile .nav-mobile-inner .dropdown-item,
#navMobile .nav-mobile-inner .menu-sub-items .nav-link,
#navMobile .nav-mobile-inner .menu-sub-items .dropdown-item {
	color: #222 !important;
	/* dark readable color */
}

/* Icons inside mobile links */
#navMobile .nav-mobile-inner .nav-link i,
#navMobile .nav-mobile-inner .dropdown-item i {
	color: #222 !important;
}

/* Hover/active states: keep contrast and preserve theme accent on hover */
#navMobile .nav-mobile-inner .nav-item .nav-link:hover,
#navMobile .nav-mobile-inner .dropdown-item:hover,
#navMobile .nav-mobile-inner .menu-sub-items .nav-link:hover {
	color: var(--vr-theme-color) !important;
}

/* If dark-mode is active and nav background is dark, we let the theme's dark-mode rules win by
   only applying these overrides when the nav panel has a light background. Detect common case
   by checking the panel background; if you have a different dark-mode flag we can refine this. */
@media (prefers-color-scheme: light) {

	#navMobile .nav-mobile-inner .nav-item .nav-link,
	#navMobile .nav-mobile-inner .dropdown-item {
		color: #222 !important;
	}
}

/* Layout: place icon and title on the same line for mobile nav items */
#navMobile .nav-mobile-inner .nav-item .nav-link,
#navMobile .nav-mobile-inner .dropdown-item,
#navMobile .nav-mobile-inner .menu-sub-items .nav-link {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	/* space between icon and title */
}

/* Ensure icon container keeps a consistent size and doesn't wrap */
#navMobile .nav-mobile-inner .nav-link .icon,
#navMobile .nav-mobile-inner .dropdown-item .icon,
#navMobile .nav-mobile-inner .nav-link i,
#navMobile .nav-mobile-inner .dropdown-item i {
	min-width: 28px !important;
	width: 28px !important;
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
}

/* Submenu items: indent but keep same horizontal layout */
#navMobile .nav-mobile-inner .menu-sub-items .nav-link {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* Small-screen tweak: reduce gap slightly for narrow widths */
@media (max-width: 400px) {

	#navMobile .nav-mobile-inner .nav-item .nav-link,
	#navMobile .nav-mobile-inner .dropdown-item {
		gap: 8px !important;
	}

	#navMobile .nav-mobile-inner .nav-link .icon,
	#navMobile .nav-mobile-inner .dropdown-item .icon {
		min-width: 22px !important;
		width: 22px !important;
	}
}

/* Dark mode: when site uses .dark-mode, switch mobile nav text/icons to light colors */
.dark-mode #navMobile .nav-mobile-inner .nav-item .nav-link,
.dark-mode #navMobile .nav-mobile-inner .dropdown-item,
.dark-mode #navMobile .nav-mobile-inner .menu-sub-items .nav-link {
	color: #e9ecef !important;
	/* light color for contrast */
}

.dark-mode #navMobile .nav-mobile-inner .nav-link i,
.dark-mode #navMobile .nav-mobile-inner .dropdown-item i {
	color: #e9ecef !important;
}

.dark-mode #navMobile .nav-mobile-inner .nav-item .nav-link:hover,
.dark-mode #navMobile .nav-mobile-inner .dropdown-item:hover,
.dark-mode #navMobile .nav-mobile-inner .menu-sub-items .nav-link:hover {
	color: var(--vr-theme-color) !important;
}

/* If overlay is used in dark mode, ensure separators remain visible */
.dark-mode #navMobile .nav-mobile-inner .nav-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}


/* Page hero / title: full-bleed banner matching menu accent
   - No icon displayed
   - Large centered white title and optional subtitle
   - Uses theme accent variable for gradient when available
*/
.page-hero {
	position: relative;
	margin-bottom: 24px;
	padding: 40px 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	box-sizing: border-box;
	background: linear-gradient(180deg, var(--vr-theme-color, #0a4e8a) 0%, rgba(10, 78, 138, 0.92) 100%);
	color: #fff;
}

.page-hero .page-hero-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}

.page-hero .page-title {
	margin: 0;
	padding: 0;
	line-height: 1.06;
	font-weight: 700;
	color: #fff !important;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	font-size: clamp(24px, 3.5vw, 40px);
}

.page-hero .page-meta {
	margin: 10px auto 0;
	color: rgba(255, 255, 255, 0.95);
	font-size: clamp(16px, 2vw, 20px);
	max-width: 980px;
}

/* Breadcrumb sizing and color (applies to both pages and posts) */
.breadcrumb {
	font-size: 16.5px;
	margin-bottom: 8px;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
	color: var(--vr-theme-color);
	content: "\00BB";
	margin: 0 8px;
}

.breadcrumb .breadcrumb-item a {
	color: var(--vr-theme-color) !important;
	font-weight: 600;
}

.breadcrumb .breadcrumb-item.active {
	color: rgba(0, 0, 0, 0.65);
	font-weight: 600;
}

@media (max-width: 576px) {
	.breadcrumb {
		font-size: 15px;
	}
}

/* Hide any icon that theme might print next to title */
.page-hero .page-title .page-icon,
.page-hero .page-title i,
.page-hero .page-title .icon {
	display: none !important;
}

@media (min-width: 1200px) {
	.page-hero {
		padding: 72px 0;
	}

	.page-hero .page-meta {
		font-size: 18px;
	}
}

@media (max-width: 480px) {
	.page-hero {
		padding: 20px 0;
	}

	.page-hero .page-meta {
		font-size: 14px;
	}
}

/* ========================================
   Intro Section
   ======================================== */

.intro-text {
	line-height: 1.8;
	font-size: 1.05rem;
	color: #2c3e50;
	text-align: left;
	background: white;
	padding: 1.5rem;
	border-left: 4px solid var(--vr-theme-color);
}

.intro-text p {
	margin: 0;
}

@media (max-width: 768px) {
	.intro-text {
		font-size: 0.95rem;
		padding: 1rem;
	}
}

/* ========================================
   Overview Stats Section (matching demo)
   ======================================== */

.section-overview {
	background: #f8f9fa !important;
	padding: 3rem 0 !important;
	margin-bottom: 3rem !important;
}

/* Stats grid - 3 columns matching zone cards width */
.section-overview .stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin: 0 auto;
}

.section-overview .stat-item {
	padding: 2rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-overview .stat-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.section-overview .stat-number {
	font-size: 3rem;
	font-weight: 700;
	color: var(--vr-theme-color);
	margin-bottom: 0.5rem;
	line-height: 1;
}

.section-overview .stat-label {
	color: #666;
	font-size: 0.95rem;
}

/* Responsive for stats */
@media (max-width: 768px) {
	.section-overview .stats-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.section-overview .stat-number {
		font-size: 2.5rem;
	}
}

/* For dark mode, invert overview accents for sufficient contrast */
.dark-mode .section-overview .text-primary,
.dark-mode .section-overview h2.text-primary,
.dark-mode .section-overview .display-4.text-primary {
	color: var(--vr-theme-color) !important;
}

/* ========================================
   Zone Cards Grid Layout (matching demo 100%)
   ======================================== */

.zones-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-bottom: 3rem;
}

.zone-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	text-decoration: none;
	color: inherit;
	position: relative;
	border-radius: 0;
}

/* Colored bottom border */
.zone-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--zone-color, var(--vr-theme-color));
	transition: height 0.3s ease;
}

.zone-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
	text-decoration: none;
}

.zone-card:hover::after {
	height: 6px;
}

/* Zone Image Section */
.zone-image {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.zone-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.zone-card:hover .zone-image img {
	transform: scale(1.1);
}

/* Zone Number Overlay - WHITE background with COLORED text */
.zone-number {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: rgba(255, 255, 255, 0.95);
	color: var(--zone-color, var(--vr-theme-color));
	width: 48px;
	height: 48px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

/* Zone Content Section */
.zone-content {
	padding: 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.zone-title {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 0.75rem;
	color: #2c3e50;
	transition: color 0.3s ease;
}

.zone-card:hover .zone-title {
	color: var(--vr-theme-color);
}

.zone-nature {
	font-size: 0.9rem;
	font-style: italic;
	color: #555;
	margin-bottom: 1rem;
	line-height: 1.6;
	flex: 1;
}

/* Zone Info Items with border-top */
.zone-info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid #e0e0e0;
}

.zone-info-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #666;
}

.zone-info-item i {
	color: var(--zone-color, var(--vr-theme-color));
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.zone-info-item strong {
	font-weight: 600;
}

/* View Detail Button - COLORED background */
.view-detail {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem;
	background: var(--zone-color, var(--vr-theme-color));
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	transition: all 0.3s ease;
}

.view-detail i {
	font-size: 0.9rem;
	transition: transform 0.3s ease;
}

.zone-card:hover .view-detail i {
	transform: translateX(4px);
}

/* Responsive: Tablet - 2 columns */
@media (max-width: 1024px) {
	.zones-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

/* Responsive: Mobile - 1 column */
@media (max-width: 768px) {
	.zones-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.zone-image {
		height: 180px;
	}

	.zone-content {
		padding: 1.25rem;
	}

	.zone-title {
		font-size: 1.05rem;
	}
}

/* Dark mode support */
.dark-mode .zone-card {
	background: #2d3748;
	color: #e2e8f0;
}

.dark-mode .zone-title {
	color: #f7fafc;
}

.dark-mode .zone-card:hover .zone-title {
	color: var(--vr-theme-color);
}

.dark-mode .zone-nature {
	color: #a0aec0;
}

.dark-mode .zone-info-item {
	color: #cbd5e0;
}

.dark-mode .view-detail {
	background: #1a202c;
	border-top-color: #4a5568;
}

.dark-mode .zone-card:hover .view-detail {
	background: var(--vr-theme-color);
	color: #fff;
}

/* ========================================
   Zone Detail Page Styles
   ======================================== */

/* Zone Detail Header */
.zone-detail-header {
	background: var(--vr-theme-color);
	color: white;
	padding: 2rem 2.5rem;
	border-radius: 8px;
	margin-bottom: 2rem;
}

.zone-type-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--zone-color, var(--vr-theme-color));
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.zone-title-large {
	font-size: 1.75rem;
	margin-bottom: 0.75rem;
	line-height: 1.3;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-weight: 700;
}

.zone-characteristic {
	font-size: 1rem;
	opacity: 0.9;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

.zone-stats-row {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.stat-box {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.stat-box i {
	font-size: 1.5rem;
	opacity: 0.9;
}

.stat-label {
	font-size: 0.875rem;
	opacity: 0.85;
	margin-bottom: 0.25rem;
}

.stat-value {
	font-weight: 700;
	font-size: 1.125rem;
}

/* Zone Detail Header V2 (Gradient Style) */
.zone-detail-header-v2 {
	background: linear-gradient(135deg, #0A4E8A 0%, #084080 100%);
	color: white;
	padding: 0;
	border-radius: 0;
	margin-bottom: 2rem;
	overflow: hidden;
	position: relative;
}

.zone-detail-header-v2::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

.zone-header-top {
	padding: 2.5rem 2rem 0;
}

.zone-type-badge-v2 {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(10px);
	color: white;
	padding: 0.5rem 1.25rem;
	border-radius: 0;
	font-weight: 600;
	font-size: 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.zone-header-content {
	padding: 3rem 2rem;
}

.zone-subtitle {
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
	opacity: 0.9;
}

.zone-title-v2 {
	font-size: 2rem;
	margin-bottom: 0.75rem;
	line-height: 1.3;
	font-weight: 700;
}

.zone-characteristic-v2 {
	font-size: 1rem;
	opacity: 0.95;
	margin-bottom: 0;
	line-height: 1.6;
}

.zone-stats-row-v2 {
	display: flex;
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.1);
}

.stat-box-v2 {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 2.5rem 2rem;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-box-v2:last-child {
	border-right: none;
}

.stat-box-v2 i {
	font-size: 1.75rem;
	opacity: 0.9;
}

.stat-label-v2 {
	font-size: 0.875rem;
	opacity: 0.9;
	margin-bottom: 0.25rem;
}

.stat-value-v2 {
	font-weight: 700;
	font-size: 1.25rem;
}

/* Featured Image */
.zone-featured-image {
	width: 100%;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.zone-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Zone Content */
.zone-content {
	background: white;
	padding: 2rem;
	border-radius: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	border: 1px solid #e5e7eb;
}

.zone-section {
	margin-bottom: 2rem;
}

.zone-section:last-child {
	margin-bottom: 0;
}

.zone-section h2 {
	color: var(--vr-theme-color);
	font-size: 1.375rem;
	font-weight: 700;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #e5e7eb;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.zone-section h2 i {
	font-size: 1.25rem;
}

.zone-section p {
	line-height: 1.8;
	margin-bottom: 1rem;
	color: #111827;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

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

.zone-section li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.625rem;
	line-height: 1.7;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.zone-section li::before {
	content: "•";
	position: absolute;
	left: 0.5rem;
	color: var(--vr-theme-color);
	font-weight: 700;
	font-size: 1.125rem;
}

.highlight-box {
	background: #FFF3CD;
	border-left: 4px solid #F59E0B;
	padding: 1.25rem 1.5rem;
	border-radius: 0;
	margin: 1.5rem 0;
}

.highlight-box h3 {
	color: #D97706;
	margin-bottom: 0.875rem;
	font-size: 1.125rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.info-box {
	background: #F9FAFB;
	padding: 1.25rem 1.5rem;
	border-radius: 0;
	margin: 1.5rem 0;
	border: 1px solid #E5E7EB;
}

.info-box-title {
	font-weight: 700;
	color: var(--vr-theme-color);
	margin-bottom: 1rem;
	font-size: 1.0625rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Layout */
.zone-layout {
	display: grid;
	grid-template-columns: 1fr 500px;
	gap: 2rem;
	margin: 2rem 0;
	align-items: start;
}

.main-content {
	max-width: 100%;
	overflow-x: hidden;
	min-width: 0;
}

/* Sidebar */
.sidebar {
	position: static;
	align-self: start;
}

.action-widget {
	background: var(--vr-theme-color);
	color: white;
	padding: 1.5rem;
	border-radius: 0;
	text-align: center;
	margin-bottom: 1.5rem;
}

.btn-back {
	width: 100%;
	padding: 0.875rem 1.25rem;
	background: white;
	color: var(--vr-theme-color);
	border: none;
	border-radius: 0;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
}

.btn-back:hover {
	background: rgba(255, 255, 255, 0.95);
	color: var(--vr-theme-color);
	text-decoration: none;
}

.zone-info-widget {
	background: white;
	padding: 1.25rem;
	border-radius: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	margin-bottom: 1.25rem;
	border: 1px solid #e5e7eb;
}

.zone-info-widget h3 {
	margin: 0 0 1rem 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--vr-theme-color);
}

.zone-info-widget a:hover {
	background: #f3f4f6 !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
	.zone-layout {
		grid-template-columns: 1fr 280px;
		gap: 1.5rem;
	}

	.zone-detail-header {
		padding: 1.75rem 2rem;
	}

	.zone-title-large {
		font-size: 1.5rem;
	}

	.zone-detail-header-v2 .zone-header-content {
		padding: 1.25rem 1.75rem;
	}

	.zone-detail-header-v2 .zone-header-top {
		padding: 1.25rem 1.75rem 0;
	}

	.zone-title-v2 {
		font-size: 1.75rem;
	}

	.stat-box-v2 {
		padding: 1rem 1.5rem;
	}
}

/* Responsive - Mobile */
@media (max-width: 768px) {

	/* Layout adjustments */
	.zone-layout {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		margin: 1.25rem 0;
	}

	/* Header adjustments */
	.zone-detail-header {
		padding: 1.25rem 1.5rem;
		margin-bottom: 1.25rem;
	}

	.zone-title-large {
		font-size: 1.375rem;
		line-height: 1.3;
	}

	.zone-stats-row {
		gap: 1rem;
	}

	.meta-item-large {
		width: 100%;
	}

	/* Header V2 adjustments */
	.zone-detail-header-v2 .zone-header-content {
		padding: 1rem 1.25rem;
	}

	.zone-detail-header-v2 .zone-header-top {
		padding: 1rem 1.25rem 0;
	}

	.zone-title-v2 {
		font-size: 1.5rem;
	}

	.zone-subtitle {
		font-size: 0.875rem;
	}

	.stat-box-v2 {
		padding: 1rem 1.25rem;
		gap: 0.75rem;
	}

	.stat-box-v2 i {
		font-size: 1.5rem;
	}

	.stat-value-v2 {
		font-size: 1.125rem;
	}

	/* Content adjustments */
	.zone-content {
		padding: 1.25rem;
	}

	.zone-section {
		margin-bottom: 1.5rem;
	}

	.zone-section h2 {
		font-size: 1.25rem;
	}

	.zone-featured-image {
		margin-bottom: 1.25rem;
	}

	/* Sidebar adjustments */
	.sidebar {
		position: static;
	}

	.action-widget,
	.zone-info-widget {
		padding: 1rem;
		margin-bottom: 1rem;
	}

	/* Box adjustments */
	.info-box,
	.highlight-box {
		padding: 1rem 1.25rem;
		margin: 1rem 0;
	}

	/* Text adjustments */
	.zone-section li {
		padding-left: 1.5rem;
		font-size: 0.9375rem;
	}

	.zone-section p {
		font-size: 0.9375rem;
	}
}

@media (max-width: 480px) {
	.zone-detail-header {
		padding: 1rem 1.25rem;
	}

	.zone-content {
		padding: 1rem;
	}

	.zone-title-large {
		font-size: 1.25rem;
	}

	.zone-section h2 {
		font-size: 1.125rem;
	}

	.action-widget,
	.zone-info-widget {
		padding: 1rem;
	}

	.info-box,
	.highlight-box {
		padding: 0.875rem 1rem;
	}

	.stat-box {
		flex-direction: row;
		width: 100%;
	}

	/* Header V2 small screen adjustments */
	.zone-detail-header-v2 .zone-header-content {
		padding: 1rem;
	}

	.zone-detail-header-v2 .zone-header-top {
		padding: 1rem 1rem 0;
	}

	.zone-title-v2 {
		font-size: 1.25rem;
	}

	.zone-type-badge-v2 {
		font-size: 0.8125rem;
		padding: 0.4rem 1rem;
	}

	.zone-stats-row-v2 {
		flex-direction: column;
	}

	.stat-box-v2 {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		padding: 1rem;
	}

	.stat-box-v2:last-child {
		border-bottom: none;
	}
}