@charset "UTF-8";

/* ============================================
   NORWAY HERITAGE — DESIGN TOKENS
   Videreført fra opprinnelig design (etablert ~2003)
   ============================================ */

:root {
    /* Kjernepalett — fra opprinnelig nettsted */
    --color-parchment: #FFEFCF; /* Sidebakgrunn, kort */
    --color-mustard: #F5DD94; /* Toppmeny */
    --color-maroon: #800000; /* Overskrifter, knapper, hover */
    --color-steel-blue: #006699; /* Datoer, sekundære lenker */
    --color-olive: #4a4a4a; /* Innledningstekst på oversiktssidene (merknader bruker --color-note fra 26. oktober 2026) */
    --color-olive-border: #bbbb88; /* Strektynne kantlinjer */
    --color-ink: #000000; /* Brødtekst */
    --color-note: #333333; /* Små merknader og hjelpetekster (26. oktober 2026, før grå #666–#888) */
    /* Avledede / støttefarger */
    --color-maroon-hover-bg: #FFEFCF;
    --color-menu-hover: #ffffff; /* Toppmeny hover: hvit (26. oktober 2026, før #e7c282; maroon-tekst 10,95:1) */
    --color-table-header: #F5DD94; /* Erstatter generisk grått (#ddd) */
    --color-table-row: #FFFBF0;
    --color-row-alt: #E5E5E5;
    --color-border-default: #000;
    --color-border-light: #ccc;
    /* Typografi */
    --font-body: Arial, Helvetica, sans-serif;
    --font-condensed: "Roboto Condensed", Arial, sans-serif; /* Erstatter Arial Narrow */
    --font-mono: "JetBrains Mono", "Courier New", monospace; /* Ny — kun tekniske data */
    /* Spacing / layout */
    --radius-default: 5px;
    --container-max: 1200px;
}

/* ============================================
   RESET
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   BASISTYPOGRAFI
   ============================================ */
body {
    font-family: var(--font-body);
    background-color: var(--color-parchment);
    color: var(--color-ink);
    line-height: 1.6;
    padding: 20px;
    /* Mindre luft over logoen, likt på alle sider (6. oktober 2026): 12 px fra toppen til logoen
       (før 30 px = denne paddingen 20 px + headerens padding-top 10 px). */
    padding-top: 12px;
}

h1 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-ink);
    margin-bottom: 0.6em;
}

h2 {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-maroon);
    margin-bottom: 0.5em;
}

h3 {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-ink);
    margin-bottom: 10px;
}

p {
    margin-bottom: 12px;
    line-height: 1.6;
}

blockquote {
    margin: 12px 0;
    padding: 4px 16px;
    border-left: 4px solid var(--color-maroon);
    font-style: italic;
    color: var(--color-ink);
}

ol, ul.indented-list {
    margin-left: 40px;
}

a:link {
    font-weight: bold;
    color: #0000EE;
    text-decoration: underline;
}

a:visited {
    font-weight: bold;
    color: #551A8B;
    text-decoration: underline;
}

a:hover, a:active {
    color: var(--color-maroon);
    text-decoration: underline;
    background: var(--color-maroon-hover-bg);
}

/* RTE-innhold (.rte-content — bodyText/pageContent-feltene) bruker
   samme lenkefarge som resten av siten (se global regel over), men med
   normal fontvekt i stedet for fet — skiller redaktørens løpende
   brødtekst-lenker visuelt fra navigasjons-/kryssreferanselenker. */
.rte-content a:link {
    color: #0000EE;
    font-weight: normal;
}

.rte-content a:visited {
    color: #551A8B;
    font-weight: normal;
}

.rte-content li p {
    margin-bottom: 0;
}

/* Liten, kondensert overskriftsstil (datoer/etiketter) — erstatter Arial Narrow */
.label-condensed {
    font-family: var(--font-condensed);
    font-size: 0.9rem;
    color: var(--color-ink);
}

