body {
    background-image: url('/images/Backgrounds/HSI%20Background.jpg');
    background-size: cover;       /* dekker hele skjermen, beskjærer om nødvendig */
    background-position: center;  /* sentrert – kan endres til top, bottom osv. */
    background-repeat: no-repeat;
    background-attachment: fixed; /* bildet står stille når du scroller (fjern linjen for scroll med siden) */
}

/* Gjør hovedinnholdet semi-transparent så teksten blir lesbar mot bildet */
.container-component,
.card,
.mod-custom,
.com-content-article__body,
.item-page__item {
    background-color: rgba(255, 255, 255, 0.85);  /* hvit med 85% opacity – juster 0.85 til 0.7–0.95 etter smak */
    padding: 1.5rem;          /* litt ekstra luft rundt innholdet */
    border-radius: 8px;       /* avrundede hjørner – fjern hvis du ikke vil ha det */
}

/* Alternativ: Kun artikler og kort semi-transparent, meny/header beholdes ugjennomsiktig */
.container-header,
.container-topbar {
    background-color: rgba(255, 255, 255, 0.95) !important;  /* nesten ugjennomsiktig header/meny */
}

.container-header {
    background-color: transparent !important;
    background-image: none !important;   /* fjerner eventuell gradient/bilde */
    border-bottom: none !important;      /* fjerner eventuell kantlinje */
}

/* Valgfritt: Gjør teksten hvit/synlig mot mørkt bakgrunn under */
.container-header,
.container-header a,
.container-header .brand .site-title {
    color: #ffffff !important;           /* hvit tekst – endre etter behov */
}

/* Hvis du vil fjerne "CASSIOPEIA"-teksten helt via CSS */
.brand {
    display: none !important;
}


/* Mørk semi-transparent bakgrunn på hovedinnhold/artikler + hvit tekst */
.container-component,
.com-content-article,
.item-page__item,
.article-content,
.com-content-category-blog__articles .card,
.com-content-featured__articles .card,
.card,
.mod-custom,
.joomla-container .card-body {
    background-color: rgba(30, 30, 40, 0.75) !important;  /* mørk grå/sort med 75% opacity – juster 0.75 til 0.6–0.9 */
    color: #f0f0f0 !important;                            /* lys grå/hvit tekst */
    border: 1px solid rgba(100, 100, 120, 0.4) !important; /* valgfri subtil kant */
    border-radius: 8px;                                    /* avrundede hjørner */
}

/* Overskrifter i artikler – gjør dem hvite/lys */
h1, h2, h3, h4, h5, h6,
.article-header h1,
.item-page__title {
    color: #ffffff !important;
}

/* Lenker i artikler – lys blå/hvit for kontrast */
a,
.article-content a {
    color: #a0d0ff !important;  /* lys blå – endre til #ffffff for helt hvit */
}
a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Hvis du har et bakgrunnsbilde på body fra før – sørg for at det vises gjennom */
body {
    background-color: #0f0f15;  /* mørk fallback-farge hvis ingen bilde */
    /* Hvis du har bilde: behold url(...) som før */
}

/* Valgfritt: Gjør kort/moduler i sidebar også mørke (hvis ønskelig) */
aside .card,
.sidebar-right .card,
.sidebar-left .card {
    background-color: rgba(40, 40, 50, 0.8) !important;
    color: #e0e0e0 !important;
}

/* Valgfritt: Header/meny behold lys eller tilpass separat */
.container-header {
    background-color: rgba(20, 20, 30, 0.85) !important;  /* mørk header hvis du vil matche */
    color: #ffffff !important;
}

/* Din eksisterende mørke bakgrunn på artikler – behold eller juster */
.container-component,
.com-content-article,
.item-page__item,
.article-content,
.com-content-category-blog__articles .card,
.com-content-featured__articles .card,
.card,
.article__info-block {
    background-color: rgba(30, 30, 40, 0.75) !important;
    color: #f0f0f0 !important;
}

