/*
Theme Name:        Jundo Block Theme
Theme URI:         https://sdash.de
Author:            SDASH – Karsten
Author URI:        https://sdash.de
Description:       Individuelles WordPress-Block-Theme (Full Site Editing) für Dachdecker Jürgens und Ottenjann. Ruhig, aufgeräumt, diszipliniert – gebaut mit theme.json, nativen Block-Templates und Block Patterns, ohne Page-Builder.
Requires at least:  6.4
Tested up to:       6.6
Requires PHP:       7.4
Version:            0.2.0
License:            GNU General Public License v2 or later
License URI:        http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:        jundo-theme
Tags:               full-site-editing, block-patterns, custom-colors, custom-logo, threaded-comments, translation-ready

Alle Design-Tokens (Farben, Typografie, Spacing, Layout) leben in theme.json und
werden über den nativen Site Editor (Global Styles) verwaltet – kein Customizer.
Diese Datei enthält nur den Theme-Header (WordPress-Pflicht) sowie kleine globale
Ergänzungen, die theme.json nicht abbilden kann (Skip-Link, Sticky-Header, Reveal-Animation).
*/

/* =============================================================
   Site-Title/-Tagline im Header ausblenden, sobald ein echtes Logo
   gesetzt ist (WordPress markiert das automatisch mit body.wp-custom-logo).
   Das Logo enthält den Firmennamen bereits als Bild — ein Text-Titel
   daneben wäre redundant (auch für Screenreader, da der Alt-Text des
   Logos die gleiche Information liefert).
   ============================================================= */
body.wp-custom-logo .jundo-masthead .wp-block-site-title,
body.wp-custom-logo .jundo-masthead .wp-block-site-tagline {
	display: none;
}

/* =============================================================
   Logo-Padding im Header — das site-logo-Bild hat, anders als Site-
   Title/-Tagline daneben, keine Zeilenhöhe, die von sich aus Luft nach
   oben/unten schafft, und wirkt dadurch im fixed Header knapp/abgeschnitten.
   ============================================================= */
.jundo-masthead .wp-block-site-logo {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* =============================================================
   Vollbild-Hero (jundo/hero-business Pattern) — füllt die gesamte
   Bildschirmhöhe, Inhalt wird vertikal zentriert. dvh mit vh-Fallback
   gegen das "springende" 100vh-Verhalten mobiler Browser (Adressleiste).
   ============================================================= */
.jundo-hero-fullscreen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
}

/* =============================================================
   overflow-x:clip auf dem body — verhindert horizontales Scrollen durch
   knapp überstehende alignfull-Abschnitte, ohne body zum Scroll-Container
   zu machen (im Unterschied zu overflow:hidden).
   ============================================================= */
body {
	overflow-x: clip;
	padding-top: var(--jundo-masthead-height, 88px);
}

/* =============================================================
   Globaler Fokus-Ring (Barrierefreiheit) — einheitlich für Links,
   Buttons, Navigation. Gleiche Optik wie der bestehende Fokus-Ring
   im Kontaktformular (css/footer-contact.css). Nur :focus-visible,
   damit kein Ring bei Maus-Klick erscheint, nur bei Tastaturfokus.
   ============================================================= */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-accent);
	outline-offset: 2px;
}

/* =============================================================
   Skip-Link (Barrierefreiheit) — unsichtbar bis Tastaturfokus
   ============================================================= */
.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 100000;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	padding: 12px 20px;
	border-radius: 8px;
	transition: top 0.2s ease;
}
.skip-link:focus {
	top: 8px;
}

/* =============================================================
   Fixed Header + Scroll-Elevation (main.js togglet .is-scrolled)

   position:fixed statt sticky: in der verschachtelten FSE-Struktur
   (wp-site-blocks > header.wp-block-template-part > .jundo-masthead)
   griff position:sticky in Firefox nicht zuverlässig – fixed ist hier
   robuster. Der Platzhalter (padding-top auf body, siehe oben) hält
   den nachfolgenden Content frei; main.js misst die tatsächliche
   Masthead-Höhe per ResizeObserver und schreibt sie in
   --jundo-masthead-height (der 88px-Wert oben ist nur der No-JS-/
   Erstladung-Fallback).
   ============================================================= */