.date-label {
    font-size: 0.85rem;
    color: var(--color-steel-blue);
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
    width: 90%;
    max-width: var(--container-max);
    margin: 0 auto;
}

.top-menu + .container {
    margin-top: 24px;
}

.header {
    background-color: var(--color-parchment);
    text-align: center;
    padding: 0 0 10px;
}

    .header .logo {
        width: 100%;
        max-width: 732px;
        height: auto;
        display: block;
        margin: 0;
    }

    /* Forsidens H1 mellom logo og meny (6. oktober 2026) - settes via ViewData["HeaderH1"] i
       _layout.cshtml, bare på forsiden. Logo -> H1 6 px, H1 -> meny 10 px (headerens padding);
       linjehøyde 1.2 fjerner den usynlige luften over/under bokstavene (global 1.6). */
    .header h1 {
        margin: 6px 0 0;
        line-height: 1.2;
        color: var(--color-maroon);
        font-family: var(--font-body);
    }

    /* Søkeikon i toppen (7. oktober 2026): lenke til /search/ på høyde med logoen, absolutt
       posisjonert i en rad rundt logolenken, så logo og meny står nøyaktig som før. Over 910 px står
       ikonet innenfor innholdsbredden (1200 px), sentrert på logoen; smalere fyller logoen bredden, og
       ikonet flyttes ut i høyre marg. Trykkflate 40x40 px. Fargen settes også for :link/:visited - den
       globale a:link-regelen vinner ellers (spesifisitet, se CLAUDE.md). */
    .header-logo-row {
        position: relative;
    }

    .header-search,
    .header-search:link,
    .header-search:visited {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-maroon);
        border-radius: 50%;
        text-decoration: none;
    }

        .header-search:hover,
        .header-search:focus-visible {
            background-color: var(--color-mustard);
            color: var(--color-maroon);
        }

@media (max-width: 910px) {
    /* Ut i høyre marg: (100vw - containerbredde) / 2 er avstanden fra containerens høyre kant til
       vinduskanten; 2 px innenfor, så det aldri blir horisontal rulling. */
    .header-search,
    .header-search:link,
    .header-search:visited {
        right: calc((100vw - 100%) / -2 + 2px);
    }
}

/* Toppmeny */
.top-menu {
    background-color: var(--color-mustard);
    border: 1px solid var(--color-border-default);
    padding: 10px 0;
    /* Samme bredde og hjørner som innholdsboksene (6. oktober 2026): bredde/maks som .container,
       avrundet som .box. Litt mindre luft i ul (og på mobil i knappene, bare horisontalt) holder
       radbrytingen nøyaktig som før - målt ved 360-1440 px. */
    width: 90%;
    max-width: var(--container-max);
    margin: 0 auto;
    border-radius: var(--radius-default);
}

    .top-menu ul {
        list-style: none;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 6px;
        flex-direction: row;
    }

    /* Menypunkter som knapper (2. oktober 2026; dempet 7. oktober 2026) - parchment-flate per
       knapp med maroon tekst (9,65:1), hover --color-menu-hover (hvit, 10,95:1), aktiv seksjon maroon
       med hvit tekst (10,95:1, .is-active + aria-current, satt i _layout.cshtml). :visited og
       :hover overstyres eksplisitt, ellers vinner de globale a:visited (lilla, understreket)
       og a:hover (parchment-bakgrunn). Fortsatt ekte <a href> med synlig tekst (SEO).
       white-space:nowrap + flex-wrap: hele knapper brytes til ny rad, aldri teksten inni.
       Ramme og mindre knapper (7. oktober 2026): 1 px svart ramme tegnet innenfor knappen (inset
       box-shadow, gjør ikke knappen større); aktiv knapp har ramme i fyllfargen. 0.9rem skrift,
       linjehøyde 1.35 og mindre luft: 27 px høye knapper på desktop, 33 px på mobil (se 768px-regelen). */
    .top-menu a,
    .top-menu a:visited {
        display: inline-block;
        background: var(--color-parchment);
        color: var(--color-maroon);
        padding: 4px 10px;
        border-radius: 6px;
        box-shadow: inset 0 0 0 1px var(--color-border-default);
        text-decoration: none;
        font-weight: bold;
        font-size: 0.9rem;
        line-height: 1.35;
        white-space: nowrap;
    }

        .top-menu a:hover,
        .top-menu a:active {
            background: var(--color-menu-hover);
            color: var(--color-maroon);
            text-decoration: none;
        }

        .top-menu a.is-active,
        .top-menu a.is-active:visited,
        .top-menu a.is-active:hover {
            background: var(--color-maroon);
            color: #fff;
            box-shadow: inset 0 0 0 1px var(--color-maroon);
        }

        .top-menu a:focus-visible {
            outline: 2px solid var(--color-ink);
            outline-offset: 2px;
        }

