/**
 * Flora & Flow – Basis-Layer
 *
 * Bewusst schlank gehalten (< 2.000 Zeilen, Briefing §1a):
 * Buttons, Cards, Formulare, Header/Footer, Sektions-Helfer, Slider-Basis.
 * Tokens kommen aus theme.json (--wp--preset--*, --wp--custom--*).
 *
 * Struktur:
 *   1. Basis & Utilities
 *   2. Header
 *   3. Footer
 *   4. Buttons
 *   5. Cards
 *   6. Formulare
 *   7. Sektionen & Typo-Helfer
 *   8. FAQ / Details
 *   9. Slider-Basis (Platzhalter fuer Phase b)
 *  10. A11y & Fokus
 */

/* --------------------------------------------------------------------------
 * 1. Basis & Utilities
 * ------------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------------------
 * 2. Header
 * ------------------------------------------------------------------------ */

.ff-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: var(--wp--preset--shadow--header);
}

.ff-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
	max-width: var(--wp--custom--grid--content);
	margin-inline: auto;
}

.ff-header__logo {
	flex: 0 0 auto;
}

/* Site-Title nur zeigen, wenn kein Logo gesetzt ist. */
.ff-header__logo + .ff-header__title {
	display: none;
}

.ff-header__title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-size: 1.5rem;
	letter-spacing: var(--wp--custom--letter-spacing--display);
	text-transform: uppercase;
}

.ff-header .ff-nav {
	margin-left: auto;
}

.ff-header .ff-nav a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ff-header .ff-nav a:hover,
.ff-header .ff-nav a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

.ff-header__cta {
	flex: 0 0 auto;
}

@media (max-width: 781px) {
	.ff-header__cta {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * 3. Footer
 * ------------------------------------------------------------------------ */

.ff-footer a {
	color: inherit;
	text-decoration: none;
}

.ff-footer a:hover {
	color: var(--wp--preset--color--accent-soft);
}

.ff-footer__brand a {
	font-size: 1.75rem;
	letter-spacing: var(--wp--custom--letter-spacing--display);
	text-transform: uppercase;
}

.ff-footer__heading {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--caps);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--base) 65%, transparent);
}

.ff-footer__svde {
	color: color-mix(in srgb, var(--wp--preset--color--base) 65%, transparent);
}

.ff-footer__sep {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent) !important;
	margin-top: var(--wp--preset--spacing--xl);
	margin-bottom: var(--wp--preset--spacing--md);
}

.ff-footer__legal {
	color: color-mix(in srgb, var(--wp--preset--color--base) 65%, transparent);
}

.ff-footer__nav a {
	font-weight: 400;
}

/* --------------------------------------------------------------------------
 * 4. Buttons
 * ------------------------------------------------------------------------ */

.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Secondary: Outline Tannengruen. */
.is-style-secondary .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1.5px solid var(--wp--preset--color--contrast);
	padding-top: calc(1.0625rem - 1.5px);
	padding-bottom: calc(1.0625rem - 1.5px);
}

.is-style-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Auf dunklen Flaechen invertiert Secondary automatisch. */
.is-style-section-dark .is-style-secondary .wp-block-button__link,
.ff-cta .is-style-secondary .wp-block-button__link,
.ff-footer .is-style-secondary .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

.is-style-section-dark .is-style-secondary .wp-block-button__link:hover,
.ff-cta .is-style-secondary .wp-block-button__link:hover,
.ff-footer .is-style-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Ghost: nur Text, dezenter Unterstrich beim Hover. */
.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	text-decoration: none;
}

.is-style-ghost .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-soft);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* --------------------------------------------------------------------------
 * 5. Cards
 * ------------------------------------------------------------------------ */

.ff-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ff-card--link:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card);
}

.ff-card__more a {
	font-weight: 500;
	text-decoration: none;
}

.ff-card__more a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-soft);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

@media (max-width: 781px) {
	.ff-card {
		border-radius: var(--wp--custom--radius--card-mobile);
	}
}

/* --------------------------------------------------------------------------
 * 6. Formulare (Basis fuer Eigenbau-Formulare, Phase c)
 * ------------------------------------------------------------------------ */

.ff-form input[type="text"],
.ff-form input[type="email"],
.ff-form input[type="tel"],
.ff-form select,
.ff-form textarea,
.wp-block-search__input {
	width: 100%;
	padding: 0.875rem 1rem;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--surface-sand);
	border-radius: var(--wp--custom--radius--input);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ff-form input:focus,
.ff-form select:focus,
.ff-form textarea:focus,
.wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
}

.ff-form label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.ff-form__field {
	margin-bottom: var(--wp--preset--spacing--md);
}

.ff-form__hint {
	font-size: 0.875rem;
	color: var(--wp--preset--color--body);
}

/* Honeypot-Feld (Spam-Falle) visuell verstecken, fuer Screenreader raus. */
.ff-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wp-block-search__button {
	border-radius: var(--wp--custom--radius--input);
}

/* --------------------------------------------------------------------------
 * 7. Sektionen & Typo-Helfer
 * ------------------------------------------------------------------------ */

/* Eyebrow: kleine Versalien-Zeile ueber Ueberschriften. */
.ff-eyebrow {
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--caps);
	text-transform: uppercase;
}

/* Display-Headings (Italiana) brauchen keine extra Regeln — theme.json
 * setzt Familie/Spacing. Hier nur der dekorative Unterstrich-Akzent. */
.ff-display-heading.has-text-align-center::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin: 1.25rem auto 0;
	background: var(--wp--preset--color--accent-soft);
}

.ff-subline {
	color: var(--wp--preset--color--body);
}

/* Trust-Row: Label + gedaempfte Logos. */
.ff-trust-row__label {
	letter-spacing: var(--wp--custom--letter-spacing--caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
}

.ff-trust-row__logos {
	opacity: 0.65;
}

/* Testimonial. */
.ff-testimonial__mark {
	font-family: var(--wp--preset--font-family--serif);
	line-height: 0.5;
	margin-bottom: 0 !important;
}

.ff-testimonial__name {
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--body);
}

/* Hero: Overlay-Feinschliff — Creme-Verlauf statt hartem Dim. */
.ff-hero .wp-block-cover__background {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--base) 62%, transparent) 100%
	) !important;
	opacity: 1 !important;
}

/* --------------------------------------------------------------------------
 * 8. FAQ / Details
 * ------------------------------------------------------------------------ */

.ff-faq__item {
	border: 1px solid var(--wp--preset--color--surface-sand);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--base);
	padding: 1rem 1.25rem;
}

.ff-faq__item summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	list-style: none;
	position: relative;
	padding-right: 2rem;
}

.ff-faq__item summary::-webkit-details-marker {
	display: none;
}

.ff-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--wp--preset--color--accent);
	transition: transform 0.2s ease;
}

.ff-faq__item[open] summary::after {
	content: "–";
}

.ff-faq__item[open] {
	background: var(--wp--preset--color--surface-ice);
	border-color: transparent;
}

.ff-faq__item > :not(summary) {
	margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
 * 9. Slider-Basis (Platzhalter — Carousel-Blocks folgen in Phase b)
 * ------------------------------------------------------------------------ */

.ff-slider {
	position: relative;
	overflow: hidden;
}

.ff-slider__track {
	display: flex;
	gap: var(--wp--preset--spacing--lg);
	scroll-snap-type: x mandatory;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ff-slider__track::-webkit-scrollbar {
	display: none;
}

.ff-slider__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
 * 10. A11y & Fokus
 * ------------------------------------------------------------------------ */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.wp-block-button__link:focus-visible {
	outline-offset: 4px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--input);
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}