/* ===== THEME SYSTEM: Daylight (default, light) + Night (dark) ===== */
:root{
  /* DAYLIGHT (default) */
  --page-bg-1:#eef3f9;
  --page-bg-2:#f6f9fc;
  --page-glow:rgba(47,123,240,0.10);
  --ink:#16335c;
  --ink-soft:#5e718c;
  --ink-faint:#8597ad;
  --surface:#ffffff;
  --surface-2:#f3f7fc;
  --surface-line:#e3e9f1;
  --surface-line-strong:#d2dceb;
  --brand:#2f7bf0;
  --brand-ink:#ffffff;
  --brand-deep:#1b4fb0;
  --header-bg:#ffffff;
  --header-ink:#41566f;
  --header-ink-strong:#16335c;
  --header-active-bg:#2f7bf0;
  --header-active-ink:#ffffff;
  --header-border:#e3e9f1;
  --header-shadow:0 1px 8px rgba(20,40,80,0.06);
  --header-hover:#eef3fb;
  --card-bg:#ffffff;
  --card-line:#e6ecf4;
  --card-shadow:0 2px 12px rgba(20,40,80,0.06);
  --card-shadow-hover:0 10px 26px rgba(20,40,80,0.12);
  --accent:#2f7bf0;
  --accent-soft:rgba(47,123,240,0.12);
  --foot-bg:#ffffff;
  --foot-line:#e6ecf4;
  --lang-bg:#ffffff;
  --lang-line:#eef2f7;
  --shadow:0 10px 28px rgba(20,40,80,0.08);
}
[data-theme="dark"]{
  /* NIGHT (the original dark palette) */
  --page-bg-1:#08111c;
  --page-bg-2:#0e1b2b;
  --page-glow:rgba(87,131,197,0.22);
  --ink:#eef5ff;
  --ink-soft:#aebed3;
  --ink-faint:#8aa0bb;
  --surface:rgba(255,255,255,0.06);
  --surface-2:rgba(255,255,255,0.09);
  --surface-line:rgba(255,255,255,0.12);
  --surface-line-strong:rgba(255,255,255,0.2);
  --brand:#79c8ff;
  --brand-ink:#04263f;
  --brand-deep:#0a3a66;
  --header-bg:linear-gradient(90deg,#11366b 0%,#0e1b2b 70%);
  --header-ink:#dbe8fb;
  --header-ink-strong:#ffffff;
  --header-active-bg:#79c8ff;
  --header-active-ink:#082038;
  --header-border:rgba(255,255,255,0.08);
  --header-shadow:0 4px 22px rgba(0,0,0,0.40);
  --header-hover:rgba(255,255,255,0.10);
  --card-bg:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.04));
  --card-line:rgba(255,255,255,0.1);
  --card-shadow:0 18px 40px rgba(0,0,0,0.28);
  --card-shadow-hover:0 22px 48px rgba(0,0,0,0.4);
  --accent:#79c8ff;
  --accent-soft:rgba(121,200,255,0.16);
  --foot-bg:#091324;
  --foot-line:rgba(255,255,255,0.06);
  --lang-bg:rgba(255,255,255,0.03);
  --lang-line:rgba(255,255,255,0.06);
  --shadow:0 10px 28px rgba(0,0,0,0.22);
}

