/* v15.2.css - v15.ro. The file name changes when the content does (cached 90 days). */
:root{
--bg:#f3f3fa;--card:#fff;--ink:#1f2a3d;--muted:#5d6779;--line:#e7eaf1;
--brand:#48cfcf;--brand-ink:#0b7c7d;--title:#2d5f8a;--night:#f5f6fb;--lead:#eafafa;
--radius:14px;--shadow:0 1px 3px rgba(20,40,80,.08),0 6px 18px rgba(20,40,80,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);padding-top:55px;line-height:1.45}
a{color:var(--title)}
img{max-width:100%}
ul,ol{list-style:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;height:55px;background:var(--brand);box-shadow:0 2px 4px rgba(0,0,0,.1);display:flex;align-items:center;padding:0 16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));z-index:8;gap:6px}
.logo{display:flex;align-items:center;height:48px}
.logo img{height:48px;width:auto}
.menu-toggle{display:none;font-size:26px;line-height:1;background:none;border:0;cursor:pointer;padding:8px 10px;color:#0d3b45}
.nav{margin-left:28px}
.nav a{color:#0d3b45;text-decoration:none;padding:10px 16px;display:inline-block;font-weight:600}
.nav a:hover{text-decoration:underline}
.set-btn{margin-left:auto;font:inherit;font-size:1rem;color:#0d3b45;background:none;border:0;cursor:pointer;padding:8px 8px 8px 30px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3b45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") 6px center/20px no-repeat}

.content{max-width:1060px;margin:0 auto;padding:10px 12px 30px}
.sec{margin-top:34px}
.sec-title{display:flex;align-items:center;gap:8px;font-size:1.3rem;margin:0 0 12px 4px;color:var(--title);letter-spacing:-.2px}
.sec-title::before{content:"";width:30px;height:22px;flex:none;background:url(/vremea-15.png) center/contain no-repeat;opacity:.75}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}

/* hero: town, now, the summary */
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 4px 18px}
h1{font-size:clamp(2rem,8vw,3rem);line-height:1.05;color:var(--brand-ink);letter-spacing:-.5px}
.h1-pre{display:block;font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.h1-sub{display:block;font-size:.95rem;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:6px}
.now-chip{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:6px;text-decoration:none;color:var(--ink);flex:none;text-align:right}
.now-chip-i{width:56px;height:56px}
.now-chip-t{font-size:2.3rem;font-weight:700;line-height:1;color:#263457}
.now-chip-x{grid-column:1/-1;font-size:.9rem;color:var(--muted)}
.sum-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border-left:5px solid var(--brand);padding:18px 18px 12px}
.sum-title{font-size:.9rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--title)}
.sum-hello{margin-top:10px;color:var(--muted)}
.sum-head{font-family:Georgia,"Noto Serif","Times New Roman",serif;font-size:clamp(1.35rem,5.2vw,1.75rem);line-height:1.3;margin:8px 0 14px;color:var(--ink);text-wrap:balance}
.sum-line{display:grid;grid-template-columns:8.6em 1fr;gap:2px 12px;padding:9px 10px;border-top:1px solid var(--line);border-radius:8px}
.sum-line dt{font-weight:600;color:var(--title)}
.sum-line dd b{color:#263457}
.sum-line.is-lead{background:var(--lead);border-top-color:transparent}
.sum-line.is-lead+.sum-line{border-top-color:transparent}
.sum-line.is-lead dt,.sum-line.is-lead dd{font-size:1.06rem}
.sum-line.is-muted dt,.sum-line.is-muted dd,.sum-line.is-muted dd b{color:var(--muted);font-weight:400}
.sep{font-style:normal}
.more-hint{display:none;text-align:center;margin-top:16px;font-size:.9rem;font-weight:600}
.more-hint a{text-decoration:none;color:#3d8fb8}
.more-hint a::before{content:"↓ "}

/* now */
.now{display:flex;align-items:center;gap:24px;padding:18px 22px;flex-wrap:wrap}
.now-main{display:flex;align-items:center;gap:14px}
.now-t{font-size:3rem;font-weight:700;color:#263457;line-height:1}
.now-det{color:var(--muted);flex:1;min-width:200px}
.now-state{color:var(--ink);margin-bottom:6px}
.now-det li{padding:1px 0}
.now-time{font-size:.85rem;margin-top:8px}
.now-none{color:var(--muted)}
#shareButton{font:inherit;color:#fff;background:#3d83a6 url(/assets/share.svg) 14px center/18px no-repeat;border:0;border-radius:8px;padding:12px 18px 12px 42px;cursor:pointer}
#shareButton[hidden]{display:none}

/* hours: one row that scrolls sideways (native scrolling; the script only adds mouse dragging) */
.strip{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.strip.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.hours{display:flex;width:max-content;padding:6px 4px}
.hr{flex:none;width:112px;padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;border-right:1px solid var(--line);scroll-snap-align:start}
.hr:last-child{border-right:0}
.hr.night{background:var(--night)}
.hr-time{font-weight:700;padding-bottom:2px;border-bottom:3px solid transparent}
.hr-day{font-size:.78rem;color:var(--muted)}
.hr .wi{width:64px;height:64px;margin:6px 0 2px}
.hr-t{font-size:1.6rem;font-weight:700;color:#263457}
.hr-txt{font-size:.88rem;font-weight:600;margin:2px 0 4px;min-height:2.5em;display:flex;align-items:center}
.hr-x{font-size:.8rem;color:var(--muted);white-space:nowrap}

/* days: one row per date */
.days{overflow:hidden}
.day{display:grid;grid-template-columns:1fr 92px 92px;align-items:center;gap:2px 8px;padding:10px 14px;border-top:1px solid var(--line)}
.day:first-child{border-top:0}
.day-date{border-left:4px solid transparent;padding-left:10px}
.day-date b{display:block}
.day-date span{font-size:.82rem;color:var(--muted)}
.day-part{display:flex;align-items:center;justify-content:flex-end;gap:4px;border-radius:10px;padding:2px 8px 2px 4px}
.day-part.night{background:var(--night)}
.day-part.is-none{justify-content:center;color:var(--muted)}
.day-part .wi{width:44px;height:44px}
.day-max,.day-min{font-size:1.3rem;font-weight:700;min-width:2.2em;text-align:right}
.day-max{color:#263457}
.day-min{color:#5b6b8c}
.day-info{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 16px;font-size:.86rem;color:var(--muted);padding-left:14px}
.day-txt{color:var(--ink);font-weight:600}
.day.is-wet .day-pop b{color:#1668a8}

/* the colour of a temperature, on the hour's and the day's label */
.temp-20,.temp-15{border-color:#C9C}.temp-10{border-color:#96F}.temp-5{border-color:#39F}.temp0{border-color:#9CF}
.temp5{border-color:#6C6}.temp10{border-color:#FE8}.temp15{border-color:#FC3}.temp20{border-color:#F93}
.temp25{border-color:#F60}.temp30{border-color:#F00}.temp35,.temp40{border-color:#900}

/* footer */
.footer{background:#c3d9d9;color:#333;padding:28px 0 20px;margin-top:36px}
.footer-content{max-width:1060px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.footer-section h3{color:#2B5374;margin-bottom:10px;font-size:1.1rem}
.footer-section li{display:flex;justify-content:space-between;align-items:center}
.footer-section li a{color:#333;text-decoration:none;padding:7px 0;display:block}
.footer-section li a:hover{text-decoration:underline}
.tagline{font-family:Georgia,"Noto Serif",serif;font-style:italic;margin-bottom:10px}
.del-btn{background:#8a9a9a;color:#fff;border:0;padding:3px 8px;cursor:pointer;border-radius:4px;margin-left:10px}
.credite{max-width:1060px;margin:24px auto 0;padding:0 16px;font-size:.82rem;color:#444}
.credite summary{cursor:pointer;font-weight:600;padding:6px 0}
.credite p{margin-top:6px}
.footer-bottom{text-align:center;padding-top:18px;margin-top:18px;border-top:1px solid rgba(0,0,0,.1);font-size:.9rem}
.built{font-size:.82rem;color:#555;margin-top:4px}

/* settings */
.modal{border:0;border-radius:12px;padding:20px;width:min(92vw,460px);margin:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal::backdrop{background:rgba(0,0,0,.45)}
.modal h2{font-size:1.25rem;color:var(--title)}
.modal .close{float:right;font-size:28px;line-height:1;color:#777;background:none;border:0;cursor:pointer;padding:0 6px}
fieldset{border:1px solid #ddd;border-radius:8px;margin:12px 0;padding:6px 10px}
legend{padding:0 6px;font-weight:600}
fieldset label{padding:8px 4px;display:block;cursor:pointer}
#save{font:inherit;font-size:1.05rem;padding:10px 22px;border:0;border-radius:8px;background:var(--brand-ink);color:#fff;cursor:pointer}

/* 404 */
.p404 h1{margin:20px 0 10px}
.all-towns{columns:210px;column-gap:24px;margin-top:18px}
.all-towns>div{break-inside:avoid;margin-bottom:18px}
.all-towns h2{font-size:1rem;color:var(--title);margin-bottom:4px}
.all-towns a{text-decoration:none;display:inline-block;padding:3px 0}

/* a page that could not be refreshed for a long time (the script adds .is-old): "now" is no longer now */
.is-old .now-chip,.is-old .sum-hello{display:none}
.is-old .built{color:#a11;font-weight:600}

@media (min-width:860px){
.day{grid-template-columns:150px 100px 100px 1fr;padding:8px 18px}
.day-info{grid-column:auto;display:grid;grid-template-columns:1fr 150px 130px;align-items:center;font-size:.92rem}
.sum-card{padding:22px 24px 14px}
}
@media (max-width:768px){
.menu-toggle{display:block}
.nav{position:fixed;top:55px;left:-260px;width:250px;height:calc(100vh - 55px);background:#f2f8fb;margin:0;padding:14px 0;transition:left .25s;box-shadow:2px 0 4px rgba(0,0,0,.1)}
.nav.active{left:0}
.nav a{display:block;padding:15px 20px;border-bottom:1px solid #e6eef2}
.footer{background:#b7dede}
.footer-content{grid-template-columns:1fr}
}
@media (max-width:480px){
/* on a phone the summary is the first screen */
.hero{min-height:calc(100svh - 75px);display:flex;flex-direction:column}
.hero .sum-card{margin-bottom:auto}
.more-hint{display:block;padding-bottom:6px}
.sum-line{grid-template-columns:1fr;padding:8px 10px}
.sum-line dt{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.sum-line.is-lead dt{font-size:.82rem}
.now{gap:12px;padding:16px}
.hr{width:104px}
.day{grid-template-columns:1fr 84px 84px;padding:10px}
}
@media (prefers-reduced-motion:reduce){.nav{transition:none}}