/* =========================================
    8. POP-UP o KNAPP
   ========================================= */
.modal {
    display: none; 
    position: fixed !important;
    z-index: 99999 !important;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important; 
    backdrop-filter: blur(8px);
    justify-content: center !important;
    align-items: center !important;
}

.modal-content {
    display: block !important; 
    position: relative !important;
    width: 95% !important;
    max-width: 1400px !important; 
    margin: 2% auto !important; 
    background-color: #3d2b1f !important;
    padding: 50px !important;
    border: 2px solid #DFB784 !important;
    border-radius: 20px !important;
    color: white !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important;
    text-align: left !important;
    column-count: 2; 
    column-gap: 50px;
    column-rule: 1px solid rgba(223, 183, 132, 0.3);
}

.modal-content p:first-of-type {
    margin-top: 0;
}

/* Vi vill dock inte ha 60px marginal på den ALLRA första rubriken i modalen */
.modal-content h2:first-of-type, 
.modal-content h1:first-of-type {
    margin-top: 0 !important;
}

.modal-content h2, .modal-content h1 {
    column-span: all;
    margin-top: 60px;
    margin-bottom: 20px; /* Detta styr avståndet till texten under */
    line-height: 1.2;
    clear: both;                    /* Säkerställer att rubriken bryter spalterna rent */
}

.modal-content p {
    margin-top: 0; /* VIKTIGT: Nollställ toppen */
    margin-bottom: 20px;
    padding-left: 15px;
    break-inside: avoid-column; 
}

.close-btn {
    z-index: 10;
    position: absolute !important;
    top: 10px !important;
    right: 20px !important;
    font-size: 35px !important;
    color: #DFB784 !important;
    cursor: pointer !important;
    line-height: 1;
}

.info-btn {
    background-color: #DFB784;
    color: #3d2b1f;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
}

.compact-modal {
    line-height: 0.5 !important; 
}

.compact-modal p, .compact-modal li {
    line-height: 1.1 !important; 
    margin-bottom: 8px !important;
    font-size: 0.95em;
}

.compact-modal h2 {
    margin-bottom: 10px !important;
    font-size: 1.8rem !important;
}

