:root {
    --bg: #101014;
    --card: #1a1a21;
    --text: #e9e9ef;
    --muted: #9a9aa8;
    --accent: #ff4d6d;
    --radius: .5rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: inherit; text-decoration: none; }

/* ---------- Header og footer ---------- */

.site-header,
.site-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #26262f;
}

.site-footer {
    justify-content: center;
    border-top: 1px solid #26262f;
    border-bottom: 0;
    color: var(--muted);
    font-size: .875rem;
    margin-top: 3rem;
}

.brand {
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
}

.site-nav { display: flex; gap: 1rem; font-size: .875rem; color: var(--muted); }
.site-nav a:hover { color: var(--text); }

.site-main { padding: 1.25rem; max-width: 1400px; margin: 0 auto; }

/* ---------- Sektionshoved ---------- */

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 .75rem;
}

.section-head h1 { font-size: 1.125rem; margin: 0; }

.section-more { color: var(--muted); font-size: .8125rem; }
.section-more:hover { color: var(--accent); }

/* ---------- Videokort ---------- */

.video-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.card { background: var(--card); border-radius: var(--radius); overflow: hidden; }

.card-link { display: block; padding: .5rem .5rem .75rem; }

.card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: calc(var(--radius) - .15rem);
    overflow: hidden;
}

.card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.card-thumb-empty { display: block; width: 100%; height: 100%; background: #0a0a0d; }

.card-duration,
.card-hd {
    position: absolute;
    font-size: .6875rem;
    line-height: 1;
    font-weight: 600;
    padding: .25rem .35rem;
    border-radius: .25rem;
    background: rgba(0, 0, 0, .78);
    color: #fff;
}

.card-duration { right: .35rem; bottom: .35rem; }
.card-hd { left: .35rem; top: .35rem; color: var(--accent); }

.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .875rem;
    font-weight: 600;
    margin: .5rem 0 .25rem;
}

.card-meta { display: block; color: var(--muted); font-size: .75rem; }

/* ---------- Annoncer ---------- */
/* Højden er låst pr. slot, så der ikke opstår layoutskift når annoncen lander. */

.ad { background: #14141a; border-radius: var(--radius); overflow: hidden; }
.ad iframe { display: block; width: 100%; height: 100%; border: 0; }

.ad--top { height: 90px; margin-bottom: 1rem; }
.ad--infeed { height: 100%; min-height: 250px; margin: 0; }
.ad--below_player { height: 90px; margin: 1rem 0; }
.ad--sidebar { width: 300px; height: 600px; position: sticky; top: 1rem; }

.card--ad { padding: .5rem; }

@media (max-width: 1023px) {
    .ad--sidebar { display: none; }
    .watch { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
    .ad--top { height: 50px; }
    .ad--below_player { height: 100px; }
}

/* ---------- Video-side ---------- */

.watch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: start;
}

.watch-main { min-width: 0; }

.player-frame {
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}

.player-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.watch-title { font-size: 1.25rem; margin: 1rem 0 .25rem; }

.video-meta { color: var(--muted); font-size: .875rem; margin: 0 0 .5rem; }

.embed-box {
    background: var(--card);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin: 1rem 0;
    font-size: .8125rem;
}

.embed-box summary { cursor: pointer; color: var(--muted); }

.embed-box pre {
    margin: .75rem 0 0;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #c9c9d4;
}

.notice {
    background: var(--card);
    border-left: 3px solid var(--accent);
    padding: .75rem 1rem;
    color: var(--muted);
}

.description { max-width: 70ch; color: #c9c9d4; }

/* ---------- Samtykkebjælke (analytics) ---------- */

.consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    max-width: 640px;
    margin: 0 auto;
    padding: .85rem 1rem;
    background: var(--card);
    border: 1px solid #2c2c37;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    font-size: .875rem;
}

.consent p { margin: 0; flex: 1 1 240px; color: var(--muted); }

.consent button {
    border: 0;
    border-radius: .35rem;
    padding: .45rem .9rem;
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
    background: var(--accent);
    color: #16060a;
    font-weight: 600;
}

.consent .consent-no { background: none; border: 1px solid #3a3a46; color: var(--muted); }

/* ---------- Søgning, sortering og sider ---------- */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.search-form { display: flex; gap: .4rem; margin-left: auto; }
.search-form input {
    background: var(--card);
    border: 1px solid #2c2c37;
    border-radius: .35rem;
    color: var(--text);
    padding: .4rem .6rem;
    font: inherit;
    font-size: .8125rem;
    min-width: 0;
}
.search-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-form button {
    background: none;
    border: 1px solid #2c2c37;
    border-radius: .35rem;
    color: var(--muted);
    padding: .4rem .7rem;
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
}
.search-form button:hover { color: var(--text); }
.search-form--inline { margin: 0 0 1rem; }
.search-form--inline input { flex: 1 1 260px; }

.sort-nav { display: flex; gap: .75rem; margin: 0 0 1rem; font-size: .8125rem; color: var(--muted); }
.sort-nav a:hover { color: var(--text); }
.sort-nav .is-active { color: var(--accent); }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 1.5rem 0 0; font-size: .875rem; }
.pager a, .pager-current, .pager-step {
    padding: .3rem .6rem;
    border-radius: .3rem;
    border: 1px solid #26262f;
    color: var(--muted);
}
.pager a:hover { color: var(--text); border-color: var(--muted); }
.pager-current { background: var(--accent); border-color: var(--accent); color: #16060a; font-weight: 600; }
.pager-step--off { opacity: .35; }
.pager-gap { color: var(--muted); padding: 0 .15rem; }

/* ---------- Kategorier ---------- */

.category-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
}

.category-tile {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem;
    background: var(--card);
    border-radius: var(--radius);
}
.category-tile:hover { outline: 1px solid var(--accent); }
.category-name { font-weight: 600; }
.category-count { color: var(--muted); font-size: .8125rem; }

.section-head h2 { font-size: 1rem; margin: 0; }

/* ---------- Tags ---------- */

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; padding: 0; }
.tags a {
    display: inline-block;
    padding: .2rem .55rem;
    background: var(--card);
    border-radius: 999px;
    font-size: .75rem;
    color: var(--muted);
}
.tags a:hover { color: var(--text); }