/* ============================================================
   FLEETWOOD ARKIV
   Gemensamt visuellt system
   ============================================================ */


/* ------------------------------------------------------------
   TYPOGRAFI
   ------------------------------------------------------------ */

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


:root {
    --fleetwood-ink: #0f172a;
    --fleetwood-text: #334155;
    --fleetwood-muted: #64748b;

    --fleetwood-paper: #fafaf9;
    --fleetwood-paper-warm: #f8f5ef;
    --fleetwood-white: #ffffff;

    --fleetwood-line: #e7e5e4;
    --fleetwood-line-dark: #cbd5e1;

    --fleetwood-amber: #b45309;
    --fleetwood-amber-dark: #92400e;
    --fleetwood-amber-light: #fef3c7;

    --fleetwood-green: #166534;
    --fleetwood-blue: #1e40af;
    --fleetwood-orange: #c2410c;

    --fleetwood-radius: 1rem;
    --fleetwood-radius-large: 1.5rem;

    --fleetwood-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 28px rgba(15, 23, 42, 0.04);
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}


body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;

    color: var(--fleetwood-text);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.font-serif-header {
    font-family: 'Cinzel', Georgia, serif;
}


/* ------------------------------------------------------------
   GLOBALT
   ------------------------------------------------------------ */

::selection {
    background: #fde68a;
    color: #451a03;
}


img {
    max-width: 100%;
}


a,
button {
    -webkit-tap-highlight-color: transparent;
}


button,
a {
    touch-action: manipulation;
}


/* Tydlig tangentbordsnavigation */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(217, 119, 6, 0.35);
    outline-offset: 3px;
}


/* ------------------------------------------------------------
   DISKRET ARKIVKÄNSLA
   ------------------------------------------------------------ */

/*
   Mycket subtil struktur på ljusa ytor.
   Ingen "gammal pergament"-effekt – bara lite mer liv.
*/

.archive-paper {
    background-color: var(--fleetwood-paper);
    background-image:
        radial-gradient(
            circle at 20% 20%,
            rgba(120, 113, 108, 0.035) 0,
            rgba(120, 113, 108, 0.035) 1px,
            transparent 1px
        );
    background-size: 18px 18px;
}


.archive-paper-warm {
    background-color: var(--fleetwood-paper-warm);
}


/* ------------------------------------------------------------
   RUBRIKER & REDAKTIONELLA ELEMENT
   ------------------------------------------------------------ */

.archive-kicker {
    display: block;

    margin-bottom: 0.75rem;

    color: var(--fleetwood-amber-dark);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;
}


.archive-heading {
    font-family: 'Cinzel', Georgia, serif;

    color: var(--fleetwood-ink);

    font-weight: 700;
    line-height: 1.15;
}


.story-prose {
    max-width: 46rem;

    color: var(--fleetwood-text);

    font-size: 1rem;
    line-height: 1.85;
}


.story-prose p + p {
    margin-top: 1.4rem;
}


.story-prose strong {
    color: var(--fleetwood-ink);
    font-weight: 600;
}


.story-prose a {
    color: var(--fleetwood-amber-dark);

    font-weight: 600;

    text-decoration: underline;
    text-decoration-color: rgba(180, 83, 9, 0.3);
    text-underline-offset: 3px;
}


.story-prose a:hover {
    color: var(--fleetwood-amber);
    text-decoration-color: currentColor;
}


/* ------------------------------------------------------------
   REDAKTIONELL AVDELARE
   ------------------------------------------------------------ */

.story-divider {
    display: flex;
    align-items: center;
    gap: 1rem;

    margin: 3rem 0;

    color: #a8a29e;
}


.story-divider::before,
.story-divider::after {
    content: "";

    height: 1px;
    flex: 1;

    background: var(--fleetwood-line);
}


.story-divider-mark {
    font-family: Georgia, serif;
    font-size: 1.15rem;
}


/* ------------------------------------------------------------
   KORT
   ------------------------------------------------------------ */

.archive-card {
    overflow: hidden;

    background: var(--fleetwood-white);

    border: 1px solid var(--fleetwood-line);
    border-radius: var(--fleetwood-radius-large);

    box-shadow: var(--fleetwood-shadow);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}


.archive-card:hover {
    transform: translateY(-2px);

    border-color: #d6d3d1;

    box-shadow:
        0 4px 8px rgba(15, 23, 42, 0.04),
        0 18px 40px rgba(15, 23, 42, 0.07);
}


/* ------------------------------------------------------------
   ORIGINALDOKUMENT
   ------------------------------------------------------------ */

