/* ========================================================================= */
/* style.css - SLUTLIG REVISION (VERSION C: MÖRKT GRÖNT PRIMÄRT) */
/* ========================================================================= */

/* GRUNDSTILAR & FÄRGPALETT */
:root {
    /* * FÄRGPALETT: BROSCHYR FÄRGER
     * Dessa variabler styr hela webbplatsens färgschema.
     */
    --color-primary: #043002;       /* Mycket Mörkt Grönt (Huvudfärg för rubriker, footer, etc) */
    --color-secondary: #88A787;     /* Dämpad Ljus Grönt (Accentfärg för CTA, hover) */
    
    --color-tertiary: #FFFFFF;      /* Rent Vitt (För kort & element) */
    --color-light-green: #F0F5F0;   /* Mycket Ljus Grön/Grå ton för subtila bakgrunder */
    --color-background: #FAFAFA;    /* Ren, nästan vit bakgrund */
    
    --color-text: #1B2631;          /* Mycket mörk text för läsbarhet */
    --color-light-text: #ffffff;    /* Ljus text */
    
    /* * TYPSNITT: ROCKWELL & MONACO (Broschyr kombination) */
    --font-heading: 'Rockwell', 'Georgia', serif; 
    --font-body: 'Monaco', monospace; 
}

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

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
}

/* GLOBAL INNEHÅLLSOMSLUTNING */
.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 5%;
}

/* ========================================================================= */
/* 1. NAVIGERING, HERO & CTA */
/* ========================================================================= */
.main-header {
    background-color: var(--color-tertiary); /* Använder vitt */
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.logo { 
    color: var(--color-primary); 
    font-size: 1.5em;
    font-weight: bold;
    font-family: var(--font-heading); /* Använder rubriktypsnitt för logotypen */
}
nav ul { list-style: none; display: flex; }
nav ul li a { text-decoration: none; color: var(--color-text); padding: 10px 15px; transition: color 0.3s; }
nav ul li a:hover, nav ul li a.active { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); }

.hero { background: url('klaralven.jpg') center/cover no-repeat; height: 60vh; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--color-light-text); position: relative; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 1; }
.hero-content { position: relative; z-index: 10; max-width: 800px; padding: 20px; }

.cta-button {
    display: inline-block;
    background-color: var(--color-secondary); /* Ljus Grönt */
    color: var(--color-text); /* Mörk text för hög kontrast */
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 2px; /* Liten avrundning */
    transition: background-color 0.3s;
    margin-top: 15px;
}
.cta-button:hover { background-color: var(--color-primary); color: var(--color-light-text); } /* Vid hover Mörkt Grönt */

/* ========================================================================= */
/* 2. PRODUCENT ÖVERSIKT & KORT (PRODUCER.HTML) */
/* ========================================================================= */

.page-header {
    text-align: center;
    padding: 40px 0 20px;
}
.page-header h1 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-bottom: 10px;
}

.filter-section { /* Sök och Filter */
    text-align: center;
    padding: 20px 0;
    margin-bottom: 30px;
    background-color: var(--color-tertiary); /* VIT */
    border-radius: 4px;
}
#producerSearch {
    width: 90%;
    max-width: 600px;
    padding: 12px 20px;
    border: 1px solid var(--color-primary); /* Mörkt Grön kant */
    border-radius: 4px;
    font-size: 1em;
}

.producer-list, .producer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.producer-card {
    background-color: var(--color-light-text);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: transform 0.3s;
    min-width: 320px;
    max-width: 400px;           
    justify-self: center;
    display: flex;            
    flex-direction: column;
}
.producer-card:hover { transform: translateY(-5px); }
.producer-card img { width: 100%; height: 200px; object-fit: cover; }
.producer-card h3 { padding: 15px 15px 5px; color: var(--color-primary); }
.producer-card .specialty { font-size: 0.9em; color: #666; height: 40px; margin-bottom: 5px; padding: 0 15px 15px; }

.read-more {
    display: block;
    padding: 10px 15px;
    background-color: var(--color-secondary); /* Ljus Grönt */
    color: var(--color-text); 
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    border-radius: 0; /* Rak botten */
    margin-top: auto;
}
.read-more:hover { background-color: var(--color-primary); color: var(--color-light-text); }

.view-all { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: 2px; text-decoration: none; }

/* ========================================================================= */
/* 3. PRODUCENT SLIDER (INDEX.HTML) */
/* ========================================================================= */

.producer-slider-container { padding: 40px 5%; text-align: center; max-width: 1200px; margin: 0 auto; }
.producer-slider-container h2 { font-family: var(--font-heading); color: var(--color-primary); margin-bottom: 30px; }

.slider-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; }

