/* ==================== MÅNE-IKONER ==================== */
/* Alle weather-icons med "moon" i class */
.wi[class*="moon"] {
    font-size: 1.5em;
    color: #FFD700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
    transition: all 0.3s ease;
}

/* Specialtilfælde */
.wi-moon-0,
.wi-moon-new {
    color: #333;
    text-shadow: none;
}

.wi-moon-14,
.wi-moon-full {
    color: #fff8dc;
    text-shadow: 0 0 12px rgba(255, 255, 200, 0.9);
}

/* ==================== FONT AWESOME VARIANTER ==================== */
.fa-solid.fa-circle {
    font-size: 3em;
    color: #FFD700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
}

.fa-regular.fa-circle {
    font-size: 2em;
    color: #FFD700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.fa-solid.fa-circle-half-stroke {
    font-size: 3em;
    color: #FFA500;
    text-shadow: 0 0 12px rgba(255, 165, 0, 0.8);
}

.fa-regular.fa-circle-half-stroke {
    font-size: 2em;
    color: #FFA500;
    text-shadow: 0 0 6px rgba(255, 165, 0, 0.5);
}

.fa-solid.fa-moon {
    font-size: 2.5em;
    color: #87CEFA;
    text-shadow: 0 0 10px rgba(135, 206, 250, 0.8);
}

.fa-solid.fa-moon-slash {
    font-size: 2.5em;
    color: #555;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

/* Måneikon specifikt for i dag */
#moon_icon_today.fa-solid,
#moon_icon_today.fa-regular {
    transition: all 0.3s ease;
    display: inline-block;
    line-height: 1;
}

/* ==================== MOON-PHASE CONTAINER ==================== */
.moon-phase {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}

/* ==================== ICONS I GENEREL ==================== */
/* Måneikoner i gylden farve, uanset tema */
.icons i.fa-moon {
    color: #FFD700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

/* ==================== STATUS / TRENDS ==================== */
.trend-symbol {
    font-weight: bold;
    margin-left: 5px;
}

.trend-symbol.up {
    color: green;
}

.trend-symbol.down {
    color: red;
}

.trend-symbol.flat {
    color: gray;
}

.danger {
    color: red;
    font-weight: bold;
}

.ok {
    color: green;
    font-weight: bold;
}

/* ikon + tekst container */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.icon-text i.wi {
    display: inline-flex;
    width: 1.5em;
    text-align: center;
    font-size: 1em;
}

.icon-text .label {
    font-size: 1em;
    font-weight: 600;
}

.icon_temperatur_text i.wi {
    color: red;
}

.icon_drought_text i.fa-solid {
    color: #C65D00;   /* brændt orange */
}

.icon_humidity_text i.wi {
    color: blue;
}

.icon_pressure_text i.wi {
    color: black;
}

.icon_wind_text i.wi {
    color: black;
}

.icon_rain_text i.wi {
    color: lightblue;
}

.icon-day-text i.wi {
    color: orange;
}

.icon-night-text i.wi {
    color: #FFD700;
}

.icon-forecast-text i.wi {
    color: darkblue;
}

.icon-andet-text i.wi {
    color: black;
}

@media (prefers-color-scheme: dark) {
    .icon_temperatur_text i.wi {
        color: #FF6666;
    }

    .icon_drought_text i.fa-solid {
        color: #FF8C42;  /* varm, tør orange */
    }

    .icon_humidity_text i.wi {
        color: #66CCFF;
    }

    .icon_pressure_text i.wi {
        color: #FFFFFF;
    }

    .icon_wind_text i.wi {
        color: #CCCCCC;
    }

    .icon_rain_text i.wi {
        color: #99CCFF;
    }

    .icon-day-text i.wi {
        color: #FFA500;
    }

    .icon-night-text i.wi {
        color: #FFD700;
    }

    .icon-forecast-text i.wi {
        color: #99CCFF;
    }

    .icon-andet-text i.wi {
        color: #FFFFFF;
    }
}