/* =========================================================================
   er_skal.css - den nye skal paa de gamle sider.
   =========================================================================

   BAGGRUND
   Tvangsauktioner, Seneste handler, Due diligence og Investeringsanalyse
   laa stadig i den gamle generations skal. Klikkede man ind paa dem fra
   den nye platform, landede man i det gamle sitets navigation - og
   derfra kunne man gaa videre rundt i hele den gamle side.

   Doeren var ét punkt i er_appskal.js: "Tvangsauktioner & konkurser".
   Derfra foerte den gamle topmenu videre til Kort, Due diligence,
   Seneste handler, Vurdering, ESG og Investeringsanalyse - alt sammen
   den gamle generation.

   HVORFOR EN SELVSTAENDIG FIL
   er_design.css og er_forside.css saetter begge globale regler paa body
   og a. Laegger man dem oven paa en gammel side, skifter hele sidens
   skrift og linkfarver - en aendring af sider, der virker i dag.

   Derfor er alt herunder skrevet om, saa det KUN rammer .er-top-nav og
   .er-fod. Farverne er de samme vaerdier som er_design.css' tokens,
   skrevet direkte ind, saa filen ikke afhaenger af rod-variabler, der
   maaske ikke er indlaest.

   Resultatet: den gamle side beholder sit indhold og sit udseende, men
   faar den nye platforms hoved og fod - og alle links i skallen peger
   ind i den nye generation.
   ========================================================================= */

.er-top-nav,
.er-fod{
  --sk-ink:      #1a56db;
  --sk-tekst:    #1c2b33;
  --sk-daemp:    #55666f;
  --sk-linje:    #dfe5e7;
  --sk-flade:    #ffffff;
  --sk-blaa:     #1a56db;
  --sk-blaa-mrk: #1746b8;
  --sk-paa-blaa: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* ---------- topnavigation ---------- */
.er-top-nav{
  background: var(--sk-flade);
  border-bottom: 1px solid var(--sk-linje);
  position: sticky; top: 0; z-index: 50;
}
.er-top-nav a{ text-decoration: none; }
.er-top-inder{
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 24px;
  min-height: 60px; flex-wrap: wrap;
}
.er-top-mrk{ display: flex; align-items: center; gap: 8px; }
.er-top-ikon{
  width: 26px; height: 22px; flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 2px;
}
.er-top-ikon i{ display: block; width: 5px; background: var(--sk-blaa); border-radius: 6px; }
.er-top-ikon i:nth-child(1){ height: 9px; }
.er-top-ikon i:nth-child(2){ height: 15px; }
.er-top-ikon i:nth-child(3){ height: 22px; }
.er-top-navn{ display: flex; flex-direction: column; line-height: 1.12; }
.er-top-navn strong{
  font-size: 17px; font-weight: 750; letter-spacing: .01em;
  color: var(--sk-ink); text-transform: uppercase;
}
.er-top-slogan{ font-size: 10.5px; color: var(--sk-daemp); letter-spacing: .01em; }

.er-top-links{
  display: flex; gap: 2px; list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto; flex-wrap: wrap;
}
.er-top-links li{ margin: 0; padding: 0; }
.er-top-links a{
  display: block; padding: 16px 12px; font-size: 14.5px;
  color: var(--sk-daemp); border-bottom: 2px solid transparent;
}
.er-top-links a:hover{ color: var(--sk-tekst); }
.er-top-links a.er-akt{
  color: var(--sk-blaa); font-weight: 600; border-bottom-color: var(--sk-blaa);
}

.er-top-handling{ display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.er-top-nav .er-knap-tom,
.er-top-nav .er-knap-fyldt{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
}
.er-top-nav .er-knap-tom{
  background: var(--sk-flade); border-color: var(--sk-linje); color: var(--sk-tekst);
}
.er-top-nav .er-knap-tom:hover{ border-color: var(--sk-blaa); color: var(--sk-blaa); }
.er-top-nav .er-knap-fyldt{ background: var(--sk-blaa); color: var(--sk-paa-blaa); }
.er-top-nav .er-knap-fyldt:hover{ background: var(--sk-blaa-mrk); }

/* ---------- fod ---------- */
.er-fod{
  border-top: 1px solid var(--sk-linje);
  background: var(--sk-flade);
  margin-top: 32px;
}
.er-fod-inder{
  max-width: 1240px; margin: 0 auto; padding: 24px;
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  font-size: 13px; color: var(--sk-daemp);
}
.er-fod a{ color: var(--sk-daemp); text-decoration: none; }
.er-fod a:hover{ color: var(--sk-blaa); }

/* ---------- mobil ----------
   Under 760px bliver menulinjen til to raekker frem for at presse
   punkterne sammen. Klikfladen holdes paa 44px, saa et punkt kan rammes
   med en finger. */
/* mobilmenu-en-raekke

   Maalt paa 375 x 812: menuen fyldte 470 px af 812, fordi de syv
   punkter broed om paa tre raekker under logoet. Kortet fik resten.

   Nu én raekke, man skubber til siden. Ingen punkter fjernes - de kan
   alle naas. Tilsammen cirka 110 px i stedet for 470. */
@media (max-width: 760px){
  .er-top-inder{ gap: 8px; padding: 0 12px; min-height: 52px; }
  .er-top-navn strong{ font-size: 15px; }
  .er-top-slogan{ display: none; }

  .er-top-links{
    order: 3; width: 100%; gap: 0; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid var(--sk-linje);
  }
  .er-top-links::-webkit-scrollbar{ display: none; }
  .er-top-links li{ flex: 0 0 auto; }
  .er-top-links a{
    padding: 12px 12px; min-height: 44px; white-space: nowrap;
    display: flex; align-items: center; font-size: 14px;
  }

  .er-top-handling{ margin-left: auto; }
  .er-top-nav .er-knap-tom,
  .er-top-nav .er-knap-fyldt{ padding: 8px 12px; font-size: 13px; min-height: 40px; }
  .er-fod-inder{ padding: 16px 12px; }
}

/* ---------- print ----------
   Skallen skal ikke med paa en udskrevet rapport. */
@media print{
  .er-top-nav{ display: none; }
}