.producer-slider-track {
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth; 
    display: flex; 
    gap: 30px;
    overflow-x: scroll; 
    width: 100%;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
.producer-slider-track::-webkit-scrollbar { display: none; }

.producer-slider-track .slide-item { flex: 0 0 calc((100% / 3) - 20px); min-width: 250px; }

.slider-control {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: var(--color-primary); /* Mörkt Grönt */
    color: var(--color-light-text);
    border: none; padding: 10px 15px; cursor: pointer; z-index: 20; 
    border-radius: 5px; opacity: 0.8; transition: opacity 0.3s;
}
.slider-control:hover { opacity: 1; }
.slider-control span { font-size: 1.2em; font-weight: bold; }
.prev { left: 0; }
.next { right: 0; }

/* --- TILLÄGG FÖR INDEX.HTML --- */

/* Generell stil för introduktionssektionen */
.mission-intro h2 {
    color: var(--color-primary); /* Huvudrubriken blir Mörkt Grönt */
    font-family: var(--font-heading);
    margin-bottom: 20px;
}

/* Anpassning för 'Om Oss Teaser' som använder .mission-section */
.mission-section {
    margin-top: 50px;
}
.mission-text h2 {
    color: var(--color-primary); /* Rubriken i teasern blir Mörkt Grönt */
    font-family: var(--font-heading);
    margin-bottom: 15px;
}
.mission-image img {
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    margin-top: 15px;
}

/* Stilen för event-teaser på index.html (Next-event-teaser) */
.next-event-teaser {
    background-color: var(--color-light-green); /* Lätt Grön/Grå bakgrund */
    padding: 30px 5%;
    text-align: center;
    border-top: none; 
    border-bottom: 3px solid var(--color-secondary); /* Subtil avdelare med accent */
    margin-bottom: 50px; 
}

/* Liten CTA-knapp för Om Oss Teaser */
.cta-button.small-cta {
    background-color: var(--color-secondary); /* Ljus Grönt */
    color: var(--color-text); /* Mörk text */
    padding: 8px 18px;
    font-size: 0.9em;
    font-weight: normal;
    transition: background-color 0.3s;
}
.cta-button.small-cta:hover {
    background-color: var(--color-primary);
    color: var(--color-light-text);
}

/* ========================================================================= */
/* NY STIL FÖR NEXT-EVENT-TEASER (INDEX.HTML) - FÖRENKLAD CARD */
/* ========================================================================= */

.next-event-teaser h2 {
    color: var(--color-primary); 
    font-family: var(--font-heading);
    margin-bottom: 25px;
    font-size: 1.8em;
}

.next-event-teaser .event-card {
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); /* Standard skugga */
    transform: none; 
    border-radius: 8px; /* Standard avrundning */
    border: none; /* Ingen hård ram */
    overflow: hidden; 
    transition: transform 0.3s, box-shadow 0.3s;
    
    background-color: var(--color-tertiary); 
}

.next-event-teaser .event-card:hover {
    transform: translateY(0); 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Subtil hover-effekt */
}

/* Datum Box */
.next-event-teaser .event-card .event-date {
    background-color: var(--color-primary); /* Mörkt Grönt */ 
    color: var(--color-light-text); /* Vit text */
    
    border-right: 5px solid var(--color-secondary); 
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    padding: 15px 0; 
}

.next-event-teaser .event-card .event-details h3 {
    color: var(--color-primary); 
    font-weight: 900;
}


