/**
 * Raymi-Peru — Custom Styles
 * Enhancements beyond what theme.json can express.
 */

/* ── Smooth scrolling ── */
html {
	scroll-behavior: smooth;
}

/* ── Focus styles (accessibility, WCAG 1.4.11 / 2.4.7) ──
 * Hell: terra (5,64:1 auf cream, 6,16:1 auf white).
 * Dunkel: gold-light (7,93:1 auf terra-deep, 4,92:1 auf terra-dark).
 * Auf terra / green: cream (5,64:1 / 8,57:1). gold (2,81:1 auf cream) ist kein Fokusring mehr.
 */
:root {
	--rp-focus: var(--wp--preset--color--terra, #b03535);
}
.has-terra-deep-background-color,
.has-terra-dark-background-color,
.has-ink-background-color,
.rb-hero {
	--rp-focus: var(--wp--preset--color--gold-light, #e8a820);
}
.has-terra-background-color,
.has-green-background-color,
.rb-cta {
	--rp-focus: var(--wp--preset--color--cream, #faf4ec);
}
:focus-visible {
	outline: 2px solid var(--rp-focus);
	outline-offset: 2px;
}

/* ── Screen-reader-only text (falls der Core-Stil fehlt) ── */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ── Cover block overlay texture ── */
.wp-block-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9850a' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: overlay;
}

.wp-block-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* ── Event cards hover ── */
.wp-block-query .wp-block-group:has(.wp-block-post-featured-image) {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-query .wp-block-group:has(.wp-block-post-featured-image):hover {
	transform: translateY(-2px);
	box-shadow:
		0 8px 24px rgba(26, 14, 6, 0.08),
		0 2px 8px rgba(26, 14, 6, 0.04);
}

/* ── Featured image hover zoom ── */
.wp-block-post-featured-image {
	overflow: hidden;
}

.wp-block-post-featured-image img {
	transition: transform 0.4s ease;
}

.wp-block-post-featured-image:hover img {
	transform: scale(1.04);
}

/* ── Navigation mobile overlay ── */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50);
}

/* ── Separator gold accent ── */
.wp-block-separator.is-style-wide {
	max-width: 80px;
	border-width: 3px;
}

/* ── Button hover transition ── */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* ── Social links hover ── */
.wp-block-social-links .wp-social-link {
	transition: transform 0.2s ease;
}

.wp-block-social-links .wp-social-link:hover {
	transform: scale(1.1);
}

/* ── Blockquote left border refinement ── */
.wp-block-quote {
	position: relative;
}

/* ── 404 number subtle animation ── */
@keyframes raymi-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

body.error404 .wp-block-heading:first-child {
	animation: raymi-float 4s ease-in-out infinite;
}

/* ═════════════════════════════════════════════
 * Chronik / Recorrido (inc/chronik.php)
 * Farben nur aus AA-geprüften Paaren (brand/README §3.2):
 * gold-text/cream 5,42 · stone/cream 6,85 · gold-light/terra-deep 7,93
 * ═════════════════════════════════════════════ */

.rp-kicker {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}

/* Sprach-Badge */
.rp-lang-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ui, 'DM Sans', system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-transform: none;
	padding: 0.05em 0.6em;
	border-radius: var(--wp--custom--radius--full, 999px);
	background: var(--wp--preset--color--gold-pale, #f5e4b0);
	color: var(--wp--preset--color--gold-text, #8a5a00); /* 4,69:1 */
	vertical-align: baseline;
	white-space: nowrap;
}
.rp-lang-badge--es {
	background: transparent;
	border: 1px dashed var(--wp--preset--color--stone, #5e5348);
	color: var(--wp--preset--color--stone, #5e5348); /* 6,85 cream / 7,48 white */
}
.rp-lang-badge--de-es {
	background: var(--wp--preset--color--green, #2a4f24);
	color: var(--wp--preset--color--cream, #faf4ec); /* 8,57:1 */
}

/* Sprungnavigation Jahre */
.rp-chronik__nav {
	margin: 0 0 var(--wp--preset--spacing--60, 2.25rem);
}
.rp-chronik__nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.rp-chronik__nav a {
	display: inline-block;
	min-width: 3.5em;
	min-height: 24px; /* WCAG 2.5.8 */
	text-align: center;
	font-family: var(--wp--preset--font-family--ui, 'DM Sans', system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	padding: 0.35em 0.7em;
	border: 1px solid var(--wp--preset--color--gold-pale, #f5e4b0);
	border-radius: var(--wp--custom--radius--sm, 4px);
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--terra, #b03535); /* 6,16:1 */
	text-decoration: none;
}
.rp-chronik__nav a:hover {
	background: var(--wp--preset--color--terra-dark, #7a1f1f);
	border-color: var(--wp--preset--color--terra-dark, #7a1f1f);
	color: var(--wp--preset--color--gold-pale, #f5e4b0); /* 8,13:1 */
}

/* Epochen-Kopf (nur wenn Epochen gepflegt sind) */
.rp-era {
	background: var(--wp--preset--color--terra-deep, #3d0e0e);
	color: var(--wp--preset--color--cream, #faf4ec);
	border-radius: var(--wp--custom--radius--md, 8px);
	padding: var(--wp--preset--spacing--60, 2.25rem) var(--wp--preset--spacing--50, 1.5rem);
	margin: var(--wp--preset--spacing--60, 2.25rem) 0 var(--wp--preset--spacing--50, 1.5rem);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	align-items: end;
	--rp-focus: var(--wp--preset--color--gold-light, #e8a820);
}
.rp-era__years {
	font-family: var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif);
	font-size: var(--wp--preset--font-size--display, clamp(3rem, 2rem + 5vw, 6rem));
	font-weight: 900;
	line-height: 1;
	color: var(--wp--preset--color--gold-light, #e8a820);
	font-variant-numeric: lining-nums;
	white-space: nowrap;
	margin: 0;
}
.rp-era__name {
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	color: var(--wp--preset--color--cream, #faf4ec);
	margin: 0 0 0.2em;
}
.rp-era__desc,
.rp-era__count {
	margin: 0;
}
.rp-era__count {
	color: var(--wp--preset--color--gold-pale, #f5e4b0);
	font-family: var(--wp--preset--font-family--ui, 'DM Sans', system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin-top: 0.4em;
}

/* Jahresgruppen mit mitlaufender Jahresmarke */
.rp-chronik__year {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--60, 2.25rem);
}
.rp-chronik__year-label {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 2;
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	padding: 0.25em 0;
	background: var(--wp--preset--color--cream, #faf4ec);
	border-bottom: 1px solid var(--wp--preset--color--gold-pale, #f5e4b0);
	font-family: var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif);
	font-size: var(--wp--preset--font-size--x-large, 2.5rem);
	font-weight: 900;
	line-height: 1.1;
	font-variant-numeric: lining-nums;
	color: var(--wp--preset--color--terra-deep, #3d0e0e);
	scroll-margin-top: var(--wp-admin--admin-bar--height, 0px);
}
@media (min-width: 782px) {
	.rp-chronik__year {
		display: grid;
		grid-template-columns: 8rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50, 1.5rem);
		align-items: start;
	}
	.rp-chronik__year-label {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem);
		border-bottom: 0;
		background: transparent;
		padding: 0;
	}
}

/* Zeitleiste */
.rp-timeline {
	--rp-tl-bg: var(--wp--preset--color--cream, #faf4ec);
	list-style: none;
	margin: 0;
	padding: 0 0 0 2.25rem;
	position: relative;
}
.rp-timeline::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 2px;
	background: var(--wp--preset--color--gold-pale, #f5e4b0);
}
.rp-timeline__item {
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--60, 2.25rem);
}
.rp-timeline__item:last-child {
	padding-bottom: 0;
}
.rp-entry {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--40, 1rem);
}
@media (min-width: 782px) {
	.rp-entry.has-media {
		grid-template-columns: minmax(0, 1fr) 240px;
		align-items: start;
	}
}
.rp-entry__dot {
	position: absolute;
	left: calc(-2.25rem + 2px);
	top: 0.2rem;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--gold, #c9850a); /* Grafik, kein Text */
	background: var(--rp-tl-bg);
}
.rp-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.6em;
	margin: 0;
	font-family: var(--wp--preset--font-family--ui, 'DM Sans', system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-text, #8a5a00);
}
.rp-entry__title {
	font-family: var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif);
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	margin: 0.2em 0 0.3em;
	max-width: 40ch;
	overflow-wrap: anywhere;
}
.rp-entry__title a {
	color: var(--wp--preset--color--terra-deep, #3d0e0e);
	text-decoration: none;
}
.rp-entry__title a:hover {
	color: var(--wp--preset--color--terra, #b03535);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}
.rp-entry__excerpt {
	margin: 0;
	max-width: 62ch;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink, #1a0e06);
}
.rp-entry__media {
	margin: 0;
}
.rp-entry__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm, 4px);
	background: var(--wp--preset--color--gold-pale, #f5e4b0);
}
.rp-chronik__empty {
	color: var(--wp--preset--color--stone, #5e5348);
}

/* Einzelbeitrag: vorher/nachher */
.rp-post-nav {
	gap: var(--wp--preset--spacing--40, 1rem);
}
.rp-post-nav > * {
	flex: 1 1 16rem;
	max-width: 48%;
}
.rp-post-nav .post-navigation-link__label {
	display: block;
	color: var(--wp--preset--color--stone, #5e5348);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
@media (max-width: 600px) {
	.rp-post-nav > * {
		max-width: 100%;
	}
	.rp-era {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30, 0.67rem);
	}
}

@media print {
	.rp-chronik__nav { display: none; }
	.rp-chronik__year-label { position: static; }
}

/* ── Reduced motion (brand/README §6: obligatorisch) ── */
@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;
	}
}

/* ── Print styles ── */
@media print {
	.wp-block-navigation,
	.wp-block-social-links,
	footer {
		display: none !important;
	}
}

/* ── Footer links (axe color-contrast) ──
 * The global link colour (terra #b03535) reaches only 2.68:1 on terra-deep.
 * gold-pale on terra-deep = 13.1:1, cream (hover/focus) = 15.2:1.
 * Scoped to paragraph links; navigation and social links keep their block styles. */
.rp-footer p a {
	color: var(--wp--preset--color--gold-pale);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.rp-footer p a:hover,
.rp-footer p a:focus-visible {
	color: var(--wp--preset--color--cream);
}

/* Header-Logo: offizielle Wortmarke (brand/logo/raymi-wortmarke-positiv.svg), ersetzt custom_logo */
.rp-logo { display: inline-flex; line-height: 0; }
.rp-logo img { display: block; height: clamp(44px, 6vw, 60px); width: auto; }