/* Време Сутра — brand styling (Customizer → Additional CSS)
   Palette: deep sky blue #0B63B8, navy #07365F, sky tint #EAF4FF,
   sun amber #FFB703 (accent), ink #12212E, soft bg #F5FAFF. */

:root{
  --vs-blue:#0B63B8; --vs-navy:#07365F; --vs-sky:#EAF4FF;
  --vs-amber:#FFB703; --vs-ink:#12212E; --vs-bg:#F5FAFF; --vs-line:#CFE5F7;
}

body{ background:var(--vs-bg); color:var(--vs-ink); }
a{ color:var(--vs-blue); }
a:hover{ color:var(--vs-navy); text-decoration:underline; }
h1,h2,h3{ color:var(--vs-navy); letter-spacing:-.01em; }

/* Header / footer (theme chrome, generic selectors) */
header, .site-header{ background:linear-gradient(90deg,var(--vs-navy),var(--vs-blue)); }
header a, .site-header a{ color:#fff; }
footer, .site-footer{ background:var(--vs-navy); color:#DCEEFF; }
footer a, .site-footer a{ color:#fff; }

/* Navigation */
.vs-nav{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.8rem 0 1.2rem; }
.vs-nav a{ padding:.35rem .8rem; border:1px solid var(--vs-line); border-radius:999px;
  background:#fff; font-size:.92rem; text-decoration:none; }
.vs-nav a.current, .vs-nav a:hover{ background:var(--vs-blue); color:#fff; border-color:var(--vs-blue); }
.vs-crumb{ font-size:.88rem; color:#5B7183; margin:.4rem 0 .8rem; }
.vs-crumb a{ color:var(--vs-blue); }

/* Layout wrapper */
.vs-wrap{ max-width:880px; margin:0 auto; padding:0 1rem 2rem; }

/* AEO direct-answer block — the visual hero of every city page */
.vs-answer{ background:linear-gradient(180deg,#fff,var(--vs-sky));
  border:1px solid var(--vs-line); border-left:6px solid var(--vs-amber);
  border-radius:14px; padding:1rem 1.2rem; font-size:1.12rem; line-height:1.55;
  box-shadow:0 2px 10px rgba(7,54,95,.06); margin:0 0 1.2rem; }

/* Cards */
.vs-card{ background:#fff; border:1px solid var(--vs-line); border-radius:14px;
  padding:1rem 1.2rem; margin:0 0 1.2rem; box-shadow:0 2px 10px rgba(7,54,95,.05); }

/* Homepage tool */
.vs-tool{ background:linear-gradient(180deg,var(--vs-sky),#fff);
  border:1px solid var(--vs-line); border-radius:16px; padding:1.2rem; margin:0 0 1.2rem; }
.vs-tool select{ width:100%; max-width:420px; padding:.65rem .8rem; font-size:1rem;
  border:1px solid var(--vs-blue); border-radius:10px; background:#fff; color:var(--vs-ink); }
.vs-tool-summary{ margin-top:1rem; font-size:1.08rem; }

/* Forecast tables */
table{ width:100%; border-collapse:collapse; background:#fff; font-size:.95rem;
  border:1px solid var(--vs-line); border-radius:12px; overflow:hidden; }
thead th{ background:var(--vs-blue); color:#fff; text-align:left; padding:.55rem .7rem; font-weight:600; }
tbody td{ padding:.5rem .7rem; border-top:1px solid var(--vs-line); }
tbody tr:nth-child(even){ background:var(--vs-sky); }

/* City index */
.vs-gradovi{ columns:2; column-gap:2rem; }
@media (min-width:760px){ .vs-gradovi{ columns:3; } }
.vs-gradovi a{ display:block; padding:.22rem 0; }

/* Buttons */
button, .button, input[type="submit"]{ background:var(--vs-amber); color:#231900;
  border:0; border-radius:999px; padding:.6rem 1.3rem; font-weight:700; cursor:pointer; }
button:hover, .button:hover, input[type="submit"]:hover{ background:#F5A623; }

/* ------------------------------------------------------------------
   Homepage hero — [vreme_hero] (v1.2.0)
   Full-width blue gradient, huge white headline, search-bar city
   select, quick city pills and 4 live "tomorrow" cards for the big
   cities. Benchmarked against vremeradar / vremesrbija, but led by
   СУТРА (tomorrow) — which neither competitor leads with.
   ------------------------------------------------------------------ */
.vs-hero{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw);
  background:linear-gradient(135deg,var(--vs-blue) 0%,var(--vs-navy) 80%);
  color:#fff; padding:3rem 1rem 2.6rem; margin-bottom:1.6rem;
  border-radius:0 0 26px 26px; box-shadow:0 10px 30px rgba(7,54,95,.22); }
.vs-hero-inner{ max-width:1080px; margin:0 auto; }
.vs-hero-badge{ display:inline-block; background:var(--vs-amber); color:#231900;
  font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .8rem; border-radius:999px; margin:0 0 1rem; }
.vs-hero h1{ color:#fff; font-size:clamp(2rem,5.5vw,2.6rem); line-height:1.12;
  margin:0 0 .7rem; letter-spacing:-.015em; }
.vs-hero-sub{ color:rgba(255,255,255,.93); font-size:1.08rem; line-height:1.55;
  max-width:660px; margin:0 0 1.6rem; }

.vs-hero-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; }
.vs-hero-pills a{ color:#fff; text-decoration:none; font-size:.95rem;
  padding:.45rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.38); }
.vs-hero-pills a:hover{ background:var(--vs-amber); border-color:var(--vs-amber); color:#231900; }

.vs-hero-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:900px){ .vs-hero-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .vs-hero-cards{ grid-template-columns:1fr; } }
.vs-hero-card{ display:flex; flex-direction:column; gap:.2rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26);
  border-radius:16px; padding:1rem 1.1rem; color:#fff; text-decoration:none;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.vs-hero-card:hover{ background:rgba(255,255,255,.2); color:#fff; text-decoration:none; }
.vs-hero-card-city{ font-weight:700; font-size:1.02rem; letter-spacing:.01em; }
.vs-hero-card-cond{ font-size:1.18rem; line-height:1.35; }
.vs-hero-card-temps{ font-size:1rem; color:rgba(255,255,255,.92); }
.vs-hero-card-temps strong{ font-size:1.65rem; font-weight:800; color:#fff; }
.vs-hero-card-rain{ font-size:.9rem; color:rgba(255,255,255,.85); }
.vs-hero-note{ margin:1.4rem 0 0; font-size:.85rem; color:rgba(255,255,255,.75); }

/* ------------------------------------------------------------------
   Header city search — [vreme_search] (v1.3.0)
   Compact pill for the navy gradient header: translucent white field
   with white text; the opened dropdown options get dark text on white
   (native OS rendering). Amber "Тражи" button. Wraps below the other
   header items on narrow screens instead of breaking the layout.
   ------------------------------------------------------------------ */
.vs-search{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
  max-width:420px; margin:0; }
.vs-search select{ flex:1 1 180px; min-width:0; height:40px;
  padding:0 .9rem; font-size:.95rem; line-height:40px;
  border:1px solid rgba(255,255,255,.4); border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer; }
.vs-search select option{ background:#fff; color:var(--vs-ink); }
.vs-search-btn{ flex:0 0 auto; height:40px; padding:0 1.15rem;
  border:0; border-radius:999px; background:var(--vs-amber);
  color:#231900; font-weight:700; font-size:.95rem; cursor:pointer; }
.vs-search-btn:hover{ background:#ffc61a; color:#231900; }