/* Metadata / article info – gjør teksten hvit/lys */
.article-info,
.article__info,
.article-info-block,
.article-info dd,
.article-info dt,
.article-info-term,
.article-info-text,
.article-info-links,
dd.article-info-term-category a,
dd.article-info-term-created a,
dd.article-info-term-published a,
dd.article-info-term-modified a,
dd.article-info-term-hits,
dd.article-info-term-author a {
    color: #e0e0e0 !important;          /* lys grå/hvit – endre til #ffffff for ren hvit */
}

/* Spesielt for lenker i metadata (f.eks. kategori eller forfatter) */
.article-info a,
.article-info dd a {
    color: #b0d0ff !important;          /* lys blå for lenker – eller #ffffff for hvit */
}
.article-info a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Overskrifter og annen tekst i metadata hvis nødvendig */
.article-info strong,
.article-info dt {
    color: #ffffff !important;
}

/* Hvis du bruker icons (f.eks. kalender-ikon for publisert) – gjør dem også lyse */
.article-info .icon {
    color: #cccccc !important;          /* lys grå ikon */
}


/* Forenklet og utvidet for både blogg og enkeltartikkel i Joomla 6 / Cassiopeia */

/* Generell mørk bakgrunn + lys tekst for alle artikkel-områder */
.container-component,
.item-page__item,
.com-content-article,
.article-content,
.article__body,
.item__content,
.com-content-article__body,
.com-content-article .card,
.com-content-article .card-body {
    background-color: rgba(30, 30, 40, 0.75) !important;  /* samme mørke som før – juster opacity */
    color: #f0f0f0 !important;                            /* lys tekst */
}

/* Overskrifter i enkeltartikler */
.item-page__title,
.article-header h1,
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}

/* Metadata i enkeltartikler (kategori, skrevet av, publisert, etc.) */
.article-info,
.article__info,
.article-info-block,
.article-info dd,
.article-info dt,
.article-info-term,
.article-info-text,
.article-info-links,
dd.article-info-term-category,
dd.article-info-term-created,
dd.article-info-term-published,
dd.article-info-term-modified,
dd.article-info-term-hits,
dd.article-info-term-author,
.article-info a {
    color: #e0e0e0 !important;   /* lys grå/hvit – bruk #ffffff for ren hvit */
}

/* Lenker i metadata og artikkel-tekst */
.article-content a,
.article-info a,
.item-page__item a {
    color: #a0d0ff !important;   /* lys blå for kontrast */
}
.article-content a:hover,
.article-info a:hover {
    color: #ffffff !important;
}

/* Tags, read more, etc. i enkeltvisning */
.tags a,
.readmore a,
.btn.readmore {
    color: #b0d0ff !important;
    background-color: transparent !important;
}



/* Breadcrumb (You are here: Home/Hjem) – gjør teksten hvit/lys */
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: #ffffff !important;          /* ren hvit tekst – eller #e0e0e0 for lys grå hvis ren hvit blir for skarp */
}

.breadcrumb a:hover {
    color: #a0d0ff !important;          /* lys blå hover-effekt – eller behold #ffffff */
    text-decoration: underline;
}

/* Hvis bakgrunnen på breadcrumb er hvit/lys – gjør den mørk/semi-transparent for bedre match */
.breadcrumb {
    background-color: rgba(30, 30, 40, 0.75) !important;  /* samme mørke som artiklene dine */
    border-radius: 6px !important;
    padding: 0.5rem 1rem !important;
    margin-bottom: 1rem !important;
}

/* Fjern separator hvis den er for mørk/lys (pil eller /) */
.breadcrumb-item + .breadcrumb-item::before {
    color: #cccccc !important;  /* lys grå separator */
}




