*{box-sizing:border-box}body{margin:0;background:#061321;color:#f4f7fb;font:14px Arial,sans-serif}.wrap{width:min(1780px,calc(100% - 24px));margin:auto;padding:10px 0 22px}header,.hero,.chartbox{background:#102236;border:1px solid #28445d;border-radius:17px;min-height:420px}header{padding:17px 27px;display:flex;justify-content:space-between;align-items:center;min-height:110px}.brand{display:flex;align-items:center;gap:14px}.tree{font-size:64px}.brand h1{margin:0;color:#d8b45e;font-size:30px;letter-spacing:2px}.brand span{color:#35d0d1;letter-spacing:4px}.clock{text-align:right;display:grid;gap:5px;color:#8eafcc}.clock>b{font-size:27px;color:#35d0d1}.clock em{font-style:normal;color:#43e56a}nav{display:flex;justify-content:center;gap:10px;padding:16px}button{background:#102236;color:#eef5fb;border:1px solid #29465f;border-radius:9px;padding:11px 21px;font-weight:bold}button.active{background:#35cdd1;color:#04121d}.hero{padding:20px;display:grid;grid-template-columns:1.2fr 1fr;gap:20px}.hero-main{display:flex;align-items:center;justify-content:center;gap:25px}.weather-icon{width:105px;height:105px;border:2px solid #2b506d;background:#112a40;border-radius:50%;display:grid;place-items:center;font-size:58px}.temp{font-size:72px;font-weight:bold;color:#ff982f}.condition{text-align:center;font-size:22px}.location{text-align:center;color:#8facC8;margin-top:8px}.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hero-grid>div,.cards>div,.chartstats>div,.status>div{background:#14283d;border:1px solid #2a4862;border-radius:12px;padding:14px;display:flex;flex-direction:column;justify-content:center}.hero-grid label,.cards label,.chartstats label,.status label{color:#8eafcc;text-transform:uppercase;font-size:11px}.hero-grid strong{color:#36d0d1;font-size:19px;margin-top:7px}.hero-grid small,.cards small{color:#8eafcc;margin-top:5px}.compass{position:relative;width:48px;height:48px;border:2px solid #315978;border-radius:50%;margin:5px auto}.compass span{position:absolute;left:50%;transform:translateX(-50%);top:2px}.compass i{position:absolute;left:22px;top:24px;width:3px;height:18px;background:#ff982f;transform-origin:50% 0}.compass i:before{content:"";position:absolute;top:-7px;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid #ff982f}.cards{display:grid;gap:12px;margin-top:14px}.four{grid-template-columns:repeat(4,1fr)}.cards>div{min-height:105px;text-align:center}.cards strong{font-size:25px;color:#35d0d1;margin:8px 0 3px}.cards .orange{color:#ff982f}.chartbox{margin-top:16px;padding:18px}.charthead{display:flex;justify-content:space-between;align-items:center}.charthead h2{color:#35d0d1;margin:0 0 7px;font-size:20px}.charthead span{color:#8eafcc}.canvas{height:310px;margin-top:12px}.chartstats{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:11px}.chartstats>div{text-align:center;padding:10px}.chartstats strong,.status strong{color:#35d0d1;font-size:18px;margin-top:7px}.status{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}.status>div{text-align:center;min-height:72px}#loadingOverlay{display:none;position:fixed;inset:0;background:#0005;z-index:99;align-items:center;justify-content:center}#loadingOverlay.show{display:flex}.spinner{width:55px;height:55px;border:6px solid #31506a;border-top-color:#35d0d1;border-radius:50%;animation:s .8s linear infinite}@keyframes s{to{transform:rotate(360deg)}}@media(max-width:950px){.hero{grid-template-columns:1fr}.four{grid-template-columns:repeat(2,1fr)}.chartstats{grid-template-columns:repeat(3,1fr)}.status{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){header{padding:14px}.tree{font-size:45px}.brand h1{font-size:20px}.clock{font-size:11px}nav{justify-content:flex-start;overflow:auto}.hero-main{gap:10px}.weather-icon{width:75px;height:75px;font-size:40px}.temp{font-size:45px}.hero-grid{grid-template-columns:repeat(2,1fr)}.four,.status{grid-template-columns:1fr}.charthead{display:block}.periods{margin-top:12px}.canvas{height:250px}.chartstats{grid-template-columns:repeat(2,1fr)}}
.section-title{display:flex;align-items:center;gap:12px;margin:14px 2px 7px;color:#6f93b1;text-transform:uppercase;font-size:11px;font-weight:bold;letter-spacing:1.5px}.section-title:after{content:"";height:1px;background:#18344c;flex:1}.cards{margin-top:0!important}.cards>div{min-height:91px!important}.status{grid-template-columns:repeat(4,1fr)!important}.status>div{min-height:62px!important}.status-value.good{color:#42df72}.status-value.fair{color:#e9c85d}.status-value.moderate{color:#ff9d3d}.status-value.poor{color:#ff6666}.direction-card{align-items:center}@media(max-width:720px){.four{grid-template-columns:repeat(2,1fr)!important}.status{grid-template-columns:repeat(2,1fr)!important}.hero{grid-template-columns:1fr!important}.chartstats{grid-template-columns:repeat(2,1fr)!important}.charthead{display:block!important}.periods{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px}}
/* v1.0.3 refinements */
.direction-card{align-items:center}.compass-rose{position:relative;width:104px;height:104px;margin:7px auto 4px;border:2px solid #3d6685;border-radius:50%;background:radial-gradient(circle at center,transparent 0 45%,#24435b 46% 47%,transparent 48%),repeating-conic-gradient(from 0deg,#587b96 0deg 1deg,transparent 1deg 15deg);box-shadow:inset 0 0 0 5px #102236,0 0 0 1px #18344c}.compass-rose span{position:absolute;z-index:3;font-size:9px;font-weight:700;color:#a9c1d4;line-height:1}.compass-rose .c-n{top:6px;left:50%;transform:translateX(-50%);color:#ff982f;font-size:11px}.compass-rose .c-ne{top:18px;right:13px}.compass-rose .c-e{top:50%;right:7px;transform:translateY(-50%)}.compass-rose .c-se{bottom:18px;right:12px}.compass-rose .c-s{bottom:6px;left:50%;transform:translateX(-50%)}.compass-rose .c-sw{bottom:18px;left:12px}.compass-rose .c-w{top:50%;left:7px;transform:translateY(-50%)}.compass-rose .c-nw{top:18px;left:12px}.compass-rose i{position:absolute;z-index:4;left:50%;top:50%;width:4px;height:39px;margin-left:-2px;background:linear-gradient(to bottom,#ff982f 0 68%,#8eafcc 68% 100%);border-radius:3px;transform-origin:50% 0;transition:transform .45s ease}.compass-rose i:before{content:"";position:absolute;top:-11px;left:-5px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #ff982f}.compass-hub{position:absolute;z-index:5;width:10px;height:10px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#dbe8f1;border:2px solid #ff982f}.bearing-readout{display:flex;align-items:baseline;justify-content:center;gap:8px}.bearing-readout strong{margin-top:2px!important}.bearing-readout small{margin-top:0!important;color:#ff982f!important;font-weight:bold}#airQuality.orange{color:#ff982f}@media(max-width:600px){.compass-rose{width:94px;height:94px}}


/* ==========================================================
   v1.0.3 Compass correction
   Overrides legacy .compass span/i positioning.
   ========================================================== */
.compass.compass-rose{
    position:relative;
    width:112px;
    height:112px;
    margin:8px auto 5px;
    border:2px solid #3d6685;
    border-radius:50%;
    background:
        radial-gradient(circle at center,transparent 0 43%,#24435b 44% 45%,transparent 46%),
        repeating-conic-gradient(from 0deg,#587b96 0deg 1deg,transparent 1deg 15deg);
    box-shadow:inset 0 0 0 6px #102236,0 0 0 1px #18344c;
}
.compass.compass-rose span{
    position:absolute;
    z-index:6;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    transform:none;
    margin:0;
    font-size:8px;
    font-weight:700;
    color:#9fb9cd;
    line-height:1;
}
.compass.compass-rose .c-n{top:7px;left:50%;transform:translateX(-50%);font-size:11px;color:#ff982f}
.compass.compass-rose .c-ne{top:19px;right:15px}
.compass.compass-rose .c-e{top:50%;right:8px;transform:translateY(-50%);font-size:10px}
.compass.compass-rose .c-se{right:14px;bottom:19px}
.compass.compass-rose .c-s{bottom:7px;left:50%;transform:translateX(-50%);font-size:10px}
.compass.compass-rose .c-sw{left:14px;bottom:19px}
.compass.compass-rose .c-w{top:50%;left:8px;transform:translateY(-50%);font-size:10px}
.compass.compass-rose .c-nw{top:19px;left:14px}
.compass.compass-rose i{
    position:absolute;
    z-index:7;
    left:50%;
    top:50%;
    width:4px;
    height:42px;
    margin:0 0 0 -2px;
    background:#ff982f;
    border-radius:3px;
    transform-origin:50% 0;
    transition:transform .45s ease;
}
.compass.compass-rose i:before{
    content:"";
    position:absolute;
    top:-11px;
    left:-5px;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:12px solid #ff982f;
}
.compass.compass-rose .compass-hub{
    position:absolute;
    z-index:8;
    width:11px;
    height:11px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#e7f0f6;
    border:2px solid #ff982f;
}


/* ==========================================================
   Spring Oaks heritage branding
   ========================================================== */
.brand-logo{
    display:flex;
    align-items:center;
    min-width:0;
}
.brand-logo img{
    display:block;
    width:min(760px, 68vw);
    max-height:96px;
    object-fit:contain;
    object-position:left center;
}
header{
    min-height:116px;
}
@media (max-width:900px){
    .brand-logo img{
        width:min(610px, 72vw);
        max-height:82px;
    }
}
@media (max-width:650px){
    header{
        min-height:auto;
    }
    .brand-logo{
        width:100%;
        justify-content:center;
    }
    .brand-logo img{
        width:min(100%, 520px);
        max-height:76px;
        object-position:center;
    }
}


/* ==========================================================
   Spring Oaks compact heritage header - Acton Bridge
   ========================================================== */
header{
    min-height:104px;
}
.brand-logo{
    display:flex;
    align-items:center;
    min-width:0;
}
.brand-lockup{
    width:min(620px, 62vw);
    display:flex;
    flex-direction:column;
    align-items:center;
}
.brand-lockup img{
    display:block;
    width:100%;
    max-height:72px;
    object-fit:contain;
    object-position:left center;
}
.brand-strapline{
    width:72%;
    margin-top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:#86b83f;
    font-size:15px;
    line-height:1.1;
    white-space:nowrap;
}
.brand-strapline span{
    flex:1 1 42px;
    max-width:72px;
    height:1px;
    background:#cda84c;
}
@media (max-width:900px){
    .brand-lockup{width:min(520px, 65vw)}
    .brand-lockup img{max-height:64px}
    .brand-strapline{font-size:13px}
}
@media (max-width:650px){
    header{min-height:auto}
    .brand-logo{width:100%;justify-content:center}
    .brand-lockup{width:min(100%,480px)}
    .brand-lockup img{max-height:60px;object-position:center}
    .brand-strapline{width:82%;font-size:12px;white-space:normal;text-align:center}
}


/* ==========================================================
   v1.0.3 compact heritage header clipping correction
   Keep current compact proportions, but show the full lockup.
   ========================================================== */
header{
    min-height:112px;
}
.brand-lockup{
    width:min(650px, 64vw);
    overflow:visible;
}
.brand-lockup img{
    width:100%;
    height:auto;
    max-height:88px;
    object-fit:contain;
    object-position:left center;
}
.brand-strapline{
    margin-top:2px;
}
@media (max-width:900px){
    .brand-lockup{width:min(540px, 67vw)}
    .brand-lockup img{max-height:78px}
}
@media (max-width:650px){
    .brand-lockup{width:min(100%,500px)}
    .brand-lockup img{max-height:72px;object-position:center}
}
/* Mobile header clock sizing */
@media (max-width:650px) {

    #currentTime {
        font-size:16px !important;
        line-height:1.1 !important;
    }

    #currentDate {
        font-size:10px !important;
    }

    .clock {
        font-size:9px !important;
        gap:3px !important;
    }

    .clock strong {
        font-size:9px !important;
    }

    .clock em {
        font-size:9px !important;
    }
}
/*=====================================================
FORECAST PAGE
=====================================================*/

.forecastHero{
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:center;
    background:#18293d;
    border:1px solid #28435e;
    border-radius:12px;
    padding:25px;
    margin:20px 0;
}

.forecastHeroLeft{
    display:flex;
    align-items:center;
    gap:25px;
}

.forecastIcon{
    font-size:82px;
    line-height:1;
}

.forecastTemp{
    font-size:72px;
    font-weight:700;
    color:#52d8f3;
    line-height:1;
}

.forecastCondition{
    font-size:24px;
    color:#ffffff;
    margin-top:6px;
}

.forecastLocation{
    color:#9db4c8;
    margin-top:8px;
}

.forecastHeroRight{
    display:grid;
    grid-template-columns:repeat(3,160px);
    gap:15px;
}

.forecastMetric{
    background:#22354a;
    border-radius:10px;
    padding:15px;
    text-align:center;
}

.forecastMetric span{
    display:block;
    font-size:12px;
    color:#9db4c8;
    text-transform:uppercase;
    margin-bottom:8px;
}

.forecastMetric strong{
    font-size:24px;
    color:#53d9f3;
}

.forecast-hourly{

    display:grid;

    grid-template-columns:repeat(24,minmax(0,1fr));

    gap:3px;

    width:100%;

}


.forecast-hour-card{

    padding:2px;

    border-radius:5px;

    background:#203449;

    border:1px solid #2d4762;

    text-align:center;

    min-width:0;

}

.forecast-hour-time{

    font-size:10px;

    margin-bottom:2px;

}

.forecast-hour-icon{

    font-size:14px;

    line-height:1;

    margin:1px 0;

}
.forecast-hour-temp{

    font-size:13px;

    font-weight:bold;

    margin:1px 0;

}
.forecast-hour-rain{

    font-size:9px;

    margin-top:2px;

}
.forecast-daily{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:12px;
}

.forecast-day-card{
    background:#1d3146;
    border:1px solid #2d4762;
    border-radius:10px;
    padding:18px;
    text-align:center;
}

.forecast-day-name{
    color:#53d9f3;
    font-size:18px;
    font-weight:bold;
}

.forecast-day-icon{
    font-size:40px;
    margin:12px 0;
}

.forecast-day-condition{
    color:#cfdbe5;
    font-size:13px;
    min-height:36px;
}

.forecast-day-temp{
    display:flex;
    justify-content:center;
    gap:12px;
    margin:12px 0;
}

.forecast-max{
    color:#ffb14a;
    font-weight:bold;
    font-size:20px;
}

.forecast-min{
    color:#59c8f4;
    font-weight:bold;
    font-size:20px;
}

.forecast-day-rain{
    color:#59c8f4;
    font-size:13px;
}

@media(max-width:1000px){

.forecastHero{
    flex-direction:column;
}

.forecastHeroRight{
    grid-template-columns:repeat(2,1fr);
    width:100%;
}

}

@media(max-width:650px){

.forecastHeroRight{
    grid-template-columns:1fr;
}

.forecastTemp{
    font-size:82px;
}

.forecastIcon{
    font-size:100px;
}

}
/*=========================================================
  RECORDS PAGE
=========================================================*/

.recordsHero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;

    background:#13253b;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;

    padding:25px 30px;
    margin-bottom:25px;
}

.recordsHeroLeft{
    display:flex;
    align-items:center;
    gap:20px;
}

.recordsHeroRight{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    min-width:420px;
}

.recordsTrophy{
    font-size:64px;
}

.recordsHero h1{
    margin:0;
    font-size:2rem;
    color:#ffffff;
}

.recordsHero p{
    margin:8px 0;
    color:#9bb4cc;
}

.station{
    margin-top:10px;
    color:#d6e4f0;
}

.recordsHeroStat{
    background:#0e1d2d;
    border-radius:12px;
    padding:15px;
    text-align:center;
}

.recordsHeroStat label{
    display:block;
    color:#8fa8bf;
    font-size:.85rem;
}

.recordsHeroStat strong{
    display:block;
    margin-top:6px;
    font-size:1.35rem;
    color:#39d5e6;
}

/*=========================================================
  RECORD GRID
=========================================================*/

.recordsGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-bottom:30px;

}

.recordCard{

    background:#13253b;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    padding:22px;

    transition:.25s;

}

.recordCard:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(0,0,0,.35);

}

.recordCard h3{

    margin:0 0 18px;

    font-size:1.25rem;

}

.recordItem{

    display:flex;

    flex-direction:column;

    gap:5px;

    padding:10px 0;

}

.recordItem label{

    color:#91abc2;

    font-size:.85rem;

}

.recordItem strong{

    color:white;

    font-size:1.5rem;

}

.recordItem span{

    color:#5fbfd1;

    font-size:.9rem;

}

.recordCard hr{

    border:none;

    border-top:1px solid rgba(255,255,255,.08);

}

/*=========================================================
  COLOURS
=========================================================*/

.tempColour{color:#ff6b57;}
.windColour{color:#64b5ff;}
.rainColour{color:#59d0ff;}
.uvColour{color:#ffd54a;}
.pressureColour{color:#98f59f;}

/*=========================================================
  FEATURE PANELS
=========================================================*/

.recordsMiddle{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    margin-bottom:30px;

}

.featureCard{

    background:#13253b;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    padding:25px;

}

.featureCard h2{

    margin:0 0 20px;

}

.featureGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

}

.featureGrid div{

    background:#0d1b2b;

    border-radius:10px;

    padding:15px;

}

.featureGrid label{

    display:block;

    color:#9ab3ca;

    font-size:.82rem;

}

.featureGrid strong{

    display:block;

    margin-top:8px;

    font-size:1.45rem;

    color:white;

}

/*=========================================================
  MONTHLY TABLE
=========================================================*/

.recordsTable{

    width:100%;

    border-collapse:collapse;

}

.recordsTable thead{

    background:#13253b;

}

.recordsTable th{

    padding:14px;

    color:#39d5e6;

}

.recordsTable td{

    padding:12px;

    border-bottom:1px solid rgba(255,255,255,.06);

    text-align:center;

}

.recordsTable tbody tr:hover{

    background:#13253b;

}

/*=========================================================
  RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.recordsGrid{

grid-template-columns:repeat(2,1fr);

}

.recordsMiddle{

grid-template-columns:1fr;

}

.recordsHero{

flex-direction:column;

align-items:flex-start;

}

.recordsHeroRight{

grid-template-columns:repeat(3,1fr);

width:100%;

min-width:0;

}

}

@media(max-width:768px){

.recordsGrid{

grid-template-columns:1fr;

}

.recordsHeroRight{

grid-template-columns:1fr;

}

.featureGrid{

grid-template-columns:1fr;

}

}
/*=========================================================
RECORDS MONTHLY CHART
=========================================================*/

.chart-toolbar
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.chart-buttons
{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.chart-btn
{
    background:#2b2b2b;
    border:1px solid #555;
    color:#ddd;
    padding:8px 16px;
    border-radius:6px;
    cursor:pointer;
    transition:.25s;
    font-size:14px;
}

.chart-btn:hover
{
    background:#404040;
}

.chart-btn.active
{
    background:#0094ff;
    border-color:#0094ff;
    color:#fff;
}


/*=========================================================
MONTH NAVIGATION
=========================================================*/

.chart-navigation
{
    display:flex;
    align-items:center;
    gap:15px;
}

.chart-navigation button
{
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#0094ff;
    color:#fff;
    cursor:pointer;
    font-size:16px;
}

.chart-navigation button:hover
{
    filter:brightness(115%);
}

#chartTitle
{
    min-width:170px;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    color:#fff;
}


/*=========================================================
CHART PANEL
=========================================================*/

.chart-panel
{
    background:#1f1f1f;
    border:1px solid #333;
    border-radius:10px;
    padding:20px;
    margin-top:20px;
}

.chart-canvas
{
    position:relative;
    height:450px;
}

.chart-canvas canvas
{
    width:100% !important;
    height:100% !important;
}


/*=========================================================
SUMMARY
=========================================================*/

.chart-summary
{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:20px;
}

.summary-card
{
    background:#292929;
    border:1px solid #3c3c3c;
    border-radius:8px;
    padding:15px;
    text-align:center;
}

.summary-title
{
    color:#999;
    font-size:13px;
    margin-bottom:8px;
}

.summary-value
{
    color:#fff;
    font-size:28px;
    font-weight:bold;
}


/*=========================================================
RESPONSIVE
=========================================================*/

@media (max-width:900px)
{

.chart-toolbar
{
    flex-direction:column;
    align-items:flex-start;
}

.chart-summary
{
    grid-template-columns:repeat(2,1fr);
}

.chart-canvas
{
    height:350px;
}

}

@media (max-width:600px)
{

.chart-buttons
{
    width:100%;
}

.chart-btn
{
    flex:1;
    text-align:center;
}

.chart-summary
{
    grid-template-columns:1fr;
}

.chart-canvas
{
    height:300px;
}


}
/* ======================================================
   Monthly Highlights
====================================================== */

.monthly-highlights{
    margin-bottom:40px;
}