/* General Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* Header Gradient + Menu */
.site-header {
    background: linear-gradient(135deg,#ffafbd,#ffc3a0);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 25px;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.site-header .logo a {
    font-weight:700;
    font-size:24px;
    color:#fff;
    text-decoration:none;
}
.menu-toggle { font-size:28px; color:#fff; cursor:pointer; display:none; }
.menu { display:flex; gap:20px; }
.menu a { color:#fff; text-decoration:none; font-weight:500; transition:0.3s; }
.menu a:hover { text-decoration:underline; }

/* Main Content */
.main-content { padding:25px 15px; display:flex; flex-direction:column; align-items:center; gap:25px; background:#f4f6f9; }

/* Weather Section */
.weather-section { display:flex; flex-direction:column; gap:25px; width:100%; max-width:480px; }

/* Weather Card */
.weather-card {
    background: linear-gradient(145deg,#6fb1fc,#4364f7);
    padding:25px;
    border-radius:25px;
    color:#fff;
    text-align:center;
    box-shadow:0 15px 25px rgba(0,0,0,0.25), 0 10px 15px rgba(255,255,255,0.1) inset;
}
.weather-card h2 { margin-bottom:18px; font-size:22px; }
.weather-card input { width:85%; padding:10px 12px; border-radius:8px; border:none; margin-bottom:12px; font-size:16px; }
.weather-card button { padding:12px 25px; border:none; border-radius:8px; background:#11998e; color:#fff; cursor:pointer; font-weight:bold; }
.weather-card button:hover { background:#0f7c71; }

/* Weather Result */
.weather-result { margin-top:15px; background: rgba(255,255,255,0.1); padding:12px; border-radius:12px; min-height:80px; }

/* Articles Section */
.articles-section { width:100%; max-width:900px; }
.articles-section h2 { margin-bottom:20px; font-size:24px; text-align:center; color:#333; }
.articles-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.article-card {
    background:#fff;
    padding:20px;
    border-radius:20px;
    box-shadow:0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}
.article-card:hover { transform: translateY(-5px); box-shadow:0 20px 30px rgba(0,0,0,0.15); }
.article-card h3 { margin-bottom:12px; font-size:18px; color:#111; }
.article-card p { font-size:14px; color:#555; line-height:1.5; }
.article-card a { color:#0077cc; text-decoration:underline; }

/* Adsense Container */
.adsense-container { width:100%; max-width:480px; margin:25px auto; }

/* Footer */
footer { padding:20px; text-align:center; font-size:14px; color:#555; background:#f1f1f1; margin-top:25px; border-top:1px solid #ddd; }

/* Responsive */
@media(max-width:768px){
    .menu { display:none; flex-direction:column; background:#ffafbd; position:absolute; top:65px; left:0; width:100%; padding:12px 0; }
    .menu.active { display:flex; }
    .menu a { margin:12px 0; text-align:center; }
    .menu-toggle { display:block; }
    .weather-section { max-width:100%; }
    .articles-section { max-width:100%; }
}    
.weather-card.live-weather {
    position: relative;
    overflow: hidden;
}

.weather-card.live-weather canvas {
    position: absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    pointer-events:none; /* mouse clicks unaffected */
    z-index:0;
}

.weather-card.live-weather .weather-result,
.weather-card.live-weather .rain-chance {
    position: relative;
    z-index:1; /* above canvas */
}

.rain-chance {
    text-align:center;
    margin-top:10px;
    font-size:18px;
    font-weight:bold;
    color:#fff;
}    
.weather-card.live-weather {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.weather-card.live-weather canvas {
    position: absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
}

.weather-info, .weather-details {
    position: relative;
    z-index:1;
    color:#fff;
    text-align:center;
    margin-top:10px;
}

.weather-details span {
    display:inline-block;
    margin:0 8px;
    font-weight:bold;
    font-size:16px;
}