/* ========================================================================= */
/* 4. ENKILDA PRODUCENTSIDOR (KNOTEBO GARD.HTML) */
/* ========================================================================= */

.producer-page { padding-top: 0; }

.producer-hero {
    background: url('knotebo_hero.jpg') center/cover no-repeat;
    height: 40vh; display: flex; align-items: flex-end; color: var(--color-light-text);
    position: relative; padding: 30px 5%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1; 
}
.producer-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 1; }

.producer-header { position: relative; z-index: 2; text-align: left; width: 100%; }
.producer-header h1 { color: var(--color-light-text); font-size: 2.8em; margin-bottom: 0; }
.slogan { color: var(--color-light-text); font-size: 1.1em; font-style: normal; }
.producer-logo { max-width: 400px; border-radius: 50%; border: 3px solid var(--color-light-text); margin-bottom: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }

.producer-info-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-top: 40px; margin-bottom: 40px;
    padding: 0 5%; max-width: 1200px; margin-left: auto; margin-right: auto;
}
.info-section h2 { color: var(--color-primary); font-size: 1.5em; margin-bottom: 15px; }

.product-list { list-style: none; padding-left: 0; }
.product-list li {
    padding: 10px 15px; margin-bottom: 8px; background-color: var(--color-light-green); border-radius: 4px;
    color: var(--color-text); transition: background-color 0.2s; border: 1px solid var(--color-light-green);
}
.product-list li:hover { background-color: var(--color-primary); color: var(--color-light-text); } 
.product-icon { margin-right: 10px; font-size: 1.3em; }

.details-section { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 50px; padding: 0 5%; max-width: 1200px; margin-left: auto; margin-right: auto; }
.details-box { background-color: var(--color-tertiary); padding: 30px; border-radius: 8px; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s; }
.details-box:hover { transform: translateY(-3px); }
.details-box h3 { color: var(--color-primary); margin-bottom: 15px; border-bottom: 3px solid var(--color-secondary); /* Ljus Grön linje */ padding-bottom: 5px; }

.hours-table { width: 100%; margin-top: 15px; font-size: 1.1em; }
.hours-table td { padding: 5px 0; }
.hours-table td:last-child { text-align: right; font-weight: bold; color: var(--color-primary); } 
.season-note { color: var(--color-text); background-color: var(--color-light-green); padding: 5px 10px; border-radius: 3px; display: inline-block; }

.map-section { padding: 0 5%; margin-bottom: 50px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.map-placeholder { width: 100%; border: 5px solid var(--color-tertiary); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }

/* ========================================================================= */
/* 5. AGENDA & EVENT STILAR (AGENDA.HTML och INDEX.HTML) */
/* ========================================================================= */

.agenda-grid { display: block; margin-bottom: 50px; }
.event-list-container h2 { color: var(--color-primary); margin-bottom: 20px; font-family: var(--font-heading); }

/* --- Eventkort & Datum (Standard) --- */
.event-card {
    display: flex;
    padding: 0; !important
    justify-content: flex-start;
    background-color: var(--color-tertiary);
    margin-bottom: 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); 
    border-radius: 8px; 
    overflow: hidden;
    /* FIX: Minimale hoogte ingesteld op de afbeeldingshoogte (120px) */
    min-height: 120px; 
    transition: all 0.3s ease;
}
.event-card:hover { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); transform: scale(1.01); }

/* --- Datum Blok (.event-date) --- */
.event-date {
    width: 160px; 
    flex-shrink: 0;
    text-align: center;
    background-color: var(--color-secondary); 
    color: var(--color-text); 
    /* Padding is nu 0, zodat het Flex-Centeren optimaal werkt binnen de 120px */
    padding: 5px 0; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 5px solid var(--color-primary); 
}

/* FIX: Agressieve reset voor verticale ruimte */
.event-date .year,
.event-date .month,
.event-date .day {
    margin: 0; 
    padding: 0;
    line-height: 1; /* Elimineert onnodige afstand */
    vertical-align: top; 
    display: block;
}
.event-date .year { font-size: 0.75em; font-weight: bold; margin-bottom: 2px; margin-top: 5px; }
.event-date .month { font-size: 0.9em; text-transform: uppercase; font-weight: bold; }
.event-date .day { font-size: 2.2em; /* Dag-grootte iets kleiner om te passen */ font-weight: bold; margin-bottom: 2px; }

