/**
 * BEATS GROUP — Site chrome (header + footer).
 *
 * Only what CANNOT be expressed as a block attribute lives here: opacity
 * and max-width. Spacing, font sizes and weights sit deliberately as a
 * "style" attribute in the pattern markup — WordPress cannot validate free
 * inline styles in the HTML against save(), the block then silently loses
 * its className and pushes its whole <p> element into the content attribute
 * (broken markup on the editor's first save).
 *
 * Loaded via functions.php on enqueue_block_assets — so it takes effect
 * identically in frontend AND block-editor iframe.
 */

/* ------------------------------------------------------------------ */
/* Footer — text-color shading as in the PoC (opacity instead of color) */
/* ------------------------------------------------------------------ */

:root :where(.beats-group-footer-tagline),
:root :where(.beats-group-footer-address) {
	opacity: 0.7;
}

:root :where(.beats-group-footer-label),
:root :where(.beats-group-footer-copyright) {
	opacity: 0.5;
}

/* Double class (0,2,0): the global styles' layout styles also set
   max-width and load after this file. */
.beats-group-footer-tagline.beats-group-footer-tagline {
	max-width: 20rem;
}

/* ------------------------------------------------------------------ */
/* Header — nav and CTA are smaller than the body text in the PoC.     */
/* Nav links: px-4 py-2 text-sm font-medium                            */
/* CTA:       px-5 py-2.5 text-sm font-semibold                        */
/* Both rules need 0,2,0 against the global-styles button rule.        */
/* ------------------------------------------------------------------ */

/* The sizing sits on the label <span>, not on the <a>: the text node sits
   in the span. On the <a> it would be visually correct, but the parity
   comparison would hit two different elements.
   PoC: rounded-full px-4 py-2 text-sm font-medium — text-sm is 14/20, so
   the line height belongs to it. */
:root :where(.beats-group-nav) .wp-block-navigation-item__content {
	padding: 0;
	font-size: 0.875rem;
	font-weight: 500;
}

:root :where(.beats-group-nav) .wp-block-navigation-item__label,
:root :where(.beats-group-nav) .wp-block-navigation-item__content > span {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	line-height: 1.25rem;
}

/* line-height matches Tailwind's text-sm pairing (0.875rem/1.25rem) on the
   PoC header CTA (Header.astro's ml-3 ... text-sm button) - without it the
   button falls back to the global 1.6 ratio (22.4px), 2.4px taller than
   the PoC (Plan 04.5-07, Zeilenhöhe-Restbefund). Only surfaces as a
   parity-dom finding on the home page, where "Termin buchen" has no other
   occurrence to pair against first - the header itself is the same
   template part on every page. */
.beats-group-btn-book .wp-block-button__link {
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

/* Active page: marked in accent-text in the PoC. The color must sit on
   the label, because the padding sits there too. The class itself is set
   by inc/nav-aktive-seite.php — core does not assign it for custom links. */
:root :where(.beats-group-nav) .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
:root :where(.beats-group-nav) .current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	color: var(--wp--preset--color--accent-text);
}

/* Hover: hover:text-accent on the link itself in the PoC. The submenu
   entries are excluded, they only change their background area. */
:root :where(.beats-group-nav) .wp-block-navigation__container
	> .wp-block-navigation-item > .wp-block-navigation-item__content:hover
	.wp-block-navigation-item__label,
