/*
Theme Name: Hello Elementor Child
Author: cr8
Description: Barnetema for Hello Elementor
Version: 1.3
Template: hello-elementor
*/

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

/* Generell sidestruktur - .site-main beholdes for nå */
.footer-inner,
.site-main {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
    box-sizing: border-box;
}

.site-main {
    flex-grow: 1;
    padding-top: 0px;
    padding-bottom: 40px;
}

#site-footer {
    max-width:none;
}

/*--------------------------------------------------------------
# Header Styling (Med unike cr8- prefikser)
--------------------------------------------------------------*/
.cr8-article-header .entry-title {
    font-family: 'Inter';
    font-size:2.2rem;
    text-align:left;
    font-weight:800;
}
button.cr8-menu-toggle {
    background-color: transparent;
    color: white;
    display: inline-block;
    border:none;
    font-size: 1rem;
    font-weight: 400;
    user-select: none;
    white-space: nowrap
}

button.cr8-menu-toggle:hover {
    background-color: transparent;
}

/* Generell Header-styling */
#cr8-header { /* Bruker ID for høy spesifisitet */
    background-color: #08163a;
    border-bottom: 1px solid #333;
    position: relative;
    z-index: 1000;
    width: 100%;
}

/* Den mest målrettede løsningen for breddeproblemet */
@media (min-width: 1200px) {
    #cr8-header { /* ID-en er unik og sterk nok, overstyrer alt */
        max-width: none;
    }
    #cr8-header .cr8-menu-toggle {
    display: none; 
    }
}

/* Inner-container for header */
.cr8-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 75%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Logo */
#cr8-header .custom-logo {
    max-height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Navigasjon (PC) */
.cr8-main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 30px;
}

.cr8-main-nav li {
    position: relative;
}

.cr8-main-nav a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.2s ease;
    display: block;
    padding: 5px 0;
}

.cr8-main-nav a:hover {
    color: #ccc;
}

/* CTA-knapp i menyen */
.cr8-main-nav .cta-button a {
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.cr8-main-nav .cta-button a:hover {
    background-color: #eee;
    color: #000;
}

/* Hamburger-knapp */
.cr8-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: #fff;
    position: relative;
    z-index: 1001;
}

