/* =========================================================
   GEMEENTE OLDAMBT – STANDAARDSTIJLEN
   Inclusief: Liquid Glass + Hoveranimatie + Toegankelijkheid
   ========================================================= */


/* =========================
   UI-ELEMENTEN VERBERGEN
   ========================= */

/* Onderwerpen-knop en submenu */
button[title="Onderwerpen"] { display: none !important; }
button[title="Onderwerpen"] + ul.subpage-list { display: none !important; }

/* Zoekbalk */
.header nav.header__actions { display: none; }

/* "Alle onderwerpen" knoppen/clear links */
.oip-header-group .utrecht-heading-2 + .button,
.oip-header-group .utrecht-heading-2 + .flatpickr-clear,
.oip-header-group .utrecht-heading-4 + .button,
.oip-header-group .utrecht-heading-4 + .flatpickr-clear,
.oip-header-group .utrecht-paragraph + .button,
.oip-header-group .utrecht-paragraph + .flatpickr-clear {
  display: none;
}


/* =========================
   TYPOGRAFIE KLEUREN
   ========================= */
.utrecht-paragraph { color: #333; }

.utrecht-heading-1,
.utrecht-heading-2 {
  color: #0067A8;
}


/* =========================
   LIQUID GLASS LOOK
   ========================= */

/* Basis glazen kaarten */
a.card.card--compact,
a.card.card__description-card.card--stretch {
  display: block;
  position: relative;
  cursor: pointer;
  border-radius: 16px;
  transform-origin: center center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  will-change: transform, box-shadow;

  /* Liquid glass effect */
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Hover – iets meer helderheid en diepte */
a.card.card--compact:hover,
a.card.card__description-card.card--stretch:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px) saturate(200%);
  -webkit-backdrop-filter: blur(12px) saturate(200%);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* Focus (toetsenbord) */
a.card.card--compact:focus-visible,
a.card.card__description-card.card--stretch:focus-visible {
  outline: 3px solid #007bc0;
  outline-offset: 3px;
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

/* Active (muis ingedrukt) */
a.card.card--compact:active,
a.card.card__description-card.card--stretch:active {
  transform: translateY(-2px);
}

/* Schaduw niet afknippen door kolommen */
.column { overflow: visible; }

/* Tekst en inhoud */
.card__body,
.card__body--compact,
.card__header {
  color: #222;
}

/* Marges toegevoegd aan alle headers (geldt voor alle kleuren) */
.card__header {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

/* Glans-overlay bovenaan (subtiele highlight) */
a.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Randen netjes afgerond */
a.card.card--compact .card__header,
a.card.card--compact .card__body--compact,
a.card.card__description-card.card--stretch .card__body,
a.card.card__description-card.card--stretch .card__header {
  border-radius: inherit;
  overflow: hidden;
}


/* =========================
   RESPONSIVE & TOEGANKELIJKHEID
   ========================= */

/* Touch-apparaten: hover-effecten neutraliseren */
@media (hover: none) {
  a.card.card--compact:hover,
  a.card.card__description-card.card--stretch:hover {
    transform: none;
    box-shadow: none;
  }

  a.card.card--compact:hover .card__img--cover,
  a.card.card__description-card.card--stretch:hover .card__header img,
  a.card.card__description-card.card--stretch:hover .card__header .card__img--cover {
    transform: none;
  }
}

/* Minder beweging: respecteer voorkeuren gebruiker */
@media (prefers-reduced-motion: reduce) {
  a.card.card--compact,
  a.card.card__description-card.card--stretch,
  {
    transition: none;
  }
}


/* =========================
   BONUS: LIQUID GLASS KNOPPEN
   ========================= */

.button, a.button {
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #005b91;
  border-radius: 10px;
  padding: 0.6em 1.2em;
  font-weight: 500;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.button:hover, a.button:hover {
  background-color: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.6);
  color: #004a74;
}