/* ==========================================================================
   Vezeni.cz - Main Stylesheet
   Comprehensive production-quality CSS for the Czech prison information portal.
   ========================================================================== */

/* ==========================================================================
   1. CUSTOM PROPERTIES
   ========================================================================== */

:root {
	/* Colors - Primary palette */
	--color-primary: #0d1b2a;
	--color-primary-light: #1b2838;
	--color-primary-dark: #070f18;
	--color-accent: #e8720c;
	--color-accent-hover: #d06208;
	--color-accent-light: #fef3e7;

	/* Colors - Semantic */
	--color-success: #2e7d32;
	--color-success-bg: #e8f5e9;
	--color-error: #c62828;
	--color-error-bg: #ffebee;
	--color-warning: #ef6c00;
	--color-warning-bg: #fff3e0;
	--color-info: #1565c0;
	--color-info-bg: #e3f2fd;

	/* Colors - Neutral */
	--color-white: #ffffff;
	--color-grey-50: #fafafa;
	--color-grey-100: #f5f5f5;
	--color-grey-200: #eeeeee;
	--color-grey-300: #e0e0e0;
	--color-grey-400: #bdbdbd;
	--color-grey-500: #9e9e9e;
	--color-grey-600: #757575;
	--color-grey-700: #616161;
	--color-grey-800: #424242;
	--color-grey-900: #212121;
	--color-text: #1a1a1a;
	--color-text-secondary: #555555;
	--color-text-muted: #888888;
	--color-text-inverse: #ffffff;

	/* Typography */
	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;
	--line-height: 1.6;
	--line-height-tight: 1.3;

	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;
	--spacing-3xl: 4rem;

	/* Borders */
	--border-radius: 6px;
	--border-radius-sm: 4px;
	--border-radius-lg: 10px;
	--border-radius-pill: 50px;
	--border-color: #e0e0e0;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
	--shadow-header: 0 2px 12px rgba(0, 0, 0, 0.25);

	/* Layout */
	--container-max: 1200px;
	--header-height: 70px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition: 250ms ease;
	--transition-slow: 400ms ease;
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

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

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

body {
	margin: 0;
	padding: 0;
	padding-top: var(--header-height);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	color: var(--color-text);
	background-color: var(--color-grey-100);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: var(--spacing-md);
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--color-primary);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
	margin-top: 0;
	margin-bottom: var(--spacing-md);
}

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}

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

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

ul, ol {
	margin-top: 0;
	margin-bottom: var(--spacing-md);
	padding-left: var(--spacing-xl);
}

hr {
	border: 0;
	border-top: 1px solid var(--border-color);
	margin: var(--spacing-xl) 0;
}

strong, b {
	font-weight: 700;
}

small {
	font-size: var(--font-size-sm);
}


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

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

.main {
	min-height: calc(100vh - var(--header-height) - 300px);
	padding-top: var(--spacing-xl);
	padding-bottom: var(--spacing-3xl);
}

/* Grid system */
.grid {
	display: grid;
	gap: var(--spacing-lg);
}

.grid--2 {
	grid-template-columns: 1fr;
}

.grid--3 {
	grid-template-columns: 1fr;
}

.grid--4 {
	grid-template-columns: 1fr;
}

.grid--sidebar {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--sidebar {
		grid-template-columns: 3fr 1fr;
	}
}

@media (min-width: 1024px) {
	.grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ==========================================================================
   4. HEADER / NAVIGATION
   ========================================================================== */

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: var(--color-primary);
	height: var(--header-height);
	transition: box-shadow var(--transition);
}

.header--scrolled {
	box-shadow: var(--shadow-header);
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.header__brand {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	flex-shrink: 0;
}

.header__logo {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	text-decoration: none;
	color: var(--color-text-inverse);
	font-size: var(--font-size-2xl);
	font-weight: 800;
	letter-spacing: -0.5px;
}

.header__logo:hover {
	text-decoration: none;
	color: var(--color-text-inverse);
}

.header__logo-icon {
	font-size: 1.8rem;
	opacity: 0.9;
}

.header__logo-text {
	color: var(--color-text-inverse);
}

.header__logo-accent {
	color: var(--color-accent);
}

.header__tagline {
	display: none;
	color: var(--color-grey-400);
	font-size: var(--font-size-sm);
	border-left: 1px solid var(--color-grey-600);
	padding-left: var(--spacing-md);
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.header__tagline {
		display: block;
	}
}

/* Navigation toggle (mobile hamburger) */
.nav__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	padding: 6px;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	z-index: 1001;
}

