/* =========================
   HSV GIANTS – FOYS THEMA
   ========================= */

:root {
  --giants-black: #000000;
  --giants-white: #ffffff;
  --giants-red: #ff2a00;
  --giants-grey-light: #f4f4f4;
}

/* Basis */
body {
  background-color: var(--giants-white);
  color: var(--giants-black);
}

/* Headers */
h1,
h2,
h3,
h4,
h5 {
  color: var(--giants-red);
  text-transform: uppercase;
}

/* Navigatie / header */
header,
.nav,
nav {
  background-color: var(--giants-black) !important;
}

nav a,
header a {
  color: var(--giants-red) !important;
  font-weight: 600;
}

nav a:hover,
header a:hover {
  color: var(--giants-red) !important;
}

/* Actief menu-item */
nav a.active,
nav li.active a {
  color: var(--giants-red) !important;
}

/* Buttons (FOYS gebruikt vaak <a> als button) */
button,
.btn,
a.button {
  background-color: var(--giants-red) !important;
  color: var(--giants-white) !important;
  border: 2px solid var(--giants-red) !important;
  font-weight: bold;
  text-transform: uppercase;
}

button:hover,
.btn:hover,
a.button:hover {
  background-color: var(--giants-black) !important;
  border-color: var(--giants-black) !important;
}

/* Secties */
section {
  background-color: var(--giants-red);
}

section.alt,
.section-alt {
  background-color: var(--giants-grey-light);
}

/* Accent secties (zelf toe te passen in FOYS) */
.section-accent {
  background-color: var(--giants-red) !important;
  color: var(--giants-white) !important;
}

/* Cards / blokken */
.card,
.content-block {
  background-color: var(--giants-white);
  border: 1px solid #ddd;
}

.card h3 {
  color: var(--giants-red);
}

/* Links in content */
main a {
  color: var(--giants-red);
}

main a:hover {
  color: var(--giants-black);
}

/* Footer */
footer {
  background-color: var(--giants-black);
  color: var(--giants-white);
}

footer a {
  color: var(--giants-red);
}