/* Jevn fordeling når alle sju knappene får plass på én rad (R2: fra 1106 px uten rullefelt;
   grensen har margin for rullefelt og skriftforskjeller). Under grensen sentrert som før. */
@media (min-width: 1140px) {
    .top-menu ul {
        justify-content: space-evenly;
    }
}

/* Hovedlayout — sidebar */
.main-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.main-column {
    width: 80%;
}

.side-column {
    width: 20%;
}

/* ============================================
   KORT / BOKSER
   ============================================ */
.box,
.main-column .highlight,
.main-column .news {
    background: var(--color-parchment);
    border: 1px solid var(--color-border-default);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: var(--radius-default);
}

    .box h2,
    .main-column .highlight h2,
    .main-column .news h2 {
        font-size: 1.2rem;
        color: var(--color-maroon);
        margin-bottom: 10px;
    }

    .box ul {
        list-style: disc;
        margin-left: 20px;
    }

        .box ul li {
            margin-bottom: 5px;
        }

/* Lister i redigert innhold (.rte-content), 26. oktober 2026: tettere enn vanlig tekst og tydelig innrykk, likt for
   kulepunkt- og nummererte lister. Tiptap lagrer hvert punkt som <li><p>…</p></li>, så avsnittets linjeavstand og marg
   må overstyres også inne i punktet. */
.rte-content ul,
.rte-content ol {
    margin: 0 0 12px 0;
    padding-left: 2em;
}

.rte-content ul { list-style: disc; }
.rte-content ol { list-style: decimal; }

.rte-content ul li,
.rte-content ol li {
    margin-bottom: 3px;
    line-height: 1.45;
}

.rte-content li p {
    margin-bottom: 0;
    line-height: 1.45;
}

.rte-content li > ul,
.rte-content li > ol {
    margin: 3px 0 0 0;
}

/* ============================================
   KNAPPER
   ============================================ */
