/* ============================================================
   KNAPPEN. Ét komponent for hele sitet: forsiden, undersiderne og
   klubben. Markup: <a class="btn btn-1">Tekst <span class="ar"></span></a>
   btn-1 = roed, btn-2 = sort, btn-3 = kant. Pilen loeber ud til hoejre
   og ind fra venstre; bogstaverne ruller (nav.js deler dem op og saetter
   klassen bl-h). Foer laa det samme tre steder, og klubben havde sin
   egen udgave uden bogstavrul - derfor foeltes knapperne forskellige.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--r, 6px);
  font: inherit; font-size: 15px; font-weight: 550; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-1 { background: var(--accent); color: #fff; }
.btn-1:hover { background: var(--accent-2); }
.btn-2 { background: var(--ink); color: #fff; }
.btn-2:hover { background: #000; }
.btn-3 { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px #D2D2CE; }
.btn-3:hover { box-shadow: inset 0 0 0 1px var(--ink); background: var(--ash); }
.paa-moerk .btn-3, .sec-dark .btn-3, .hero .btn-3 { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
.paa-moerk .btn-3:hover, .sec-dark .btn-3:hover, .hero .btn-3:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.62); }

/* v1's pil: ud til hoejre, ind igen fra venstre. Teksten staar eet sted
   i markup, saa en skaermlaeser laeser den een gang. */
.ar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 12px; flex: 0 0 13px; position: relative; overflow: hidden;
}
/* Samme pil som paa den nuvaerende forside - selve tegnet. Den nye jeg
   tegnede var ikke bedre. Animationen er den samme: ud til hoejre, ind
   igen fra venstre. */
.ar::before {
  content: "\2192"; font-size: 13px; line-height: 1; display: block;
}
.btn:hover .ar::before, .lnk:hover .ar::before, .fc-cta:hover .ar::before,
.pg-cta:hover .ar::before { animation: arrowLoop .58s cubic-bezier(.5,0,.2,1); }
@keyframes arrowLoop {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(170%); opacity: 0; }
  46% { transform: translateX(-170%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
/* Bogstavrullet. Hvert tegn ligger i sin egen lille maske; paa hover
   koerer det oeverste op og det nederste ind, med 10 ms mellem tegnene. */
.bl-label { display: inline-block; line-height: 1.28em; vertical-align: baseline; white-space: nowrap; }
.bl-c { display: inline-block; overflow: hidden; height: 1.28em; line-height: 1.28em; vertical-align: top; }
.bl-c .bl-top, .bl-c .bl-bot {
  display: block; line-height: 1.28em;
  transition: transform .48s cubic-bezier(.22, 1, .36, 1),
              opacity   .38s cubic-bezier(.22, 1, .36, 1);
  transition-delay: 0ms;
}
.bl-c .bl-bot { opacity: 0; }
.bl-h:hover .bl-c .bl-top, .bl-h:focus-visible .bl-c .bl-top,
.bl-h:hover .bl-c .bl-bot, .bl-h:focus-visible .bl-c .bl-bot {
  transform: translateY(-100%); transition-delay: var(--d, 0ms);
}
.bl-h:hover .bl-c .bl-top, .bl-h:focus-visible .bl-c .bl-top { opacity: 0; }
.bl-h:hover .bl-c .bl-bot, .bl-h:focus-visible .bl-c .bl-bot { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bl-c .bl-top, .bl-c .bl-bot { transition: none; transform: none !important; opacity: 1 !important; }
  .btn:hover .ar::before, .lnk:hover .ar::before, .fc-cta:hover .ar::before, .pg-cta:hover .ar::before { animation: none; }
}

/* Tekst, kun en skaermlaeser skal have.
   Bogstavanimationen paa knapperne deler hvert bogstav op i sit eget
   element. Det ser godt ud og laeses forfaerdeligt op: flere skaermlaesere
   siger "B, y, g, C, o, r, e" i stedet for "Byg Core". Den delte tekst er
   derfor aria-hidden, og den hele tekst ligger i en .sr-kun ved siden af.
   Reglen hoerer til her, hvor resten af knappens bogstavstile ligger, saa
   den foelger med paa hver side - ikke kun paa forsiden.
   Maalt af qa/tastatur.py, 23. september 2026. */
.sr-kun {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}