.document-frame {
    padding: 0.65rem;

    background: #e7e5e4;

    border: 1px solid #d6d3d1;
    border-radius: 0.8rem;

    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.08),
        0 14px 28px rgba(15, 23, 42, 0.08);
}


.document-frame img {
    display: block;

    width: 100%;
    height: auto;

    background: white;

    border-radius: 0.35rem;
}


.document-caption {
    margin-top: 0.8rem;

    color: var(--fleetwood-muted);

    font-size: 0.72rem;
    line-height: 1.55;
}


.document-caption strong {
    color: var(--fleetwood-text);
}


/* ------------------------------------------------------------
   FOTOGRAFIER
   ------------------------------------------------------------ */

.archive-photo {
    overflow: hidden;

    background: #e7e5e4;

    border: 1px solid #d6d3d1;
    border-radius: var(--fleetwood-radius);
}


.archive-photo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}


.photo-caption {
    padding-top: 0.75rem;

    color: var(--fleetwood-muted);

    font-size: 0.72rem;
    line-height: 1.55;
}


.photo-caption-title {
    color: var(--fleetwood-text);

    font-weight: 600;
}


/* ------------------------------------------------------------
   CITAT FRÅN ORIGINALMATERIAL
   ------------------------------------------------------------ */

.archive-quote {
    position: relative;

    margin: 2.2rem 0;
    padding: 1.7rem 1.7rem 1.7rem 2rem;

    background: #fffbeb;

    border-left: 3px solid #d97706;
    border-radius: 0 1rem 1rem 0;
}


.archive-quote::before {
    content: "“";

    position: absolute;

    top: 0.2rem;
    left: 0.75rem;

    color: rgba(180, 83, 9, 0.16);

    font-family: Georgia, serif;
    font-size: 4.5rem;
    line-height: 1;
}


.archive-quote-text {
    position: relative;

    color: #292524;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    font-style: italic;

    line-height: 1.65;
}


