/**
 * Domenemeglerskolen — skole-tillegg.css
 * Emnekort med bilder, søkefelt i meny og hero, artikkellister og sidetall
 * Lastes etter domenemegler.css og dstn-felles.css (mørkt tema)
 * Plassering : /home/dstn/public_html/domenemegling.dstn.no/css/skole-tillegg.css
 * Versjon    : 1.1.0
 * Dato       : 02.10.2026 kl. 10:35 · v1.1.0 kl. 12:52
 * 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
 *
 * Alle nye klasser har prefikset ds- så de ikke kolliderer med dm-
 * klassene i domenemegler.css.
 *
 * v1.1.0 (02.10.2026): søket i menyen er en 🔍-knapp som åpner feltet i
 * et panel under menylinja, så logo, meny, søk og flagg står på én linje
 * (v1.0.0 brøt menyen over to linjer). Mobil: feltet vises som før.
 * Nye stiler for artikkelsida: veien videre (.ds-videre), brødsmule og
 * lenker til domenejeger.no / megler.domenejeger.no inne i teksten.
 */

:root {
  --ds-gull: #c9a84c;
  --ds-gull-lys: #e2c675;
  --ds-tekst: #e6edf3;
  --ds-dempet: #9fb0c3;
  --ds-flate: rgba(255, 255, 255, .04);
  --ds-flate-hover: rgba(255, 255, 255, .07);
  --ds-kant: rgba(255, 255, 255, .10);
  --ds-radius: 12px;
}

/* ── Søk i toppmenyen (v1.1.0: knapp som åpner felt under menyen) ─── */
@media (min-width: 901px) {
  .dm-nav-inner { flex-wrap: nowrap; }
}
.ds-nav-sok {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 .3rem 0 1rem;
}
.ds-sok-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ds-kant);
  border-radius: 50%;
  background: rgba(0, 0, 0, .25);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.ds-sok-toggle:hover,
.ds-nav-sok.apen .ds-sok-toggle { border-color: var(--ds-gull); }
.ds-sok-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + .7rem);
  z-index: 50;
  width: 340px;
  padding: .5rem;
  gap: .4rem;
  background: #141c14;
  border: 1px solid var(--ds-gull);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.ds-nav-sok.apen .ds-sok-panel { display: flex; }
