/* =========================================================
   Basestil / variablar
   ========================================================= */

:root {
    --rk-red: #CE2F27;
    --rk-gray: #f1f1f1;
}

html,
body {
    height: 100%;
}

body {
    font-size: 15px;
    line-height: 1.6;
    background-color: #fafafa; /* Svak, rein grå */
}

p {
    line-height: 2;
}

/* Container spacing */
main {
    padding-bottom: 1.5rem;
}

/* =========================================================
   Globale lenkjer
   ========================================================= */

a {
    color: #111;
    text-decoration: underline;
    font-weight: 500;
}

    a:hover,
    a:focus {
        color: var(--rk-red);
        text-decoration: underline;
    }

/* Bootstrap btn-link – gjer han lik vanlege lenkjer */
.btn-link {
    color: #111 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    padding: 0; /* fjern "knapp-preg" */
}

    .btn-link:hover,
    .btn-link:focus {
        color: var(--rk-red) !important;
        text-decoration: underline !important;
    }

/* Dropdown-lenkjer */
.dropdown-item {
    color: #111 !important;
    text-decoration: underline !important;
    font-weight: 500;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: var(--rk-red) !important;
        text-decoration: underline !important;
        background-color: transparent !important;
    }

/* =========================================================
   Navbar
   ========================================================= */

.navbar {
    background-color: #fff;
}

    .navbar .navbar-brand img {
        display: block;
        margin-top: -8px;
    }

    /* Felles stil for alle meny-lenkjer, inkl. "Logg inn" */
    .navbar .nav-link {
        font-weight: 600;
        color: #111;
        padding-top: 0.6rem;
        padding-bottom: 0.3rem;
        text-decoration: none;
    }

        .navbar .nav-link:hover,
        .navbar .nav-link:focus {
            color: var(--rk-red);
            text-decoration: none;
        }

    /* Indre label som får raud strek under seg */
    .navbar .nav-link-label {
        display: inline-block;
        padding-bottom: 2px;
        border-bottom: 3px solid transparent;
    }

    /* Aktiv side – raud strek berre under teksten */
    .navbar .nav-link.active .nav-link-label,
    .navbar .nav-link[aria-current="page"] .nav-link-label {
        border-bottom-color: var(--rk-red);
    }

.navbar-text {
    font-weight: 600;
    color: #111;
}

/* Brukarinfo i navbaren */
.navbar-user {
    gap: 0.5rem;
    cursor: default;
}

/* Initial-sirkel */
.navbar-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rk-red);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Fullt namn ved sidan av avataren */
.navbar-user-name {
    font-weight: 600;
    white-space: nowrap;
}

/* Dropdown meny */
.dropdown-menu {
    border-radius: .5rem;
}

/* =========================================================
   Typografi / felles innhald
   ========================================================= */

.article-format {
    line-height: 1.7;
}

/* Brødtekst med støtte for linjeskift frå databasen */
.article-main,
.article-body {
    font-size: 1.05rem;
    line-height: 1.9;
    margin-top: 2rem;
    white-space: pre-line; /* viser linjeskift frå databasen */
}

.h1 {
    font-size: 3rem;
}

.h2,
.h3 {
    line-height: 1.7;
}

.p {
    font-size: 14px;
    line-height: 1.7;
}

/* Definisjonslister (frå gamle views) */
.dl-horizontal dt,
.dl-horizontal dd {
    white-space: pre-line;
}

/* =========================================================
   Bilete
   ========================================================= */

.article-image-responsive {
    width: 100%;
    height: auto;
}

/* Article details – figur rundt hovudbiletet */
.article-image {
    margin: 0 0 1.75rem;
}

    .article-image img {
        border-radius: .25rem;
    }

.image-preview {
    width: 100%;
    max-width: 610px;
}

/* Objekt-tilpassing (brukte støtteklasser) */
.fill {
    object-fit: fill;
}

.contain {
    object-fit: contain;
}

.cover {
    object-fit: cover;
}

.scale-down {
    object-fit: scale-down;
}

.none {
    object-fit: none;
}

/* =========================================================
   Karusell (Bootstrap 5)
   ========================================================= */

.carousel-item > img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

@media (max-width: 375px) {
    .carousel-item > img {
        height: 200px;
    }
}

.carousel-caption {
    text-shadow: 0 2px 4px rgba(0,0,0,.8);
}

/* =========================================================
   Skjema (breidde på ulike form-scopes)
   ========================================================= */

.article-form .form-control {
    max-width: 610px;
}

.commission-form .form-control {
    max-width: 300px;
}

textarea.form-control.intro-content {
    width: 100%;
    height: 100px;
}

textarea.form-control.main-content {
    width: 100%;
    height: 300px;
}

/* =========================================================
   Footer
   ========================================================= */

footer {
    background-color: #fff;
}

    footer .container {
        font-size: .9rem;
        background-color: transparent !important;
    }

