/* ────────────────────────────────────────────────────────────────
   E-NOTARIUS — responsiva tokens och dokumentglobala regler
   Bricks variabelhanterare är statisk: den bär inga breakpoint-värden.
   Det här arket laddas efter Bricks CSS och lägger designsystemets
   responsiva tokenlager ovanpå (speglar responsive.css, samma värden).
   Ändra värdena där först — det här är en spegel.
   ──────────────────────────────────────────────────────────────── */


@media (max-width: 991px) {
  html:root {
    --display-xxl: 48px;
    --display-xl:  42px;
    --display-lg:  38px;
    --display-md:  28px;
    --display-sm:  22px;
    --display-xs:  21px;
    --display-xxs: 19px;

    --section-pad-y: var(--space-10);   /* 96 → 72 */
    --container-pad: var(--space-7);    /* 40 → 32 */
  }
}

@media (max-width: 767px) {
  html:root {
    --display-xxl: 38px;
    --display-xl:  34px;
    --display-lg:  31px;
    --display-md:  25px;
    --display-sm:  21px;
    --display-xs:  20px;
    --display-xxs: 18px;

    --text-lg:   17px;
    --text-base: 15.5px;   /* håll — under 15px blir brödtext slitsam */

    --section-pad-y: var(--space-9);    /* 72 → 56 */
    --container-pad: var(--container-pad-sm);
    --display-track: -0.02em;           /* lätta på trackingen i mindre grader */
  }
}

@media (max-width: 478px) {
  html:root {
    --display-xxl: 32px;
    --display-xl:  30px;
    --display-lg:  28px;
    --display-md:  23px;

    --section-pad-y: var(--space-8);    /* 56 → 40 */
    --radius-xl: 14px;                  /* stora radier ser klumpiga ut smalt */
  }
}


/* Fokusring — designsystemets states.css bär den på :where() utan klass,
   så den följer aldrig med en klassimport. Bricks egen outline är vit och
   osynlig på vit botten. Ringen är bläck, aldrig terracotta. */
#brx-header :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
#brx-content :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
#brx-footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ── Footerns länkgrupper som dragspel under 991px (footer.js) ──
   Desktop orörd: knappen ser ut som rubriken. Ingen animation. */
.brand-footer__toggle { all: unset; display: block; width: 100%; cursor: default; font: inherit; color: inherit; }
@media (max-width: 991px) {
  .brand-footer__col--collapsible .brand-footer__toggle { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); cursor: pointer; min-height: 44px; padding-block: var(--space-2); border-bottom: 1px solid var(--on-dark-hairline); }
  .brand-footer__col--collapsible .brand-footer__toggle::after { content: "+"; font-size: var(--text-lg); line-height: 1; color: var(--fg-on-dark-muted); }
  .brand-footer__col--collapsible .brand-footer__toggle[aria-expanded="true"]::after { content: "−"; }
  .brand-footer__col--collapsible .brand-footer__toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color-on-dark); outline-offset: var(--focus-ring-offset); }
  .brand-footer__col--collapsible [hidden] { display: none; }
}