/* =========================================================================
   mittland.no — norrøn identitet (21.09.2026)
   Lastes etter sidens egen <style>, så reglene her vinner ved lik spesifisitet.
   Alle motiver er originale SVG-er tegnet for mittland.no.
   ========================================================================= */

:root {
  --norron-skrift: 'Uncial Antiqua', 'Oswald', serif;
  --rune-skrift: 'Noto Sans Runic', 'Segoe UI Historic', 'Segoe UI Symbol', sans-serif;
  --jern-nagle: radial-gradient(circle at 35% 35%, #f0c47a 0 1.2px, #9a6526 1.6px 3px, transparent 3.4px);
  /* Flettverk: to bølgebånd som krysser hverandre, gjentatt horisontalt */
  --flettverk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'%3E%3Cpath d='M0 6 C7 -1 7 13 14 6 S21 -1 28 6' fill='none' stroke='%23c98a3a' stroke-width='1.6'/%3E%3Cpath d='M0 6 C7 13 7 -1 14 6 S21 13 28 6' fill='none' stroke='%237a1f1f' stroke-width='1.6'/%3E%3Ccircle cx='14' cy='6' r='1.4' fill='%23e0a955'/%3E%3C/svg%3E");
}

/* ---- Runebånd øverst: «Mittland · ditt Norge» med yngre futhark ------- */
body::before {
  content: "ᛘᛁᛏᛚᛅᚾᛏ ᛫ ᛏᛁᛏ ᚾᚢᚱᚴᛁ ᛫ ᛘᛁᛏᛚᛅᚾᛏ ᛫ ᛏᛁᛏ ᚾᚢᚱᚴᛁ";
  display: block; text-align: center; padding: 5px 0 4px;
  font-family: var(--rune-skrift); font-size: 13px; letter-spacing: 9px;
  color: #c98a3a; opacity: 0.8; background: #080604;
  border-bottom: 1px solid #2a1a0c; white-space: nowrap; overflow: hidden;
}
.rune-band { display: none !important; } /* erstattet av body::before */

/* ---- Overskrifter i uncial ---------------------------------------------- */
h1, .logo-tekst, .seksjon-tittel, .sted-banner-navn {
  font-family: var(--norron-skrift) !important;
  letter-spacing: 0.5px;
}
.logo-tekst { font-size: 30px !important; text-transform: none !important; }
h1 { text-transform: none !important; font-size: 40px !important; }

/* Flettverkslinje under header og seksjonstitler */
header { border-bottom: none !important; position: relative; }
header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 12px;
  background: var(--flettverk) repeat-x center; opacity: 0.85;
}
.seksjon-tittel {
  font-size: 24px !important; text-transform: none !important;
  padding-bottom: 12px; margin-bottom: 18px !important; position: relative;
  display: flex; align-items: center; gap: 14px;
}
.seksjon-tittel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 12px;
  background: var(--flettverk) repeat-x left center; opacity: 0.45;
}
.seksjon-kilde { font-family: 'Work Sans', sans-serif !important; letter-spacing: 1px; }

/* ---- Runemerke foran hver seksjonstittel ------------------------------- */
.runemerke {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--rune-skrift); font-size: 22px; line-height: 1; color: #f2ead9;
  background: radial-gradient(circle at 50% 45%, #3a2410 0%, #1a1008 70%);
  border: 2px solid #c98a3a;
  box-shadow: 0 0 0 3px #1a1008, 0 0 0 4px #5a3a1a, inset 0 0 8px rgba(0,0,0,0.8);
  cursor: help; transition: transform 0.2s, box-shadow 0.2s;
}
.runemerke:hover { transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 0 3px #1a1008, 0 0 0 4px #c98a3a, 0 0 14px rgba(201,138,58,0.5); }

/* ---- Jernkort med bronsenagler i hjørnene ------------------------------ */
.jern-kort, .kort, .hero-flis, .tv-boks, .superdag-kort, .oppskrift-kort, .nodnummer-kort {
  background-image:
    var(--jern-nagle), var(--jern-nagle), var(--jern-nagle), var(--jern-nagle),
    repeating-linear-gradient(92deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 9px) !important;
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), 0 0 !important;
  background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, auto !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
}

/* ---- Stedsbanneret med drakkar ----------------------------------------- */
.sted-banner {
  position: relative; height: 230px; overflow: hidden;
  border-bottom: 2px solid #5a3a1a; margin-bottom: 4px;
}
.sted-banner svg.drakkar-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.sted-banner-tekst {
  position: absolute; left: 32px; top: 50%; transform: translateY(-50%); z-index: 2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 0 30px rgba(0,0,0,0.8);
}
.sted-banner-navn { font-size: clamp(38px, 6vw, 68px); color: #f2ead9; line-height: 1; }
.sted-banner-sub { font-size: 14px; color: #e0c89a; margin-top: 8px; letter-spacing: 0.5px; }
.sted-banner-klokke { font-family: 'Oswald', sans-serif; font-weight: 700; color: #e0a955; }
.sted-banner-niva {
  position: absolute; right: 22px; top: 18px; z-index: 2; display: flex; align-items: center; gap: 8px;
  background: rgba(8,6,4,0.75); border: 2px solid; padding: 7px 14px;
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 13px; color: #f2ead9;
}
.drakkar { animation: gyng 6s ease-in-out infinite; transform-origin: 840px 185px; transform-box: view-box; }
.nordlys { animation: nordlys 14s ease-in-out infinite alternate; }
@keyframes gyng { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(3px) rotate(-0.8deg); } }
@keyframes nordlys { 0% { opacity: 0.55; transform: translateX(0); } 100% { opacity: 1; transform: translateX(-40px); } }
@media (max-width: 700px) {
  .sted-banner { height: 190px; }
  .sted-banner-tekst { left: 18px; }
  .sted-banner-niva { right: 10px; top: 10px; font-size: 11px; }
}

/* ---- Laster: runehjul som snurrer -------------------------------------- */
.laster { font-family: 'Work Sans', sans-serif; }
.laster::before {
  content: "ᚱ"; display: block; margin: 0 auto 14px; width: 52px; height: 52px; line-height: 48px;
  font-family: var(--rune-skrift); font-size: 26px; color: #c98a3a; text-align: center;
  border: 2px solid #c98a3a; border-radius: 50%; border-top-color: transparent;
  animation: runehjul 1.2s linear infinite;
}
@keyframes runehjul { to { transform: rotate(360deg); } }

/* Respekter brukere som ikke vil ha bevegelse */
@media (prefers-reduced-motion: reduce) {
  .drakkar, .nordlys, .laster::before { animation: none !important; }
}

/* ---- Footer ------------------------------------------------------------ */
footer { position: relative; border-top: none !important; padding-top: 26px !important; }
footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: var(--flettverk) repeat-x center; opacity: 0.6;
}