/* Moti Shqip — un'unica famiglia (Archivo) usata a larghezze diverse: stretta e grande per i numeri, normale per il testo. */
:root{
  --stone:#eef1ec; --paper:#fbfcfa; --ink:#15232b; --muted:#5b6b73; --line:#d8dfd9;
  --sea:#0e4c6b; --sea-2:#14628a; --warm:#c8102e; --cold:#3a7ca5; --focus:#e0a100;
  --wrap:1180px; --gutter:clamp(16px,4vw,32px);
  font-family:Archivo,system-ui,sans-serif; font-variation-settings:"wdth" 100; color:var(--ink); background:var(--stone);
  -webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
body{margin:0;line-height:1.5;font-size:16px}
a{color:var(--sea)}
img{display:block}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--paper);padding:8px 12px;z-index:20}.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.muted{color:var(--muted)}

/* Intestazione */
.top{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:10}
.top-row{display:flex;align-items:center;gap:20px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:750;font-size:22px;font-variation-settings:"wdth" 112;letter-spacing:-.02em;flex-shrink:0}
.brand-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sea);color:#ffe27a;font-size:20px;line-height:1}
.site-logo{max-height:44px;max-width:200px;object-fit:contain}
.search{position:relative;flex:1;max-width:420px;margin-left:auto}
.search input{width:100%;font:inherit;font-size:15px;padding:10px 14px 10px 38px;border:1px solid var(--line);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b73' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 14px 50% no-repeat;color:var(--ink)}
.search input:focus{outline:none;border-color:var(--sea);box-shadow:0 0 0 3px #0e4c6b33}
.search-results{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px #15232b26;max-height:360px;overflow:auto}
.search-results li{padding:9px 12px;border-radius:9px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.search-results li small{color:var(--muted)}
.search-results li[aria-selected="true"],.search-results li:hover{background:var(--stone)}
.search-results .info{cursor:default;color:var(--muted)}
.locate{display:flex;align-items:center;gap:7px;font:inherit;font-size:14px;color:var(--sea);background:none;border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer;flex-shrink:0}
.locate:hover{background:var(--stone)}

/* Menu dei paesi */
.countries{border-top:1px solid var(--line)}
.countries-row{display:flex;gap:4px;flex-wrap:wrap}
.country summary{list-style:none;cursor:pointer;padding:11px 14px;font-weight:600;font-size:15px;font-variation-settings:"wdth" 90;border-bottom:3px solid transparent;user-select:none;display:flex;align-items:center;gap:7px}
.country summary::-webkit-details-marker{display:none}
.country summary::after{content:"";width:7px;height:7px;border:solid var(--muted);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.country[open] summary{border-bottom-color:var(--sea);color:var(--sea)}
.country[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.country summary:hover{color:var(--sea)}
.count{font-size:12px;font-weight:500;color:var(--muted)}
.country-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 22px 40px #15232b1f;max-height:min(70vh,560px);overflow:auto}
.country-panel>*{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.country-head{margin-top:18px;margin-bottom:10px;font-size:14px;color:var(--muted)}
.country-head strong{font-size:22px;color:var(--ink);font-variation-settings:"wdth" 110;margin-right:8px}
.country-panel ul{list-style:none;padding-bottom:22px;margin:0;columns:5 160px;column-gap:24px}
.country-panel li{break-inside:avoid}
.country-panel a{display:block;padding:4px 0;text-decoration:none;color:var(--ink);font-size:15px}
.country-panel a:hover{color:var(--sea);text-decoration:underline}
.country-panel a.main{font-weight:700;color:var(--sea)}

/* Cielo: il colore segue il tempo dell'ora in corso */
.sky{color:#fff;background:var(--sea);padding:40px 0 44px}
.sky-day{background:linear-gradient(170deg,#0f5d8a 0%,#2f86b5 55%,#7cb6d3 100%)}
.sky-night{background:linear-gradient(170deg,#0b1d33 0%,#173a5c 70%,#28507a 100%)}
.sky-night-cloud{background:linear-gradient(170deg,#141c26 0%,#2b3846 100%)}
.sky-cloud{background:linear-gradient(170deg,#41525e 0%,#6e8290 100%)}
.sky-rain{background:linear-gradient(170deg,#263845 0%,#4b6475 100%)}
.sky-storm{background:linear-gradient(170deg,#1b1f2b 0%,#3b3f55 100%)}
.sky-snow{background:linear-gradient(170deg,#6f8696 0%,#a7b9c4 100%);color:#10202a}
.sky-fog{background:linear-gradient(170deg,#7d8a8f 0%,#adb7b8 100%);color:#10202a}
.sky-grid{display:grid;grid-template-columns:1.1fr auto 1fr;gap:32px;align-items:center}
.place h1{margin:0;font-size:clamp(34px,5vw,56px);line-height:1;font-weight:800;font-variation-settings:"wdth" 115;letter-spacing:-.02em;overflow-wrap:anywhere}
.place-meta{margin:12px 0 0;opacity:.85;font-size:15px}
.flag{margin-top:14px;font-size:14px;background:#ffffff26;padding:8px 12px;border-radius:8px;display:inline-block}
.now{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:10px}
.now .wx{grid-row:span 2;filter:drop-shadow(0 6px 14px #00000030)}
.now-temp{margin:0;font-size:clamp(84px,12vw,150px);line-height:.85;font-weight:700;font-variation-settings:"wdth" 62;letter-spacing:-.04em;font-feature-settings:"tnum"}
.now-text{margin:8px 0 0;font-size:16px;opacity:.92}
.facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;font-size:15px}
.facts div{border-top:1px solid #ffffff40;padding-top:7px}
.sky-snow .facts div,.sky-fog .facts div{border-top-color:#10202a33}
.facts dt{font-size:13px;opacity:.8}
.facts dd{margin:2px 0 0;font-weight:600;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.facts small{font-weight:400;opacity:.85}
.arrow{flex-shrink:0;display:inline-block;vertical-align:-2px}

/* Città principali */
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.quick a{padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--ink);font-size:15px;border:1px solid transparent}
.quick a:hover{border-color:var(--line);background:var(--paper)}
.quick a[aria-current]{background:var(--ink);color:#fff}

.notice{margin-top:18px;padding:12px 16px;background:#fff6dc;border-left:4px solid var(--focus);border-radius:4px;font-size:15px}
.notice.error{background:#fde8ea;border-left-color:var(--warm)}
.empty{padding:60px var(--gutter)}

/* Blocchi */
.block{margin-top:36px}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.block-head h2{margin:0;font-size:24px;font-weight:750;font-variation-settings:"wdth" 108;letter-spacing:-.01em}
.block-head p{margin:0;color:var(--muted);font-size:14px}
.legend{font-size:13px;color:var(--muted);margin:8px 0 0}

/* Orë pas ore: la cresta delle temperature e le colonne sono allineate per ora */
.hours-scroll{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;scrollbar-width:thin}
.hours{position:relative;padding-bottom:10px}
.ridge{display:block}
.ridge-area{fill:#0e4c6b1a}
.ridge-line{fill:none;stroke:var(--sea);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ridge text{font:700 13px Archivo,sans-serif;font-variation-settings:"wdth" 80;fill:var(--ink);text-anchor:middle}
.hour-list{list-style:none;margin:0;padding:0;display:flex}
.hour-list li{width:var(--step);flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:6px;border-left:1px solid transparent;position:relative}
.hour-list li.midnight{border-left-color:var(--line)}
.hours .ridge{position:relative}
.day-mark{position:absolute;top:8px;padding-left:6px;border-left:1px solid var(--line);height:132px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.hour-list time{font-size:13px;color:var(--muted);font-feature-settings:"tnum"}
.hour-list .rain{font-size:12px;color:var(--cold);min-height:18px;font-weight:600}
.hour-list .wind{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:2px}

/* 10 ditë */
.days-scroll{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.days{width:100%;border-collapse:collapse;min-width:640px}
.days th,.days td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.days tbody tr:last-child>*{border-bottom:0}
.days thead th{font-size:13px;font-weight:500;color:var(--muted)}
.days .period{text-align:center;width:64px}.days td.period .wx,.days td.period .icon-empty{margin:0 auto}
.days tbody th{font-weight:600;white-space:nowrap}
.ddate{color:var(--muted);font-weight:400;font-size:14px;margin-left:4px}
.days .num{text-align:right;white-space:nowrap;font-feature-settings:"tnum"}
.days td.rain{color:var(--cold);font-weight:600}
.temps{min-width:170px}
.days .main-sym{display:none}
.temps .max,.temps .min{display:inline-block;width:42px;font-weight:700;font-variation-settings:"wdth" 75;font-size:19px;font-feature-settings:"tnum"}
.temps .max{color:var(--warm)}.temps .min{color:var(--cold)}
.bar{display:block;position:relative;height:4px;background:var(--stone);border-radius:2px;margin-top:4px}
.bar span{position:absolute;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,var(--cold),var(--warm))}

/* Ricerche recenti */
.recent-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.recent-list a{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);text-decoration:none;color:var(--ink);font-size:14px}
.recent-list a:hover{border-color:var(--sea);color:var(--sea)}
.recent-list small{color:var(--muted)}

.foot{margin-top:48px;border-top:1px solid var(--line);background:var(--paper);font-size:13px;color:var(--muted)}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:18px;padding-bottom:24px}
.foot p{margin:0}.foot a{color:inherit}

@media (max-width:960px){
  .sky-grid{grid-template-columns:1fr auto}
  .facts{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .top-row{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .search{order:3;flex-basis:100%;max-width:none}
  .locate{margin-left:auto}.locate span{display:none}
  .countries-row{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .country summary{justify-content:center;font-size:14px;padding:10px 6px}
  .country-panel ul{columns:2}
  .sky{padding:28px 0 30px}
  .sky-grid{grid-template-columns:1fr;gap:20px}
  .now .wx{width:96px;height:96px}
  .facts{grid-template-columns:1fr 1fr}
  .block-head h2{font-size:21px}
  .days{min-width:0}
  .days .period,.days .wind-col{display:none}
  .days .main-sym{display:table-cell;width:52px;padding-left:0;padding-right:0}
  .days th,.days td{padding:8px 10px}
  .ddate{display:block;margin-left:0;font-size:13px}
  .temps{min-width:0}
  .temps .max,.temps .min{width:34px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Marchio e allerte della redazione di Veriu */
.brand b{font-weight:800;color:var(--sea)}
.alarm{padding:12px 0;font-size:15px;border-bottom:1px solid #0000001a}
.alarm p{margin:4px 0 0}
.alarm-verdhe{background:#fff3c4;color:#4a3b00}
.alarm-portokalli{background:#ffd9b0;color:#4d2600}
.alarm-kuqe{background:#f8c9cf;color:#5a0010}