/*
 * Julbordsguiden – Kartsök (/karta, com_mymaplocations view=locations), november 2026.
 *
 * Laddas från templates/yootheme/html/com_mymaplocations/locations/default.php (bara på /karta).
 * Markup för headern: templates/yootheme_child/templates/header.php (klassen jbg-karta-header och
 * menyknappen .jbg-karta-meny läggs bara till på den här sidan).
 */


/* ---------- Headern ----------
 * Under 768px: den vanliga mobilheadern, som på övriga sidor.
 * Från 768px (där kartan och listan ligger sida vid sida): en kompakt röd rad på 64px (samma mått som sticky-läget
 * i jbg-header.css) med liten logga, meny och sök. Raden ligger i flödet, inte fast: sidan är en skärm hög och
 * scrollar inte (avsnittet Kartan och listan). Safari färgar verktygsfältet efter ett fast element mot sidans
 * överkant, så en fast röd rad gav en röd adressrad.
 * 768–1469px: menyn får inte plats på raden, så en menyknapp öppnar mobilmenyn (#tm-mobile) i stället.
 * Från 1470px: hela menyn.
 * Kartans lager ligger i kartans egen stapelkontext (#mapsdiv z-index 0), så menyns dropdowns (1020) och
 * sökrutans förslag (1010) hamnar över kartan.
 */

@media (max-width: 767px) {
    .tm-header.jbg-karta-header {
        display: none !important;
    }

    .tm-header-mobile.jbg-mobile {
        display: block !important;
    }
}

@media (min-width: 768px) {
    /* Mobilheaderns rad döljs, men menypanelen (#tm-mobile) ligger i samma behållare och behövs för menyknappen */
    .tm-header-mobile.jbg-mobile {
        display: block !important;
    }

    .tm-header-mobile.jbg-mobile > :not(#tm-mobile) {
        display: none !important;
    }

}

.tm-header.jbg-karta-header .uk-container {
    padding-left: 24px;
    padding-right: 24px;
}

/* Temat drar ut vänster- och högerdelen 25px (uk-navbar-left/-right), så att punkternas padding hamnar i
   containerns marginal. Här ska loggan, sökrutan och menyknappen ligga 24px från kanten. */
.tm-header.jbg-karta-header .uk-navbar-container > .uk-container .uk-navbar-left {
    margin-left: 0;
}

.tm-header.jbg-karta-header .uk-navbar-container > .uk-container .uk-navbar-right {
    margin-right: 0;
}

.tm-header.jbg-karta-header .uk-navbar-nav > li > a,
.tm-header.jbg-karta-header .uk-navbar-item,
.tm-header.jbg-karta-header .uk-navbar-toggle {
    min-height: 64px;
}

.tm-header.jbg-karta-header .uk-navbar-nav > li > a {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 18px;
}

.tm-header.jbg-karta-header .uk-navbar-nav > li::before {
    height: 30px;
}

.tm-header.jbg-karta-header .uk-logo {
    padding-left: 0;
}

.tm-header.jbg-karta-header .uk-logo img {
    display: block;
    width: auto;
    height: 40px;
}

.tm-header.jbg-karta-header .uk-search-default {
    width: 280px;
}

.tm-header.jbg-karta-header .uk-search-default .uk-search-input {
    font-size: 16px;
}

/* Menyknappen: samma som i mobilheadern (jbg-meny.css) */
.tm-header.jbg-karta-header .jbg-karta-meny {
    margin-left: 8px;
    margin-right: -10px;                                     /* ikonen i linje med kanten, som sökrutan */
}

@media (max-width: 1469px) {
    .tm-header.jbg-karta-header .uk-navbar-nav {
        display: none;
    }
}

@media (min-width: 1470px) {
    .tm-header.jbg-karta-header .jbg-karta-meny {
        display: none;
    }

    .tm-header.jbg-karta-header .uk-navbar-right > .uk-navbar-item:last-child {
        padding-right: 0;
    }
}