/* =========================================
    1. GRUNDINSTÄLLNINGAR & RESET
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

html {
    scroll-behavior: smooth;
}

h1 {
    font-family: 'Permanent Marker', cursive !important;
    color: #3d2b1f !important; /* Din bruna box-färg */
    text-align: center;
    font-size: clamp(4rem, 10vw, 7.5rem) !important;
    transform: rotate(-1.5deg);
    margin: 50px 0;
    
    /* Spray-dimma runt bokstäverna */
    text-shadow: 
        0 0 8px rgba(61, 43, 31, 0.4),   /* Inre dimma */
        0 0 15px rgba(61, 43, 31, 0.2),  /* Yttre svagare spray */
        4px 8px 15px rgba(0,0,0,0.5);    /* Skugga för läsbarhet */

    /* Gör kanterna lite mindre digitala och "mjuka" */
    filter: blur(0.3px); 
    
    /* Förhindrar att texten ser för platt ut */
    letter-spacing: -2px;
    background: linear-gradient(135deg, #3d2b1f 0%, #4d3b2f 50%, #3d2b1f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

body {
    font-family: Arial, sans-serif;
    background-image: url('../bilder/bakgrund.jpg'); 
    background-color: #1a1a1a; 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    color: white;
    margin: 0;
    text-align: center;
    font-size: clamp(18px, 1vw + 12px, 22px); 
    line-height: 1.6;
}

/* =========================================
    2. HEADER
   ========================================= */
.page-header {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-img {
    width: 350px;
    height: auto;
}

/* =========================================
    3. STARTSIDA (INDEX.HTML)
   ========================================= */
.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 25px;
    padding: 40px;
    max-width: 1400px;
    margin: 0 auto; 
}

.film-lank { 
    display: block; 
    background-color: rgba(0, 0, 0, 0.7); 
    padding: 20px;
    border-radius: 12px;
    text-decoration: none; 
    color: white;
    transition: transform 0.3s ease; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.film-lank:hover { 
    transform: scale(1.05); 
    border-color: #4CAF50;
}

.film-titel {
    display: block; 
    font-weight: bold;
    font-size: 1.2em;
    text-transform: uppercase; 
    margin-bottom: 10px;
    color: #DFB784;
}

.film-lank img { 
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block; 
}

@media (max-width: 1000px) { .grid-container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-container { grid-template-columns: 1fr; } }

/* =========================================
    5. VIDEO-SEKTION
   ========================================= */
.video-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 40px auto;
}

.responsive-video { 
    width: 100% !important;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    display: block;
}

/* =========================================
    5. BILD-SEKTION
   ========================================= */
/* Behållaren för varje enskild bild och dess text */
.simple-image-box {
    margin-bottom: 40px; /* Avstånd till nästa bild */
    width: 100%;
}

.simple-image-box:last-child {
    margin-bottom: 0; /* Ingen extra marginal efter sista bilden */
}

/* Själva bilden */
.full-width-img {
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 8px; /* Matchar dina andra hörn */
    border: 1px solid rgba(223, 183, 132, 0.3); /* En tunn guldram */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* Bildtexten */
.simple-caption {
    margin-top: 20px !important;
    
    /* Texten skalar mellan 22px och 32px beroende på skärmbredd */
    font-size: clamp(22px, 1.5vw + 16px, 32px) !important;
    
    color: #DFB784 !important; /* Din guldiga färg */
    text-align: center;
    font-style: italic;
    line-height: 1.4 !important;
    font-weight: 500; /* Gör texten lite fylligare för bättre läsbarhet */
    
    /* Ger texten lite utrymme på sidorna om den är lång */
    padding-left: 20px !important;
    padding-right: 20px !important;
    
    /* Valfritt: En subtil skugga för att den ska "poppa" mot det bruna */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}


/* =========================================
    6. Header/FOOTER)
   ========================================= */
.page-header {
    display: grid !important;
    /* Skapar 3 kolumner: Vänster, Mitten, Höger */
    grid-template-columns: 1fr auto 1fr !important; 
    align-items: center !important;
    padding: 20px 40px !important;
    width: 100% !important;
    max-width: 100% !important; /* Viktigt för att centreringen ska utgå från hela skärmen */
    margin: 0 auto !important;
    min-height: 120px;
}

/* Vänsterställer innehållet i första kolumnen */
.header-left {
    display: flex;
    justify-content: flex-start;
}

/* Centrerar innehållet i mittenkolumnen */
.header-center {
    display: flex;
    justify-content: center;
}

/* Högerkolumnen är tom men behövs för balansen */
.header-right {
    display: flex;
}

/* Loggorna storlek (justera efter behov) */
.secondary-logo {
    /* Ändra 120px till t.ex. 200px eller mer för att få den större */
    width: 220px !important; 
    height: auto !important;
    display: block !important;
    object-fit: contain;
    
    /* En liten justering om du vill att den ska ligga lite längre ifrån kanten */
    margin-left: 10px; 
}

.logo-img {
    width: 400px;
    height: auto;
    display: block;
}

/* Mobilanpassning: Stapla dem när det blir för trångt */
@media (max-width: 800px) {
    .page-header {
        grid-template-columns: 1fr !important; /* Gå över till en kolumn */
        gap: 20px;
        justify-items: center;
    }
    
    .header-left, .header-center {
        justify-content: center;
    }
    .secondary-logo {
        width: 150px !important;
        margin-left: 0;
    }
}
.page-footer {
    background-color: rgba(0, 0, 0, 0.9); 
    padding: 60px 20px;
    margin-top: 150px; 
    border-top: 4px solid #4CAF50;
    text-align: center;
    width: 100%;
}

.footer-content p {
    margin: 0;
    opacity: 0.8;
    font-size: 1.1em;
}

.footer-links {
    margin-top: 25px;
}

.footer-links a {
    color: #DFB784; 
    text-decoration: none;
    margin: 0 20px;
    font-weight: bold;
    font-size: 1.2em;
}

/* =========================================
    7. SEKTIONSDELAR/LEKTIONSMOMENT
   ========================================= */
.main-wrapper {
    max-width: 1100px; 
    margin: 0 auto;
    padding: 40px 20px;
}

.segment-container {
    background-color: #3d2b1f; 
    padding: 30px;
    margin: 0 auto 40px auto; 
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    text-align: left;
    width: 95% !important;
    max-width: 1200px !important; 
    box-sizing: border-box;
}

.segment-container h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 2.2rem;
}

h1 {
    text-align: center;
    font-size: 6rem; 
    font-weight: 800;
    margin-top: 40px;
    margin-bottom: 40px;
    color: #3d2b1f;
}

.segment-container ul {
    list-style-position: outside;
    margin: 15px 0;
    padding-left: 1.5rem;
}

.segment-container li {
    margin-bottom: 8px;
    padding-left: 5px;
}

/* ACCORDION */
.accordion-item {
    background-color: #587F7C;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.accordion-header {
    padding: 20px; 
    font-weight: bold;
    cursor: pointer;
    background-color: #36585A;
    list-style: none; 
    position: relative;
    font-size: 1.3rem;
}

.accordion-header::after {
    content: '▶';
    position: absolute;
    right: 15px;
    transition: transform 0.3s;
}

details[open] .accordion-header::after {
    transform: rotate(90deg);
}

.accordion-content {
    padding: 20px;
    border-top: 1px solid #ddd;
    line-height: 1.6;
    font-size: 1.5rem;
}

@media (max-width: 1000px) {
    .modal-content {
        column-count: 1 !important;
    }
}

/* 1. Inaktivera snapping på hela sidan */
html {
    scroll-snap-type: none; /* Ändrat från 'y mandatory' */
    scroll-behavior: smooth;
}

/* 2. Ta bort snappning från boxar, video och header */
.segment-container, 
.video-wrapper,
.page-header {
    scroll-snap-align: none; /* Ändrat från 'start' */
    scroll-margin-top: 0;    /* Kan nollställas */
}

/* 3. Ta bort snappning från sidfoten */
.page-footer {
    scroll-snap-align: none; /* Ändrat från 'end' */
}

.character-container {
    display: flex;
    justify-content: center;  /* Centrerar hela gruppen */
    align-items: flex-end;    /* Gör att karaktärerna "står" på samma baslinje */
    gap: 10px;                /* Mellanrum mellan karaktärerna */
    width: 100%;
    max-width: 1200px;        /* Samma maxbredd som ditt övriga innehåll */
    margin: 40px auto;        /* Ger luft uppåt och centrerar behållaren */
    padding: 0 20px;
}

.character-item {
    flex: 1;                  /* Gör att alla tar upp lika mycket plats */
    max-width: 800px;         /* Justera storleken på karaktärerna här */
    text-align: center;
}

.character-item img {
    width: 100%;              /* Bilden fyller sin behållare */
    height: auto;             /* Behåller proportionerna */
    display: block;
}

/* Responsiv fix för mobilen */
@media (max-width: 768px) {
    .character-container {
        gap: 10px;            /* Mindre mellanrum på små skärmar */
    }
}