/**
 * Underkategori-navigation på forældre-arkivet (BCAT_Display_Terms).
 * Én række, vandret rul (swipe på touch, hover-pil på desktop). Ingen fade. Fire styles.
 * Arver temaets farver/typografi — vi sætter kun struktur, ikke brand-farver.
 */

.bcat-subcats {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1.25em 0;
}

.bcat-sc-track {
    /* flex:1 + min-width:0: sporet fylder hele rækken (ellers krymper det til indholdet og
       justify-content har intet at centrere i), og må gerne blive smallere end indholdet */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    /* Scrollbaren skjules — rækken har pile på desktop og swipe på touch */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px;
}
.bcat-sc-track::-webkit-scrollbar { display: none; }

.bcat-sc-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1.25;
}
/* Billed-stilene (cirkler/kort/miniature) skal IKKE farves som links — navnet under en
   cirkel er en billedtekst, ikke et link-udseende. Chips derimod arver linkfarven. */
.bcat-subcats.is-circles .bcat-sc-item:not(.bcat-sc-up),
.bcat-subcats.is-cards .bcat-sc-item:not(.bcat-sc-up),
.bcat-subcats.is-minichips .bcat-sc-item:not(.bcat-sc-up) { color: inherit; }

.bcat-sc-visual {
    /* border-box: ikon-varianten har padding, og uden dette bliver ikon-cirklerne
       større end foto-cirklerne på temaer uden global box-sizing-reset */
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    font-weight: 600;
}

/* Lazy-loadede fotos: udfyld hele visual-fladen som background-size:cover gjorde */
.bcat-sc-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.bcat-sc-visual.is-icon { padding: 22%; }
.bcat-sc-visual .bcat-icon { display: block; }

/* Billedkort: ikonet skal ikke fylde hele fladen som et foto ville */
.bcat-subcats.is-cards .bcat-sc-visual.is-icon { padding: 0; }
.bcat-subcats.is-cards .bcat-sc-visual.is-icon .bcat-icon {
    width: 42px;
    height: 42px;
    margin: 8px auto 0;
    opacity: 0.75;
}

.bcat-sc-label { white-space: nowrap; }

/* Antal opskrifter: chips får " · 15" dæmpet i linjen; billed-stilene en lille underlinje */
.bcat-sc-count { opacity: 0.6; font-weight: 400; }
.bcat-subcats.is-circles .bcat-sc-count,
.bcat-subcats.is-cards .bcat-sc-count {
    display: block;
    font-size: 0.82em;
    margin-top: 0.15em;
    white-space: nowrap;
}
.bcat-subcats.is-cards .bcat-sc-count { opacity: 0.85; }

/* Lange navne ("Bælgfrugter & planteprotein", 27 tegn): chips-varianterne vokser med
   indholdet og må gerne være lange i en rullende række — men kort og cirkler har fast
   bredde og skal ombryde i stedet for at klippe. Kort: maks 2 linjer med ellipse
   (gradienten dækker stadig teksten). Cirkler: frit ombryd (3 linjer er ok under en
   cirkel). Bindestreg ved orddeling hvor temaet har lang="da". */
