/* -------------------------------------------------
   Grunnoppsett
   ------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #f7fbfc; /* lys, svakt blålig bakgrunn */
    color: #222;
}

/* Lenker generelt */
a {
    color: #006d77;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

/* -------------------------------------------------
   Toppbjelke (header)
   ------------------------------------------------- */

.topp {
    position: relative;
    z-index: 0;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center; /* midtstiller innholdet (h1) */
    color: #edf6f9;

    background: linear-gradient(
        135deg,
        #006d77 0%,
        #008494 50%,
        #006d77 100%
    );
}

.topp h1 {
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
}

/* -------------------------------------------------
   Hamburger-meny
   ------------------------------------------------- */

.hamburger {
    display: none; /* vises kun på små skjermer (se media query) */
    width: 36px;
    height: 32px;
    border: none;
    background: transparent;
    padding: 4px;
    cursor: pointer;

    /* Plasseres i høyre kant, uavhengig av h1 */
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.hamburger span {
    display: block;
    height: 3px;
    margin: 5px 0;
    background-color: #edf6f9;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Når menyen er åpen, animer hamburgeren til et kryss */
.hamburger.hamburger--open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.hamburger--open span:nth-child(2) {
    opacity: 0;
}
.hamburger.hamburger--open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* -------------------------------------------------
   Hovedlayout: container, sidemeny, innhold
   ------------------------------------------------- */

.container {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

/* Sidemeny (desktop) */
.sidemeny {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);

    /* Gjør menyen «fast» når man scroller, med egen scroll */
    position: sticky;
    top: 70px; /* avstand fra toppen (tilpass til header-høyde) */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.sidemeny h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #006d77;
}

.sidemeny ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidemeny li {
    margin-bottom: 6px;
}

/* Vanlige lenker i menyen */
.sidemeny a {
    display: block;
    padding: 4px 6px;
    border-radius: 4px;
    color: #00404a;
    text-decoration: none;
    font-size: 0.95rem;
}

/* Aktiv side */
.sidemeny a.active {
    background-color: #006d77;
    color: #edf6f9;
}

/* Hover/fokus */
.sidemeny a:hover,
.sidemeny a:focus {
    background-color: #edf6f9;
}

/* --- Beskyttede menypunkter (familieområder) --- */

/* Vanlig tilstand */
.sidemeny a.protected {
    color: #00434a;
    background-color: rgba(0, 109, 119, 0.08);
}

/* Hover/fokus – litt tydeligere */
.sidemeny a.protected:hover,
.sidemeny a.protected:focus {
    background-color: rgba(0, 109, 119, 0.16);
}

/* Aktiv OG beskyttet */
.sidemeny a.active.protected {
    background-color: #006d77;
    color: #edf6f9;
}

/* Hovedinnhold */
.innhold {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px 18px 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.toppseksjon {
    margin-bottom: 20px;
}

.tekstfelt {
    max-width: 800px;
}

/* -------------------------------------------------
   Forside-layout (bildet + tekst)
   ------------------------------------------------- */

.forside-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.forside-bildekolonne {
    flex: 0 0 260px;
    max-width: 100%;
}

.forside-bildekolonne img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.forside-tekstkolonne {
    flex: 1 1 300px;
    min-width: 0;
}

/* -------------------------------------------------
   Nyheter – bilde venstre, tekst høyre
   ------------------------------------------------- */

.nyhet-rad {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-top: 10px;
}

.nyhet-bildekolonne {
    flex: 0 0 800px;
    max-width: 800px;  /* absolutt maks bredde, valgfritt */
    margin: 0;
}

.nyhet-bildekolonne img {
    width: 100%;
    height: auto;
}

.nyhet-bildekolonne figcaption {
    font-size: 0.85rem;
    color: #555;
    margin-top: 4px;
}

.nyhet-tekstkolonne {
    flex: 1 1 260px;
    min-width: 0;
}

/* -------------------------------------------------
   Responsiv tilpasning
   ------------------------------------------------- */

@media (max-width: 800px) {
    .container {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 10px 30px;
    }

    .hamburger {
        display: block;
    }

    /* På mobil brukes «slide down»-meny i stedet for sticky */
    .sidemeny {
        position: absolute;
        top: 60px;          /* tilpass til header-høyden om nødvendig */
        left: 0;
        right: 0;
        margin: 0 10px;
        transform: translateY(-120%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.2s ease, opacity 0.2s ease;
        z-index: 10;
        max-height: none;
        overflow-y: visible;
    }

    .sidemeny.sidemeny--open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .forside-grid {
        flex-direction: column;
    }

    .forside-bildekolonne {
        flex: 1 1 auto;
    }

    /* Nyheter: bilde over tekst på smale skjermer */
    .nyhet-rad {
        flex-direction: column;
    }

    .nyhet-bildekolonne {
        flex: 1 1 auto;
    }
}

/* -------------------------------------------------
   Enkle standardelementer
   ------------------------------------------------- */

main h2 {
    margin-top: 0;
}

main p {
    line-height: 1.5;
}

/* Skjemaer (generelt, brukes bl.a. på kontakt og login) */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
button {
    font-family: inherit;
}

/* Enkel knappstil (overstyres lokalt ved behov) */
button {
    cursor: pointer;
}

/* -------------------------------------------------
   Admin-knapper
   ------------------------------------------------- */

.admin-knapper {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.btn-primar {
    background-color: #006d77;
    color: #edf6f9;
}

.btn-primar:hover {
    background-color: #005862;
}

.btn-sekundar {
    background-color: #ffffff;
    color: #006d77;
    border: 1px solid #006d77;
}

.btn-sekundar:hover {
    background-color: #edf6f9;
}

.btn-link {
    background-color: #ffffff;
    color: #006d77;
    border: 1px solid transparent;
}

.btn-link:hover {
    text-decoration: underline;
}

/* -------------------------------------------------
   Seksjoner (historier m.m.)
   ------------------------------------------------- */

.forside-seksjon {
    margin-top: 20px;
    margin-bottom: 20px;
}

.seksjon-rad {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-top: 10px;
}

.seksjon-tekstkolonne {
    flex: 1 1 280px;
    min-width: 0;
}

.seksjon-bildekolonne {
    flex: 0 0 260px;   /* bredde på bildefeltet til høyre */
    max-width: 100%;
    margin: 0;
}

.seksjon-bildekolonne img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.seksjon-bildekolonne figcaption {
    font-size: 0.85rem;
    color: #555;
    margin-top: 4px;
}

/* Responsiv: stablet på mobil */
@media (max-width: 800px) {
    .seksjon-rad {
        flex-direction: column;
    }

    .seksjon-bildekolonne {
        flex: 1 1 auto;
    }
}

/* -------------------------------------------------
   Lister tett
   ------------------------------------------------- */

.liste-tett {
    margin: 0;
    padding-left: 20px;   /* juster innrykk ved behov */
}

.liste-tett li {
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------
   Bildegalleri / karusell
   ------------------------------------------------- */

.bildegalleri-seksjon {
    margin-top: 20px;
    margin-bottom: 20px;
}

.bildekarusell {
    position: relative;
    max-width: 800px;
    margin: 10px 0 0;
}

.bildekarusell-bilder {
    position: relative;
    overflow: hidden;
}

.bildekarusell-bilde {
    display: none;
    margin: 0;
}

.bildekarusell-bilde.aktiv {
    display: block;
}

.bildekarusell-bilde img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.bildekarusell-bilde figcaption {
    font-size: 0.9rem;
    color: #555;
    margin-top: 4px;
}

/* Piler (forrige / neste) */
.bildekarusell-knapp {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.bildekarusell-knapp.forrige {
    left: 8px;
}

.bildekarusell-knapp.neste {
    right: 8px;
}

.bildekarusell-knapp:hover,
.bildekarusell-knapp:focus {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Prikker under (indikatorer) */
.bildekarusell-prikker {
    text-align: center;
    margin-top: 8px;
}

.bildekarusell-prikk {
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border-radius: 50%;
    border: none;
    background-color: #ccc;
    cursor: pointer;
    padding: 0;
}

.bildekarusell-prikk.aktiv {
    background-color: #006d77;
}

/* -------------------------------------------------
   Bildeviser (lightbox)
   ------------------------------------------------- */

.bildeviser-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.bildeviser-overlay.åpen {
    display: flex;
}

.bildeviser-innhold {
    max-width: 95vw;
    max-height: 95vh;
    text-align: center;
    position: relative;
}

.bildeviser-innhold img {
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    background-color: #fff;
}

.bildeviser-tekst {
    margin-top: 8px;
    font-size: 0.95rem;
    color: #f0f0f0;
}

.bildeviser-lukk {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ffffff;
    color: #000;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.bildeviser-pil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    color: #000;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bildeviser-pil.bildeviser-forrige {
    left: -40px;
}

.bildeviser-pil.bildeviser-neste {
    right: -40px;
}

@media (max-width: 600px) {
    .bildeviser-pil.bildeviser-forrige {
        left: 5px;
    }
    .bildeviser-pil.bildeviser-neste {
        right: 5px;
    }
}

/* -------------------------------------------------
   Ekstra menyblokk for historier i venstre kolonne
   ------------------------------------------------- */

.historie-meny {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid #dde;
}

.historie-meny h2 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    color: #006d77;
}

.historie-meny ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.historie-meny li {
    margin-bottom: 4px;
}

.historie-meny a {
    display: block;
    padding: 2px 4px;
    font-size: 0.9rem;
    color: #00404a;
    text-decoration: none;
    border-radius: 3px;
}

.historie-meny a:hover,
.historie-meny a:focus {
    background-color: #edf6f9;
}