/*
 * Julbordsguiden – mobilmenyn (oktober 2026).
 *
 * Markup:   templates/yootheme_child/templates/header-mobile.php (#tm-mobile.jbg-menu)
 * Beteende: templates/yootheme_child/js/jbg-meny.js (tillbaka-knappen och scrollspärren)
 * Laddas från templates/yootheme_child/index.php efter temats CSS.
 *
 * Panelen glider in från höger på 0,2 sekunder, med en mörk ton över sidan.
 * Röd topp med loggan, sökruta, stora stadsknappar och en vit lista med rader på minst 48px.
 */

.jbg-menu {
    --jbg-red: #ee0f16;
    --jbg-red-dark: #c60001;
    --jbg-text: #434343;
    --jbg-line: #f0e6e4;
    --jbg-tint: #fbf3f2;
    --jbg-menu-w: min(360px, 88vw);
}


/* ---------- Menyknappen i mobilhuvudet ---------- */

.jbg-menu-toggle.uk-navbar-toggle {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 56px;
    padding: 0 10px;
    color: #fff;
}

.jbg-menu-toggle__icon,
.jbg-menu-toggle__icon::before,
.jbg-menu-toggle__icon::after,
.jbg-menu-toggle__icon > span {
    display: block;
    width: 24px;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
}

.jbg-menu-toggle__icon {
    position: relative;
    background: none;
    height: 18px;
}

