@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* style.css for Beredskap i Norge - News (Dark Theme) */

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.news-navbar {
    background-color: #0a0a0a; /* Matcher norge.live var(--darker) */
    padding: 1rem 1rem; /* Matcher norge.live (1rem top/bottom, beholdt 1rem left/right for innhold) */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Matcher norge.live */
    /* position: fixed; FJERNES for å rulle med siden */
    /* top: 0; FJERNES */
    /* left: 0; FJERNES */
    /* width: 100%; FJERNES (tar default bredde) eller sett til auto/container-avhengig */
    /* z-index: 1030; FJERNES */
    display: flex;
    justify-content: center; /* Midtstiller barna horisontalt */
    align-items: center;    /* Midtstiller barna vertikalt */
    gap: 20px; /* Legger til litt mellomrom mellom tittel og knapp */
    /* Vurder å legge til margin-bottom hvis navbaren nå er for tett på innholdet under */
    /* margin-bottom: 1rem; */ 
}

.news-navbar .navbar-brand-title {
    color: #ffffff;
    font-size: 1.5rem; /* Juster etter ønske */
    font-weight: bold;
    margin: 0; /* Fjerner standard margin fra h1 */
}

body {
    /* padding-top: 75px; FJERNES da navbar ikke lenger er fixed */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Matcher norge.live */
    background-color: #121212; /* Matcher norge.live var(--dark) */
    color: #e0e0e0; /* Matcher norge.live var(--text) */
    line-height: 1.6;
    overflow-x: hidden; /* Fra norge.live */
}

/* Styling for nav-links i .news-navbar for å matche norge.live */
.news-navbar .nav-link {
    color: #e0e0e0; /* var(--text) */
    font-weight: 500;
    padding: 0.5rem 1rem; /* Fra norge.live */
    margin: 0 0.2rem; /* Fra norge.live */
    border-radius: 4px; /* Fra norge.live */
    transition: all 0.3s ease; /* Fra norge.live */
}

.news-navbar .nav-link:hover,
.news-navbar .nav-link.active {
    color: #4CAF50; /* var(--primary) */
    background-color: rgba(76, 175, 80, 0.1); /* Fra norge.live */
}

.news-navbar .navbar-toggler {
    color: white; /* Sikrer synlighet for hamburger-ikonet */
    border: none;
}

.container {
    max-width: 960px;
}

.topic-header {
    /* Bootstrap dark theme vil style dette, men vi kan tilpasse */
    /* background-color: #1f1f1f; /* Litt lysere mørk enn body */
    color: #ffffff; /* Sikrer hvit tekst hvis ikke satt av BS dark */
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    border-radius: 0.25rem; /* Kan fjernes for skarpere kanter */
}

.topic-header h1 {
    font-weight: 300;
}

.card {
    /* Bootstrap dark theme setter .card bakgrunn, border, color. Vi finjusterer. */
    /* background-color: #1e1e1e; /* Mørkegrå for kort, litt lysere enn #121212 body */
    border: 1px solid #333; /* Subtil mørk kant */
    box-shadow: none; /* Fjerner skygge for et flatere design */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin-bottom: 1.5rem; /* Legg til litt mellomrom mellom kortene */
}

.card:hover {
    transform: translateY(-3px);
    /* box-shadow: 0 0 15px rgba(88, 166, 255, 0.2); /* Subtil lys blå glød på hover? */
}

.card-title {
    color: #ffffff; /* Hvit tekst for god kontrast */
    background-color: #343a40; /* Standard mørk grå bakgrunn (Bootstrap .bg-dark) */
    text-align: center;
    font-size: 1.65rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem; /* Vertikal og horisontal padding. Juster 1.5rem etter behov. */
    
    /* Strekker bakgrunnen horisontalt for å fylle card-body bredden */
    margin-left: -1.5rem;  /* Matcher .card-body padding-left */
    margin-right: -1.5rem; /* Matcher .card-body padding-right */
    
    /* Justerer toppmargen for å fjerne mellomrom over tittelen inni card-body */
    /* Dette trekker tittelen opp slik at dens bakgrunn starter øverst i card-body's padding-område */
    margin-top: -1.5rem; 
    
    margin-bottom: 1rem; /* Avstand til innholdet under */
}

.card-body {
    padding: 1.5rem;
}

.card-img-top {
    border-top-left-radius: calc(0.25rem - 1px); /* Juster for border */
    border-top-right-radius: calc(0.25rem - 1px);
    max-height: 300px;
    object-fit: cover;
}

.article-metadata {
    font-size: 0.9em;
    background-color: #2a2a2a !important; /* Mørk bakgrunn for metadata */
    color: #ccc; /* Lysere tekst for metadata */
    border-top: 1px solid #333;
}

.article-metadata h6 {
    color: #58a6ff; /* Samme lys blå som card-title */
    margin-bottom: 0.5rem;
}

.article-metadata ul {
    padding-left: 1.2rem; /* Litt mindre innrykk for lister i metadata */
}

.article-metadata a {
    color: #79c0ff; /* Enda lysere blå for lenker i metadata */
}

.article-metadata a:hover {
    color: #9cd1ff;
}

.footer {
    border-top: 1px solid #333;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 0.9em;
    /* Tekstfarge settes av Bootstrap dark theme for body */
}

.btn-primary {
    /* Bruk Bootstrap standard blå som er designet for mørk modus også */
    background-color: #0d6efd;
    border-color: #0d6efd;
    /* Tekstfarge på knapp settes av Bootstrap */
}

.btn-primary:hover {
    background-color: #0b5ed7; /* Mørkere blå på hover */
    border-color: #0a58ca;
}

/* Responsivitet for mindre skjermer */
@media (max-width: 768px) {
    .topic-header {
        padding: 1.5rem 0.5rem;
    }
    .card-body {
        padding: 1rem;
    }
}

.logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem; /* Juster denne for generell størrelse */
    font-weight: 700;  /* Bold - Gjelder både 'Norge' og 'Live' */
    color: #ffffff;
    display: inline-block;
    vertical-align: middle; /* Eller 'baseline' for nøyaktig tekstjustering */
    letter-spacing: 0.5px; /* Juster etter behov for 'Norge' */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1; /* For konsistent høyde */
}

.logo-dot {
    font-family: 'Outfit', sans-serif; /* Konsistent font */
    color: #3cb371; /* Grønnfarge */
    font-weight: 900; /* Tykkeste vekt for punktumet */
    font-size: 1em; /* Relativt til .logo-text. Kan justeres. */
    display: inline-block;
    vertical-align: middle; /* Matcher .logo-text */
    line-height: 1;
    margin: 0 -0.05em; /* Finjuster spacing rundt punktum */
}