/* ===========================================================================
   Rækken af emner over en liste
   ---------------------------------------------------------------------------
   Den samme på profetudtalelserne og på lektionerne. To sider med den samme
   opgave skal ikke have hver sit sæt regler, der ligner det andet på en prik
   og skal rettes to steder. Arket er derfor sit eget og hører ikke til den
   ene af dem.

   De første emner står fremme; resten folder sig ud fra ét felt.
   =========================================================================== */


/* Emnerne står som en række, man kan læse på tværs, og ikke som en liste, der
   skubber udtalelserne ned. Tallet bagpå hvert emne siger, hvor meget der er at
   læse, før man klikker. */
.topic-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2.5rem;
}

.topic-filter a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .95rem;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.2;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.topic-filter a b {
    color: var(--gold);
    font-size: .78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.topic-filter a:hover,
.topic-filter a:focus-visible {
    border-color: color-mix(in srgb, var(--gold) 62%, var(--line));
    color: var(--gold);
}

/* Det valgte emne står i grønt og ikke i guld. Guldet bærer i forvejen tallene
   og menuen; en anden farve gør det umiddelbart synligt, hvad man ser på. */
.topic-filter a.is-current {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 16%, transparent);
    color: var(--green);
}

.topic-filter a.is-current b { color: var(--green); }


/* De øvrige emner ligger bag ét felt.

   Elleve emner i træk fyldte to linjer og skubbede den første udtalelse ned
   under skærmkanten. De tre første står fremme — rækkefølgen sættes i
   kategoritræet — og resten folder sig ud, når man peger på feltet.

   Feltet åbner på både «hover» og «focus-within». Det første er musen, det
   andet er tastaturet — og et tryk på en telefon sætter fokus på knappen og
   åbner det på samme måde. Derfor virker det uden mus og uden javascript, og
   det overlever, at biblioteket skifter sin krop ud. */
.topic-filter-more {
    position: relative;
}

.topic-filter-handle {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .95rem;
    border: 1px dashed color-mix(in srgb, var(--gold) 52%, var(--line));
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.topic-filter-handle b {
    color: var(--gold);
    font-size: .78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Pilen er tegnet med kanter og ikke sat med et tegn: ▾ findes ikke i sidens
   skrift og blev vist som en streg af en tilfældig anden skrift. */
.topic-filter-handle i {
    width: 0;
    height: 0;
    border: .3rem solid transparent;
    border-top-color: currentColor;
    transform: translateY(.15rem);
    transition: transform .2s ease;
}

.topic-filter-more:hover .topic-filter-handle,
.topic-filter-more:focus-within .topic-filter-handle {
    border-style: solid;
    border-color: var(--gold);
    color: var(--gold);
}

.topic-filter-more:hover .topic-filter-handle i,
.topic-filter-more:focus-within .topic-filter-handle i {
    transform: translateY(-.15rem) rotate(180deg);
}

/* Feltet er skjult med «visibility» og ikke med «display». Så kan det tone
   frem, og — vigtigere — så er linkene inde i det uden for tabulatorrækken,
   indtil feltet er åbent. */
.topic-filter-panel {
    position: absolute;
    top: calc(100% + .4rem);

    /* Hængt op i højre side. Knappen står sidst i rækken, og et felt, der
       foldede ud mod højre, ville lægge sig ud over skærmkanten — tallene
       bag emnerne var det første, der blev klippet af. */
    right: 0;
    left: auto;
    z-index: 20;
    min-width: 17rem;
    max-height: 32rem;
    overflow-y: auto;
    padding: .5rem;
    display: grid;
    gap: .15rem;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 22px 48px rgba(4, 12, 9, .55);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.35rem);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.topic-filter-more:hover .topic-filter-panel,
.topic-filter-more:focus-within .topic-filter-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* En bro af luft mellem knappen og feltet. Uden den lukker feltet, når musen
   krydser mellemrummet på vej ned i det. */
.topic-filter-panel::before {
    content: "";
    position: absolute;
    top: -.4rem;
    right: 0;
    left: 0;
    height: .4rem;
}

.topic-filter-panel > span {
    padding: .35rem .6rem .5rem;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.topic-filter-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .6rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: .86rem;
    font-weight: 600;
}

.topic-filter-panel a:hover,
.topic-filter-panel a:focus-visible {
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: var(--gold);
}

.topic-filter-panel a b {
    color: var(--gold);
    font-size: .76rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}


/* --- Smalle skærme ---------------------------------------------------------- */

@media (max-width: 760px) {
    .topic-filter {
        gap: .4rem;
        margin-bottom: 1.8rem;
    }

    .topic-filter a,
    .topic-filter-handle {
        padding: .5rem .75rem;
        font-size: .8rem;
    }

    /* På en telefon er der ikke plads til et felt, der hænger ud over kanten.
       Det lægger sig i stedet i hele bredden under rækken. */
    .topic-filter-more {
        position: static;
    }

    .topic-filter-panel {
        top: auto;
        right: auto;
        left: 0;
        min-width: 0;
        width: 100%;
    }
}