/*
Theme Name: A&A Elektroservice
Description: Block-Theme für A&A Elektroservice e.K., entwickelt von Comaris auf Basis von Comaris Base (abgeleitet von Twenty Twenty-Five 1.5, GPL v2+). Design über theme.json.
Author: Comaris
Author URI: https://comaris.de
Requires at least: 6.7
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: aa-elektroservice
*/

/* Nur das, was theme.json nicht kann. */

:where(.wp-site-blocks *:focus-visible) { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* Links in dunklen und farbigen Flächen übernehmen die Textfarbe */
.has-dark-background-color a:not(.wp-element-button),
.has-primary-background-color a:not(.wp-element-button),
.has-accent-background-color a:not(.wp-element-button) { color: inherit; }
.has-accent-background-color a { text-decoration: none; }

/* Seiten bestehen aus vollbreiten Abschnitten: kein Abstand dazwischen */
.wp-block-post-content.is-flush > * + * { margin-block-start: 0; }

/* Aktiver Menüpunkt */
.wp-block-navigation .wp-block-navigation-item__content { border-bottom: 2px solid transparent; padding: 0.75rem 1rem; }
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] { border-bottom-color: var(--wp--preset--color--accent); }

/* Kopfbereich: Logo-Kachel */
.aa-logo-mark { line-height: 1; }
.aa-logo-mark p { margin: 0; }

/* Leistungs-Zeilen: Spalten ohne Standardabstand */
.aa-rows .wp-block-columns { gap: 0.5rem 1.5rem; }

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p { text-wrap: pretty; }
:where(pre) { overflow-x: auto; }

/* Tablet: äußere Spalten früher stapeln (WordPress stapelt erst unter 782px),
   verschachtelte Zeilen-Spalten (Nummer | Titel | Text) bleiben unverändert. */
@media (min-width: 782px) and (max-width: 1100px) {
	.wp-block-columns:not(.wp-block-column .wp-block-columns) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns:not(.wp-block-column .wp-block-columns) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ===== Header & Navigation ===== */
header.wp-block-template-part .wp-block-navigation-item__content {
	padding: 12px 16px;
	border-bottom: 2px solid transparent;
}
header.wp-block-template-part .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
.wp-block-navigation .aa-nav-notdienst { display: none; }

/* Mobil (Burger-Menü ab 599px abwärts): Logo | Notdienst-Icon | Menü-Button in einer Zeile */
@media (max-width: 599px) {
	header.wp-block-template-part .alignwide {
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
	}
	header.wp-block-template-part .alignwide > .wp-block-group:first-child { margin-right: auto; min-width: 0; gap: 10px !important; }
	header.wp-block-template-part .aa-logo-mark { min-height: 44px !important; padding-left: 10px !important; padding-right: 10px !important; border-radius: 7px !important; }
	header.wp-block-template-part .aa-logo-mark p { font-size: 16px !important; }
	header.wp-block-template-part .wp-block-site-title { font-size: 19px !important; white-space: nowrap; }
	header.wp-block-template-part .wp-block-buttons { order: 2; flex: 0 0 auto; }
	header.wp-block-template-part .wp-block-navigation { order: 3; flex: 0 0 auto; }
	header.wp-block-template-part .wp-block-buttons .wp-block-button__link {
		position: relative;
		display: block;
		width: 44px;
		height: 44px;
		padding: 0 !important;
		font-size: 0 !important;
		line-height: 0 !important;
		border-radius: 4px;
		overflow: hidden;
	}
	header.wp-block-template-part .wp-block-buttons .wp-block-button__link::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E") center / 22px 22px no-repeat;
		mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E") center / 22px 22px no-repeat;
	}
}
.wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--outline-dark);
	border-radius: 4px;
}
.wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Offenes Menü: große nummerierte Einträge wie im Design */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 10px 20px 24px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
	justify-content: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
	align-items: stretch;
	counter-reset: aa-nav;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	counter-increment: aa-nav;
	border-bottom: 1px solid var(--wp--preset--color--border-dark);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 84px;
	padding: 0;
	border-bottom: 0 !important;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 46px !important;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
	content: "0" counter(aa-nav);
	font-family: var(--wp--preset--font-family--barlow-label);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--accent);
	align-self: flex-start;
	margin-top: 26px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	margin-left: auto;
	width: 26px;
	height: 26px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.wp-block-navigation__responsive-container.is-menu-open .aa-nav-notdienst {
	display: block;
	margin-top: 32px;
	border-bottom: 0;
	counter-increment: none;
}
.wp-block-navigation__responsive-container.is-menu-open .aa-nav-notdienst .wp-block-navigation-item__content {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-height: 0;
	padding: 14px 20px;
	border-radius: 4px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 36px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .aa-nav-notdienst .wp-block-navigation-item__content::before {
	content: "24h Notdienst";
	margin: 0;
	align-self: flex-start;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
}
.wp-block-navigation__responsive-container.is-menu-open .aa-nav-notdienst .wp-block-navigation-item__content::after { content: none; }

/* ===== Leistungs-Karten (komplett klickbar, mit Pfeil) ===== */
.aa-card {
	position: relative;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease;
}
.aa-card:hover { border-color: var(--wp--preset--color--primary) !important; }
.aa-card:focus-within { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.aa-card h3 a { color: inherit; text-decoration: none; }
.aa-card h3 a::after { content: ""; position: absolute; inset: 0; }
.aa-card::after {
	content: "";
	margin-top: auto;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ===== Rechtstexte (Impressum, Datenschutz) ===== */
.aa-legal > :first-child { margin-top: 0; }
.aa-legal h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: var(--wp--preset--spacing--60);
}
.aa-legal h3 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: var(--wp--preset--spacing--50);
}
.aa-legal p, .aa-legal li { overflow-wrap: break-word; }
.aa-legal ul { padding-left: 1.25rem; }
.wp-block-navigation__responsive-container.is-menu-open .aa-nav-notdienst .wp-block-navigation-item__content { box-sizing: border-box; }
/* Kein Abstand zwischen Header, Inhalt und Footer (Vollbreiten-Sektionen schließen bündig an) */
.wp-site-blocks > * { margin-block-start: 0; }
/* Sticky Header */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--border-dark);
}
body.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar header.wp-block-template-part { top: 46px; }
}
/* Admin-Leiste scrollt unter 600px mit, daher kein Versatz */
@media (max-width: 600px) {
	body.admin-bar header.wp-block-template-part { top: 0; }
}
html { scroll-padding-top: 100px; }
/* Tablet-Breite: Header ist mehrzeilig und wird nicht fixiert */
@media (min-width: 600px) and (max-width: 1023px) {
	header.wp-block-template-part { position: static; }
}


/* Foto-Platzhalter (werden durch echte Bilder ersetzt) */
.aa-photo-slot { display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; min-height: 220px; padding: 20px; border-radius: 4px; border: 1px dashed var(--wp--preset--color--outline-dark); background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--wp--preset--color--base) 4%, transparent) 14px 28px); }
.aa-photo-slot p { margin: 0; text-transform: uppercase; letter-spacing: 0.06em; }
.aa-photo-slot--card { min-height: 150px; margin-bottom: var(--wp--preset--spacing--30); }
.aa-photo-slot--detail { aspect-ratio: 4 / 3; min-height: 0; margin-top: var(--wp--preset--spacing--50); }