.bcat-subcats.is-cards .bcat-sc-label {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    hyphens: auto;
    overflow-wrap: break-word;
}
.bcat-subcats.is-circles .bcat-sc-label {
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Rulle-pil: KUN på pegeredskaber (musehjulet ruller lodret, så uden den kan en overløbende
   række slet ikke rulles med mus — pegefelt og touch swiper selv). Vises kun ved hover, og
   kun når JS har konstateret reelt overløb. Pilen har sin EGEN lille skive som baggrund i
   stedet for et fade-lag over rækken: fade'en skjulte afklipningen (2.74.0-fejlen), mens en
   skive kun dækker de få pixels, den selv fylder. */
.bcat-sc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 50%;
    background: var(--bcat-sc-bg, #fff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    color: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.14s ease;
}
/* Flugter med kanten: .is-chips er overflow:hidden, så alt uden for bliver klippet væk */
.bcat-sc-arrow.is-prev { left: 0; }
.bcat-sc-arrow.is-next { right: 0; }
.bcat-subcats:hover .bcat-sc-arrow:not([hidden]),
.bcat-sc-arrow:focus-visible { opacity: 1; }
.bcat-sc-arrow:hover { background: var(--bcat-sc-bg, #fff); border-color: rgba(0, 0, 0, 0.2); }
/* Touch (mobil OG tablet): ingen pil — man swiper, og en pil ville bare dække en chip */
@media (hover: none) {
    .bcat-sc-arrow { display: none; }
}

/* A. Tekst-chips — ÉN rulbar række, men justeret af REN CSS (ingen JS → ingen CLS):
   sporet er inline-flex, så det følger forælderens text-align som inline-indhold
   (centreret desktop / venstre mobil via temaets egne breakpoints). Passer alt, står
   det centreret; overflower det, er det max-width:100% og ruller — indholdet starter
   da automatisk fra venstre. Ingen fade (2.74.0): rækken klippes hårdt ved kanten, og den
   halve chip er selv beskeden om, at der er mere. Pilen er tilbage (2.76.0), men kun som et
   GREB på desktop — den forklarer ikke afklipningen, den giver mus-brugere noget at trykke
   på. Farven arves fra temaets LINK-regel (ingen color på <a>). */
.bcat-subcats.is-chips {
    display: block;
    position: relative;
    text-align: inherit;
    overflow: hidden;   /* intet må titte frem uden for rækken */
    box-sizing: border-box;
}
.bcat-subcats.is-chips .bcat-sc-track {
    display: inline-flex;
    vertical-align: top;
    max-width: 100%;
    width: auto;
    gap: 8px;
    padding: 2px 2px 6px;
}
/* Udfyldte chips: linkfarven som baggrund, hvid tekst — tydeligere "det her kan man trykke på".
   currentColor = temaets a-farve, så den følger sitet uden indstillinger. */
.bcat-subcats.is-fill.is-chips .bcat-sc-item,
.bcat-subcats.is-fill.is-minichips .bcat-sc-item {
    background: currentColor;
    border-color: transparent;
    opacity: 1;
}
.bcat-subcats.is-fill.is-chips .bcat-sc-label,
.bcat-subcats.is-fill.is-minichips .bcat-sc-label { color: #fff; }
.bcat-subcats.is-fill.is-chips .bcat-sc-count,
.bcat-subcats.is-fill.is-minichips .bcat-sc-count { color: #fff; opacity: .75; }
.bcat-subcats.is-fill.is-chips .bcat-sc-item:hover,
.bcat-subcats.is-fill.is-minichips .bcat-sc-item:hover { filter: brightness(.92); }
.bcat-subcats.is-chips .bcat-sc-item {
    padding: 0.35em 0.95em;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.8rem;
    opacity: 0.9;
    white-space: nowrap;
}
.bcat-subcats.is-chips .bcat-sc-item:hover { opacity: 1; }

/* B. Cirkelbilleder */
.bcat-subcats.is-circles .bcat-sc-track { gap: 18px; }
.bcat-subcats.is-circles .bcat-sc-item {
    flex-direction: column;
    gap: 6px;
    width: 84px;
    text-align: center;
}
.bcat-subcats.is-circles .bcat-sc-visual {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 22px;
}
.bcat-subcats.is-circles .bcat-sc-label {
    white-space: normal;
    font-size: 0.78em;
    opacity: 0.85;
}

/* C. Billedkort */
.bcat-subcats.is-cards .bcat-sc-item {
    position: relative;
    width: 150px;
    height: 84px;
    border-radius: 12px;
    overflow: hidden;
    align-items: flex-end;
    padding: 8px 10px;
}
.bcat-subcats.is-cards .bcat-sc-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    font-size: 28px;
}

/* Overlay under teksten — kun i den nederste tredjedel, hvor teksten står. Uden
   overlay drukner hvid skrift i lyse madfotos (fx en lys salat), men et kraftigt
   overlay dæmper hele billedet unødigt: dette holder maden lys og teksten læsbar.
   Kun på RIGTIGE billeder — farve- og ikon-kort har deres eget kontrastforhold. */
.bcat-subcats.is-cards .bcat-sc-visual:not(.is-color):not(.is-icon)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 40%, transparent 75%);
}

.bcat-subcats.is-cards .bcat-sc-label {
    position: relative;
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Farve-/ikon-kort: teksten står på en lys flade, så den skal IKKE være hvid */
.bcat-subcats.is-cards .bcat-sc-visual.is-color ~ .bcat-sc-label,
.bcat-subcats.is-cards .bcat-sc-visual.is-icon ~ .bcat-sc-label {
    color: inherit;
    text-shadow: none;
}

/* D. Chips med miniature */
.bcat-subcats.is-minichips .bcat-sc-item {
    padding: 4px 14px 4px 4px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.85em;
    opacity: 0.9;
}
.bcat-subcats.is-minichips .bcat-sc-visual {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
}

@media (max-width: 600px) {
    .bcat-subcats.is-circles .bcat-sc-item { width: 74px; }
    .bcat-subcats.is-circles .bcat-sc-visual { width: 56px; height: 56px; }
    .bcat-subcats.is-cards .bcat-sc-item { width: 132px; height: 76px; }
}

/* «Se også» (søskende-tilstand): lille overskrift over rækken + forælder-linket
   (.bcat-sc-up) i formatets eget udtryk, men "vendt om" — så det læses som "op". */
.bcat-sc-heading {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
    margin: 1.25em 0 0;
    text-align: inherit;
}
.bcat-sc-heading + .bcat-subcats { margin-top: 0.5em; }

/* Chips: modsat vægt af søskende. Kant-chips -> udfyldt forælder; udfyldte -> kant. */
.bcat-subcats.is-chips .bcat-sc-item.bcat-sc-up {
    background: currentColor;
    font-weight: 600;
    opacity: 1;
}
.bcat-subcats.is-chips .bcat-sc-up .bcat-sc-label { color: #fff; }
.bcat-subcats.is-fill.is-chips .bcat-sc-item.bcat-sc-up {
    background: transparent;
    border: 1.5px solid currentColor;
}
.bcat-subcats.is-fill.is-chips .bcat-sc-up .bcat-sc-label { color: inherit; }

/* Miniature-chips: kant-fremhævning i linkfarven (op-linket har IKKE color:inherit) */
.bcat-subcats.is-minichips .bcat-sc-item.bcat-sc-up {
    border: 1.5px solid currentColor;
    font-weight: 600;
}
.bcat-subcats.is-fill.is-minichips .bcat-sc-item.bcat-sc-up { background: transparent; }
.bcat-subcats.is-fill.is-minichips .bcat-sc-up .bcat-sc-label { color: inherit; }

/* Cirkler: tynd ring i linkfarven om forælderens eget billede + label i linkfarven */
.bcat-subcats.is-circles .bcat-sc-up .bcat-sc-visual {
    box-shadow: 0 0 0 2px var(--bcat-sc-bg, #fff), 0 0 0 3.5px currentColor;
}
.bcat-subcats.is-circles .bcat-sc-up .bcat-sc-label {
    font-weight: 600;
    opacity: 1;
}

/* Billedkort: tynd ramme i linkfarven (box-shadow klippes ikke af overflow:hidden) */
.bcat-subcats.is-cards .bcat-sc-item.bcat-sc-up {
    box-shadow: 0 0 0 2.5px currentColor;
}

/* Kryds-facet-rækken ("Udforsk videre"): terms fra ANDRE facetter, hvis auto-regel peger
   på denne kategori. Bevidst dæmpet og stiplet, så det er tydeligt at man skifter dimension
   og ikke går et niveau ned. */
.bcat-subcats-x .bcat-sc-item { opacity: 0.78; }
.bcat-subcats-x .bcat-sc-item:hover { opacity: 1; }
.bcat-subcats.is-chips.bcat-subcats-x .bcat-sc-item,
.bcat-subcats.is-minichips.bcat-subcats-x .bcat-sc-item { border-style: dashed; }
/* Udfyldte chips: kryds-facet vises som KANT-chips, så de to rækker ikke ligner hinanden */
.bcat-subcats.is-fill.is-chips.bcat-subcats-x .bcat-sc-item,
.bcat-subcats.is-fill.is-minichips.bcat-subcats-x .bcat-sc-item {
    background: transparent;
    border-color: currentColor;   /* fill-reglen sætter transparent — kanten skal tilbage */
}
.bcat-subcats.is-fill.is-chips.bcat-subcats-x .bcat-sc-label,
.bcat-subcats.is-fill.is-minichips.bcat-subcats-x .bcat-sc-label { color: inherit; }
.bcat-subcats.is-fill.is-chips.bcat-subcats-x .bcat-sc-count,
.bcat-subcats.is-fill.is-minichips.bcat-subcats-x .bcat-sc-count { color: inherit; opacity: .6; }