/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* Generell stil för hela sektionen */
.service-section-wrapper {
    max-width: 1200px; /* Maxbredd för hela sektionen */
    margin: 30px auto; /* Centrerar hela sektionen */
    padding: 0 20px;
}

/* **NYTT:** Rikta in oss på Avadas kolumnklasser direkt */
.service-row .fusion-layout-column.fusion_builder_column_5_12, /* Exempel för Avada 50% kolumn */
.service-row .fusion-layout-column.fusion_builder_column_1_2 { /* Standard 1/2 kolumn */
    width: 50% !important; /* Tvingar fram 50% bredd */
    padding: 0 30px !important; /* Utrymme mellan bild och kort */
    box-sizing: border-box;
    /* Kan behöva ta bort Avadas egna padding om de inte respekterar ovan */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Stil för bilden */
.service-split-image {
    width: 100%;
    height: auto;
    border-radius: 40px; 
    display: block;
    object-fit: cover; 
}

/* MOBILE FIX: Gör kolumnerna staplade på små skärmar */
@media (max-width: 800px) {
    .service-row .fusion-layout-column.fusion_builder_column_5_12,
    .service-row .fusion-layout-column.fusion_builder_column_1_2 {
        width: 100% !important;
        padding: 0 10px !important;
        margin-bottom: 30px;
    }
}
/* SLUT PÅ NYA REGLER FÖR BILD/KOLUMNER */


/* 💎 KORTETS DESIGN (Rundad och Skuggad) */
.service-card {
    background-color: #FFFFFF;
    border: none;
    border-radius: 20px; 
    padding: 30px 40px;
    margin-bottom: 25px; 
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.4s ease, transform 0.2s ease;
    width: 100%; /* Säkerställer att kortet fyller sin kolumn */
    max-width: 500px; /* Begränsar kortens bredd */
}

/* Effekt vid hovring */
.service-card:hover {
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

/* NYTT: CONTAINER FÖR RUBRIK OCH IKON */
.service-header {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    min-height: 2.2em;
}

/* Tjänstetitel (Vänsterställd, men Vertikalt Centrerad) */
.service-title {
    font-size: 1.8em;
    font-weight: 700;
    margin: 0; 
    color: #1A1A1A; 
    position: relative;
    display: flex;
    justify-content: flex-start; 
    flex-grow: 1; 
    background: none; 
}

/* 2. NY BASSTIL för Aktivt Kort */
.service-card.active {
    z-index: 10;
    transform: translateY(-3px); 
    
    /* NYCKELN TILL SUBTIL INTERN RAM VIA MULTIPEL SHADOW */
    animation: internal-border-flash 6s infinite alternate;
}

/* Definierar animation för subtil färgskiftning i den interna ramen */
@keyframes internal-border-flash {
    0% { 
        box-shadow: 
            inset 0 0 0 4px #1D2016, /* Mörk intern ram */
            0 5px 20px rgba(0, 0, 0, 0.2);
    }
    50% { 
        box-shadow: 
            inset 0 0 0 4px #DEE699, /* Ljus gul/grön */
            0 5px 20px rgba(0, 0, 0, 0.2);
    }
    100% { 
        box-shadow: 
            inset 0 0 0 4px #FFD47E, /* Accent */
            0 5px 20px rgba(0, 0, 0, 0.2);
    }
}


/* ➡️ EXPANDERINGS-IKONEN (Plussymbol) */
.toggle-icon {
    font-size: 2.2em;
    line-height: 1;
    color: #1A1A1A; /* SVART */
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Lägg till plussymbolen med pseudo-element */
.service-card .toggle-icon::before {
    content: '+'; 
    font-weight: 300;
}

/* Ikonen vid expanderat läge (Minustecken) */
.service-card.active .toggle-icon {
    transform: rotate(180deg); 
    color: #404040; /* MÖRKGRÅTT */
}

/* Ändrar plustecknet till minustecken vid aktivt läge */
.service-card.active .toggle-icon::before {
    content: '−'; 
}

/* 📉 DETALJERAD INFORMATION (Dold som standard) */
.service-details {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.6s ease-in-out, opacity 0.4s 0.2s, visibility 0s 0.6s;
    padding-top: 0;
    margin-top: 20px;
}

/* 📈 Detaljer när kortet är aktivt */
.service-card.active .service-details {
    max-height: 800px;
    opacity: 1;
    visibility: visible;
    padding-top: 20px;
    border-top: 2px solid #F0F0F0;
    transition: max-height 0.6s ease-in-out, opacity 0.4s 0.2s, visibility 0s;
}

/* Text & listor inuti detaljerna */
.service-details p, .service-details ul {
    color: #4A4A4A;
    line-height: 1.6;
}

/* PUNKTLISTA FIX (Bockar) */
.service-details ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.service-details ul li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 8px;
}
.service-details ul li::before {
    content: '✓'; 
    color: #1A1A1A; /* SVARTA BOCKAR */
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
}

/* 🔗 LÄS MER LÄNK (Text, Svart, Vågig understrykning) */
.service-details .read-more {
    display: inline-block !important; 
    margin-top: 25px !important;
    padding: 0 !important; 
    text-decoration: underline !important; 
    text-decoration-style: wavy !important; 
    text-underline-offset: 4px !important; 
    font-weight: 600 !important;
    color: #1A1A1A !important; 
    background-color: transparent !important; 
    border-radius: 0 !important; 
    border: none !important;
    box-shadow: none !important; 
    transition: color 0.3s ease, text-decoration-color 0.3s ease !important;
    transform: none !important;
}
.service-details .read-more:hover {
    color: #404040 !important; 
    text-decoration-color: #404040 !important; 
    background-color: transparent !important;
    transform: none !important;
}


/* --- KLICKBAR CTA-BOX FÖR TJÄNST-SIDAN (Med GRADIENTRAM och Skugga) --- */

.cta-link-box-tjänst {
    display: block;
    max-width: 800px; /* Maxbredd för boxen */
    margin: 60px auto; /* Centrera boxen och ge vertikalt utrymme */
    text-align: center;
    padding: 40px 60px; /* Inre stoppning */
    text-decoration: none !important; 
    color: inherit;
    position: relative; 
    z-index: 1; 
    border-radius: 20px; /* Rundade hörn för huvudboxen */
    overflow: hidden; /* VIKTIGT: Klipper allt som går utanför ramen */
    
    /* Basläge: Boxen är transparent som standard */
    background-color: transparent !important;
    box-shadow: none !important; 
    border: none !important; /* Ingen ram som standard */
    
    /* Animation för hela boxen */
    transition: transform 0.3s ease-in-out, box-shadow 0.4s ease-out, background-color 0.4s ease-out;
}

/* Pseudo-element ::after: Denna blir hela BOXENS BAKGRUND och SKUGGA */
.cta-link-box-tjänst::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Ligger bakom texten */
    border-radius: inherit; /* Ärver rundning från huvudboxen */
    
    /* Dölj bakgrund/skugga som standard */
    background-color: transparent;
    box-shadow: none;
    opacity: 0;
    transform: scale(0.98); /* Startar något mindre för mjuk animation */
    
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, background-color 0.4s, box-shadow 0.4s;
}

/* Pseudo-element ::before: Denna blir den ANIMERADE GRADIENTRAMEN */
.cta-link-box-tjänst::before {
    content: '';
    position: absolute;
    /* Placera ramen lite utanför ::after för ramtjocklek */
    top: -6px; /* Ramtjocklek 6px */
    left: -6px;
    right: -6px;
    bottom: -6px;
    z-index: -2; /* Ligger bakom allt annat */
    border-radius: 26px; /* Viktigt: Matchar 20px (box) + 6px (ramtjocklek) */
    
    /* Gradientbakgrund för ramen */
    background: linear-gradient(
        45deg, 
        #1A1A1A 0%,      /* Mörkare färg */
        #5B8C5A 33%,     /* Mellanfärg */
        #FFD47E 66%,     /* Ljusare färg */
        #FE5F55 100%     /* Röd-Orange */
    );
    background-size: 300% 300%; /* Större för animation */
    
    /* Ramen är osynlig och liten som standard */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}


/* --- HOVER-TILLSTÅND (DÅ BOXEN SKA DYKA UPP) --- */

.cta-link-box-tjänst:hover {
    transform: translateY(-5px); /* Lyft upp boxen */
}

/* 1. ANIMERA RAMEN (::before) att dyka upp */
.cta-link-box-tjänst:hover::before {
    opacity: 1; 
    transform: scale(1); 
    animation: cta-gradient-move 6s linear infinite forwards; /* Starta färgförflyttning */
}

/* 2. ANIMERA BAKGRUNDEN & SKUGGAN (::after) att dyka upp */
.cta-link-box-tjänst:hover::after {
    opacity: 1;
    transform: scale(1);
    background-color: #FFFFFF; /* Vit bakgrund dyker upp */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); /* Tydligare skugga */
}


/* Keyframes för att animera gradienten */
@keyframes cta-gradient-move {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; } 
}

