/* Generella nollställningar */
.main-navigation ul {
    list-style: none !important; /* Behåll !important för att säkerställa nollställning */
    margin: 0 !important;
    padding-left: 0 !important;
}

/* ------------------------------------------- */
/* --- BASREGLER (Gäller för alla skärmar som standard) --- */
/* ------------------------------------------- */

/* Hamburgarknapp, mobilmeny-modal och stäng-krysset är dolda som grundläge */
.main-navigation .menu-toggle,
#mobile-menu-modal,
#mobile-menu-modal .modal-close {
    display: none;
}

/* Desktop-menyn är synlig som standard */
#desktop-menu-container {
    display: block;
}

/* Mobilmenymodalens grundläggande utseende när den är AKTIV */
#mobile-menu-modal.is-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Förhindra scroll på body när modalen är öppen (klass läggs till/tas bort av JS) */
body.modal-open {
    overflow: hidden;
}

/* ------------------------------------------- */
/* Desktop-specifik CSS (> 768px) */
/* ------------------------------------------- */
@media (min-width: 960px) {

    /* Säkerställ att desktop-menyn är synlig och mobila element dolda */
    #desktop-menu-container {
        display: block;
    }
    
    .main-navigation {
        display: flex;
        align-items: center;
    }

    .main-navigation .menu-toggle,
    #mobile-menu-modal {
        display: none;
    }

    .main-navigation ul.menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .main-navigation ul.menu li {
        position: relative;
        margin-left: 30px;
    }

    .main-navigation ul.menu a {
        display: block;
        padding: 15px 0;
        color: var(--sp-white);
        text-decoration: none;
        white-space: nowrap;
    }

    .main-navigation ul.menu a:hover {
        color: var(--primary-color);
    }

    .main-navigation ul.sub-menu {
        font-size: 0.85rem;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background-color: #151515;
        border: 1px solid #ddd;
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        padding: 0;
        margin: 0;
        list-style: none;
        flex-direction: column;
    }
    /* Hovringsregler för desktop-undermenyer */
    .main-navigation ul li:hover > ul.sub-menu,
    .main-navigation ul li.focus > ul.sub-menu {
        display: block;
    }
    .main-navigation ul.sub-menu li {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        white-space: nowrap;
    }
    .main-navigation ul.sub-menu li a {
        display: block;
        padding: 10px 15px;
        color: var(--sp-white);
        text-decoration: none;
    }
    
    .main-navigation ul.sub-menu ul.sub-menu {
        top: 0;
        left: 100%;
    }

}


/* ------------------------------------------- */
/* Mobil-specifik CSS (<= 768px) */
/* ------------------------------------------- */
@media (max-width: 959px) {

    /* Dölj desktop-menyn på mobil */
    #desktop-menu-container {
        display: none;
    }

    .main-navigation {
        display: flex;
    }
    /* Visa Hamburgarknapp */
    .main-navigation .menu-toggle {
        display: block;
        fill: var(--sp-white);
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0;
        position: relative;
        z-index: 1000001;
        pointer-events: auto;
    }
    
    .mobile-menu-modal .menu a {
        color: var(--sp-black);
    }
    
    /* Dölj hamburgarknappen när modalen är öppen */
    body.modal-open .main-navigation .menu-toggle {
        display: none;
    }

    /* Stäng-krysset i modalen */
    #mobile-menu-modal .modal-close {
        display: none;
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1000000;
        font-size: 0;
    }

    /* Visa stäng-krysset när modalen är öppen */
    #mobile-menu-modal.is-active .modal-close {
        display: block;
    }

    /* Innehåll i modalen */
    #mobile-menu-modal .mobile-menu-modal-content {
        min-width: 20rem;
        max-width: 700px;
    }

    /* Mobilmeny UL (själva menyn i modalen) */
    #mobile-menu-modal .mobile-menu-inner ul.menu {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* ----- Länktext (A-taggen) för ALLA LI ----- * /
    /* Denna regel gäller för A-taggen direkt inuti LI (utan barn) OCH inuti .menu-item-wrapper */
    #mobile-menu-modal .mobile-menu-inner ul.menu li > a,
    #mobile-menu-modal .menu-item-wrapper > a {
        flex-grow: 1; /* Länken tar upp så mycket utrymme som möjligt */
        font-size: 1.75rem; /* LÖSNING PÅ PROBLEM 7: Konsekvent font-size */
    }

    /* ----- Wrapper för länk och pil (.menu-item-wrapper) - endast för LI med barn ----- * /
    /* Denna container hanterar horisontell placering av länk och pil */
    #mobile-menu-modal .menu-item-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    /* ----- Pil (Expand/Collapse Icon) ----- */
    #mobile-menu-modal .sub-menu-toggle-icon {
        color: #151515;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(2rem + 1.75rem * 1.5); /* Bredd på klickbar yta för pilen */
        background-color: #e0e0e0; /* Bakgrundsfärg för pil-knappen */
        cursor: pointer;
        transition: transform 0.3s ease-out;
        margin-left: 1px;
        box-sizing: border-box;
    }

    /* Rotera pilen när undermenyn är expanderad */
    #mobile-menu-modal li.menu-item-expanded > .menu-item-wrapper > .sub-menu-toggle-icon {
        transform: rotate(90deg);
    }

    /* ----- Undermenyer (ul.sub-menu) ----- * /
    /* Dessa ligger direkt under LI, men utanför .menu-item-wrapper */
    #mobile-menu-modal .mobile-menu-inner ul.menu li ul.sub-menu {
        display: block; /* Måste vara block för att skjuta ner innehåll */
        overflow: hidden; /* Viktigt för max-height övergången */
        transition: max-height 0.3s ease-out;
        max-height: 0; /* STANDARD: Göm undermenyn */
        visibility: hidden; /* Göm också via visibility */
    }

    /* Undermenyens expanderade tillstånd (JS lägger till .menu-item-expanded) */
    #mobile-menu-modal .mobile-menu-inner ul.menu li.menu-item-expanded > ul.sub-menu {
        max-height: 1000px; /* Ökad för att säkerställa att alla objekt visas */
        visibility: visible;
        margin-top: 0;
    }

    #mobile-menu-modal .mobile-menu-inner ul.menu li ul.sub-menu li a {
        margin-left: 2rem;
        width: 100%;
        font-size: 1em; /* Lätt mindre font-size för undermeny */
        border-bottom: 1px solid rgba(0,0,0,0.1); /* Subtil border för sub-menyn */
    }

    #mobile-menu-modal .mobile-menu-inner ul.menu li ul.sub-menu li:last-child a {
        border-bottom: none;
    }

    #mobile-menu-modal .mobile-menu-inner ul.menu li ul.sub-menu ul.sub-menu li a {
        padding-left: 45px; /* Ytterligare indrag för djupare nivåer */
    }

}