/* Julbordsguiden – facettfilter
   Samma komponent på mobil och desktop. Namnrymd jbf- för att inte
   krocka med UIkit/yootheme. Värden enligt utvecklarbrief §5. */

.jbf{
  --jbf-red:#b81d24;
  --jbf-red-tint:#fdf2f2;
  --jbf-ink:#2c3138;
  --jbf-ink-soft:#5b6470;
  --jbf-ink-mute:#8a929c;
  --jbf-line:#e2e5e9;
  --jbf-panel:#f7f8f9;
  --jbf-radius:8px;
  --jbf-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Layoutläge, läses av filter.js: 0 = dragspel (mobil), 1 = flikar (desktop).
     Brytpunkten står bara på ett ställe – mediafrågan längst ned i den här filen. */
  --jbf-tabs:0;
}

/* ---------- Filterkort ---------- */
.jbf-card{
  border:1px solid var(--jbf-line);
  border-radius:var(--jbf-radius);
  overflow:hidden;
  background:#fff;
}
.jbf-facet + .jbf-facet{border-top:1px solid var(--jbf-line)}

/* Rubrikrad – panelen fälls ut direkt under sin egen rubrik */
.jbf-head{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:0 14px;min-height:52px;
  background:#fff;border:0;cursor:pointer;text-align:left;
  font-size:17px;font-weight:700;color:var(--jbf-red);
  font-family:inherit;
}
.jbf-head:hover{background:var(--jbf-red-tint)}
.jbf-head .jbf-lbl{flex:1}
.jbf-head .jbf-cnt{
  font-family:var(--jbf-sans);font-size:12px;font-weight:700;
  background:var(--jbf-red);color:#fff;border-radius:999px;
  min-width:20px;height:20px;padding:0 6px;
  display:none;align-items:center;justify-content:center;
}
.jbf-head .jbf-cnt.is-on{display:inline-flex}
.jbf-head .jbf-chev{
  font-size:11px;color:var(--jbf-red);transition:transform .18s ease;
  font-family:var(--jbf-sans);line-height:1;
}
.jbf-facet.is-open .jbf-head{background:var(--jbf-red);color:#fff}
.jbf-facet.is-open .jbf-head .jbf-chev{color:#fff;transform:rotate(180deg)}
.jbf-facet.is-open .jbf-head .jbf-cnt{background:#fff;color:var(--jbf-red)}

.jbf-panel{
  display:none;padding:12px 12px 14px;
  background:var(--jbf-panel);border-top:1px solid var(--jbf-line);
}
.jbf-facet.is-open .jbf-panel{display:block}

.jbf-hint{margin:0 2px 10px;font-size:12.5px;color:var(--jbf-ink-mute)}
.jbf-hint b{color:var(--jbf-ink-soft)}

/* ---------- Chips ---------- */
.jbf-chips{display:flex;flex-wrap:wrap;gap:8px}
.jbf-chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:42px;padding:0 13px;
  background:#fff;border:1px solid var(--jbf-line);border-radius:var(--jbf-radius);
  font:500 14.5px/1 var(--jbf-sans);color:var(--jbf-ink);
  text-transform:none;letter-spacing:normal;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.jbf-chip:hover:not([disabled]){border-color:#c9ced4}
.jbf-chip .jbf-n{font-size:12.5px;color:var(--jbf-ink-mute);font-weight:400}
.jbf-chip[aria-pressed="true"]{
  background:var(--jbf-red);border-color:var(--jbf-red);color:#fff;font-weight:600;
}
.jbf-chip[aria-pressed="true"] .jbf-n{color:rgba(255,255,255,.75)}
.jbf-chip[aria-pressed="true"] .jbf-tick{display:inline}
.jbf-chip .jbf-tick{display:none;font-size:12px}
.jbf-chip[disabled]{opacity:.4;cursor:not-allowed;background:#fafbfb}

/* ---------- Statusrad ---------- */
.jbf-status{
  margin-top:14px;padding:13px 14px;
  background:var(--jbf-panel);border-radius:var(--jbf-radius);
}
.jbf-count{font-size:19px;font-weight:700;margin:0 0 2px}
.jbf-count b{color:var(--jbf-red)}
.jbf-active{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px}
.jbf-active:empty{margin-top:0}
.jbf-active .jbf-lead{font-size:13px;color:var(--jbf-ink-soft);margin-right:1px}
.jbf-tag{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--jbf-red);color:var(--jbf-red);
  border-radius:999px;padding:6px 6px 6px 12px;
  font:600 13.5px/1 var(--jbf-sans);
}
.jbf-tag button{
  border:0;background:var(--jbf-red-tint);color:var(--jbf-red);
  width:22px;height:22px;border-radius:999px;cursor:pointer;
  font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.jbf-clearall{
  margin-left:auto;background:none;border:0;padding:6px 2px;
  font:600 13.5px/1 var(--jbf-sans);color:var(--jbf-ink-soft);
  text-decoration:underline;cursor:pointer;
}
.jbf-note{margin:9px 0 0;font-size:12.5px;color:var(--jbf-ink-mute);line-height:1.45}

/* ---------- Sticky-rad ---------- */
.jbf-sticky{
  position:sticky;top:0;z-index:60;
  display:flex;gap:8px;padding:9px 12px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--jbf-line);
  opacity:0;transform:translateY(-100%);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  margin-bottom:-53px;
}
.jbf-sticky.is-on{opacity:1;transform:none;pointer-events:auto;margin-bottom:0}
.jbf-sbtn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;border:1px solid var(--jbf-line);background:#fff;
  border-radius:var(--jbf-radius);font:600 14.5px/1 var(--jbf-sans);color:var(--jbf-ink);
  cursor:pointer;
}
.jbf-sbtn .jbf-badge{
  background:var(--jbf-red);color:#fff;border-radius:999px;
  min-width:20px;height:20px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}

/* ---------- Tomt läge ---------- */
.jbf-empty{padding:34px 20px;text-align:center;color:var(--jbf-ink-soft)}
.jbf-empty strong{display:block;font-size:18px;color:var(--jbf-ink);margin-bottom:6px}

/* ---------- Dolda kort ---------- */
.jbf-hidden{display:none !important}

/* Fokusmarkering får inte tas bort (brief §7) */
.jbf-chip:focus-visible,
.jbf-head:focus-visible,
.jbf-sbtn:focus-visible,
.jbf-tag button:focus-visible,
.jbf-clearall:focus-visible{
  outline:2px solid var(--jbf-red);
  outline-offset:2px;
}

/* ==========================================================================
   DESKTOP (>= 960px) – återställer sajtens ursprungliga flikutseende.

   Ingen markup ändras och ingen logik påverkas. Accordion-DOM:en
   (rubrik + panel parvis inuti .jbf-facet) flödas om till flikar genom att
   .jbf-facet tas ur layouten med display:contents. Rubrikerna får order:1
   och hamnar på rad 1, den öppna panelen får order:2 + width:100% och
   bryter ner till rad 2 under samtliga flikar.

   Värdena nedan är uppmätta på sajtens tidigare filter.
   ========================================================================== */
@media (min-width:960px){

  .jbf{
    --jbf-red:#c60001;              /* desktop använder sajtens primärröda */
    --jbf-tabs:1;                   /* signalerar flikläge till filter.js */
  }

  /* ---------- Flikrad ---------- */
  .jbf-card{
    display:flex; flex-wrap:wrap;
    border:0; border-radius:0; overflow:visible; background:transparent;
  }
  .jbf-facet{ display:contents; }
  .jbf-facet + .jbf-facet{ border-top:0; }

  .jbf-head{
    order:1;
    width:auto; min-height:0;
    position:relative;
    padding:10px 20px;
    margin:0 4px 0 0;
    font-family:"PT Serif", Georgia, 'Times New Roman', serif;
    font-size:16px; font-weight:700; letter-spacing:.5px; line-height:27.2px;
    color:var(--jbf-red); background:#fff;
    border:1px solid #ededed;
  }
  .jbf-head:hover{ background:var(--jbf-red); color:#fff; border-color:var(--jbf-red); }
  .jbf-head .jbf-lbl{ flex:0 0 auto; }
  .jbf-head .jbf-chev{ display:none; }          /* flikar har ingen chevron */

  /* Aktiv flik. Innan filter.js hunnit sätta .jbf-ready visas första fliken
     som aktiv – annars blinkar panelen fram och layouten hoppar. Det gör
     också att första panelen syns även med JavaScript avstängt. */
  .jbf-facet.is-open .jbf-head,
  .jbf-card:not(.jbf-ready) .jbf-facet:first-child .jbf-head{
    background:var(--jbf-red); color:#fff; border-color:var(--jbf-red);
  }
  /* Sifferbrickan behövs bara när facetten är hopfälld – i en öppen flik
     syns valen ändå som ifyllda chips. */
  .jbf-facet.is-open .jbf-head .jbf-cnt{ display:none; }

  /* pilen under aktiv flik */
  .jbf-facet.is-open .jbf-head::after,
  .jbf-card:not(.jbf-ready) .jbf-facet:first-child .jbf-head::after{
    content:''; position:absolute; left:0; right:0; top:100%; margin:auto;
    width:0; height:0; display:block; z-index:2;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid var(--jbf-red);
  }

  .jbf-card:not(.jbf-ready) .jbf-facet:first-child .jbf-panel{ display:block; }

  /* ---------- Panel ---------- */
  .jbf-panel{
    order:2; width:100%;
    margin-top:-1px;                            /* sömlöst mot flikraden */
    padding:15px;
    background:#fff;
    border:1px solid #ededed; border-radius:0;
  }
  .jbf-hint{ margin:0 0 10px; font-size:12.5px; }

  /* ---------- Chips i originalstil ---------- */
  .jbf-chips{ gap:5px; }
  .jbf-chip{
    min-height:30px; height:30px; padding:0 15px; gap:5px;
    font-family:"PT Sans", var(--jbf-sans);
    font-size:13px; font-weight:700;
    text-transform:uppercase; letter-spacing:.5px;
    color:#5b6277; background:#fafbfd;
    border:1px solid #e1e1e1; border-radius:3px;
  }
  .jbf-chip:hover:not([disabled]){ color:var(--jbf-red); border-color:var(--jbf-red); }
  .jbf-chip[aria-pressed="true"]{
    background:var(--jbf-red); border-color:var(--jbf-red); color:#fff;
  }
  .jbf-chip[aria-pressed="true"] .jbf-n{ color:rgba(255,255,255,.8); }
  .jbf-chip .jbf-n{ font-size:12px; font-weight:400; letter-spacing:0; }

  /* ---------- Statusrad: antal vänster, noten höger ---------- */
  .jbf-status{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
    margin-top:20px; padding:15px;
    background:#f5f7fd; border-radius:0;
  }
  .jbf-count{ margin:0; font-size:16px; font-weight:700; color:#111; }
  .jbf-note{ margin:0 0 0 auto; font-size:14px; color:#5b6277; }
  .jbf-active{ order:3; width:100%; margin-top:4px; }

  /* Sticky-raden är en mobilaffordans */
  .jbf-sticky{ display:none; }
}