.nav__toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-text-inverse);
	border-radius: 1px;
	transition: transform var(--transition), opacity var(--transition);
}

.nav__toggle--active .nav__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav__toggle--active .nav__toggle-bar:nth-child(2) {
	opacity: 0;
}

.nav__toggle--active .nav__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1024px) {
	.nav__toggle {
		display: none;
	}
}

/* Navigation menu */
.nav__menu {
	display: none;
	position: absolute;
	top: var(--header-height);
	left: 0;
	right: 0;
	background-color: var(--color-primary-light);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav__menu--open {
	display: block;
}

@media (min-width: 1024px) {
	.nav__menu {
		display: flex;
		align-items: center;
		gap: var(--spacing-lg);
		position: static;
		background-color: transparent;
		padding: 0;
		box-shadow: none;
		border-top: none;
	}
}

.nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

@media (min-width: 1024px) {
	.nav__list {
		flex-direction: row;
		gap: var(--spacing-xs);
	}
}

.nav__item {
	margin: 0;
}

.nav__link {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--font-size-sm);
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--border-radius-sm);
	transition: color var(--transition-fast), background-color var(--transition-fast);
	position: relative;
}

.nav__link:hover,
.nav__link--active {
	color: var(--color-white);
	background-color: rgba(255, 255, 255, 0.1);
	text-decoration: none;
}

@media (min-width: 1024px) {
	.nav__link::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%) scaleX(0);
		width: 70%;
		height: 2px;
		background-color: var(--color-accent);
		transition: transform var(--transition);
	}

	.nav__link:hover::after,
	.nav__link--active::after {
		transform: translateX(-50%) scaleX(1);
	}

	.nav__link:hover,
	.nav__link--active {
		background-color: transparent;
	}
}

/* User menu */
.nav__user {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 1024px) {
	.nav__user {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
		margin-left: auto;
	}
}

.nav__username {
	color: var(--color-grey-300);
	font-size: var(--font-size-sm);
	font-weight: 500;
}

.nav__user-link {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--font-size-sm);
	text-decoration: none;
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--border-radius-sm);
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav__user-link:hover {
	color: var(--color-white);
	background-color: rgba(255, 255, 255, 0.1);
	text-decoration: none;
}

.nav__user-link--logout {
	color: rgba(255, 100, 100, 0.8);
}

.nav__user-link--logout:hover {
	color: #ff6b6b;
}


/* ==========================================================================
   5. CARDS
   ========================================================================== */

.card {
	background-color: var(--color-white);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
	border: 1px solid var(--color-grey-200);
}

.card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card__image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.card__body {
	padding: var(--spacing-lg);
}

.card__title {
	margin-bottom: var(--spacing-sm);
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--color-primary);
}

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

.card__title a:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.card__meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.card__meta-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.card__text {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	line-height: var(--line-height);
	margin-bottom: 0;
}

.card__badge {
	display: inline-block;
	padding: 2px var(--spacing-sm);
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: var(--border-radius-sm);
	margin-bottom: var(--spacing-sm);
}

.card__footer {
	padding: var(--spacing-md) var(--spacing-lg);
	border-top: 1px solid var(--color-grey-200);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

/* Card grid */
.card-grid {
	display: grid;
	gap: var(--spacing-lg);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* ==========================================================================
   6. PRISON-SPECIFIC COMPONENTS
   ========================================================================== */

/* Prison type badges */
.prison-badge {
	display: inline-block;
	padding: 3px var(--spacing-sm);
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	border-radius: var(--border-radius-sm);
	color: var(--color-white);
}

.prison-badge--veznice {
	background-color: #1565c0;
}

.prison-badge--vazebni {
	background-color: #c62828;
}

.prison-badge--detence {
	background-color: #6a1b9a;
}

.prison-badge--otevrena {
	background-color: var(--color-success);
}

.prison-badge--dozor {
	background-color: #2196f3;
}

.prison-badge--ostraha {
	background-color: #ff9800;
}

.prison-badge--zvysena-ostraha {
	background-color: #c62828;
}

/* Rating stars */
.rating-stars {
	display: inline-flex;
	gap: 2px;
	font-size: var(--font-size-lg);
}

.rating-stars__star {
	color: var(--color-grey-300);
	line-height: 1;
}

.rating-stars__star--filled {
	color: #f9a825;
}

.rating-stars__star--half {
	position: relative;
	color: var(--color-grey-300);
}

.rating-stars__star--half::before {
	content: '\2605';
	position: absolute;
	left: 0;
	overflow: hidden;
	width: 50%;
	color: #f9a825;
}

.rating-stars__value {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-left: var(--spacing-xs);
}

/* Rating bar */
.rating-bar {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
}

.rating-bar__label {
	flex: 0 0 140px;
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	text-align: right;
}

.rating-bar__track {
	flex: 1;
	height: 8px;
	background-color: var(--color-grey-200);
	border-radius: var(--border-radius-pill);
	overflow: hidden;
}

.rating-bar__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--color-accent), #f9a825);
	border-radius: var(--border-radius-pill);
	transition: width var(--transition-slow);
}

