/* OpenPQ V3 approved visual direction: deep-sea decision hero + real island map.
   Proven imagery only. Radar tiles come from timestamped RainViewer metadata. */
.hero{min-height:450px;background:linear-gradient(110deg,#064277,#075d93)!important;color:#fff;display:block!important;padding:33px 30px!important;isolation:isolate}
.hero-radar-map{position:absolute;inset:0 0 0 34%;z-index:1;background:#073f65}
.hero-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,#06365ff7 0%,#034171ef 27%,#024b6daf 48%,#023d5612 76%)!important}
.hero-main{position:relative;z-index:5;max-width:420px;min-height:275px;align-self:auto;pointer-events:none}
.hero-main h1,.hero .hero-number>span:first-child,.hero .hero-summary,.hero .hero-kicker,.hero .hero-desc,.hero .hero-time{color:#fff}
.hero h1{font-size:35px;line-height:1.14;margin:8px 0 7px}
.hero .hero-number>span:first-child{font-size:clamp(67px,7vw,95px);text-shadow:0 2px 6px #0004}
.hero .hero-summary{font-size:18px;color:#f2faff}
.hero .hero-desc{font-size:13px;color:#cdeafa;max-width:390px}
.hero .hero-time{color:#a6dfff;font-size:12px}
.hero-reason{position:absolute;left:24px;bottom:22px;z-index:6;max-width:407px;background:linear-gradient(110deg,#ddf8e6,#e9fbe9);color:#164b35;border:1px solid #d2f5d5;box-shadow:0 4px 26px #0638585c;padding:15px 19px;border-radius:13px;margin:0}
.hero-reason .reason-head,.hero-reason .reason-head>span{color:#14673e}
.hero-reason p{color:#245847}
.hero-reason button{color:#087b4c}
.hero-radar-ui{position:absolute;z-index:9;right:15px;top:14px;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.hero-radar-ui button{background:#085b87e8;color:white;border:1px solid #ffffff6a;border-radius:9px;padding:10px 17px;font-size:12px;font-weight:750;box-shadow:0 3px 8px #0004}
.hero-radar-ui button[aria-pressed=true]{background:#177bde}
.hero-radar-ui button:disabled{opacity:.6;cursor:not-allowed}
.radar-stamp{font-size:11px;font-weight:700;text-align:center;background:#03395fcf;color:#edfaff;padding:6px 10px;border-radius:8px;min-width:115px}
.hero-photo-credit{z-index:8;color:#e4eff9;text-shadow:1px 1px 3px #053354;bottom:7px;right:12px}
.radar-map{overflow:hidden}
.radar-map .mobile-radar-map{position:absolute;inset:0}
.radar-map:has(.mobile-radar-map){height:390px}
.radar-overlay{pointer-events:none}
.radar-overlay.live{background:linear-gradient(transparent,#052e4a99);padding:25px 12px 12px;color:#fff}
.weather-location-marker{color:#fff;text-shadow:0 2px 5px #00172e,0 0 8px #00172e;font-size:12px;font-weight:850;white-space:nowrap;pointer-events:none}
.weather-location-marker.selected{font-size:15px}
.weather-map-pin{width:11px;height:11px;display:block;margin:auto;background:#14aaff;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 5px #19a3d73d,0 2px 4px #00162e}
.hero .leaflet-control-attribution{background:#073751a8;color:#d5eefb;font-size:9px}
.hero .leaflet-control-attribution a{color:#fff}
.map-source-badge{font-size:11px;color:#fff;background:#073751d9;border-radius:8px;padding:8px 10px}
.radar-real-control{display:flex;align-items:center;gap:10px;color:#244d70;font-size:12px;margin-top:12px;background:#eaf3fa;padding:9px 11px;border-radius:10px}
.radar-real-control button{background:#087db4;color:#fff;border:0;border-radius:50%;width:32px;height:32px;flex-shrink:0}
.radar-real-control input{flex:1;min-width:50px;accent-color:#178bc7}
.radar-real-control strong{white-space:nowrap;font-size:11px}
.radar-map .leaflet-control-attribution{font-size:9px}
/* The user approved mobile layout has hourly -> map -> 10 days -> sea. */
@media(max-width:750px){
 .dashboard{display:flex;flex-direction:column;gap:10px}
 .today{order:1}.radar{order:2}.ten-day{order:3}.marine{order:4}.decision{order:5}.comparison{order:6}.future{order:7}.season{order:8}.deep{order:9}.methods{order:10}
 .hero{min-height:385px;padding:22px 15px 18px!important;background:linear-gradient(0deg,#023b69aa,#054c7b36),url("./assets/hero-phu-quoc.jpg") center/cover no-repeat!important}
 .hero-radar-map{display:none!important}
 .hero-shade{background:linear-gradient(100deg,#07395bb4,#083c5e28),linear-gradient(0deg,#064d74b8,transparent 75%)!important}
 .hero-main{min-height:235px;max-width:100%}
 .hero h1{font-size:28px}
 .hero .hero-number>span:first-child{font-size:73px}
 .hero .hero-summary{font-size:16px}
 .hero .hero-desc{max-width:310px;font-size:12px}
 .hero .hero-kicker{font-size:10px;color:#ccefff}
 .hero-reason{left:11px;right:11px;bottom:12px;max-width:none;padding:12px 14px}
 .hero-reason .reason-head{font-size:15px}
 .hero-reason p{font-size:12px;margin:3px 0}
 .hero-reason button{font-size:11px}
 .hero-radar-ui{display:none}
 .hero-photo-credit{display:none}
 .radar-map:has(.mobile-radar-map){height:395px}
 .radar-layout{display:block}
 .radar-side{padding:11px;margin-top:8px}
 .radar-tabs{display:flex;justify-content:center}
 .radar-tabs button{padding:8px 15px}
 .radar-timeline{display:none}
 .radar .panel-title .mini-status{font-size:10px}
 .radar-real-control{margin-top:8px}
}

@media(min-width:751px){.hero .hero-number>span:first-child{font-size:78px}.hero-main{min-height:257px}.hero .hero-desc{font-size:12px}.hero .hero-time{margin-top:8px}}

.hero-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid #ffffff30;border-radius:10px;background:#0a538178;max-width:430px;margin:10px 0 2px;padding:10px 3px}
.hero-metrics>div{text-align:center;padding:1px 6px;border-right:1px solid #ffffff2b;min-width:0}.hero-metrics>div:last-child{border-right:0}
.hero-metrics span,.hero-metrics b{display:block;color:#fff}.hero-metrics span{font-size:11px}.hero-metrics b{font-size:12px;margin-top:5px;line-height:1.25;font-weight:750}
@media(min-width:751px){.hero{min-height:540px}.hero-main{min-height:360px}.hero-reason{bottom:20px}}
@media(max-width:750px){.site-header .header-inside{height:auto;display:flex;flex-wrap:wrap;gap:0;padding:0 12px}.site-header .brand{height:52px;flex:1}.site-header .header-weather{height:52px}.site-header .nav-links{display:flex!important;order:3;width:100%;height:39px;overflow-x:auto;gap:18px;padding:0;align-items:center;margin:0;scrollbar-width:none}.site-header .nav-links a{white-space:nowrap;font-size:11px;font-weight:650}.hero{min-height:480px}.hero-main{min-height:322px}.hero-metrics{margin-top:10px;max-width:none}.hero-metrics>div{padding:2px 3px}.hero-metrics span{font-size:10px}.hero-metrics b{font-size:10px}.hero .hero-time{font-size:11px}.hero-reason{bottom:10px;padding:10px 12px}.hero-reason p{font-size:11px}}