/**
 * Sidfotens menyer (Anders 2026-10-06; kunden: "Menyn i footern har för stort radavstånd").
 *
 * 1. Mus (desktop): tätare rader. Brokk-menyn (som BricksExtras förut) ger varje länk 10 px padding upp/ner,
 *    41 px per rad för 14 px text. Pekskärmar behåller den höjden: 44 px är gränsen
 *    för säkra tumträffar (Apple HIG; WCAG 2.2 AA kräver minst 24 px).
 * 2. Mobil: kolumnrubrikerna fäller ut sina menyer (footer-nav.js). Utan skript
 *    visas allt som förut, eftersom knapparna och [hidden] bara sätts av skriptet.
 */

/* 1. 0-6-0 väger över klassens padding, som Bricks skriver inline efter temat
      (.brokk-footer-menu__link-text.brxe-brokk-menu .menu-item > .brokk-menu__row > .brokk-menu__link, 0-5-0) */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
    .brokk-footer .brokk-footer-menu__link-text.brxe-brokk-menu .menu-item > .brokk-menu__row > .brokk-menu__link {
        padding-block: 0.4rem;
    }
}

/* 2. Utfällbara rubriker i mobil */
.brokk-footer .brxe-brokk-menu[hidden] {
    display: none;
}

.brokk-footer-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    width: 100%;
    min-height: 4.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: start;
    cursor: pointer;
}

.brokk-footer-nav__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Chevron ritad med två kanter; vänds när menyn är öppen */
.brokk-footer-nav__toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    margin-inline-end: 0.4rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.2rem;
}

.brokk-footer-nav__toggle[aria-expanded="true"]::after {
    rotate: -135deg;
    translate: 0 0.2rem;
}

/* Rubriken bär knappen: ingen egen marginal, en tunn linje mellan kolumnerna */
.brokk-footer-nav--mobile .brokk-footer-nav__heading {
    margin: 0;
    border-block-start: 1px solid var(--white-trans-20);
}

/* Under 991 px har sidfotens rutnät en kolumn (--grid-1), men menydelen bad om
   "span 4" och skapade tre tomma spår + mellanrum: menyerna blev 348 px breda,
   adressen och Support 291 px. En kolumn för alla, så kanterna linjerar. */
@media (max-width: 991px) {
    .brokk-footer .brokk-footer__container > .brokk-footer-nav-wrapper {
        grid-column: 1 / -1;
    }
}

/* Hopfällt läge (≤ 767 px, satt av footer-nav.js) är alltid en lista, utan mellanläge
   (Anders 2026-10-09): de globala klasserna gav tre kolumner ner till 478 px, så rubrikerna
   stod tre i bredd med varsin pil. Raderna ligger tätt: knappen är 44 px och rutnätets gap
   (--grid-gap, 19 px) kom ovanpå. */
.brokk-footer.brokk-footer-nav--mobile .brokk-footer-nav-wrapper {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
}

/* Två grupper i samma kolumn (Services + Support, plan 073): luft mellan grupperna
   som skissens 40 px – kolumnens gap (content-gap / 2) + lika mycket till. */
.brokk-footer-nav-column > .brxe-brokk-menu + .brokk-footer-nav-heading {
    margin-block-start: calc(var(--content-gap) / 2);
}

/* Hopfällt läge: andra gruppens rubrik direkt under den första, som rubrikerna i
   rutnätet (gapet tas tillbaka; menyn emellan är dold och tar inget eget gap). */
.brokk-footer-nav--mobile .brokk-footer-nav-column > .brxe-brokk-menu + .brokk-footer-nav-heading {
    margin-block-start: calc(var(--content-gap) / -2);
}