/* ==========================================================================
   c-dropdown — accessible popover/dropdown (WCAG 2.1 AA)
   Vanilla CSS · BEM · CSS custom properties (ACSS-friendly)
   Override any --dd-* on .c-dropdown, a wrapper, or :root.
   ========================================================================== */

.c-dropdown {
  /* Colour */
  /* --dd-black var ett SPÖKTOKEN: refererat på tre ställen, definierat på
     inget. Fallbacken #14161a var alltså det som renderade, vilket gör färgen
     osynlig för den som söker efter var den sätts.

     Den definieras nu i stället för att mappas om till --text-dark. Skälet står
     i components/filter-ui/filter-ui.css vid --brk-filter-selected: #14161a är
     den nästan-svarta från den GODKÄNDA designskissen, medvetet vald framför
     --base (#2d2d2d) för en hårdare kant i liten grad. Att flytta den till #000
     hade ändrat en godkänd design, inte lagat ett fel.

     Samma öppna fråga gäller här som där: vill varumärkesteamet inte bära en
     fjärde nästan-svart är det den här raden man ändrar, och då följer panelen
     och länkarna med. */
  --dd-black:                #14161a;
  /* --base och inte --text-dark: det här är en mörk YTA, inte en textfärg.
     Stod tidigare på var(--dd-black, #14161a), ett token som aldrig definierats
     — fallbacken var alltså det som gällde, och den var en annan svärta än
     sajtens. Bricks-lagret skriver ändå över med --base, så komponentens
     default stämmer nu med det som faktiskt renderar. */
  --dd-toggle-bg:            var(--base, #2d2d2d);
  --dd-toggle-bg-hover:      #24272c;
  --dd-toggle-fg:            #ffffff;
  /* Chevronen följer etikettens färg, inte accentfärgen. Den satt tidigare på
     --dd-accent och blev gul intill vit text i samma knapp — två färger för en
     och samma sak. Bundet till --dd-toggle-fg och inte hårdkodat vitt, så att
     en framtida ändring av knappens textfärg tar med ikonen.

     Ändras här och ingen annanstans: både komponentens .c-dropdown__icon och
     Bricks-varianten .c-dropdown__toggle > svg läser samma token. */
  --dd-toggle-icon:          var(--dd-toggle-fg, #ffffff);
  --dd-panel-bg:             #ffffff;
  --dd-panel-fg:             var(--dd-black);
  --dd-link-fg:              var(--dd-black);
  --dd-link-bg-hover:        #f4f2ee;
  --dd-link-rule:            #ececea;
  --dd-accent:               #ffcd00;
  --dd-focus-ring:           #0b57d0;   /* 4.5:1 on white and on #ffcd00 */
  --dd-focus-ring-on-dark:   #ffcd00;

  /* Spacing */
  --dd-toggle-padding:       1rem 1.5rem;
  --dd-panel-padding:        1.5rem;
  --dd-panel-gap:            0.5rem;      /* toggle → panel offset */
  --dd-grid-gap-row:         0.125rem;
  --dd-grid-gap-col:         2.5rem;
  --dd-link-padding:         0.75rem 1rem;
  --dd-col-min:              14rem;

  /* Form */
  --dd-radius:               0.25rem;
  --dd-panel-radius:         0.75rem;
  --dd-link-radius:          0.375rem;
  --dd-shadow:               0 1.5rem 3rem -0.5rem rgba(20, 22, 26, 0.22),
                             0 0.25rem 0.75rem rgba(20, 22, 26, 0.08);
  --dd-panel-min-width:      20rem;
  --dd-panel-max-width:      min(46rem, calc(100vw - 2rem));

  /* Type */
  --dd-toggle-font:          700 1.0625rem/1 "Saira Semi Condensed", system-ui, sans-serif;
  --dd-toggle-tracking:      0.02em;
  --dd-link-font:            500 1rem/1.35 inherit;

  /* Motion */
  --dd-duration:             180ms;
  --dd-ease:                 cubic-bezier(0.2, 0.7, 0.3, 1);

  position: relative;
  display: inline-block;
}

/* --------------------------------------------------------------- Toggle -- */

.c-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  margin: 0;
  padding: var(--dd-toggle-padding);
  border: 0;
  border-radius: var(--dd-radius);
  background: var(--dd-toggle-bg);
  color: var(--dd-toggle-fg);
  font: var(--dd-toggle-font);
  letter-spacing: var(--dd-toggle-tracking);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dd-duration) var(--dd-ease);
}

.c-dropdown__toggle:hover { background: var(--dd-toggle-bg-hover); }

.c-dropdown__toggle:focus-visible {
  outline: 3px solid var(--dd-focus-ring-on-dark);
  outline-offset: 3px;
}