.jundo-masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	transition: box-shadow 0.2s ease;
}
.jundo-masthead.is-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Ungescrollt: Navy wie der Footer (Marke wirkt sofort geschlossen). Ab
   Scroll-Start wechselt der Header auf Weiß — WordPress' Farb-Utility-Klasse
   (.has-contrast-background-color) kommt mit !important, braucht also höhere
   Spezifität + eigenes !important, um überschrieben zu werden. */
.jundo-masthead.is-scrolled.has-contrast-background-color {
	background-color: var(--wp--preset--color--background) !important;
}

/* Nav-Text auf dem ungescrollten Navy-Header: Weiß statt der globalen
   Link-Farbe (Marken-Blau), die auf Navy kaum Kontrast hätte. Hover/Focus
   nutzt Rot-Hell (--primary-accent) — laut DESIGN.md die vorgesehene
   Textfarbe auf dunklem Grund. Ab .is-scrolled greifen wieder die normalen
   globalen Link-Farben (Blau/Navy-Hover) auf Weiß. */
.jundo-masthead:not(.is-scrolled) .wp-block-navigation a {
	color: var(--wp--preset--color--white);
}
.jundo-masthead:not(.is-scrolled) .wp-block-navigation a:hover,
.jundo-masthead:not(.is-scrolled) .wp-block-navigation a:focus-visible {
	color: var(--wp--preset--color--primary-accent);
}

/* Eigentliche Ursache der weißen Lücke zwischen Header und Hero: WordPress
   behandelt Header-/Main-/Footer-Template-Parts als Flow-Layout-Kinder und
   hängt dem zweiten Kind (#primary) automatisch den globalen Block-Gap
   (theme.json spacing.blockGap, 1.5rem) als margin-block-start an — sichtbar
   als weißer Streifen, seit der Header nicht mehr weiß ist. */
#primary {
	margin-block-start: 0;
}

/* =============================================================
   Scroll-Reveal "Reveal the Work" (main.js fügt .jundo-reveal /
   .is-visible hinzu) — eine deckende Fläche in Marken-Navy liegt über
   dem Ziel-Element und wird beim Scroll-ins-Bild weggezogen, wie beim
   Abziehen einer Abdeckplane. Absichtlich Navy statt Rot als Deckfarbe:
   DESIGN.md reserviert Rot als Großflächenfarbe für die eine
   Hero-Info-Card, nicht für wiederkehrende Deko (siehe "Do's and Don'ts").
   Ohne JavaScript bleibt der Inhalt regulär sichtbar (progressive enhancement).
   ============================================================= */
.jundo-reveal {
	position: relative;
	overflow: hidden;
}
.jundo-reveal::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--contrast);
	transform: scaleX(1);
	transform-origin: right;
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) var(--reveal-delay, 0ms);
	pointer-events: none;
	z-index: 5;
}
.jundo-reveal.is-visible::after {
	transform: scaleX(0);
}
@media (prefers-reduced-motion: reduce) {
	.jundo-reveal::after {
		transition: none;
		transform: scaleX(0);
	}
	.jundo-masthead {
		transition: none;
	}
}

/* =============================================================
   Section-Kicker + Gradient-Hook — wiederkehrendes Überschriften-
   Muster für Startseiten-Abschnitte: kleine rote Eyebrow-Zeile über
   der Headline, in der Headline selbst trägt die hintere Worthälfte
   einen Farbverlauf (.jundo-gradient-text).
   ============================================================= */
.jundo-section-kicker {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: var(--wp--preset--spacing--x-small);
}

.jundo-gradient-text {
	background: linear-gradient(90deg, var(--wp--preset--color--primary-accent), var(--wp--preset--color--primary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}