/* Global base styles. Design tokens live in Bricks (palette + global variables), not here.
   Only things Bricks cannot express well, or fixes for Bricks output, belong in this file. */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Long compound words (German) must not overflow on mobile */
h1, h2, h3, h4, h5, h6 {
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	overflow-wrap: break-word;
	text-wrap: balance;
}

p, li {
	overflow-wrap: break-word;
	text-wrap: pretty;
}

a {
	text-underline-offset: .18em;
}

:focus-visible {
	outline: 3px solid var(--focus-color, currentColor);
	outline-offset: 3px;
}

img {
	height: auto;
}

/* Sticky header without covering content (Bricks' own sticky uses position: fixed) */
#brx-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

.admin-bar #brx-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Bricks sets `.class.brxe-… { align-items: initial }` on grid elements, which drops
   place-items:center from an HTML/CSS import. Restore per class with raised specificity:
   .my-icon.my-icon.my-icon { align-items: center; } */

/* ── T20a header dropdown nav ── */
/* Top-level items keep the pill look from main.css (.header__nav a). The
   wrapper only adds positioning; the panel reuses the glass language. */

.header,
.header__nav,
.header__item {
	overflow: visible;
}

.header__nav > .header__link,
.header__item > .header__link {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.header__item {
	position: relative;
	display: flex;
	align-items: center;
}

/* Chevron on the items that own a dropdown */
.header__item--has-sub > .header__link::after {
	content: "";
	width: 5px;
	height: 5px;
	margin-top: -3px;
	margin-left: .4rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s var(--ease);
}

.header__item--has-sub:hover > .header__link::after,
.header__item--has-sub:focus-within > .header__link::after,
.header__item--has-sub.is-open > .header__link::after {
	transform: rotate(225deg);
}

/* Dropdown panel: hidden until hover, keyboard focus or touch .is-open */
.header__sub {
	position: absolute;
	top: calc(100% + .6rem);
	left: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 13rem;
	padding: .4rem;
	border: 1px solid var(--line);
	border-radius: 1rem;
	background: rgba(8, 14, 22, .85);
	backdrop-filter: blur(14px);
	opacity: 0;
	visibility: hidden;
	translate: 0 -6px;
	pointer-events: none;
	transition: opacity .35s var(--ease), translate .35s var(--ease), visibility 0s linear .35s;
}

/* Invisible bridge: the pointer stays on the item while it crosses the
   .6rem gap between the top link and the panel. */
.header__sub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -.7rem;
	height: .7rem;
}

.header__item:hover > .header__sub,
.header__item:focus-within > .header__sub,
.header__item.is-open > .header__sub {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	pointer-events: auto;
	transition-delay: 0s, 0s, 0s;
}

/* Escape closes the panel even while focus is still inside the item. */
.header__item.is-dismissed > .header__sub {
	opacity: 0;
	visibility: hidden;
	translate: 0 -6px;
	pointer-events: none;
}

.header__nav .header__sub-link {
	display: block;
	padding: .6rem .9rem;
	border-radius: .6rem;
	font-size: .9rem;
	color: var(--ink-2);
	transition: color .3s var(--ease), background-color .3s var(--ease);
}

.header__nav .header__sub-link:hover,
.header__nav .header__sub-link:focus-visible,
.header__nav .header__sub-link.is-active {
	color: var(--ink);
	background: rgba(255, 255, 255, .07);
}

.header__link:focus-visible,
.header__sub-link:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.header__sub,
	.header__item:hover > .header__sub,
	.header__item:focus-within > .header__sub,
	.header__item.is-open > .header__sub,
	.header__item.is-dismissed > .header__sub {
		transition: none;
		translate: none;
	}

	.header__item--has-sub > .header__link::after {
		transition: none;
	}
}