/**
 * Eyebrow – en stil för raden ovanför en rubrik (plan 023, DESIGN.md "Overlines / eyebrows").
 *
 * .brokk-tagline är också en global Bricks-klass med samma värden. Bricks skriver den bara som
 * inline-CSS för de elementtyper som använder den på sidan (.brokk-tagline.brxe-heading …), så
 * PHP-renderade komponenter (ansökningsformuläret, Services, page-kit, Contact) får sin stil
 * härifrån. Regeln gäller bara markup utan Bricks-klass (brxe-…), så Bricks egen klassregel och
 * elementens inställningar styr Bricks-elementen. Specificiteten (0,2,0) behövs för att slå
 * rubrikernas egna stilar när eyebrowen är en h3 (Contact). Färgen sätts inte här: den kommer
 * från sammanhanget (ljus botten / mörk botten).
 *
 * .brokk-tagline--slash: gult "/" framför, bara på eyebrows som står ovanför en rubrik – klassen
 * används även som etikett (land, datum, värden) och ska där vara utan streck. Strecket är dekor;
 * alt-texten "" gör att skärmläsare inte läser upp det.
 */
.brokk-tagline:not([class*="brxe-"]) {
	font-family: inherit;
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Eyebrows med streck: vikt 500 (Anders 2026-10-07). Gäller PHP-markup; Bricks-elementen får
   vikten från den globala klassen brokk-tagline--slash, eftersom Bricks klassregel
   .brokk-tagline.brxe-… (600) laddas efter den här filen. */
.brokk-tagline.brokk-tagline--slash {
	font-weight: 500;
}

.brokk-tagline--slash::before {
	content: "/" / "";
	color: var(--primary);
	margin-inline-end: 0.45em;
}

/* På gul botten syns inte ett gult streck. --on-primary: strecket tar textens färg (svart på gult).
   Sätts per element – den gula ytan bär ingen klass som CSS kan känna igen (Anders 2026-10-07). */
.brokk-tagline--on-primary.brokk-tagline--slash::before {
	color: currentColor;
}

/* Rich text-elementet (brxe-text) slår in texten i <p>, som är block – då hamnar strecket på en
   egen rad ovanför (The Brokk Way, 2026-10-13). Stycket ska flyta på samma rad som strecket. */
.brokk-tagline--slash > p {
	display: inline;
	margin: 0;
}

/* Eyebrow direkt ovanför en rubrik: avståndet kommer från förälderns gap (--content-gap), inte
   också från klassens margin-bottom – annars blev det dubbelt, ~33 px (Anders 2026-10-13).
   Två fall: eyebrowen före rubriken i HTML, eller efter den och flyttad upp med order: -1 (Bricks
   klassregel .brokk-tagline.brxe-heading). Specificitet (0,3,0) för att slå klassregeln (0,2,0),
   som laddas efter den här filen. */
.brokk-tagline.brokk-tagline--slash:has(+ :is(h1, h2, h3, h4, h5, h6, .display-heading)),
:is(h1, h2, h3, h4, h5, h6, .display-heading) + .brokk-tagline.brokk-tagline--slash {
	margin-bottom: 0;
}