/*
Theme Name: M3E THG-Quoten
Theme URI: https://thgquoten.com
Author: M3E GmbH
Author URI: https://www.m3e-gmbh.com
Description: Lightweight custom block theme for thgquoten.com. Colour, typography and spacing are defined once as theme.json tokens and referenced by name throughout, so a brand change is a single edit. Montserrat is self-hosted, so no request is made to a third-party font service. No page builder. See README.md for the full token reference.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: m3e-thg
Tags: block-theme, custom-colors, custom-menu, translation-ready
*/

/*
 * theme.json carries the design system. This file holds only what theme.json
 * cannot express: interaction and layout behaviour.
 *
 * Rule for this theme: no colour, font-size or spacing literal may appear here.
 * Everything references a --wp--preset--* custom property generated by theme.json,
 * so that no hardcoded value can drift out of sync with the brand palette as the
 * site grows. See README.md.
 */

/* --- Accessibility: visible focus for keyboard users ------------------------ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green);
	outline-offset: 2px;
}

/* Skip link — required for keyboard navigation once the header lands. */
.skip-link:focus {
	background-color: var(--wp--preset--color--brand-white);
	color: var(--wp--preset--color--brand-green);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}

/* --- FAQ accordion (core/details) ------------------------------------------ */
/*
 * Built on the core Details block rather than a custom accordion: it is a native
 * <details>/<summary> pair, so keyboard operation, screen-reader semantics and
 * the open/close state come from the browser. No JavaScript ships for this.
 */

.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--brand-green-tint);
}

.wp-block-details > summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--body-title);
	font-weight: 500;
	color: var(--wp--preset--color--brand-green);
	padding-block: var(--wp--preset--spacing--sm);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* Chevron drawn with borders so no icon font or SVG request is needed. */
.wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 150ms ease;
}

.wp-block-details[open] > summary::after {
	transform: rotate(-135deg);
}

.wp-block-details > summary:hover {
	color: var(--wp--preset--color--brand-green-deep);
}

.wp-block-details > *:not(summary) {
	padding-bottom: var(--wp--preset--spacing--sm);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details > summary::after {
		transition: none;
	}
}

/* --- Section container ----------------------------------------------------- */
/*
 * Vertical rhythm for full-width sections. Applied via the "Section" block style
 * so a section never carries one-off padding values.
 */

.is-style-section {
	padding-block: var(--wp--preset--spacing--xxl);
}

@media (max-width: 781px) {
	.is-style-section {
		padding-block: var(--wp--preset--spacing--xl);
	}
}

/* --- CTA band -------------------------------------------------------------- */

.is-style-cta-band {
	padding-block: var(--wp--preset--spacing--xl);
	text-align: center;
}

/* --- Callout: teal left rule on a light surface ----------------------------- */

.is-style-callout {
	border-left: 3px solid var(--wp--preset--color--brand-accent-dark);
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--brand-white);
}

/* --- Legal page template --------------------------------------------------- */
/*
 * Readable measure and working anchor links for Impressum / Datenschutz / AGB /
 * Widerruf. scroll-margin-top keeps a targeted heading clear of a sticky header.
 */

.m3e-legal :is(h2, h3, h4) {
	scroll-margin-top: var(--wp--preset--spacing--xl);
}

.m3e-legal ol,
.m3e-legal ul {
	padding-left: var(--wp--preset--spacing--md);
}

.m3e-legal li + li {
	margin-top: var(--wp--preset--spacing--xs);
}

/* --- Images ---------------------------------------------------------------- */
/* Prevents layout shift; complements the WebP/AVIF + lazy-loading pipeline. */

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