.rating-bar__value {
	flex: 0 0 40px;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-text);
}

/* Interactive rating selector */
.rating-select {
	display: inline-flex;
	gap: 4px;
	cursor: pointer;
}

.rating-select__star {
	font-size: var(--font-size-2xl);
	color: var(--color-grey-300);
	cursor: pointer;
	transition: color var(--transition-fast), transform var(--transition-fast);
}

.rating-select__star:hover {
	transform: scale(1.15);
}

.rating-select__star--filled {
	color: #f9a825;
}

.rating-select__star--hover {
	color: #fbc02d;
}

/* Prison info display */
.prison-info {
	background-color: var(--color-white);
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--color-grey-200);
	overflow: hidden;
}

.prison-info__row {
	display: flex;
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--color-grey-100);
}

.prison-info__row:last-child {
	border-bottom: none;
}

.prison-info__label {
	flex: 0 0 160px;
	font-weight: 600;
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

.prison-info__value {
	flex: 1;
	color: var(--color-text);
}

/* Tabs */
.tabs {
	display: flex;
	border-bottom: 2px solid var(--color-grey-200);
	margin-bottom: var(--spacing-xl);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
	display: none;
}

.tabs__link {
	display: inline-block;
	padding: var(--spacing-md) var(--spacing-lg);
	color: var(--color-text-secondary);
	font-weight: 600;
	font-size: var(--font-size-sm);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tabs__link:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.tabs__link--active {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

.tabs__panel {
	display: none;
}

.tabs__panel--active {
	display: block;
}


/* ==========================================================================
   7. COMMENTS
   ========================================================================== */

.comment {
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	border: 1px solid var(--color-grey-200);
}

.comment--reply {
	margin-left: var(--spacing-2xl);
	background-color: var(--color-grey-50);
	border-left: 3px solid var(--color-accent);
}

.comment--pending {
	opacity: 0.6;
	border-left: 3px solid var(--color-warning);
}

.comment__header {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
}

.comment__author {
	font-weight: 700;
	color: var(--color-primary);
	font-size: var(--font-size-sm);
}

.comment__date {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.comment__content {
	color: var(--color-text);
	font-size: var(--font-size-sm);
	line-height: var(--line-height);
	margin-bottom: var(--spacing-sm);
}

.comment__content p:last-child {
	margin-bottom: 0;
}

.comment__actions {
	display: flex;
	gap: var(--spacing-md);
}

.comment__reply-btn {
	background: none;
	border: none;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	cursor: pointer;
	padding: var(--spacing-xs) 0;
	transition: color var(--transition-fast);
}

.comment__reply-btn:hover {
	color: var(--color-accent);
}


/* ==========================================================================
   8. FORMS
   ========================================================================== */

.form-group {
	margin-bottom: var(--spacing-lg);
}

.form-label {
	display: block;
	margin-bottom: var(--spacing-xs);
	font-weight: 600;
	font-size: var(--font-size-sm);
	color: var(--color-text);
}

.form-label--required::after {
	content: ' *';
	color: var(--color-error);
}

.form-control {
	display: block;
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	color: var(--color-text);
	background-color: var(--color-white);
	border: 1px solid var(--color-grey-300);
	border-radius: var(--border-radius);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	appearance: none;
	-webkit-appearance: none;
}

.form-control:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(232, 114, 12, 0.15);
}

.form-control--error {
	border-color: var(--color-error);
}

.form-control--error:focus {
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}

textarea.form-control {
	min-height: 120px;
	resize: vertical;
}

select.form-control {
	padding-right: var(--spacing-2xl);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--spacing-md) center;
}

.form-hint {
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.form-error {
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-xs);
	color: var(--color-error);
	font-weight: 500;
}

.form-row {
	display: flex;
	gap: var(--spacing-lg);
}

.form-row .form-group {
	flex: 1;
}

@media (max-width: 767px) {
	.form-row {
		flex-direction: column;
		gap: 0;
	}
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-xl);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-text);
	text-decoration: none;
	background-color: var(--color-white);
	border: 1px solid var(--color-grey-300);
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
	user-select: none;
}

