/* Pagina-indeling van /energieweerbericht.html. De iconen, kanslabels en de
   mini-grafiek staan in styles.css, omdat de homepage-strook ze ook gebruikt.
   De hero komt uit vandaag.css (body.vandaag-page), net als op vandaag en morgen. */

/* Eén vaste, compactere afstand tussen de blokken dan de algemene 3rem. De
   blokken hieronder zetten zelf geen margin-top, anders gaat dat door elkaar. */
.weerbericht-page main > section + section { margin-top: 1.5rem; }

/* .container zet 2rem padding boven en onder. Hier komt dat bovenop de marge,
   dus de ruimte tussen de blokken verschilde per blok. De hero houdt zijn eigen
   padding, want die is zelf de kaart (vandaag.css). */
.weerbericht-page main > section.container:not(.vandaag-hero) {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 760px) {
  .weerbericht-page main > section + section { margin-top: 1.1rem; }
}

.weer-kopkaart {
  padding: 1.4rem 1.5rem;
}

.weer-datum {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.weer-headline {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text);
}

.weer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.weer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.weer-chip--groen { color: #8be3b0; background: rgba(46, 204, 113, 0.12); }
.weer-chip--rood { color: #ff8a8a; background: rgba(255, 59, 59, 0.13); }
.weer-chip--rood .wi-risico { animation: wi-puls 1.5s ease-in-out infinite; }

/* Vandaag en morgen */
.weer-uitgelicht {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.weer-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem 1.3rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: var(--bg-card);
  animation: weer-op 0.5s ease both;
}

.weer-kaart + .weer-kaart { animation-delay: 0.08s; }
.weer-kaart.risico--groot { border-color: rgba(255, 59, 59, 0.45); box-shadow: 0 0 26px rgba(255, 59, 59, 0.12); }
.weer-kaart.risico--middel { border-color: rgba(255, 176, 32, 0.3); }

.weer-kaart-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.weer-kaart-dag {
  font-family: "Doto", monospace;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--accent);
}

.weer-kaart-datum { font-size: 0.88rem; color: var(--muted); }

.weer-kaart-midden {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.weer-groot {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--weer-groen);
  font-variant-numeric: tabular-nums;
}

.weer-groot span {
  margin-left: 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}

.weer-onder { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--muted); }

.weer-feiten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.weer-feiten div {
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.weer-feiten dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.weer-feiten dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.weer-risico { margin: 0; }
.weer-tekst { margin: 0; line-height: 1.55; }
.weer-bron { margin: 0; font-size: 0.78rem; color: var(--muted); }

/* De komende week */

.weer-dagen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.weer-dag,
.weer-dag:visited {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: var(--bg-card);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  animation: weer-op 0.45s ease both;
  animation-delay: calc(var(--i, 0) * 55ms);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.weer-dag:hover,
.weer-dag:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
}

.weer-dag.risico--groot { border-color: rgba(255, 59, 59, 0.4); }

.weer-dag-naam {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--muted);
}

.weer-dag-prijs {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--weer-groen);
  font-variant-numeric: tabular-nums;
}

.weer-dag-prijs small { margin-left: 0.15rem; font-size: 0.7rem; color: var(--muted); }
.weer-dag-tijd { font-size: 0.78rem; color: var(--muted); }

.weer-dag-avond {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.weer-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Per dag uitgelegd */

.weer-regel {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 240px;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  scroll-margin-top: 90px;
}

.weer-regel .wi { width: 52px; height: 52px; }
.weer-regel h3 { margin: 0 0 0.3rem; font-size: 1.02rem; }
.weer-regel p { margin: 0 0 0.5rem; line-height: 1.5; color: var(--muted); }
.weer-regel:target { background: rgba(255, 255, 255, 0.03); border-radius: 12px; }

/* Uitleg, verder en delen */
.weer-uitleg h2 + p { margin-top: 0.5rem; }
.weer-uitleg .risico-stip { margin-right: 0.35rem; }

.weer-verder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.weer-verder-item,
.weer-verder-item:visited {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: var(--bg-card);
  color: var(--muted);
  text-decoration: none;
  line-height: 1.45;
  font-size: 0.92rem;
  transition: border-color 0.2s ease;
}

.weer-verder-item strong { color: var(--text); }
.weer-verder-item:hover { border-color: rgba(255, 59, 59, 0.45); }
.weer-verder-item .heading-icon { color: var(--accent); flex: none; margin-top: 0.1rem; }

.share-btn.is-copied { border-color: var(--weer-groen); color: var(--weer-groen); }

@keyframes weer-op {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .weer-uitgelicht, .weer-verder { grid-template-columns: 1fr; }
  .weer-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weer-groot { font-size: 2.5rem; }
  .wi--groot { width: 76px; height: 76px; }
  .weer-dagen {
    grid-auto-flow: column;
    grid-auto-columns: 104px;
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scroll-snap-type: x mandatory;
  }
  .weer-dag { scroll-snap-align: start; }
  .weer-regel { grid-template-columns: 44px minmax(0, 1fr); }
  .weer-regel .wi { width: 42px; height: 42px; }
  .weer-regel .spark { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .weer-kaart, .weer-dag, .weer-chip--rood .wi-risico { animation: none !important; }
}