:root{
  --bg-1: var(--page-bg-1);
  --bg-2: var(--page-bg-2);
  --panel: var(--surface);
  --panel-strong: var(--surface-2);
  --border: var(--surface-line);
  --border-strong: var(--surface-line-strong);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --accent: var(--accent);
  --shadow: var(--shadow);
  --radius-lg: 18px;
  --max-width: 1180px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* Sidans body/header/container styrs av wd48_new2.css.
   Väderkartans mörka tema börjar först i .page. */

a {
  color: inherit;
  text-decoration: none;
}

.page {
  width: 100%;
  margin: 12px 0 0;
  padding: 16px 12px 24px;
  color: var(--text);
  background:
    radial-gradient(circle at top, var(--page-glow), transparent 34%),
    radial-gradient(circle at bottom right, var(--page-glow), transparent 28%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border-radius: 16px;
  overflow: hidden;
}

/* === Anemometer-style full-width frosted topbar === */
.topbar-wrap {
  position: static;
  width: 100%;
  background: rgba(8, 17, 28, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* Scroll hints — only visible on mobile (rules in mobile breakpoint below) */
.topbar-wrap::after,
.lang-bar::after {
  content: "";
  display: none;
}
.topbar-wrap::before,
.lang-bar::before {
  content: "";
  display: none;
}
.topbar {
  width: min(calc(100% - 24px), var(--max-width));
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.nav-strip {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  width: 100%;
  border-radius: 8px;
}

.nav-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.nav-link:hover {
  background: var(--panel-strong);
}

.nav-link.active {
  background: var(--panel-strong);
}

/* === Language switcher (matches anemometer) === */

.brand-wrap {
  text-align: center;
  margin: 4px 0 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 8px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--surface-line);
  box-shadow: var(--shadow);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.brand-text {
  display: inline-block;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--header-ink,#16335c);
  text-shadow:
  0 1px 0 var(--surface),
  0 10px 24px rgba(0,0,0,0.32);
}

.brand-text .brand-soft {
  color: #dce9fb;
  font-weight: 700;
}

.brand-underline {
  width: min(320px, 72%);
  height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92), transparent);
  border-radius: 999px;
}

.search-panel {
  max-width: 860px;
  margin: 0 auto 14px;
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.search-input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  padding: 0 14px;
  font-size: 1rem;
  outline: none;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.search-input::placeholder {
  color: var(--muted);
}

.search-input:focus {
  border-color: rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.11);
}

/* === City autocomplete dropdown === */
.search-field {
  position: relative;
  min-width: 0;
}
.autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(12, 22, 36, 0.98);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.autocomplete-list.open { display: block; }
.autocomplete-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--surface);
  transition: background 0.12s ease;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.active { background: var(--panel-strong); }
.autocomplete-name { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.autocomplete-region { color: var(--muted); font-size: 0.82rem; }
.autocomplete-flag { font-size: 1rem; }
.autocomplete-empty {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-buttons.mobile {
  display: none;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.icon-btn:hover {
  transform: translateY(-1px);
  background: var(--panel-strong);
  border-color: var(--border-strong);
}

.status {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  min-height: 22px;
  margin: 4px 0 8px;
}

.location-name {
  text-align: center;
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 600;
  min-height: 24px;
  margin: 0 0 18px;
}
.location-name .loc-time {
  color: var(--muted);
  font-weight: 500;
  margin-left: 6px;
  white-space: nowrap;
}
.location-name .loc-sep {
  color: var(--muted);
  margin: 0 6px;
  opacity: 0.6;
}

.top-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom:0;
}

.cards-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.card {
  min-height: 88px;
  border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: var(--surface);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.card-label {
  color: var(--muted);

  font-size: 0.76rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-emoji {
  font-size: 1rem;
  opacity: 0.95;
}

.card-value {
  color: var(--text);

  margin: 10px 0 4px;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;

  word-break: break-word;
}

.card-sub {
  color: var(--muted);
  font-size: 0.82rem;
  min-height: 18px;
}

/* === Additional metrics panel (below map, above about) === */
.metrics-panel {
  margin-top: 28px;
}

.metrics-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 4px 14px;
  gap: 12px;
}

.metrics-head h2 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
  color: var(--text);
}

.metrics-head .metrics-sub {
  color: var(--muted);
  font-size: 0.86rem;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric-tile {
  min-height: 100px;
  border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.metric-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: var(--surface);
}

@media (max-width: 960px) {
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 420px) {
  .metrics-grid { grid-template-columns: 1fr 1fr; }
}

.map-panel {
  position: relative;
  min-height: 620px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#map {
  width: 100%;
  height: 100%;
  min-height: 620px;
  background: var(--surface-2);
}

.map-toolbar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: calc(100% - 24px);
}

.map-btn {
  padding: 10px 12px;
  border: 1px solid var(--card-line);
  border-radius: 10px;
  background: rgba(18,22,29,0.92);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.map-btn:hover {
  background: rgba(34,40,51,0.95);
}

.map-btn.active {
  background: #2f6fed;
  border-color: #2f6fed;
}

.map-note {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(18,22,29,0.92);
  border: 1px solid var(--surface);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  color: #c7cfdb;
  max-width: 260px;
  line-height: 1.45;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
}

.description {
  max-width: 920px;
  margin: 0 auto 20px;
  line-height: 1.65;
  color: var(--ink-soft);
  font-size: 15px;
  text-align: center;
}

.description h2 {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--ink);
}

.description a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  font-weight: 600;
}

.description a:hover {
  border-bottom-color: var(--accent);
}

.footer-nav {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.footer-link:hover {
  background: var(--panel-strong);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 20px;
  padding-bottom: 8px;
}

@media (max-width: 900px) {
  .top-layout {
    grid-template-columns: 1fr;
  }

  .cards-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .map-panel,
  #map {
    min-height: 520px;
  }
}

@media (max-width: 768px) {
  .page {
    width:100%;
    padding-top: 10px;
  }

  .topbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 12px;
  }
  .topbar::-webkit-scrollbar {
    display: none;
  }

  .nav-strip {
    flex-shrink: 0;
    width: auto;
  }

  .nav-link {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 12px;
    font-size: 0.82rem;
  }

  .lang-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
  }
  .lang-inner::-webkit-scrollbar { display: none; }

  /* Scroll hint — gradient fade + chevron, mobile only */
  .topbar-wrap::after,
  .lang-bar::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, rgba(8, 17, 28, 0) 0%, rgba(8, 17, 28, 0.55) 70%, rgba(8, 17, 28, 0.78) 100%);
    pointer-events: none;
    z-index: 2;
  }
  .topbar-wrap::before,
  .lang-bar::before {
    content: "›";
    display: block;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.7;
    pointer-events: none;
    z-index: 3;
    animation: scrollHintPulse 1.8s ease-in-out infinite;
    text-shadow: 0 0 6px rgba(8, 17, 28, 0.9);
  }
  @keyframes scrollHintPulse {
    0%, 100% { transform: translate(0, -50%); opacity: 0.5; }
    50% { transform: translate(4px, -50%); opacity: 1; }
  }

  .brand-wrap {
    margin: 4px 0 14px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 0.84rem;
  }

  .brand-text {
    font-size: clamp(1.45rem, 7vw, 2rem);
    letter-spacing: 0.09em;
  }

  .search-input {
    height: 44px;
  }

  .cards-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .card {
    min-height: 110px;
    padding: 10px 8px;
  }

  .card-label {
    color: var(--muted);

    font-size: 0.64rem;
  }

  .card-emoji {
    font-size: 0.9rem;
  }

  .card-value {
    color: var(--text);

    font-size: clamp(1rem, 4vw, 1.35rem);
    margin: 8px 0 4px;
  }

  .card-sub {
    font-size: 0.68rem;
    min-height: 14px;
  }

  .map-panel,
  #map {
    min-height: 620px;
  }

  .map-note {
    max-width: 220px;
    font-size: 11px;
  }

  .footer-nav {
    gap: 8px;
  }

  .footer-link {
    min-width: 105px;
    height: 36px;
    font-size: 0.84rem;
  }

}
/* === New site-wide footer === */
.site-footer-block {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  padding-top: 28px;
  color: var(--muted);
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  margin-bottom: 24px;
}
.footer-col h4 {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin-bottom: 8px;
}
.footer-col a {
  color: var(--muted);
  font-size: 0.88rem;
  transition: color 0.15s ease;
}
.footer-col a:hover {
  color: var(--text);
}
/* Community + social media row */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-legal a {
  color: var(--muted);
  font-size: 0.82rem;
  transition: color 0.15s ease;
}
.footer-legal a:hover {
  color: var(--text);
}
.footer-company {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
  line-height: 1.6;
}
.footer-company strong {
  color: var(--text);
  font-weight: 700;
}
.footer-credit {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footer-company {
    text-align: left;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

/* compact brand lockup in header */

@media(max-width:600px){}
/* theme toggle */
.theme-toggle{position:fixed;left:20px;bottom:24px;z-index:500;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--surface-line-strong);background:var(--surface);color:var(--ink-soft);font-size:1.3rem;cursor:pointer;font-family:inherit;box-shadow:var(--shadow,var(--card-shadow));transition:transform .15s ease,box-shadow .15s ease}
.theme-toggle:hover{transform:translateY(-2px) scale(1.05);border-color:var(--accent);color:var(--ink)}
.theme-toggle .tt-ico{font-size:1.2rem}
@media(max-width:600px){.theme-toggle{left:14px;bottom:16px;width:46px;height:46px;font-size:1.1rem}}
.lang-inner{align-items:center}

/* === Header layout: VWS hard-left, menu hard-right, one line === */
.topbar-wrap .topbar{width:100% !important;max-width:none !important;margin:0 !important;
  display:flex !important;align-items:center !important;justify-content:flex-start !important;
  gap:18px !important;padding:6px 18px !important;}
.nav-brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;text-decoration:none;flex:0 0 auto;line-height:1;padding:0;margin:0}
.nav-brand-mark{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:0.16em;
  color:var(--brand);text-shadow:none;padding:0;background:none;border:none;width:auto;height:auto;display:block}