/* Undermenyer (Dropdowns på PC) */
.cr8-main-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -20px;
    background-color: #fff;
    min-width: 200px;
    z-index: 1010;
    list-style: none;
    padding: 10px 0;
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 1px solid #e5e5e5;
}
.cr8-main-nav .sub-menu a { color: #4a4a4a; }
.cr8-main-nav .sub-menu a:hover { color: #000; }
.cr8-main-nav li:hover > .sub-menu { display: block; }
.cr8-main-nav .sub-menu li { padding: 0; }
.cr8-main-nav .sub-menu a { padding: 8px 20px; font-size: 15px; white-space: nowrap; }


/*--------------------------------------------------------------
# Mobil-responsivt
--------------------------------------------------------------*/
@media (max-width: 880px) {
    .cr8-header-inner {
        padding: 15px 20px;
        max-width:100%;
    }

    .cr8-menu-toggle {
        display: block; /* Vises på mobil */
    }
    
    .cr8-main-nav {
        display: none;
        position: absolute;
        top: 100%; /* Legger seg pent under headeren */
        left: 0;
        width: 100%;
        background-color: #fff;
        z-index: 1000;
        box-shadow: 0 5px 10px rgba(0,0,0,0.05);
        padding: 20px;
    }
    .cr8-main-nav.is-open {
        display: block;
    }
    .cr8-main-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .cr8-main-nav a { color: #4a4a4a; }
    .cr8-main-nav a:hover { color: #000; }
    .cr8-main-nav .cta-button a { background-color: #1a1a1a; color: #fff; }
    .cr8-main-nav .cta-button a:hover { background-color: #333; }
    .cr8-main-nav .sub-menu { position: static; box-shadow: none; border: none; padding-left: 15px; }
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

/* Hovedcontainer for hele footeren */
.site-footer {
    background-color: #111;
    color: #a0a0a0;
    padding: 50px 20px;
    font-size: 14px;
}

/* Den indre containeren som sentrerer innholdet */
.footer-inner {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    
    /* Mobil-først: Stabler og sentrerer alt som standard */
    display: flex;
    flex-direction: column; /* Stabler vertikalt på mobil */
    align-items: center; /* Midtstiller horisontalt på mobil */
    text-align: center;
    gap: 35px; /* Avstand mellom blokkene på mobil */
}

/* Logoen i footeren */
.site-footer .custom-logo {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    max-height: 30px;
    width: auto;
}

/* Lenkene i footeren */
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stabler lenkene på mobil */
    gap: 15px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.footer-links a:hover {
    color:#fff;
    text-decoration: underline;
}

/* Credit-teksten */
.footer-credits {
    font-size: 0.9em;
    opacity: 0.8;
}

.footer-credits p {
    margin: 4px 0;
    padding: 0;
}

.footer-credits a {
    color: #fff;
    text-decoration: underline;
}

.footer-credits a:hover {
    text-decoration: none;
}


/* PC/iPad-layout (skjermer bredere enn 768px) */
@media (min-width: 769px) {
    .footer-inner {
        display: grid;
        /* Definerer et rutenett med to kolonner og to rader */
        grid-template-columns: 1fr auto; /* Venstre kolonne tar opp ledig plass, høyre tilpasser seg innhold */
        grid-template-rows: auto auto;
        grid-template-areas:
            "logo  links"
            "creds links";
        gap: 10px 30px; /* 10px vertikal, 30px horisontal avstand */
        align-items: start; /* Justerer elementene til toppen av sin rad */
        text-align: left; /* Standard venstrejustering på PC */
    }

    /* Plasserer hver blokk i sitt definerte område */
    .footer-logo { grid-area: logo; }
    .footer-credits { grid-area: creds; }
    .footer-links { grid-area: links; justify-self: end; } /* Skyver lenkene helt til høyre */

    .footer-links ul {
        flex-direction: row; /* Plasserer lenkene side-om-side på PC */
        gap: 25px;
    }
    
    .footer-credits {
        text-align: left; /* Overstyrer sentrering på mobil */
    }
}
/*
 * MODERNE STYLING FOR WOOCOMMERCE PRODUCT LIST WIDGET
 *------------------------------------------------------------*/

ul.product_list_widget {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 15px; /* Avstand mellom produktene */

    /* Mobil-først: 2 kolonner som standard */
    grid-template-columns: repeat(2, 1fr); 
}

ul.product_list_widget li {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
    margin-bottom: 0; /* Erstatter tidligere margin-logikk */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden; /* Nødvendig for avrundede kanter på bildet */
}

ul.product_list_widget li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

ul.product_list_widget li a {
    text-decoration: none;
    color: inherit;
    display: block;
}

ul.product_list_widget li img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Sørger for at alle bilder er kvadratiske */
    object-fit: cover; /* Fyller rammen uten å strekke bildet */
    display: block;
    margin: 0; /* Fjerner all tidligere margin */
}

/* Wrapper for tekstinnhold for bedre padding-kontroll */
.product_list_widget li .cr8-widget-product-content {
    padding: 15px;
}

/* Produkttittel */
ul.product_list_widget li .product-title {
    font-weight: 600; /* Litt lettere enn før for et renere utseende */
    font-size: 1em;
    color: #333;
    margin: 0 0 0.5em 0;
}

/* Pris */
ul.product_list_widget li .price,
ul.product_list_widget li .woocommerce-Price-amount {
    font-size: 1em;
    font-weight: 500;
    color: #111;
}

ul.product_list_widget li del {
    opacity: 0.6;
    margin-right: 0.5em;
}

ul.product_list_widget li ins {
    text-decoration: none;
    color: #c00;
    font-weight: 600;
}

/* 4. Skjuler unødvendige elementer for et renere utseende */
ul.product_list_widget .star-rating,
ul.product_list_widget .add_to_cart_button {
    display: none;
}


/* 5. Layout for PC (endres til 4 kolonner) */
@media (min-width: 768px) {
    ul.product_list_widget {
        grid-template-columns: repeat(4, 1fr); /* 4 kolonner på større skjermer */
        gap: 25px; /* Litt mer luft på PC */
    }
}
/*--------------------------------------------------------------
# Styling for Enkeltinnlegg (Artikler)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Styling for Kategori-merkelapper på artikkelsider
--------------------------------------------------------------*/

.cr8-post-categories {
    /* Plassering og avstand */
    margin-top: 1.5em;
    margin-bottom: 1.5em;

    /* Layout for merkelappene */
    display: flex;
    flex-wrap: wrap; /* Lar merkelappene gå over til neste linje om nødvendig */
    justify-content: flex-start; /* Justerer til venstre, på linje med meta-boksen */
    gap: 8px; /* Avstand mellom hver merkelapp */
}

.category-badge {
    /* Utseende */
    display: inline-block;
    background-color: #eaf6ff; /* Lyseblå bakgrunn */
    color: #005a9c; /* Mørkere blå tekst for god kontrast */
    padding: 6px 15px; /* Luft inne i boksen */
    border-radius: 50px; /* Gjør den "rund" (pilleformet) */
    
    /* Typografi */
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
    
    /* Effekt ved hover */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.category-badge:hover {
    background-color: #d4e9f7; /* Litt mørkere blå ved hover */
    color: #00487c;
}

/* Wrapper for hele artikkelområdet */
.cr8-content-area-wrapper {
    max-width: 960px;
    margin: 2em auto;
    padding: 0 20px;
}

.cr8-article-header {
    text-align: center;
    margin-bottom: 2em;
}

/* --- ENDRING 1: Justerer meta-boksen til venstre --- */
.cr8-entry-meta {
    display: flex;
    justify-content: flex-start; /* ENDRET: Flytter boksen til venstre (var 'center') */
    margin-top: 2em;
    margin-bottom: 2em;
    /* Bakgrunn og ramme er fjernet for et renere utseende, kan legges til om ønskelig */
}

.cr8-author-link-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.cr8-author-link-wrapper .avatar {
    border-radius: 50%;
}

.cr8-author-text-wrapper {
    text-align: left; /* Justerer teksten internt til venstre */
}

.cr8-author-text-wrapper .author-name {
    display: block;
    font-weight: 700;
    font-size: 1em;
    color: #222;
    transition: color 0.2s;
}

.cr8-author-text-wrapper .published-date {
    display: block;
    font-size: 0.85em;
    color: #666;
}

.cr8-author-link-wrapper:hover .author-name {
    color: #0073aa;
}


/* Hovedbilde */
.cr8-post-thumbnail {
    margin-bottom: 2em;
}

.cr8-post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}


/* Layout for tekst og sidebar */
.cr8-content-sidebar-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

/* --- ENDRING 2: Justerer breddeforhold --- */
.cr8-entry-content {
    flex: 5; /* ENDRET: Gir innholdet 5 "deler" av plassen */
    min-width: 0;
    font-size:1.1rem;
    font-family:'inter';
}

.widget-area { /* Dette er sidebaren */
    flex: 2; /* ENDRET: Gir sidebaren 2 "deler" av plassen */
}

/* Mobil-layout (beholdes som den er) */
@media (max-width: 880px) {
    .cr8-content-sidebar-wrapper {
        flex-direction: column;
    }

    .widget-area {
        margin-top: 2em;
        border-top: 2px solid #f0f0f0;
        padding-top: 2em;
    }
}

/*--------------------------------------------------------------
# Relaterte Artikler Styling
--------------------------------------------------------------*/

.cr8-related-posts {
    margin-top: 4em; /* God avstand fra innholdet over */
    padding-top: 2em;
    border-top: 2px solid #f0f0f0; /* En pen skillelinje */
}

.related-posts-title {
    text-align: center;
    margin-bottom: 2em;
    font-size: 1.8em;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolonner på PC */
    gap: 30px; /* Avstand mellom kolonnene */
}

.related-post-item {
    display: block;
    text-decoration: none;
    color: #333;
    border-radius: 8px;
    overflow: hidden; /* Sørger for at bildet holder seg innenfor avrundede kanter */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.related-post-thumbnail img {
    width: 100%;
    height: 180px; /* Fast høyde for et uniformt utseende */
    object-fit: cover; /* Sørger for at bildet fyller rammen uten å strekkes */
    display: block;
}

.related-post-title {
    font-size: 1.1em;
    padding: 15px;
    margin: 0;
    line-height: 1.4;
    background-color: #fff;
}

/* Gjør det responsivt for mobil */
@media (max-width: 768px) {
    .related-posts-grid {
        grid-template-columns: 1fr; /* 1 kolonne på mobil */
    }
}

/*--------------------------------------------------------------
# CPT Arkivside Styling - Nytt, Mørkt Design
--------------------------------------------------------------*/

/* Generell wrapper for arkivsider */
.cr8-archive-wrapper {
    max-width: 1140px;
    margin: 2em auto;
    padding: 0 20px;
}

/* Selve rutenettet */
.cr8-post-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr; 
}

@media (min-width: 600px) {
    .cr8-post-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .cr8-post-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* Styling for hvert enkelt produkt-kort */
.cr8-archive-item {
    background-color: #0d1b3f; /* ENDRET: Samme mørkeblå som hero-seksjonen */
    color: #fff; /* ENDRET: Standard tekstfarge til hvit */
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.cr8-archive-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}

/* Bilde-seksjonen - ingen endring nødvendig */
.cr8-archive-item-thumbnail-link {
    display: block;
}

.cr8-archive-item-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Innholds-seksjonen (tekst) */
.cr8-archive-item-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.cr8-card-content-top {
    flex-grow: 1;
}

/* Kategori-merkelapp */
.cr8-card-category {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 15px;
    
    /* ENDRET: Inverterte farger for mørk bakgrunn */
    color: #0d1b3f; 
    background-color: #fff; 
}

/* Tittel */
.cr8-archive-item-content .entry-title {
    font-size: 1.3em;
    margin: 0 0 15px 0;
    line-height: 1.4;
}
.cr8-archive-item-content .entry-title a {
    text-decoration: none;
    color: #fff; /* ENDRET: Hvit tittel */
}

/* "Les mer"-lenke */
.cr8-card-content-bottom {
    margin-top: 20px;
}
.cr8-card-read-more {
    text-decoration: none;
    font-weight: 700;
    color: #fbbc05; /* ENDRET: Samme gylne farge som hero-knappen for gjenkjennelse */
}
.cr8-card-read-more:hover {
    text-decoration: underline;
}

/*--------------------------------------------------------------
# Egendefinert YouTube Widget Styling (Avatar-versjon)
--------------------------------------------------------------*/

/* Hoved-containeren for widgeten */
.cr8-youtube-widget.cr8-youtube-avatar-style {
    position: relative; /* Nødvendig for å posisjonere avataren */
    text-align: center;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 50px; /* Gir plass til avataren som stikker over toppen */
    margin-bottom: 1.5em;
}

/* Selve avataren */
.cr8-youtube-avatar-style img {
    width: 80px; /* Størrelsen på den runde avataren */
    height: 80px;
    border-radius: 50%; /* Gjør bildet helt rundt */
    border: 4px solid #fff; /* Hvit ramme rundt bildet */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    
    /* Nøkkelen til å sentrere avataren og løfte den opp */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); 
}

/* Innholdet under avataren */
.cr8-youtube-avatar-style .cr8-yt-widget-content {
    padding: 60px 20px 20px 20px; /* Mer padding i toppen for å gi plass til avataren */
}

.cr8-youtube-avatar-style .cr8-yt-widget-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4em;
}

/* Knappen (samme som før) */
.cr8-youtube-avatar-style .yt-subscribe-button {
    display: inline-block;
    background-color: #FF0000;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.cr8-youtube-avatar-style .yt-subscribe-button:hover {
    background-color: #cc0000;
}

/*--------------------------------------------------------------
# WooCommerce Shop / Arkivside Styling
--------------------------------------------------------------*/

/* Generell container for butikksiden */
.woocommerce-shop-page .cr8-shop-container {
    max-width: 1400px;
    margin: 2em auto;
    padding: 0 20px;
}

/* Kontroller over produktene (sortering og resultat-antall) */
.cr8-shop-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2em;
}

/* Stilrent produkt-rutenett */
.woocommerce ul.products {
    display: grid;
    /* Nøkkelen til et responsivt rutenett: Lager så mange kolonner som får plass,
       hvor hver kolonne er minimum 250px bred. */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

/* Fjerner standard styling fra listen */
.woocommerce ul.products li.product {
    width: 100% !important;
    float: none;
    margin: 0;
}

/* Styling for hvert individuelle produkt-kort */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
    text-decoration: none;
}

.woocommerce ul.products li.product {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
    padding: 1.5em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Produktbilde */
.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    margin: -1.5em -1.5em 1.5em -1.5em; /* Strekk bildet til kantene av kortet */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Produkttittel */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 1.2em;
    color: #333;
    padding: 0;
}

/* Pris */
.woocommerce ul.products li.product .price {
    color: #111;
    font-size: 1.1em;
    font-weight: 600;
    display: block;
    margin: 0.5em 0 1em 0;
}
.woocommerce ul.products li.product .price del {
    opacity: 0.6;
    font-weight: normal;
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

/* "Legg i handlekurv"-knapp */
.woocommerce ul.products li.product .button {
    background-color: #222;
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: 2px solid #222;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #fff;
    color: #222;
}

/* "Tilbud!"-merket */
.woocommerce ul.products li.product span.onsale {
    top: 15px;
    left: 15px;
    right: auto;
    border-radius: 4px;
    background-color: #c00;
}

/* Stil for hele nyhetsbrev-seksjonen */
.nyhetsbrev-boks {
    background-color: #f8f9fa; /* En lys, nøytral bakgrunnsfarge */
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    max-width: 500px; /* Begrenser bredden for bedre lesbarhet */
    margin: 40px auto; /* Sentrerer boksen på siden */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* En subtil skygge */
}

.nyhetsbrev-boks h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 24px;
    color: #333;
}

.nyhetsbrev-boks p {
    margin-top: 0;
    margin-bottom: 20px;
    color: #666;
    font-size: 16px;
}

/* Stil for selve skjemaet */
.form-gruppe {
    display: flex; /* Plasserer input og knapp på samme linje */
    width: 100%;
}

/* Stil for e-postfeltet */
.nyhetsbrev-epost {
    flex-grow: 1; /* Lar e-postfeltet fylle tilgjengelig plass */
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px; /* Avrundede hjørner kun på venstre side */
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none; /* Fjerner standard nettleser-outline */
}

.nyhetsbrev-epost:focus {
    border-color: #007bff; /* Fremhever feltet ved klikk */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* Stil for påmeldingsknappen */
.nyhetsbrev-knapp {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #007bff; /* En tydelig og innbydende farge */
    border: 1px solid #007bff;
    border-radius: 0 5px 5px 0; /* Avrundede hjørner kun på høyre side */
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap; /* Sørger for at teksten ikke brekker */
}

.nyhetsbrev-knapp:hover {
    background-color: #0056b3; /* Mørkere farge ved hover for interaktivitet */
}

/* Hjelpeklasse for å skjule elementer visuelt, men beholde dem for skjermlesere */
.visuelt-skjult {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Justering for mindre skjermer (mobil) */
@media (max-width: 480px) {
    .form-gruppe {
        flex-direction: column; /* Stabler elementene vertikalt */
    }

    .nyhetsbrev-epost {
        border-radius: 5px 5px 0 0; /* Justerer hjørner for vertikal layout */
        margin-bottom: 10px;
    }

    .nyhetsbrev-knapp {
        border-radius: 0 0 5px 5px; /* Justerer hjørner for vertikal layout */
        width: 100%;
    }
}

/*--------------------------------------------------------------
# Hero Seksjon Styling ([cr8_nyheter_hero])
--------------------------------------------------------------*/

.cr8-hero {
    display: grid;
    background-color: #0d1b3f; /* En mørk blåfarge, juster ved behov */
    color: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin: 2em 0; /* Avstand over og under seksjonen */
}

/* Standard for mobil (1 kolonne) */
.cr8-hero {
    grid-template-columns: 1fr;
}

.cr8-hero-image {
    grid-row: 1; /* Bildet først på mobil */
    min-height: 250px;
    background-size: cover;
    background-position: center;
}

.cr8-hero-content {
    grid-row: 2; /* Teksten under på mobil */
    padding: 30px;
}

/* Layout for PC (skjermer bredere enn 880px) */
@media (min-width: 880px) {
    .cr8-hero {
        grid-template-columns: 1fr 1fr; /* To like store kolonner */
        min-height: 450px;
        align-items: center;
    }
    
    .cr8-hero-image {
        grid-row: auto; /* Tilbakestiller rekkefølgen */
        height: 100%; /* Fyller hele høyden */
    }

    .cr8-hero-content {
        grid-row: auto;
        padding: 50px;
    }

    .cr8-hero-title {
        font-size: 2.5em; 
    }

    .cr8-hero-excerpt {
        font-size: 1.1em;
    }
}

/* Styling av innholdet i tekst-kolonnen */
.cr8-hero-category {
    display: inline-block;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.cr8-hero-title {
    font-size: 1.7em; /* Stor, kraftig tittel */
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.cr8-hero-title a:hover {
    color: #fff;
}

.cr8-hero-title a {
    color: #fff;
    text-decoration: none;
}

.cr8-hero-excerpt {
    font-size: 1em;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 30px;
}

/* Knapper */
.cr8-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.cr8-hero-button {
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s ease;
}

.cr8-hero-button.primary {
    background-color: #fbbc05; /* En gyllen/gul farge */
    color: #0d1b3f;
}
.cr8-hero-button.primary:hover {
    background-color: #fff;
}

.cr8-hero-button.secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}
.cr8-hero-button.secondary:hover {
    background-color: #fff;
    color: #0d1b3f;
}

/*--------------------------------------------------------------
# Egen farge for Rapport-hero seksjonen
--------------------------------------------------------------*/

.cr8-hero.cr8-hero-rapporter {
    background-color: #043686; /* En litt annen, profesjonell blåfarge */
}

/* Oppdaterer tekstfargen på knappen for å matche den nye bakgrunnen */
.cr8-hero.cr8-hero-rapporter .cr8-hero-button.primary {
    color: #2a4a7e;
}

/*--------------------------------------------------------------
# Optimalisering for Artikkelsider
--------------------------------------------------------------*/

/* Styling for det nye utdraget (excerpt) */
.cr8-post-excerpt {
    text-align: center;
    font-size: 1.2em;
    font-weight: 700; /* Bold font som du ønsket */
    line-height: 1.6;
    color: #444;
    max-width: 800px; /* Begrenser bredden for bedre lesbarhet */
    margin: 0 auto 2em auto; /* Sentrerer og gir luft under */
}

/* Sikrer konsistent bildestørrelse (hovedbilde) */
.cr8-post-thumbnail {
    margin-bottom: 2em;
}

.cr8-post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    
    /* Nøkkelen til lik størrelse: Setter et fast sideforhold (f.eks. 16:9) */
    aspect-ratio: 16 / 9;
    object-fit: cover; /* Sørger for at bildet fyller rammen uten å strekkes */
}

.cr8-post-caption {
    display: block;
    margin-top: 2em; /* Avstand fra bildet */
    text-align: center; /* Midtstiller teksten */
    font-size: 0.9em;
    line-height: 1.6;
    font-style: italic; /* Gjør teksten kursiv, vanlig for bildetekster */
    color: #595959; 
}

/* Justerer tittelstørrelsen på mobil */
@media (max-width: 768px) {
    .entry-title {
        font-size: 1.8em; /* Mindre skriftstørrelse på mobil */
        line-height: 1.3;
        /* font-weight: 700; er vanligvis allerede satt for H1, men dette sikrer det */
    }

    .cr8-post-excerpt {
        font-size: 1.1em;
    }
}

/*--------------------------------------------------------------
# Forfatterside (author.php) Styling
--------------------------------------------------------------*/

/* Styling for forfatter-headeren øverst */
.cr8-author-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 3em;
    background-color: #f7f7f7;
    padding: 30px;
    border-radius: 12px;
}

.cr8-author-header .author-avatar img {
    border-radius: 50%; /* Gjør profilbildet rundt */
}

.cr8-author-header .page-title {
    margin: 0 0 10px 0;
}

.cr8-author-header .author-bio {
    color: #555;
    line-height: 1.6;
}

/* Responsiv justering for forfatter-headeren */
@media (max-width: 600px) {
    .cr8-author-header {
        flex-direction: column;
        text-align: center;
    }
}


/* Ny merkelapp for post-type oppå bildet */
.cr8-archive-item .cr8-archive-item-thumbnail {
    position: relative; /* Nødvendig for å posisjonere merkelappen */
}

.cr8-card-post-type-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2; /* Sørger for at den ligger oppå bildet */
    
    background-color: rgba(13, 27, 63, 0.8); /* Mørk blå med gjennomsiktighet */
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/*--------------------------------------------------------------
# Arkivside Header Styling (Kategori, etc.)
--------------------------------------------------------------*/

.page-header {
    text-align: center;
    margin-bottom: 3em;
}

.page-header-kicker {
    display: block;
    font-size: 0.8em;
    font-weight: 700; /* Tykk skrift */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #555;
    margin-bottom: 0.5em;
}

.page-header .page-title {
    margin: 0;
}

.category-description {
    margin-top: 1em;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    color: #666;
}