/* NearWeather v7 — city page (and later home). Everything is scoped to .nw2 so older pages are untouched. */
.nw2{
  --nw-bg:#F4F6F8;--nw-surface:#FFFFFF;--nw-line:#E3E7EC;--nw-line-soft:#EEF1F4;
  --nw-ink:#0E1726;--nw-ink-2:#4B5563;--nw-ink-3:#5B6472;
  --nw-accent:#1D4ED8;--nw-accent-soft:#EEF3FB;
  --nw-now:#12305A;--nw-now-ink:#FFFFFF;--nw-now-ink-2:#D6E2F5;--nw-now-line:rgba(255,255,255,.18);
  --nw-warn-bg:#FFF4E5;--nw-warn-line:#F5C77E;--nw-warn-ink:#5A2E00;--nw-warn-icon:#9A4B00;
  --nw-rain:#1D4ED8;
  --nw-r-lg:20px;--nw-r-md:16px;--nw-r-sm:12px;
  max-width:1200px;margin:0 auto;padding:12px 16px 96px;box-sizing:border-box;
  color:var(--nw-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5;
}
html.dark .nw2{
  --nw-bg:#0B1220;--nw-surface:#111A2B;--nw-line:#1F2A3D;--nw-line-soft:#1A2436;
  --nw-ink:#E8EDF5;--nw-ink-2:#A9B4C4;--nw-ink-3:#9AA6B8;
  --nw-accent:#7FA8FF;--nw-accent-soft:#18243A;
  --nw-now:#16325C;--nw-now-ink-2:#C9D7EE;
  --nw-warn-bg:#2A1D0A;--nw-warn-line:#6B4A16;--nw-warn-ink:#F8D9A8;--nw-warn-icon:#F5B85C;
  --nw-rain:#8DB3FF;
}
.nw2 *,.nw2 *::before,.nw2 *::after{box-sizing:border-box}
.nw2 a{color:var(--nw-accent)}
.nw2 h1,.nw2 h2,.nw2 p{margin:0}
.nw2 .nw2-muted{color:var(--nw-ink-2);font-size:13px}

/* Breadcrumb + title */
.nw2-crumbs ol{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:13px;color:var(--nw-ink-2)}
.nw2-crumbs li+li::before{content:"›";margin-right:4px;color:var(--nw-ink-3)}
.nw2-crumbs a{text-decoration:none;color:var(--nw-ink-2)}
.nw2-crumbs a:hover{color:var(--nw-accent)}
.nw2-titlebar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.nw2-titlebar h1{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.015em}
.nw2-sub{margin-top:4px !important;font-size:14px;color:var(--nw-ink-2)}
.nw2-actions{display:flex;gap:8px;flex:none}
.nw2-iconbtn{width:44px;height:44px;border-radius:22px;border:1px solid var(--nw-line);background:var(--nw-surface);color:var(--nw-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.nw2-iconbtn:hover{border-color:var(--nw-ink-3)}
.nw2-iconbtn[aria-pressed="true"]{color:#B45309;border-color:#F5C77E}
.nw2-iconbtn[aria-pressed="true"] svg{fill:currentColor}
.nw2-iconbtn:focus-visible,.nw2 a:focus-visible,.nw2 button:focus-visible,.nw2 summary:focus-visible{outline:3px solid var(--nw-accent);outline-offset:2px}

/* Two-column layout that stacks on phones */
.nw2-layout{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-start;margin-bottom:16px}
.nw2-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:14px}
.nw2-side{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}

/* Current conditions */
.nw2-now{background:var(--nw-now);color:var(--nw-now-ink);border-radius:var(--nw-r-lg);padding:20px;display:flex;flex-direction:column;gap:14px}
.nw2-now-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nw2-now-temp{font-size:84px;font-weight:600;line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.nw2-now-cond{font-size:19px;font-weight:600;margin-top:6px}
.nw2-now-meta{font-size:15px;color:var(--nw-now-ink-2);margin-top:2px}
.nw2-now-icon{width:104px;height:104px;flex:none;filter:brightness(0) invert(1)}
.nw2-moon{color:#4F5D8A;flex:none}
.nw2-now-moon{color:#FDE68A}
html.dark .nw2-moon{color:#C7D2FE}
/* The condition icons are dark line art; lighten them on dark surfaces */
html.dark .nw2-hours img,html.dark .nw2-days img{filter:brightness(0) invert(.9)}
.nw2-now-summary{font-size:15px;line-height:1.5;color:#EAF1FB;border-top:1px solid var(--nw-now-line);padding-top:12px}
.nw2-now-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nw2-now-stats span{display:block;font-size:13px;color:var(--nw-now-ink-2)}
.nw2-now-stats strong{display:block;font-size:17px;font-weight:700}

/* Alerts */
.nw2-alert{display:flex;gap:10px;align-items:flex-start;background:var(--nw-warn-bg);border:1px solid var(--nw-warn-line);border-radius:14px;padding:12px 14px;color:var(--nw-warn-ink)}
.nw2-alert svg{flex:none;margin-top:2px;color:var(--nw-warn-icon)}
.nw2-alert p{font-size:14px;line-height:1.45}

/* Cards */
.nw2-card{background:var(--nw-surface);border:1px solid var(--nw-line);border-radius:18px;padding:16px}
.nw2-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.nw2-card-head h2,.nw2-h2{font-size:17px;font-weight:700;line-height:1.3}
.nw2-h2{margin-bottom:10px !important}

/* Hourly strip */
.nw2-hours{list-style:none;margin:0 -8px;padding:0 4px;display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.nw2-hours li{flex:1 0 64px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:14px}
.nw2-hours li.is-now{background:var(--nw-accent-soft)}
.nw2-h-time{font-size:13px;font-weight:600;color:var(--nw-ink-2);white-space:nowrap}
.nw2-h-temp{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.nw2-h-pop{font-size:12px;font-weight:600;color:var(--nw-rain)}

/* Daily list */
.nw2-days{list-style:none;margin:0;padding:0}
.nw2-days li+li{border-top:1px solid var(--nw-line-soft)}
.nw2-days a{display:grid;grid-template-columns:minmax(64px,1.2fr) 30px 40px 36px minmax(60px,2fr) 36px;align-items:center;gap:8px;min-height:52px;text-decoration:none;color:var(--nw-ink)}
.nw2-days a:hover .nw2-d-day{color:var(--nw-accent)}
.nw2-d-day{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden}
.nw2-d-short{display:none}
@media (max-width:480px){.nw2-d-full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.nw2-d-short{display:inline}}
.nw2-d-pop{font-size:12px;font-weight:600;color:var(--nw-rain);text-align:right}
.nw2-d-lo{font-size:15px;color:var(--nw-ink-2);text-align:right;font-variant-numeric:tabular-nums}
.nw2-d-hi{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.nw2-d-bar{position:relative;height:6px;border-radius:3px;background:var(--nw-line)}
.nw2-d-bar span{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#60A5FA,#F59E0B)}

/* Details grid */
.nw2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nw2-tile{background:var(--nw-surface);border:1px solid var(--nw-line);border-radius:var(--nw-r-md);padding:14px;display:flex;flex-direction:column;gap:2px;min-height:92px}
.nw2-tile span{font-size:13px;font-weight:600;color:var(--nw-ink-2)}
.nw2-tile strong{font-size:20px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.nw2-tile small{font-size:13px;color:var(--nw-ink-2)}

/* Units */
.nw2-units{display:flex;flex-wrap:wrap;gap:6px}
.nw2-units button{min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--nw-line);background:var(--nw-surface);color:var(--nw-ink-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.nw2-units button.active{background:var(--nw-ink);border-color:var(--nw-ink);color:var(--nw-surface)}

/* Map */
.nw2-mapbtn{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;border:1px solid var(--nw-line);background:var(--nw-accent-soft);color:var(--nw-accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.nw2 .map-content{display:none;margin-top:10px}
.nw2 .map-content.show{display:block}
.nw2 #weatherMap{height:320px;border-radius:14px;overflow:hidden}
.nw2 .map-layer-controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.nw2 .map-btn{min-height:40px;padding:0 12px;border-radius:20px;border:1px solid var(--nw-line);background:var(--nw-surface);color:var(--nw-ink);font:inherit;font-size:13px;cursor:pointer}
.nw2 .map-btn.active{background:var(--nw-ink);color:var(--nw-surface);border-color:var(--nw-ink)}

/* FAQ + guide */
.nw2-faq details,.nw2-guide{border-top:1px solid var(--nw-line-soft)}
.nw2-faq summary,.nw2-guide summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;font-size:15px;cursor:pointer;list-style:none}
.nw2-faq summary::-webkit-details-marker,.nw2-guide summary::-webkit-details-marker{display:none}
.nw2-faq summary::after,.nw2-guide summary::after{content:"+";font-size:20px;font-weight:400;color:var(--nw-ink-2)}
.nw2-faq details[open] summary::after,.nw2-guide[open] summary::after{content:"–"}
.nw2-faq p{font-size:14px;line-height:1.6;color:var(--nw-ink-2);padding-bottom:12px}
.nw2-guide .location-content{font-size:15px;line-height:1.65;color:var(--nw-ink);padding-bottom:12px}
.nw2-guide .location-content h2,.nw2-guide .location-content h3{font-size:16px;margin:16px 0 6px}
.nw2-guide .location-content p{margin:0 0 10px}

/* Links to other places */
.nw2-chips{display:flex;flex-wrap:wrap;gap:8px}
.nw2-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:22px;background:var(--nw-surface);border:1px solid var(--nw-line);color:var(--nw-ink);text-decoration:none;font-size:14px;font-weight:500}
.nw2-chips a:hover{border-color:var(--nw-accent);color:var(--nw-accent)}
.nw2-more{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;text-decoration:none}
.nw2-source{font-size:13px;color:var(--nw-ink-2);line-height:1.5}

/* Reserved ad slots: labelled, never inside the weather cards */
.nw2-ad{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:14px;background:var(--nw-surface);border:1px solid var(--nw-line);padding:8px;overflow:hidden}
.nw2-ad>span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--nw-ink-2)}
.nw2-ad ins.adsbygoogle{width:100%}
/* AdSense marks a slot it could not fill; drop the empty labelled box instead of showing a gap */
.nw2-ad:has(ins[data-ad-status^="unfill"]){display:none}

/* The /day/N hourly view reuses the older component; keep it inside the new column */
.nw2-main .container{padding:0;max-width:none}

@media (min-width:768px){
  .nw2{padding-top:20px}
  .nw2-titlebar h1{font-size:34px}
  .nw2-now{padding:26px 30px}
  .nw2-now-temp{font-size:104px}
}
@media (max-width:380px){
  .nw2-now-temp{font-size:72px}
  .nw2-now-icon{width:84px;height:84px}
  .nw2-days a{grid-template-columns:minmax(56px,1fr) 26px 34px 32px minmax(40px,1.5fr) 32px;gap:6px}
}

/* ---------- Homepage (v7) ---------- */
.nw2-home{max-width:880px}
.nw2-home-hero{padding:20px 0 8px;display:flex;flex-direction:column;gap:14px}
.nw2-home-hero h1{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.nw2-home-hero .nw2-sub{margin-top:-6px !important;font-size:16px}
.nw2-locate{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:16px;border:0;background:var(--nw-accent);color:#FFFFFF;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
html.dark .nw2-locate{color:#0B1220}
.nw2-locate:disabled{opacity:.7;cursor:progress}
.nw2-locate-msg{font-size:14px;color:var(--nw-ink-2)}
.nw2-home-sec{margin-top:22px}
.nw2-h3{font-size:15px;font-weight:700;margin:16px 0 8px}
.nw2-places{display:flex;flex-direction:column;gap:8px}
.nw2-places a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 16px;border-radius:16px;background:var(--nw-surface);border:1px solid var(--nw-line);color:var(--nw-ink);text-decoration:none;font-size:16px;font-weight:600}
.nw2-places a:hover{border-color:var(--nw-accent)}
.nw2-places svg{color:var(--nw-ink-2)}
.nw2-citygrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:640px){.nw2-citygrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nw2-citygrid a{display:flex;flex-direction:column;gap:4px;justify-content:center;min-height:64px;padding:10px 14px;border-radius:14px;background:var(--nw-surface);border:1px solid var(--nw-line);color:var(--nw-ink);text-decoration:none;font-size:15px;font-weight:600}
.nw2-citygrid a:hover{border-color:var(--nw-accent)}
.nw2-citytemp{display:flex;align-items:center;gap:6px}
.nw2-citytemp strong{font-size:18px}
html.dark .nw2-citytemp img{filter:brightness(0) invert(.9)}
.nw2-home-about p{font-size:15px;line-height:1.6;color:var(--nw-ink-2)}
.nw2-ad--short{min-height:120px;margin-top:22px}

/* ---------- Search box (header and homepage) ---------- */
.search-pill{height:44px;border:1px solid transparent}
.search-pill:focus-within{border-color:#1D4ED8;background:#FFFFFF;box-shadow:0 0 0 3px rgba(29,78,216,.15)}
html.dark .search-pill:focus-within{background:#111A2B;border-color:#7FA8FF}
.search-pill-input{font-size:16px}
.search-pill-input::-webkit-search-cancel-button{display:none}
.search-pill--hero{height:56px;max-width:none;margin:0;border-radius:16px;background:#FFFFFF;border:2px solid #1D4ED8;padding:0 16px}
html.dark .search-pill--hero{background:#111A2B;border-color:#7FA8FF}
.search-pill--hero .search-pill-input{font-size:17px}
.search-pill--hero .fav-list,.search-pill--hero .search-list{max-height:420px}
.search-list-item a,.fav-list-item a{min-height:48px}
.search-list-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.search-list-place{font-weight:600}
.search-list-region{font-size:13px;color:#4B5563}
html.dark .search-list-region{color:#A9B4C4}
.fav-list-item{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fav-list-item a{flex:1;display:flex;align-items:center}
.fav-list-icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:20px;color:#4B5563;background:transparent;border:0;cursor:pointer}

/* ---------- Mobile bottom bar ---------- */
.mobile-bottom-nav .nav-item{font-size:12px;font-weight:600;min-height:52px;justify-content:center;color:#4B5563}
.mobile-bottom-nav .nav-item svg{width:22px;height:22px}
.mobile-bottom-nav .nav-item.active{color:#1D4ED8}
html.dark .mobile-bottom-nav .nav-item{color:#A9B4C4}
html.dark .mobile-bottom-nav .nav-item.active{color:#7FA8FF}

/* ---------- Country & continent hubs (v7) ---------- */
.nw2-hub-sec{margin-top:22px}
.nw2-hub-lead{font-size:15px;color:var(--nw-ink-2);margin:-4px 0 12px !important;line-height:1.5}
.nw2-placegrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.nw2-placegrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nw2-placegrid a{display:flex;flex-direction:column;gap:4px;min-height:112px;padding:14px;border-radius:16px;background:var(--nw-surface);border:1px solid var(--nw-line);color:var(--nw-ink);text-decoration:none}
.nw2-placegrid a:hover{border-color:var(--nw-accent)}
.nw2-pg-name{font-size:15px;font-weight:700;line-height:1.3}
.nw2-pg-sub{font-size:13px;color:var(--nw-ink-2)}
.nw2-pg-now{display:flex;align-items:center;gap:8px;margin-top:auto}
.nw2-pg-now strong{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
html.dark .nw2-pg-now img{filter:brightness(0) invert(.9)}
.nw2-az{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--nw-line-soft)}
.nw2-az-letter{flex:none;width:28px;margin:10px 0 0;font-size:16px;font-weight:700;color:var(--nw-ink-2)}
.nw2-az .nw2-chips a{min-height:40px;font-size:14px}
.nw2-chips--dense{padding:6px 0 12px}
.nw2-chips--dense a{min-height:40px;font-size:14px}
.nw2-pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.nw2-pager a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--nw-line);background:var(--nw-surface);color:var(--nw-ink);text-decoration:none;font-weight:600}
.nw2-pager a[aria-current="page"]{background:var(--nw-ink);border-color:var(--nw-ink);color:var(--nw-surface)}
.nw2-pager span{align-self:center;color:var(--nw-ink-2)}
.nw2-countrylist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.nw2-countrylist a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:0 14px;border-radius:14px;background:var(--nw-surface);border:1px solid var(--nw-line);color:var(--nw-ink);text-decoration:none;font-weight:600}
.nw2-countrylist a:hover{border-color:var(--nw-accent)}
.nw2-countrylist small{font-weight:500;font-size:13px;color:var(--nw-ink-2);white-space:nowrap}