/* --- Details Blok (.event-details) --- */
.event-details { 
    /* Minimale padding om te passen bij 120px hoogte */
    padding: 5px 20px; 
    flex-grow: 1; 
}
.event-details h3:first-child { 
    margin-top: 0;
}
.event-details *:last-child {
    margin-bottom: 0;
}
.event-details h3 { color: var(--color-primary); margin-bottom: 3px; }
.event-details p { margin-top: 3px; margin-bottom: 3px; }
.time-location { font-weight: bold; color: var(--color-secondary); margin-top: 3px; margin-bottom: 3px; display: block; }
.event-link { display: inline-block; padding: 4px 8px; margin-top: 5px; font-size: 0.8em; background-color: var(--color-light-green); color: var(--color-text); border-radius: 3px; font-weight: bold; text-decoration: none; transition: background-color 0.3s; }
.event-link:hover { background-color: var(--color-primary); color: var(--color-light-text); }

/* **DE FIX VOOR DE AFBEELDING:** Vaste Afmetingen (150px breed x 120px hoog) */
.event-card-image {
    width: 300px; 
    height: 400px; /* Controleert de kaarthoogte */
    flex-shrink: 0;
    overflow: hidden;
    align-self: stretch; 
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.event-card-image img {
    width: 100%;
    height: 100%; 
    object-fit: cover; /* Vult de 150x120px ruimte zonder vervorming. */
    display: block;
}


/* --- Nästa Event Highlight (Agenda-sidan) --- */
.event-card.next-event-highlight {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); 
    transform: none; 
    border: none; 
    position: relative; 
    z-index: 10;
    background-color: var(--color-tertiary); 
}

.event-card.next-event-highlight:hover {
    box-shadow: 0 0 0 3px var(--color-secondary), 0 10px 20px rgba(0, 0, 0, 0.25);
    transform: scale(1.02); 
}

.event-card.next-event-highlight .event-date {
    /* ANPASSNING FÖR AGENDA: Datumblock för highlight är nu Mörkt Grönt */
    background-color: var(--color-primary); 
    color: var(--color-light-text); 
    border-right-color: var(--color-secondary); 
    padding: 2px 0; /* Använder samma minimala padding */
}

.event-card.next-event-highlight .event-details h3 {
    color: var(--color-primary); 
    font-weight: 900;
}