/* Flytt hovedinnholdet (artiklene) litt ned på alle skjermstørrelser */
.grid-child.container-component {
    margin-top: 1.5rem !important;   /* 1.5rem = ca 24px – juster etter smak */
    padding-top: 0.5rem !important;  /* valgfritt ekstra luft øverst i containeren */
}

/* Hvis du vil ha effekten kun på desktop (større skjermer) */
@media (min-width: 992px) {
    .grid-child.container-component {
        margin-top: 1rem !important;   /* litt mer på store skjermer hvis ønskelig */
    }
}

/* Alternativ: Hvis det fortsatt overlapper – tving ekstra plass under header */
.container-header + .grid-child.container-component {
    margin-top: 2rem !important;
}




/* Kategori-liste (table-visning) – mørk bakgrunn og hvit tekst */
.com-content-category__table,
.com-content-category__table.table,
.table.table-bordered.table-striped.table-hover.category {
    background-color: rgba(30, 30, 40, 0.75) !important;
    color: #f0f0f0 !important;
    border: 1px solid rgba(80, 80, 100, 0.4) !important;
    border-collapse: separate !important;
    border-spacing: 0 0.5rem !important; /* litt luft mellom rader */
}

/* Tabell-celler og rader */
.com-content-category__table th,
.com-content-category__table td,
.table th,
.table td,
.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(30, 30, 40, 0.75) !important;
    color: #f0f0f0 !important;
    border: 1px solid rgba(80, 80, 100, 0.3) !important;
}

/* Overskrifter i tabell (kolonne-overskrifter) */
.com-content-category__table th,
.table th {
    background-color: rgba(40, 40, 55, 0.9) !important; /* litt mørkere header-rad */
    color: #ffffff !important;
    font-weight: bold;
}

/* Lenker i tabellen (artikkeltitler osv.) */
.com-content-category__table a,
.table a {
    color: #a0d0ff !important;
}
.com-content-category__table a:hover,
.table a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Fjern eventuell lys hover-effekt fra Bootstrap */
.table-hover tbody tr:hover {
    background-color: rgba(50, 50, 70, 0.6) !important;
}

/* Hele kategori-containeren – ekstra mørk bakgrunn hvis ønskelig */
.com-content-category,
.grid-child.container-component:has(.com-content-category) {
    background-color: rgba(20, 20, 30, 0.85) !important;
    padding: 1.5rem !important;
    border-radius: 8px !important;
}




/* Fjern bold (fet skrift) i kategori-listvisning (tabell) og ha samme font som resten av nettsiden */
.com-content-category__table,
.table.category,
.table.com-content-category__table,
.category.table,
.com-content-category__table th,
.com-content-category__table td,
.table th,
.table td,
tr.cat-list-row0 td,
tr.cat-list-row1 td,
.list-title td,
.list-title a,
.list-author td,
.list-hits td,
.list-created td,
.list-published td,
.com-content-category__table a,
.table a {
    font-weight: normal !important;     /* eller 400 hvis du vil være ekstra presis */
    font-weight: 400 !important;        /* normal / ikke fet */
}

/* Spesielt for overskriftsrad og artikkeltitler (som ofte blir fet av default) */
.com-content-category__table thead th,
.table thead th,
.list-title a,
.com-content-category__table .list-title td a {
    font-weight: normal !important;
    font-weight: 400 !important;
}

/* Hvis du vil ha en litt fetere overskrift likevel (valgfritt) */
.com-content-category__table thead th {
    font-weight: 500 !important;        /* medium vekt – fjern eller sett til 400 hvis du vil helt normal */
}






/* Pagination-knapper på blogg-forside – mørk bakgrunn, lys tekst */
.pagination {
    background-color: rgba(30, 30, 40, 0.75) !important;
    border-radius: 6px !important;
    padding: 0.5rem !important;
    margin: 2rem 0 !important;
}

