/**
 * Domenemeglerskolen — domenemegler.css
 * Komplett stilark — mørk jeger-profil med gull-aksent
 * Plassering : /home/dstn/public_html/domenemegling.dstn.no/css/domenemegler.css
 * Utviklet av: Tormod Kvisvik
 * Firma      : Kvisvik Nettutvikling · org.nr 981309820
 * Web        : https://kvisvik.no
 * E-post     : kundeservice@kvisvik.no
 * Domenemeglerskolen er et produkt av Kvisvik Nettutvikling.
 * Gratis læreportal for domenemegling og domeneinvestering.
 * https://domenemegling.dstn.no
 */

/* ── Design-tokens ───────────────────────────────────────────────────────── */
:root {
  --bg:       #0f1a14;
  --panel:    #162010;
  --panel2:   #1c2a18;
  --border:   #2a3d25;
  --tekst:    #e8f0e0;
  --dempet:   #7a9470;
  --gull:     #c9a84c;
  --gull-lys: #e8c96a;
  --gronn:    #2ecc71;
  --gronn2:   #24a050;
  --rod:      #e07b54;
  --aksent:   #1a7a3a;
  --radius:   10px;
  --bredde:   1100px;
}

/* ── Reset / basis ───────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--tekst);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gull-lys); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gull); }
img { max-width: 100%; height: auto; }

.dm-container { max-width: var(--bredde); margin: 0 auto; padding: 0 1.5rem; }
.dm-main { min-height: 60vh; }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.dm-navbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.dm-nav-inner {
  max-width: var(--bredde);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 64px;
}
.dm-logo { display: flex; align-items: center; gap: 0.6rem; }
.dm-logo-tekst {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gull);
}
.dm-logo:hover .dm-logo-tekst { color: var(--gull-lys); }
.dm-logo-img { height: 48px; width: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.dm-nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin-left: auto;
}
.dm-nav-links a { color: var(--tekst); font-weight: 500; font-size: .95rem; }
.dm-nav-links a:hover { color: var(--gull); }
.dm-nav-megler a { color: var(--gull); }

.dm-nav-flagg { display: flex; gap: .4rem; align-items: center; }
.dm-nav-flagg a {
  font-size: .8rem;
  font-weight: 600;
  padding: .3rem .5rem;
  border-radius: 5px;
  border: 1px solid transparent;
  color: var(--dempet);
}
.dm-nav-flagg a.aktiv {
  border-color: var(--gull);
  color: var(--gull);
}
.emoji-flagg {
  height: 1.2em;
  width: 1.2em;
  vertical-align: -0.2em;
  display: inline-block;
}

.dm-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--tekst);
  font-size: 1.5rem;
  cursor: pointer;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.dm-hero {
  background: linear-gradient(160deg, var(--panel2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 4rem 0;
  text-align: center;
}
.dm-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--gull);
  margin-bottom: 1rem;
  line-height: 1.15;
}
.dm-hero p {
  max-width: 640px;
  margin: 0 auto 1.8rem;
  color: var(--dempet);
  font-size: 1.1rem;
}
.dm-hero-knapp {
  display: inline-block;
  background: var(--aksent);
  color: #fff;
  padding: .85rem 2rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background .2s, transform .15s;
}
.dm-hero-knapp:hover { background: var(--gronn2); color: #fff; transform: translateY(-2px); }

/* ── Artikkelgrid ────────────────────────────────────────────────────────── */
.dm-grid {
  max-width: var(--bredde);
  margin: 3rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.dm-kort {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .15s;
  position: relative;
}
.dm-kort:hover { border-color: var(--gull); transform: translateY(-3px); }
.dm-kort-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--gull);
  opacity: .6;
  margin-bottom: .5rem;
}
.dm-kort h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--tekst);
  margin-bottom: .6rem;
  line-height: 1.3;
}
.dm-kort p { color: var(--dempet); font-size: .92rem; flex-grow: 1; }
.dm-kort-les {
  color: var(--gull);
  font-weight: 600;
  font-size: .9rem;
  margin-top: 1rem;
}

/* ── Artikkel-side ───────────────────────────────────────────────────────── */
.dm-artikkel-wrap {
  max-width: var(--bredde);
  margin: 2.5rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}