.nav-brand-sub{font-family:'Poppins',sans-serif;font-weight:600;font-size:0.6rem;letter-spacing:0.20em;text-transform:uppercase;
  color:var(--header-ink);opacity:0.92;white-space:nowrap}
@media(max-width:600px){.nav-brand-sub{display:none;}}
.nav-strip{display:flex !important;align-items:center !important;justify-content:flex-start !important;
  flex:0 1 auto !important;width:auto !important;overflow:visible !important;gap:1px !important;flex-wrap:nowrap !important;margin-left:0 !important}
.nav-strip .nav-link{flex:0 0 auto !important;height:auto !important;padding:7px 9px !important;font-size:0.78rem !important;white-space:nowrap !important;border-radius:7px !important}
@media(max-width:1150px){.nav-strip .nav-link{padding:6px 7px !important;font-size:0.74rem !important}.topbar-wrap .topbar{gap:24px !important;padding:6px 14px !important}}
@media(max-width:980px){.topbar-wrap .topbar{flex-wrap:wrap !important;gap:8px !important;justify-content:center !important}.nav-strip{flex-wrap:wrap !important;justify-content:center !important;margin-left:0 !important}.nav-brand{align-items:center;margin:0 auto}}

/* map height (shorter, fits without scrolling) */
.map-panel{height:620px !important;min-height:620px !important}
#map{min-height:620px !important}
@media(max-width:760px){.map-panel{height:480px !important;min-height:480px !important}#map{min-height:480px !important}}

.top-layout{margin-bottom:10px !important}
.metrics-panel{margin-top:0 !important;padding-top:0 !important}

/* tighten metrics section directly under map */
.metrics-panel{margin-top:8px !important}
.metrics-head{margin:0 4px 10px !important}
.metrics-sub{text-transform:uppercase;letter-spacing:0.06em;font-size:0.72rem !important;font-weight:600;opacity:0.85}

/* Stack side cards vertically and fill map height (desktop only) */
@media(min-width:901px){
  .top-layout{align-items:stretch !important}
  .top-layout > .cards-panel{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-auto-rows:1fr !important;
    gap:10px !important;
    height:620px !important;
  }
  .top-layout > .cards-panel .card{min-height:0 !important;height:100% !important;justify-content:center !important}
}

@media(min-width:901px){
  .top-layout > .cards-panel .card{padding:8px 12px !important}
  .top-layout > .cards-panel .card-value{font-size:1.45rem !important;margin:4px 0 2px !important;line-height:1.1 !important}
  .top-layout > .cards-panel .card-label{font-size:0.74rem !important}
  .top-layout > .cards-panel .card-sub{font-size:0.68rem !important;line-height:1.25 !important}
}

/* location/time above search; search directly above map */
.location-name{margin-bottom:2px !important}
.search-panel{margin-bottom:10px !important}
.top-layout{margin-top:0 !important}

/* FLOATING REFRESH BUTTON */
.fab-refresh{position:fixed;right:20px;bottom:24px;z-index:500;width:52px;height:52px;border-radius:50%;background:var(--accent,#2f7bf0);color:#fff;border:none;box-shadow:0 6px 20px rgba(0,0,0,0.28);font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .15s ease;}
.fab-refresh:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 10px 26px rgba(0,0,0,0.32);}
.fab-refresh:active{transform:scale(0.94);}
.fab-refresh.spinning{animation:fabSpin .7s linear;}
@keyframes fabSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@media(max-width:600px){.fab-refresh{right:14px;bottom:16px;width:46px;height:46px;font-size:1.2rem;}}

/* === Homepage blog/news previews === */
.hp-posts{width:min(calc(100% - 24px),var(--max-width,1100px));margin:34px auto 0}
.hp-posts-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.hp-posts-head h2{font-size:1.4rem;margin:0;color:var(--ink);letter-spacing:-0.01em}
.hp-posts-all{color:var(--accent);font-size:0.9rem;font-weight:600;white-space:nowrap}
.hp-posts-all:hover{text-decoration:underline}
.hp-posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.hp-posts-grid{grid-template-columns:1fr}}
.hp-post-card{display:flex;flex-direction:column;gap:9px;padding:18px;border-radius:16px;
  border:1px solid var(--card-line);
  background:var(--card-bg);
  box-shadow:var(--card-shadow);transition:transform .16s ease,border-color .16s ease;text-decoration:none}
.hp-post-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--card-shadow-hover)}
.hp-pc-cat{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;font-weight:700;color:var(--accent)}
.hp-pc-title{font-size:1.05rem;line-height:1.35;margin:0;color:var(--ink);font-weight:700}
.hp-pc-sum{font-size:0.9rem;line-height:1.55;color:var(--ink-soft);margin:0;flex:1}
.hp-pc-meta{font-size:0.78rem;color:var(--ink-faint);font-weight:600}

