/* =============================================================
   matte.css — Matteskolen farger og tema
   Importeres ETTER dstn-felles.css
   ============================================================= */

:root {
    --blaa:         #3b9eff;
    --bakgrunn:     #0a0f1a;
    --bakgrunn2:    #0d1521;
    --tekst:        #e6edf3;
    --tekst-dempet: #8b949e;
    --border:       #1e3a5f;
    --gron:         #2ea043;
    --oransje:      #f0883e;
    --lilla:        #a855f7;
}

/* Matteskolen hero-gradient */
.hero-matte {
    background: linear-gradient(135deg, #0d1a2e 0%, #112240 60%, #0f1a30 100%);
    border-radius: 12px;
    padding: 3rem 2.5rem 2.5rem;
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(59,158,255,0.15);
}

.hero-matte::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(59,158,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-matte .hero-badge {
    display: inline-block;
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--blaa);
    background: rgba(59,158,255,0.1);
    border: 1px solid rgba(59,158,255,0.25);
    border-radius: 20px; padding: 3px 12px; margin-bottom: 1rem;
}

.hero-matte h1 { font-size: 2.4rem; color: #e8f0fe; letter-spacing: -0.02em; }
.hero-matte h1 span { color: var(--blaa); }
.hero-matte .hero-ingress { font-size: 1rem; color: #7a9bbf; max-width: 520px; margin-top: 0.5rem; }

.hero-stats { display: flex; gap: 2rem; margin-top: 1.5rem; }
.hero-stat-num { font-size: 1.6rem; font-weight: 700; color: var(--blaa); line-height: 1; }
.hero-stat-lbl { font-size: 0.7rem; color: #5a7a99; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* Nivaavelger */
.nivaa-tabs {
    display: flex; gap: 8px; margin-bottom: 1.5rem; flex-wrap: wrap;
}

.nivaa-tab {
    padding: 5px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: 500;
    cursor: pointer; text-decoration: none !important;
    border: 1px solid var(--border); color: var(--tekst-dempet);
    transition: all 0.15s;
}

.nivaa-tab:hover          { color: var(--tekst); border-color: var(--blaa); }
.nivaa-tab.aktiv          { background: rgba(59,158,255,0.12); color: var(--blaa); border-color: rgba(59,158,255,0.4); }
.nivaa-tab[data-nivaa="1"].aktiv { background: rgba(46,160,67,0.12);  color: #2ea043; border-color: rgba(46,160,67,0.4); }
.nivaa-tab[data-nivaa="2"].aktiv { background: rgba(59,158,255,0.12); color: var(--blaa); border-color: rgba(59,158,255,0.4); }
.nivaa-tab[data-nivaa="3"].aktiv { background: rgba(240,136,62,0.12); color: var(--oransje); border-color: rgba(240,136,62,0.4); }

/* Kategoriikoner i grid */
.kat-ikon {
    font-size: 1.6rem; margin-bottom: 0.5rem; display: block;
}

/* Framdriftsbar per kategori */
.kat-bar     { height: 2px; background: var(--border); border-radius: 2px; margin-top: 0.75rem; }
.kat-bar-fill { height: 2px; border-radius: 2px; background: var(--blaa); transition: width 0.4s; }

/* Quiz-banner på forsiden */
.quiz-teaser {
    background: linear-gradient(120deg, #0f2440 0%, #1a1040 100%);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 12px; padding: 1.25rem 1.5rem;
    display: flex; align-items: center; gap: 1rem; margin-top: 2rem;
}

.quiz-teaser-ikon  { font-size: 2rem; flex-shrink: 0; }
.quiz-teaser-tittel { font-size: 1rem; font-weight: 600; color: #d4a8ff; }
.quiz-teaser-sub    { font-size: 0.82rem; color: #7a5fa0; margin-top: 2px; }
.quiz-teaser-knapp  {
    margin-left: auto; padding: 6px 16px; border-radius: 20px; white-space: nowrap;
    background: rgba(168,85,247,0.15); border: 1px solid rgba(168,85,247,0.4);
    color: #d4a8ff; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    text-decoration: none !important; transition: opacity 0.15s;
}
.quiz-teaser-knapp:hover { opacity: 0.85; }

/* ============================================================
   Matematiker-sitater
   Bruk: <div class="matematik-sitat"><p class="sitat-tekst">...</p><p class="sitat-navn">— Navn</p></div>
   ============================================================ */

.matematik-sitat {
    margin: 2.5rem 0 1rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, #0d1a2e 0%, #0f2040 100%);
    border: 1px solid rgba(59,158,255,0.15);
    border-left: 3px solid var(--blaa);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.matematik-sitat::before {
    content: '\201C';
    position: absolute;
    top: -10px; left: 12px;
    font-size: 5rem;
    font-family: 'Syne', Georgia, serif;
    color: rgba(59,158,255,0.12);
    line-height: 1;
    pointer-events: none;
}

.sitat-tekst {
    font-size: 1.05rem;
    font-style: italic;
    color: #c8d8f0;
    line-height: 1.7;
    margin-bottom: 0.75rem !important;
    position: relative;
}

.sitat-navn {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--blaa);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0 !important;
}

/* Admin-spesifikt */
.admin-tabell { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-tabell th { background: var(--bakgrunn2); border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; color: var(--blaa); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.admin-tabell td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; vertical-align: middle; }
.admin-tabell tr:hover td { background: rgba(255,255,255,0.02); }

/* Lesefremdrift-bar */
#lesefremdrift {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #3b9eff, #a855f7);
    z-index: 9999;
    transition: width 0.1s ease;
    border-radius: 0 2px 2px 0;
}


/* Navbar dropdowns */
.dd-wrap { position: relative; }
.dd-btn {
    background: none; border: none; cursor: pointer;
    font-size: .875rem; font-weight: 500; font-family: inherit;
    color: var(--tekst-dempet); padding: .35rem .5rem;
    border-radius: 6px; display: flex; align-items: center; gap: 4px;
    transition: color .2s;
}
.dd-btn:hover { color: var(--blaa); }
.dd-pil { font-size: .65rem; opacity: .6; }
.dd-meny {
    display: none; position: absolute; top: calc(100% + 6px); left: 0;
    background: var(--bakgrunn); border: 1px solid var(--border);
    border-radius: 10px; padding: .35rem 0; min-width: 185px;
    box-shadow: 0 8px 20px rgba(0,0,0,.18); z-index: 9999;
    list-style: none;
}
.dd-meny.open { display: block; }
.dd-meny li a {
    display: block; padding: .55rem 1rem; font-size: .85rem;
    color: var(--tekst-dempet); text-decoration: none; transition: all .15s;
    white-space: nowrap;
}
.dd-meny li a:hover { background: rgba(59,158,255,.08); color: var(--blaa); }