.jbg-menu-toggle__icon::before,
.jbg-menu-toggle__icon::after,
.jbg-menu-toggle__icon > span {
    content: '';
    position: absolute;
    left: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.jbg-menu-toggle__icon::before { top: 0; }
.jbg-menu-toggle__icon > span { top: 7.75px; }
.jbg-menu-toggle__icon::after { bottom: 0; }

/* Blir ett kryss när menyn är öppen */
.jbg-menu-toggle[aria-expanded="true"] .jbg-menu-toggle__icon::before { transform: translateY(7.75px) rotate(45deg); }
.jbg-menu-toggle[aria-expanded="true"] .jbg-menu-toggle__icon::after { transform: translateY(-7.75px) rotate(-45deg); }
.jbg-menu-toggle[aria-expanded="true"] .jbg-menu-toggle__icon > span { opacity: 0; }

.jbg-menu-toggle__text {
    font-family: "PT Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* ---------- Panelen och tonen bakom ---------- */

/* Sidan bakom scrollar inte medan menyn är öppen */
html.jbg-menu-open,
html.jbg-menu-open body {
    overflow: hidden;
}

.jbg-menu.uk-offcanvas-overlay::before {
    background: rgba(30, 6, 6, 0.55);
    transition-duration: 0.2s;
}

.jbg-menu .uk-offcanvas-bar.jbg-menu__bar {
    left: auto;
    right: calc(-1 * var(--jbg-menu-w));
    display: flex;
    flex-direction: column;
    width: var(--jbg-menu-w);
    padding: 0;
    background: #fff;
    color: var(--jbg-text);
    box-shadow: -12px 0 32px -12px rgba(40, 10, 8, 0.45);
    font-family: "PT Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    overscroll-behavior: contain;
}

.jbg-menu .uk-offcanvas-bar-animation {
    transition: right 0.2s ease-out;
}

.jbg-menu.uk-open > .uk-offcanvas-bar.jbg-menu__bar {
    right: 0;
}

/* Temat färgar all text i panelen vit (mörk panel) – här är listan vit */
.jbg-menu .jbg-menu__bar a,
.jbg-menu .jbg-menu__bar summary {
    color: var(--jbg-text);
    text-decoration: none;
}


/* ---------- Röd topp med loggan och Stäng ---------- */

.jbg-menu__top {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 8px 6px 8px 16px;
    background: linear-gradient(180deg, #f1111a 0%, var(--jbg-red) 40%, #e60b12 100%);
}

.jbg-menu__logo img {
    display: block;
    width: 170px;
    height: auto;
}

.jbg-menu .uk-offcanvas-close.jbg-menu__close {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 56px;
    min-height: 48px;
    padding: 4px 6px;
    border: 0;
    background: none;
    color: #fff !important;
    font: 700 12px/1 "PT Sans", "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}


/* ---------- Sökrutan ---------- */

.jbg-menu__search {
    padding: 14px 16px 6px;
}

.jbg-menu .jbg-menu-search.uk-search-input {
    height: 48px;
    padding: 0 12px;
    border: 1px solid #d9cfcd;
    border-radius: 8px;
    background: #fff;
    color: var(--jbg-text);
    font-size: 18px;                 /* minst 16px, annars zoomar iPhone in */
}

.jbg-menu .jbg-menu-search.uk-search-input::placeholder {
    color: #8a7f7d;
    opacity: 1;
}

.jbg-menu .jbg-menu-search.uk-search-input:focus {
    border-color: var(--jbg-red);
    outline: 2px solid rgba(238, 15, 22, 0.2);
}

/* Rensa-krysset mitt i sökfältet (fältets omslag växer när förslagen visas under det) */
.jbg-menu .jgs-clear {
    top: 24px;
    right: 8px;
}

/* Förslagen (jg-sok) visas i panelen, under sökfältet, i stället för som en svävande ruta */
.jbg-menu .jgs-drop--desktop {
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    margin-top: 8px;
    border: 1px solid var(--jbg-line);
    border-radius: 8px;
    box-shadow: none;
}


/* ---------- Stora stadsknappar ---------- */

.jbg-menu__cities {
    display: grid;
    gap: 8px;
    padding: 10px 16px 14px;
}

.jbg-menu .jbg-menu__bar .jbg-menu__city {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--jbg-red);
    color: #fff;
    font-family: 'PT Serif', serif;
    font-size: 20px;
    font-weight: 700;
}

.jbg-menu .jbg-menu__bar .jbg-menu__city:active {
    background: var(--jbg-red-dark);
}

.jbg-menu .jbg-menu__bar .jbg-menu__city[aria-current="page"] {
    background: var(--jbg-red-dark);
    box-shadow: inset 0 0 0 3px #fff221;
}


/* ---------- Rader: Julbord nära mig, Fler städer, Landskap ---------- */

.jbg-menu__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 16px;
    border-top: 1px solid var(--jbg-line);
    font-size: 18px;
    font-weight: 700;
}

.jbg-menu__near svg {
    flex: none;
    color: var(--jbg-red);
}

.jbg-menu__near small {
    margin-left: 4px;
    color: #8a7f7d;
    font-size: 15px;
    font-weight: 400;
}

.jbg-menu__group > summary {
    list-style: none;
    cursor: pointer;
}

.jbg-menu__group > summary::-webkit-details-marker {
    display: none;
}

/* Pil som vänds när listan är öppen */
.jbg-menu__group > summary::after {
    content: '';
    width: 9px;
    height: 9px;
    margin-left: auto;
    margin-right: 4px;
    border-right: 2.5px solid var(--jbg-red);
    border-bottom: 2.5px solid var(--jbg-red);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.2s ease;
}

.jbg-menu__group[open] > summary::after {
    transform: translateY(2px) rotate(-135deg);
}

.jbg-menu__group[open] > summary {
    background: var(--jbg-tint);
}

/* Listan i två kolumner, i bokstavsordning uppifrån och ner */
.jbg-menu__list {
    columns: 2;
    column-gap: 8px;
    margin: 0;
    padding: 4px 8px 12px;
    list-style: none;
}

.jbg-menu__list li {
    break-inside: avoid;
}

.jbg-menu .jbg-menu__list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 18px;
}

.jbg-menu .jbg-menu__row:active,
.jbg-menu .jbg-menu__list a:active {
    background: var(--jbg-tint);
}

/* Sidan man står på */
.jbg-menu .jbg-menu__bar .jbg-menu__row[aria-current="page"],
.jbg-menu .jbg-menu__bar .jbg-menu__list a[aria-current="page"] {
    background: var(--jbg-tint);
    box-shadow: inset 4px 0 0 var(--jbg-red);
    color: var(--jbg-red-dark);
}


/* ---------- Längst ner: Om, Kontakt, Synas ---------- */

.jbg-menu__foot {
    margin: 8px 0 0;
    padding: 12px 16px 20px;
    border-top: 1px solid var(--jbg-line);
    list-style: none;
}

.jbg-menu .jbg-menu__foot a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: #6b6260;
    font-size: 16px;
}