/* ==========================================================================
   TOPBANNER - VINTERAFTALEN
   Farverne ligger her, saa filen er selvkilende: /indhold/ og andre
   sider indlaeser ikke ydelser.css.
   ========================================================================== */
:root{
  --jd-sne-ink:#203943;
  --jd-sne-guld:#876b39;
  --jd-sne-frost:#e8f1f7;
  --jd-sne-hvid:#fffefa;
}

#jd-sne-banner{
  position:relative;
  display:flex;
  align-items:center;
  background:linear-gradient(90deg,#1d4f6b 0%,#2a6b8f 55%,#2f7ba3 100%);
  color:var(--jd-sne-hvid);
  font-size:15px;
  line-height:1.4;
}
#jd-sne-banner.jd-sne-banner--mobil{
  font-size:14px;
}

/* Hele banneret er et link, saa man kan trykke hvor som helst paa det.
   Knappen er dog et selvstaendigt link, fordi den skal kunne spores
   og fordi den skal se ud som en knap. */
.jd-sne-banner__tekst{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:11px 56px 11px clamp(14px,3vw,32px);
  color:inherit;
  text-decoration:none;
}
.jd-sne-banner__tekst:hover .jd-sne-banner__saetning{
  text-decoration:underline;
  text-underline-offset:3px;
}

.jd-sne-banner__fnug{
  font-size:19px;
  line-height:1;
  flex:0 0 auto;
}
.jd-sne-banner__saetning{
  font-weight:600;
  letter-spacing:.005em;
}

/* Knapappen skal se ud som en knap, ellers trykker ingen paa den.
   Den er hvid paa den blaa baggrund, saa den springer ud. */
.jd-sne-banner__knap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  padding:12px 20px;
  min-height:46px;
  border-radius:999px;
  background:var(--jd-sne-hvid);
  color:var(--jd-sne-ink);
  font-size:14.5px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  transition:background .12s ease;
}
.jd-sne-banner__knap:hover{background:var(--jd-sne-guld);color:#fff}
.jd-sne-banner__pil{
  font-size:16px;
  line-height:1;
  transition:transform .12s ease;
}
.jd-sne-banner__knap:hover .jd-sne-banner__pil{transform:translateX(2px)}

.jd-sne-banner__luk{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--jd-sne-hvid);
  font-size:23px;
  line-height:1;
  cursor:pointer;
  opacity:.75;
}
.jd-sne-banner__luk:hover{opacity:1;background:rgba(255,255,255,.14)}
.jd-sne-banner__luk:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* Telefon: banneret maa aldrig trykke vandret scrolling ud */
@media (max-width:760px){
  .jd-sne-banner__tekst{
    padding:10px 48px 10px 14px;
    gap:8px;
  }
  .jd-sne-banner__saetning{flex:1 1 100%}
  .jd-sne-banner__knap{width:100%;justify-content:center}
}

@media (max-width:420px){
  .jd-sne-banner__fnug{display:none}
  .jd-sne-banner__saetning{font-size:13.5px}
}

/* Reduceret bevægelse: ingen bevægelse for den der har bedt om det */
@media (prefers-reduced-motion:reduce){
  .jd-sne-banner__knap,
  .jd-sne-banner__pil{transition:none}
}