/* === Compact About section (grid of topic blocks, same content) === */
.description.about-compact{width:min(calc(100% - 24px),var(--max-width,1100px));margin:40px auto 0}
.about-compact > h2:first-of-type{margin-top:0}
.about-compact > p{color:var(--ink-soft);font-size:0.95rem;line-height:1.7;margin:0 0 12px;max-width:none}
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;margin-top:8px}
@media(max-width:760px){.about-grid{grid-template-columns:1fr}}
.about-block h2{font-size:1.05rem;margin:0 0 6px;color:var(--ink)}
.about-block p{margin:0 0 8px;font-size:0.92rem;line-height:1.6;color:var(--ink-soft)}
.about-block a{color:var(--accent)}
.about-compact > h2{font-size:1.5rem;color:var(--ink);margin:0 0 6px}

.topbar-wrap{
  background:var(--header-bg) !important;
  border-bottom:1px solid var(--header-border) !important;
  box-shadow:var(--header-shadow) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
.topbar-wrap::before,.topbar-wrap::after{display:none !important;}
.topbar{
  display:flex !important;align-items:center !important;gap:12px !important;
  justify-content:flex-start !important;
}

/* nav links flow left, right after the mark */
.nav-strip{flex:1 1 auto;justify-content:flex-start !important;overflow:visible !important;flex-wrap:wrap;gap:1px;}
.nav-strip .nav-link{color:var(--header-ink) !important;font-weight:600 !important;}
.nav-strip .nav-link:hover{background:var(--header-hover) !important;color:var(--header-ink-strong) !important;}
.nav-strip .nav-link.active{background:var(--header-active-bg) !important;color:var(--header-active-ink) !important;}
@media(max-width:760px){
  .topbar{flex-wrap:wrap !important;justify-content:center !important;}
  .nav-strip{justify-content:center !important;}
}

/* === Definitive lang-bar / pills (template-matched, always visible) === */
.lang-bar{width:100%;background:var(--lang-bg) !important;border-bottom:1px solid var(--lang-line) !important;overflow:visible !important}
.lang-inner{width:min(calc(100% - 24px),var(--max-width));margin:0 auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 0;justify-content:center}
.lang-label{font-size:12px;font-weight:600;color:var(--ink-soft);opacity:.8;margin-right:4px;white-space:nowrap}
.lang-pill{height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--surface-line-strong);
  background:transparent;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  white-space:nowrap;font-family:inherit;display:inline-flex;align-items:center;transition:background .15s,color .15s,border-color .15s}
