@charset "UTF-8";

/* =========================
   BALANCED LAPUA STYLE
========================= */

:root {

    /* navy (mindre aggressiv) */
    --navy: #1f3550;
    --navy-2: #2b4a6d;
    --accent: #4a79a8;

    /* lys bakgrunn (ikke grå) */
    --bg: #f4f7fa;
    --surface: #ffffff;

    /* tekst */
    --text: #1d2630;
    --muted: #5f6b78;

    /* border */
    --border: #dde5ec;

    /* footer (LYSERE!) */
    --footer: #f0f4f8;
    --footer-text: #2a3440;
}

/* =========================
   BASE
========================= */

body {
    font: 0.9em Arial, sans-serif;
    margin: 0;
    padding: 0;

    background: var(--bg);
    color: var(--text);
}

/* =========================
   WRAPPER
========================= */

#wrapper {
    width: 96%;
    max-width: 1800px;
    margin: 20px auto;
    padding: 20px;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 10px;

    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* =========================
   HEADINGS
========================= */

h1 {
    margin: 0;
    padding: 0.4em 0;
    text-transform: uppercase;
    color: var(--navy);
}

h2 {
    color: var(--navy-2);
}

h3 {
    color: var(--accent);
}

/* =========================
   NAV
========================= */

#nav {
    list-style: none;
    margin: 10px 0 20px 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;

    background: var(--navy);
    border-radius: 8px;
    overflow: hidden;
}

#nav li a {
    display: block;
    padding: 10px 16px;
    color: white;
    text-decoration: none;
}

#nav li a:hover {
    background: var(--accent);
}

/* =========================
   TABLE
========================= */

table {
    width: 100%;
    border-collapse: collapse;

    background: white;
    border-radius: 8px;
    overflow: hidden;
}

table th,
table td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
}

thead th {
    background: var(--navy);
    color: white;
}

tbody tr:nth-child(even) td {
    background: #f7f9fb;
}

tbody tr:hover td {
    background: #eef4fa;
}

/* ========================================
   RESULTAT TABELL JUSTERING
======================================== */

.left {
    text-align: left;
}

.center {
    text-align: center;
}

/* =========================
   FOOTER (LYS OG LUFTIG)
========================= */

#foot {
    margin-top: 40px;
    padding: 30px 20px;

    background: var(--footer);

    border-top: 2px solid var(--accent);
}

/* container */
.foot-wrapper {
    max-width: 1200px;
    margin: auto;

    display: flex;
    flex-direction: column;
    gap: 25px;

    text-align: center;
    color: var(--footer-text);
}

/* logos */
.foot-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
}

/* gjør logoene større og mer tydelige */
.foot-logos img {
    max-height: 100px;
    opacity: 0.95;
    filter: none;
}

/* tekst under logo */
.foot-logos span {
    margin-top: 8px;
    font-size: 0.95em;
    color: var(--footer-text);
}

/* links */
.foot-logos a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--footer-text);
}

/* sponsor (SPV) */
.foot-sponsor img {
    max-height: 85px;
    opacity: 0.9;
}

/* kontakt */
.foot-contact {
    color: var(--footer-text);
}

.foot-contact a {
    color: var(--navy);
    font-weight: bold;
    text-decoration: none;
}

.foot-contact a:hover {
    color: var(--accent);
}

/* =========================
   UTIL
========================= */

span.bold { font-weight: bold; }
span.italic { font-style: italic; }

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    #wrapper {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    #nav {
        flex-direction: column;
    }

    .foot-logos {
        gap: 30px;
    }

    .foot-logos img {
        max-height: 80px;
    }
}