.pagination .page-item .page-link {
    background-color: rgba(40, 40, 50, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(80, 80, 100, 0.5) !important;
    border-radius: 4px !important;
    margin: 0 0.25rem !important;
}

.pagination .page-item.active .page-link {
    background-color: rgba(60, 60, 80, 1) !important;
    color: #ffffff !important;
    border-color: rgba(100, 100, 120, 0.7) !important;
    font-weight: bold;
}

.pagination .page-link:hover {
    background-color: rgba(60, 60, 80, 0.9) !important;
    color: #ffffff !important;
    border-color: rgba(100, 100, 120, 0.8) !important;
}





/* Skjul mange sidetall på mobil – vis kun første, noen i midten, siste */
@media (max-width: 767px) {
    /* Vis side 1, 2, aktiv, nest siste, siste – resten skjules */
    .pagination .page-item:not(.active):not(:first-child):not(:nth-child(2)):not(:nth-last-child(2)):not(:last-child) {
        display: none !important;
    }

    /* Vis "..." for de skjulte tallene (hvis Joomla legger til disabled-li) */
    .pagination .page-item.disabled {
        display: inline-block !important;
    }

    /* Gjør pagineringen mer kompakt */
    .pagination {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;  /* tillater scrolling hvis det fortsatt blir bredt */
        justify-content: flex-start !important;
    }

    .pagination .page-link {
        min-width: 38px !important;
        padding: 0.4rem 0.6rem !important;
    }
}



/* Flytt counter-teksten (Side X av Y) rett til høyre for sidetallene */
.pagination__wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;  /* avstand mellom sidetall og counter */
}

/* Sidetallene og piler i midten */
.pagination__wrapper .pagination {
    margin: 0 !important;
    order: 1 !important;
}

/* Counter-teksten – flyttes rett etter sidetallene */
.pagination__wrapper .counter,
.pagination__wrapper p.counter,
.pagination__wrapper .pagination + p.counter {
    float: none !important;
    order: 2 !important;
    margin: 0 !important;
    padding-left: 1rem !important;   /* litt luft til venstre for counter */
    font-size: 0.95rem !important;
    color: #f0f0f0 !important;
}

/* På mobil – sentrer eller juster om nødvendig */
@media (max-width: 767px) {
    .pagination__wrapper {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .pagination__wrapper .counter {
        text-align: center !important;
        padding-left: 0 !important;
    }
}




/* Logout-melding – maksimal override for å tvinge mørk bakgrunn */
#system-message,
#system-message-container,
.system-message,
.system-message-container,
#system-message-container .alert,
#system-message-container .alert-success,
.system-message-container .alert-success,
.alert-success,
.alert-dismissible,
[role="alert"],
[aria-live="polite"] .alert-success,
.alert-success[role="alert"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
    border-radius: 6px !important;
    padding: 0.6rem 1rem !important;
    margin: 0.5rem 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}

/* Tving alle barn-elementer til å følge fargen */
#system-message-container .alert-success *,
.system-message-container .alert-success *,
.alert-success * {
    background-color: transparent !important;
    color: #e2e8f0 !important;
}

/* Ikon og sterk tekst */
#system-message-container .alert-success .bi-check-circle-fill,
.alert-success .alert-icon,
.alert-success svg,
.alert-success strong {
    color: #60a5fa !important;
}

/* Lukkeknapp */
#system-message-container .alert-success .btn-close,
.alert-success .btn-close,
.alert-success button.close {
    color: #cbd5e1 !important;
    background: transparent !important;
    opacity: 0.8 !important;
    font-size: 1.2rem !important;
    right: 0.6rem !important;
    top: 0.4rem !important;
}

#system-message-container .alert-success .btn-close:hover,
.alert-success .btn-close:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Fjern alle mulige pseudo-elementer eller ekstra bakgrunner */
#system-message-container .alert-success::before,
#system-message-container .alert-success::after,
.alert-success::before,
.alert-success::after {
    display: none !important;
    content: none !important;
}





/* Mørk tekst i input-felt, labels og bokser i redigeringsmodus (frontend og publisering) */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
textarea,
select,
label,
.form-control,
.form-control-plaintext,
.form-group label,
.control-label,
legend,
fieldset legend,
.jform legend,
.adminform label,
#jform_title-lbl,
#jform_alias-lbl,
#jform_catid-lbl,
#jform_state-lbl,
#jform_featured-lbl,
#jform_access-lbl,
#jform_language-lbl,
#jform_tags-lbl,
#jform_created_by_alias-lbl,
#jform_publish_up-lbl,
#jform_publish_down-lbl,
#jform_metakey-lbl,
#jform_metadesc-lbl,
.com-content-form__editor label,
.com-content-form__editor input,
.com-content-form__editor textarea,
.com-content-form__editor select {
    color: #000000 !important;          /* svart tekst */
    background-color: #ffffff !important; /* lys bakgrunn for feltene */
}

/* Mørkere tekst på labels og ledetekster */
label,
.control-label,
.jform label,
.adminform label,
legend,
fieldset legend {
    color: #111111 !important;
    font-weight: bold !important;
}

/* Input-felt med fokus */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    color: #000000 !important;
    background-color: #f8f9fa !important; /* lys grå ved fokus */
    border-color: #80bdff !important;
}