.lang-pill:hover{background:var(--accent-soft);color:var(--ink);border-color:var(--accent)}
.lang-pill.active{background:var(--accent) !important;color:#ffffff !important;border-color:var(--accent) !important}

/* === CANONICAL WHITE HEADER (theme-aware, wins over all leftovers) === */
.topbar-wrap{
  background:var(--header-bg) !important;
  border-bottom:1px solid var(--header-border) !important;
  box-shadow:var(--header-shadow) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
.topbar-wrap::before,.topbar-wrap::after{display:none !important;}
.nav-strip .nav-link, .topbar-wrap .nav-link{
  color:var(--header-ink) !important;font-weight:600 !important;background:transparent !important;
}
.nav-strip .nav-link:hover, .topbar-wrap .nav-link:hover{
  background:var(--header-hover) !important;color:var(--header-ink-strong) !important;
}
.nav-strip .nav-link.active, .topbar-wrap .nav-link.active{
  background:var(--header-active-bg) !important;color:var(--header-active-ink) !important;
}

.metric-tile-link{text-decoration:none;color:inherit;display:block}
.metric-tile-link:hover .metric-tile{border-color:var(--accent)}

.home-h1{text-align:center;font-size:1.5rem;font-weight:800;color:var(--ink,#16335c);margin:6px auto 6px;max-width:760px;line-height:1.25;letter-spacing:-0.01em}
.home-sub{text-align:center;font-size:0.95rem;color:var(--muted,#516079);max-width:680px;margin:0 auto 14px;line-height:1.55}
@media(max-width:600px){.home-h1{font-size:1.2rem}.home-sub{font-size:0.88rem}}

/* Remove leftover dark mobile scroll-hint shadow strip on lang-bar (white theme) */
.lang-bar::after{display:none !important;}
.lang-bar::before{display:none !important;}
.topbar-wrap::after{display:none !important;}
.topbar-wrap::before{display:none !important;}

/* compact home forecast */
.home-forecast{width:min(calc(100% - 24px),1100px);margin:8px auto 4px;padding:0}
.hf-title{font-size:1.15rem;font-weight:800;color:var(--ink,#16335c);margin:0 0 12px;text-align:center}
.hf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:600px){.hf-grid{grid-template-columns:repeat(3,1fr)}}
.hf-day{background:var(--surface,#fff);border:1px solid var(--surface-line,#e3e9f1);border-radius:14px;padding:14px 8px;text-align:center;box-shadow:0 4px 14px rgba(20,40,80,0.06)}
.hf-day .hf-dow{font-weight:700;color:var(--ink,#16335c);font-size:0.85rem}
.hf-day .hf-ico{font-size:1.7rem;margin:6px 0;line-height:1}
.hf-day .hf-hi{font-weight:800;color:var(--ink,#16335c);font-size:1.05rem}
.hf-day .hf-lo{color:var(--ink-soft,#5e718c);font-size:0.85rem;margin-left:3px}
.hf-day .hf-pop{font-size:0.72rem;color:var(--accent,#2f7bf0);font-weight:700;margin-top:3px}
.hf-loading{grid-column:1/-1;color:var(--ink-soft,#5e718c)}
.hf-cta{display:block;text-align:center;margin:14px auto 6px;color:var(--accent,#2f7bf0);font-weight:700;text-decoration:none;font-size:0.95rem}
.hf-cta:hover{text-decoration:underline}

/* === RESTORE original single-line scrolling mobile header (white theme) === */
@media(max-width:980px){
  .topbar-wrap .topbar,
  .topbar{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    justify-content:flex-start !important;
  }
  .topbar::-webkit-scrollbar{display:none;}
  .nav-strip{flex-wrap:nowrap !important;width:auto !important;justify-content:flex-start !important;flex-shrink:0;}
  .nav-link{flex:0 0 auto;}
  .lang-inner{flex-wrap:nowrap !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .lang-inner::-webkit-scrollbar{display:none;}
  .lang-pill{flex:0 0 auto;}

  /* scroll-hint fade + arrow, recoloured for the white header */
  .topbar-wrap, .lang-bar{position:relative;overflow:hidden;}
  .topbar-wrap::after, .lang-bar::after{
    content:"" !important; display:block !important;
    position:absolute; top:0; right:0; bottom:0; width:42px;
    background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 78%, rgba(255,255,255,0.96) 100%);
    pointer-events:none; z-index:4;
  }
  .topbar-wrap::before, .lang-bar::before{
    content:"\203A" !important; display:flex !important; align-items:center; justify-content:center;
    position:absolute; top:50%; right:6px; transform:translateY(-50%);
    width:22px; height:22px; border-radius:50%;
    background:var(--accent,#2f7bf0); color:#fff;
    font-size:15px; font-weight:800; line-height:1;
    box-shadow:0 2px 8px rgba(47,123,240,0.45);
    pointer-events:none; z-index:5;
    animation:navHintPulse 1.6s ease-in-out infinite;
  }
  @keyframes navHintPulse{0%,100%{transform:translateY(-50%) scale(1);opacity:0.92}50%{transform:translateY(-50%) scale(1.12);opacity:1}}
}
/* hide hints on desktop */
@media(min-width:981px){
  .topbar-wrap::after,.topbar-wrap::before,.lang-bar::after,.lang-bar::before{display:none !important;}
}

/* === UNIFORM NAV SIZING (authoritative, ensures identical header across all pages) === */
.topbar-wrap .nav-link{font-size:0.82rem !important;font-weight:600 !important;height:auto !important;padding:8px 11px !important;letter-spacing:0.005em;}
.topbar-wrap .nav-brand-mark{font-size:1.5rem !important;}
.topbar-wrap .nav-brand-sub{font-size:0.6rem !important;}
@media(max-width:1180px){.topbar-wrap .nav-link{font-size:0.8rem !important;padding:8px 10px !important;}}
@media(max-width:980px){.topbar-wrap .nav-link{font-size:0.82rem !important;padding:8px 12px !important;}}

.vws-util-bar{display:flex;justify-content:center;align-items:center;gap:10px;margin:10px auto 4px;padding:0}
.vws-util-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--surface-line-strong,var(--border,var(--surface-line)));background:var(--surface,var(--surface));color:var(--ink-soft,var(--text,inherit));font-size:1.15rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;box-shadow:var(--card-shadow,0 2px 8px rgba(0,0,0,0.14));transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.vws-util-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.22)}
.vws-util-btn:active{transform:translateY(0)}
.vws-util-btn.spinning .tt-ico,.vws-util-btn.spinning{animation:vwsSpin .7s linear}
@keyframes vwsSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(max-width:600px){.vws-util-btn{width:34px;height:34px;font-size:1.05rem;border-radius:9px}.vws-util-bar{gap:8px;margin:8px auto 2px}}

/* body-bakgrunden ärvs från wd48_new2.css */

/* Authoritative header uniformity — matches homepage, overrides per-page drift */
.topbar-wrap .topbar{
  width:100% !important;max-width:none !important;margin:0 !important;
  display:flex !important;align-items:center !important;justify-content:flex-start !important;
  gap:18px !important;padding:6px 18px !important;flex-wrap:nowrap !important;
  overflow-x:auto !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
}
.topbar-wrap .topbar::-webkit-scrollbar{display:none !important}
.nav-brand{flex:0 0 auto !important;display:inline-flex !important;align-items:center !important;white-space:nowrap !important}
.nav-strip{
  display:flex !important;align-items:center !important;justify-content:flex-start !important;
  flex:0 1 auto !important;width:auto !important;overflow:visible !important;
  gap:1px !important;flex-wrap:nowrap !important;margin-left:0 !important;padding-right:52px !important;
}
.nav-strip .nav-link{flex:0 0 auto !important;white-space:nowrap !important;padding-left:8px !important;padding-right:8px !important}
.nav-strip .nav-link:last-child{margin-right:48px !important}
/* Fade/arrow hints off — match homepage */
.topbar-wrap::after,.topbar-wrap::before,.lang-bar::after,.lang-bar::before{display:none !important}
.topbar-wrap{position:relative !important}
@media(max-width:600px){
  .topbar-wrap.vws-scrollable::after,.lang-bar.vws-scrollable::after{content:"" !important;display:block !important;position:absolute !important;top:0;right:0;bottom:0;width:34px !important;background:linear-gradient(to right, rgba(8,17,28,0) 0%, rgba(8,17,28,0.55) 70%, rgba(8,17,28,0.82) 100%) !important;pointer-events:none !important;z-index:2 !important}
  .topbar-wrap.vws-scrollable::before,.lang-bar.vws-scrollable::before{content:"\203A" !important;display:flex !important;align-items:center;justify-content:center;position:absolute !important;top:50% !important;right:5px !important;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:var(--accent,#2f7bf0) !important;color:#fff !important;font-size:15px !important;font-weight:700 !important;pointer-events:none !important;z-index:3 !important;animation:scrollHintPulse 1.8s ease-in-out infinite}
}
@media(max-width:980px){
  .topbar-wrap .topbar{gap:16px !important;padding:6px 12px !important}
}

.maplibregl-canvas{filter:brightness(1.45) contrast(1.02) saturate(1.08)}

.maplibregl-ctrl-attrib{background:rgba(10,20,35,.6)!important;font-size:9px!important;line-height:1.3!important;padding:1px 5px!important;border-radius:5px 0 0 0!important;margin:0!important}
.maplibregl-ctrl-attrib a{color:#7fa8d8!important}
.maplibregl-ctrl-attrib.maplibregl-compact{min-height:20px}
.maplibregl-ctrl-attrib-button{display:none!important}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0 0 0 0!important}
/* our redundant credit div - hide it since maplibre shows attribution */
.map-note{display:none!important}
.l-map-note{display:none!important}

.vws-wx-legend{position:absolute;bottom:34px;left:12px;z-index:5;background:rgba(10,20,35,.82);border:1px solid rgba(120,160,220,.22);border-radius:10px;padding:9px 12px;font-size:11px;color:#cfe4ff;display:none}
.vws-wx-legend.show{display:block}
.vws-wx-legend .lg-title{font-weight:700;margin-bottom:6px;letter-spacing:.4px}
.vws-wx-legend .lg-bar{height:9px;width:150px;border-radius:4px;margin-bottom:4px}
.vws-wx-legend .lg-scale{display:flex;justify-content:space-between;font-size:9.5px;color:#8fb2dc}

/* v0.8.29: ingen egen bakgrund på html-roten; wd48_new2.css/body styr hela sidbakgrunden */



/* ============================================================
AUTHORITATIVE HEADER STYLES — loaded LAST, wins over all
page-baked-in header CSS. Identical on every page.
============================================================ */
.hdr{display:flex !important;align-items:center !important;gap:14px !important;padding:6px 20px !important;margin:0 !important;font-size:16px !important;font-weight:400 !important;letter-spacing:normal !important;line-height:normal !important;background:linear-gradient(90deg,#0c1c34 0%,#0a1728 100%) !important;border-bottom:1px solid rgba(255,255,255,0.06) !important;position:relative !important;flex-wrap:nowrap !important;min-height:52px !important;box-sizing:border-box !important;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif !important}
.hdr-logo{height:38px !important;width:auto !important;flex:0 0 auto !important;display:block !important}
.hdr-nav{display:flex !important;align-items:center !important;gap:2px !important;margin:0 !important;padding:0 !important;flex:1 1 auto !important;min-width:0 !important;overflow:visible !important}
.hdr-nav a{padding:6px 10px !important;border-radius:8px !important;font-size:0.85rem !important;font-weight:500 !important;color:var(--ink-soft,#9fb2c9) !important;white-space:nowrap !important;text-decoration:none !important;font-family:inherit !important;line-height:1.4 !important;letter-spacing:normal !important}
.hdr-nav a:hover{color:var(--ink,#eef5ff) !important;background:rgba(255,255,255,0.05) !important}
.hdr-more{position:relative !important;display:inline-flex !important;align-items:center !important}
.hdr-more-btn{padding:6px 10px !important;border-radius:8px !important;font-size:0.85rem !important;font-weight:500 !important;color:var(--ink-soft,#9fb2c9) !important;white-space:nowrap !important;cursor:pointer !important;display:inline-flex !important;align-items:center !important;line-height:1.4 !important;text-decoration:none !important;font-family:inherit !important}
.hdr-more-btn:hover{color:var(--ink,#eef5ff) !important}
.hdr-more-menu{position:absolute !important;top:100% !important;right:0 !important;background:var(--card-2,#122641) !important;border:1px solid var(--card-line,rgba(255,255,255,0.12)) !important;border-radius:10px !important;box-shadow:0 12px 28px rgba(0,0,0,0.35) !important;padding:6px !important;display:none !important;flex-direction:column !important;min-width:170px !important;z-index:1000 !important}
.hdr-more-menu.open{display:flex !important}
.hdr-more-menu a{padding:8px 12px !important;border-radius:6px !important;font-size:0.85rem !important;color:var(--ink-soft,#9fb2c9) !important;white-space:nowrap !important;text-decoration:none !important;font-family:inherit !important}
.hdr-more-menu a:hover{background:rgba(255,255,255,0.06) !important;color:var(--ink,#eef5ff) !important}
.hdr-tools{display:flex !important;align-items:center !important;gap:7px !important;flex:0 0 auto !important;margin-left:auto !important}
.hdr-search-wrap{position:relative !important}
.hdr-search{display:flex !important;align-items:center !important;gap:7px !important;background:rgba(255,255,255,0.06) !important;border:1px solid rgba(255,255,255,0.12) !important;border-radius:999px !important;padding:6px 12px !important;width:170px !important;height:auto !important;max-width:170px !important;box-sizing:border-box !important}
.hdr-search input{background:none !important;border:none !important;color:var(--ink,#eef5ff) !important;font-size:0.85rem !important;outline:none !important;width:100% !important;height:auto !important;padding:0 !important;font-family:inherit !important;flex:1 1 auto !important;min-width:0 !important}
.hdr-search input::placeholder{color:var(--ink-faint,#6f849e) !important}
.hdr-btn{width:32px !important;height:32px !important;border-radius:50% !important;border:1px solid rgba(255,255,255,0.12) !important;background:rgba(255,255,255,0.05) !important;color:var(--ink-soft,#9fb2c9) !important;cursor:pointer !important;font-size:0.9rem !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;flex:0 0 auto !important;padding:0 !important;font-family:inherit !important}
.hdr-btn:hover{color:var(--ink,#eef5ff) !important;border-color:var(--brand,#2f7bf0) !important}
#hdrUnitBtn{width:auto !important;padding:0 9px !important;border-radius:16px !important;font-weight:600 !important;font-size:0.8rem !important}
.hdr-btn.spinning{animation:hdrspin .7s linear}
@keyframes hdrspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hdr-burger{display:none !important;background:none !important;border:none !important;color:var(--ink,#eef5ff) !important;font-size:1.4rem !important;cursor:pointer !important;padding:0 4px !important;line-height:1 !important;flex:0 0 auto !important;align-items:center !important;justify-content:center !important;height:32px !important;margin-top:-1px !important;order:99 !important}
/* Language bar — identical everywhere, left-aligned to logo */
.lang-bar{width:100% !important;font-size:16px !important;font-weight:400 !important;margin:0 !important;padding:0 !important;background:linear-gradient(90deg,#0b1a30,#0a1626) !important;border-bottom:1px solid rgba(255,255,255,0.06) !important;position:relative !important;overflow:hidden !important;box-sizing:border-box !important}
.lang-inner{max-width:none !important;width:auto !important;margin:0 !important;padding:7px 20px !important;display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:nowrap !important;overflow-x:auto !important;scrollbar-width:none !important;-ms-overflow-style:none !important;justify-content:flex-start !important;-webkit-overflow-scrolling:touch !important}
.lang-inner::-webkit-scrollbar{display:none !important}
.lang-label{font-size:12px !important;font-weight:600 !important;color:var(--ink-soft,#9fb2c9) !important;opacity:.8 !important;margin-right:4px !important;white-space:nowrap !important;text-transform:none !important;letter-spacing:normal !important;flex:0 0 auto !important;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif !important}
.lang-pill{height:28px !important;padding:0 11px !important;border-radius:999px !important;border:1px solid rgba(255,255,255,0.14) !important;background:rgba(255,255,255,0.04) !important;color:var(--ink-soft,#9fb2c9) !important;font-size:0.8rem !important;font-weight:500 !important;cursor:pointer !important;white-space:nowrap !important;flex:0 0 auto !important;display:inline-flex !important;align-items:center !important;gap:4px !important;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif !important;line-height:1 !important}
.lang-pill:hover{color:var(--ink,#eef5ff) !important;border-color:var(--brand,#2f7bf0) !important}
.lang-pill.active{background:#fff !important;color:#0a1524 !important;border-color:#fff !important}
/* Search suggestions dropdown */
.hdr-suggest{position:absolute !important;top:calc(100% + 4px) !important;left:0 !important;right:0 !important;background:var(--card-2,#122641) !important;border:1px solid var(--card-line,rgba(255,255,255,0.12)) !important;border-radius:10px !important;box-shadow:0 8px 24px rgba(0,0,0,0.3) !important;z-index:1000 !important;display:none;overflow:hidden;max-height:280px;overflow-y:auto;min-width:220px}
.hdr-suggest-item{padding:8px 12px !important;font-size:0.85rem !important;color:var(--ink,#eef5ff) !important;cursor:pointer !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-suggest-item:hover,.hdr-suggest-item.active{background:var(--brand,#2f7bf0) !important;color:#fff !important}
/* Mobile: hamburger nav */
@media(max-width:900px){
  .hdr-burger{display:inline-flex !important;align-items:center !important;justify-content:center !important;order:99 !important;margin-left:4px !important}
  .hdr-nav{position:absolute !important;top:100% !important;left:0 !important;right:0 !important;flex-direction:column !important;align-items:stretch !important;background:var(--card-2,#122641) !important;border-bottom:1px solid var(--card-line,rgba(255,255,255,0.12)) !important;box-shadow:0 12px 28px rgba(0,0,0,0.35) !important;padding:6px 0 !important;gap:0 !important;display:none !important;z-index:999 !important;max-height:calc(100vh - 100px) !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important}
  .hdr-nav.open{display:flex !important}
  .hdr-nav a{padding:11px 20px !important;border-radius:0 !important;font-size:0.95rem !important;width:100% !important}

  /* Mobile: flatten "More" — hide the button, show its items as normal nav links */
  .hdr-more-btn{display:none !important}
  .hdr-more{width:100% !important;display:block !important}
  .hdr-more-menu{position:static !important;display:flex !important;flex-direction:column !important;box-shadow:none !important;border:none !important;background:transparent !important;padding:0 !important;min-width:0 !important}
  .hdr-more-menu a{padding:11px 20px !important;border-radius:0 !important;font-size:0.95rem !important;width:100% !important;color:var(--ink-soft,#9fb2c9) !important}
  .hdr-more-menu a:hover{background:var(--surface,rgba(255,255,255,0.06)) !important;color:var(--ink,#eef5ff) !important}
  .hdr-logo{height:36px !important}
}
@media(max-width:520px){
  .hdr-search{width:96px !important;max-width:96px !important}
  .hdr-btn{width:30px !important;height:30px !important}
  .hdr-logo{height:32px !important}
  .hdr{gap:8px !important;padding:6px 12px !important}
}
/* Light theme header */
html[data-theme="light"] .hdr{background:linear-gradient(90deg,#ffffff 0%,#f0f4fa 100%) !important;border-bottom:1px solid rgba(15,35,65,0.10) !important}
html[data-theme="light"] .hdr-nav a,html[data-theme="light"] .hdr-more-btn{color:#41566f !important}
html[data-theme="light"] .hdr-nav a:hover{color:#16335c !important}
html[data-theme="light"] .hdr-btn{background:rgba(15,35,65,0.05) !important;border-color:rgba(15,35,65,0.15) !important;color:#41566f !important}
html[data-theme="light"] .hdr-search{background:rgba(15,35,65,0.05) !important;border-color:rgba(15,35,65,0.15) !important}
html[data-theme="light"] .hdr-search input{color:#16335c !important}
html[data-theme="light"] .lang-bar{background:linear-gradient(90deg,#f0f4fa,#e9eef5) !important;border-bottom:1px solid rgba(15,35,65,0.08) !important}
html[data-theme="light"] .lang-pill{background:rgba(15,35,65,0.05) !important;border-color:rgba(15,35,65,0.15) !important;color:#41566f !important}
html[data-theme="light"] .lang-pill.active{background:#2f7bf0 !important;color:#fff !important;border-color:#2f7bf0 !important}
html[data-theme="light"] .lang-label{color:#6b7d96 !important}
html[data-theme="light"] .hdr-nav{background:#ffffff !important}
html[data-theme="light"] .hdr-more-menu{background:#ffffff !important;border-color:#e3e9f1 !important}
html[data-theme="light"] .hdr-more-menu a{color:#41566f !important}
html[data-theme="light"] .hdr-burger{color:#16335c !important}
html[data-theme="light"] .hdr-suggest{background:#fff !important;border-color:#e3e9f1 !important}
html[data-theme="light"] .hdr-suggest-item{color:#16335c !important}

/* ===== AD CONTAINER OVERFLOW FIX (iOS Safari lets ad iframes stretch past viewport) ===== */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100vw}
.ad-slot{width:100%;box-sizing:border-box;overflow:hidden}
.ad-slot iframe,.ad-slot ins,.ad-slot > div{max-width:100% !important}
[id^="mediavine"],[data-mediavine]{max-width:100% !important;overflow:hidden !important;box-sizing:border-box !important}
[id^="mediavine"] iframe,[data-mediavine] iframe{max-width:100% !important}


/* === v0.8.25: gräns mellan Tjörnvädrets gemensamma layout och väderkartan ===
   body, .container, .page-title, hamburger-menyn och .footer-meta kommer från
   wd48_new2.css. Reglerna nedan gäller bara väderkartans eget innehåll. */
.tjorn-map-container > .page {
  width: 100%;
  max-width: none;
}
@media (max-width:700px) {
  .tjorn-map-container > .page {
    margin-top: 8px;
    border-radius: 12px;
    padding-left: 8px;
    padding-right: 8px;
  }
}







/* v0.8.31: behåll den mörka väderytan men ta bort endast
   den tomma mörka remsan högst upp och längst ner. */
.tjorn-map-container > .page {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* v0.8.32
   wd48_new2.css ger body > .container 24 px marginal upptill
   och 48 px nedtill. Neutraliseras endast på vaderkarta.php. */
body > .container.tjorn-map-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}




/* v0.8.34: rubriken är en separat wd48-ruta UTANFÖR den mörka väderytan. */
.tjorn-map-container > .tjorn-summary-box {
    margin: 0 0 14px;
    padding: 0;
}

.tjorn-map-container > .tjorn-summary-box .weather-heading {
    margin: 0;
}

.tjorn-map-container > .tjorn-summary-box .mobile-header {
    margin: 0;
}

.tjorn-map-container > .page {
    margin-top: 0;
}


/* v0.8.35
   1. Båda delarna i rubrikrutan ska ha exakt samma bredd.
   2. Återställ mörk luft ovanför temperaturkorten och kartan. */
.tjorn-map-container > .tjorn-summary-box,
.tjorn-map-container > .tjorn-summary-box .weather-heading,
.tjorn-map-container > .tjorn-summary-box .mobile-header {
    width: 100% !important;
    max-width: none !important;
}

.tjorn-map-container > .page {
    padding-top: 16px !important;
}


/* v0.8.36: transparensreglaget visas inte på mobil. */
@media (max-width: 700px) {
    .opacity-control {
        display: none !important;
    }
}