/* ==========================================================
   OLB BOTTOM NAV ADAPTER v0.1
   Klassifikation: component adapter
   Requires: OLB Design System v1.0 LOCKED (runtime-hashes verificeret), Loader ≥ 1.6.0
   Functional master: OLB_NAVIGATION_OG_FILTRERING_MASTER_v2.1_SPRINT1_SYNCED.md §8
   Specialist master: n/a (adfærd: OLB_SHELL_BEHAVIOR_SPECIALIST_MASTER, trin A14)
   Mockup: bundnavigation (5 skærme + states), inden for B1–B3
   Build mode: A
   Structure: OLB_BOTTOM_NAV_STRUCTURE_PLAN_v1.0.md · DOM: OLB_BOTTOM_NAV_DOM_VERIFICATION_v1.0.md
   Owns: fast placering, 5 kolonner, zone-synlighed, kobling til canonical tokens
   Does NOT own: farver, typografi, spacing-skala, radius, skygger,
                 ikoner, fokus, globale states, breakpoints, z-index-værdier
   Breakpoints: kun canonical (max-width 767.98px)
   Documented deviations:
     B1  current = selected-subtle (--color-mobile-nav-active-*), indikator øverst (inset box-shadow).
     B9  vises kun med body.olb-has-bottom-nav (sættes af pluginet, ikke i checkout).
     B10 body.keyboard-open skjuler baren via canonical Layout-regel. Visningsreglen bruger
         :where() (lav specificitet), så Layout-reglen altid vinder.
   ========================================================== */

.olb-bottom-nav {
  display: none;
}

@media (max-width: 767.98px) {

  :where(body.olb-has-bottom-nav) .olb-bottom-nav {
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-bottom-nav);
    padding-block: 0 var(--safe-bottom);
    border-block-start: var(--border-divider);
    border-radius: var(--radius-bottom-nav);
    background: var(--color-mobile-nav-bg);
    color: var(--color-mobile-nav-fg);
    font-family: var(--font-family-ui);
  }

  .olb-bottom-nav > .olb-container {
    padding-inline: 0;
  }

  .olb-bottom-nav > .olb-container > .brxe-shortcode {
    inline-size: 100%;
  }

  .olb-bottom-nav__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(min-content, 1fr));   /* jævnt fordelt, men aldrig smallere end labelen (320 px) */
    column-gap: var(--gap-hairline);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .olb-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-hairline);
    inline-size: 100%;
    block-size: var(--height-bottom-nav);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--font-size-bottom-nav);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-ui);
    text-decoration: none;
    cursor: pointer;
  }

  .olb-bottom-nav__label {
    white-space: nowrap;               /* labels afkortes aldrig */
  }

  .olb-bottom-nav__item:active {
    background: var(--color-hover-bg);
  }

  .olb-bottom-nav__item[aria-current="page"] {
    background: var(--color-mobile-nav-active-bg);
    color: var(--color-mobile-nav-active-fg);
    box-shadow: inset 0 var(--border-width-strong) 0 var(--color-mobile-nav-indicator);
  }
}

@media (max-width: 767.98px) and (hover: hover) and (pointer: fine) {
  .olb-bottom-nav__item:hover {
    background: var(--color-hover-bg);
  }
}