.button {
    display: inline-block;
    margin-top: 10px;
    background: var(--color-maroon);
    color: #fff;
    padding: 10px 15px;
    border-radius: var(--radius-default);
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

    .button:hover {
        background: #660000;
        text-decoration: none;
    }

/* ============================================
   BILDER
   ============================================ */
/* Generisk bilde-skalering for RTE-innhold - forhindrer at rå,
   uskalerte <img> (uten egen layout-klasse) sprenger kolonnebredden.
   Kolliderer ikke med .image-left/-right/-centered/-side-by-side sine
   egne img-regler: de setter width:100% (uendret av dette), denne
   regelen legger kun til max-width (ny egenskap for dem) og height:auto
   (identisk verdi, ingen synlig endring uansett hvem som "vinner"). */
.box img, .highlight img {
    max-width: 100%;
    height: auto;
}

.centered-image {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    border: 0;
    border-radius: var(--radius-default);
}

.image-left, .figure-left {
    display: table;
    float: left;
    margin: 0 15px 10px 0;
    max-width: 40%;
}

    .image-left img, .figure-left img {
        width: 100%;
        height: auto;
        display: block;
    }

    .image-left figcaption, .figure-left figcaption {
        display: table-caption;
        caption-side: bottom;
        font-size: 0.8rem;
        font-style: italic;
        color: var(--color-note);
        text-align: left;
        margin-top: 5px;
    }

.image-right {
    display: table;
    float: right;
    margin: 0 0 10px 15px;
    max-width: 40%;
}

    .image-right img {
        width: 100%;
        height: auto;
        display: block;
    }

    .image-right figcaption {
        display: table-caption;
        caption-side: bottom;
        font-size: 0.8rem;
        font-style: italic;
        color: var(--color-note);
        text-align: left;
        margin-top: 5px;
    }

.image-centered {
    display: table;
    margin: 0 auto 15px;
    max-width: 60%;
    text-align: center;
}

    .image-centered img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: var(--radius-default);
    }

    .image-centered figcaption {
        display: table-caption;
        caption-side: bottom;
        font-size: 0.8rem;
        font-style: italic;
        color: var(--color-note);
        text-align: center;
        margin-top: 5px;
    }

.image-side-by-side {
    display: flex;
    gap: 16px;
    margin: 0 0 15px;
    flex-wrap: nowrap;
    justify-content: center;
}

    .image-side-by-side figure {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0;
        text-align: center;
    }

    .image-side-by-side img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .image-side-by-side figcaption {
        display: block;
        contain: inline-size;
        font-size: 0.8rem;
        font-style: italic;
        color: var(--color-note);
        text-align: center;
        margin-top: 5px;
    }

/* Kreditering og opphavsrett under bildet (galleryCredit/galleryCopyright, articleImage.cshtml,
   23. oktober 2026): egen linje, mindre og grå, ikke kursiv. */
figcaption .image-attribution {
    display: block;
    font-size: 0.85em;
    font-style: normal;
    color: var(--color-note);
}

/* Størrelse-modifikator for Article Image-blokken (steg 5, 8. september
   2026). "Medium" (og ingen verdi, for eksisterende blokk-instanser) gir
   ingen ekstra klasse - kun avvik fra standardstørrelsen trenger egen
   regel. */
.image-left.size-liten, .image-right.size-liten {
    max-width: 22%;
}

.image-left.size-stor, .image-right.size-stor {
    max-width: 60%;
}

