/*====================================================
    NWI WEATHER GEEKS THEME
    Version: 1.0
    Author: ChatGPT
    Base Template: HTML5UP Massively

    -----------------------------------------------
    COLOR PALETTE
    -----------------------------------------------

    Lightning Green   #88B92F
    Bright Green      #9FD63B
    Storm Black       #15181C
    Storm Gray        #1B1E22
    Panel Gray        #2B2F33
    Border Gray       #3A4046
    Text              #D7DBDE

====================================================*/


/****************************************************
    ROOT VARIABLES
****************************************************/

:root{

    --green:#88B92F;
    --green-light:#9FD63B;
    --green-dark:#6F9828;

    --storm-black:#15181C;
    --storm:#1B1E22;
    --storm-light:#252A30;

    --panel:#2B2F33;

    --border:#3A4046;

    --text:#D7DBDE;
    --text-light:#F8F9FA;
    --muted:#AEB6BC;

    --shadow:rgba(0,0,0,.55);

    --radius:8px;

    --transition:.28s ease;

}


/****************************************************
    GLOBAL
****************************************************/

html{

    scroll-behavior:smooth;

}

body{

    background:linear-gradient(
        180deg,
        #15181C 0%,
        #1B1E22 100%
    );

    color:var(--text);

    font-family:
        "Source Sans Pro",
        Helvetica,
        sans-serif;

    line-height:1.75;

    overflow-x:hidden;

}


/****************************************************
    TEXT
****************************************************/

h1,h2,h3,h4,h5,h6{

    color:var(--green);

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}

p{

    color:var(--text);

}

strong{

    color:white;

}

em{

    color:#dfe4e7;

}


/****************************************************
    LINKS
****************************************************/

a{

    color:var(--green);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--green-light);

    text-shadow:
        0 0 10px rgba(136,185,47,.45);

}

a:focus{

    outline:none;

}


/****************************************************
    SELECTION
****************************************************/

::selection{

    background:var(--green);

    color:#15181C;

}

::-moz-selection{

    background:var(--green);

    color:#15181C;

}


/****************************************************
    SCROLLBAR
****************************************************/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#17191D;

}

::-webkit-scrollbar-thumb{

    background:var(--green);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--green-light);

}


/****************************************************
    HORIZONTAL RULE
****************************************************/

hr{

    border:none;

    border-top:1px solid var(--border);

    margin:3rem 0;

}


/****************************************************
    CODE
****************************************************/

code{

    background:#101214;

    border:1px solid var(--border);

    color:#A6E22E;

    padding:.2rem .45rem;

    border-radius:5px;

}


/****************************************************
    BLOCKQUOTE
****************************************************/

blockquote{

    border-left:4px solid var(--green);

    background:#20242A;

    padding:1.25rem 1.75rem;

    color:#d5dadd;

    font-style:italic;

}


/****************************************************
    PANELS
****************************************************/

.panel{

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:
        0 10px 30px var(--shadow);

}


/****************************************************
    GLASS EFFECT
****************************************************/

.glass{

    background:
        rgba(43,47,51,.72);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

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

}


/****************************************************
    BUTTONS
****************************************************/

.button,
button,
input[type=submit],
input[type=reset],
input[type=button]{

    background:none;

    border:2px solid var(--green);

    color:var(--green);

    border-radius:50px;

    padding:.85rem 2.25rem;

    transition:var(--transition);

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.button:hover,
button:hover,
input[type=submit]:hover,
input[type=button]:hover{

    background:var(--green);

    color:#15181C;

    transform:translateY(-2px);

    box-shadow:
        0 0 20px rgba(136,185,47,.35);

}


/****************************************************
    PRIMARY BUTTON
****************************************************/

.button.primary{

    background:var(--green);

    color:#15181C;

}

.button.primary:hover{

    background:var(--green-light);

}


/****************************************************
    INPUTS
****************************************************/

input,
textarea,
select{

    background:#252A30;

    border:1px solid var(--border);

    color:var(--text);

    border-radius:8px;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--green);

    box-shadow:
        0 0 0 3px rgba(136,185,47,.15);

}


/****************************************************
    TABLES
****************************************************/

table{

    width:100%;

    border-collapse:collapse;

}

table th{

    background:#20242A;

    color:var(--green);

}

table td,
table th{

    border:1px solid var(--border);

    padding:.85rem;

}