.btn:hover {
	text-decoration: none;
	background-color: var(--color-grey-100);
}

.btn:active {
	transform: translateY(1px);
}

.btn:disabled,
.btn--disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.btn--primary {
	color: var(--color-white);
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.btn--primary:hover {
	color: var(--color-white);
	background-color: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

.btn--secondary {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn--secondary:hover {
	color: var(--color-white);
	background-color: var(--color-primary-light);
	border-color: var(--color-primary-light);
}

.btn--danger {
	color: var(--color-white);
	background-color: var(--color-error);
	border-color: var(--color-error);
}

.btn--danger:hover {
	color: var(--color-white);
	background-color: #b71c1c;
	border-color: #b71c1c;
}

.btn--outline {
	color: var(--color-accent);
	background-color: transparent;
	border-color: var(--color-accent);
}

.btn--outline:hover {
	color: var(--color-white);
	background-color: var(--color-accent);
}

.btn--sm {
	padding: var(--spacing-xs) var(--spacing-md);
	font-size: var(--font-size-xs);
}

.btn--lg {
	padding: var(--spacing-md) var(--spacing-2xl);
	font-size: var(--font-size-lg);
}

.btn--block {
	display: flex;
	width: 100%;
}

.btn-group {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}


/* ==========================================================================
   9. FORUM
   ========================================================================== */

.forum-category {
	background-color: var(--color-white);
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--color-grey-200);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	transition: box-shadow var(--transition);
}

.forum-category:hover {
	box-shadow: var(--shadow-sm);
}

.forum-category__title {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: var(--spacing-xs);
}

.forum-category__title a {
	color: inherit;
	text-decoration: none;
}

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

.forum-category__description {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin-bottom: var(--spacing-sm);
}

.forum-category__stats {
	display: flex;
	gap: var(--spacing-xl);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

/* Topic list */
.topic-list {
	background-color: var(--color-white);
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--color-grey-200);
	overflow: hidden;
}

.topic-list__header {
	display: none;
	padding: var(--spacing-sm) var(--spacing-lg);
	background-color: var(--color-grey-50);
	border-bottom: 1px solid var(--color-grey-200);
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

@media (min-width: 768px) {
	.topic-list__header {
		display: grid;
		grid-template-columns: 1fr 100px 100px 160px;
		gap: var(--spacing-md);
	}
}

.topic-row {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--color-grey-100);
	transition: background-color var(--transition-fast);
}

.topic-row:last-child {
	border-bottom: none;
}

.topic-row:hover {
	background-color: var(--color-grey-50);
}

@media (min-width: 768px) {
	.topic-row {
		display: grid;
		grid-template-columns: 1fr 100px 100px 160px;
		gap: var(--spacing-md);
		align-items: center;
	}
}

.topic-row__title {
	font-weight: 600;
	color: var(--color-primary);
}

.topic-row__title a {
	color: inherit;
	text-decoration: none;
}

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

.topic-row__author {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.topic-row__replies,
.topic-row__views {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	text-align: center;
}

.topic-row__last-activity {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

/* Topic pinned/locked */
.topic-row--pinned {
	background-color: var(--color-accent-light);
	border-left: 3px solid var(--color-accent);
}

.topic-row--locked {
	opacity: 0.7;
}


/* ==========================================================================
   10. DICTIONARY
   ========================================================================== */

.letter-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-xl);
	padding: var(--spacing-md);
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	border: 1px solid var(--color-grey-200);
}

.letter-nav__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-weight: 700;
	font-size: var(--font-size-sm);
	color: var(--color-primary);
	text-decoration: none;
	border-radius: var(--border-radius-sm);
	transition: all var(--transition-fast);
}

.letter-nav__link:hover {
	background-color: var(--color-accent);
	color: var(--color-white);
	text-decoration: none;
}

.letter-nav__link--active {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.letter-nav__link--disabled {
	color: var(--color-grey-400);
	cursor: default;
	pointer-events: none;
}

.term-card {
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	border: 1px solid var(--color-grey-200);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
}

.term-card__title {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
}

.term-card__title a {
	color: inherit;
	text-decoration: none;
}

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

.term-card__definition {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	line-height: var(--line-height);
}


/* ==========================================================================
   11. FLASH MESSAGES
   ========================================================================== */

.flash-container {
	margin-bottom: var(--spacing-lg);
}

.flash {
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--border-radius);
	margin-bottom: var(--spacing-sm);
	font-size: var(--font-size-sm);
	font-weight: 500;
	border-left: 4px solid;
	transition: opacity var(--transition), transform var(--transition);
}

.flash--success {
	background-color: var(--color-success-bg);
	color: var(--color-success);
	border-left-color: var(--color-success);
}

.flash--error {
	background-color: var(--color-error-bg);
	color: var(--color-error);
	border-left-color: var(--color-error);
}

.flash--warning {
	background-color: var(--color-warning-bg);
	color: var(--color-warning);
	border-left-color: var(--color-warning);
}

.flash--info {
	background-color: var(--color-info-bg);
	color: var(--color-info);
	border-left-color: var(--color-info);
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.footer {
	background-color: var(--color-primary);
	color: rgba(255, 255, 255, 0.7);
	padding-top: var(--spacing-3xl);
	padding-bottom: var(--spacing-xl);
	margin-top: var(--spacing-3xl);
}

.footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-2xl);
	margin-bottom: var(--spacing-2xl);
}