/* ---------- Kartan och listan ----------
 * Markup: default.php (#maps > #mapsdiv med #jbg-karta, #rightdiv med listkolumnen).
 * Från 768px: sidan är exakt en skärm hög och scrollar inte. Under headern ligger listkolumnen (40 %, högst 846px)
 * med egen scroll och kartan till höger. Höjden (--jbg-karta-h) mäts av karta.js: fönstrets höjd minus det som
 * ligger ovanför #maps.
 * Under 768px: kartan först, i fullskärm under mobilheadern och utan scroll på sidan. Knappen .jbg-karta-vaxla
 * växlar till listan ("Visa lista (X)", X = julborden i kartans synliga område) och tillbaka ("Visa karta").
 * Listläget är klassen jbg-karta-vy-lista på <html> och vy=lista i adressen (karta.js, och ett skript i
 * default.php sätter klassen innan sidan ritas). Kartan börjar under mobilheadern (--jbg-karta-topp, mätt av
 * karta.js). De flytande knapparna lyfts ovanför cookierutan så länge den visas (--jbg-karta-lyft, karta.js).
 */

/* Sidans behållare i full bredd utan marginaler (temats #tm-main och .uk-container) */
#tm-main {
    padding-top: 0;
    padding-bottom: 0;
}

#tm-main .uk-container:first-child {
    width: 100%;
    max-width: 100% !important;
    padding: 0;
}

.jbg-karta {
    width: 100%;
    height: 100%;
    background: #e5e3df;
}

@media (min-width: 768px) {
    /* :root väger tyngre än temats html { overflow-y: scroll } (UIkit), som annars ger en tom scrollbar-ränna */
    :root,
    :root body {
        overflow: hidden;
    }

    #maps {
        display: flex;
        height: var(--jbg-karta-h, calc(100vh - 64px));
    }

    #maps #rightdiv {
        order: -1;                                           /* före kartan, som kommer först i markupen */
        flex: 0 0 40%;
        max-width: 846px;
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #maps #mapsdiv {
        position: relative;
        z-index: 0;                                          /* Leaflets lager stannar inne i kartan */
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
    }
}

.jbg-karta-vaxla {
    display: none;
}

@media (min-width: 768px) and (max-width: 959px) {
    #maps #rightdiv {
        width: 40%;
    }

    #maps #mapsdiv {
        width: 60%;
    }
}

@media (max-width: 767px) {
    /* Listläget */
    html.jbg-karta-vy-lista #mapsdiv {
        display: none !important;
    }

    /* Kartläget (standard): kartan över allt utom headern, listan dold under med sitt scrolläge */
    html:not(.jbg-karta-vy-lista),
    html:not(.jbg-karta-vy-lista) body {
        overflow: hidden;
    }

    html:not(.jbg-karta-vy-lista) #rightdiv {
        visibility: hidden;                                  /* filterraden i kolumnen syns ändå (visibility: visible) */
    }

    /* Korten tas ur layouten, så att webbläsaren inte hämtar bilderna (loading="lazy") till en lista som inte syns.
       Scrollläget sparas av karta.js (listScroll). */
    html:not(.jbg-karta-vy-lista) #jbg-kl-lista {
        display: none;
    }

    html:not(.jbg-karta-vy-lista) #mapsdiv {
        position: fixed;
        top: var(--jbg-karta-topp, 60px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 970;                                        /* under menypanelen och cookierutan (1000) och Snabbtitt (1010) */
    }

    .jbg-karta-vaxla {
        display: inline-flex;
        align-items: center;
        position: fixed;
        left: 50%;
        bottom: calc(20px + var(--jbg-karta-lyft, 0px) + env(safe-area-inset-bottom, 0px));
        z-index: 975;                                        /* över kartan och listan */
        transform: translateX(-50%);
        height: 48px;
        padding: 0 22px;
        border: 0;
        border-radius: 24px;
        background: #222;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        font-family: inherit;
        line-height: 1;
        white-space: nowrap;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    .jbg-karta-vaxla:focus-visible {
        outline: 3px solid #ee0f16;
        outline-offset: 3px;
    }

    .jbg-karta-vaxla > span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    html.jbg-karta-vy-lista .jbg-karta-vaxla__till-lista,
    html:not(.jbg-karta-vy-lista) .jbg-karta-vaxla__till-karta {
        display: none;
    }
}


/* ---------- Listkolumnen: rubrik, filter och lista ----------
 * Markup: default_kartlista.php. Filtren har listmodulens stil (filter.css, klasserna jbf-*): dragspel under
 * 960px och flikar från 960px. Logiken ligger i karta.js.
 * Under 768px är filtren en rad som flyter överst på kartan (och överst på listan i listläget), och filtren
 * öppnas i ett ark över hela skärmen (html.jbg-kf-oppen).
 */