.image-left.size-full-bredde, .image-right.size-full-bredde {
    float: none;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.image-centered.size-liten {
    max-width: 35%;
}

.image-centered.size-stor {
    max-width: 85%;
}

.image-centered.size-full-bredde {
    max-width: 100%;
}

.image-side-by-side.size-liten figure {
    max-width: 220px;
}

.image-side-by-side.size-stor figure {
    max-width: 480px;
}

.image-side-by-side.size-full-bredde figure {
    flex: 1 1 0;
}

/* Avstand-modifikator for Article Image-blokken (steg 5). "Normal" (og
   ingen verdi) gir ingen ekstra klasse - samme prinsipp som over. */
.image-left.spacing-kompakt {
    margin-right: 8px;
    margin-bottom: 2px;
}

.image-right.spacing-kompakt {
    margin-left: 8px;
    margin-bottom: 2px;
}

.image-centered.spacing-kompakt {
    margin-bottom: 4px;
}

.image-side-by-side.spacing-kompakt {
    margin-bottom: 4px;
    gap: 8px;
}

.image-left.spacing-luftig {
    margin: 0 28px 24px 0;
}

.image-right.spacing-luftig {
    margin: 0 0 24px 28px;
}

.image-centered.spacing-luftig {
    margin: 0 auto 28px;
}

.image-side-by-side.spacing-luftig {
    margin: 0 0 28px;
    gap: 28px;
}

/* Bildeblokker etter hverandre (19. oktober 2026): en ny bildeblokk starter under et bilde som flyter på samme
   side, i stedet for å legge seg inntil det når teksten mellom dem er kortere enn bildet. Sentrerte bilder, bilder
   side ved side og bilder i full bredde starter under alle flytende bilder. Bilder side ved side krymper i stedet
   for å bryte til to linjer (nowrap og min-width over). Figurene er vanlige blokker, ikke tabeller, slik at de
   krymper i alle nettlesere; contain: inline-size hindrer at bildeteksten gjør figuren bredere enn bildet. Bare på
   mobil (600 px og smalere) legger de seg under hverandre, også par i full bredde (flex-basis 100 %). Kontrollert på
   alle 57 sider med bildeklassene i 1366, 1100, 900, 700 og 400 px. */
.image-left, .figure-left {
    clear: left;
}

.image-right {
    clear: right;
}

.image-centered,
.image-side-by-side,
.image-left.size-full-bredde,
.image-right.size-full-bredde {
    clear: both;
}

/* Tekstfeltet rommer flytende bilder (19. oktober 2026): et bilde som stikker lenger ned enn teksten, holdes inne i
   boksen i stedet for å renne ut i boksen under (sett på «Images from the Steerage» etter clear-endringen). */
.rte-content {
    display: flow-root;
}

@media (max-width: 600px) {
    .image-side-by-side {
        flex-wrap: wrap;
    }

    .image-side-by-side.size-full-bredde figure {
        flex-basis: 100%;
    }
}

/* ============================================
   PASSASJER- / EMIGRANTDATA
   ============================================ */
.passenger-info {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 4px;
    column-gap: 10px;
    margin-bottom: 1em;
}

    .passenger-info dt {
        font-weight: bold;
    }

    .passenger-info dd {
        margin: 0;
        font-family: var(--font-mono);
    }

/* Manifest-stil tabeller — skip- og passasjerdata */
table.info-table,
table.passenger-table,
table.manifest-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Forumlisten (8. oktober 2026): datoer brytes ikke. Linjen under tittelen (Started … by … · n replies) vises
   bare på smal skjerm, der kolonnene Started, Started by og Replies skjules - ellers blir tabellen for bred. */
.forum-date {
    white-space: nowrap;
}

.forum-row-meta {
    display: none;
    font-size: 0.8rem;
    color: var(--color-note);
    margin-top: 4px;
}

@media (max-width: 600px) {
    .forum-col-hide-narrow {
        display: none;
    }

    /* Lange ord i titler kan brytes, så tabellen ikke stikker ut av boksen. */
    .forum-topic {
        overflow-wrap: anywhere;
    }

    .forum-row-meta {
        display: block;
    }
}

/* Forumtråden (variant A2, 8. oktober 2026): tråden er én boks med H1, informasjonslinje, sidevalg over og under,
   innlegg #1 (maroon kant) og svarene #2 … med vekslende bakgrunn, og svarskjemaet nederst i samme boks.
   Svartekst beholder pre-wrap: de fleste migrerte svar har bare linjeskift, ikke <br>. */
.forum-thread {
    padding: 18px 22px;
}

    .forum-thread h1 {
        margin: 0 0 6px;
        font-size: 1.6rem;
        color: var(--color-maroon);
    }

    .forum-thread .thread-info {
        font-family: var(--font-mono);
        font-size: 0.85rem;
        color: var(--color-note);
        margin-bottom: 14px;
    }

    .forum-thread .thread-pager {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        margin: 10px 0;
        font-size: 0.9rem;
    }

        .forum-thread .thread-pager[hidden] {
            display: none;
        }

    /* Sidetall: rammede lenker, gjeldende side fylt. "Go to last post"/"Back to top" står til høyre. */
    .forum-thread .pager-pages {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }

        .forum-thread .pager-pages a,
        .forum-thread .pager-pages .current {
            min-width: 2em;
            box-sizing: border-box;
            padding: 3px 9px;
            border: 1px solid var(--color-maroon);
            border-radius: 3px;
            text-align: center;
            text-decoration: none;
            color: var(--color-maroon);
            background: #fff;
        }

        .forum-thread .pager-pages .current {
            color: #fff;
            background: var(--color-maroon);
            font-weight: bold;
        }

        .forum-thread .pager-pages .gap {
            padding: 0 2px;
            color: var(--color-note);
        }

    .forum-thread a.pager-extra {
        margin-left: auto;
        font-size: 0.85rem;
        color: var(--color-maroon);
        text-decoration: none;
        white-space: nowrap;
    }

    /* Skille mellom innlegget (#1) og svarene på side 1: tekst til venstre, tynn linje til høyre. */
    .forum-thread .replies-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 18px 0 8px;
        font-family: var(--font-mono);
        font-size: 0.85rem;
        color: var(--color-note);
    }

        .forum-thread .replies-divider::after {
            content: "";
            flex: 1;
            border-top: 1px solid var(--color-border-light);
        }

    .forum-thread .post {
        padding: 14px 16px;
    }

    .forum-thread .post-head {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        font-size: 0.85rem;
        color: var(--color-note);
        margin-bottom: 6px;
    }

        .forum-thread .post-head strong {
            color: #222;
        }

        .forum-thread .post-head a.post-no {
            color: var(--color-note);
            text-decoration: none;
            font-family: var(--font-mono);
        }

    .forum-thread .post-text {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

        .forum-thread .post-text p:first-child {
            margin-top: 0;
        }

    .forum-thread .post.reply .post-text {
        white-space: pre-wrap;
        word-break: break-word;
    }

    .forum-thread .post.first {
        border-left: 3px solid var(--color-maroon);
        background: #fff;
    }

    .forum-thread .post.reply:nth-of-type(odd) {
        background: var(--color-row-alt);
    }

    .forum-thread .post.reply:nth-of-type(even) {
        background: #fff;
    }

    .forum-thread .thread-reply-form {
        margin-top: 18px;
        border-top: 1px solid var(--color-border-default);
        padding-top: 4px;
    }

        .forum-thread .thread-reply-form > .box {
            border: none;
            padding: 0;
            margin: 0;
            background: transparent;
            box-shadow: none;
        }

@media (max-width: 600px) {
    .forum-thread {
        padding: 12px 10px;
    }

        .forum-thread h1 {
            font-size: 1.35rem;
        }

        .forum-thread .post {
            padding: 12px 10px;
        }

        .forum-thread .post-head {
            flex-wrap: wrap;
        }

        .forum-thread .pager-word {
            display: none;
        }

        .forum-thread .pager-pages {
            gap: 3px;
        }

            .forum-thread .pager-pages a,
            .forum-thread .pager-pages .current {
                min-width: 1.8em;
                padding: 3px 6px;
            }
}

    table.info-table th,
    table.passenger-table th,
    table.manifest-table th {
        background-color: var(--color-table-header);
        border: 1px solid var(--color-border-default);
        padding: 8px;
        text-align: left;
        font-size: 1rem;
    }

    table.info-table td,
    table.passenger-table td,
    table.manifest-table td {
        background-color: var(--color-table-row);
        border: 1px solid var(--color-border-light);
        padding: 8px;
        font-size: 0.95rem;
        font-family: var(--font-mono);
    }

/* Agentsidens «Lines represented» (26. oktober 2026): én rad per år og linje. Rutetekstene er løpende tekst og vises
   i vanlig skrift, ikke manifestskriften. */
table.agent-lines-table td {
    vertical-align: top;
}

table.agent-lines-table td.agent-lines-year {
    white-space: nowrap;
}

table.agent-lines-table td.agent-lines-routes {
    font-family: inherit;
}

td.center {
    text-align: center;
}

/* Standard tabellstil for tabeller satt inn via RTE-ens Tabell-knapp i
   bodyText/pageContent-feltet. .highlight brukes av Ship/ShippingLine/
   Shipyard/Agent sin bodyText; .box brukes av Article/ForumThread sin
   bodyText og HomePage/Location sin pageContent - begge scopet, siden
   det er den delte -87-Data Typen (og 1058/1061) som gir Tabell-knappen.
   :not(...)-ekskluderingen forhindrer at denne regelen (som har samme
   spesifisitet som table.manifest-table/passenger-table/info-table/
   departures-table) utilsiktet overstyrer de etablerte, kodegenererte
   tabellene som også ligger inni .box-elementer (f.eks. Ship Data). */
.highlight table:not(.manifest-table):not(.passenger-table):not(.info-table):not(.departures-table),
.box table:not(.manifest-table):not(.passenger-table):not(.info-table):not(.departures-table) {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

    .highlight table:not(.manifest-table):not(.passenger-table):not(.info-table):not(.departures-table) th,
    .box table:not(.manifest-table):not(.passenger-table):not(.info-table):not(.departures-table) th {
        background-color: var(--color-table-header);
        border: 1px solid var(--color-border-default);
        padding: 8px;
        text-align: left;
        font-size: 1rem;
    }

    .highlight table:not(.manifest-table):not(.passenger-table):not(.info-table):not(.departures-table) td,
    .box table:not(.manifest-table):not(.passenger-table):not(.info-table):not(.departures-table) td {
        background-color: var(--color-table-row);
        border: 1px solid var(--color-border-light);
        padding: 8px;
        font-size: 0.95rem;
    }

    .highlight table:not(.manifest-table):not(.passenger-table):not(.info-table):not(.departures-table) tr:nth-child(even) td,
    .box table:not(.manifest-table):not(.passenger-table):not(.info-table):not(.departures-table) tr:nth-child(even) td {
        background-color: var(--color-row-alt);
    }

.highlighted {
    background-color: #eef;
    font-weight: bold;
}

/* ============================================
   VARSLER
   ============================================ */
.info {
    background: #f9f9f9;
    border: 1px solid var(--color-border-light);
    padding: 10px;
    font-size: 0.95em;
    margin-bottom: 1em;
}

.info-note {
    font-size: 0.9em;
    color: #444;
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 8px 12px;
    margin: 10px 0 20px;
    border-radius: 4px;
    line-height: 1.4;
}

/* ============================================
   STEDSSIDER
   ============================================ */
.place-tag {
    display: inline-block;
    background: var(--color-parchment);
    border: 1px solid var(--color-border-light);
    border-radius: 3px;
    padding: 3px 10px;
    margin: 2px 4px 2px 0;
    font-size: 0.85rem;
}

.place-tag-count {
    color: var(--color-steel-blue);
    font-size: 0.8rem;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background-color: var(--color-parchment);
    border-top: 1px solid var(--color-olive-border);
    color: var(--color-note);
    font-size: 0.8rem;
    text-align: center;
    padding: 15px 0;
    margin-top: 30px;
}

    /* Lenkefarge som ellers på nettstedet (a:link/a:visited, 26. oktober 2026); bare vekten er normal her. */
    .site-footer a {
        text-decoration: underline;
        font-weight: normal;
    }

        .site-footer a:hover {
            color: var(--color-maroon);
        }

/* ============================================
   SKIPSSIDE — manifest-stempel
   ============================================ */
.ship-hero {
    background-color: var(--color-parchment);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
    padding: 20px;
    margin-bottom: 20px;
}

    .ship-hero h1 {
        font-family: var(--font-body);
        color: var(--color-maroon);
    }

    .ship-hero .ship-meta {
        font-family: var(--font-mono);
        font-size: 0.9rem;
        color: var(--color-ink);
        margin-top: 8px;
    }

/* Seilingslinje — avgang/ankomst-motiv */
.voyage-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-steel-blue);
    margin: 10px 0;
}

    .voyage-line .port {
        white-space: nowrap;
    }

    .voyage-line .route {
        flex: 1;
        border-top: 1px dashed var(--color-olive-border);
        position: relative;
        height: 1px;
    }

        .voyage-line .route::after {
            content: "⚓";
            position: absolute;
            top: -9px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-mustard);
            padding: 0 4px;
            font-size: 0.8rem;
        }