@media (min-width: 768px) {
	.footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

.footer__heading {
	color: var(--color-white);
	font-size: var(--font-size-lg);
	font-weight: 700;
	margin-bottom: var(--spacing-md);
}

.footer__text {
	font-size: var(--font-size-sm);
	line-height: var(--line-height);
	color: rgba(255, 255, 255, 0.6);
}

.footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer__links li {
	margin-bottom: var(--spacing-sm);
}

.footer__link {
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--font-size-sm);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer__link:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.footer__contact-item {
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.6);
}

.footer__contact-item strong {
	color: rgba(255, 255, 255, 0.8);
}

.footer__bottom {
	padding-top: var(--spacing-xl);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
}

.footer__copyright {
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--font-size-sm);
	margin-bottom: var(--spacing-sm);
}

.footer__disclaimer {
	color: rgba(255, 255, 255, 0.35);
	font-size: var(--font-size-xs);
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================================================
   13. UTILITIES
   ========================================================================== */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-lg { font-size: var(--font-size-lg); }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }
.mt-5 { margin-top: var(--spacing-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }
.mb-5 { margin-bottom: var(--spacing-2xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-sm); }
.pt-2 { padding-top: var(--spacing-md); }
.pt-3 { padding-top: var(--spacing-lg); }
.pt-4 { padding-top: var(--spacing-xl); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-sm); }
.pb-2 { padding-bottom: var(--spacing-md); }
.pb-3 { padding-bottom: var(--spacing-lg); }
.pb-4 { padding-bottom: var(--spacing-xl); }

.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }
.p-4 { padding: var(--spacing-xl); }

.hidden {
	display: none !important;
}

.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;
}

.flex {
	display: flex;
}

.flex--between {
	justify-content: space-between;
}

.flex--center {
	align-items: center;
}

.flex--wrap {
	flex-wrap: wrap;
}

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


/* ==========================================================================
   14. SEARCH
   ========================================================================== */

.search-bar {
	display: flex;
	align-items: center;
	background-color: var(--color-white);
	border: 2px solid var(--color-grey-300);
	border-radius: var(--border-radius-pill);
	padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	max-width: 600px;
}

.search-bar--focused {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(232, 114, 12, 0.15);
}

.search-bar__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-grey-500);
	margin-right: var(--spacing-sm);
}

.search-bar__input {
	flex: 1;
	border: none;
	outline: none;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	color: var(--color-text);
	background: transparent;
	min-width: 0;
}

.search-bar__input::placeholder {
	color: var(--color-grey-400);
}

.search-bar__submit {
	flex-shrink: 0;
	padding: var(--spacing-sm) var(--spacing-lg);
	background-color: var(--color-accent);
	color: var(--color-white);
	border: none;
	border-radius: var(--border-radius-pill);
	font-weight: 600;
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.search-bar__submit:hover {
	background-color: var(--color-accent-hover);
}

/* Search results */
.search-results {
	margin-top: var(--spacing-xl);
}

.search-results__group {
	margin-bottom: var(--spacing-2xl);
}

.search-results__group-title {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-sm);
	border-bottom: 2px solid var(--color-grey-200);
}

