/**
 * Datum en Weer plugin — header-widget (onder de taalkiezer).
 * Leunt op de globale CSS-variabelen; werkt in light én dark mode.
 */

.datum-weer {
    /* Buiten de flow gehaald zodat de regel het taalvlaggetje niet omhoog duwt.
       Hangt onder het vlaggetje (.header-lang-stack is position: relative). */
    position: absolute;
    top: calc(100% + 7px); /* iets naar beneden */
    right: -120px;         /* nog wat verder naar rechts */

    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums; /* tijd springt niet bij elke seconde */
    user-select: none;
}

.datum-weer__dt {
    letter-spacing: 0.01em;
}

.datum-weer__dash,
.datum-weer__pipe {
    opacity: 0.4;
}

/* Iconen */
.datum-weer__ico {
    font-size: 0.92em;
}
.datum-weer__ico--clock {
    color: var(--text-secondary);
    opacity: 0.8;
}
.datum-weer__ico--temp,
.datum-weer__ico--hum {
    color: var(--accent);
}

.datum-weer__temp {
    font-weight: 700;
    color: var(--text-primary);
}

.datum-weer__hum {
    color: var(--accent);
    font-weight: 600;
}

/* Geen weerdata beschikbaar → alleen datum/tijd tonen */
.datum-weer--no-weather .datum-weer__dash,
.datum-weer--no-weather .datum-weer__pipe,
.datum-weer--no-weather .datum-weer__ico--temp,
.datum-weer--no-weather .datum-weer__ico--hum,
.datum-weer--no-weather .datum-weer__temp,
.datum-weer--no-weather .datum-weer__hum {
    display: none;
}

/* Krappe header op kleine schermen: widget verbergen (de taalkiezer verhuist
   daar toch al naar het instellingenmenu). */
@media (max-width: 768px) {
    .datum-weer {
        display: none;
    }
}