/* CSS Document */



:root {


/* --color-logo: #062207;  */
--color-logo: #004005; /* logo color */



/* --color-primary: #4CAF50;          
--color-primary-rba: 76, 175, 80;
--color-primary-darker: #062207;     */

--color-primary: #407940;          /* Lichte, frisse groen */
--color-primary-rba: 64, 121, 64;
--color-primary-darker: var(--color-logo);    /* Donker bosgroen voor diepte */


/* --color-background-dark: #c95600;  
--color-background-dark-rba: 201, 86, 0;
--color-background-dark-darker: #d25a02; */





/* --color-secondary: #1976D2;        
--color-secondary-rba: 25,118,210; */
--color-secondary: var(--color-primary);        
--color-secondary-rba: var(--color-primary-rba);



--color-white: #FAFAFA;
--color-white-rba: #250, 250, 250;
--color-true-white: #FFF;
--color-black: #202525;
--color-true-black: #000;

--color-font-light: var(--color-white);
--color-font-dark: #202525;


 

  --color-grey: var(--color-black);

  --color-grey-00: #f5f5f5;
  --color-grey-05: #e9e9e9;
  --color-grey-10: #e8e8ea;
  --color-grey-20: #dcdcdf;
  --color-grey-30: #bbbbbe;
  --color-grey-40: #d1d1d4;
  --color-grey-50: #a2a3a5;
  --color-grey-60: #8f9092;
  --color-grey-70: #737476;
  --color-grey-80: #575859;
  --color-grey-90: #3c3c3e;


  --color-accent: #FF8200;
  --color-accent-darker: #cb6600;


  --box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  /* --box-shadow: 0px 4px 10px rgba(var(--color-primary-rba), 0.6); */
  --border-radius: 0.5em;
  --layout_width_content: 1200px;

  --typography_size_html: 16px;
  --font-default-text-size: 16px;
  --font-default-text-size: 1.8rem;

  --font-default-text-color: #161414;

  /*	Fonts*/
  --font-heading: "Play", sans-serif;
  --font-text: "Play", sans-serif;


  --color-validate-neutral: #009fff;
  --color-validate-ok: #66d516;
  --color-validate-error: red;
}

/* -----------------------------------------------------
   Utility classes based on color variables
   ----------------------------------------------------- */