:root :where(.beats-group-nav) .wp-block-navigation__container
	> .wp-block-navigation-item > .wp-block-navigation__submenu-icon:hover {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ */
/* "Leistungen" submenu.                                                */
/*                                                                     */
/* In the PoC the trigger is ONE button: inline-flex gap-1 px-4 py-2,   */
/* the 16x16 chevron directly behind the word. Core renders label and   */
/* chevron as two siblings — the label's right padding must therefore   */
/* move to the chevron, otherwise a 20px gap opens up.                  */
/* ------------------------------------------------------------------ */

:root :where(.beats-group-nav) .wp-block-navigation-submenu
	> .wp-block-navigation-item__content .wp-block-navigation-item__label {
	padding-right: 0;
}

/* Core's button box around the chevron is only 0.6em tall (11px) and gets
   centered via align-self. The 16px icon runs out the bottom — measured
   at 4.4px below the text middle, in the PoC it is 0.5px. The box
   therefore needs to be as tall as the icon; width stays auto, otherwise
   the right padding eats into the icon width under border-box. */
:root :where(.beats-group-nav) .wp-block-navigation__submenu-icon {
	align-self: center;
	width: auto;
	height: 1rem;
	margin-left: 0.25rem;
	padding: 0 1rem 0 0;
	line-height: 0;
}

/* Core's chevron is a different glyph: outlined, 75% of the box width and
   33% of the height. The PoC uses a filled, distinctly narrower one
   (48%/27%) — inside the same 16px box, core's arrow therefore looks
   noticeably bigger. The shape cannot be changed via CSS, so the same
   technique as elsewhere in the theme: hide the original, draw the exact
   PoC path as a mask. */
:root :where(.beats-group-nav) .wp-block-navigation__submenu-icon svg {
	display: none;
}

:root :where(.beats-group-nav) .wp-block-navigation__submenu-icon::after {
	content: "";
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Core rotates the glyph in the open state — the mask has to take that
   over, otherwise the feedback for keyboard and mobile menu is lost. */
:root :where(.beats-group-nav) .wp-block-navigation__submenu-icon[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------ */
/* Umschaltpunkt Burger / Desktop-Zeile.                               */
/*                                                                     */
/* Core schaltet bei overlayMenu:"mobile" fest bei 600px auf die       */
/* Desktop-Zeile, der Prototyp seit dem 22.09.2026 erst ab 72rem       */
/* (Tailwind-Breakpoint --breakpoint-menu, global.css) - vorher md.    */
/* Mit dem fuenften Menuepunkt (Referenzen) brach die Zeile in beiden  */
/* Baeumen bis 1100px um. Im Band 600px bis 72rem bleibt deshalb der   */
/* Burger sichtbar und der Desktop-Container verborgen. Spezifitaet    */
/* je eine Klasse ueber Cores Regeln (0,3,0 bzw. 0,2,0), weil die      */
/* Ladereihenfolge gegenueber den Block-Styles nicht garantiert ist.   */
/* ------------------------------------------------------------------ */

@media (min-width: 600px) and (width < 72rem) {
	.beats-group-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.beats-group-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* ------------------------------------------------------------------ */
/* Submenu panel.                                                       */
/*                                                                     */
/* PoC: absolute left-0 mt-2 w-64 rounded-2xl border border-ink/10      */
/* bg-bg p-2 shadow-lg; entries block rounded-xl px-4 py-2.5 text-sm    */
/* hover:bg-surface. Core instead delivers a white, square,             */
/* shadowless 200px box — the entries wrapped inside it.                */
/*                                                                     */
/* Desktop case only: in the mobile overlay (.is-menu-open) core opens  */
/* the submenu inline, which stays untouched. The selectors need four   */
/* classes because core's own rules sit at three.                       */
/* ------------------------------------------------------------------ */

.beats-group-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container {
	left: 0;
	margin-top: 0.5rem;
	padding: 0.5rem;
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--ink) 10%, transparent);
	border-radius: 1rem;
	background-color: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink);
	box-shadow:
		0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Only the width needs extra weight: core's rule for the open state hangs
   off :focus-within and thus sits at six classes. The repeated class is
   the same trick core itself uses elsewhere — 16rem is w-64 from the PoC,
   without it the entries wrap onto core's minimum width of 200px. */
.beats-group-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	width: 16rem;
}

/* The 8px gap to the trigger (mt-2 in the PoC) is dead space: whoever
   moves the mouse through it leaves the list item, and core closes the
   menu via pointerleave before the panel is reached. An invisible strip
   above the panel closes the gap — the same technique core itself uses
   for nested submenus. */
.beats-group-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: 0.5rem;
}

.beats-group-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.625rem 1rem;
	border-radius: 0.75rem;
	line-height: 1.25rem;
}

/* In the panel, the entry itself gets the padding, not its label —
   otherwise both would pad and the entries would wrap onto two lines. */
.beats-group-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	display: inline;
	padding: 0;
	border-radius: 0;
}

.beats-group-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--surface);
}

/* ------------------------------------------------------------------ */
/* Line heights.                                                       */
/*                                                                     */
/* Tailwind's text-* utilities set font size AND line height           */
/* (text-xs 12/16, text-sm 14/20, text-lg 18/28, text-xl 20/28).       */
/* Only the size had been ported in each case — without the matching   */
/* line height the block inherits the body text's 1.6 and grows        */
/* measurably taller.                                                  */
/* ------------------------------------------------------------------ */

:root :where(.beats-group-footer-tagline),
:root :where(.beats-group-footer-address),
:root :where(.beats-group-footer-label),
:root :where(.beats-group-footer-link) {
	line-height: 1.25rem;
}

/* Core's ".wp-block-column { word-break: break-word; overflow-wrap:
   break-word; }" (wp-includes/css/dist/block-library/style.css) forces
   anywhere-style, mid-word breaking as soon as an unbreakable string
   overflows — both properties do this independently of each other, so
   both need resetting, not just the one sections.css already covers for
   the hero heading (gap-closure 03-13). At the "cols-md" breakpoint the
   footer's Leistungen/Unternehmen sub-columns narrow enough that the
   single-word label "Leistungen" no longer fits on one line and gets
   force-split mid-word ("LEISTUN"/"GEN") instead of simply overflowing as
   it does in the PoC (Tailwind sets no such reset). ":root :where()" ties
   core's specificity (0,1,0); the theme file loads after core, so the
   later rule wins on the tie. */
:root :where(.beats-group-footer-label),
:root :where(.beats-group-footer-link) {
	word-break: normal;
	overflow-wrap: normal;
}

:root :where(.beats-group-footer-copyright) {
	line-height: 1rem;
}

:root :where(.beats-group-footer-brand),
:root :where(.beats-group-logo-title) {
	line-height: 1.75rem;
}

/* Footer links are block elements with py-1.5 in the PoC — that produces
   the click area and the line spacing at once. */
:root :where(.beats-group-footer-link) a {
	display: block;
	padding-block: 0.375rem;
}

/* The PoC's "Termin buchen" button sits inside a wrapper with class
   "text-sm" (14/20) and inherits that size — the button itself carries no
   font-size utility. The button block here has no such ambient wrapper and
   defaults to the base body size/line-height (18/28.8) without this rule. */
:root :where(footer .wp-block-button__link) {
	font-size: 0.875rem;
	line-height: 1.25rem;
}