/* =========================================================
   Brand theme + tokens
   ========================================================= */
:root{
  --brand-dark:    #072B44;
  --brand-primary: #0B3D60;
  --brand-accent:  #C62828;
  --brand-bg:      #e9e9e9;

  /* Koble Bootstrap til din verdi */
  --bs-body-bg: var(--brand-bg);

  /* Bootstrap hooks */
  --bs-primary:          var(--brand-primary);
  --bs-danger:           var(--brand-accent);
  --bs-link-color:       var(--brand-primary);
  --bs-link-hover-color: #062a41;

  /* “Chip” (småbokser) */
  --chip-bg:     #c7ced8;
  --chip-border: #dbe1ea;
  --chip-title:  .78rem;
  --chip-value:  1.05rem;

  /* Tekstfarger for lys bakgrunn */
  --text-strong: #0f172a;
  --text-med:    #5b6575;
  --text-soft:   #6c757d;
}

body{ background: var(--brand-bg) !important; }

/* =========================================================
   Navbar
   ========================================================= */
.navbar{
  background: linear-gradient(-90deg, var(--brand-dark), rgb(0,133,228));
}
.navbar .nav-link{ color: rgba(255,255,255,.85); }
.navbar .nav-link.active,
.navbar .nav-link:hover{ color:#fff; }

.navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Brand lockup (logo + tekst) */
.brand-lockup{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; letter-spacing:.2px; }
.brand-lockup img{ height:34px; width:auto; display:block; filter:drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.brand-lockup .brand-text{ color:#fff; font-size:1.15rem; line-height:1; }

@media (max-width:575.98px){
  .brand-lockup img{ height:28px; }
  .brand-lockup .brand-text{ font-size:1rem; }
}

/* =========================================================
   Cards, knapper, smådetaljer
   ========================================================= */
.card{ background: #ffffffee; border:0; box-shadow:0 6px 20px rgba(7,43,68,.08); border-radius:1rem; }

.btn-primary{ background:var(--brand-primary); border-color:var(--brand-primary); }
.btn-primary:hover{ background:#082e48; border-color:#082e48; }

.accent-dot{ display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:var(--brand-accent); margin-right:.4rem; }

.support-btn{
  position:fixed; bottom:20px; right:20px; z-index:1050;
  background-color:#ffdd00; color:#000;
  padding:10px 18px; border-radius:50px; font-weight:bold; font-size:14px;
  text-decoration:none; display:flex; align-items:center; gap:6px;
  transition: background-color .2s, transform .2s;
}
.support-btn:hover{ background-color:#ffc107; transform:scale(1.05); }

/* =========================================================
   Felles “chip” (småbokser) – BRUKES OVERALT
   ========================================================= */
.chip{
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  border-radius:12px;
  padding:.55rem .75rem;
  color:var(--text-strong);
}
.chip .title{ font-size:var(--chip-title); line-height:1.05; color:var(--text-med); font-weight:500; display:block; }
.chip .value{ font-size:var(--chip-value); line-height:1.05; font-weight:700; color:var(--text-strong); }

/* Gjenbruk eksisterende markup: gi “badge”-ene chip-look */
.mini-cards .badge,
#rainCard .badge,
.wind-box{
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  border-radius:12px;
  color:var(--text-strong);
}

/* Badge-padding og radius for mini-cards og regn-badger */
.mini-cards .badge,
#rainCard .badge{ padding:.45rem .7rem; }

/* =========================================================
   Vindhjul + info-bokser
   ========================================================= */
.wind-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:.8rem;
  align-items:center;
}
@media (max-width:768px){
  .wind-layout{ grid-template-columns:1fr; }
  .wind-center{ order:-1; } /* hjulet først på mobil */
}
.wind-side{ display:grid; gap:.8rem; }
.wind-center{ display:flex; justify-content:center; }

/* Selve boksene rundt hjulet */
.wind-box{ padding:.7rem .9rem; min-width:130px; }
.wb-title{ font-size:var(--chip-title); color:var(--text-med); }
.wb-value{ font-size:var(--chip-value); font-weight:700; color:var(--text-strong); }

/* Konverteringsliste – smal og høyrejustert */
.wb-lines{ display:flex; flex-direction:column; align-items:flex-end; gap:.15rem; }
.wb-lines div{ font-size:.88rem; line-height:1.05rem; color:var(--text-strong); }
@media (min-width:992px){
  .wind-side.left  .wind-box{ min-width:140px; }
  .wind-side.right .wind-box{ min-width:110px; }
}

/* Vind-dial */
.wind-dial{
  position:relative; width:220px; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(closest-side, #fff 68%, transparent 69%),
    radial-gradient(closest-side, #f8f9fa 0 70%, #e9ecef 71% 72%, transparent 73%),
    #fff;
  box-shadow: inset 0 0 0 1px #dee2e6;
}
.wind-dial .ticks{
  position:absolute; inset:6%; border-radius:50%;
  background: repeating-conic-gradient(#cfd4da 0 1deg, transparent 1deg 11.25deg);
  mask: radial-gradient(closest-side, transparent 78%, #000 79%);
}
.wind-dial .needle-svg{ position:absolute; inset:0; pointer-events:none; }
.wind-dial .center{
  position:absolute; inset:24% 24%; background:#fff; border-radius:50%;
  box-shadow:0 0 0 1px #e9ecef;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.wind-dial .nums{ display:flex; align-items:baseline; gap:.5rem; font-size:2rem; line-height:1; }
.wind-dial .nums span{ min-width:2ch; text-align:center; }
.wind-dial .sep{ color:#adb5bd; font-weight:300; }
.wind-dial .labels{ display:flex; gap:2.4rem; margin-top:.1rem; font-size:.8rem; color:var(--text-soft); }
.wind-dial .dir{ margin-top:.35rem; font-size:1rem; color:#495057; }
.wind-dial .cardinal{ position:absolute; font-weight:600; color:var(--text-soft); }
.wind-dial .n{ left:50%; top:2%; transform:translateX(-50%); }
.wind-dial .s{ left:50%; bottom:2%; transform:translateX(-50%); }
.wind-dial .e{ right:2%; top:50%; transform:translateY(-50%); }
.wind-dial .w{ left:2%; top:50%; transform:translateY(-50%); }

/* SVG-pil for kompakt vindindikatorer andre steder */
.wind-arrow-wrap{ width:28px; height:28px; display:inline-block; }
.wind-arrow{ width:100%; height:100%; fill:currentColor; transform-origin:50% 50%; transition:transform .25s ease; will-change:transform; }

/* =========================================================
   Temperatur‑dial
   ========================================================= */
.temp-dial{
  position:relative; width:220px; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(closest-side, #fff 66%, transparent 67%),
    radial-gradient(closest-side, #f8f9fa 0 70%, #e9ecef 71% 72%, transparent 73%),
    #fff;
  box-shadow: inset 0 0 0 1px #dee2e6;
}
.temp-dial .ticks{
  position:absolute; inset:6%; border-radius:50%;
  background: repeating-conic-gradient(#cfd4da 0 1deg, transparent 1deg 10deg);
  mask: radial-gradient(closest-side, transparent 78%, #000 79%);
  transform: rotate(90deg); /* 0° = topp */
}
.temp-dial .temp-svg{ position:absolute; inset:0; pointer-events:none; }
.temp-dial .center{
  position:absolute; inset:24% 24%; background:#fff; border-radius:50%;
  box-shadow:0 0 0 1px #e9ecef;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.temp-dial .temp-now{ font-size:2.6rem; font-weight:600; line-height:1; }
.temp-dial .minmax{ display:flex; gap:1.6rem; margin-top:.2rem; color:var(--text-soft); }
.temp-dial .minmax .tmax{ color:#ef5350; font-weight:600; }
.temp-dial .minmax .tmin{ color:#42a5f5; font-weight:600; }
.temp-dial .humidity{ margin-top:.15rem; font-size:.95rem; color:#495057; }

/* =========================================================
   Regn‑kort
   ========================================================= */
.rain-card{
  position:relative; width:220px; aspect-ratio:1; border-radius:24px;
  box-shadow: inset 0 0 0 1px #dee2e6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px 10px;
}
.rain-card .buckets{ display:flex; gap:24px; align-items:flex-end; margin-top:4px; }
.rain-card .bucket{ width:80px; text-align:center; }
.rain-card .bucket-shell{
  position:relative; height:120px; border:3px solid #9aa0a6;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  border-top-left-radius:6px; border-top-right-radius:6px;
  overflow:hidden; background:#f8fbff;
}
.rain-card .bucket-fill{
  position:absolute; left:0; right:0; bottom:0; height:0%;
  background: linear-gradient(#90caf9,#42a5f5);
  transition: height .4s ease;
}
.rain-card .bucket-caption{ font-weight:600; margin-top:4px; font-size:.9rem; color:var(--text-soft); }
.rain-card .bucket-value{ font-weight:600; font-size:1.15rem; color:#0d47a1; }

/* =========================================================
   Trykk‑dial
   ========================================================= */
.press-dial{
  position:relative; width:220px; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(closest-side, #fff 66%, transparent 67%),
    radial-gradient(closest-side, #f8f9fa 0 70%, #e9ecef 71% 72%, transparent 73%),
    #fff;
  box-shadow: inset 0 0 0 1px #dee2e6;
}
.press-dial .ticks{
  position:absolute; inset:6%; border-radius:50%;
  background: repeating-conic-gradient(#cfd4da 0 1deg, transparent 1deg 10deg);
  mask: radial-gradient(closest-side, transparent 78%, #000 79%);
  transform: rotate(90deg);
}
.press-dial .press-svg text{ opacity:.80; }
.press-dial .center{
  position:absolute; inset:24%;
  transform: translateY(2%);
  background:#fff; border-radius:50%;
  box-shadow:0 0 0 1px #e9ecef;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.15rem;
}
.press-dial .press-now{ font-size:2.35rem; font-weight:700; line-height:1.05; }
.press-dial .unit{ font-weight:600; font-size:.85rem; color:var(--text-soft); margin-top:-.15rem; }
.press-dial .minmax{ gap:1.2rem; margin-top:.1rem; font-size:.95rem; }
.press-dial .pmax{ color:#ff7043; font-weight:600; }
.press-dial .pmin{ color:#29b6f6; font-weight:600; }

.press-trend{ width:100%; max-width:220px; text-align:center; }
.press-trend .trend-line{ display:flex; justify-content:center; align-items:center; gap:.35rem; font-weight:600; }
.press-trend .trend-ico{ font-size:1.05rem; }
.press-trend #pressTrendRate{ color:var(--text-soft); font-weight:500; }
.press-trend .trend-rule{ margin-top:.15rem; color:#495057; font-size:.92rem; }

/* =========================================================
   Dark mode (valgfritt)
   ========================================================= */
@media (prefers-color-scheme: dark){
  :root{
    --chip-bg:#1e2630;
    --chip-border:#2c3644;
    --text-strong:#e7edf6;
    --text-med:#aab4c2;
    --text-soft:#aab4c2;
  }
  .mini-cards .badge,
  #rainCard .badge,
  .wind-box{ color:var(--text-strong); }
}