/*
Theme Name: FellnasenKompass
Theme URI: https://fellnasenkompass.de
Author: Eric Schmidt
Description: Schlankes Gutenberg-first Theme für den Hunde-Ratgeber FellnasenKompass. Design/Templates. Funktionen & Datenlogik liegen im Plugin fk-core.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fellnasenkompass

Alle Design-Werte (Farben, Typografie, Abstände, Radien) liegen in theme.json
und werden als CSS Custom Properties ausgegeben. Siehe /design/design-system.md
im Projekt-Root für die vollständige Design-System-Referenz.
*/

/* -------------------------------------------------------------------------
   Typografie-Feinheiten, die theme.json nicht abbilden kann
   (Zeilenhöhen hängen an der Schriftgröße, nicht am Element)
   ---------------------------------------------------------------------- */

.has-lead-font-size {
	line-height: 1.55;
}

.has-meta-font-size {
	line-height: 1.45;
}

/* Sprungmarken nicht unter dem Seitenkopf verstecken */
:where( h2, h3 )[ id ] {
	scroll-margin-top: var( --wp--preset--spacing--70 );
}

/* -------------------------------------------------------------------------
   Barrierefreiheit: sichtbarer Fokus, Mindestgröße für Tippziele
   ---------------------------------------------------------------------- */

:where( a, button, input, select, textarea, summary ):focus-visible {
	outline: var( --wp--custom--fokus--breite ) solid var( --wp--preset--color--clay-ink );
	outline-offset: var( --wp--custom--fokus--abstand );
}

.wp-element-button,
.wp-block-button__link {
	min-height: var( --wp--custom--tippziel );
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* -------------------------------------------------------------------------
   Kopf- und Fußbereich
   ---------------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var( --wp--preset--color--line );
}

.site-header .wp-block-navigation {
	font-size: var( --wp--preset--font-size--meta );
}

.site-footer a {
	color: var( --wp--preset--color--clay-ink );
}

/*
 * Mobil: Logo, Menü, Copyright gestapelt und zentriert statt in einer
 * Zeile verteilt. Das Footer-Menü nutzt bewusst overlayMenu:"never" im
 * Template (nicht per CSS erzwungen) – auf Mobil bleibt es eine normale,
 * immer sichtbare Linkliste statt eines aufklappbaren Hamburger-Menüs,
 * was bei zwei Links unnötig wäre.
 */
@media ( max-width: 599px ) {
	.fk-footer__zeile {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var( --wp--preset--spacing--40 );
	}

	.fk-footer__menue .wp-block-navigation__container {
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
   Artikel-Layout: Text 700px, Sidebar 320px, Abstand 72px
   Sidebar erst ab 1024px – darunter wird gestapelt.
   ---------------------------------------------------------------------- */

.fk-artikel__spalten {
	gap: var( --wp--custom--layout--sidebar-abstand );
}

.fk-artikel__inhalt {
	min-width: 0;
}

@media ( max-width: 1023px ) {
	.fk-artikel__spalten {
		flex-direction: column;
		gap: var( --wp--preset--spacing--70 );
	}

	.fk-artikel__spalten > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Kategorie-Label über der Artikelüberschrift */
.fk-artikel__kategorie {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fk-artikel__kategorie a {
	text-decoration: none;
}

.fk-artikel__kategorie a:hover,
.fk-artikel__kategorie a:focus-visible {
	text-decoration: underline;
}

/* Meta-Zeile: Datum · Lesezeit · Autor */
.fk-artikel__meta {
	gap: var( --wp--preset--spacing--50 );
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Blockspezifische Theme-Stile
   ---------------------------------------------------------------------- */

/* „Das Wichtigste in Kürze“ – Liste mit Haken statt Punkten */
.fk-kuerze__liste {
	list-style: none;
	padding-left: 0;
}

.fk-kuerze__liste li {
	position: relative;
	padding-left: var( --wp--preset--spacing--60 );
}

.fk-kuerze__liste li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var( --wp--preset--color--clay );
	font-weight: 700;
}

/* Quellen – klein und zurückhaltend */
.fk-quellen__titel {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink-muted );
	font-family: var( --wp--preset--font-family--body );
}

.fk-quellen__liste {
	list-style: none;
	padding-left: 0;
	font-size: var( --wp--preset--font-size--meta );
	line-height: 1.45;
	color: var( --wp--preset--color--ink-muted );
}

/* Produktempfehlung – Kennzeichnung deutlich lesbar halten */
.fk-produkt__kennzeichnung {
	letter-spacing: 0.08em;
	margin-bottom: var( --wp--preset--spacing--40 );
}

/* Zitat im Stil „Fellnasen“ */
.wp-block-quote.is-style-fellnasen {
	border-left: 3px solid var( --wp--preset--color--clay );
	padding-left: var( --wp--preset--spacing--50 );
	margin-left: 0;
	font-style: italic;
	font-size: var( --wp--preset--font-size--h3 );
	line-height: 1.35;
	color: var( --wp--preset--color--forest );
}

.wp-block-quote.is-style-fellnasen cite {
	display: block;
	margin-top: var( --wp--preset--spacing--30 );
	font-style: normal;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--meta );
	line-height: 1.45;
	color: var( --wp--preset--color--ink-muted );
}

/* Tabellen – auf Mobil horizontal scrollbar statt gequetscht */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	min-width: 32rem;
}

.wp-block-table th,
.wp-block-table td {
	border-bottom: 1px solid var( --wp--preset--color--line );
	padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--40 );
	text-align: left;
}

.wp-block-table thead th {
	background-color: var( --wp--preset--color--sand );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--meta );
	line-height: 1.45;
	letter-spacing: 0.04em;
}

/* Hero-Bild im Artikel */
.fk-artikel__hero img {
	width: 100%;
	border-radius: var( --wp--custom--radius--l );
}

/* Beitragsraster in Archiven */
.fk-archiv__raster {
	gap: var( --wp--preset--spacing--70 );
}