/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =========================================
   Bricks Custom CSS – Bodyfulness Groen/Oranje Variant
   ========================================= */

/* ---------- Kleurenvariabelen ---------- */
:root {
  --primary-color: #f37225;         /* Nieuw ornaje (basis) */
  --primary-hover: #338819;         /* Iets lichtere groene hoverkleur */
  --accent-color: #f37225;          /* Oranje accentkleur */
  --text-dark: #114332;             /* Donkere tekstkleur voor lichte vlakken */
  --text-light: #FFFFFF;            /* Witte tekst op groene achtergrond */
  --background-light: #FFFFFF;
  --background-primary: #338819;
}

/* ---------- Basisstijl ---------- */
body {
  background-color: var(--background-light);
  color: var(--text-dark);
  font-family: "Helvetica", Arial, sans-serif;
  line-height: 1.6;
}

/* ---------- Koppen ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
}

/* ---------- Containers ---------- */
/* Tekst wordt automatisch wit op groene achtergrond */
.section,
.bricks-section,
div[class*="bricks-container"] {
  background-color: var(--background-light);
  color: var(--text-dark);
}

.section.bg-primary,
.bricks-section.bg-primary,
div[class*="bricks-container"].bg-primary {
  background-color: var(--background-primary);
  color: var(--text-light);
}

/* ---------- Links ---------- */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover,
a:focus {
  color: var(--accent-color);
}

/* ---------- Knoppen ---------- */
button,
input[type="button"],
input[type="submit"],
.bricks-button {
  background-color: var(--primary-color);
  color: var(--text-light);
  font-family: "Helvetica", Arial, sans-serif;
  border: none;
  border-radius: 4px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.bricks-button:hover {
  background-color: var(--primary-hover);
  transform: scale(1.03);
}

/* ---------- Tekst op groene vlakken ---------- */
.bg-primary,
.has-background-primary {
  background-color: var(--background-primary);
  color: var(--text-light);
}

.bg-primary a {
  color: var(--text-light);
  text-decoration: underline;
}

.bg-primary a:hover {
  color: var(--accent-color);
}

/* ---------- Tekst op witte vlakken ---------- */
.bg-white,
.has-background-white,
.bg-light {
  background-color: var(--background-light);
  color: var(--text-dark);
}

/* ---------- Formuliervelden ---------- */
input[type="text"],
input[type="email"],
textarea,
select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  font-family: "Helvetica", Arial, sans-serif;
  color: var(--text-dark);
  background-color: var(--background-light);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-color);
  outline: none;
}

/* ---------- Footer ---------- */
footer {
  background-color: var(--background-primary);
  color: var(--text-light);
  padding: 40px 0;
}

footer a {
  color: var(--text-light);
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--accent-color);
}

/* ---------- Utility ---------- */
/* Witte tekst op groen en donkergroene tekst op wit */
.text-light-on-green {
  color: var(--text-light);
}

.text-dark-on-white {
  color: var(--text-dark);
}