/* --- Filterkontroller --- */
.filter-controls {
    text-align: center;
    margin-bottom: 30px;
    padding: 15px;
    background-color: var(--color-tertiary);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filter-button {
    background-color: var(--color-light-green);
    color: var(--color-text);
    border: 1px solid var(--color-primary); 
    padding: 10px 15px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap; 
}

.filter-button:hover {
    background-color: var(--color-primary);
    color: var(--color-light-text);
    border-color: var(--color-primary);
}

.filter-button.active {
    background-color: var(--color-secondary); /* Ljus Grönt för aktivt filter */
    color: var(--color-text); /* Mörk text */
    border-color: var(--color-secondary);
}

/* --- Bokningssektion (booking-section) --- */
.booking-section { 
    text-align: center; 
    padding: 40px; 
    background-color: var(--color-light-green); 
    border-radius: 10px; 
    margin-bottom: 40px; 
}
.booking-section h2 { 
    color: var(--color-primary); 
    margin-bottom: 10px; 
}

/* ========================================================================= */
/* 6. OM OSS STILAR (OMOSS.HTML) */
/* ========================================================================= */

/* Hero sektion för Om Oss */
.hero-omoss {
    background-image: url('omoss_hero.jpg'); 
    background-size: cover;
    background-position: center 30%;
    height: 400px;
    color: var(--color-light-text);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.hero-omoss::before { 
    background: rgba(0, 0, 0, 0.4); 
}

/* Stilar för Kärnvärdessektionen (3 kolumner) */
.values-section {
    text-align: center;
    padding: 60px 5%;
}

.section-description {
    max-width: 700px;
    margin: 0 auto 30px auto;
    text-align: center;
}

.value-columns {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 40px;
}

.value-item {
    flex: 1;
    padding: 30px;
    background-color: var(--color-tertiary); /* Vit bakgrund */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s;
}
.value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.value-icon {
    display: block;
    font-size: 3.5em; 
    margin-bottom: 15px;
    color: var(--color-primary); /* Mörkt Grönt ikonfärg */
}

.value-item h3 {
    margin-top: 0;
    color: var(--color-primary); /* Mörkt Grönt rubrik */
    font-family: var(--font-heading);
}

.history-section {
    padding: 60px 5%; /* Stor padding för att ge luft */
    max-width: 1200px;
    margin: 40px auto; /* Marginal ovanför och under sektionen */
    background-color: var(--color-light-green); /* Subtil bakgrundsfärg */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Lätt skugga */
    text-align: center;
}

.history-section h2 {
    color: var(--color-primary); 
    font-family: var(--font-heading);
    font-size: 2em;
    margin-bottom: 25px;
}

.history-section p {
    max-width: 800px;
    margin: 0 auto 15px auto;
}

.funding-acknowledgement {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid var(--color-secondary); /* En avdelare */
}

.funding-acknowledgement h3 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    margin-bottom: 15px;
}

.funding-acknowledgement ul {
    list-style: none;
    padding: 0;
    margin: 20px auto 30px auto;
    max-width: 500px;
    text-align: left;
}

.funding-acknowledgement ul li {
    background: var(--color-tertiary); /* Vit bakgrund för listobjekt */
    padding: 10px 15px;
    margin-bottom: 8px;
    border-left: 5px solid var(--color-secondary); /* Ljus Grön accent */
    border-radius: 4px;
    font-weight: bold;
}

/* Större logotypstil för den nya sektionen */
.partner-logos.large-logos {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Utrymme mellan logotyperna */
}

.partner-logos.large-logos .partner-logo {
    max-height: 150px; /* Gör logotyperna större */
    width: auto;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px;
}

/* Stil för Story/Samarbetssektionen (section.story-section) */
.story-section {
    padding: 60px 5%;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.story-text {
    padding: 20px 0;
}

.story-text h3 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.8em;
    margin-bottom: 15px;
}

.story-image-placeholder img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

/* --- Äldre Om Oss Stilar --- */
.mission-section, .regional-strength {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 50px;
}
/* ========================================================================= */
/* 7. KONTAKTSIDA STILAR (KONTAKT.HTML) */
/* ========================================================================= */

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

/* Formulärsektionen */
.contact-form {
    background-color: var(--color-tertiary); /* Vit bakgrund */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); 
}

.contact-form h2 {
    color: var(--color-primary); /* Mörkt Grönt rubrik */
    margin-bottom: 20px;
    border-bottom: 3px solid var(--color-light-green); /* Lätt Grön linje */
    padding-bottom: 10px;
}

.contact-form form {
    display: grid;
    gap: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-text);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px; 
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: var(--font-body);
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-primary); /* Mörkt Grön kant vid fokus */
    outline: none;
}