.jbg-kl {
    padding: 24px 22px 48px;
}

.jbg-kl__rubrik {
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.2;
}

.jbg-kl__ingress {
    margin: 0 0 18px;
    font-size: 16px;
    color: #555;
}

.jbg-kf .jbf-status {
    margin-top: 14px;
}

.jbg-kf .jbf-count b {
    color: var(--jbf-red);
}

/* Bara under 768px */
.jbg-kf__rad,
.jbg-kf__arkhuvud,
.jbg-kf__arkfot {
    display: none;
}

/* Listan: så många kort i bredd som ryms (minst 210px), ett i bredd i en smal kolumn */
.jbg-kl__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.jbg-kort {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.jbg-kort__bild {
    display: block;
    aspect-ratio: 3 / 2;
    background: #eee;
}

.jbg-kort__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jbg-kort__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 12px 14px 14px;
}

.jbg-kort__namn {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.25;
}

.jbg-kort__namn a {
    color: inherit;
}

.jbg-kort__ort,
.jbg-kort__pris {
    margin: 0 0 4px;
    font-size: 14px;
    color: #666;
}

.jbg-kort__ort {
    color: #c60001;
}

.jbg-kort__knappar {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.jbg-kort__knappar > * {
    flex: 1;
    padding: 0 8px;
}

.jbg-kl__tom {
    margin-top: 16px;
}

.jbg-kl__tom strong {
    margin-bottom: 14px;
}

/* "Visa alla Y i Sverige" (primär, bara med filter) och "Rensa filtren" / "Visa hela Sverige" */
.jbg-kl__tomknappar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.jbg-kl__mer {
    margin-top: 20px;
    text-align: center;
}

@media (max-width: 767px) {
    .jbg-kl {
        padding: 72px 15px 100px;                            /* plats för filterraden och växlingsknappen */
    }

    /* Filterraden: i kartläget flyter den på kartan, i listläget ligger den överst med vit bakgrund */
    .jbg-kf__rad {
        display: flex;
        position: fixed;
        top: var(--jbg-karta-topp, 60px);
        left: 0;
        right: 0;
        z-index: 972;                                        /* över kartan (970), under växlingsknappen (975) */
        gap: 8px;
        padding: 10px 12px;
        overflow-x: auto;
        visibility: visible;                                 /* listkolumnen är dold i kartläget */
        scrollbar-width: none;
    }

    /* Linjen och skuggan i underkant bara när raden har fastnat överst (jbg-kf-fast, satKartTopp() i karta.js) */
    html.jbg-karta-vy-lista .jbg-kf__rad {
        background: #fff;
        transition: box-shadow .15s ease;
    }

    html.jbg-karta-vy-lista.jbg-kf-fast .jbg-kf__rad {
        box-shadow: 0 1px 0 #e2e5e9, 0 3px 10px rgba(0, 0, 0, 0.08);
    }

    .jbg-kf__radknapp {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 6px;
        height: 40px;
        padding: 0 14px;
        border: 1px solid #d5d9de;
        border-radius: 20px;
        background: #fff;
        color: #222;
        font: 600 15px/1 var(--jbf-sans);
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
        cursor: pointer;
    }

    html.jbg-karta-vy-lista .jbg-kf__radknapp {
        box-shadow: none;
    }

    .jbg-kf__radknapp.is-on {
        border-color: var(--jbf-red);
        color: var(--jbf-red);
    }

    .jbg-kf__pil {
        font-size: 11px;
    }

    .jbg-kf__radknapp:focus-visible,
    .jbg-kf__stang:focus-visible,
    .jbg-kf__rensa:focus-visible,
    .jbg-kf__visa:focus-visible {
        outline: 2px solid var(--jbf-red);
        outline-offset: 2px;
    }

    /* Leaflets knappar under filterraden */
    html:not(.jbg-karta-vy-lista) #mapsdiv .leaflet-top {
        top: 56px;
    }

    /* Arket */
    .jbg-kf__ark {
        display: none;
    }

    html.jbg-kf-oppen .jbg-kf__ark {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 1002;                                       /* över cookierutan (1000) */
        background: #fff;
        visibility: visible;
    }

    html.jbg-kf-oppen,
    html.jbg-kf-oppen body {
        overflow: hidden;
    }

    .jbg-kf__arkhuvud {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 8px 8px 16px;
        border-bottom: 1px solid #e2e5e9;
    }

    .jbg-kf__arkrubrik {
        margin: 0;
        font-size: 20px;
        outline: none;
    }

    .jbg-kf__stang {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        font-size: 30px;
        line-height: 1;
        color: #333;
        cursor: pointer;
    }

    .jbg-kf__ark .jbf-card {
        flex: 1;
        overflow-y: auto;
        border: 0;
        border-radius: 0;
    }

    /* I arket är alla facetter öppna: rubrikerna är bara rubriker */
    .jbg-kf__ark .jbf-panel {
        display: block;
        border-top: 0;
        background: #fff;
    }

    .jbg-kf__ark .jbf-head,
    .jbg-kf__ark .jbf-facet.is-open .jbf-head {
        background: #fff;
        color: var(--jbf-ink);
        cursor: default;
    }

    .jbg-kf__ark .jbf-head .jbf-chev,
    .jbg-kf__ark .jbf-head .jbf-cnt {
        display: none !important;
    }

    .jbg-kf__arkfot {
        display: flex;
        gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #e2e5e9;
    }

    /* Huvudknappen är temats röda uk-button-primary (som "Detaljer" på korten) och "Visa alla Y" temats
     * uk-button-default (som "Snabbtitt"), så att de följer temat. Här sätts bara höjden och storleken. */
    .jbg-kf__alla-knapp,
    .jbg-kf__visa {
        height: 48px;
        line-height: 46px;                                   /* temats knappar har 1px kant */
        font-size: 15px;
    }

    /* "Rensa" är en textlänk, den minst framträdande av knapparna, men lika hög som de andra att trycka på */
    .jbg-kf__rensa {
        height: 48px;
        padding: 0 6px;
        border: 0;
        background: none;
        color: #333;
        font: 400 16px/1 var(--jbf-sans);
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
    }

    .jbg-kf__visa {
        flex: 1;
    }

    /* Med träffar utanför kartans område: "Rensa" och "Visa alla Y" på en rad, "Visa X i kartans område" under,
     * i hela bredden */
    .jbg-kf__arkfot--tva {
        flex-wrap: wrap;
    }

    .jbg-kf__alla-knapp {
        flex: 1;
    }

    .jbg-kf__alla-knapp[hidden] {
        display: none;
    }

    .jbg-kf__arkfot--tva .jbg-kf__visa {
        flex-basis: 100%;
        order: 3;
    }

    .jbg-kf__alla-knapp:focus-visible {
        outline: 2px solid var(--jbf-red);
        outline-offset: 2px;
    }
}