.c-dropdown__icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--dd-toggle-icon);
  transition: transform var(--dd-duration) var(--dd-ease);
}

.c-dropdown__toggle[aria-expanded="true"] .c-dropdown__icon { transform: rotate(180deg); }

/* ---------------------------------------------------------------- Panel -- */

.c-dropdown__panel {
  position: absolute;
  top: calc(100% + var(--dd-panel-gap));
  left: 0;
  z-index: 60;
  box-sizing: border-box;
  min-width: max(100%, var(--dd-panel-min-width));
  max-width: var(--dd-panel-max-width);
  padding: var(--dd-panel-padding);
  border-radius: var(--dd-panel-radius);
  background: var(--dd-panel-bg);
  color: var(--dd-panel-fg);
  box-shadow: var(--dd-shadow);

  /* closed state — kept in the a11y tree only when open (hidden attr) */
  opacity: 0;
  transform: translateY(-0.5rem) scale(0.99);
  transform-origin: top left;
  transition: opacity var(--dd-duration) var(--dd-ease),
              transform var(--dd-duration) var(--dd-ease);
}

/* right-aligned variant, for toggles near the viewport edge */
.c-dropdown__panel--end { left: auto; right: 0; transform-origin: top right; }

.c-dropdown__panel[hidden] { display: none; }

.c-dropdown__panel.is-open { opacity: 1; transform: translateY(0) scale(1); }

/* ----------------------------------------------------------------- Grid -- */

.c-dropdown__list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--dd-grid-gap-row);
  column-gap: var(--dd-grid-gap-col);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Row flow: items fill left→right, which matches reading order and needs no
   hardcoded row count. Add --dd-rows + .c-dropdown__list--columnar below if a
   list must read top→bottom instead. */
.c-dropdown__panel--2-cols .c-dropdown__list {
  grid-template-columns: repeat(2, minmax(var(--dd-col-min), 1fr));
}

.c-dropdown__list--columnar {
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--dd-rows, 10), auto);
}

/* auto variant: as many columns as fit, no count to maintain */
.c-dropdown__panel--auto-cols .c-dropdown__list {
  grid-template-columns: repeat(auto-fit, minmax(var(--dd-col-min), 1fr));
}

@media (max-width: 47.9375rem) {
  .c-dropdown {
    --dd-panel-padding: 1rem;
    --dd-panel-min-width: 0;
  }
  .c-dropdown__panel {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .c-dropdown__panel--2-cols .c-dropdown__list,
  .c-dropdown__panel--auto-cols .c-dropdown__list,
  .c-dropdown__list--columnar {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* ----------------------------------------------------------- Panel head -- */

.c-dropdown__heading {
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--dd-link-rule);
  font: 700 0.75rem/1 "Saira Semi Condensed", system-ui, sans-serif;
  text-transform: uppercase;
  /* --accent och inte #5e6368. Den hårdkodade grån låg sex punkter per kanal
     från --accent (#575E62), som DESIGN.md dokumenterar med precis den här
     rollen: "Slate grey; secondary text, UI chrome". En panelrubrik är UI-krom.

     Till skillnad från --dd-black fanns ingen not någonstans om att avvikelsen
     var medveten, så den räknas som drift.

     Ingen synlig ändring idag: .c-dropdown__heading används inte på någon sida
     — uppmätt noll element på fyra sidor. Regeln gäller den dag någon börjar
     använda panelrubriker. */
  color: var(--accent, #575E62);
}

/* ---------------------------------------------------------------- Links -- */

.c-dropdown__item { margin: 0; }

.c-dropdown__link {
  display: block;
  padding: var(--dd-link-padding);
  border-radius: var(--dd-link-radius);
  color: var(--dd-link-fg);
  font: var(--dd-link-font);
  text-decoration: none;
  text-wrap: pretty;
  transition: background-color 120ms var(--dd-ease);
}

.c-dropdown__link:hover { background: var(--dd-link-bg-hover); }

.c-dropdown__link:focus-visible {
  outline: 3px solid var(--dd-focus-ring);
  outline-offset: -1px;
  background: var(--dd-link-bg-hover);
}

.c-dropdown__link[aria-current="page"] {
  background: var(--dd-accent);
  font-weight: 700;
}

/* ------------------------------------------------------------- A11y/misc -- */

.c-dropdown__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .c-dropdown__panel,
  .c-dropdown__icon,
  .c-dropdown__toggle,
  .c-dropdown__link { transition-duration: 1ms; }
  .c-dropdown__panel { transform: none; }
}

@media (forced-colors: active) {
  .c-dropdown__panel { border: 1px solid CanvasText; }
  .c-dropdown__toggle:focus-visible,
  .c-dropdown__link:focus-visible { outline: 3px solid Highlight; }
}