/* ===========================
   Jouwradio - Valentijn skin
   Laad dit NA algemeen.css
   =========================== */

:root{
  /* Hoofdpalet (rood + roze accenten) */
  --jr-accent: #e11d48;       /* hoofd rood/roze (Rose 600-ish) */
  --jr-accent-2: #be123c;     /* donkerder voor hover */
  --jr-accent-soft: #fb7185;  /* zachte accentkleur */
  --jr-accent-bg: #fff1f2;    /* heel licht roze achtergrond */
  --jr-border: #fecdd3;       /* zachte border */
  --jr-shadow: rgba(225, 29, 72, .18);
}

/* Algemene accenten */
a { color: var(--jr-accent); }
a:hover, a:focus { color: var(--jr-accent-2); }

::selection{
  background: var(--jr-accent);
  color: #fff;
}

/* Subtiele “valentijn”-tint in achtergronden (zonder alles roze te maken) */
body{
  /* alleen heel licht, zodat wit + content clean blijft */
  background-color: var(--jr-accent-bg);
}

/* Knoppen / call-to-actions (de meest voorkomende patterns) */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.button,
a.btn,
.btn,
.button{
  background: var(--jr-accent);
  border-color: var(--jr-accent);
  color: #fff;
  box-shadow: 0 6px 18px var(--jr-shadow);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a.button:hover,
a.btn:hover,
.btn:hover,
.button:hover{
  background: var(--jr-accent-2);
  border-color: var(--jr-accent-2);
}

/* Focus states (toegankelijk + “on brand”) */
:where(a, button, input, select, textarea):focus{
  outline: 2px solid rgba(225, 29, 72, .35);
  outline-offset: 2px;
}

/* Form controls */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select{
  border-color: var(--jr-border);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus{
  border-color: var(--jr-accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .12);
}

/* Borders/lines die vaak “accent” gebruiken */
hr, .divider, .line{
  border-color: var(--jr-border);
}

/* Tags/badges/pills (als je site die heeft) */
.badge, .tag, .pill{
  background: rgba(225, 29, 72, .10);
  color: var(--jr-accent-2);
  border: 1px solid var(--jr-border);
}

/* Actieve menu/link states (algemene gok) */
nav a.active,
.menu a.active,
.nav a.active,
.current,
.is-active{
  color: var(--jr-accent-2) !important;
}

/* Als er ergens nog “Jouwradio oranje” hard-coded staat, override dat ook */
:where([style*="rgb(255,68,0)"], [style*="#ff4400"], [style*="#FF4400"]){
  /* werkt alleen op inline styles; voor echte CSS regels zie optie hieronder */
  filter: hue-rotate(320deg) saturate(1.15);
}