/* Spesielt for publiseringsfanen */
#publishing .control-group label,
#publishing .control-group input,
#publishing .control-group textarea,
#publishing .control-group select {
    color: #000000 !important;
}




/* Mørk tekst i frontend artikkel-redigering / ny artikkel-form */
/* Bruker-dropdown (mm-collapse.mm-show) – mørk bakgrunn og lys tekst */
.mm-collapse.mm-show {
    background-color: #1e293b !important;      /* mørk bakgrunn */
    color: #e2e8f0 !important;                 /* lys tekst */
}

/* Lenker og elementer inni den åpne menyen */
.mm-collapse.mm-show a,
.mm-collapse.mm-show li a,
.mm-collapse.mm-show .metismenu-item a {
    color: #e2e8f0 !important;
    background: transparent !important;
}

.mm-collapse.mm-show a:hover,
.mm-collapse.mm-show li a:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* Skillelinjer inni menyen */
.mm-collapse.mm-show .mm-divider,
.mm-collapse.mm-show .dropdown-divider {
    border-top: 1px solid #444455 !important;
}

/* Hvis det er underpunkter eller paneler */
.mm-collapse.mm-show .mm-panel,
.mm-collapse.mm-show .mm-listview {
    background-color: #1e293b !important;
}





/* Mørke input-felt med hvit tekst i frontend login-skjema – høy spesifisitet */
/* Ren mørk login-form i frontend – mørke felter med hvit tekst */
.com-users-login .form-control,
.com-users-login input[type="text"],
.com-users-login input[type="password"],
.com-users-login .input-group,
.com-users-login .input-group-text,
.com-users-login .form-check-input {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #444455 !important;
    border-radius: 4px !important;
}

/* Fokus i feltene – litt lysere mørk for å vise aktivt felt */
.com-users-login .form-control:focus,
.com-users-login input:focus {
    background-color: #252525 !important;
    color: #ffffff !important;
    border-color: #606070 !important;
    box-shadow: 0 0 0 0.25rem rgba(96, 96, 112, 0.4) !important;
}

/* Labels over feltene – mørk tekst (svart) på lys bakgrunn utenfor */
.com-users-login label,
.com-users-login .control-label,
.com-users-login .form-group label {
    color: #000000 !important;
    font-weight: 500 !important;
}

/* Glemt-lenker nederst – mørk tekst */
.com-users-login .form-text a,
.com-users-login .forgot-password a,
.com-users-login .forgot-username a {
    color: #000000 !important;
    background: transparent !important;
}

.com-users-login .form-text a:hover,
.com-users-login .forgot-password a:hover,
.com-users-login .forgot-username a:hover {
    color: #111111 !important;
    text-decoration: underline !important;
}

