/*!
Theme Name: Brandeniers starter
Theme URI: https://brandeniers.nl
Author: Brandeniers
Description: Een starter thama
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: brandeniers
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

html {
  overflow-x: hidden;
  word-wrap: break-word;
}

body {
  background: #fefbf7;
  font-family: "Lora";
}

:root {
  --container: 1320px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ol,
ul {
  box-sizing: border-box;
  padding-left: 1.5rem;
  margin-block: 1.5rem;
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: inherit;
}

.gform-theme--framework:where(:not(.gform_editor)) .gfield--type-section {
  border-block-end: unset !important;
}

.bestel-de-box {
  position: relative;
  z-index: 0;
  padding-bottom: 300px !important;
  /* Ruimte voor steden */
  background: radial-gradient(388.9% 146.46% at -6.28% -32.98%,
      #f6ead4 0%,
      #cb8469 45.19%,
      #6b4b54 100%);
  overflow: hidden;
  max-width: 100vw;
}

/* Gebouwen laag - repeat-x voor brede schermen */
.bestel-de-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-image: url("/wp-content/uploads/2026/01/SMA-DEV-Skyline-gebouwen.svg");
  background-size: auto 100%;
  background-position: bottom center;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: -1;
}

/* Toren laag - responsive met aspect-ratio */
.bestel-de-box::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 100%;
  height: auto;
  max-width: 600px;
  aspect-ratio: 590 / 720;
  background-image: url("/wp-content/uploads/2026/01/SMA-DEV-Skyline-toren.svg");
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}

@media all and (max-width: 980px) {
  .bestel-de-box::after {
    height: 150px;
  }

  .bestel-de-box::before {
    max-width: 300px;
  }

  .kies-een-stad-tekst {
    max-width: 80%;
  }

  .bestel-de-box {
    padding-bottom: 130px;
  }
}

.container-custom {
  flex: 1;
  padding-left: calc((100vw - var(--container)) / 2);
}

ul.list-checkbox {
  list-style: none;
  padding-left: 0;
}

ul.list-checkbox li {
  background-image: url("https://smaakverkenners.gaat-beyond-potential.nl/wp-content/uploads/2025/12/checkbox-li.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
  padding-left: 30px;
}

.gfield_label {
  font-family: "Lora" !important;
  font-weight: 700 !important;
  color: #1a5579 !important;
}

.ginput_container input[type="text"],
.ginput_container input[type="email"],
.ginput_container input[type="tel"],
.ginput_container textarea,
.ginput_container select {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid #f3f3f3 !important;
  border-radius: 5px !important;
  font-family: "Lora", serif !important;

  transition: all 0.3s ease;
  background-color: #f3f3f3 !important;
}

.ginput_container input[type="text"]:focus,
.ginput_container input[type="email"]:focus,
.ginput_container input[type="tel"]:focus,
.ginput_container textarea:focus,
.ginput_container select:focus {
  outline: none;
  border-color: #3e827a;
  box-shadow: 0 0 0 3px rgba(62, 130, 122, 0.1);
}

.gfield_required {
  color: #ee7b3e;
}

.gform_footer {
  text-align: center;
  padding-top: 20px;
  display: flex;
  justify-content: center !important;
}

.gform_image_button {
  background: transparent !important;
  box-shadow: none !important;
}

.gfield_error {
  background-color: #fff;
  border: 2px solid #ee7b3e;
  border-radius: 10px;
  padding: 15px;
}

.validation_error {
  color: #ee7b3e;
  font-family: "Voltaire", sans-serif;
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
  padding: 15px;
  background-color: rgba(238, 123, 62, 0.1);
  border-radius: 10px;
}

.validation_message {
  color: #ee7b3e;
  font-size: 14px;
  margin-top: 5px;
}

/* Radio buttons en checkboxes */
.gfield_radio li,
.gfield_checkbox li {
  margin-bottom: 10px;
}

.gfield_radio input[type="radio"],
.gfield_checkbox input[type="checkbox"] {
  margin-right: 10px;
}

#input_1_6 {
  display: flex;
  flex-direction: row;
}

.gfield-choice-input {
  background: transparent !important;
  border: 2px solid #266257 !important;
}

.gform_fields {
  row-gap: 27px !important;
}

#gform_submit_button_1 {
  background: transparent;
  border: none;
  box-shadow: none;
}

#gform_1>div.gform-footer.gform_footer.top_label {
  display: flex;
  justify-content: center;
}

/* ============================================
   Section Padding System
   ============================================ */

/* Basis section padding */
section {
  padding-top: 75px;
  padding-bottom: 75px;
}

/* Lichte sectie (default) */
section.section-light {
  padding-top: 75px;
  padding-bottom: 75px;
}

/* Donkere sectie */
section.section-dark {
  padding-top: 67px;
  padding-bottom: 67px;
}

/* Volledige hoogte sectie */
section.section-full-height {
  padding-top: 0;
  padding-bottom: 0;
}

/* Lichte sectie na licht sectie */
section.section-light+section.section-light {
  padding-top: 0px;
}

/* Lichte sectie na donkere sectie */
section.section-dark+section.section-light {
  padding-top: 67px;
}

/* Donkere sectie na lichte sectie */
section.section-light+section.section-dark {
  padding-top: 67px;
}

/* Sectie na volledige hoogte sectie */
section.section-full-height+section {
  padding-top: 75px;
}

section.section-full-height+section.section-dark {
  padding-top: 67px;
}

/* Sectie voor volledige hoogte sectie */
section.section-light+section.section-full-height,
section.section-dark+section.section-full-height {
  padding-bottom: 0;
}