/* ---------- Pinnarna och kortet för en klickad pin ----------
 * Pinnen är sajtens tomtepin (images/etn_marker_large.png). Inaktiva julbord (ingen egen bild eller inte
 * innevarande säsong, kartdata.php) har en dämpad pin. Kortet är en Leaflet-popup från 768px
 * (.jbg-popup .jbg-pinkort) och fäst nertill på skärmen under 768px (.jbg-pinkort--fast).
 */

.jbg-pin--inaktiv {
    filter: grayscale(0.7);                                  /* och opacity 0.6, som karta.js sätter */
}

.jbg-popup .leaflet-popup-content {
    width: 280px !important;
    margin: 0;
    font-size: 14px;
}

.jbg-popup .leaflet-popup-content-wrapper {
    overflow: hidden;
    padding: 0;
    border-radius: 8px;
}

.jbg-popup a.leaflet-popup-close-button {
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font: 20px/28px Tahoma, Verdana, sans-serif;
}

.jbg-pinkort__bild {
    display: block;
    aspect-ratio: 3 / 2;
    background: #eee;
}

.jbg-pinkort__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jbg-pinkort__text {
    padding: 10px 12px 12px;
}

.jbg-pinkort__namn {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 1.25;
}

.jbg-pinkort__namn a,
.leaflet-container .jbg-pinkort__namn a {
    color: inherit;
    text-decoration: none;
}

.jbg-pinkort__ort,
.jbg-pinkort__pris {
    margin: 0 0 2px;
    font-size: 14px;
    color: #666;
}

.jbg-pinkort__ort {
    color: #c60001;
}

