/*
Theme Name: Brokk
Theme URI: https://www.brokk.com/
Description: Brokk's child theme for Bricks. Holds the site's own components
(themes/bricks-child/components/), the region and language layer,
and the overrides that the design system in DESIGN.md documents.
The design system itself lives in the database, not here.
Author: CCO
Author URI: https://cco.se/
Template: bricks
Version: 1.2
Text Domain: bricks-child
*/
/* ---- Långa ord i rubriker (mobil) ----
Tyska och polska sammansättningar i versaler är bredare än rutan i mobil
("BRANCHENPRÄGENDE" 416 px i en 284 px ruta på The Brokk Way, 2026-10-05) och
gav sidled-skroll. Avstavning bara för ord på minst 12 tecken, så kortare
ord bryts som förut; break-word tar det som ändå inte får plats. :where()
håller vikten på noll. */
@media (max-width: 767px) {
:where(h1, h2, h3, h4) {
overflow-wrap: break-word;
hyphens: auto;
hyphenate-limit-chars: 12 5 5;
}
}
/* ---- Ikonspråket (inc/icons.php, Bricks-ikonset "Brokk") ----
Ikonen tar textens färg och har ingen egen. Utan width/height-attribut
följer den textstorleken. --flip vänder chevronen uppåt.
:where() ger reglerna vikten noll: de är reserver, och allt som styr en ikon
i sitt sammanhang ska vinna utan att behöva räkna vikt. Utan det tog
svg.brokk-icon:not([width]) över .btn--pill > svg (3em-plattan med 1.05em
padding) och nedladdningsikonen i produktbladsknappen blev 0 px bred
innanför sin padding — osynlig (2026-09-18). */
:where(.brokk-icon) { flex: 0 0 auto; }
:where(svg.brokk-icon:not([width])) { width: 1em; height: 1em; }
.brokk-icon--flip { transform: rotate(180deg); }
/* Knappikoner: en storlek överallt, 18 px (Ikonspråk 1b: "Request a quote" med
pil i 18). Före 2026-09-18 blev det 24 px i vanliga knappar (svg-filens
width/height), 18 px i Expand all och dropdownknapparna och 13–14 px i
plattknapparna (.btn--pill: 3em bred platta med 1.05em padding runt).
Plattan behåller sin bredd, 1.8rem + 2 × 1.4rem = 4.6rem ≈ de 3em den hade,
men paddingen läggs bara i sidled. Höjden sträcks redan av .btn--pill
(align-self: stretch), och ikonen centreras i den av viewBox. Två klasser
plus elementet väger över .btn--pill > svg och .tech-specs-open-all > svg. */
.bricks-button > svg.brokk-icon {
width: 1.8rem;
height: 1.8rem;
}
.btn--pill > svg.brokk-icon {
width: calc(1.8rem + 2 * 1.4rem);
height: auto;
padding: 0 1.4rem;
}
/* Avstånd mellan text och ikon: ett värde för knappar, ett för länkar (Anders 2026-11-09).
Före varierade det 4–21 px: Bricks egna standarder (knapp 10, textlänk 5), id-regler på
enskilda element (#brxe-…), globala klasser (brokk-hero-xl__btn = --space-xs) och
komponenter. #brx-content/#brx-footer i selektorn väger över elementens id-regler, så att
ingen behöver räkna vikt. Sidhuvudet och dropdownknapparna (ikon längst till höger) undantas.
Ikonfilerna har 3 px luft i sin ram, så det synliga avståndet blir ca 3 px större. */
body :is(#brx-content, #brx-footer) .bricks-button:not(.c-dropdown__toggle):has(> svg, > i, > .icon) {
column-gap: var(--icon-gap-btn);
}
body :is(#brx-content, #brx-footer) :is(.brxe-text-link, .brokk-ind__link, .brokk-ind-cards__more, .bapp-all__open, .brk-event__back, .brk-as-head__link, .pp-link, .brk-pl__case-cta, .brk-il__case-cta, .brk-il__compare-cta, .dl__geo):has(svg, i) {
column-gap: var(--icon-gap-link);
}
/* Textlänkar med ikon (Bricks Text link): samma 18 px som knapparna. Bricks ritar ikonen i
24 px, vilket blev för stort bredvid de små versalerna i "View all posts" (2026-11-09). */
.brxe-text-link > .icon > svg.brokk-icon {
width: 1.8rem;
height: 1.8rem;
}
/* Pil efter text: samma lilla knuff åt höger överallt (plan 079). Gäller ikonsetets pil
(brokk_icon( 'arrow' ) och Bricks ikon "Brokk arrow"), relaterat- och Explore-kortens
pilikon och Services-pilarna som ritas med ::after. Hover bara för mus, fokus för
tangentbord, stilla vid reducerad rörelse. Externa länkar (↗) och chevroner rörs inte.
Komponenter ska inte ha egen pilknuff; regeln täcker dem. */
:is(a, button) :is(svg.brokk-icon--arrow, .brk-pk__related-icon:not(.brokk-icon--external), .brk-explore__arrow),
.brk-sv-linklist a:not([href^="tel:"])::after,
.brk-sv-card__cta::after,
.brk-sv-self__cta::after,
.brk-sv-self__more a::after {
transition: translate var(--dur-fast) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
:is(a, button):focus-visible :is(svg.brokk-icon--arrow, .brk-pk__related-icon:not(.brokk-icon--external), .brk-explore__arrow),
.brk-sv-linklist a:not([href^="tel:"]):focus-visible::after,
.brk-sv-card:focus-within .brk-sv-card__cta::after,
.brk-sv-self__item:focus-within .brk-sv-self__cta::after,
.brk-sv-self__more a:focus-visible::after {
translate: var(--arrow-nudge) 0;
}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
:is(a, button):hover :is(svg.brokk-icon--arrow, .brk-pk__related-icon:not(.brokk-icon--external), .brk-explore__arrow),
.brk-sv-linklist a:not([href^="tel:"]):hover::after,
.brk-sv-card:hover .brk-sv-card__cta::after,
.brk-sv-self__item:hover .brk-sv-self__cta::after,
.brk-sv-self__more a:hover::after {
translate: var(--arrow-nudge) 0;
}
}
/* ---- Responsive embed (YouTube / Vimeo) ---- */
/* Universal: alla YouTube/Vimeo-iframes blir 100% breda + 16:9 utan wrapper */
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="vimeo.com"],
iframe[src*="player.vimeo.com"],
/* Complianz byter src mot about:blank tills samtycke finns och lägger adressen här */
iframe[data-src-cmplz*="youtube"],
iframe[data-src-cmplz*="vimeo"],
.embed-responsive iframe {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
/* ---- Button: pill-icon modifier --------------------------------
* Adds a darker "pill" on the right side of any .bricks-button that
* contains an SVG icon. Works on top of all ACSS button variants
* (primary / secondary / base / neutral, light / dark, outline, etc.)
*
* Usage: add `btn--pill` as a CSS class on the button in Bricks.
* Read more
* ------------------------------------------------------------ */
.btn--pill {
display: inline-flex !important;
align-items: center;
overflow: hidden;
padding-right: 0 !important;
transition:
background-color 0.35s ease,
color 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease !important;
}
/* Solid pill buttons: drop the ACSS border entirely. It reads as an ugly frame —
* a primary-colored ring peeking around the darker icon area (and around the whole
* button on hover, when the background changes but the border color doesn't).
* Outline pills keep theirs — the border IS that variant.
*
* The removed border MUST be paid back as padding. ACSS buttons are border-box
* with auto height, so dropping the border made every solid pill exactly
* 2×--btn-border-width shorter (and its label 1× closer to the left edge) than
* the ACSS buttons beside it. Paying it back in ACSS's own tokens keeps the box
* math identical at every size (btn--s/--l scale via the em-based padding) while
* the icon pill still reaches the outer edge — merely making the border
* TRANSPARENT would restore the height but clip the dark pill at the padding
* box, leaving a visible ring of button colour around it. */
.btn--pill:not(.btn--outline) {
border: 0 !important;
padding-block: calc(var(--btn-padding-block) + var(--btn-border-width)) !important;
padding-left: calc(var(--btn-padding-inline) + var(--btn-border-width)) !important;
}
.btn--pill > svg {
flex-shrink: 0;
align-self: stretch;
width: 3em;
height: auto; /* override HTML attribute height="16" */
/* Negativa margins drar SVG:n ut i knappens padding så pill-ytan
fyller knappen kloss top→bottom. Klipps av overflow:hidden. */
margin-block: -100px;
margin-left: var(--btn-medium-inline, 1.5rem);
padding: 1.05em;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.18); /* darken any underlying color */
color: inherit;
transition: background-color 0.35s ease;
}
/* For outline / light-background buttons the dark overlay would look harsh
* — invert to a soft light overlay instead. */
.btn--pill.btn--outline > svg,
.btn--pill[class*="light"]:not([class*="background-"]) > svg {
background-color: rgba(0, 0, 0, 0.08);
}
.btn--pill:hover > svg {
background-color: var(--base);
color: var(--base-light, #d9d9d9);
}
/* Fixed min-width so the button doesn't resize when the label toggles
between "Expand all" / "Collapse all". */
.tech-specs-open-all,
.tech-specs-open-all.btn--pill,
.tech-specs-open-all.is-open {
min-width: 185px;
justify-content: center;
}
/* "Expand all" specs toggle: NO hover effect at all (still uses .btn--pill markup). */
.tech-specs-open-all.btn--pill,
.tech-specs-open-all.btn--pill > svg {
transition: none !important;
}
.tech-specs-open-all.btn--pill:hover {
box-shadow: none;
}
/* Icon is a masked currentColor glyph — keep it unchanged on hover. */
.tech-specs-open-all.btn--pill:hover > svg {
background-color: currentColor;
transform: none;
}
/* Expand/collapse icon: render the button's