.search-results__item {
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid var(--color-grey-100);
}

.search-results__item:last-child {
	border-bottom: none;
}

.search-results__item-title {
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: var(--spacing-xs);
}

.search-results__item-title a {
	color: inherit;
	text-decoration: none;
}

.search-results__item-title a:hover {
	color: var(--color-accent);
}

.search-results__item-snippet {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

.search-results__item-snippet mark {
	background-color: #fff3cd;
	padding: 1px 3px;
	border-radius: 2px;
}

.search-results__empty {
	text-align: center;
	padding: var(--spacing-3xl);
	color: var(--color-text-muted);
}


/* ==========================================================================
   15. PAGINATION
   ========================================================================== */

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	margin-top: var(--spacing-2xl);
	flex-wrap: wrap;
}

.pagination__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--spacing-sm);
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	background-color: var(--color-white);
	border: 1px solid var(--color-grey-300);
	border-radius: var(--border-radius);
	transition: all var(--transition-fast);
}

.pagination__link:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	text-decoration: none;
}

.pagination__link--active {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-white);
	font-weight: 700;
}

.pagination__link--active:hover {
	background-color: var(--color-accent-hover);
	color: var(--color-white);
}

.pagination__link--disabled {
	color: var(--color-grey-400);
	pointer-events: none;
	cursor: default;
}

.pagination__ellipsis {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	color: var(--color-text-muted);
}


/* ==========================================================================
   16. BREADCRUMBS
   ========================================================================== */

.breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	padding: var(--spacing-md) 0;
	margin-bottom: var(--spacing-lg);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	list-style: none;
}

.breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.breadcrumb__item:not(:last-child)::after {
	content: '\203A';
	color: var(--color-grey-400);
	font-size: var(--font-size-lg);
	line-height: 1;
	margin-left: var(--spacing-xs);
}

.breadcrumb__link {
	color: var(--color-text-secondary);
	text-decoration: none;
}

.breadcrumb__link:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.breadcrumb__current {
	color: var(--color-text-muted);
	font-weight: 500;
}


/* ==========================================================================
   17. TABLES
   ========================================================================== */

.table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	overflow: hidden;
	border: 1px solid var(--color-grey-200);
}

.table th,
.table td {
	padding: var(--spacing-md) var(--spacing-lg);
	text-align: left;
	font-size: var(--font-size-sm);
}

.table th {
	background-color: var(--color-grey-50);
	font-weight: 700;
	color: var(--color-text-secondary);
	border-bottom: 2px solid var(--color-grey-200);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.table td {
	border-bottom: 1px solid var(--color-grey-100);
}

.table tbody tr:last-child td {
	border-bottom: none;
}

.table tbody tr:nth-child(even) {
	background-color: var(--color-grey-50);
}

.table tbody tr:hover {
	background-color: var(--color-accent-light);
}

.table--compact th,
.table--compact td {
	padding: var(--spacing-sm) var(--spacing-md);
}


/* ==========================================================================
   18. STAT BOXES
   ========================================================================== */

.stat-boxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-md);
}

@media (min-width: 768px) {
	.stat-boxes {
		grid-template-columns: repeat(4, 1fr);
	}
}

.stat-box {
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	border: 1px solid var(--color-grey-200);
	padding: var(--spacing-lg);
	text-align: center;
	transition: box-shadow var(--transition);
}

.stat-box:hover {
	box-shadow: var(--shadow-sm);
}

.stat-box__value {
	display: block;
	font-size: var(--font-size-3xl);
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1.2;
	margin-bottom: var(--spacing-xs);
}

.stat-box__value--accent {
	color: var(--color-accent);
}