/* Husk meg og checkbox – mørk bakgrunn på checkbox-boksen */
.com-users-login .form-check-input {
    background-color: #1e1e1e !important;
    border-color: #444455 !important;
}

/* Logg inn-knapp – mørk med hvit tekst */
.com-users-login .btn-primary,
.com-users-login button[type="submit"] {
    background-color: #2a2a40 !important;
    color: #ffffff !important;
    border-color: #444455 !important;
}

.com-users-login .btn-primary:hover {
    background-color: #3a3a60 !important;
    color: #ffffff !important;
}


/* Lys tekst på labels og "Husk meg" i login-skjemaet – mørk bakgrunn rundt */
.com-users-login label,
.com-users-login .control-label,
.com-users-login .form-group label,
.com-users-login .form-check-label,
.com-users-login .form-text,
.com-users-login legend {
    color: #e0e0e0 !important;   /* lys grå/hvit tekst */
    background-color: #1e293b !important;  /* mørk bakgrunn rundt label */
    padding: 0.25rem 0.5rem !important;   /* litt luft rundt teksten */
    border-radius: 4px !important;        /* avrundet for bedre utseende */
    margin-bottom: 0.25rem !important;    /* mindre avstand til feltet */
}

/* "Husk meg"-checkbox og tekst – lys tekst */
.com-users-login .form-check-label {
    color: #e0e0e0 !important;
}

/* Hvis labels fortsatt har lys bakgrunn utenfor – tving hele form-gruppen mørk */
.com-users-login .form-group,
.com-users-login .form-check {
    background-color: #1e293b !important;
    padding: 0.5rem !important;
    border-radius: 4px !important;
    margin-bottom: 0.75rem !important;
}

/* Glemt-lenker nederst – lys tekst på mørk bakgrunn */
.com-users-login .form-text a,
.com-users-login .forgot-password a,
.com-users-login .forgot-username a {
    color: #e0e0e0 !important;
    background: transparent !important;
}

.com-users-login .form-text a:hover,
.com-users-login .forgot-password a:hover,
.com-users-login .forgot-username a:hover {
    color: #ffffff !important;
}


/* Mørke .list-group-item i login-skjemaet – hvit tekst */
.com-users-login .list-group-item,
.com-users-login .list-group-item-action,
.com-users-login .list-group-item a,
.com-users-login .form-text .list-group-item,
.com-users-login .forgot-password .list-group-item,
.com-users-login .forgot-username .list-group-item {
    background-color: #1e293b !important;      /* mørk bakgrunn */
    color: #f0f0f0 !important;                 /* hvit/lys tekst */
    border: 1px solid #334155 !important;
    border-radius: 4px !important;
    padding: 0.5rem 1rem !important;
    margin-bottom: 0.5rem !important;
}

/* Lenker inni .list-group-item – hvit tekst */
.com-users-login .list-group-item a,
.com-users-login .forgot-password a,
.com-users-login .forgot-username a {
    color: #f0f0f0 !important;
    background: transparent !important;
}

.com-users-login .list-group-item a:hover,
.com-users-login .forgot-password a:hover,
.com-users-login .forgot-username a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
    background-color: #334155 !important;
}

/* Hvis det er ekstra wrapper rundt glemt-lenker */
.com-users-login .form-text,
.com-users-login .form-text p {
    background-color: #1e293b !important;
    color: #f0f0f0 !important;
    padding: 0.5rem !important;
    border-radius: 4px !important;
}




/* Kun login og profil-felt – mørk bakgrunn med hvit tekst */
.com-users-login .form-control,
.com-users-login input,
.com-users-profile .form-control,
.com-users-profile input,
.com-content-form .form-control,
.com-content-form input {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #444455 !important;
}

/* Labels – lys tekst */
.com-users-login label,
.com-users-profile label,
.com-content-form label {
    color: #e0e0e0 !important;
}