.dm-artikkel h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--gull);
  line-height: 1.2;
}
.dm-artikkel .ingress {
  font-size: 1.15rem;
  color: var(--tekst);
  border-left: 3px solid var(--gull);
  padding-left: 1.2rem;
  margin: 1.5rem 0 2rem;
}
.dm-artikkel-innhold { font-size: 1.05rem; line-height: 1.8; }
.dm-artikkel-innhold h2 {
  font-family: 'Playfair Display', serif;
  color: var(--gull);
  font-size: 1.5rem;
  margin: 2rem 0 .8rem;
}
.dm-artikkel-innhold h3 { color: var(--gull-lys); font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.dm-artikkel-innhold p { margin-bottom: 1.1rem; }
.dm-artikkel-innhold ul, .dm-artikkel-innhold ol { margin: 0 0 1.1rem 1.4rem; }
.dm-artikkel-innhold li { margin-bottom: .5rem; }
.dm-artikkel-innhold strong { color: var(--gull-lys); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.dm-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 84px; }
.dm-sidebar-boks {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem;
}
.dm-sidebar-boks h4 { color: var(--gull); margin-bottom: .8rem; font-size: 1rem; }
.dm-sidebar-boks ul { list-style: none; }
.dm-sidebar-boks li { margin-bottom: .6rem; font-size: .9rem; line-height: 1.4; }
.dm-sidebar-megler { background: var(--panel2); border-color: var(--gull); }
.dm-sidebar-megler p { color: var(--dempet); font-size: .88rem; margin-bottom: 1rem; }
.dm-knapp {
  display: inline-block;
  background: var(--aksent);
  color: #fff;
  padding: .65rem 1.2rem;
  border-radius: 7px;
  font-weight: 600;
  font-size: .88rem;
  text-align: center;
}
.dm-knapp:hover { background: var(--gronn2); color: #fff; }

/* ── Quiz ────────────────────────────────────────────────────────────────── */
.dm-quiz {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem;
  margin-top: 2.5rem;
}
.dm-quiz h3 { color: var(--gull); margin-bottom: 1rem; }
.dm-quiz-sp { font-weight: 600; margin-bottom: 1rem; font-size: 1.05rem; }
.dm-quiz-svar { display: flex; flex-direction: column; gap: .6rem; }
.dm-quiz-svar button {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--tekst);
  padding: .8rem 1rem;
  border-radius: 7px;
  text-align: left;
  cursor: pointer;
  font-size: .95rem;
  font-family: inherit;
  transition: border-color .2s;
}
.dm-quiz-svar button:hover:not(:disabled) { border-color: var(--gull); }
.dm-quiz-svar button.riktig { border-color: var(--gronn); background: rgba(46,204,113,.15); }
.dm-quiz-svar button.feil { border-color: var(--rod); background: rgba(224,123,84,.15); }
.dm-quiz-tilbakemelding { margin-top: 1rem; font-weight: 600; }
.dm-quiz-neste {
  display: none;
  margin-top: 1rem;
  background: var(--aksent);
  border: none;
  color: #fff;
  padding: .7rem 1.5rem;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.dm-quiz-neste.synlig { display: inline-block; }
.dm-quiz-resultat { text-align: center; padding: 1rem; }
.dm-quiz-score { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--gull); }

/* ── CTA-banner (footer) ─────────────────────────────────────────────────── */
.dm-cta-banner {
  background: var(--panel2);
  border-top: 1px solid var(--gull);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0;
  text-align: center;
  margin-top: 3rem;
}
.dm-cta-banner p {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--gull);
  margin-bottom: 1.2rem;
}
.dm-cta-knapp {
  display: inline-block;
  background: var(--gull);
  color: var(--bg);
  padding: .85rem 2rem;
  border-radius: var(--radius);
  font-weight: 600;
}
.dm-cta-knapp:hover { background: var(--gull-lys); color: var(--bg); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.dm-footer {
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  text-align: center;
}
.dm-footer p { color: var(--dempet); font-size: .88rem; margin-bottom: .4rem; }
.dm-footer a { color: var(--gull-lys); }

/* ── Til-toppen-knapp ────────────────────────────────────────────────────── */
.dm-til-topp {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gull);
  color: var(--bg);
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s;
  z-index: 50;
}