table tbody tr:nth-child(even){

    background:#20242A;

}

table tbody tr:hover{

    background:#2A3138;

}


/****************************************************
    WEATHER ALERTS
****************************************************/

.weather-warning{

    background:#7A1D1D;

    border-left:6px solid #FF3B30;

    color:white;

}

.weather-watch{

    background:#6E5210;

    border-left:6px solid #FFC107;

    color:white;

}

.weather-advisory{

    background:#214560;

    border-left:6px solid #4FC3F7;

    color:white;

}

.weather-success{

    background:#224122;

    border-left:6px solid var(--green);

}


/****************************************************
    ANIMATIONS
****************************************************/

@keyframes glow{

    from{

        box-shadow:0 0 0 rgba(136,185,47,0);

    }

    to{

        box-shadow:0 0 18px rgba(136,185,47,.35);

    }

}

.glow{

    animation:glow 1.5s infinite alternate;

}

/*====================================================
    PART 2
    LAYOUT • HEADER • NAVIGATION • POSTS • FOOTER
====================================================*/


/****************************************************
    PAGE WRAPPER
****************************************************/

#wrapper{

    background:transparent;

}

#wrapper.fade-in:before{

    background:
        linear-gradient(
            180deg,
            rgba(21,24,28,.96),
            rgba(27,30,34,.96)
        );

}


/****************************************************
    INTRO
****************************************************/

#intro{

    background:
        linear-gradient(
            rgba(21,24,28,.82),
            rgba(27,30,34,.92)
        );

    color:var(--text);

    text-align:center;

}

#intro h1{

    color:var(--green);

    font-size:4rem;

    letter-spacing:.18em;

    text-shadow:
        0 0 25px rgba(136,185,47,.25);

}

#intro p{

    color:var(--muted);

    font-size:1.15rem;

    max-width:900px;

    margin:auto;

}

#intro .actions{

    margin-top:3rem;

}


/****************************************************
    HEADER
****************************************************/

#header{

    background:rgba(21,24,28,.82);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(136,185,47,.12);

}

#header .logo{

    color:var(--green);

    border:2px solid var(--green);

    border-radius:50px;

    padding:.65rem 1.6rem;

    transition:.30s;

}

#header .logo:hover{

    background:var(--green);

    color:var(--storm-black);

    box-shadow:
        0 0 22px rgba(136,185,47,.40);

}


/****************************************************
    NAVIGATION
****************************************************/

#nav{

    background:rgba(21,24,28,.90);

    backdrop-filter:blur(12px);

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

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

}

#nav ul.links li{

    position:relative;

}

#nav ul.links li a{

    color:var(--text);

    transition:.30s;

    font-weight:600;

}

#nav ul.links li:hover a{

    color:var(--green);

}

#nav ul.links li.active a{

    color:var(--green);

}

#nav ul.links li:after{

    content:"";

    position:absolute;

    bottom:-2px;

    left:50%;

    width:0;

    height:3px;

    background:var(--green);

    transition:.30s;

    transform:translateX(-50%);

}

#nav ul.links li:hover:after{

    width:80%;

}

#nav ul.icons a{

    color:var(--muted);

}

#nav ul.icons a:hover{

    color:var(--green);

    transform:translateY(-2px);

}


/****************************************************
    MAIN CONTENT
****************************************************/

#main{

    background:transparent;

}


/****************************************************
    POSTS
****************************************************/

.posts{

    gap:2rem;

}

.posts article{

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:14px;

    overflow:hidden;

    transition:.35s;

    box-shadow:
        0 15px 30px rgba(0,0,0,.35);

}

.posts article:hover{

    transform:translateY(-8px);

    border-color:var(--green);

    box-shadow:
        0 20px 45px rgba(0,0,0,.45),
        0 0 25px rgba(136,185,47,.15);

}

.posts article h2{

    color:var(--green);

}

.posts article p{

    color:var(--text);

}


/****************************************************
    FEATURED POST
****************************************************/

article.post.featured{

    background:var(--panel);

    border:2px solid rgba(136,185,47,.15);

    border-radius:16px;

}

article.post.featured:hover{

    border-color:var(--green);

}


/****************************************************
    IMAGES
****************************************************/

.image{

    overflow:hidden;

}

.image img{

    transition:.6s;

}

.image:hover img{

    transform:scale(1.04);

}

