/* CSS Document */



:root {

  /* #010e1f */

  /* --color-primary: #7bcbb2;  */
  --color-primary: #80D8C3; 
  /* --color-primary-rba: 123, 203, 178; */
  --color-primary-rba: 128, 216, 195;

  --color-primary-darker: #55a58d;


  --color-background-dark:#09182a;
  --color-background-dark-rba:9, 24, 42;

  --color-background-dark-darker:#010a1b;

  --color-secondary: #4DA8DA; 
  /* --color-secondary-dark: #006433;  */

  /* --color-tertiary: #9747FF;  */
  /* --color-quaternary: #E6D530;  */


  --color-font-light: #FCFFFF;
  --color-font-dark: #202525;

  --color-white: #FCFFFF;
  --color-true-white: #FFF;
  --color-black: #202525;
  --color-true-black: #000;
  /* --color-black-rba: 0,0,0; */

  --color-grey: var(--color-black);
  /* --color-grey-30 : #bbbbbe;
	--color-grey-40 : #d1d1d4;
	--color-grey-60 :	#8f9092	; */

  --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;
  /* ierse vlag oranje */
  --color-accent-darker: #cb6600;


  /* --box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); */
  --box-shadow: 0px 4px 10px rgba(var(--color-primary-rba), 0.6);
  --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: "Inter", sans-serif; */
  --font-heading:"Oxanium", sans-serif;
  --font-text:"Nunito", sans-serif;
  /* --font-text:"Oxanium", 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)) !important;
  grid-template-rows: auto !important;
  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 !important;
}

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

/* 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;
}