/*
 * Navneskiltene på profeternes træ.
 *
 * Træbilledet har ingen navne malet ind i sig. Tidligere havde det, og da lå
 * der kun et usynligt klikfelt oven på hvert malet navn — derfor stod der
 * ingenting, da billedet blev skiftet ud.
 *
 * Navnene tegnes nu som rigtige skilte oven på træet. Hvor kraftigt skiltet
 * står, og hvilken farve det har, sættes i administrationen under
 * Profeter → Hero og kommer ind som to værdier på selve træet:
 *
 *   --node-tint   farven på navn, ramme og skær
 *   --node-veil   hvor uigennemsigtig pladen bag navnet er, i procent
 *
 * Filen ligger for sig selv og indlæses efter prophets.css, så den vinder over
 * de regler, der gjorde skiltene usynlige.
 */

.prophet-tree {
    --node-tint: #f1c671;
    --node-veil: 70%;

    /* Hvor store skiltene er. Ét tal for dem alle: femogtyve skilte, der
       skulle sættes hver for sig, ville aldrig komme til at stå ens. */
    --node-scale: 1;
}

/* Skiltet. Bredden kommer fra teksten og ikke fra databasen: målene der er
   sat efter de navne, der før var malet ind i billedet, og et navn som
   Muhammad ﷺ skal have plads uanset hvad feltet måtte være sat til. */
.prophets-hero--tree .prophet-tree.is-labelled .prophet-node {
    display: grid;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: calc(0.3rem * var(--node-scale)) calc(0.6rem * var(--node-scale));
    border: 1px solid color-mix(in srgb, var(--node-tint) 45%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, #03151c var(--node-veil), transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, #000 calc(var(--node-veil) * 0.45), transparent);
    gap: 1px;
    place-content: center;
    text-align: center;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.prophets-hero--tree .prophet-tree.is-labelled .prophet-node .prophet-node-arabic {
    color: var(--node-tint);
    font-family: var(--arabic, 'Amiri', serif);
    font-size: calc(1.05rem * var(--node-scale));
    font-weight: 400;
    line-height: 1.15;
    text-shadow: 0 1px 6px rgb(0 0 0 / 75%);
}

.prophets-hero--tree .prophet-tree.is-labelled .prophet-node .prophet-node-name {
    color: color-mix(in srgb, var(--node-tint) 78%, #fff);
    font-size: calc(0.62rem * var(--node-scale));
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-shadow: 0 1px 5px rgb(0 0 0 / 80%);
    text-transform: uppercase;
}

.prophets-hero--tree .prophet-tree.is-labelled .prophet-node:hover,
.prophets-hero--tree .prophet-tree.is-labelled .prophet-node:focus-visible {
    z-index: 5;
    border-color: var(--node-tint);
    /* Står pladen allerede helt tæt, kan den ikke blive tættere. Uden
       begrænsningen ville tallet gå over 100 % og reglen blive kasseret. */
    background: color-mix(in srgb, #03151c min(100%, calc(var(--node-veil) + 18%)), transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--node-tint) 30%, transparent);
    transform: translate(-50%, -50%) translateY(-2px);
}

.prophets-hero--tree .prophet-tree.is-labelled .prophet-node.is-chosen {
    border-color: var(--node-tint);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--node-tint) 40%, transparent),
        0 0 26px color-mix(in srgb, var(--node-tint) 28%, transparent);
}

/* Det sidste sendebud står lidt større end de øvrige. */
.prophets-hero--tree .prophet-tree.is-labelled .prophet-node.is-final {
    padding: calc(0.4rem * var(--node-scale)) calc(0.75rem * var(--node-scale));
    border-color: color-mix(in srgb, var(--node-tint) 75%, transparent);
}

.prophets-hero--tree .prophet-tree.is-labelled .prophet-node.is-final .prophet-node-arabic {
    font-size: calc(1.3rem * var(--node-scale));
}

.prophets-hero--tree .prophet-tree.is-labelled .prophet-node.is-final .prophet-node-name {
    font-size: calc(0.68rem * var(--node-scale));
}

/* På en lille skærm er der ikke plads til fireogtyve skilte ved siden af
   hinanden. Teksten skrumper med, så de stadig kan læses uden at dække træet. */
@media (max-width: 900px) {
    .prophets-hero--tree .prophet-tree.is-labelled .prophet-node {
        padding: calc(0.2rem * var(--node-scale)) calc(0.4rem * var(--node-scale));
    }

    .prophets-hero--tree .prophet-tree.is-labelled .prophet-node .prophet-node-arabic {
        font-size: calc(0.85rem * var(--node-scale));
    }

    .prophets-hero--tree .prophet-tree.is-labelled .prophet-node .prophet-node-name {
        font-size: calc(0.52rem * var(--node-scale));
    }
}