.jbg-pinkort__knappar {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.jbg-pinkort__knappar > * {
    flex: 1 1 auto;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
}

.leaflet-container .jbg-pinkort__knappar a.uk-button-primary {
    color: #fff;
}

/* Under 768px: fäst nertill, ovanför växlingsknappen. Bild till vänster, text till höger, knapparna under. */
.jbg-pinkort--fast {
    display: none;
}

@media (max-width: 767px) {
    .jbg-pinkort--fast:not([hidden]) {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(80px + var(--jbg-karta-lyft, 0px) + env(safe-area-inset-bottom, 0px));
        z-index: 976;                                        /* över kartan, filterraden och växlingsknappen */
        overflow: hidden;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    }

    html.jbg-karta-vy-lista .jbg-pinkort--fast {
        display: none !important;
    }

    /* Bilden till vänster om namn, ort och pris, knapparna på en egen rad i kortets fulla bredd (bredvid bilden
       ryms de inte under ca 450px). Textdelen är display: contents, så att dess delar hamnar i kortets rutnät. */
    .jbg-pinkort--fast:not([hidden]) {
        display: grid;
        grid-template-columns: 34% minmax(0, 1fr);
        grid-template-rows: auto auto auto 1fr auto;
        column-gap: 12px;
    }

    .jbg-pinkort--fast .jbg-pinkort__bild {
        grid-column: 1;
        grid-row: 1 / 5;
        aspect-ratio: auto;
        min-height: 80px;
    }

    .jbg-pinkort--fast .jbg-pinkort__text {
        display: contents;
    }

    .jbg-pinkort--fast .jbg-pinkort__namn,
    .jbg-pinkort--fast .jbg-pinkort__ort,
    .jbg-pinkort--fast .jbg-pinkort__pris {
        grid-column: 2;
        padding-right: 40px;                                 /* krysset */
    }

    .jbg-pinkort--fast .jbg-pinkort__namn {
        padding-top: 10px;
    }

    .jbg-pinkort__stang {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #333;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    .jbg-pinkort--fast .jbg-pinkort__knappar {
        grid-column: 1 / -1;
        grid-row: 5;
        margin: 0;
        padding: 10px 12px 12px;
    }

    .jbg-pinkort--fast .jbg-pinkort__knappar > * {
        flex: 1 1 0;
    }
}

/* ---------- Räknaren och "Ändra område" ---------- */

.jbg-kf__raknare {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}

/* "· Visa alla Y i Sverige" i räknaren: med filter, när alla träffar inte ryms i kartans område (karta.js) */
.jbg-kf__punkt {
    color: #888;
}

.jbg-kf__alla {
    padding: 0;
    border: 0;
    background: none;
    color: var(--jbf-red, #c60001);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.jbg-kf__alla:hover {
    text-decoration-thickness: 2px;
}

.jbg-kf__alla:focus-visible {
    outline: 2px solid var(--jbf-red, #c60001);
    outline-offset: 2px;
}

.jbg-kf__omrade {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--jbf-red, #c60001);
    font: 600 15px/1.4 var(--jbf-sans, sans-serif);
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 767px) {
    html.jbg-karta-vy-lista .jbg-kf__omrade {
        display: inline;
    }
}

/* Smal kolumn: länken på en egen rad i stället för en punkt som blir ensam i radslutet. Från 768px är listkolumnen
 * 40 % av bredden, och "888 julbord i kartans område · Visa alla 888 i Sverige" ryms på en rad först från ca 1100px. */
@media (max-width: 1199px) {
    .jbg-kf__punkt {
        display: none;
    }

    .jbg-kf__alla {
        display: block;
        margin-top: 4px;
    }
}


/* ---------- Kort och pin hör ihop ----------
 * Hover på ett listkort markerar dess pin (eller klustret den ligger i), och hover på en pin eller ett kluster
 * markerar korten (karta.js, markeraPin/markeraKort). Leaflet placerar pinnarna med transform, så markeringen är
 * en skugga, inte en förstoring.
 */

.leaflet-marker-icon.jbg-pin--vald {
    filter: drop-shadow(0 0 4px #c60001) drop-shadow(0 0 2px #c60001);
}

.marker-cluster.jbg-kluster--vald,
.marker-cluster.jbg-kluster--vald div {
    background-color: rgba(198, 0, 1, 0.85);
    color: #fff;
}

.jbg-kort {
    transition: box-shadow 0.12s;
}

.jbg-kort.is-vald {
    box-shadow: 0 0 0 3px #c60001, 0 4px 14px rgba(0, 0, 0, 0.18);
}