/* HWS V57 — unified deep-navy dashboard theme. Presentation only: keeps existing icons, maps, articles and data logic. */
:root{
 --hws-bg:#031b31;--hws-bg2:#062944;--hws-panel:#06243d;--hws-panel2:#082e4b;
 --hws-text:#f3f9ff;--hws-muted:#c2d8e6;--hws-cyan:#31d4f3;--hws-line:rgba(93,205,239,.30);
 --hws-shadow:0 8px 24px rgba(0,8,20,.18);
}
html{background:var(--hws-bg)!important;scroll-behavior:smooth}
body{background:radial-gradient(ellipse at 50% 0%,#0a3555 0%,#041f37 48%,#03182b 100%)!important;color:var(--hws-text)!important}
body,body *{scrollbar-color:#17648b #041a2d}
header, .site-header, #header, .hws-header{
 background:linear-gradient(110deg,#052440 0%,#073b60 52%,#06445f 100%)!important;
 color:var(--hws-text)!important;border-color:var(--hws-line)!important;box-shadow:0 3px 20px rgba(0,0,0,.18)!important
}
header a,.site-header a,.brand,.brand-name,.brand-tag,header button{color:var(--hws-text)!important}
header img,.brand img{object-fit:contain}
nav,.nav,#nav,#hwsNav,.hws-nav{background:rgba(2,20,37,.94)!important;border-color:var(--hws-line)!important}
nav a,.nav a,#nav a,#hwsNav a,.hws-nav a{color:#d9f3ff!important;border:1px solid transparent!important;border-radius:12px!important;transition:background .18s ease,color .18s ease}
nav a:hover,.nav a:hover,#nav a:hover,#hwsNav a:hover,nav a.active,.nav a.active,#nav a.active,[aria-current="page"]{background:linear-gradient(110deg,#0875ad,#07547d)!important;color:#fff!important;border-color:rgba(70,220,255,.45)!important}
button,.button,input[type=button],input[type=submit]{transition:filter .18s ease,transform .18s ease}
button:not(.hwsFiveTVPoint),.button,input[type=button],input[type=submit]{border-color:rgba(70,201,240,.38)}
button:hover,.button:hover,input[type=button]:hover,input[type=submit]:hover{filter:brightness(1.12)}
main,#main,.main,.wrap,.container,#app,.app,.page-content{color:var(--hws-text)!important}
section,article,.section,.panel,.card,.tile,.widget,.tool-card,.forecast-card,.forecastPane,.dayCard,.climateCard,.areaCard,.news-card,.article-card,.meteogram-card,.trend15Card{
 color:var(--hws-text)!important;
}
h1,h2,h3,h4,h5,h6,.section-title,.page-title,.title,.heading{color:#f5fbff!important;text-shadow:0 1px 8px rgba(0,0,0,.12)}
p,li,label,small,.muted,.subtitle,.description,.note,.help-text,.meta,.timestamp,.caption{color:var(--hws-muted)}
a{color:#67ddfa}
a:hover{color:#c4f5ff}
hr,.divider,.section-divider{border-color:var(--hws-line)!important;background-color:var(--hws-line)!important}
input,select,textarea{background:#eaf5fa!important;color:#14364b!important;border:1px solid #8db9cc!important;border-radius:11px!important}
input::placeholder,textarea::placeholder{color:#547285!important}
:focus-visible{outline:2px solid #39d9f5!important;outline-offset:3px!important}
.card,.panel,.tile,.widget,.tool-card,.forecast-card,.forecastPane,.dayCard,.climateCard,.areaCard,.news-card,.article-card,.meteogram-card,.trend15Card{
 background:linear-gradient(145deg,rgba(8,48,77,.72),rgba(4,31,53,.72))!important;
 border:1px solid rgba(80,190,226,.22)!important;border-radius:18px!important;box-shadow:var(--hws-shadow)!important
}
#trend15,#trend,#forecast,#fivedaytv,#climate,#meteogram,#marine,#alarm,#greece,#news,#articles,
#hwsTrend,#hwsForecast,#hwsMeteogram,#hwsClimate{
 background:transparent!important;color:var(--hws-text)!important
}
#trend15 .trend15Card,#trend15 .section,#trend15 .chart-wrap,#trend15 .now-facts,#trend15 .fact{
 background:transparent!important;box-shadow:none!important
}
#trend15 .trend15Card{border-color:rgba(80,190,226,.18)!important}
#trend15 p,#trend15 label,#trend15 .muted,#trend15 .small,#trend15 .lead,#trend15 .note,#trend15 .status,
#trend15 .trend15Subtitle,#trend15 .fact>span:first-child{color:#c7deeb!important}
#trend15 .fact>span:nth-child(2),#trend15 strong,#trend15 h1,#trend15 h2,#trend15 h3{color:#f5fbff!important}
#trend15 svg text{fill:#eaf6fc!important}
#trend15 svg .grid{stroke:rgba(221,242,252,.24)!important}
#trend15 svg .zero{stroke:rgba(245,251,255,.8)!important}
#fivedaytv{background:transparent!important}
#fivedaytv .hwsFiveTVMapWrap,#fivedaytv .hwsFiveTVMap,#fivedaytv .hwsFiveTVMapCanvas{background:#06436a!important}
#fivedaytv .hwsFiveTVTemps,#fivedaytv .hwsFiveTVArrowLabel{color:#fff!important}
#fivedaytv .hwsFiveTVArrowLabel{background:rgba(0,15,28,.8)!important}
#fivedaytv .hwsFiveTVPoint .tvIcon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
#fivedaytv .hwsFiveTVArrow .windVisual{filter:drop-shadow(0 1px 3px rgba(0,0,0,.8))}
#forecast .forecastPane,#forecast .dayCard,#climate .climateCard,#climate .areaCard{
 background:linear-gradient(145deg,rgba(7,43,70,.55),rgba(3,27,47,.55))!important;
 border-color:rgba(80,190,226,.24)!important;color:#f4fbff!important
}
#forecast .forecastPane *,#forecast .dayCard *,#climate .climateCard *,#climate .areaCard *{color:inherit}
#forecast .muted,#forecast .small,#climate .muted,#climate .small{color:#c5dbe7!important}
#news article,#articles article,.article,.article-content,.news-item{color:#edf8ff!important}
#news .article-card,#articles .article-card{background:linear-gradient(145deg,rgba(7,43,70,.72),rgba(3,27,47,.72))!important}
.badge,.pill,.chip,.tag{border-color:rgba(85,204,238,.36)!important}
footer,.site-footer{background:rgba(2,17,31,.9)!important;color:#c5dbe7!important;border-color:var(--hws-line)!important}
footer a,.site-footer a{color:#72def7!important}
@media(max-width:760px){
 body{background:linear-gradient(180deg,#05253e 0%,#031a2e 100%)!important}
 .card,.panel,.tile,.widget,.tool-card,.forecast-card,.forecastPane,.dayCard,.climateCard,.areaCard,.news-card,.article-card,.meteogram-card,.trend15Card{border-radius:15px!important}
 h1{line-height:1.14}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}


/* HWS V58 — screenshot-matched dashboard structure; existing maps, icons, data and article content remain intact. */
:root{--hws-bg:#031b31;--hws-bg2:#062944;--hws-panel:#06243d;--hws-panel2:#082e4b;--hws-text:#f3f9ff;--hws-muted:#c2d8e6;--hws-cyan:#31d4f3;--hws-line:rgba(49,212,243,.24)}
html,body{background:#031b31!important;color:#f3f9ff!important}
body{background:linear-gradient(180deg,#062746 0%,#031a30 55%,#062b42 100%)!important}
main{width:100%!important;max-width:1120px!important;margin-inline:auto!important;padding-inline:clamp(12px,2.8vw,28px)!important;box-sizing:border-box!important}
main>section{width:100%!important;max-width:100%!important;margin:0 auto!important;padding:clamp(12px,2.4vw,24px) 0!important;background:transparent!important;color:#f3f9ff!important;border:0!important;border-radius:0!important;box-shadow:none!important}
main>section.active{display:block!important}
main>section:not(.active){display:none!important}
.pageHead,.hero,.homeHero{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:4px 2px 16px!important;margin:0 0 10px!important;color:#f3f9ff!important}
.pageHead h1,.hero h1,.homeHero h1,main h1{font-size:clamp(1.45rem,4.3vw,2.15rem)!important;line-height:1.15!important;letter-spacing:.01em!important;color:#f4faff!important;margin:0 0 9px!important}
.pageHead p,.hero p,.homeHero p{color:#c6dfed!important;line-height:1.55!important;max-width:78ch}
h2,h3,h4,h5,h6,.section-title,.page-title{color:#f4faff!important}
p,li,label,small,.muted,.subtitle,.description,.note,.help-text,.meta,.timestamp,.caption{color:#c6dfed}
a{color:#64ddfa!important}
/* Flat dashboard canvas: cards are reserved for actual forecast units, not whole-page containers. */
.panel,.section,.widget,.tool-card,.climateChartCard,.homeGuide,.hwsMenuFill,.hwsHomeToday,.hwsForecastKey,.trendCityBlock,.trend15Source,.modelHelp,.coverageStrip{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.card,.tile,.forecast-card,.forecastPane,.dayCard,.climateCard,.areaCard,.news-card,.article-card,.meteogram-card,.trend15Card,.trendCityCard{background:rgba(3,35,60,.35)!important;border:1px solid rgba(49,212,243,.20)!important;border-radius:16px!important;box-shadow:none!important;color:#f4faff!important}
/* Top-level home navigation resembles the compact pill controls in the reference. */
.homePrimaryGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.homePrimaryCard{min-width:0!important;display:flex!important;align-items:center!important;gap:12px!important;text-align:left!important;padding:14px!important;border:1px solid rgba(87,207,241,.24)!important;border-radius:16px!important;background:linear-gradient(140deg,rgba(8,65,101,.82),rgba(3,34,58,.92))!important;color:#f4faff!important;box-shadow:none!important}
.homePrimaryCard b,.homePrimaryCard small{color:#f4faff!important}.homePrimaryCard small{opacity:.83}
.homePrimaryIcon{color:#52dafa!important;background:rgba(28,148,194,.16)!important;border:1px solid rgba(76,206,241,.25)!important;border-radius:13px!important;flex:0 0 44px!important;width:44px!important;height:44px!important;display:grid!important;place-items:center!important}
.homeSecondaryLinks{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin:14px 0!important}
.homeSecondaryLinks button,.hwsDashboardQuickLinks button{border:1px solid rgba(49,212,243,.28)!important;border-radius:999px!important;background:rgba(3,38,65,.82)!important;color:#eafaff!important;padding:10px 14px!important}
/* Five-day screen: large map, compact date pills, no extra frame around the whole section. */
#fivedaytv .hero{padding:2px 2px 12px!important}
#hwsFiveTVTabs{display:flex!important;gap:8px!important;overflow-x:auto!important;padding:5px 0 12px!important;scrollbar-width:thin}
#hwsFiveTVTabs button{flex:0 0 auto!important;border:1px solid rgba(49,212,243,.28)!important;border-radius:12px!important;background:#062e50!important;color:#dff6ff!important;padding:10px 14px!important;white-space:nowrap!important}
#hwsFiveTVTabs button.active,#hwsFiveTVTabs button[aria-selected="true"]{background:linear-gradient(120deg,#087ab6,#075c91)!important;color:#fff!important;box-shadow:0 0 0 1px rgba(49,212,243,.3)!important}
#fivedaytv .hwsFiveTVTitle{background:linear-gradient(100deg,#07537e,#08739b)!important;color:#f5fbff!important;border:1px solid rgba(49,212,243,.24)!important;border-radius:12px!important;padding:12px 15px!important;margin:6px 0 12px!important}
#fivedaytv .hwsFiveTVMapWrap{background:#06436a!important;border:1px solid rgba(49,212,243,.22)!important;border-radius:20px!important;overflow:hidden!important;box-shadow:none!important}
#fivedaytv .hwsFiveTVLegend{background:transparent!important;border:0!important;color:#d7edf8!important;padding:10px 4px!important}
/* Trend section follows the map in combined dashboard mode. */
body.hws-dashboard-combined #trend15{display:block!important;padding-top:16px!important;border-top:1px solid rgba(49,212,243,.28)!important;margin-top:10px!important}
#trend15 .pageHead{padding-bottom:8px!important}
#trend15 .trend15Top{background:transparent!important;border:0!important;padding:4px 0 10px!important}
#trend15 .trend15Grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
#trend15 .trend15Card{background:transparent!important;border:0!important;border-top:1px solid rgba(49,212,243,.20)!important;border-radius:0!important;padding:14px 4px!important;box-shadow:none!important;min-width:0!important}
#trend15 .trend15Card h2{color:#dff7ff!important;font-size:1.1rem!important}
#trend15 .trend15Card p,#trend15 .trendCityHead p,#trend15 .trendCityCard p{color:#c4dce9!important}
#trend15 .trendChartScroll{overflow-x:auto!important;max-width:100%!important}
#trend15 svg text{fill:#eef9ff!important}
#trend15 .trendCityBlock{margin-top:10px!important;padding-top:12px!important;border-top:1px solid rgba(49,212,243,.2)!important}
#trend15 .trendCityCard{background:transparent!important;border:0!important;border-top:1px solid rgba(49,212,243,.18)!important;border-radius:0!important;box-shadow:none!important}
.hwsDashboardQuickLinks{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;margin:18px 0 4px!important;padding-top:12px!important;border-top:1px solid rgba(49,212,243,.24)!important}
.hwsDashboardQuickLinks button{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-width:0!important;font-size:.82rem!important;line-height:1.2!important}
/* Existing content/cards stay readable while articles and source links retain their own functions. */
#news .article-card,#articles .article-card,.newsPublishedGrid article,.newsPublishedGrid .news-card{background:rgba(3,35,60,.5)!important;border:1px solid rgba(49,212,243,.2)!important;color:#f3f9ff!important}
#news p,#news .article-content,#news article p,#articles p,#articles .article-content{color:#d5e8f2!important}
#climate .climateCard,#climate .areaCard,#forecast .forecastPane,#forecast .dayCard{background:rgba(3,35,60,.28)!important;border:1px solid rgba(49,212,243,.18)!important;color:#f3f9ff!important;box-shadow:none!important}
#forecast .muted,#forecast .small,#climate .muted,#climate .small{color:#c7deeb!important}
input,select,textarea{background:#eef8fc!important;color:#16364a!important;border:1px solid #8db9cc!important}
footer,.site-footer{background:#02172a!important;color:#d0e3ee!important;border-top:1px solid rgba(49,212,243,.24)!important}
@media(max-width:700px){
 main{padding-inline:12px!important}
 #trend15 .trend15Grid{grid-template-columns:minmax(0,1fr)!important}
 .homePrimaryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .homePrimaryCard{padding:11px!important;gap:9px!important}
 .homePrimaryIcon{flex-basis:36px!important;width:36px!important;height:36px!important}
 .hwsDashboardQuickLinks{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .hwsDashboardQuickLinks button{padding:9px 6px!important;font-size:.75rem!important}
}
@media(max-width:420px){.homePrimaryGrid{grid-template-columns:minmax(0,1fr)!important}}

/* HWS V59 — full-site reference environment: deep navy canvas, cyan accents, bright readable text.
   Presentation-only overrides. Preserve the site's existing content, custom weather icons, maps and data logic. */
:root{color-scheme:dark;--hws-v59-bg:#031a30;--hws-v59-bg2:#062a47;--hws-v59-panel:#062642;--hws-v59-cyan:#32d5f4;--hws-v59-white:#f4faff;--hws-v59-muted:#c6deec;--hws-v59-border:rgba(50,213,244,.26)}
html,body{min-height:100%;background:var(--hws-v59-bg)!important;color:var(--hws-v59-white)!important}
body{background:linear-gradient(180deg,#062a48 0%,#041f38 42%,#031a2d 100%)!important;background-attachment:fixed!important}
body,body *{scrollbar-color:#17648b #041a2d}
body :is(header,.site-header,#header,.hws-header,.topbar,.navbar,.site-nav,.nav-wrap){background:linear-gradient(110deg,#052440 0%,#073b60 55%,#06445f 100%)!important;color:var(--hws-v59-white)!important;border-color:var(--hws-v59-border)!important}
body :is(nav,.nav,#nav,#hwsNav,.hws-nav,.menu,.main-menu,.mobile-menu){background:rgba(2,20,37,.96)!important;color:var(--hws-v59-white)!important;border-color:var(--hws-v59-border)!important}
body :is(nav a,.nav a,#nav a,#hwsNav a,.hws-nav a,.menu a,.main-menu a,.mobile-menu a){color:#e5f7ff!important;text-decoration:none}
body :is(nav a:hover,.nav a:hover,#nav a:hover,#hwsNav a:hover,.hws-nav a:hover,.menu a:hover,.main-menu a:hover,[aria-current="page"]){background:linear-gradient(110deg,#0875ad,#07547d)!important;color:#fff!important;border-color:rgba(70,220,255,.45)!important}
body :is(main,#main,.main,.wrap,.container,#app,.app,.page-content,.content,.site-content,.page,.layout,.content-wrap){color:var(--hws-v59-white)!important}
body :is(section,article,aside,.section,.page-section,.content-section,.tool,.tool-card,.widget,.forecast,.forecast-section,.weather-section,.article-content,.news-content,.published-content){color:var(--hws-v59-white)}
body :is(h1,h2,h3,h4,h5,h6,.section-title,.page-title,.title,.heading,.article-title,.news-title){color:#f5fbff!important;text-shadow:0 1px 8px rgba(0,0,0,.14)}
body :is(p,li,label,small,.muted,.subtitle,.description,.note,.help-text,.meta,.timestamp,.caption,.article-meta,.news-meta,.source-note,.hint){color:var(--hws-v59-muted)}
body a{color:#66ddfa}body a:hover{color:#c8f5ff}
body :is(button,.button,input[type=button],input[type=submit],.btn,[role=button]){color:#effaff;border-color:rgba(50,213,244,.32);transition:filter .18s ease,background .18s ease}
body :is(button,.button,input[type=button],input[type=submit],.btn):hover{filter:brightness(1.12)}
body :is(input,select,textarea){background:#eef8fc!important;color:#16364a!important;border:1px solid #8db9cc!important;border-radius:11px!important}
body :is(input,select,textarea)::placeholder{color:#547285!important}
body :is(.card,.panel,.tile,.widget,.tool-card,.forecast-card,.forecastPane,.dayCard,.climateCard,.areaCard,.news-card,.article-card,.meteogram-card,.trend15Card,.modal-content,.dialog-content,.popover-content,.dropdown-menu,.accordion,.accordion-item,.result-card,.content-card){color:var(--hws-v59-white)!important;background:linear-gradient(145deg,rgba(8,48,77,.68),rgba(4,29,50,.78))!important;border-color:rgba(80,190,226,.23)!important;box-shadow:0 8px 24px rgba(0,8,20,.14)!important}
/* Flatten large section wrappers, retaining useful boundaries on individual forecast units. */
body :is(.page-section,.content-section,.section-wrapper,.dashboard-section,.tool-section,.article-section,.forecast-section){background:transparent!important;color:var(--hws-v59-white)!important}
body :is(table,thead,tbody,tr,th,td){border-color:rgba(80,190,226,.22)!important}
body :is(th){background:rgba(7,67,103,.68)!important;color:#f4fbff!important}
body :is(td){color:#d9edf7}
body :is(.modal,.dialog,.popover,.dropdown-menu,.menu-panel,.drawer,.offcanvas){background:#06243d!important;color:#f3f9ff!important;border-color:var(--hws-v59-border)!important}
body :is(.modal,.dialog,.popover,.dropdown-menu,.menu-panel,.drawer,.offcanvas) :is(h1,h2,h3,p,label,li,span,div){color:inherit}
body :is(.badge,.pill,.chip,.tag,.status,.category){border-color:rgba(85,204,238,.36)!important}
body :is(footer,.site-footer,#footer){background:rgba(2,17,31,.94)!important;color:#c5dbe7!important;border-color:var(--hws-v59-border)!important}
body :is(footer,.site-footer,#footer) a{color:#72def7!important}
body img,body svg,body canvas,body iframe{max-width:100%}
body :focus-visible{outline:2px solid #39d9f5!important;outline-offset:3px!important}
/* Keep the established custom Greece map, map overlays and HWS weather symbols untouched. */
#fivedaytv .hwsFiveTVMapWrap,#fivedaytv .hwsFiveTVMap,#fivedaytv .hwsFiveTVMapCanvas{background:#06436a!important}
#fivedaytv .hwsFiveTVPoint .tvIcon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
#trend15 svg text{fill:#eef9ff!important}
#trend15 .trend15Card,#trend15 .trendCityCard{color:#f4faff!important}
#news .article-content,#articles .article-content{color:#e3f1f8!important}
@media(max-width:760px){body{background:linear-gradient(180deg,#05253e 0%,#031a2e 100%)!important;background-attachment:scroll!important}body :is(.card,.panel,.tile,.widget,.tool-card,.forecast-card,.forecastPane,.dayCard,.climateCard,.areaCard,.news-card,.article-card,.meteogram-card,.trend15Card){border-radius:15px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* V61: readable text and compact collision fallback for the full-site navy theme. */
#trend15,#trend15 :is(p,li,label,small,.muted,.small,.note,.status,figcaption){color:#eaf5fc!important}
#trend15 :is(h1,h2,h3,h4,strong,b,.metric,.value){color:#fff!important}
#trend15 svg text,#meteograms svg text,#climate svg text{fill:#f7fbff!important;paint-order:stroke;stroke:rgba(0,18,32,.72);stroke-width:.65px}
#fivedaytv .hwsFiveTVPoint{z-index:12!important}
#fivedaytv .hwsFiveTVPointCompact .tvIcon{width:15px!important;height:15px!important}
#fivedaytv .hwsFiveTVPointCompact .hwsFiveTVTemps{font-size:8px!important;padding:1px 2px!important}
#fivedaytv .hwsFiveTVPointLabelSuppressed .hwsFiveTVTemps{visibility:hidden!important}
#fivedaytv .hwsFiveTVTemps{color:#fff!important;background:rgba(0,10,20,.94)!important;border:1px solid rgba(235,249,255,.5)!important;text-shadow:0 1px 2px #000!important}
#fivedaytv .hwsFiveTVArrowLabel{color:#fff!important;background:rgba(0,10,20,.94)!important;border:1px solid rgba(235,249,255,.48)!important}
#forecast :is(.hwsConfidence,.hwsConfidence b),#forecast :is(.muted,.small,.sourceLine){color:#f1f8fc!important}
#meteograms :is(p,label,small,.muted,.small),#climate :is(p,label,small,.muted,.small){color:#e0edf5!important}