/*
Theme Name: SardoNat
Theme URI: https://natur.unesco-sardona.ch
Author: UNESCO-Welterbe Tektonikarena Sardona
Description: Block-Theme für SardoNat – die Naturgefahren-Plattform des UNESCO-Welterbes Tektonikarena Sardona. Zusammen mit dem Plugin «SardoNat Core» verwenden.
Version: 1.2.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: sardonat
*/

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--sardona); outline-offset: 2px; }
::selection { background: var(--wp--preset--color--sardona); color: #fff; }
img { height: auto; }
.wp-site-blocks { padding-top: 0; }
main { min-height: 50vh; }

/* ---------- Kopfbereich ---------- */
.sn-header { position: sticky; top: 0; z-index: 100; }
.admin-bar .sn-header { top: var(--wp-admin--admin-bar--height, 32px); }
.sn-header .wp-block-site-title a { display: inline-flex; align-items: center; gap: .55rem; }
.sn-header .wp-block-site-title a::before {
	content: ""; width: 1.4rem; height: 1.05rem; flex: none;
	background: linear-gradient(to top right, var(--wp--preset--color--verrucano) 0 46%, var(--wp--preset--color--sardona) 46% 58%, #8d847a 58% 100%);
	clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%);
}
.sn-header__tagline { margin: 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; line-height: 1.2; }
.sn-header .wp-block-navigation a { text-decoration: none; }
.sn-header .wp-block-navigation-item__content { padding: .35rem 0; border-bottom: 2px solid transparent; }
.sn-header .wp-block-navigation-item__content:hover,
.sn-header .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--wp--preset--color--sardona); }
.sn-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--flysch) !important; color: var(--wp--preset--color--kalk) !important;
	border: 0 !important; padding: .5rem 0 !important; min-width: 15rem !important; box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.sn-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .45rem 1.1rem; border: 0; text-transform: none; letter-spacing: 0; font-family: var(--wp--preset--font-family--text); font-weight: 600; font-size: 1rem; }
.sn-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: rgba(255,255,255,.08); }
.sn-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--flysch) !important; color: var(--wp--preset--color--kalk) !important; padding: 1.5rem; }
@media (min-width: 600px) and (max-width: 1080px) {
	.sn-header__tagline { display: none; }
	.sn-header .wp-block-site-title { font-size: 1.5rem !important; }
	.sn-header .wp-block-navigation { font-size: 1rem !important; }
	.sn-header .wp-block-navigation__container { gap: .9rem !important; }
}
.sn-header .wp-block-search__button { background: transparent; color: inherit; border: 0; }
.sn-header .wp-block-search__button svg { fill: currentColor; }

/* ---------- Hero ---------- */
.sn-hero { position: relative; overflow: hidden; isolation: isolate; }
.sn-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: url(assets/images/strata.svg) right bottom / cover no-repeat;
}
.sn-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(31,27,24,.97) 0%, rgba(31,27,24,.88) 40%, rgba(31,27,24,.25) 100%);
}
@media (max-width: 781px) { .sn-hero::after { background: rgba(31,27,24,.86); } }
.sn-hero h1 { color: inherit; max-width: 15ch; text-transform: uppercase; letter-spacing: .01em; line-height: .98; }
.sn-hero .sardonat-statistik { --sardonat-statistik-bg: rgba(31,27,24,.82); color: var(--wp--preset--color--kalk); border-color: rgba(247,244,239,.25); background: rgba(247,244,239,.25); backdrop-filter: blur(4px); }

/* Seitenkopf (Unterseiten) */
.sn-seitenkopf { border-bottom: 1px solid var(--wp--preset--color--linie); }
.sn-seitenkopf--dunkel { border-bottom: 0; }
.sn-seitenkopf--dunkel .sardonat-brotkrumen { color: rgba(247,244,239,.8); }
.sn-seitenkopf--dunkel h1 { color: inherit; }

/* ---------- Stile ---------- */
.is-style-kicker {
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1rem !important;
	letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--sardona); margin-bottom: .25rem !important;
}
.has-flysch-background-color .is-style-kicker,
.has-fels-background-color .is-style-kicker,
.sn-hero .is-style-kicker { color: var(--wp--preset--color--verrucano); }

.is-style-hinweis {
	background: var(--wp--preset--color--sand); border-left: 4px solid var(--wp--preset--color--verrucano);
	padding: .7rem 1rem; font-size: .92rem; color: var(--wp--preset--color--schiefer);
}

.wp-block-button.is-style-hell .wp-block-button__link { background: transparent; color: var(--wp--preset--color--kalk); box-shadow: inset 0 0 0 2px currentColor; }
.wp-block-button.is-style-hell .wp-block-button__link:hover { background: var(--wp--preset--color--kalk); color: var(--wp--preset--color--fels); }
.wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--sardona); box-shadow: inset 0 0 0 2px currentColor; border: 0; background: transparent; }

