/* =========================================
   OLDAMBT - CLEAN UI RESET + CARDS
   ========================================= */

/* =========================
   1. TYPOGRAFIE (rustig)
   ========================= */

h1 {
  margin-bottom: 8px;
}

h2 {
  margin-top: 32px;
  margin-bottom: 12px;
}

p {
  color: #374151;
}

/* =========================
   HOMEPAGE KAARTEN
   ========================= */

.plugin__categories .card,
.plugin__categories .card.card--compact,
.plugin__categories .tile {
  display: block;
  background: #ffffff;
  border: 1px solid #d6dde6;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

/* Hover + focus = duidelijke interactie */
.plugin__categories .card:hover,
.plugin__categories .card:focus-visible,
.plugin__categories .card.card--compact:hover,
.plugin__categories .card.card--compact:focus-visible,
.plugin__categories .tile:hover,
.plugin__categories .tile:focus-visible {
  border-color: #0067a8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Header / afbeelding netjes afgerond */
.plugin__categories .card__header {
  display: block;
  overflow: hidden;
}

/* Afbeelding zelf */
.plugin__categories .card__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Titel in kaart */
.plugin__categories .card__heading-3,
.plugin__categories h2,
.plugin__categories h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.35;
  color: #111827;
}

/* Body compact wat netter */
.plugin__categories .card__body--compact {
  padding: 16px 18px;
}

/* Linktekst in kaart niet los als standaard link tonen */
.plugin__categories .link__text {
  color: inherit;
  text-decoration: none;
}

/* Extra duidelijke focus voor toetsenbordgebruikers */
.plugin__categories .card:focus-visible,
.plugin__categories .card.card--compact:focus-visible,
.plugin__categories .tile:focus-visible {
  outline: 3px solid rgba(0, 103, 168, 0.45);
  outline-offset: 2px;
}

/* =========================
   MIJN ZAKEN
   ========================= */

.cases .card,
.cases .card.card--compact,
.cases .tile {
  display: block;
  background: #ffffff;
  border: 1px solid #d6dde6;
  border-radius: 12px;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 20px;
}

/* Hover + focus */
.cases .card:hover,
.cases .card:focus-within,
.cases .card.card--compact:hover,
.cases .card.card--compact:focus-within,
.cases .tile:hover,
.cases .tile:focus-within {
  border-color: #0067a8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* =========================
   HEADER (STATUSBALK FIX)
   ========================= */

.cases .card__header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  margin: 0 0 12px 0;
  padding: 10px 14px;
  font-size: 0.95rem;
}

/* =========================
   TITELS
   ========================= */

.cases .card__heading-3,
.cases h2,
.cases h3,
.cases .utrecht-heading-3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  line-height: 1.35;
  color: #111827;
}

/* =========================
   META INFO
   ========================= */

.cases p,
.cases .meta,
.cases .details,
.cases .card__body p {
  margin: 0 0 8px;
  color: #4b5563;
  line-height: 1.5;
}

/* Laatste tekstregel niet te veel ruimte */
.cases p:last-child {
  margin-bottom: 0;
}

/* =========================
   LINKS / CTA
   ========================= */

.cases a {
  color: #0067a8;
  text-decoration: none;
}

/* CTA-link zoals "Bekijk zaak" */
.cases a[href*="/zaken/"],
.cases a[href*="/mijn-aanvragen/"],
.cases a[href*="/zaak/"],
.cases .button,
.cases .link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-weight: 600;
}

/* =========================
   FOCUS
   ========================= */

.cases a:focus-visible,
.cases button:focus-visible {
  outline: 3px solid rgba(0, 103, 168, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================
   MIJN VRAGEN
   ========================= */

.contactmomenten .card,
.contactmomenten .card.card--compact,
.contactmomenten .tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #d6dde6;
  border-radius: 12px;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 20px;
  gap: 8px;
  min-height: 100%;
}

/* Hover + focus */
.contactmomenten .card:hover,
.contactmomenten .card:focus-within,
.contactmomenten .card.card--compact:hover,
.contactmomenten .card.card--compact:focus-within,
.contactmomenten .tile:hover,
.contactmomenten .tile:focus-within {
  border-color: #0067a8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Focus */
.contactmomenten a:focus-visible,
.contactmomenten button:focus-visible {
  outline: 3px solid rgba(0, 103, 168, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================
   8. TOEGANKELIJKHEID (BELANGRIJK)
   ========================= */

:focus-visible {
  outline: 3px solid rgba(0, 103, 168, 0.6);
  outline-offset: 2px;
}

/* =========================================
   VERBERG "Alle onderwerpen" knop (link)
   ========================================= */

a.button[href="/onderwerpen/"][aria-label="Alle onderwerpen"] {
  display: none !important;
}

/* =========================================
   VERBERG "Onderwerpen" toggle (button)
   ========================================= */

button.primary-navigation--toggle[aria-label="Onderwerpen"] {
  display: none !important;
}