/* ── Sidetopp (felles for /artikler og /om) ──────────────────────────────── */
.dm-side-topp { text-align: center; padding: 2.5rem 1rem 1.5rem; }
.dm-side-topp h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: var(--gull);
  margin: 0 0 .5rem;
}
.dm-side-topp p { color: var(--dempet); max-width: 600px; margin: 0 auto; }

/* ── Søkefelt på /artikler ───────────────────────────────────────────────── */
.dm-sok-felt { max-width: 480px; margin: 0 auto 2rem; padding: 0 1rem; }
.dm-sok-felt input {
  width: 100%;
  padding: .85rem 1.2rem;
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--tekst);
  outline: none;
  transition: border-color .2s;
}
.dm-sok-felt input:focus { border-color: var(--gull); }
.dm-sok-felt input::placeholder { color: var(--dempet); }

/* ── Kategori-merke og meta på artikkelkort ──────────────────────────────── */
.dm-kort-kat {
  display: inline-block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gull);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .2rem .6rem;
  margin-bottom: .6rem;
  align-self: flex-start;
}
.dm-kort-meta { display: block; font-size: .8rem; color: var(--dempet); margin-top: .8rem; }

/* ── Om-siden ────────────────────────────────────────────────────────────── */
.dm-om-side { max-width: 760px; margin: 0 auto; padding-bottom: 3rem; }
.dm-om-innhold { padding: 0 1rem; }
.dm-om-innhold .ingress {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--tekst);
  border-left: 3px solid var(--gull);
  padding-left: 1.2rem;
  margin-bottom: 2rem;
}
.dm-om-innhold h2 {
  font-family: 'Playfair Display', serif;
  color: var(--gull);
  font-size: 1.45rem;
  margin: 2rem 0 .8rem;
}
.dm-om-innhold p { line-height: 1.75; color: var(--tekst); margin: 0 0 1rem; }
.dm-om-innhold ul { line-height: 1.8; color: var(--tekst); padding-left: 1.4rem; margin-bottom: 1rem; }
.dm-om-innhold a { color: var(--gull-lys); }
.dm-om-innhold a:hover { color: var(--gull); }
.dm-om-kontakt {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.dm-om-kontakt h3 { color: var(--gull); margin: 0 0 .6rem; }
.dm-om-kontakt p { color: var(--dempet); line-height: 1.7; margin: 0; }
.dm-om-kontakt a { color: var(--gull-lys); }

/* ── Responsiv ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .dm-artikkel-wrap { grid-template-columns: 1fr; }
  .dm-sidebar { position: static; }
  .dm-nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--panel);
    flex-direction: column;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
  }
  .dm-nav-links.open { display: flex; }
  .dm-hamburger { display: block; margin-left: auto; }
  .dm-nav-flagg { order: -1; }
}
.dm-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.dm-logo-img { height: 60px; width: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Logo i navbar */
.dm-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.dm-logo-img { height: 48px; width: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dm-bli-logo img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    max-width: 64px !important;
}

/* ── BLI-knapp ───────────────────────────────────────────────────────────── */
.dm-bli-wrap { text-align: center; margin: 2.5rem 0; }
.dm-bli-knapp {
  display: inline-block;
  background: linear-gradient(135deg, var(--aksent), var(--gronn2));
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
  border: 2px solid var(--gull);
  transition: transform .2s, box-shadow .2s;
}
.dm-bli-knapp:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(201,168,76,.3);
}

/* ── BLI-knapp ───────────────────────────────────────────────────────────── */
.dm-bli-wrap { text-align: center; margin: 2.5rem 0; }
.dm-bli-knapp {
  display: inline-block;
  background: linear-gradient(135deg, var(--aksent), var(--gronn2));
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
  border: 2px solid var(--gull);
  transition: transform .2s, box-shadow .2s;
}
.dm-bli-knapp:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(201,168,76,.3);
}

/* ── BLI-knapp ───────────────────────────────────────────────────────────── */
.dm-bli-wrap { text-align: center; margin: 2.5rem 0; }
.dm-bli-knapp {
  display: inline-block;
  background: linear-gradient(135deg, var(--aksent), var(--gronn2));
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
  border: 2px solid var(--gull);
  transition: transform .2s, box-shadow .2s;
}
.dm-bli-knapp:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(201,168,76,.3);
}