.caption-shadow {
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* =========================================================
   Framside – artikkelkort (små kort)
   ========================================================= */

/* Kolonnene som inneheld korta på framsida */
.col-12.col-md-6.col-lg-4 {
    display: flex;
}

/* Klikkbare artikkelkort på framsida */
.article-card {
    display: block;
    color: inherit;
    flex: 1;
}

    /* Kortet sjølv */
    .article-card .card {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid rgba(0,0,0,.125);
        transition: border-color .15s ease, background-color .15s ease;
    }

    /* Hover på små kort */
    .article-card:hover .card {
        border-color: var(--rk-red);
        background-color: #fff9f8; /* veldig svak lys raud */
    }

    /* Card-body skal ta resten av plassen og balansere */
    .article-card .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

/* Les-meir-knapp nede til høgre */
.article-readmore {
    margin-top: auto;
    align-self: flex-end;
}

/* Sørg for at ev. siste p i card-body ligg i botnen */
.article-card .card-body p:last-child {
    margin-top: auto;
}

/* Hindre blå lenkjefarge inni kort */
.article-card .card-title,
.article-card p {
    color: inherit;
}

/* Gjer alle bilete like høge */
.article-card img.card-img-top {
    height: 350px;
    object-fit: cover;
    width: 100%;
}

/* Artikkeltittel i kort (små kort) */
.article-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0.6rem;
    color: #111;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-bottom-color .15s ease;
}

/* Hover: raud + understrek */
.article-card:hover .article-title {
    color: var(--rk-red);
    border-bottom-color: var(--rk-red);
}

/* =========================================================
   Framside – feature-artikkel (første kort)
   ========================================================= */

.feature-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.125); /* same som Bootstrap card */
    border-radius: .25rem;
    overflow: hidden;
}

.article-feature:hover .feature-card {
    border-color: var(--rk-red);
    background-color: #fff9f8;
}

/* Biletet i feature-kortet */
.feature-img {
    width: 100%;
    object-fit: cover;
}

/* På større skjerm: la biletet fylle høgda av kortet */
@media (min-width: 768px) {
    .feature-img {
        height: 100%;
    }
}

/* Feature-tittel (stor variant på desktop) */
.feature-title {
    font-size: 50px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.6rem;
    color: #111;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-bottom-color .15s ease;
}

/* Ingress i feature-kortet */
.feature-intro {
    font-size: 20px;
    line-height: 1.9;
}

/* Hover-effekt på feature-tittel */
.article-feature .feature-title {
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

.article-feature:hover .feature-title {
    color: var(--rk-red);
    text-decoration-line: underline;
    text-decoration-color: var(--rk-red);
}

/* Responsiv tilpassing av feature-kortet */
@media (max-width: 767.98px) {
    /* Skjul ingress på små skjermar */
    .feature-intro {
        display: none;
    }

    /* Gjer feature-tittel lik dei andre korta */
    .feature-title {
        font-size: 30px; /* same som .article-title */
        line-height: 1.5;
        font-weight: 600;
    }
}

/* =========================================================
   Røde Kors-knappar og lenkjer
   ========================================================= */

/* Solid RK-knapp */
.btn-rk {
    background-color: var(--rk-red);
    color: #fff;
    border-radius: 0.3rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

    .btn-rk:hover {
        background-color: #a5201b;
        color: #fff;
    }

/* Lenkje-variant (brukast for "Les meir") */
.btn-rk-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--rk-red);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .btn-rk-link:hover,
    .btn-rk-link:focus {
        color: #a5201b;
        text-decoration: underline;
    }

    .btn-rk-link::after {
        content: " →";
    }

/* =========================================================
   Boks rundt "Aktivitetar framover"
   ========================================================= */

.upcoming-box {
    background-color: #fff9f8; /* svak, lys raud */
    border: 1px solid rgba(206, 47, 39, 0.3);
    border-radius: .25rem;
    padding: 1.5rem;
}

    .upcoming-box .table {
        margin-bottom: 0;
        background-color: transparent;
        border-color: transparent;
    }

        .upcoming-box .table th,
        .upcoming-box .table td {
            background-color: transparent;
            border-top: none;
        }

        .upcoming-box .table thead th {
            border-bottom: none;
        }

/* =========================================================
   Artikkel-visning (Details)
   ========================================================= */

.article-detail {
    max-width: 860px;
    margin: 0 auto 3rem; /* sentrer artikkelen og gi luft ned */
}

/* Hovudtittel på artikkelsida */
.article-title-main {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: .5rem;
}

/* Metadata-linje under tittelen */
.article-meta {
    font-size: 0.9rem;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: .4rem 0;
    margin-bottom: 1.25rem;
}

/* Ingress – litt større og luftigare tekst */
.article-intro {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.75rem;
    font-weight: 500;
}

/* Hovudbrødtekst – litt smalare linjeavstand og god margen */
.article-body {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    white-space: pre-line; /* tryggleik – linjeskift */
}

/* Respons på små skjermar for artikkel */
@media (max-width: 767.98px) {
    .article-title-main {
        font-size: 1.8rem;
    }

    .article-meta {
        flex-direction: column;
        gap: 0.15rem;
        align-items: flex-start;
    }
}