/* ============================================
   RESPONSIVT
   ============================================ */
@media (max-width: 768px) {
    .main-layout {
        flex-direction: column;
    }

    .main-column,
    .side-column {
        width: 100%;
    }

    .top-menu ul {
        gap: 6px;
    }

    .top-menu a,
    .top-menu a:visited {
        padding: 7px 8px;
    }

    .image-left {
        float: none;
        max-width: 100%;
    }
}

/* ============================================
   ACCORDION — utvidede avgangstabeller
   ============================================ */
.departures-table th {
    background-color: var(--color-mustard);
    color: var(--color-ink);
    font-size: 0.85rem;
}

.departures-table td {
    background-color: #EEF5FB !important;
    font-size: 0.85rem;
    border-color: #C5D9E8 !important;
}

.departures-row td {
    padding: 0;
    border: none;
}

.route-row:hover {
    background-color: var(--color-mustard);
    cursor: pointer;

}
/* Gamle HTML-tabeller i RouteMemo */
.manifest-table td div table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.85rem;
}

    .manifest-table td div table th {
        background-color: var(--color-mustard);
        border: 1px solid var(--color-border-default);
        padding: 4px 8px;
        text-align: left;
    }

    .manifest-table td div table td {
        background-color: var(--color-table-row);
        border: 1px solid var(--color-border-light);
        padding: 4px 8px;
        font-family: var(--font-body);
    }

