/* ===== Sticky top header ===== */

#topHeader {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: white;
}

/* Se till att dropdown menyer syns över innehåll */
.menu {
    z-index: 10000;
}

/* liten skugga så man ser att den ligger över */
#topHeader {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#contentLayoutWrapper {
    margin-top: 10px;
}

/* ==================== Rubrik text format Asap Bold ==================== */
#originalContent .searchable-content h2,
#originalContent .searchable-content h3,
#originalContent .searchable-content h4,
#originalContent .searchable-content h5
/*#originalContent .searchable-content .bold-title_1*/ {
    font-family: 'Asap', sans-serif !important;
    font-weight: 700 !important;
}


/*Byta ut Bootstrap-klassen*/
.navbar-custom {
    background-color: white;
}

/*Här är stilar funktioner för Lysna button*/
.listen-area {
    background-color: #000000;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    line-height: 1.2;
}

.listen-text {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.listen-area button {
    border: none; /* Ta bort kant */
    color: white; /* Vit text */
    padding: 6px 12px; /* Lite padding för klickvänlighet */
    margin-right: 5px; /* Lite mellanrum mellan knappar */
    border-radius: 4px; /* Mjuka hörn */
    cursor: pointer; /* Pekar-hand när musen är över */
    font-size: 14px;
}

    .listen-area button:hover {
        background-color: #0056b3; /* Lite mörkare vid hover */
    }

button {
    border: none;
    background: transparent;
    outline: none;
}

/*Här slutar stilar funktioner för Lysna button*/
/*Implementering av en inställningsruta som länknar till ReachDeck, där användaren kan justera inställningar som "Rösthastighet", "Talläge", meddelande om länkar,
och textförstoringsglas. Vi kan skapa detta som en modal eller flytande panel som dyker upp när man klickar på inställningsknappen (toggleSettings()).*/
.settings-panel {
    position: absolute;
    top: 5vh; /* Lite mer responsivt än fast px */
    left: 10vw;
    right: 10vw;
    width: auto;
    max-height: 90vh;
    max-width: 250px;
    overflow-y: auto;
    background: black !important;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-radius: 8px;
    color: white !important;
}

/* Anpassning för mindre skärmar */
@media (max-width: 768px) {
    .settings-panel {
        left: 5vw;
        right: 5vw;
        top: 5vh;
        max-height: 80vh;
        padding: 15px;
    }
}

.settings-panel-close {
    color: white;
    font-size: 18px;
}

/*Slut Implementering av en inställningsruta som länknar till ReachDeck, där användaren kan justera inställningar som "Rösthastighet", "Talläge", meddelande om länkar,
och textförstoringsglas. Vi kan skapa detta som en modal eller flytande panel som dyker upp när man klickar på inställningsknappen (toggleSettings()).*/

/*Hjälp som står i lysna funktioner för att förklara funktioner*/
.help-panel {
    position: absolute;
    top: 5vh; /* Lite mer responsivt än fast px */
    left: 10vw;
    right: 10vw;
    width: auto;
    max-height: 90vh;
    max-width: 600px;
    overflow-y: auto;
    background: black !important;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border-radius: 8px;
    color: white !important;
}

/* Anpassning för mindre skärmar */
@media (max-width: 768px) {
    .help-panel {
        left: 5vw;
        right: 5vw;
        top: 5vh;
        max-height: 80vh;
        padding: 15px;
    }
}

.help-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
    color: white;
    font-size: 14px;
}

    .help-item img {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

/*Slut Hjälp som står i lysna funktioner för att förklara funktioner*/

/*Menyer*/
nav {
    background: white;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Menyn justeras åt vänster */
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}

    .menu li {
        position: relative;
    }

    .menu > li {
        flex: none; /* Ta bort automatisk bredd */
        text-align: left;
        margin-right: 10px;
    }

    .menu a {
        display: block;
        padding: 15px;
        color: black;
        text-decoration: none;
    }

        .menu a:hover {
            background: #004f71;
            color: white;
        }

    /*.menu li:hover > a {
    background: #004f71;
    color: white;
}*/

    .menu li:hover,
    .menu li:hover > a {
        background: #004f71;
        color: white;
    }

    /*.menu li.hover > a {
    background: #004f71;
    color: white;
}*/

    /*För snyggare övergång*/
    .menu li ul {
        transition: all 0.3s ease;
    }


    /* Dropdown */
    .menu li ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        min-width: 200px;
        list-style: none;
        padding: 0;
        z-index: 1000;
    }

    .menu li:hover > ul {
        display: block;
    }

    .menu li ul li a {
        padding: 10px;
        text-align: left;
    }

    .menu li ul li ul {
        left: 100%;
        top: 0;
    }