.image.fit{

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

}


/****************************************************
    SECTION TITLES
****************************************************/

.major h2{

    color:var(--green);

}

.major:after{

    background:var(--green);

    opacity:.55;

}


/****************************************************
    PAGINATION
****************************************************/

.pagination{

    margin-top:4rem;

}

.pagination .page{

    border-radius:50%;

    border:2px solid var(--border);

    color:var(--text);

    transition:.30s;

}

.pagination .page:hover{

    border-color:var(--green);

    background:var(--green);

    color:var(--storm-black);

}

.pagination .active{

    background:var(--green);

    color:var(--storm-black);

}


/****************************************************
    FOOTER
****************************************************/

#footer{

    background:#16191d;

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

}

#footer h3{

    color:var(--green);

}

#footer a{

    color:var(--muted);

}

#footer a:hover{

    color:var(--green);

}

#footer .icons a{

    width:46px;

    height:46px;

    border-radius:50%;

    border:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.30s;

}

#footer .icons a:hover{

    background:var(--green);

    color:var(--storm-black);

    box-shadow:
        0 0 18px rgba(136,185,47,.35);

}


/****************************************************
    COPYRIGHT
****************************************************/

#copyright{

    background:#111418;

    color:#7a8288;

    letter-spacing:.12em;

}


/****************************************************
    WEATHER PANELS
****************************************************/

.weather-panel{

    background:var(--panel);

    border-left:5px solid var(--green);

    border-radius:10px;

    padding:1.5rem;

    margin:1rem 0;

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

}

.weather-panel h3{

    color:var(--green);

    margin-bottom:.75rem;

}


/****************************************************
    LIVE RADAR PANEL
****************************************************/

.radar-panel{

    background:#101214;

    border:2px solid rgba(136,185,47,.20);

    border-radius:14px;

    overflow:hidden;

}

.radar-panel iframe{

    display:block;

    width:100%;

    min-height:600px;

    border:0;

}


/****************************************************
    WEATHER STATUS BADGES
****************************************************/

.badge-weather{

    display:inline-block;

    padding:.35rem .85rem;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

    text-transform:uppercase;

    background:rgba(136,185,47,.15);

    color:var(--green);

    border:1px solid rgba(136,185,47,.25);

}
/*====================================================
    PART 3
    WEATHER UI COMPONENTS
====================================================*/

/****************************************************
    WEATHER GRID
****************************************************/

.weather-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem;
    margin:2rem 0;
}


/****************************************************
    FORECAST CARD
****************************************************/

.forecast-card{

    background:linear-gradient(
        180deg,
        #2b2f33,
        #202429
    );

    border:1px solid var(--border);
    border-radius:16px;

    overflow:hidden;

    transition:.35s;

    box-shadow:
        0 15px 30px rgba(0,0,0,.35);

}

.forecast-card:hover{

    transform:translateY(-6px);

    border-color:var(--green);

    box-shadow:
        0 0 25px rgba(136,185,47,.18);

}

.forecast-card header{

    background:#20242A;

    color:var(--green);

    padding:1rem 1.25rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.forecast-card .content{

    padding:1.5rem;

}

.forecast-card .temp{

    font-size:3.25rem;

    font-weight:700;

    color:var(--green);

    line-height:1;

}

.forecast-card .condition{

    color:var(--text);

    margin-top:.5rem;

}

.forecast-card small{

    color:var(--muted);

}


/****************************************************
    WEATHER STATS
****************************************************/

.weather-stats{

    display:grid;

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

    gap:1rem;

    margin-top:1rem;

}

.weather-stat{

    background:#252A30;

    border-radius:10px;

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

    padding:1rem;

    text-align:center;

}

.weather-stat h4{

    color:var(--green);

    margin-bottom:.35rem;

}

.weather-stat span{

    font-size:1.4rem;

    font-weight:700;

}


/****************************************************
    LIVE CONDITIONS
****************************************************/

.current-conditions{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    flex-wrap:wrap;

}

.current-temp{

    font-size:4rem;

    font-weight:700;

    color:var(--green);

}

.current-icon{

    font-size:5rem;

    color:var(--green-light);

}


/****************************************************
    WEATHER ALERT BAR
****************************************************/

.weather-banner{

    background:#7A1D1D;

    color:white;

    padding:1rem 2rem;

    border-left:8px solid #ff4040;

    border-radius:10px;

    margin:2rem 0;

    animation:pulseWarning 2s infinite;

}

@keyframes pulseWarning{

    0%{

        box-shadow:0 0 0 rgba(255,0,0,0);

    }

    100%{

        box-shadow:0 0 18px rgba(255,0,0,.35);

    }

}


/****************************************************
    RADAR CARD
****************************************************/

.radar-card{

    background:#17191D;

    border-radius:16px;

    overflow:hidden;

    border:1px solid rgba(136,185,47,.15);

}

.radar-card header{

    background:#20242A;

    color:var(--green);

    padding:1rem;

    font-weight:700;

}

.radar-card iframe{

    width:100%;

    min-height:550px;

    border:0;

}


/****************************************************
    CAMERA PANEL
****************************************************/

.camera-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:1.5rem;

}

