/*
Theme Name: Miss Absolute Levana
Theme URI: https://www.missabsolutelevana.com/
Author: Phase 1
Description: Minimales Block-Theme fuer Miss Absolute Levana. Ausschliesslich WordPress-Core-Bloecke, lokal gehostete Schriften, kein Page Builder, kein Shortcode fuer redaktionelle Inhalte.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
Version: 0.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mal
Tags: block-theme, full-site-editing, editorial, dark
*/

/* ==========================================================================
   Nur was theme.json nicht abdeckt. Alles Gestalterische lebt in theme.json.
   ========================================================================== */

/* --- Fokus: sichtbar, gold, nie durch Farbe allein codiert ---------------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 1px;
}

/* Sprunglink zur Hauptnavigation vorbei */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.9rem 1.4rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* --- Lesbreite ------------------------------------------------------------
   Bewusst NICHT ueber max-width auf einzelne Absaetze: der Constrained-Layout
   des Kerns setzt margin-inline mit !important auf auto. Begrenzte Absaetze
   werden dadurch zentriert und stehen gegenueber Linien, Labels und Trennern
   sichtbar eingerueckt. Die Lesebreite kommt deshalb aus der contentSize der
   Vorlage. Diese Klasse begrenzt nur Inhalte in Spalten, wo der Kern keine
   automatischen Aussenabstaende setzt.                                      */
.mal-measure {
	max-width: var(--wp--custom--measure);
}

/* --- Haarlinie ------------------------------------------------------------
   Aubergine auf Obsidian erreicht nur 1,1:1. Abgesetzte Flaechen brauchen
   deshalb eine zweite Kennzeichnung. Siehe docs/03-kontrastpruefung.md.      */
.mal-hairline {
	border: var(--wp--custom--rule);
}
.mal-hairline-top {
	border-top: var(--wp--custom--rule);
}

/* Goldlinie als Auftakt einer Sektion */
.mal-rule::before {
	content: "";
	display: block;
	width: 3.5rem;
	height: 1px;
	margin-bottom: 1.75rem;
	background: var(--wp--preset--color--accent);
}

/* --- Kapitaelchen-Label --------------------------------------------------- */
.mal-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* --- Bilder: ruhig, ohne Rundung, mit dezenter Skalierung ------------------ */
.mal-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mal-figure:hover img {
	transform: scale(1.02);
}

/* Platzhalterflaeche, solange keine freigegebenen Bilder vorliegen */
.mal-placeholder {
	position: relative;
	background:
		repeating-linear-gradient(
			135deg,
			rgba(198, 166, 107, 0.08) 0 12px,
			transparent 12px 24px
		),
		var(--wp--preset--gradient--glow);
	border: var(--wp--custom--rule);
}
.mal-placeholder::after {
	content: attr(data-label);
	position: absolute;
	inset: auto 0 1rem 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}
.mal-placeholder.is-portrait { aspect-ratio: 3 / 4; }
.mal-placeholder.is-landscape { aspect-ratio: 4 / 3; }
.mal-placeholder.is-wide { aspect-ratio: 16 / 9; }
.mal-placeholder.is-square { aspect-ratio: 1 / 1; }

/* Dezente Eckakzente auf grossen Platzhaltern (Hero) */
.mal-placeholder.has-corner-accents::before,
.mal-placeholder.has-corner-accents::after {
	content: "";
}
.mal-placeholder.has-corner-accents {
	position: relative;
}
.mal-placeholder.has-corner-accents .mal-corner {
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	border-color: var(--wp--preset--color--accent);
	pointer-events: none;
}
.mal-placeholder.has-corner-accents .mal-corner.top-left {
	top: 1.25rem;
	left: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--accent);
	border-left: 1px solid var(--wp--preset--color--accent);
}
.mal-placeholder.has-corner-accents .mal-corner.bottom-right {
	bottom: 1.25rem;
	right: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--accent);
	border-right: 1px solid var(--wp--preset--color--accent);
}

/* --- Audio-Karten (Katalog + Startseiten-Teaser) -------------------------- */
.mal-audio-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--wp--custom--rule);
	background: var(--wp--preset--color--surface);
	transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}
.mal-audio-card:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}
.mal-audio-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-bottom: var(--wp--custom--rule);
	/* Solange kein Titelbild hinterlegt ist, rendert core/post-featured-image
	   nichts (kein <img>, kein <figure>) — ohne eigenen Hintergrund waere die
	   Karte hier praktisch unsichtbar. Gleiche Platzhalter-Optik wie .mal-placeholder. */
	background:
		repeating-linear-gradient(
			135deg,
			rgba(198, 166, 107, 0.08) 0 12px,
			transparent 12px 24px
		),
		var(--wp--preset--gradient--glow);
}
.mal-audio-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mal-audio-card--compact .mal-audio-card__media {
	aspect-ratio: 1 / 1;
}
.mal-audio-card--compact .mal-audio-card__body {
	padding: var(--wp--preset--spacing--20);
	gap: 0.25rem;
}
.mal-audio-card__badge {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.3rem 0.65rem;
	background: rgba(11, 11, 15, 0.6);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.mal-audio-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30);
}

/* --- Navigation ----------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
	transition: border-color var(--wp--custom--transition);
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Overlay-Menue: dunkler Grund, grosszuegige Typografie */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	padding: clamp(1.5rem, 6vw, 4rem);
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: 3rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 7vw, 2.5rem);
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--accent);
}
/* Tippziel mindestens 44 x 44 Pixel */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Buttons: Uebergang, nie nur Farbe als Zustand ------------------------ */
.wp-block-button__link {
	transition:
		background-color var(--wp--custom--transition),
		color var(--wp--custom--transition),
		letter-spacing var(--wp--custom--transition);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wp-block-button__link:hover {
	letter-spacing: 0.2em;
}
/* Sekundaere Aktion: Kontur statt Flaeche */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* --- Sanftes Einblenden beim Scrollen ------------------------------------- */
@supports (animation-timeline: view()) {
	.mal-reveal {
		animation: mal-fade-in linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 42%;
	}
}
@keyframes mal-fade-in {
	from { opacity: 0; transform: translateY(1.25rem); }
	to   { opacity: 1; transform: none; }
}

/* --- Reduzierte Bewegung wird respektiert --------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.mal-figure:hover img { transform: none; }
	.mal-reveal { animation: none; opacity: 1; transform: none; }
}

/* --- Kein horizontales Scrollen ab 320 Pixel ------------------------------ */
html, body { overflow-x: clip; }
img, video, svg { max-width: 100%; height: auto; }

/* --- Footer-Seitenliste ohne Aufzaehlungszeichen -------------------------- */
footer .wp-block-page-list ul,
footer .wp-block-page-list {
	list-style: none;
	padding-left: 0;
}
footer .wp-block-page-list .wp-block-pages-list__item__link {
	color: var(--wp--preset--color--contrast-2);
}
footer .wp-block-page-list .wp-block-navigation__submenu-container {
	padding-left: 1rem;
}