.archive-quote-source {
    margin-top: 1rem;

    color: #78716c;

    font-size: 0.68rem;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* ------------------------------------------------------------
   KÄLLNOTERINGAR
   ------------------------------------------------------------ */

.source-note {
    padding: 1rem 1.1rem;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-left: 3px solid #64748b;
    border-radius: 0.75rem;

    color: var(--fleetwood-muted);

    font-size: 0.78rem;
    line-height: 1.65;
}


.source-note-title {
    display: block;

    margin-bottom: 0.3rem;

    color: var(--fleetwood-text);

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* ------------------------------------------------------------
   KÄLLKRITIK / EVIDENSNIVÅER

   Våra nivåer:

   documented      = dokumenterat i primär/samtida källa
   supported       = starkt belagt
   family          = familjeberättelse
   hypothesis      = hypotes/tolkning
   unknown         = okänt
   ------------------------------------------------------------ */

.evidence {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0.38rem 0.65rem;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.evidence::before {
    content: "";

    width: 0.45rem;
    height: 0.45rem;

    flex: 0 0 auto;

    border-radius: 50%;

    background: currentColor;
}


.evidence-documented {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}


.evidence-supported {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}


.evidence-family {
    color: #a16207;
    background: #fefce8;
    border-color: #fde68a;
}


.evidence-hypothesis {
    color: #c2410c;
    background: #fff7ed;
    border-color: #fed7aa;
}


.evidence-unknown {
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
}


/* ------------------------------------------------------------
   EVIDENSRUTA / FACT CHECK
   ------------------------------------------------------------ */

.evidence-panel {
    overflow: hidden;

    background: white;

    border: 1px solid var(--fleetwood-line);
    border-radius: 1rem;
}


.evidence-panel-header {
    padding: 0.85rem 1rem;

    background: #f8fafc;

    border-bottom: 1px solid #e2e8f0;

    color: var(--fleetwood-ink);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.evidence-panel-body {
    padding: 1rem;

    color: var(--fleetwood-text);

    font-size: 0.82rem;
    line-height: 1.7;
}


/* ------------------------------------------------------------
   FORSKNINGSFRÅGA / DET VI INTE VET
   ------------------------------------------------------------ */

.research-question {
    padding: 1.25rem 1.4rem;

    background: #fff7ed;

    border: 1px solid #fed7aa;
    border-radius: 1rem;
}


.research-question-label {
    display: block;

    margin-bottom: 0.45rem;

    color: #c2410c;

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.research-question p {
    color: #7c2d12;

    font-size: 0.85rem;
    line-height: 1.7;
}


/* ------------------------------------------------------------
   ORIGINAL / RENSKRIVNING / KONTEXT
   ------------------------------------------------------------ */

.archive-section-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;

    margin-bottom: 0.7rem;

    color: var(--fleetwood-muted);

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.archive-section-label::before {
    content: "";

    width: 1.4rem;
    height: 1px;

    background: #d6d3d1;
}


.transcription {
    padding: 1.4rem;

    background: #fffbeb;

    border: 1px solid #fef3c7;
    border-radius: 1rem;

    color: #44403c;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;

    line-height: 1.85;

    white-space: pre-line;
}


.context-box {
    padding: 1.4rem;

    background: #f8fafc;

    border: 1px solid #e2e8f0;
    border-radius: 1rem;

    color: #475569;

    font-size: 0.88rem;
    line-height: 1.75;
}


/* ------------------------------------------------------------
   TIDSLINJE – FÖR FRAMTIDA STORY-SIDOR
   ------------------------------------------------------------ */

.archive-timeline {
    position: relative;

    margin-left: 0.7rem;
    padding-left: 1.8rem;

    border-left: 1px solid #d6d3d1;
}


.archive-timeline-item {
    position: relative;

    padding-bottom: 2rem;
}


.archive-timeline-item:last-child {
    padding-bottom: 0;
}


.archive-timeline-item::before {
    content: "";

    position: absolute;

    left: -2.15rem;
    top: 0.4rem;

    width: 0.65rem;
    height: 0.65rem;

    background: var(--fleetwood-amber);

    border: 3px solid var(--fleetwood-paper);

    border-radius: 50%;

    box-sizing: content-box;
}


.archive-timeline-date {
    color: var(--fleetwood-amber-dark);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.archive-timeline-title {
    margin-top: 0.25rem;

    color: var(--fleetwood-ink);

    font-weight: 700;
}


.archive-timeline-text {
    margin-top: 0.35rem;

    color: var(--fleetwood-muted);

    font-size: 0.85rem;
    line-height: 1.65;
}


/* ------------------------------------------------------------
   LÄNKAR TILL RELATERADE BERÄTTELSER
   ------------------------------------------------------------ */

.related-story {
    display: block;

    padding: 1.25rem;

    background: white;

    border: 1px solid var(--fleetwood-line);
    border-radius: 1rem;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.related-story:hover {
    transform: translateY(-2px);

    border-color: #d97706;

    box-shadow: var(--fleetwood-shadow);
}


/* ------------------------------------------------------------
   LETTER MODAL – LITEN FÖRFINING
   ------------------------------------------------------------ */

#letterModal img {
    image-rendering: auto;
}


#modalImageContainer {
    scrollbar-width: thin;
    scrollbar-color: #a8a29e #f5f5f4;
}


#modalText {
    font-family: Georgia, "Times New Roman", serif;
}


#modalContext,
#modalReflections {
    line-height: 1.75;
}


/* Dokumentbilder i modal */

#modalImageContainer img {
    background: white;

    box-shadow:
        0 3px 8px rgba(15, 23, 42, 0.08),
        0 16px 32px rgba(15, 23, 42, 0.08);
}


/* ------------------------------------------------------------
   LIGHTBOX
   ------------------------------------------------------------ */

#lightboxImage {
    box-shadow:
        0 12px 50px rgba(0, 0, 0, 0.45);
}


/* ------------------------------------------------------------
   SCROLLBAR – DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 768px) {

    ::-webkit-scrollbar {
        width: 11px;
        height: 11px;
    }

    ::-webkit-scrollbar-track {
        background: #f5f5f4;
    }

    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;

        border: 3px solid #f5f5f4;
        border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}


/* ------------------------------------------------------------
   MOBIL
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    .story-prose {
        font-size: 0.95rem;
        line-height: 1.78;
    }


    .archive-quote {
        padding: 1.4rem 1.2rem 1.4rem 1.5rem;
    }


    .archive-quote-text {
        font-size: 1.05rem;
    }


    .document-frame {
        padding: 0.4rem;
    }
}


/* ------------------------------------------------------------
   ANVÄNDARE SOM FÖREDRAR MINDRE ANIMATION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ------------------------------------------------------------
   UTSKRIFT

   Viktigt för ett arkiv:
   berättelser och dokument ska fortfarande vara läsbara på papper.
   ------------------------------------------------------------ */

@media print {

    #site-header,
#site-footer,
.gtranslate_wrapper,
button:not(:has(img)) {
    display: none !important;
}


    body {
        background: white !important;

        color: black !important;

        font-size: 11pt;
    }


    a {
        color: black !important;
        text-decoration: none !important;
    }


    .archive-card,
    .document-frame,
    .source-note,
    .research-question,
    .evidence-panel {
        break-inside: avoid;

        box-shadow: none !important;
    }
}