.ds-sok-panel input {
  flex: 1;
  min-width: 0;
  padding: .55rem .8rem;
  border: 1px solid var(--ds-kant);
  border-radius: 8px;
  background: rgba(0, 0, 0, .3);
  color: var(--ds-tekst);
  font-size: .95rem;
  outline: none;
}
.ds-sok-panel input:focus { border-color: var(--ds-gull); }
.ds-sok-panel button {
  padding: .55rem .9rem;
  border: 0;
  border-radius: 8px;
  background: var(--ds-gull);
  color: #111;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 900px) {
  .dm-nav-inner { flex-wrap: wrap; }
  .ds-nav-sok { order: 10; width: 100%; margin: .6rem 0 0; }
  .ds-sok-toggle { display: none; }
  .ds-sok-panel {
    display: flex;
    position: static;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
}

/* ── Hero ────────────────────────────────────────────────────────── */
.ds-hero-tekst a { color: var(--ds-gull-lys); text-decoration: underline; text-underline-offset: 3px; }
.ds-hero-tekst a:hover { color: #fff; }
.ds-hero-sok {
  display: flex;
  gap: .5rem;
  max-width: 640px;
  margin: 1.4rem 0 1.2rem;
}
.ds-hero-sok input {
  flex: 1;
  min-width: 0;
  padding: .85rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--ds-kant);
  background: rgba(0, 0, 0, .3);
  color: var(--ds-tekst);
  font-size: 1rem;
}
.ds-hero-sok input:focus { outline: none; border-color: var(--ds-gull); }
.ds-hero-sok button {
  padding: .85rem 1.4rem;
  border: 0;
  border-radius: 10px;
  background: var(--ds-gull);
  color: #111;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.ds-hero-sok button:hover { background: var(--ds-gull-lys); }
.ds-sok-side { margin-top: .6rem; }

/* ── Seksjoner ───────────────────────────────────────────────────── */
.ds-seksjon {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.4rem 1rem 1rem;
  color: var(--ds-tekst);
}
.ds-seksjon-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  margin: 0 0 1.2rem;
  color: var(--ds-tekst);
}

/* ── Emnekort ────────────────────────────────────────────────────── */
.ds-emne-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.1rem;
}
.ds-emne-kort {
  display: flex;
  flex-direction: column;
  background: var(--ds-flate);
  border: 1px solid var(--ds-kant);
  border-radius: var(--ds-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ds-tekst);
  transition: transform .2s, border-color .2s, background .2s;
}
.ds-emne-kort:hover {
  transform: translateY(-3px);
  border-color: var(--ds-gull);
  background: var(--ds-flate-hover);
}
.ds-emne-bilde {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ds-emne-reserve {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1b2a3a 0%, #23394d 55%, #3a3220 100%);
}
.ds-emne-reserve span { font-size: 3rem; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
.ds-emne-tekst { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.ds-emne-tekst h3 { margin: 0 0 .4rem; font-size: 1.15rem; color: var(--ds-tekst); }
.ds-emne-tekst p { margin: 0 0 .8rem; font-size: .9rem; line-height: 1.55; color: var(--ds-dempet); flex: 1; }
.ds-emne-antall { font-size: .85rem; font-weight: 600; color: var(--ds-gull); }

/* ── Emneside ────────────────────────────────────────────────────── */
.ds-emne-topp {
  position: relative;
  max-width: 1100px;
  margin: 1.6rem auto 0;
  border-radius: var(--ds-radius);
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: flex-end;
}
.ds-emne-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-emne-topp::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 22, .15) 0%, rgba(10, 15, 22, .88) 100%);
}
.ds-emne-topp-tekst {
  position: relative;
  z-index: 1;
  padding: 2rem 1.6rem 1.6rem;
  color: #fff;
}
.ds-emne-topp-tekst h1 { font-family: 'Playfair Display', serif; font-size: 2.1rem; margin: .2rem 0 .5rem; color: #fff; }
.ds-emne-topp-tekst p { margin: 0 0 .5rem; max-width: 720px; line-height: 1.6; color: #dfe7ef; }
.ds-brodsmule { font-size: .85rem; }
.ds-brodsmule a { color: var(--ds-gull-lys); }

/* ── Artikkellister ──────────────────────────────────────────────── */
.ds-nyeste { display: grid; gap: .8rem; }
.ds-artikkel-rad {
  display: block;
  padding: 1rem 1.2rem;
  background: var(--ds-flate);
  border: 1px solid var(--ds-kant);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ds-tekst);
  transition: border-color .2s, background .2s;
}
.ds-artikkel-rad:hover { border-color: var(--ds-gull); background: var(--ds-flate-hover); }
.ds-artikkel-rad h3 { margin: 0 0 .35rem; font-size: 1.08rem; color: var(--ds-tekst); }
.ds-artikkel-rad p { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.55; color: var(--ds-dempet); }
.ds-artikkel-rad mark { background: rgba(201, 168, 76, .35); color: inherit; padding: 0 .1em; border-radius: 3px; }
.ds-les { font-size: .85rem; font-weight: 600; color: var(--ds-gull); }
.ds-alle { margin: 1.2rem 0 0; }
.ds-alle a { color: var(--ds-gull); font-weight: 600; }
.ds-sok-antall { color: var(--ds-dempet); margin: 0 0 1rem; }

/* ── Sidetall ────────────────────────────────────────────────────── */
.ds-sider { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.6rem 0 0; }
.ds-sider a, .ds-sider span {
  padding: .4rem .75rem;
  border: 1px solid var(--ds-kant);
  border-radius: 8px;
  color: var(--ds-tekst);
  text-decoration: none;
  font-size: .9rem;
}
.ds-sider a:hover { border-color: var(--ds-gull); }
.ds-sider .aktiv { background: var(--ds-gull); color: #111; border-color: var(--ds-gull); font-weight: 600; }

/* ── Artikkelsida (v1.1.0) ───────────────────────────────────────── */
.ds-artikkel-brodsmule { font-size: .88rem; color: var(--ds-dempet); }
.ds-artikkel-brodsmule a { color: var(--ds-gull-lys); text-decoration: none; }
.ds-artikkel-brodsmule a:hover { text-decoration: underline; }
a.ds-domenelenke { color: var(--ds-gull-lys); text-decoration: underline; text-underline-offset: 3px; }
a.ds-domenelenke:hover { color: #fff; }
.ds-videre {
  margin: 2.4rem 0 1.6rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--ds-gull);
  border-radius: var(--ds-radius);
  background: rgba(201, 168, 76, .07);
}
.ds-videre h3 { margin: 0 0 .5rem; font-size: 1.2rem; color: var(--ds-tekst); }
.ds-videre p { margin: 0 0 1rem; line-height: 1.6; color: var(--ds-dempet); }
.ds-videre-knapper { display: flex; flex-wrap: wrap; gap: .6rem; }
.ds-videre-knapper a {
  display: inline-block;
  padding: .65rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--ds-gull);
  color: var(--ds-gull-lys);
}
.ds-videre-knapper a.hoved { background: var(--ds-gull); color: #111; }
.ds-videre-knapper a:hover { filter: brightness(1.1); }