/* ============================================================
   Dealer Locator  —  prefix: .dl
   List panel left, map right, one shared height. The panel's
   card list scrolls inside itself, so 76 partners never make
   the page 28 000 px long again. Under 992 px the panel
   dissolves (display: contents) so the map can sit between the
   controls and the list, collapsed until asked for.

   Headings and the Search button inherit their type from the
   theme — no font-family here except nowhere.
   ============================================================ */

.dl {
    --dl-line:    var(--neutral-trans-20, rgba(0, 0, 0, 0.2));
    --dl-muted:   var(--text-dark-muted, rgba(0, 0, 0, 0.8));
    --dl-speed:   180ms;
    --dl-height:  clamp(56rem, 78vh, 84rem);

    display:               grid;
    grid-template-columns: minmax(0, 46rem) minmax(0, 1fr);
    width:                 100%;
    background:            var(--white, #fff);
    border:                1px solid var(--dl-line);
    border-radius:         var(--radius, 5px);
    overflow:              hidden;
    scroll-margin-top:     calc(124px + var(--space-m, 1.25rem));
}

/* Fill the content width even inside a narrow Bricks block */
.brxe-shortcode:has(.dl) {
    max-width: none !important;
    width:     100% !important;
}

/* ── Panel ────────────────────────────────────────────────── */
.dl__panel {
    display:        flex;
    flex-direction: column;
    height:         var(--dl-height);
    min-width:      0;
    border-right:   1px solid var(--dl-line);
}

/* ── Search ───────────────────────────────────────────────── */
.dl__search {
    display:     flex;
    align-items: stretch;
    gap:         0;
    padding:     var(--space-m, 1.25rem) var(--space-m, 1.25rem) var(--space-s, 0.75rem);
    background:  var(--tertiary, #F0ECE4);
}

.dl__field {
    position: relative;
    flex:     1 1 auto;
    min-width: 0;
}

.dl__field-icon {
    position:       absolute;
    left:           1.2rem;
    top:            50%;
    width:          1.6rem;
    height:         1.6rem;
    transform:      translateY(-50%);
    color:          var(--dl-muted);
    pointer-events: none;
}

.dl__input {
    width:         100%;
    min-height:    4.8rem;
    padding:       0.7rem 1.2rem 0.7rem 4rem;
    border:        1px solid var(--dl-line);
    border-right:  0;
    border-radius: var(--radius-xs, 2.222px) 0 0 var(--radius-xs, 2.222px);
    background:    var(--white, #fff);
    font-family:   inherit;
    font-size:     var(--text-s, 1.4rem);
    color:         var(--text-dark, #000);
}

.dl__input::placeholder { color: var(--dl-muted); opacity: 1; }

.dl__input:focus-visible {
    outline:        2px solid var(--primary, #ffcd00);
    outline-offset: -1px;
    position:       relative;
    z-index:        1;
}

/* Search button: theme .btn--primary owns the look; this only stops the
   14rem min-width from swallowing the input, and squares the joined edge. */
.dl__submit {
    flex-shrink:   0;
    min-width:     0;
    border-radius: 0 var(--radius-xs, 2.222px) var(--radius-xs, 2.222px) 0;
    cursor:        pointer;
}

.dl.is-busy .dl__submit {
    opacity:        0.6;
    pointer-events: none;
}

/* ── Position link + type filter ──────────────────────────── */
.dl__tools {
    display:     flex;
    align-items: center;
    gap:         var(--space-s, 0.75rem) var(--space-m, 1.25rem);
    flex-wrap:   wrap;
    padding:     0 var(--space-m, 1.25rem) var(--space-m, 1.25rem);
    background:  var(--tertiary, #F0ECE4);
    border-bottom: 1px solid var(--dl-line);
}

.dl__geo {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.4rem 0;
    border:          0;
    background:      transparent;
    color:           var(--text-dark, #000);
    font-family:     inherit;
    font-size:       var(--text-xs, 1.2rem);
    font-weight:     600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor:          pointer;
}

.dl__geo svg {
    width:       1.5rem;
    height:      1.5rem;
    flex-shrink: 0;
}

.dl__geo:hover { color: var(--dl-muted); }

.dl__geo[aria-busy="true"] {
    opacity:        0.5;
    pointer-events: none;
}

.dl__segs {
    display:     flex;
    gap:         0.6rem;
    margin-left: auto;
}

/* Same recipe as .brk-filter__pill, so the filter reads as a control from the
   same family as the site's other filters — and the active state matches the
   Service badge in the cards, which is the point of the design. */
.dl__seg {
    display:       inline-flex;
    align-items:   center;
    min-height:    3.6rem;
    padding:       0.4rem 1.4rem;
    background:    transparent;
    border:        1px solid var(--dl-line);
    border-radius: var(--radius-xs, 2.222px);
    color:         var(--text-dark, #000);
    font-family:   inherit;
    font-size:     var(--text-xs, 1.2rem);
    font-weight:   600;
    line-height:   1.2;
    cursor:        pointer;
    transition:    background-color var(--dl-speed), border-color var(--dl-speed), color var(--dl-speed);
}

.dl__seg:hover { border-color: var(--text-dark, #000); }

.dl__seg.is-active {
    background:   var(--neutral, #000);
    border-color: var(--neutral, #000);
    color:        var(--white, #fff);
}

.dl__seg:focus-visible {
    outline:        2px solid var(--primary, #ffcd00);
    outline-offset: 2px;
}

.dl__seg-count {
    margin-inline-start: 0.5em;
    opacity:             0.6;
    font-variant-numeric: tabular-nums;
}

/* ── Status row ───────────────────────────────────────────── */
.dl__status {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-s, 0.75rem);
    padding:         var(--space-s, 0.75rem) var(--space-m, 1.25rem);
    border-bottom:   1px solid var(--dl-line);
    font-size:       var(--text-xs, 1.2rem);
    color:           var(--dl-muted);
}

.dl__count {
    margin:    0;
    min-width: 0;
}

.dl__mode {
    flex-shrink:     0;
    padding:         0;
    border:          0;
    background:      transparent;
    color:           var(--text-dark, #000);
    font-family:     inherit;
    font-size:       var(--text-xs, 1.2rem);
    font-weight:     600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor:          pointer;
}

.dl__mode:hover { color: var(--dl-muted); }

/* ── List ─────────────────────────────────────────────────── */
.dl__list {
    flex:                1 1 auto;
    min-height:          0;
    overflow-y:          auto;
    overscroll-behavior: contain;
}

.dl__sort {
    margin:         0;
    padding:        var(--space-xs, 0.5rem) var(--space-m, 1.25rem);
    font-size:      var(--text-xs, 1.2rem);
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--dl-muted);
    border-bottom:  1px solid var(--dl-line);
}

.dl__empty {
    margin:     0;
    padding:    var(--space-l, 2rem) var(--space-m, 1.25rem);
    text-align: center;
    color:      var(--dl-muted);
    font-size:  var(--text-s, 1.4rem);
}

/* ── Country groups (A–Z mode) ────────────────────────────── */
.dl-group__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-s, 0.75rem);
    padding:         var(--space-s, 0.75rem) var(--space-m, 1.25rem);
    background:      var(--white, #fff);
    border-bottom:   1px solid var(--dl-line);
    cursor:          pointer;
    list-style:      none;
    position:        sticky;
    top:             0;
    z-index:         2;
}

.dl-group__head::-webkit-details-marker { display: none; }

/* Ikonsetet: Plus stängd, Minus öppen — dragspelets ikoner. */
.dl-group__head::after {
    content:     "";
    width:       1.8rem;
    height:      1.8rem;
    margin-left: auto;
    background-color: currentColor;
    -webkit-mask: url("/wp-content/themes/bricks-child/icons/brokk-plus.svg") center / contain no-repeat;
            mask: url("/wp-content/themes/bricks-child/icons/brokk-plus.svg") center / contain no-repeat;
    flex-shrink: 0;
}

.dl-group[open] > .dl-group__head::after {
    -webkit-mask-image: url("/wp-content/themes/bricks-child/icons/brokk-minus.svg");
            mask-image: url("/wp-content/themes/bricks-child/icons/brokk-minus.svg");
}

.dl-group__title {
    margin:    0;
    font-size: var(--h5, 1.8rem);
    line-height: 1.2;
}

.dl-group__count {
    font-size:            var(--text-xs, 1.2rem);
    font-weight:          600;
    color:                var(--dl-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Card ─────────────────────────────────────────────────── */
.dl-card {
    position:      relative;
    padding:       var(--space-m, 1.25rem);
    border-bottom: 1px solid var(--dl-line);
    cursor:        pointer;
    transition:    background-color var(--dl-speed);
}

.dl-card:hover,
.dl-card:has(.dl-card__toggle:focus-visible) {
    background:        var(--neutral-trans-10, rgba(0, 0, 0, 0.1));
}

/* Kortet var role="button" med länkar inuti (WCAG 4.1.2). Nu är namnet en riktig knapp
   som ser ut som rubriken; klick var som helst på kortet gör samma sak (plan 065). */
.dl-card__toggle {
    all:    unset;
    cursor: pointer;
}
.dl-card__toggle:focus-visible { border-radius: var(--radius-xs); }

.dl-card.is-active {
    background:        var(--primary-trans-10, rgba(255, 205, 0, 0.1));
}

.dl-card--far { opacity: 0.62; }
.dl-card--far:hover,
.dl-card--far.is-active { opacity: 1; }

.dl-card__top {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             var(--space-s, 0.75rem);
}

.dl-card__name {
    margin:      0;
    font-size:   var(--h5, 1.8rem);
    line-height: 1.2;
    min-width:   0;
}

.dl-card__meta {
    flex-shrink:          0;
    font-size:            var(--text-xs, 1.2rem);
    font-weight:          600;
    color:                var(--dl-muted);
    white-space:          nowrap;
    font-variant-numeric: tabular-nums;
}

.dl-card__types {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
    margin:    0.6rem 0 0.9rem;
}

.dl-card__address {
    margin:      0;
    font-style:  normal;
    font-size:   var(--text-s, 1.4rem);
    line-height: 1.55;
    color:       var(--dl-muted);
}

.dl-card__contacts {
    display:   flex;
    gap:       0.4rem var(--space-m, 1.25rem);
    flex-wrap: wrap;
    margin-top: 0.9rem;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
}

.dl-card__contact {
    position:        relative;
    z-index:         1;
    color:           var(--text-dark, #000);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--dl-line);
    word-break:      break-word;
}

.dl-card__contact:hover { text-decoration-color: currentColor; }

/* ── Type badges (cards and popups) ───────────────────────── */
/* Set like the site's own badges (the category tag on the news cards):
   line-height 1.5 and no letter-spacing. At 1.3 the capitals sat high in
   the box, and the tracking left extra room after the last letter, so the
   text read as off-centre (Anders 2026-09-14). Same 23 px height as before. */
.dl-badge {
    display:        inline-block;
    padding:        0.2em 0.75em;
    border-radius:  var(--radius-xs, 2.222px);
    font-size:      var(--text-xs, 1.2rem);
    font-weight:    600;
    line-height:    1.5;
    text-transform: uppercase;
}

.dl-badge--dealer  { background: var(--primary, #ffcd00); color: #332900; }
.dl-badge--service { background: var(--neutral, #000);    color: var(--white, #fff); }

/* ── Map column ───────────────────────────────────────────── */
.dl__mapcol {
    position:  relative;
    min-width: 0;
}

.dl__map {
    width:     100%;
    height:    var(--dl-height);
    position:  relative;
    z-index:   0;
    background: var(--tertiary, #F0ECE4);
}

.dl__maptoggle { display: none; }

/* Leaflet chrome in the house style */
.dl .leaflet-bar {
    border:        1px solid var(--dl-line);
    border-radius: var(--radius-xs, 2.222px);
    box-shadow:    none;
}

.dl .leaflet-bar a {
    color: var(--text-dark, #000);
}

.dl .leaflet-container {
    font-family: inherit;
}

.dl .leaflet-popup-content-wrapper {
    border-radius: var(--radius, 5px);
    box-shadow:    0 4px 20px rgba(0, 0, 0, 0.18);
}

/* ── Pins ─────────────────────────────────────────────────── */
.dl-pin {
    display:       block;
    margin:        0.4rem; /* 16 px nål i 24 px träffyta */
    width:         16px;
    height:        16px;
    border-radius: var(--radius-circle, 50vw);
    border:        2px solid var(--white, #fff);
    box-shadow:    0 1px 4px rgba(0, 0, 0, 0.4);
    transition:    transform var(--dl-speed), box-shadow var(--dl-speed);
}

.dl-pin--dealer  { background: var(--primary, #ffcd00); }
.dl-pin--service { background: var(--base, #2d2d2d); }
.dl-pin--both    { background: var(--neutral, #000); border-color: var(--primary, #ffcd00); }

.dl-pin.is-hot,
.dl-pin.is-active {
    transform:  scale(1.4);
    box-shadow: 0 0 0 6px var(--primary-trans-20, rgba(255, 205, 0, 0.2)), 0 2px 8px rgba(0, 0, 0, 0.35);
    z-index:    10;
}

/* ── Cluster badge ────────────────────────────────────────── */
.dl-cluster {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   var(--radius-circle, 50vw);
    background:      var(--primary, #ffcd00);
    color:           #332900;
    font-size:       var(--text-xs, 1.2rem);
    font-weight:     700;
    border:          2px solid var(--white, #fff);
    box-shadow:      0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ── Popup ────────────────────────────────────────────────── */
.dl-popup {
    font-size: var(--text-s, 1.4rem);
    color:     var(--text-dark, #000);
    min-width: 220px;
}

.dl-popup__name {
    display:       block;
    font-size:     var(--text-m, 1.6rem);
    font-weight:   700;
    margin-bottom: 0.35rem;
}

.dl-popup__types {
    display:       flex;
    gap:           0.4rem;
    margin-bottom: 0.6rem;
    flex-wrap:     wrap;
}

.dl-popup__address {
    margin:      0 0 0.5rem;
    color:       var(--dl-muted);
    font-style:  normal;
    font-size:   var(--text-xs, 1.2rem);
    line-height: 1.55;
}

.dl-popup__contacts {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
    margin-top:     0.5rem;
}

.dl-popup__contact {
    font-size:       var(--text-xs, 1.2rem);
    font-weight:     600;
    color:           var(--text-dark, #000);
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break:      break-all;
}

/* ── Under 992 px: controls, then map (collapsed), then list ── */
@media (max-width: 991px) {
    .dl {
        grid-template-columns: 1fr;
        --dl-height: auto;
    }

    .dl__panel {
        display: contents;   /* children become grid items so the map can slot in between */
    }

    .dl__search { order: 1; }
    .dl__tools  { order: 2; }
    .dl__mapcol { order: 3; }
    .dl__status { order: 4; }
    .dl__list   { order: 5; overflow: visible; }

    .dl__maptoggle {
        display:         flex;
        align-items:     center;
        gap:             0.6rem;
        width:           100%;
        padding:         var(--space-s, 0.75rem) var(--space-m, 1.25rem);
        border:          0;
        border-bottom:   1px solid var(--dl-line);
        background:      var(--white, #fff);
        color:           var(--text-dark, #000);
        font-family:     inherit;
        font-size:       var(--text-xs, 1.2rem);
        font-weight:     600;
        text-align:      left;
        cursor:          pointer;
    }

    .dl__maptoggle svg {
        width:  1.6rem;
        height: 1.6rem;
    }

    /* Ikonsetets Chevron, vänds när kartan är öppen. */
    .dl__maptoggle::after {
        content:      "";
        margin-left:  auto;
        width:        1.6rem;
        height:       1.6rem;
        background-color: currentColor;
        -webkit-mask: url("/wp-content/themes/bricks-child/icons/brokk-chevron.svg") center / contain no-repeat;
                mask: url("/wp-content/themes/bricks-child/icons/brokk-chevron.svg") center / contain no-repeat;
        transition:   transform var(--dl-speed);
    }

    .dl--map-open .dl__maptoggle::after { transform: rotate(180deg); }

    .dl__map {
        display: none;
        height:  32rem;
        border-bottom: 1px solid var(--dl-line);
    }

    .dl--map-open .dl__map { display: block; }

    .dl-group__head { position: static; }
}

@media (max-width: 478px) {
    .dl__segs   { margin-left: 0; width: 100%; }
    .dl__seg    { flex: 1 1 0; justify-content: center; }
    .dl__submit { padding-inline: 1.2em; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .dl-card,
    .dl-pin,
    .dl__seg,
    .dl-group__head::after,
    .dl__maptoggle::after { transition: none; }
}