/*
 * CSS for the weewx LiveSeasons skin's wind gauge.
 * Copyright (C) John Kline 2025
 * Distributed under terms of GPLv3.  See LICENSE.txt for your rights.
 */
/* General Layout */
.wind-gauge {
    text-align: center;
    /*padding: 30px;*/
    /*border: 1px solid #ccc;*/
    /*border-radius: 10px;*/
    /*background: white;*/
    /*box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);*/
    /*width: 250px;*/
}

/* --- CORRECTED COMPASS STYLES --- */
.compass-container {
    position: relative; 
    /*margin: 30px auto;*/
    margin: 10px auto;
    border: 2px solid #333;
    border-radius: 50%;
}

/* Base style for all four indicators */
.indicator {
    position: absolute;
    /*font-size: 1.2em;*/
    /*font-size: 0.8em;*/
    /*font-weight: bold;*/
    color: #333;
}

/* North (Top) */
.indicator.north {
    /*top: -20px;*/
    /*top: -20px;*/
    left: 50%;
    transform: translateX(-50%);
}

/* East (Right) */
.indicator.east {
    top: 50%; 
    /*right: -20px;*/
    /*right: -12px;*/
    transform: translateY(-50%);
}

/* South (Bottom) */
.indicator.south {
    /*bottom: -20px;*/
    /*bottom: -18px;*/
    left: 50%;
    transform: translateX(-50%);
    color: #666;
}

/* West (Left) */
.indicator.west {
    top: 50%;
    /*left: -20px;*/
    /*left: -16px;*/
    transform: translateY(-50%);
}

/* Wind Arrow */
.wind-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg); 
    /*font-size: 3em;*/
    line-height: 1;
    color: #cc0000;
    font-weight: bolder;
    transition: transform 0.5s ease-in-out;
    transform-origin: 50% 50%; 
}