/* --- TEXTSTYLING INUTI CTA-BOXEN --- */
.cta-link-box-tjänst h2,
.cta-link-box-tjänst p {
    text-decoration: none !important; 
    color: #1A1A1A !important; 
    font-style: normal !important; 
    line-height: 1.1em !important; 
    margin-bottom: 0 !important; 
    margin-top: 0 !important; 
    position: relative; 
    z-index: 2; 
    transition: color 0.5s ease-in-out; 
}

.cta-link-box-tjänst p {
    font-size: 1.3em;
    color: #4A4A4A !important;
    margin-top: 15px !important; 
    line-height: 1.4em !important; 
}
/* --- SLUT PÅ CTA BOX-ANIMATION --- */

/* ================================
   Grundstil för alla länkar på sidan
   ================================ */
a {
  color: #7fffd4;                          /* Din turkosa färg */
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #7fffd4;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* ================================
   Svart variant av länkar
   ================================ */
a.link-black,
a.link-black:visited,
a.link-black:hover,
a.link-black:active {
  color: #000;
  text-decoration-color: #000;
}

/* Extra säkerhet om något i dina mobile styles överskriver länkar */
@media (max-width: 768px) {
  a.link-black,
  a.link-black:visited,
  a.link-black:hover,
  a.link-black:active {
    color: #000 !important;
    text-decoration-color: #000 !important;
  }
}

/* ================================
   Luft mellan kontaktlänkar
   ================================ */
.contact-links a {
  display: inline-block;
  margin-bottom: 0.6rem;  /* Justera efter smak */
}

/* Mer luft på större skärmar */
@media (min-width: 1024px) {
  .contact-links a {
    margin-bottom: 0.8rem;
  }
}

/* ================================
   Luft runt kontaktsektionen
   ================================ */
.contact-section {
  padding: 2rem 1.5rem;
}

@media (min-width: 1024px) {
  .contact-section {
    padding: 3rem 4rem;   /* Mer luft på desktop */
  }
}