/* ============================================
   RTE-LIGHTBOX (wwwroot/js/rte-lightbox.js)
   Felles klikk-for-forstørrelse for bilder i .rte-content. Egne
   klassenavn (rte-lightbox*) — kolliderer ikke med de inline-stylede
   .gallery-thumb-overlayene i Ship/ShippingLine/HomePage (z-index 1000).
   Modalen legges direkte i <body>, så .box img/.highlight img-reglene
   over treffer den ikke. Reserveverdier i var() = faktiske :root-verdier.
   ============================================ */
.rte-content img.rte-lightbox-trigger {
    cursor: zoom-in;
}

.rte-content img.rte-lightbox-trigger:focus-visible {
    outline: 3px solid var(--color-steel-blue, #006699);
    outline-offset: 2px;
}

/* Ingen scrolling av siden bak; scrollbar-gutter hindrer at innholdet
   hopper sidelengs når rullefeltet forsvinner. */
html.rte-lightbox-open {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.rte-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}

.rte-lightbox[hidden] {
    display: none;
}

.rte-lightbox__figure {
    margin: 0;
    text-align: center;
    cursor: default;
}

/* Egen (naturlig) størrelse, kun avgrenset til vinduet — aldri forstørret. */
.rte-lightbox__img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    border-radius: var(--radius-default, 5px);
    background: var(--color-parchment, #FFEFCF);
}

.rte-lightbox__caption {
    max-width: 60em;
    margin: 10px auto 0;
    color: var(--color-parchment, #FFEFCF);
    font-family: var(--font-body, Arial, Helvetica, sans-serif);
    font-size: 0.95rem;
    line-height: 1.4;
}

.rte-lightbox__close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--color-maroon, #800000);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.rte-lightbox__close:hover {
    background: #660000;
}

.rte-lightbox__close:focus-visible {
    outline: 3px solid var(--color-mustard, #F5DD94);
    outline-offset: 2px;
}