/* Info-sektionen */
.contact-info {
    background-color: var(--color-light-green);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-info h2 {
    color: var(--color-primary); /* Mörkt Grönt rubrik */
    margin-bottom: 25px;
}

.contact-detail {
    margin-bottom: 25px; 
    display: flex; 
    align-items: flex-start;
}

.contact-detail .icon {
    font-size: 1.5em;
    color: var(--color-secondary); /* Ljus Grön ikonfärg */
    margin-right: 15px;
    flex-shrink: 0;
}

.contact-detail p {
    margin-top: 0;
}
.contact-detail p strong {
    display: block;
    color: var(--color-primary);
}

.contact-detail a {
    color: var(--color-text);
    text-decoration: none;
}
.contact-detail a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Ny CTA-sektion i botten */
.contact-cta {
    text-align: center;
    padding: 40px;
    background-color: var(--color-primary);
    color: var(--color-light-text);
    border-radius: 10px;
    margin-top: 50px;
}
.contact-cta h2 {
    color: var(--color-light-text);
    font-family: var(--font-heading);
    margin-bottom: 15px;
}
.contact-cta .cta-button {
    background-color: var(--color-secondary);
    color: var(--color-text);
}
.contact-cta .cta-button:hover {
    background-color: #6a8269;
}


/* ========================================================================= */
/* 8. FOOTER & MOBILANPASSNING (MEDIA QUERIES) */
/* ========================================================================= */

footer { 
    background-color: var(--color-primary); /* Mörkt Grönt */
    color: var(--color-light-text); 
    text-align: center; 
    padding: 20px; 
    font-size: 0.9em; 
}

/* --- TILLÄGG FÖR PARTNERLOGOTYPER I FOOTER --- */

.partner-logos {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
}

.partner-logos p {
    font-size: 0.9em;
    margin-bottom: 10px;
    opacity: 0.8; 
}

.partner-logo {
    max-height: 60px; 
    margin: 0 10px;
    vertical-align: middle;
}


/* ------------------------------------------------------------------------- */
/* --- MEDIA QUERIES (RESPONSIV DESIGN) --- */
/* ------------------------------------------------------------------------- */

/* Anpassningar för mellan- och små skärmar (upp till 900px) */
@media (max-width: 900px) {
    
    /* Generell layout */
    .producer-info-grid, .details-section, .agenda-grid { 
        grid-template-columns: 1fr; 
        padding: 0 5%; 
    }
    
    /* Agenda Anpassningar */
    .event-card { flex-direction: row; }
    .event-date { padding: 5px; } 
    .event-details { padding: 5px 10px; }

    /* Producent Anpassningar */
    .producer-slider-track .slide-item { flex: 0 0 calc((100% / 2) - 15px); }
    .details-box { text-align: center; }
    .hours-table { margin: 10px auto; max-width: 300px; }
    .hours-table td:last-child { text-align: right; }
    
    /* Om Oss (Gamla sektioner) */
    .mission-section, .regional-strength {
        grid-template-columns: 1fr; 
    }
    .mission-image {
        order: -1; 
        margin-bottom: 30px;
    }
    .stat-box-grid {
        flex-direction: column;
    }
    .stat-box {
        flex-basis: 100%;
    }

    /* Om Oss (Nya sektioner) */
    .value-columns {
        flex-direction: column; 
        gap: 20px;
    }
    .story-grid {
        grid-template-columns: 1fr; 
    }
    .story-image-placeholder {
        order: -1; 
        margin-bottom: 20px;
    }
    
    /* Kontakt-sidan */
    .contact-grid {
        grid-template-columns: 1fr; 
    }
}

/* Anpassningar för små mobiler (upp till 768px) */
@media (max-width: 768px) {
    /* Generell mobilanpassning för små skärmar */
    .main-header { flex-direction: column; align-items: flex-start; }
    nav ul { margin-top: 10px; flex-direction: column; width: 100%; }
    nav ul li a { display: block; padding: 8px 0; }
    .hero h1 { font-size: 2em; }
    .slider-control { display: none; }
    .producer-slider-track .slide-item { flex: 0 0 80%; }
    .producer-hero::before { background: rgba(0, 0, 0, 0.5); }
    .filter-controls { display: flex; flex-wrap: wrap; justify-content: center; } 
    .filter-button { margin: 5px 3px; }
    .event-card-image {
        display: none;
}

.producer-logo {
        max-width: 150px; /* Stel een vaste maximumbreedte in */
        height: auto;
    }
    
/* Mobilanpassning för stora logotyper */
@media (max-width: 600px) {
    .partner-logos.large-logos {
        flex-direction: column;
        gap: 15px;
    }
    .partner-logos.large-logos .partner-logo {
        max-height: 70px; 
    }
}
@media (max-width: 600px) {
    .partner-logo {
        max-height: 30px; 
        margin: 0 5px;
    }
}