/**
 * Seniorenwohnkompass - Legal Page Styles
 * Used for: Impressum, Datenschutz, Empfehlungs-Hinweis
 * WCAG 2.1 AA | Senior-Friendly
 */

/* ========================================
   1. CSS VARIABLES (DESIGN SYSTEM)
======================================== */

:root {
	/* Colors - Primary (Terracotta) */
	--swk-color-primary: #D8704F;
	--swk-color-primary-dark: #B85A3D;
	--swk-color-primary-light: #E89578;

	/* Colors - Backgrounds */
	--swk-color-bg-cream: #FAF7F2;

	/* Colors - Text (Warm Tones) */
	--swk-color-text-dark: #2C1A0E;
	--swk-color-text-body: #4A4743;
	--swk-color-text-card: #4E4C4A;
	--swk-color-text-muted: #8A8580;

	/* Colors - Borders */
	--swk-color-border: #D8CFC1;

	/* Typography */
	--font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	/* Border Radius */
	--radius-sm: 4px;

	/* Animation */
	--duration-fast: 200ms;
	--ease-default: ease-out;
}

html,
body {
	overscroll-behavior: none;
}

/* ========================================
   2. BASE / ACCESSIBILITY
======================================== */

.swk-legal-wrapper {
	font-family: var(--font-primary);
	color: var(--swk-color-text-body);
	font-size: 20px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	-moz-osx-font-smoothing: grayscale;
	background: var(--swk-color-bg-cream);
}

.swk-legal-wrapper *,
.swk-legal-wrapper *::before,
.swk-legal-wrapper *::after {
	-webkit-tap-highlight-color: transparent;
}

*:focus-visible {
	outline: 3px solid #2C1A0E;
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 16px;
	background: #7A3020;
	color: #FFFFFF;
	padding: 12px 24px;
	border-radius: 0 0 8px 8px;
	z-index: 1000;
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
}

.skip-link:focus {
	top: 0;
}

/* ========================================
   3. LEGAL CONTAINER
======================================== */

.swk-legal-container {
	max-width: 960px;
	margin: 0 auto;
	padding: 32px 80px 64px;
}

/* ========================================
   4. BREADCRUMBS
======================================== */

.swk-breadcrumb {
	margin-bottom: 24px;
}

.swk-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 400;
	color: var(--swk-color-text-card);
}

.swk-breadcrumb-item a {
	color: var(--swk-color-primary-dark);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-default);
}

@media (hover: hover) {
	.swk-breadcrumb-item a:hover {
		color: var(--swk-color-primary);
		text-decoration: underline;
	}
}

.swk-breadcrumb-separator {
	margin: 0 8px;
	color: var(--swk-color-text-card);
}

.swk-breadcrumb-current {
	color: var(--swk-color-text-card);
}

/* ========================================
   5. LEGAL HEADER
======================================== */

.swk-legal-title {
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--swk-color-text-dark);
	margin: 0 0 16px 0;
}

.swk-legal-subtitle {
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--swk-color-text-body);
	margin: 0 0 24px 0;
}

.swk-legal-divider {
	border: none;
	border-top: 1px solid var(--swk-color-border);
	margin: 0 0 32px 0;
}

/* ========================================
   6. LEGAL BODY (CONTENT STYLES)
======================================== */

.swk-legal-body h2 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--swk-color-text-dark);
	margin: 48px 0 16px 0;
}

.swk-legal-body h2:first-child {
	margin-top: 0;
}

.swk-legal-body h3 {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--swk-color-text-dark);
	margin: 32px 0 12px 0;
}

.swk-legal-body p {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--swk-color-text-body);
	margin: 0 0 16px 0;
}

.swk-legal-body a {
	color: var(--swk-color-primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--duration-fast) var(--ease-default);
}

@media (hover: hover) {
	.swk-legal-body a:hover {
		color: var(--swk-color-primary);
	}
}

.swk-legal-body ul,
.swk-legal-body ol {
	padding-left: 24px;
	margin: 0 0 16px 0;
}

.swk-legal-body li {
	font-family: var(--font-primary);
	font-size: 20px;
	line-height: 1.6;
	color: var(--swk-color-text-body);
	margin-bottom: 8px;
}

.swk-legal-body li:last-child {
	margin-bottom: 0;
}

.swk-legal-body hr {
	border: none;
	border-top: 1px solid var(--swk-color-border);
	margin: 32px 0;
}

/* ========================================
   7. LEGAL FOOTER META
======================================== */

.swk-legal-stand {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 400;
	font-style: italic;
	color: var(--swk-color-text-muted);
	margin: 48px 0 0 0;
}

/* ========================================
   8. COMPACT FOOTER (shared with article)
======================================== */

.swk-article-footer {
	background: var(--swk-color-text-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 40px 80px;
}

.swk-article-footer-copy {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 400;
	color: #B8A898;
	text-align: center;
	margin: 0;
}

.swk-article-footer-links {
	display: flex;
	gap: 24px;
}

.swk-article-footer-links a {
	font-family: var(--font-primary);
	font-size: 15px;
	font-weight: 400;
	color: #E8DDD0;
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-default);
}

@media (hover: hover) {
	.swk-article-footer-links a:hover {
		color: #FFFFFF;
	}
}

/* ========================================
   9. RESPONSIVE
======================================== */

/* Tablet */
@media (max-width: 1024px) {
	.swk-legal-container {
		padding: 32px 32px 48px;
	}

	.swk-legal-title {
		font-size: 36px;
	}

	.swk-legal-body h2 {
		font-size: 24px;
	}

	.swk-article-footer {
		padding: 32px 32px;
	}
}

/* Mobile */
@media (max-width: 640px) {
	.swk-legal-container {
		padding: 16px 16px 40px;
	}

	.swk-legal-title {
		font-size: 32px;
	}

	.swk-legal-body p,
	.swk-legal-body li {
		font-size: 18px;
	}

	.swk-legal-body h2 {
		font-size: 22px;
	}

	.swk-legal-body h3 {
		font-size: 20px;
	}

	.swk-article-footer {
		padding: 24px 16px;
	}

	.swk-article-footer-links {
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}
}

/* ========================================
   10. ACCESSIBILITY
======================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}