/* layout.css — Bogforum 2026 — shared right-rail (desktop) + mobile header/bottom-nav */
/* Rail CSS ported from mockups/v4/menu-bund.html:68-111 */
/* Mobile CSS ported from mockups/v4/pwa.html:26-31,63-68 */
/* --border-soft instead of --border for chrome borders per plan */
/* AI Tove icon: DARK #191919 on magenta (Caroline §10) */

/* ===== EMBEDDEDE VISNINGER =====
   <ug-searchview> bringer sin egen chrome, men ingen sidemargen — uden denne
   regel starter dens toolbar og kort i skærmkanten, mens siden selv holder
   afstand. Margenen her binder embedden til sidens gitter.

   Trinnene er ikke kosmetik: embedden vælger sit kolonnetal ud fra sin EGEN
   bredde, ikke vinduets, så en bred margen på en smal skærm koster en hel
   kolonne. Margenen viger derfor, før indholdet gør.

   Host-tokens: embedden læser sit udseende fra --ug-*-variabler på værten.
   Kunde-CSS'en runder de gamle kontroller af pr. klasse; de nyere flader
   (modtager-visningen af et delt program: bjælke, Gitter/Liste, agenda)
   følger tokens alene, så hjørner, accentfarve og display-font sættes her,
   ellers falder de tilbage til embeddens egne standarder. */
ug-searchview {
  display: block;
  margin: 0 56px 64px;
  --ug-radius: 0;
  --ug-accent: var(--bla);
  --ug-font-display: var(--serif);
}
@media (max-width: 1251px) {
  ug-searchview { margin-inline: 24px; }
}
@media (max-width: 867px) {
  ug-searchview { margin-inline: 14px; }
}

/* ===== DESKTOP: Right-rail ===== */
.rail {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--rail);
  background: #fff;
  border-left: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 10px 28px;
  z-index: 50;
  gap: 18px;
}

.rail__logo {
  width: 100%;
  padding: 0 6px;
}
.rail__logo img {
  width: 100%;
  height: auto;
}

/* Køb billet — blå bg, sidehvid tekst, sans 500, skarpe hjørner */
.rail__koeb {
  background: var(--blaa);
  color: var(--sidehvid);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  padding: 11px 8px;
  width: 100%;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.2s ease;
  display: block;
}
.rail__koeb:hover {
  transform: translateY(-2px);
}

.rail__tove {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rail__ai {
  width: 56px;
  height: 56px;
  background: var(--tove, #F700F7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tove-text, #191919);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.rail__ai:hover {
  transform: translateY(-2px);
}
.rail__ai svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.rail__ailabel {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tove, #F700F7);
  text-align: center;
  line-height: 1.2;
}

.rail__spacer {
  flex: 1;
}

.rail__nav {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}

.railbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--tekst-mute);
  text-decoration: none;
  transition: color 0.18s ease;
}
.railbtn:hover,
.railbtn.active {
  color: var(--tekst);
}
.railbtn svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.railbtn__label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

/* ===== MOBILE: Logo-header (top, sticky) ===== */
.mnav-top {
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.mnav-top__logo {
  /* Constrain height so tall-aspect-ratio logos don't expand the header */
  height: 40px;
  width: auto;
  display: block;
}
.mnav-top__logo img {
  height: 100%;
  width: auto;
}
.mnav-top__ai {
  width: 40px;
  height: 40px;
  background: var(--tove, #F700F7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tove-text, #191919);
  text-decoration: none;
  flex-shrink: 0;
}
.mnav-top__ai svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ===== MOBILE: Bottom-nav (fixed) ===== */
.mnav-bottom {
  background: #fff;
  border-top: 1px solid var(--border-soft);
  display: grid;
  /* One equal column per tab that is actually rendered — tabs sit behind
     feature flags, so a fixed column count would leave an empty slot. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 8px 8px 20px;
}
.mnav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  color: var(--tekst-mute);
  text-decoration: none;
}
.mnav-tab.active {
  color: var(--tekst);
}
.mnav-tab svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.mnav-tab__label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

/* ===== RESPONSIVE SWITCH ===== */

/* Default: hide everything until media query decides */
.rail        { display: none; }
.mnav-top    { display: none; }
.mnav-bottom { display: none; }

/* Desktop (≥768px): show rail, hide mobile nav, push content left */
@media (min-width: 768px) {
  .rail {
    display: flex;
  }
  .mnav-top,
  .mnav-bottom {
    display: none;
  }
  body {
    padding-right: var(--rail);
  }
}

/* Mobile (<768px): hide rail, show mobile header + bottom-nav, correct body padding */
@media (max-width: 767px) {
  .rail {
    display: none;
  }
  .mnav-top {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
  }
  .mnav-bottom {
    display: grid;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
  }
  body {
    padding-right: 0;
    /* Clears the fixed mnav-top (logo 40px + 2×12px padding + 1px border)
       with room to breathe above the first block — at exactly the header's
       height the search field sat flush against its underside. */
    padding-top: 74px;
    padding-bottom: 72px; /* matches mnav-bottom height (icons + labels + safe-area padding) */
  }
  /* Ekstra bundluft, så sidste kort ikke ender under bund-navigationen. */
  ug-searchview {
    margin-bottom: 80px;
  }
}