.camera-panel{

    background:var(--panel);

    border-radius:14px;

    overflow:hidden;

    transition:.35s;

}

.camera-panel:hover{

    transform:translateY(-5px);

}

.camera-panel img{

    width:100%;

    display:block;

}

.camera-panel footer{

    padding:1rem;

}


/****************************************************
    HOURLY FORECAST
****************************************************/

.hourly-scroll{

    display:flex;

    overflow-x:auto;

    gap:1rem;

    padding-bottom:1rem;

}

.hour{

    min-width:120px;

    background:#252A30;

    border-radius:12px;

    padding:1rem;

    text-align:center;

    border:1px solid var(--border);

}

.hour strong{

    display:block;

    color:var(--green);

}


/****************************************************
    FORECAST ICONS
****************************************************/

.weather-icon{

    font-size:2.5rem;

    color:var(--green);

    margin:.5rem 0;

}


/****************************************************
    SEVERE WEATHER CARD
****************************************************/

.severe-card{

    background:#3d1919;

    border-left:6px solid #ff3b30;

    padding:1.5rem;

    border-radius:10px;

}

.severe-card h3{

    color:#FFD6D6;

}

.severe-card p{

    color:#F1F1F1;

}


/****************************************************
    WATCH CARD
****************************************************/

.watch-card{

    background:#5b4b18;

    border-left:6px solid #ffc107;

    padding:1.5rem;

    border-radius:10px;

}


/****************************************************
    ADVISORY CARD
****************************************************/

.advisory-card{

    background:#234965;

    border-left:6px solid #4FC3F7;

    padding:1.5rem;

    border-radius:10px;

}


/****************************************************
    SATELLITE PANEL
****************************************************/

.satellite-panel{

    background:#16191D;

    border-radius:16px;

    overflow:hidden;

    border:1px solid rgba(136,185,47,.15);

}

.satellite-panel img{

    display:block;

    width:100%;

}


/****************************************************
    WEATHER MAPS
****************************************************/

.map-panel{

    background:#20242A;

    border-radius:16px;

    padding:1rem;

}

.map-panel img{

    border-radius:12px;

}


/****************************************************
    STORM REPORT CARD
****************************************************/

.storm-report{

    background:#252A30;

    border-left:5px solid var(--green);

    padding:1.25rem;

    margin-bottom:1rem;

    border-radius:10px;

}

.storm-report time{

    color:var(--green);

    font-weight:700;

}


/****************************************************
    WEATHER TAGS
****************************************************/

.tag{

    display:inline-block;

    background:rgba(136,185,47,.15);

    color:var(--green);

    padding:.35rem .75rem;

    border-radius:999px;

    margin:.25rem;

    font-size:.8rem;

}


/****************************************************
    LIGHTNING GLOW
****************************************************/

.lightning{

    position:relative;

}

.lightning:before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    box-shadow:
        0 0 20px rgba(136,185,47,.20);

    animation:lightningGlow 3s infinite alternate;

    pointer-events:none;

}

@keyframes lightningGlow{

    from{

        opacity:.25;

    }

    to{

        opacity:1;

    }

}


/****************************************************
    MOBILE
****************************************************/

@media screen and (max-width:736px){

.current-conditions{

    flex-direction:column;

    text-align:center;

}

.weather-stats{

    grid-template-columns:1fr;

}

.weather-grid{

    grid-template-columns:1fr;

}

.camera-grid{

    grid-template-columns:1fr;

}

.current-temp{

    font-size:3rem;

}

}
/*====================================================
    PART 4
    FINAL POLISH
====================================================*/


