/* Autoskolen v/ Claus Andersen — delt lag oven på Tailwind CDN. */
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .font-display { font-family: 'Plus Jakarta Sans', sans-serif; }

/* Undgå enlige ord på sidste linje i overskrifter. */
h1, h2, h3 { text-wrap: balance; }

/* To lag: et bundskyggelag der holder teksten læsbar uanset skærmbredde, og et
   diagonalt brandlag der lader billedet komme igennem til højre. */
.hero-grad {
  background:
    linear-gradient(to top, rgba(15,18,22,0.93) 0%, rgba(15,18,22,0.62) 24%, rgba(15,18,22,0) 52%),
    linear-gradient(103deg, rgba(18,21,26,0.95) 0%, rgba(23,27,33,0.88) 34%, rgba(84,24,20,0.55) 63%, rgba(150,38,30,0.24) 84%, rgba(236,67,53,0.12) 100%);
}

.grid-tex { background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 22px 22px; }

.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.in { opacity: 1; transform: translateY(0); }

/* Kortet over afdelingerne. Landet er kommunegrænser, de to kommuner vi
   underviser i er løftet et trin frem, og nålene sidder på byernes rigtige
   koordinater. */
.kort-land path { fill: #262d37; stroke: rgba(255,255,255,.10); stroke-width: 1.4; }
.kort-land path.kort-hjem { fill: #414b58; }
.kort-vand { fill: rgba(255,255,255,.22); font-size: 21px; font-style: italic; letter-spacing: .06em; }
.naal-tekst { fill: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 25px; paint-order: stroke; stroke: rgba(15,18,22,.55); stroke-width: 5px; stroke-linejoin: round; }
.naal-puls { fill: #ec4335; opacity: .18; transform-box: fill-box; transform-origin: center; animation: naalPuls 3.2s ease-out infinite; }
.naal:nth-of-type(2) .naal-puls { animation-delay: 1.05s; }
.naal:nth-of-type(3) .naal-puls { animation-delay: 2.1s; }
.naal { cursor: pointer; }
.naal:hover .naal-puls { opacity: .34; }
@keyframes naalPuls { 0% { transform: scale(.55); opacity: .38; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #ec4335; outline-offset: 3px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .naal-puls { animation: none; opacity: .22; }
  html { scroll-behavior: auto; }
}