/* =========================================================================
   1. GENERELLA STILAR & ANIMATIONER
   ========================================================================= */

/* Mjuk infasning för kort när de laddas */
.fade-in {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Svävande logotyp */
.floating-logo {
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0px); }
}

/* Ny animation för modalen (Version 3.2.1) */
.animate-pop-in {
    animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.95) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* =========================================================================
   2. TEXT, LAYOUT & LÄSBARHET (KONTRAST-FIXAR)
   ========================================================================= */

/* Hanterar radbrytningar i långa beskrivningar */
.whitespace-pre-line {
    white-space: pre-line;
}

/* Säkerställer att långa titlar inte förstör kortets höjd */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* GLOBAL KONTRAST-FIX: 
   Gör Tailwinds ljusgråa texter mörkare för bättre läsbarhet 
*/
.text-slate-300 { color: #64748b !important; } /* Går från Slate-300 till Slate-500 */
.text-slate-400 { color: #475569 !important; } /* Går från Slate-400 till Slate-600 */

/* STORLEKS-FIX: 
   Gör de minsta etiketterna (t.ex. datum-rubriker) lättare att se 
*/
.text-\[9px\] { 
    font-size: 11px !important; 
    letter-spacing: 0.025em;
}

/* =========================================================================
   3. DET MINIMALA TEMAT (STRUKTUR-OVERRIDES)
   ========================================================================= */

/* =========================================================================
   SOLNEDGÅNG-TEMAT (vibrance)
   Varm orange till djup bordeaux
   ========================================================================= */

.theme-vibrance h2#heroTitle,
.theme-vibrance #heroSubtitle {
    color: #ffffff !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}

/* =========================================================================
   MIDNATT-TEMAT (minimal)
   Mörk marinblå till petrol – text förblir vit på mörk bakgrund
   ========================================================================= */

.theme-minimal #siteHeader {
    padding-bottom: 4rem !important;
    padding-top: 2rem !important;
}

.theme-minimal h2#heroTitle {
    color: #ffffff !important;
    letter-spacing: -0.03em;
}

.theme-minimal #heroSubtitle {
    color: rgba(255,255,255,0.7) !important;
    font-weight: 500;
}

.theme-minimal #searchContainer,
.theme-minimal #activitiesContainer > div,
.theme-minimal .bg-white {
    box-shadow: 0 4px 24px rgba(15,23,42,0.08) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
}

.theme-minimal input,
.theme-minimal select {
    border-radius: 8px !important;
    background-color: #ffffff !important;
    border: 1px solid #94a3b8 !important;
    color: #1e293b !important;
}

.theme-minimal .floating-logo {
    animation: none !important;
}

/* =========================================================================
   NORRSKEN-TEMAT (organic)
   Djup lila till turkos/cyan – dramatisk och vacker
   ========================================================================= */

.theme-organic h2#heroTitle,
.theme-organic #heroSubtitle {
    color: #ffffff !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.theme-organic #searchContainer,
.theme-organic #activitiesContainer > div {
    border-radius: 20px !important;
}
/* =========================================================================
   4. LOKALT KOMMUNMÄRKE
   ========================================================================= */

.local-badge {
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
    margin-top: 2px;
}

.theme-minimal .local-badge {
    color: #94a3b8;
}

.theme-organic .local-badge {
    color: rgba(255, 255, 255, 0.6);
}