/* Mobilknapp */
.menu-toggle {
    display: none;
    background: white;
    color: black;
    padding: 15px;
    cursor: pointer;
    text-align: center;
}

    /* Blå bakgrund när menyn är aktiv i mobil */
    .menu-toggle.active {
        background: #004f71;
        color: white;
    }

@media (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
    }

        .menu.active {
            display: flex;
        }

        .menu > li {
            flex: none;
        }

        .menu li ul {
            position: static;
        }

        .menu li:hover > ul {
            display: none; /* Stäng hover på mobil */
        }

        .menu li.open > ul {
            display: block;
        }

    .menu-toggle {
        display: block;
    }
}

/*olika nivåer olika vänstermarginal*/
@media (max-width: 768px) {
    .menu li {
        padding-left: 10px; /* grundnivå */
    }

        .menu li li {
            padding-left: 25px; /* nivå 2 */
        }

            .menu li li li {
                padding-left: 40px; /* nivå 3 */
            }
}


/*Arrow*/
/* Standardpil (synlig svart, pekar neråt) */
.arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg); /* Pekar neråt */
    transition: transform 0.3s ease, border-color 0.3s ease;
    margin-left: 5px;
}

/* Pilen snurrar uppåt och blir vit när länken är hover, aktiv eller öppen */
.menu li:hover > a .arrow,
.menu li.open > a .arrow {
    transform: rotate(-135deg); /* Pekar uppåt */
    border-color: white;
}

/* Fix for the bug where arrow style reverts when hovering over submenu items */
/*.menu li:hover > ul li a:hover .arrow,
.menu li:hover > ul li a:focus .arrow {
    transform: rotate(-135deg);*/ /* Pekar uppåt */
/*border-color: white;
}*/

/* Standard pil pekar höger */
.menu li.has-submenu > a .arrowleft::after {
    content: "\203A"; /* › */
    display: inline-block;
    margin-left: 8px;
    font-weight: bold;
    font-size: 1.5em; /* Gör pilen lite större */
    transition: transform 0.2s ease;
}

/* När öppen eller hover – pil pekar vänster */
.menu li.has-submenu.open > a .arrowleft::after,
.menu li.has-submenu:hover > a .arrowleft::after {
    content: "\2039"; /* ‹ */
    font-weight: bold;
    font-size: 1.5em; /* Gör pilen lite större */
}

/* Sökruta styling */

/* Wrapper ovanför karta + text */
.search-wrapper {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

/* Tom vänstersida = kartans bredd */
.search-spacer {
    flex: 1;
    min-width: 300px; /* matchar .left */
}

/* Högerdel = textpanelens bredd */
.search-right {
    flex: 1;
}

/* Behåll din befintliga styling */
.search-container {
    padding: 1rem 2rem;
}

    /* Uppdaterad sökruta med integrerad knapp */
    .search-container .input-group {
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-container .form-control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
        height: 38px;
    }

/* Integrerad sökknapp i samma ruta */
#searchButton {
    background-color: #004f71;
    border-color: #004f71;
    color: white;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    height: 38px;
    padding: 0 15px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

    #searchButton:hover,
    #searchButton:focus {
        background-color: #003a55;
        border-color: #003a55;
    }

/* Ta bort clearSearchButton */
#clearSearchButton {
    display: none !important;
}

/* Ändra färg på själva checkboxen */
.form-check-input:checked {
    background-color: #004f71;
    border-color: #004f71;
}

/* Ändra bakgrund och textfärg för antal träffar */
#resultCount {
    background-color: #004f71; /* samma som checkbox */
    color: white; /* texten syns bättre mot mörk bakgrund */
    padding: 0.25rem 0.5rem; /* lite luft runt texten */
    border-radius: 0.25rem; /* rundade hörn */
    font-weight: 500; /* valfri, gör texten lite tydligare */
}

@media (max-width: 768px) {
    .search-wrapper {
        flex-direction: column;
    }

    /*.search-spacer {
        display: none;
    }*/

    .search-right {
        width: 100%;
    }

    .input-group {
        flex-direction: row;
        gap: 0;
    }

        .input-group .form-control {
            width: auto;
            flex: 1;
            border-radius: 4px 0 0 4px !important;
        }

        .input-group #searchButton {
            width: auto;
            border-radius: 0 4px 4px 0 !important;
        }
}