.stat-box__label {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.stat-box--highlight {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	border-color: var(--color-primary);
}

.stat-box--highlight .stat-box__value {
	color: var(--color-accent);
}

.stat-box--highlight .stat-box__label {
	color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
   19. PAGE-SPECIFIC: HOMEPAGE HERO
   ========================================================================== */

.hero {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, #243447 100%);
	color: var(--color-white);
	padding: var(--spacing-3xl) 0;
	margin-top: calc(-1 * var(--spacing-xl));
	margin-bottom: var(--spacing-2xl);
}

.hero__title {
	font-size: var(--font-size-3xl);
	font-weight: 800;
	color: var(--color-white);
	margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
	.hero__title {
		font-size: var(--font-size-4xl);
	}
}

.hero__subtitle {
	font-size: var(--font-size-lg);
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: var(--spacing-xl);
	max-width: 600px;
}

.hero__search {
	max-width: 500px;
}

.hero__search .search-bar {
	border-color: rgba(255, 255, 255, 0.3);
	background-color: rgba(255, 255, 255, 0.1);
}

.hero__search .search-bar--focused {
	border-color: var(--color-accent);
	background-color: var(--color-white);
}

.hero__search .search-bar__input {
	color: rgba(255, 255, 255, 0.9);
}

.hero__search .search-bar--focused .search-bar__input {
	color: var(--color-text);
}

.hero__search .search-bar__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.hero__search .search-bar--focused .search-bar__input::placeholder {
	color: var(--color-grey-400);
}


/* ==========================================================================
   20. SECTION HEADINGS
   ========================================================================== */

.section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-xl);
	flex-wrap: wrap;
	gap: var(--spacing-md);
}

.section-heading__title {
	font-size: var(--font-size-2xl);
	font-weight: 800;
	color: var(--color-primary);
	margin-bottom: 0;
	position: relative;
	padding-left: var(--spacing-md);
}

.section-heading__title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 4px;
	background-color: var(--color-accent);
	border-radius: 2px;
}

.section-heading__link {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
}

.section-heading__link:hover {
	text-decoration: underline;
}


/* ==========================================================================
   21. ARTICLE CONTENT
   ========================================================================== */

.article-content {
	background-color: var(--color-white);
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--color-grey-200);
	padding: var(--spacing-2xl);
}

.article-content h2 {
	margin-top: var(--spacing-2xl);
	padding-top: var(--spacing-xl);
	border-top: 1px solid var(--color-grey-200);
}

.article-content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.article-content h3 {
	margin-top: var(--spacing-xl);
}

.article-content p {
	line-height: 1.75;
	color: var(--color-text-secondary);
}

.article-content ul,
.article-content ol {
	line-height: 1.75;
	color: var(--color-text-secondary);
}

.article-content blockquote {
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-md) var(--spacing-lg);
	border-left: 4px solid var(--color-accent);
	background-color: var(--color-grey-50);
	color: var(--color-text-secondary);
	font-style: italic;
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.article-content code {
	font-family: var(--font-family-mono);
	font-size: var(--font-size-sm);
	background-color: var(--color-grey-100);
	padding: 2px 6px;
	border-radius: var(--border-radius-sm);
}

.article-content pre {
	background-color: var(--color-primary);
	color: var(--color-grey-200);
	padding: var(--spacing-lg);
	border-radius: var(--border-radius);
	overflow-x: auto;
}

.article-content pre code {
	background: none;
	padding: 0;
	color: inherit;
}


/* ==========================================================================
   22. LEGAL DOCUMENT STYLES
   ========================================================================== */

.legal-doc {
	background-color: var(--color-white);
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--color-grey-200);
	padding: var(--spacing-2xl);
	max-width: 800px;
}

.legal-doc__header {
	margin-bottom: var(--spacing-xl);
	padding-bottom: var(--spacing-lg);
	border-bottom: 2px solid var(--color-grey-200);
}

.legal-doc__title {
	font-size: var(--font-size-2xl);
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
}

.legal-doc__meta {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.legal-doc__content {
	line-height: 1.8;
	color: var(--color-text-secondary);
}


/* ==========================================================================
   23. REQUEST TEMPLATE STYLES
   ========================================================================== */

.template-preview {
	background-color: var(--color-grey-50);
	border: 1px dashed var(--color-grey-300);
	border-radius: var(--border-radius);
	padding: var(--spacing-xl);
	font-family: var(--font-family-mono);
	font-size: var(--font-size-sm);
	line-height: 1.8;
	white-space: pre-wrap;
	color: var(--color-text-secondary);
}


/* ==========================================================================
   24. TAG / BADGE COMPONENT
   ========================================================================== */

.tag {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--spacing-sm);
	font-size: var(--font-size-xs);
	font-weight: 600;
	border-radius: var(--border-radius-pill);
	background-color: var(--color-grey-200);
	color: var(--color-text-secondary);
}

.tag--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.tag--accent {
	background-color: var(--color-accent-light);
	color: var(--color-accent);
}

.tag--success {
	background-color: var(--color-success-bg);
	color: var(--color-success);
}

.tag--error {
	background-color: var(--color-error-bg);
	color: var(--color-error);
}

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	font-size: var(--font-size-xs);
	font-weight: 700;
	border-radius: var(--border-radius-pill);
	background-color: var(--color-accent);
	color: var(--color-white);
	line-height: 1;
}


