/* =========================================================================
 * sb-elementor-chrome.css — the few rules that must sit OUTSIDE Elementor.
 *
 * Everything else about the navy/gold header and footer is built as Elementor
 * data by scripts/dev/elementor/*.php, so it stays editable in the builder.
 * What lands here is only what a widget's own "Custom CSS" cannot express,
 * because Elementor scopes that box to `selector` — the element itself and its
 * descendants — and never to an ancestor.
 *
 * Loaded after sb-app.css, and only when Elementor is active.
 * ========================================================================= */

/* Sticky header (the export: `sticky top-0 z-40`).
 *
 * The rule has to be here, not on the Elementor container. `position: sticky`
 * is resolved against the element's CONTAINING BLOCK, and the bar's parent is
 * this wrapper — emitted by header.php around elementor_theme_do_location() —
 * which is exactly as tall as the bar itself. A sticky element cannot move
 * within a parent that gives it no room, so the same declaration on the inner
 * container computed to `position: sticky` and still scrolled away with the
 * page. Nothing in the DOM or the computed styles looks wrong; only scrolling
 * shows it.
 *
 * Elementor Pro's own Sticky effect is the alternative and is deliberately not
 * used: it switches to `position: fixed` and injects a spacer element, which
 * shifts the first section down by the header's height. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* The wrapper is a plain block; give it the bar's own background so the
 * 1px gold border-bottom never sits over the page behind it while scrolling. */
.elementor-location-header {
  background: #081025;
}

/* Reflow at 320px (WCAG 1.4.10, NFR-001 — measured 21.09.2026).
 *
 * German compounds are single words: "Bewertungsmethodik" at display size is
 * wider than a 320px viewport and cannot wrap, so the whole /methodik/ page
 * scrolled sideways to 523px. Every heading may therefore break inside a word
 * as a last resort — `overflow-wrap: break-word` does exactly that and only
 * that: it breaks a word only when the word alone cannot fit the line.
 * Global rather than per page: the next long title arrives from the CMS.
 *
 * No `hyphens: auto` (removed 24 Sep). It did nothing while the site ran en_US,
 * and once the page became lang="de" the browser's German dictionary started
 * hyphenating ordinary lines — the hero headline turned into "Reiterin-/nen",
 * which the approved design never does. */
h1, h2, h3, h4, .entry-title, .elementor-heading-title {
	overflow-wrap: break-word;
}

/* Header auth slots. The header template is shared, cached Elementor markup, so
 * it carries both pairs — Anmelden/Registrieren (.sb-when-out) and Abmelden/
 * Mein Konto (.sb-when-in) — and html.sb-signed-in picks one (E2: members sign in
 * through the API, so WordPress's body.logged-in no longer means "member"). The
 * class is set in <head> from the sb_csrf cookie before first paint, so there is
 * no flash, and SB.session confirms or corrects it once /users/me answers. */
html.sb-signed-in .sb-when-out,
html:not(.sb-signed-in) .sb-when-in {
	display: none !important;
}

/* Visible keyboard focus where the global ring cannot land (WCAG 2.4.7,
 * NFR-001 — measured 21.09.2026).
 *
 * The global rule in sb-base.css draws focus as a box-shadow and sets
 * `outline: none`. Any control that carries its OWN box-shadow at higher
 * specificity keeps the `outline: none` and loses the ring — it then shows no
 * focus at all. The keyboard walk (tests/a11y/keyboard.js) found two: the
 * header's "Registrieren" button (an Elementor nav item styled as a button, on
 * every page) and the active login/register tab. Outline is used here because
 * nothing else in the stack sets one on these elements.
 * Gold on the navy header bar; navy on the light account card. */
.elementor-location-header a.elementor-item:focus-visible,
.elementor-location-header .elementor-button:focus-visible {
	outline: 2px solid var(--sb-brass-500, #cd9c34);
	outline-offset: 3px;
}
.sb-authtabs a.sb-authtab:focus-visible { /* (0,3,1) — must beat `.sb-app a:focus-visible` (0,2,1) */
	outline: 2px solid var(--sb-ink-900, #081025);
	outline-offset: 2px;
}