/* Überschiebungslinie: Abschnitt beginnt mit einer schrägen roten Linie (Glarner Hauptüberschiebung) */
.is-style-ueberschiebung { position: relative; --sn-vorher: var(--wp--preset--color--kalk); }
.is-style-ueberschiebung::before {
	content: ""; position: absolute; top: -1px; left: 0; right: 0; height: clamp(28px, 4.5vw, 72px); pointer-events: none;
	background: linear-gradient(to top right, transparent calc(50% - 2px), var(--wp--preset--color--sardona) calc(50% - 2px) calc(50% + 2px), var(--sn-vorher) calc(50% + 2px));
}

.sn-vorher-weiss { --sn-vorher: var(--wp--preset--color--weiss); }
.sn-schmal { max-width: 44rem; }

.is-style-karte, .sn-karte {
	background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie);
	border-top: 4px solid var(--wp--preset--color--sardona); border-radius: 4px;
}

.wp-block-list.is-style-sprungmarken { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wp-block-list.is-style-sprungmarken a {
	display: inline-block; padding: .35rem .9rem; border: 1px solid currentColor; border-radius: 99px;
	text-decoration: none; font-weight: 600; font-size: .95rem; color: inherit;
}
.wp-block-list.is-style-sprungmarken a:hover { background: var(--wp--preset--color--kalk); color: var(--wp--preset--color--fels); }

/* ---------- Inhalt ---------- */
.wp-block-post-content > * + h2 { margin-top: 2.6rem; }
.wp-block-post-content figcaption, .wp-element-caption { font-size: .88rem; color: var(--wp--preset--color--schiefer); }
.wp-block-post-content table { border-collapse: collapse; }
.wp-block-post-content :where(td, th) { border: 1px solid var(--wp--preset--color--linie); padding: .45rem .7rem; }
@media (min-width: 900px) { .sn-sticky { position: sticky; top: 6.5rem; } }

/* Inhaltsverzeichnis «Auf dieser Seite» */
.wp-block-list.is-style-inhalt {
	list-style: none; padding: 1rem 1.2rem; margin: 0 0 2rem; background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--linie); border-left: 4px solid var(--wp--preset--color--sardona);
	columns: 2 18rem; column-gap: 2rem; font-size: .97rem;
}
.wp-block-list.is-style-inhalt li { break-inside: avoid; padding: .2rem 0; }
.wp-block-list.is-style-inhalt a { text-decoration: none; }
.wp-block-list.is-style-inhalt a:hover { text-decoration: underline; }

/* Bilder im Inhalt */
.wp-block-post-content .wp-block-image { margin-block: 1.8rem; }
.wp-block-post-content .wp-block-image img { border-radius: 3px; }
.wp-block-post-content .wp-block-image figcaption { text-align: left; margin-top: .5rem; line-height: 1.45; }
.wp-block-post-content .wp-block-table { overflow-x: auto; }
.wp-block-post-content .wp-block-table td { vertical-align: top; }

/* Register der Gefahren-Drehscheiben */
.sardonat-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sardonat-tabs a {
	display: inline-block; padding: .45rem 1rem; border: 1px solid rgba(247,244,239,.55); border-radius: 99px;
	color: inherit; text-decoration: none; font-weight: 600; font-size: .98rem;
}
.sardonat-tabs a:hover { background: rgba(247,244,239,.12); }
.sardonat-tabs a[aria-current="page"] { background: var(--wp--preset--color--kalk); color: var(--wp--preset--color--fels); border-color: var(--wp--preset--color--kalk); }
.sardonat-extras > * + * { margin-top: var(--wp--preset--spacing--60); }
.sardonat-extras > h2:first-child { margin-top: 0; }
.sardonat-ereignis-titel { margin: 0; font-size: var(--wp--preset--font-size--titel); }

/* Abfrage-Karten (Ereignisarchiv) */
.sn-ereignisse .wp-block-post { display: flex; }
.sn-ereignisse .wp-block-post > .wp-block-group { flex: 1; transition: box-shadow .15s ease, transform .15s ease; position: relative; }
.sn-ereignisse .wp-block-post > .wp-block-group:hover { box-shadow: 0 8px 22px rgba(31,27,24,.12); transform: translateY(-2px); }
.sn-ereignisse .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.sn-ereignisse .wp-block-post-excerpt { font-size: .98rem; color: var(--wp--preset--color--schiefer); }
.sn-ereignisse .wp-block-post-excerpt__more-text { display: none; }

.wp-block-query-pagination { gap: .4rem; font-weight: 600; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { padding: .35rem .7rem; border: 1px solid var(--wp--preset--color--linie); text-decoration: none; background: var(--wp--preset--color--weiss); }
.wp-block-query-pagination .current { background: var(--wp--preset--color--fels); color: #fff; border-color: var(--wp--preset--color--fels); }

/* ---------- Fussbereich ---------- */
.sn-footer a { color: inherit; }
.sn-footer a:hover { color: #fff; }
.sn-footer h2 { font-size: 1.1rem !important; letter-spacing: .1em; text-transform: uppercase; color: inherit; margin: 0 0 .7rem; }
.sn-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.sn-footer__unten { border-top: 1px solid rgba(247,244,239,.18); font-size: .88rem; }