:root{
    /* färgpalett */
    --bg:#050505;                  /* nästan svart */
    --panel:#0c0c0c;               /* slightly lighter background */
    --ivory:#E6DFC8;               /* varm elfenben */
    --muted:#C9C0AA;               /* sekundär text */
    --accent:#5b0a0a;              /* blodrött */
    --gold:#8e7660;                /* matt guld */
    --max-width:1100px;
    --muted-border: rgba(230,223,200,0.08); /* Ny variabel för ramar/linjer */
}

/* Back to Top-fix: Aktiverar mjuk scrollning i hela dokumentet */
html {
    scroll-behavior: smooth;
    /* KRITISK FIX: Tvingar HTML-elementet att vara full höjd och scrollbart */
    height: 100%;
    overflow-x: hidden; /* Förhindrar horisontell scroll */
}
/* Reset & base */
*{box-sizing:border-box}
/* KRITISK FIX: Ta bort den gamla 'html,body{height:100%}' regeln */
body{
    /* KRITISK FIX: Låt body ha automatisk höjd men fyll skärmen minst */
    height: auto;
    min-height: 100%;
    margin:0;
    background:linear-gradient(180deg,var(--bg),#070707);
    color:var(--ivory);
    font-family: "Spectral", Georgia, serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.6;
    /* FIX: Borttagen display:flex; härifrån */
}
/* NYA GLOBALA LÄNKSTILAR FÖR BRÖDTEXTEN */
a {
    color: var(--muted);
    text-decoration: underline;
}
a:hover {
    color: var(--ivory);
}
a:visited {
    color: var(--muted);
}
/* SLUT NYA GLOBALA LÄNKSTILAR */

/* layout container */
.site{
    width:100%;
    max-width:var(--max-width);
    min-height:80vh;
    /* FIX: Centrering och padding applicerad här */
    margin:0 auto;
    padding:24px;
}

    /* Header */
    header.site-header{
      text-align:center;
      padding:18px 6px 8px 6px;
      border-bottom:1px solid rgba(230,223,200,0.04);
    }
    
    /* NYA STILAR FÖR LÄNKEN RUNT SIDRUBRIKEN */
    .site-title-link {
        text-decoration: none; /* Tar bort länk-understrykning */
        color: inherit; /* Ärver färg (viktigt om du lägger till en hover-effekt) */
        display: block; /* Gör länken till ett blockelement som fyller ytan */
        line-height: 1; /* Fixar eventuella extra radbrytningar */
    }

    .site-title-link .site-title{
      /* Stilar som tidigare låg direkt på .site-title */
      font-family:"Cormorant Garamond", serif;
      font-size:44px;
      letter-spacing:2px;
      color:var(--ivory);
      font-weight:700;
      transition: color 0.3s; /* Lägg till mjuk övergång för hover-effekt */
    }

    /* Hover-effekt för sidrubriken */
    .site-title-link:hover .site-title {
        color: var(--gold); /* Exempelvis ändra till guld vid hovring */
    }

    .tagline{
      margin-top:6px;
      font-size:14px;
      letter-spacing:3px;
      color:var(--muted);
      text-transform:uppercase;
    }

    /* Flagg-länkar (Språkval) */
    .language-switcher{
      text-align:center;
      margin-top:10px;
      margin-bottom:8px;
    }
    .language-switcher a{
      text-decoration:none;
      color:var(--muted);
      font-size:12px;
      letter-spacing:1px;
      text-transform:uppercase;
      padding:4px 6px;
      opacity:0.6;
    }
    .language-switcher a:hover{ opacity:1; color:var(--ivory) }
    .language-switcher a.active{ 
      color:var(--ivory); 
      font-weight:500;
      opacity:1;
      border-bottom:1px solid var(--ivory);
    }

    /* Navigation */
    nav.main-nav{
      display:flex;
      justify-content:center;
      margin-top:14px;
      gap:20px;
      flex-wrap:wrap;
    }
    nav.main-nav a, nav.main-nav span{
      text-decoration:none;
      color:var(--muted);
      font-size:13px;
      letter-spacing:2px;
      text-transform:uppercase;
      padding:6px 8px;
      cursor: pointer; /* Lägg till pekare för att indikera klickbart, även för span */
    }
    nav.main-nav span.active {
        color:var(--ivory); 
        font-weight:700;
    }
    nav.main-nav a:hover{ color:var(--ivory) }


    /* Hero */
    .hero{
      margin:28px 0;
      background-image: url(''); /* optional texture */
      padding:48px 32px;
      text-align:center;
      border-radius:6px;
    }
    .hero h1{
      font-family:"Cormorant Garamond", serif;
      font-size:40px;
      margin:0 0 6px 0;
      color:var(--ivory);
      letter-spacing:1px;
    }
    .hero p.lead{
      color:var(--muted);
      margin:0 0 18px 0;
      font-size:18px;
    }
    .hero .cta{
      display:inline-block;
      border-bottom:1px solid rgba(230,223,200,0.04);
      padding:8px 14px;
      color:var(--ivory);
      text-decoration:none;
      margin:0 8px;
    }

    /* Main layout two-column */
    .main{
      display:grid;
      grid-template-columns: 280px 1fr;
      gap:32px;
      margin-top:18px;
    }

    /* Sidebar */
    .sidebar{
      border-right:1px solid rgba(230,223,200,0.03);
      padding-right:20px;
    }
    .side-list{ list-style:none; padding:0; margin:0; }
    .side-list li{
      padding:12px 0;
      font-size:15px;
      color:var(--muted);
      display:flex;
      gap:10px;
      align-items:center;
    }
    .side-list li .icon{
      color:var(--gold);
      width:22px;
      text-align:center;
      font-size:14px;
    }
    /* FIX: Stil för länkar inuti side-list li */
    .side-list li a {
        text-decoration: none; /* Ta bort understrykning */
        color: var(--muted); /* Gör länken synlig med en dämpad färg */
        transition: color 0.2s;
    }
    .side-list li a:hover {
        color: var(--ivory); /* Tydlig hover-effekt */
    }
    .side-list li a.active {
        color: var(--ivory);
        font-weight: 700;
    }
    .side-list li a.disabled {
        color: var(--muted);
        cursor: default;
    }
    .side-list li a.disabled:hover {
        color: var(--muted); /* Ingen färgförändring om länken är inaktiverad */
    }

    .side-card{
      margin-top:22px;
      padding:18px;
      background:rgba(255,255,255,0.01);
      border-radius:4px;
      font-size:13px;
      color:var(--muted);
    }


    /* Content column */
    .content h2.section-title{
      font-family:"Cormorant Garamond", serif;
      font-size:20px;
      margin:4px 0 12px 0;
      letter-spacing:1px;
      color:var(--ivory);
    }
    article.card{
      background:rgba(255,255,255,0.01);
      border-left:2px solid rgba(230,223,200,0.02);
      padding:20px;
      margin-bottom:18px;
      border-radius:4px;
    }
    article.card h3{
      margin:0 0 6px 0;
      font-family:"Cormorant Garamond", serif;
      font-size:18px;
      color:var(--ivory);
    }
    /* NYTT: Global p-stil för att ge utrymme överallt */
    p {
        margin-bottom: 1.5em; /* Lägger till en extra rad under varje p */
    }
    /* FIX: Åsidosätter den globala p-stilen ENDAST om p är inuti article.card
       för att behålla utrymmet som önskas */
    article.card p{ 
        margin-bottom: 1.5em; /* Använd samma marginal även inuti kortet */
        color:var(--muted); 
    }


    /* 🖼️ GALLERI STILAR (ARS MACABRA) 🖼️ */
    
    .gallery-grid {
        /* NYTT: Använder CSS Columns för Masonry-liknande layout */
        column-count: 3; /* Standard: 3 kolumner på stora skärmar */
        column-gap: 30px; /* Mellanrum mellan kolumnerna */
        margin-top: 30px;
        padding: 0;
    }
    .gallery-item {
        /* Nödvändigt för Masonry-effekten */
        display: inline-block;
        width: 100%;
        margin: 0 0 30px 0; /* Lägger till mellanrum under varje objekt */
        
        padding: 0;
        /* Subtil ram för att avgränsa konstverken */
        border: 1px solid var(--muted-border);
        background-color: var(--panel); 
        overflow: hidden;
        /* Återställ flex för att hantera bild och bildtext inuti */
        display: flex; 
        flex-direction: column; 
        /* Viktigt för att objekt inte ska klippas mellan kolumner */
        break-inside: avoid; 
    }
    
    .gallery-item img {
        width: 100%;
        height: auto; 
        object-fit: contain; 
        display: block;
        transition: transform 0.4s ease-in-out;
    }
    
    /* Lägg till en liten zoom-effekt vid hover för att lyfta fram konsten */
    .gallery-item:hover img {
        transform: scale(1.01); 
    }

    .gallery-item figcaption {
        font-family: "Spectral", serif;
        font-size: 0.85em;
        line-height: 1.3;
        padding: 10px 8px;
        color: var(--muted);
        text-align: center;
        background-color: var(--panel); 
        flex-grow: 1; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border-top: 1px solid var(--muted-border); 
    }
    
    /* Stilar för sorteringskontrollerna */
    .sort-controls {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    .sort-controls label {
        font-size: 14px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .sort-controls select {
        background: var(--panel);
        color: var(--ivory);
        border: 1px solid var(--muted-border);
        padding: 5px 8px;
        font-family: 'Spectral', serif;
        border-radius: 4px;
        -webkit-appearance: none; /* Dölj standardpil för utseendekontroll */
        -moz-appearance: none;
        appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E6DFC8%22%20d%3D%22M287%20197.3l-11.4-11.4c-3.1-3.1-8.2-3.1-11.3%200L146.2%20275.6%2056.1%20185.5c-3.1-3.1-8.2-3.1-11.3%200L33.4%20197c-3.1%203.1-3.1%208.2%200%2011.3l110.8%20110.8c3.1%203.1%208.2%203.1%2011.3%200l110.8-110.8c3.1-3.1%203.1-8.2%200-11.3z%22%2F%3E%3C%2Fsvg%3E');
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 10px;
        padding-right: 25px; /* Skapa utrymme för den anpassade pilen */
    }
    
    /* ------------------------------------- */


    /* Quote */
    .quote{
      margin:30px 0;
      text-align:center;
      font-family:"Cormorant Garamond", serif;
      font-size:20px;
      color:var(--ivory);
      opacity:0.95;
    }
    .quote small{ display:block; color:var(--muted); margin-top:8px; font-size:13px; }


    /* Stil för sektionen med tre kolumner */
    .section-panel{
      margin: 40px 0;
      padding: 0 24px;
    }
    .section-panel .grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    
    /* footer */
    footer.site-footer{
      margin-top:40px;
      border-top:1px solid rgba(230,223,200,0.03);
      padding-top:18px;
      color:var(--muted);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    footer .left, footer .right{ font-size:13px; }

    /* Back to Top-knapp */
    #back-to-top {
        display: none;
        position: fixed;
        bottom: 20px; /* HÄR ÄR NYCKELN TILL HÖGER BOTTEN */
        right: 20px; /* HÄR ÄR NYCKELN TILL HÖGER BOTTEN */
        z-index: 99;
        border: none;
        outline: none;
        background-color: var(--gold);
        color: var(--bg);
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
        font-size: 14px;
        text-decoration: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        transition: background-color 0.3s, opacity 0.3s;
        font-family: "Cormorant Garamond", serif;
        text-transform: uppercase;
    }

    #back-to-top:hover {
        background-color: var(--ivory);
        color: var(--bg);
    }

    /* responsive */
    @media (max-width:900px){
      .main{ grid-template-columns: 1fr; }
      .sidebar{ border-right:none; padding-right:0; order:2 }
      .content{ order:1 }
      .site-title{ font-size:34px }
      .hero{ padding:28px 18px }
        
      /* Tablet-skärmar: 2 kolumner */
      .gallery-grid {
          column-count: 2;
      }
    }

    @media (max-width:600px){
      .section-panel .grid{
        grid-template-columns: 1fr; /* Stapla kolumnerna under 600px */
      }
      
      /* För mobil: Gör galleriet till en enda kolumn */
      .gallery-grid {
          column-count: 1; /* Endast 1 kolumn */
      }
    }
    
    /* --------------------------------------------------------------------------
   REDACTED / CENSURERING
-------------------------------------------------------------------------- */
.redacted-text {
    /* Sätter bakgrunden till svart för att dölja texten */
    background-color: var(--text-color, #000); 
    
    /* Gömmer själva texten genom att sätta textfärgen till samma som bakgrunden. */
    /* Vissa moderna webbläsare hanterar detta bättre än att bara använda color: black */
    color: var(--text-color, #000); 
    
    /* Väljer hur tjock den svarta rutan ska vara */
    padding: 0 5px; 
    
    /* Väljer hur rundade hörnen ska vara */
    border-radius: 2px;
    
    /* Stänger av markören för att förhindra att man kan markera och kopiera texten */
    user-select: none;
    cursor: default; 
    }

/* Styling för snabbfaktatabellen och bild/text-layout */

/* Flexbox för De Me (Om Mig) sektionen */
.bio-section {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.bio-image {
    flex: 0 0 250px; /* Bilden är 250px bred */
    margin: 0;
}

.bio-text {
    flex: 1; /* Texten tar resten av utrymmet */
}

/* LÖSNING 2: Fixar: Upplinjering av Snabbfakta-rubriken med bildens topp */
.bio-text h2:first-of-type {
    margin-top: 0; 
}
/* Säkerställer att rubriken inte trycks ner ytterligare */

/* Styling för favorittabellerna */
.favorites-table {
    border-collapse: collapse; 
    margin-top: 15px;
    font-size: 0.95em;
    width: 100%;
}

.favorites-table td {
    padding: 5px 0; 
    vertical-align: top;
}

/* ------------------------------------------------------------------
 * MOBILANPASSNING (Media Query)
 * ------------------------------------------------------------------ */
@media (max-width: 800px) {
    
    /* STEG 1: Få elementen i bio-section att STAPLAS istället för att vara sida vid sida */
    .bio-section {
        display: block; 
    }

    /* STEG 2: Centrera bilden och ge den en flytande bredd */
    .bio-image {
        flex: none; 
        width: 60%; /* Gör bilden mindre på mobil */
        max-width: 250px;
        margin: 0 auto 30px auto; /* Centrerar bilden horisontellt och lägger till marginal under */
        text-align: center; 
    }
    
    /* STEG 3: Få de två snabbfakta-kolumnerna att staplas */
    .fact-columns {
        column-count: 1 !important;
    }
}

/* ------------------------------------------------------------------
 * STYLING FÖR DE SITO-BILDEN (Flytande till höger på Desktop)
 * ------------------------------------------------------------------ */

.sito-image-desktop {
    float: right; /* Bilden flyter till höger på desktop */
    margin: 10px 0 20px 30px; /* Marginaler runt bilden */
    width: 200px; /* Fast bredd */
}

/* Anpassning för mindre skärmar (t.ex. Mobiler) */
@media (max-width: 800px) {
    
    /* Centrera bilden istället för att flyta den */
    .sito-image-desktop {
        float: none; /* Ta bort flyt */
        margin: 20px auto; /* Centrera bilden horisontellt */
        width: 80%; /* Gör den bredare på mobil för att vara synlig */
        max-width: 250px;
        display: block; /* Måste vara block för att margin:auto ska fungera */
    }
}

/* Styling för Glossarium Rerum */

/* Definitionstermer */
.glossary-list dt {
    font-size: 1.1em;
    padding-left: 0;
}

/* Definitioner */
.glossary-list dd {
    margin-bottom: 15px;
    margin-left: 0;
    padding-left: 15px;
    font-style: italic;
    /* Förenklar listan, tar bort linjen vi lade till inline i HTML */
    border-bottom: none !important; 
}

/* Anpassning för mobil */
@media (max-width: 600px) {
    .glossary-nav a, .glossary-nav span {
        margin: 0 2px;
        font-size: 0.9em;
    }
}

/* --------------------------------------------------------------------------
   STYLAR FÖR GOTHIC SEPARATOR (HR) - UPPDATERAD (TYDLIGARE)
-------------------------------------------------------------------------- */
hr.gothic-separator {
    border: none;
    height: 2px; /* ÖKAD HÖJD: Från 1px till 2px för att ge mer kropp */
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0), /* Starta transparent */
        var(--muted-border) 10%, /* Mjuk start */
        var(--muted) 40%, /* ÖKAD KONTRAST: Muted-färg i mitten */
        var(--muted) 60%, /* ÖKAD KONTRAST: Muted-färg i mitten */
        var(--muted-border) 90%, /* Mjuk slut */
        rgba(255, 255, 255, 0) /* Sluta transparent */
    );
    margin: 30px auto 20px auto; /* Utrymme runt linjen */
    width: 80%;
    max-width: 600px;
}
textarea {
    /* Detta gör att texten beter sig normalt när du skriver */
    white-space: normal;
    word-break: normal;       /* VIKTIGT: Ändrat från break-word */
    overflow-wrap: break-word; 
    width: 100%;              /* Bra att ha för att fylla bredden */
}

/* Uppdaterad stil för texten */
.reflection-text {
    width: 100%;
    display: block;
    
    /* 1. Hantera whitespace: Slå ihop mellanslag/radbrytningar till ett flytande flöde */
    white-space: normal !important;
    
    /* 2. Bryt INTE ord mitt i (t.ex. "Välkom-men") */
    word-break: normal !important; 
    
    /* 3. Bryt ENDAST om ett ord är för långt för raden (t.ex. en lång länk) */
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important; /* Lägg till synonym för maximal säkerhet */
    
    /* Valfritt: Gör texten mer läsbar */
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   BORTTAGEN: Denna regel störde Grid-layouten när texten inte bröts.
-------------------------------------------------------------------------- */
/* OBS: Denna sektion är nu helt borttagen */

/* --------------------------------------------------------------------------
   STYLAR FÖR DYNAMISKT CITAT I HEADERN (Random Quote)
-------------------------------------------------------------------------- */
#quote-of-the-day-container {
    /* Centrera citatet horisontellt */
    text-align: center;
    margin: 20px auto 10px auto; /* Utrymme under navigering */
    padding: 0 20px;
    max-width: 900px;
}

#dynamic-quote {
    /* Grundläggande stil */
    margin: 0;
    text-align: center;
    font-family: "Cormorant Garamond", serif;
    font-size: 18px; 
    color: var(--muted); /* Gör det subtilt */
    opacity: 0.85;
    font-style: italic;
    border: none; /* Inga blockquote-standardramar */
    line-height: 1.4;
}

#dynamic-quote small {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: var(--gold); /* Använd guld för författaren/källan */
}

/* --------------------------------------------------------------------------
   HAMBURGARMENY (MOBIL SIDEBAR)
-------------------------------------------------------------------------- */

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--muted);
    transition: all 0.3s;
}