/* Ändra textfärg för sökordet */
.search-term {
    color: #004F71;
}

/* Sökresultat – "Visa i kontext"-knapp */
.search-result-item .btn-outline-primary {
    color: #004F71; /* Textfärg */
    border-color: #004F71; /* Kantfärg */
}

    /* Hover / fokus / aktiv */
    .search-result-item .btn-outline-primary:hover,
    .search-result-item .btn-outline-primary:focus,
    .search-result-item .btn-outline-primary:active {
        background-color: #004F71; /* Bakgrund vid hover */
        border-color: #004F71;
        color: #ffffff; /* Vit text för kontrast */
    }

.highlight {
    background-color: yellow;
    font-weight: bold;
    padding: 0 2px;
}

/* Sökresultat – "Dölja antal träff och markera träffan innan sökning */
#highlightAll,
#resultCount {
    display: none;
}

#highlightAllWrapper {
    display: none;
}

/* ==================== DATABASINNEHÅLL ==================== */
/* FIX för mellanrum mellan rubriker och innehåll */
#originalContent .searchable-content > * {
    margin-top: -26px !important;
    margin-bottom: 0.5rem !important;
}

#originalContent .searchable-content h2 {
    margin-bottom: 0.0rem !important;
}

#originalContent .searchable-content h3 {
    margin-bottom: 0.10rem !important;
}

#originalContent .searchable-content h4 {
    margin-bottom: 0.25rem !important;
}

#originalContent .searchable-content h5 {
    margin-bottom: 0.5rem !important;
}

/*#originalContent .searchable-content h6 {
    margin-bottom: 3rem !important;
}*/

#originalContent .searchable-content h6 {
    font-size: 0.9rem; /* mindre text */
    font-weight: 400; /* inte rubrik-tyngd */
    color: #666; /* diskret grå */
    /*text-decoration-line: underline;*/ /* Office-U */
    /*text-decoration-thickness: 1px;*/ /* tunn linje */
    /*text-underline-offset: 4px;*/ /* lite luft ner till linjen */
    margin-bottom: 3rem !important;
}

#originalContent .searchable-content .content-text {
    margin-bottom: 1.5rem !important;
}

/* Första elementet ska inte ha marginal över */
#originalContent .searchable-content > *:first-child {
    margin-top: 0 !important;
}

/*Stiler för texter som hämtas från databasen*/
.bold-title_1 {
    font-weight: bold;
}

/*Stiler för slå ihop några kolumner/ texter som hämtas från databasen i samma rad med olika styler*/
.inline-text {
    margin: 8px 0 1rem 0;
    line-height: 1.4;
}

    .inline-text .abbr {
        font-weight: bold;
        margin-right: 6px;
        white-space: nowrap;
    }

/*Gul ruta i bak texten*/
.info-box {
    background-color: #e9ddc7; /* beige/gul ton liknande bilden */
    white-space: pre-line;
    max-width: 90%; /* smalare än huvudtext */
    margin: 0 auto; /* centrerar horisontellt */
}

    .info-box a {
        display: inline;
        margin-left: 0.25rem !important;
    }


.between-image {
    width: 100vw; /* hela skärmens bredd */
    height: auto;
    display: block;
    /* Bryt ut ur container */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .between-image {
        max-height: 40vh;
        object-fit: cover;
    }
}

.menu-path-wrapper {
    width: 100vw; /* full skärmbredd */
    margin-left: calc(50% - 50vw);
    padding: 0.5rem 1rem;
}

.menu-path {
    text-align: left;
    margin: 0;
}

/* För att hämta radbryt från databas/ alltså radbryt ska synas annars blir den som en paragraf */
.content-text {
    white-space: pre-line;
}

/* För att anpassa bild storlek i stor och lite skärm */
.content-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto; /* ersätter <br><br> */
}

@media (max-width: 768px) {
    .content-image,
    .between-image {
        max-height: 40vh;
        object-fit: contain;
    }
}

/* För att lägga kartan mellen texter */
.map-container iframe {
    width: 100%;
    height: 65vh; /* standard för desktop/tablet */
    border: none;
}

@media (max-width: 600px) {
    .map-container iframe {
        height: 50vh; /* mindre höjd på mobil */
    }
}

/* För att lägga kartan över hela sidan */
.map-container-all iframe {
    width: 100%;
    height: 80vh; /* standard för desktop/tablet */
    border: none;
}

@media (max-width: 600px) {
    .map-container-all iframe {
        height: 80vh; /* mindre höjd på mobil */
    }
}