/*
Theme Name: VeiligKatwijk (Hello Elementor Child)
Theme URI: https://veiligkatwijk.nl
Description: Child theme voor VeiligKatwijk.nl. Bevat de posttypes, taxonomieen, crisisbalk en basisstijl.
Author: Gemeente Katwijk
Template: hello-elementor
Version: 1.0.0
Text Domain: veiligkatwijk
*/

/* =========================================================
   1. Design tokens
   Deze waarden komen overeen met de Global Colors in
   Elementor > Site Settings. Pas ze hier EN daar aan.
   ========================================================= */
:root{
  --vk-ink:#10294B;
  --vk-ink-2:#2A4A6E;
  --vk-paper:#F6F3EC;
  --vk-card:#FFFFFF;
  --vk-sea:#1B7CA6;
  --vk-sea-dark:#145F80;
  --vk-sea-soft:#DCEAF1;
  --vk-signal:#C4362A;
  --vk-signal-soft:#F8E4E0;
  --vk-sand:#E7DCC7;
  --vk-sand-soft:#F1EADC;
  --vk-groen:#4E7F35;
  --vk-mute:#5E6E7C;
  --vk-line:#E3DED2;
  --vk-radius:14px;
}

/* =========================================================
   2. Basis
   ========================================================= */
body{background:var(--vk-paper);color:var(--vk-ink)}

/* Zichtbare focus. Verwijder dit NIET: het is een WCAG-eis. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible{
  outline:3px solid var(--vk-sea);
  outline-offset:3px;
  border-radius:4px;
}

/* Skiplink naar hoofdinhoud */
.vk-skip{
  position:absolute;left:-9999px;top:0;z-index:99999;
  background:var(--vk-ink);color:#fff;padding:10px 16px;border-radius:0 0 6px 0;
}
.vk-skip:focus{left:0}

/* =========================================================
   3. Crisisbalk
   Wordt geplaatst door de child theme, niet door Elementor.
   ========================================================= */
.vk-crisis{background:var(--vk-signal);color:#fff}
.vk-crisis__inner{
  max-width:1180px;margin:0 auto;padding:14px 24px;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
}
.vk-crisis__pulse{
  width:11px;height:11px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:vk-pulse 2s infinite;
}
@keyframes vk-pulse{
  70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){.vk-crisis__pulse{animation:none}}
.vk-crisis__title{font-weight:800;font-size:18px}
.vk-crisis__text{flex:1;min-width:220px;font-size:15px;margin:0}
.vk-crisis__link{
  background:#fff;color:var(--vk-signal);font-weight:600;font-size:14px;
  padding:9px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;
}
.vk-crisis__link:hover{background:var(--vk-sand)}

/* =========================================================
   4. Componenten die in Elementor lastig te maken zijn
   Zet deze klassen op de widget onder Geavanceerd > CSS Classes.
   ========================================================= */

/* Toptaak-kaart: vk-toptaak op de container van de kaart */
.vk-toptaak{
  background:var(--vk-card);
  border:1px solid var(--vk-line);
  border-radius:var(--vk-radius);
  box-shadow:0 14px 30px -22px rgba(16,41,75,.5);
  transition:transform .18s ease, border-color .18s ease;
}
.vk-toptaak:hover{transform:translateY(-3px);border-color:var(--vk-sea)}

/* Kaart in een Loop Grid: vk-kaart op de loop item container */
.vk-kaart{
  background:var(--vk-card);
  border:1px solid var(--vk-line);
  border-radius:var(--vk-radius);
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease;
  height:100%;
}
.vk-kaart:hover{transform:translateY(-3px);border-color:var(--vk-sea)}

/* Themalabel als pil: vk-pil op een Post Info of Button widget */
.vk-pil,
.vk-pil a{
  display:inline-block;
  border:1.5px solid var(--vk-line);
  background:var(--vk-paper);
  border-radius:999px;
  padding:9px 18px;
  font-size:15px;font-weight:500;
  text-decoration:none;color:var(--vk-ink);
  transition:.18s ease;
}
.vk-pil a:hover{background:var(--vk-sea);border-color:var(--vk-sea);color:#fff}

/* Vraagbaak-citaat: vk-citaat op een Text Editor widget */
.vk-citaat{
  font-family:var(--e-global-typography-primary-font-family,inherit);
  font-size:clamp(21px,2.5vw,29px);
  font-weight:600;line-height:1.28;letter-spacing:-.01em;
}

/* Beeldloos vlak met kleur, voor artikelen zonder foto */
.vk-vlak-blauw{background:var(--vk-sea)}
.vk-vlak-groen{background:var(--vk-groen)}
.vk-vlak-zand{background:var(--vk-sand)}

/* =========================================================
   5. Toegankelijkheidscorrecties op Elementor-standaarden
   ========================================================= */

/* Elementor zet placeholders vaak te licht voor WCAG AA */
::placeholder{color:var(--vk-mute);opacity:1}

/* Zorg dat linktekst in lopende tekst herkenbaar is zonder kleur */
.vk-tekst a:not(.elementor-button){text-decoration:underline;text-underline-offset:2px}