.hamburger:hover span {
    background: var(--ivory);
}

/* Slide-in panel */
.mobile-sidebar-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    background: var(--panel);
    border-left: 1px solid var(--muted-border);
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
    transition: right 0.35s ease;
}

.mobile-sidebar-panel.is-open {
    right: 0;
}

.sidebar-close {
    display: block;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
    margin-bottom: 16px;
    padding: 0;
    font-family: "Cormorant Garamond", serif;
}

.sidebar-close:hover {
    color: var(--ivory);
}

/* Overlay/bakgrund */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 999;
}

.sidebar-overlay.is-open {
    display: block;
}

/* ── MOBIL (max 900px) ── */
@media (max-width: 900px) {

    /* Hamburgare fixed – följer med vid scroll */
    .hamburger {
        display: flex;
        position: fixed;
        top: 16px;
        right: 16px;
        margin: 0;
        z-index: 1001;
    }

    /* Dölj desktop-sidebaren */
    .desktop-sidebar {
        display: none;
    }

    /* Justera grid till en kolumn */
    .main {
        grid-template-columns: 1fr;
    }
}

/* ── DESKTOP (min 901px) ── */
@media (min-width: 901px) {

    /* Dölj mobil-panel och overlay helt */
    .mobile-sidebar-panel {
        display: none !important;
    }

    .sidebar-overlay {
        display: none !important;
    }
}