/* Background colors */
.bg-transparent {
  background-color: transparent !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-primary-dark {
  background-color: var(--color-primary-darker) !important;
}

.bg-accent {
  background-color: var(--color-accent) !important;
}

.bg-accent-dark {
  background-color: var(--color-accent-darker) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

.bg-true-white {
  background-color: var(--color-true-white) !important;
}

.bg-black {
  background-color: var(--color-black) !important;
}

.bg-true-black {
  background-color: var(--color-true-black) !important;
}

.bg-grey-00 {
  background-color: var(--color-grey-00) !important;
}

.bg-grey-05 {
  background-color: var(--color-grey-05) !important;
}

.bg-grey-10 {
  background-color: var(--color-grey-10) !important;
}

.bg-grey-20 {
  background-color: var(--color-grey-20) !important;
}

.bg-grey-30 {
  background-color: var(--color-grey-30) !important;
}

.bg-grey-40 {
  background-color: var(--color-grey-40) !important;
}

.bg-grey-50 {
  background-color: var(--color-grey-50) !important;
}

.bg-grey-60 {
  background-color: var(--color-grey-60) !important;
}

.bg-grey-70 {
  background-color: var(--color-grey-70) !important;
}

.bg-grey-80 {
  background-color: var(--color-grey-80) !important;
}

.bg-grey-90 {
  background-color: var(--color-grey-90) !important;
}

/* Text colors */
.text-primary {
  color: var(--color-primary) !important;
}

.text-primary-dark {
  color: var(--color-primary-darker) !important;
}

.text-accent {
  color: var(--color-accent) !important;
}

.text-accent-dark {
  color: var(--color-accent-darker) !important;
}

.text-white {
  color: var(--color-white) !important;
}

.text-true-white {
  color: var(--color-true-white) !important;
}

.text-black {
  color: var(--color-black) !important;
}

.text-true-black {
  color: var(--color-true-black) !important;
}

.text-grey-30 {
  color: var(--color-grey-30) !important;
}

.text-grey-60 {
  color: var(--color-grey-60) !important;
}

.text-grey-90 {
  color: var(--color-grey-90) !important;
}

/* Validation states */
.bg-validate-ok {
  background-color: var(--color-validate-ok) !important;
}

.bg-validate-error {
  background-color: var(--color-validate-error) !important;
}

.text-validate-ok {
  color: var(--color-validate-ok) !important;
}

.text-validate-error {
  color: var(--color-validate-error) !important;
}



/* -----------------------------------------------------
   SURF GRID SYSTEM – Flexible 12-column CSS Grid
   -----------------------------------------------------
   Usage:
   - Add `.surf-grid` to any container (e.g. <article>, <section>, etc.)
   - Use `.surf-col-X` for the number of columns (1 to 12)
   - Use `.surf-offset-X` to shift the element right (1 to 11)
   - Optional `.surf-container` centers content with max-width
----------------------------------------------------- */

/* Grid container – sets up 12 responsive columns */
.surf-grid {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); */
  grid-template-rows: auto;
  gap: 1rem;
  grid-auto-flow: row !important;
}

@media only screen and (max-width: 960px) {
  .surf-grid {
    /* grid-template-columns: 1fr !important; */
  }
}

/* Full-width container with max-width and horizontal padding */
.surf-container {
  max-width: 1200px !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 1rem !important;
}



/* Column Classes */
.surf-full-width {
  grid-column: span 12 !important;
}

.surf-default-container {
  grid-column: 3 / span 8 !important;
}

.surf-center-small {
  grid-column: 4 / span 7 !important;
}

@media only screen and (max-width: 960px) {
  .surf-center-small {
    grid-column: 3 / span 9 !important;
  }
}
@media only screen and (max-width: 760px) {
  .surf-center-small {
    grid-column: 2 / span 10 !important;
  }
}
@media only screen and (max-width: 590px) {
  .surf-center-small {
    grid-column: span 12 !important;
  }
}


.surf-breakout-left {
  grid-column: 2 / span 9 !important;
}

.surf-breakout-left-full {
  grid-column: 1 / span 10 !important;
}

.surf-breakout-right {
  grid-column: 3 / span 9 !important;
}

.surf-breakout-right-full {
  grid-column: 3 / span 10 !important;
}

.surf-double-breakout {
  grid-column: 2 / span 10 !important;
}
@media only screen and (max-width: 590px) {
  .surf-double-breakout {
      grid-column: 1 / span 12 !important; 
    }
}



.surf-double-breakout-full {
  grid-column: span 12 !important;
}

.surf-left-pane {
  grid-column: 1 / span 6;
}

.surf-right-pane {
  grid-column: 7 / span 6;
}

/* Row Classes */
.surf-row-1 {
  grid-row: 1 / 2 !important;
}

.surf-row-2 {
  grid-row: 2 / 3 !important;
}

.surf-row-3 {
  grid-row: 3 / 4 !important;
}

.surf-row-4 {
  grid-row: 4 / 5 !important;
}

.surf-row-5 {
  grid-row: 5 / 6 !important;
}

.surf-row-6 {
  grid-row: 6 / 7 !important;
}

.surf-row-7 {
  grid-row: 7 / 8 !important;
}

.surf-row-8 {
  grid-row: 8 / 9 !important;
}

.surf-row-9 {
  grid-row: 9 / 10 !important;
}

.surf-row-10 {
  grid-row: 10 / 11 !important;
}

.surf-row-11 {
  grid-row: 11 / 12 !important;
}

.surf-row-12 {
  grid-row: 12 / 13 !important;
}

.surf-row-13 {
  grid-row: 13 / 14 !important;
}

.surf-row-14 {
  grid-row: 14 / 15 !important;
}

.surf-row-15 {
  grid-row: 15 / 16 !important;
}

.surf-row-16 {
  grid-row: 16 / 17 !important;
}


/* Optional: Utility to center text */
.surf-text-center {
  text-align: center !important;
}