/*
Theme Name: Klar
Theme URI: https://example.com/klar
Author: Deine Webseite
Author URI: https://example.com
Description: Ein minimalistisches WordPress-Blocktheme (Full Site Editing) fuer persoenliche Webseiten. Reduziertes Design mit viel Weissraum, klarer Sans-Serif-Typografie und nur drei Farben (Anthrazit, Blau, Gruen). Enthaelt Blog und eine Now-Seite. Alle Farben, Schriften und Abstaende sind ueber Design > Editor > Stile anpassbar.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: klar
Tags: blog, one-column, custom-colors, block-styles, full-site-editing, editor-style, wide-blocks
*/

/*
 * Der Grossteil des Designs wird ueber theme.json gesteuert.
 * Hier stehen nur wenige Ergaenzungen, die theme.json nicht abbildet.
 */

/* Sanftere Fokus-Umrandung fuer Tastaturnavigation */
:where(a):focus-visible,
:where(button):focus-visible,
:where(.wp-block-navigation-item a):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Navigation: Unterstreichung erst beim Hover, dezent */
.wp-block-navigation .wp-block-navigation-item a {
	text-decoration: none;
}

/* ----------------------------------------------------------
   Mobile Navigation als Slide-Down-Panel von oben
   Standardmaessig rendert WordPress ein Fullscreen-Overlay.
   Wir wandeln es in einen Panel um, der in voller Breite
   von oben nach unten einfaehrt – so wirkt es wie eine
   natuerliche Erweiterung des Kopfbereichs.
   ---------------------------------------------------------- */

/* Backdrop: halbtransparenter Hintergrund, Klick daneben schliesst */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: rgba(43, 46, 51, 0.4) !important;
	padding: 0 !important;
	justify-content: stretch !important;
	align-items: flex-start !important;
	animation: klar-fade-in 0.2s ease-out;
}

/* Der eigentliche Panel: schiebt in voller Breite von oben ein */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close {
	width: 100%;
	max-width: none;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	padding: var(--wp--preset--spacing--40);
	overflow-y: auto;
	max-height: 100vh;
	animation: klar-slide-down 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Inhalt im Panel: linksbuendig, grosszuegiger Zeilenabstand */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	width: 100%;
	margin-top: var(--wp--preset--spacing--40);
}

/* Menue-Eintraege: gross, Anthrazit, dezenter Hover in Blau */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item a {
	color: var(--wp--preset--color--contrast);
	font-size: 1.15rem;
	font-weight: 500;
	padding: 0.4em 0;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--primary);
}

/* Schliessen-Button (X) oben rechts im Panel */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
}

/* Oeffnen-Button (Hamburger): Farbe an Theme anpassen */
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--contrast);
}

/* Animationen */
@keyframes klar-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
@keyframes klar-fade-in {
	from { background-color: rgba(43, 46, 51, 0); }
	to   { background-color: rgba(43, 46, 51, 0.4); }
}

/* Bewegung fuer Nutzer:innen mit "reduce motion" abschalten */
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-close {
		animation: none;
	}
}

/* Beitragsliste: feiner Trenner zwischen Eintraegen */
.klar-post-list .wp-block-post {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: var(--wp--preset--spacing--40);
}
.klar-post-list .wp-block-post:last-child {
	border-bottom: 0;
}

/* Bilder in Beitraegen mit sanft abgerundeten Ecken */
.entry-content img {
	border-radius: 6px;
}

/* "Now"-Kennzeichnung: kleiner gruener Punkt */
.klar-now-badge::before {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	vertical-align: middle;
}