/****************************************************
    FADE IN
****************************************************/

.fade-up{
    opacity:0;
    transform:translateY(30px);
    transition:.8s ease;
}

.fade-up.visible{
    opacity:1;
    transform:none;
}


/****************************************************
    CARD HOVER
****************************************************/

.hover-lift{
    transition:.35s;
}

.hover-lift:hover{
    transform:translateY(-8px);
    box-shadow:
        0 20px 45px rgba(0,0,0,.45),
        0 0 25px rgba(136,185,47,.15);
}


/****************************************************
    WEATHER DIVIDER
****************************************************/

.section-divider{

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--green),
            transparent
        );

    margin:4rem 0;

}


/****************************************************
    STORM BACKGROUND
****************************************************/

.storm-background{

    background:
        radial-gradient(circle at top,
            rgba(136,185,47,.06),
            transparent 60%),
        linear-gradient(
            180deg,
            #15181C,
            #1B1E22);

}


/****************************************************
    GLASS CONTAINERS
****************************************************/

.glass-panel{

    background:rgba(43,47,51,.82);

    backdrop-filter:blur(12px);

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

    border-radius:14px;

}


/****************************************************
    ICON CIRCLES
****************************************************/

.icon-circle{

    width:54px;
    height:54px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(136,185,47,.15);

    color:var(--green);

}


/****************************************************
    FEATURE BOX
****************************************************/

.feature-box{

    background:var(--panel);

    border-radius:14px;

    padding:2rem;

    text-align:center;

    border:1px solid var(--border);

    transition:.35s;

}

.feature-box:hover{

    border-color:var(--green);

}


/****************************************************
    WEATHER BADGES
****************************************************/

.badge-hot{

    background:#9B2C2C;

    color:#fff;

}

.badge-cold{

    background:#245E91;

    color:#fff;

}

.badge-rain{

    background:#285D6E;

    color:#fff;

}

.badge-clear{

    background:#224122;

    color:#fff;

}


/****************************************************
    FORECAST STRIP
****************************************************/

.forecast-strip{

    display:flex;

    gap:1rem;

    overflow-x:auto;

    padding:1rem 0;

}

.forecast-strip > div{

    min-width:150px;

}


/****************************************************
    NWS STYLE TABLES
****************************************************/

.nws-table th{

    background:#20242A;

    color:var(--green);

}

.nws-table td{

    background:#252A30;

}


/****************************************************
    SPC OUTLOOK COLORS
****************************************************/

.risk-general{
    background:#4CAF50;
}

.risk-marginal{
    background:#5cb85c;
}

.risk-slight{
    background:#FFD54F;
    color:#111;
}

.risk-enhanced{
    background:#ff9800;
}

.risk-moderate{
    background:#d32f2f;
}

.risk-high{
    background:#b71c1c;
}


/****************************************************
    WEATHER TIMELINE
****************************************************/

.weather-timeline{

    border-left:3px solid var(--green);

    margin:2rem 0;

    padding-left:2rem;

}

.weather-timeline article{

    margin-bottom:2rem;

}


/****************************************************
    LOADING SPINNER
****************************************************/

.spinner{

    width:50px;

    height:50px;

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

    border-top:4px solid var(--green);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


/****************************************************
    FADE CAROUSEL
****************************************************/

.fade-image{

    transition:opacity .6s;

}


/****************************************************
    PRINT
****************************************************/

@media print{

    #header,
    #nav,
    #footer,
    .actions{

        display:none !important;

    }

    body{

        background:white;

        color:black;

    }

}


/****************************************************
    ACCESSIBILITY
****************************************************/

:focus-visible{

    outline:3px solid var(--green);

    outline-offset:4px;

}


/****************************************************
    MOBILE
****************************************************/

@media screen and (max-width:980px){

    #header{

        padding:1rem;

    }

    #nav ul.links{

        flex-wrap:wrap;

    }

    .forecast-card{

        margin-bottom:2rem;

    }

}


/****************************************************
    LARGE DESKTOP
****************************************************/

@media screen and (min-width:1680px){

    body{

        font-size:18px;

    }

}


/****************************************************
    PERFORMANCE
****************************************************/

img{

    image-rendering:auto;

}

button,
.button{

    will-change:transform;

}


/****************************************************
    END
****************************************************/