/* ==========================================================================
   25. EMPTY STATE
   ========================================================================== */

.empty-state {
	text-align: center;
	padding: var(--spacing-3xl) var(--spacing-xl);
	color: var(--color-text-muted);
}

.empty-state__icon {
	font-size: 3rem;
	margin-bottom: var(--spacing-md);
	opacity: 0.4;
}

.empty-state__title {
	font-size: var(--font-size-xl);
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-bottom: var(--spacing-sm);
}

.empty-state__text {
	font-size: var(--font-size-sm);
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================================================
   26. MAP CONTAINER
   ========================================================================== */

.map-container {
	width: 100%;
	height: 500px;
	background-color: var(--color-grey-200);
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--color-grey-300);
	overflow: hidden;
}

@media (max-width: 767px) {
	.map-container {
		height: 350px;
	}
}


/* ==========================================================================
   27. TOOLTIP
   ========================================================================== */

[data-tooltip] {
	position: relative;
	cursor: help;
}

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	padding: var(--spacing-xs) var(--spacing-sm);
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: var(--font-size-xs);
	white-space: nowrap;
	border-radius: var(--border-radius-sm);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-fast), transform var(--transition-fast);
}

[data-tooltip]:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(-8px);
}


/* ==========================================================================
   28. LOADING SPINNER
   ========================================================================== */

.spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 3px solid var(--color-grey-300);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.spinner--lg {
	width: 40px;
	height: 40px;
	border-width: 4px;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.loading-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-3xl);
}


/* ==========================================================================
   29. PRINT STYLES
   ========================================================================== */

@media print {
	body {
		padding-top: 0;
		background: white;
		color: black;
	}

	.header,
	.footer,
	.nav__toggle,
	.search-bar,
	.pagination,
	.btn,
	.flash {
		display: none !important;
	}

	.main {
		padding-top: 0;
	}

	.card {
		box-shadow: none;
		border: 1px solid #ccc;
		break-inside: avoid;
	}

	a {
		color: black;
		text-decoration: underline;
	}

	a[href]::after {
		content: ' (' attr(href) ')';
		font-size: 0.8em;
		color: #666;
	}
}


/* ==========================================================================
   30. RESPONSIVE OVERRIDES
   ========================================================================== */

/* Small mobile adjustments */
@media (max-width: 480px) {
	:root {
		--font-size-4xl: 1.75rem;
		--font-size-3xl: 1.5rem;
		--font-size-2xl: 1.25rem;
	}

	.container {
		padding-left: var(--spacing-md);
		padding-right: var(--spacing-md);
	}

	.stat-boxes {
		grid-template-columns: 1fr;
	}

	.form-row {
		flex-direction: column;
		gap: 0;
	}

	.rating-bar__label {
		flex: 0 0 100px;
	}
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Large desktop */
@media (min-width: 1440px) {
	:root {
		--container-max: 1320px;
	}
}


/* ==========================================================================
   31. ACCESSIBILITY - FOCUS STYLES
   ========================================================================== */

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(232, 114, 12, 0.2);
}

/* Skip to content */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--spacing-md);
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--color-accent);
	color: var(--color-white);
	font-weight: 600;
	border-radius: var(--border-radius);
	z-index: 10000;
	transition: top var(--transition-fast);
}

.skip-link:focus {
	top: var(--spacing-md);
}


/* ==========================================================================
   32. ANIMATION HELPERS
   ========================================================================== */

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
	animation: fadeIn var(--transition-slow) ease forwards;
}

.animate-slide-down {
	animation: slideDown var(--transition) ease forwards;
}

/* Staggered animation for card grids */
.card-grid .card {
	opacity: 0;
	animation: fadeIn var(--transition-slow) ease forwards;
}

.card-grid .card:nth-child(1) { animation-delay: 0ms; }
.card-grid .card:nth-child(2) { animation-delay: 80ms; }
.card-grid .card:nth-child(3) { animation-delay: 160ms; }
.card-grid .card:nth-child(4) { animation-delay: 240ms; }
.card-grid .card:nth-child(5) { animation-delay: 320ms; }
.card-grid .card:nth-child(6) { animation-delay: 400ms; }
.card-grid .card:nth-child(7) { animation-delay: 480ms; }
.card-grid .card:nth-child(8) { animation-delay: 560ms; }
.card-grid .card:nth-child(9) { animation-delay: 640ms; }