/**
 * Zeeuwind - opmaak gebaseerd op zeeuwind.nl
 * Wordt alleen geladen bij templates/template-zeeuwind.php (zie lib/enqueue.php)
 */

@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/zeeuwind/Figtree-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #19AC8A;        /* Zeeuwind groen */
  --primary-dark: #128069;
  --accent: #FABA47;         /* Zeeuwind geel (knoppen) */
  --accent-dark: #F0A81F;
  --blue: #457298;
  --grey: #EDF1F5;
  --mint: #EAF7F3;
  --cream: #FCF1DC;
  --white: #fff;
  --text: #161616;
  --fontParagraph: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --fontHeader: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --fontLabel: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --radius: 16px;
}

* {
  font-family: var(--fontParagraph);
  color: var(--text);
}

/* ---------- Header met logo ---------- */

.template-zeeuwind header.entry-header {
  background-color: var(--white);
  font-family: var(--fontHeader);
  font-weight: 700;
  padding: unset;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid rgba(22, 22, 22, .08);
}

.zeeuwind-header-wrapper {
  width: 100%;
  max-width: min(1600px, calc(100vw - 48px));
  position: relative;
  padding: 20px;
}

.zeeuwind-header-wrapper .logo-wrapper img {
  max-width: 100%;
  max-height: 56px;
}

body,
footer#site-footer {
  background-color: var(--white);
}

/* ---------- Typografie ---------- */

.template-zeeuwind h1,
.template-zeeuwind h2,
.template-zeeuwind h3,
.template-zeeuwind h4,
.template-zeeuwind .gsection_title,
.template-zeeuwind .gform_wrapper h2.gform_title {
  font-family: var(--fontHeader) !important;
  font-weight: 800 !important;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--text);
}

.template-zeeuwind h1 { font-size: clamp(40px, 5vw, 72px); }
.template-zeeuwind h2 { font-size: clamp(30px, 3.4vw, 48px); }
.template-zeeuwind h3 { font-size: clamp(22px, 2.2vw, 30px); }

.template-zeeuwind p,
.template-zeeuwind li {
  font-size: 17px;
  line-height: 1.65;
}

.entry-title {
  display: none;
}

.entry-content {
  max-width: min(1600px, calc(100vw - 48px));
  margin: 0 auto;
}

.post-inner {
  padding: 0 20px;
  padding-top: 48px;
}

.entry-content .custom-hr {
  color: var(--text) !important;
}

/* ---------- Kleurvlakken (hulpklassen voor blokken) ---------- */

.template-zeeuwind .zw-groen   { background-color: var(--primary); }
.template-zeeuwind .zw-groen *,
.template-zeeuwind .zw-blauw * { color: var(--white); }
.template-zeeuwind .zw-blauw   { background-color: var(--blue); }
.template-zeeuwind .zw-grijs   { background-color: var(--grey); }
.template-zeeuwind .zw-mint    { background-color: var(--mint); }
.template-zeeuwind .zw-creme   { background-color: var(--cream); }

.template-zeeuwind .zw-rond-boog {
  border-radius: 999px 999px 0 0;
  overflow: hidden;
}

/* ---------- Formulier ---------- */

.entry-content form {
  background-color: var(--white);
  padding: 32px;
  border-radius: var(--radius);
}

.gform_wrapper {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.entry-title,
label:not(.gchoice label), legend {
  font-family: var(--fontLabel);
  color: var(--text);
  font-weight: 600;
}

.gfield_description * {
  color: var(--text);
}

.gfield_required,
label > a {
  color: var(--primary-dark);
}

input, textarea, select {
  border-radius: .5rem !important;
  font-family: var(--fontParagraph) !important;
  color: var(--text) !important;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

input::-webkit-input-placeholder {
  color: rgba(22, 22, 22, .55) !important;
}

/* ---------- Knoppen (pill, geel zoals zeeuwind.nl) ---------- */

input[type=submit],
.template-zeeuwind .wp-block-button__link,
.template-zeeuwind .gform_previous_button,
.template-zeeuwind .gform_next_button,
.template-zeeuwind .gform_button {
  background-color: var(--accent) !important;
  font-family: var(--fontHeader) !important;
  font-weight: 700 !important;
  border: 1px solid var(--accent);
  border-radius: 99999px !important;
  color: var(--text) !important;
  padding: 14px 28px !important;
}

input[type=submit]:hover, input[type=submit]:active,
.template-zeeuwind .wp-block-button__link:hover,
.template-zeeuwind .gform_previous_button:hover,
.template-zeeuwind .gform_next_button:hover,
.template-zeeuwind .gform_button:hover {
  background-color: var(--accent-dark) !important;
  border: 1px solid var(--accent-dark);
  color: var(--text) !important;
  text-decoration: none !important;
}

.template-zeeuwind .zw-knop-groen input[type=submit],
.template-zeeuwind .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: var(--primary) !important;
  border-color: var(--primary);
  color: var(--white) !important;
}

/* ---------- Select met eigen pijl ---------- */

.ginput_container_select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 2.5rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 782px) {
  .post-inner { padding-top: 24px; }
  .entry-content form { padding: 20px; }
  .zeeuwind-header-wrapper { padding: 14px 16px; }
  .zeeuwind-header-wrapper .logo-wrapper img { max-height: 40px; }
}

/* ---------- Breedte en volle kleurvlakken ---------- */

.template-zeeuwind .post-inner.thin .entry-content > * {
  max-width: min(1600px, calc(100vw - 48px));
}

.template-zeeuwind .zw-groen,
.template-zeeuwind .zw-blauw,
.template-zeeuwind .zw-grijs,
.template-zeeuwind .zw-mint,
.template-zeeuwind .zw-creme,
.template-zeeuwind .zw-vol {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.template-zeeuwind .zw-groen > *,
.template-zeeuwind .zw-blauw > *,
.template-zeeuwind .zw-grijs > *,
.template-zeeuwind .zw-mint > *,
.template-zeeuwind .zw-creme > *,
.template-zeeuwind .zw-vol > * {
  max-width: min(1600px, calc(100vw - 48px));
  margin-left: auto;
  margin-right: auto;
}

/* Knoppen niet in kapitalen (Twenty Twenty standaard) */
.template-zeeuwind .wp-block-button__link,
.template-zeeuwind input[type=submit],
.template-zeeuwind button,
.template-zeeuwind .wp-element-button {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 16px !important;
}

/* ---------- Hero met paginatitel ---------- */

.template-zeeuwind .zeeuwind-hero {
  background-color: var(--primary);
  padding: 56px 20px 88px;
}

.template-zeeuwind .zeeuwind-hero-inner {
  max-width: min(1600px, calc(100vw - 48px));
  margin: 0 auto;
}

.template-zeeuwind .zeeuwind-hero-title {
  color: var(--white) !important;
  font-family: var(--fontHeader);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}

.template-zeeuwind .zeeuwind-hero-text {
  color: var(--white);
  max-width: 620px;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- Formulier als witte kaart op lichte achtergrond ---------- */

body.template-zeeuwind {
  background-color: var(--grey);
}

.template-zeeuwind .post-inner {
  padding-top: 0;
}

body.template-zeeuwind .entry-content .gform_wrapper.gravity-theme,
body.template-zeeuwind .entry-content .gform_wrapper {
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 40px;
  max-width: min(1600px, calc(100vw - 48px)) !important;
  margin: -56px auto 64px !important;
  box-shadow: 0 18px 40px -20px rgba(22, 22, 22, .25);
}

.template-zeeuwind .entry-content form {
  background: transparent;
  padding: 0;
}

.template-zeeuwind .gform_wrapper a {
  color: var(--primary-dark);
}

.template-zeeuwind .gfield_required {
  color: #B3541E;
}

.template-zeeuwind .gform_wrapper .gsection {
  border-bottom: 2px solid var(--mint);
}

@media (max-width: 782px) {
  .template-zeeuwind .zeeuwind-hero { padding: 36px 16px 64px; }
  .template-zeeuwind .entry-content .gform_wrapper { padding: 20px; margin: -40px 16px 40px !important; }
}

/* ---------- Meerstapsformulier: voortgangsbalk ---------- */

body.template-zeeuwind .gf_progressbar_wrapper .gf_progressbar_title {
  font-family: var(--fontLabel);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

body.template-zeeuwind .gf_progressbar {
  background-color: var(--grey);
  border-radius: 99999px;
  overflow: hidden;
  height: 14px;
}

body.template-zeeuwind .gf_progressbar_percentage,
body.template-zeeuwind .gf_progressbar_percentage.percentbar_custom {
  background-color: var(--primary) !important;
  border-radius: 99999px;
  color: transparent !important;
  font-size: 0 !important;
  height: 14px;
}

/* ---------- Formuliertitel in de kaart ---------- */

body.template-zeeuwind .gform_wrapper .gform_title {
  font-size: 28px !important;
  text-align: left;
  margin: 0 0 24px;
}

body.template-zeeuwind .gform_wrapper .gform_description {
  font-size: 17px;
  color: var(--text);
}

/* ---------- Knoppen van add-ons (o.a. huischeck tool) ---------- */

body.template-zeeuwind .gform_wrapper button:not(.gform_previous_button) {
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: var(--white) !important;
  font-family: var(--fontHeader) !important;
  font-weight: 700 !important;
  border-radius: 99999px !important;
  padding: 12px 24px !important;
}

body.template-zeeuwind .gform_wrapper button:not(.gform_previous_button):hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* Vorige-knop als omlijnde variant */
body.template-zeeuwind .gform_previous_button {
  background-color: transparent !important;
  border: 1px solid var(--text) !important;
  color: var(--text) !important;
}

/* ---------- Koppen in HTML-velden van het formulier ---------- */
/* Sommige formulieren zetten een eigen titel in een HTML-veld (vaak in een
   <center> met een groot lettertype). Die tonen we bescheiden, omdat de
   paginatitel al in de groene hero staat. */

body.template-zeeuwind .gform_wrapper .gfield--type-html center,
body.template-zeeuwind .gform_wrapper .gfield--type-html h1,
body.template-zeeuwind .gform_wrapper .gfield--type-html h2 {
  font-family: var(--fontHeader) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  text-align: left !important;
  color: var(--text) !important;
  margin: 0 0 8px !important;
}

/* ---------- Hoofdknoppen van het formulier altijd geel ---------- */

body.template-zeeuwind .gform_wrapper button.gform_next_button,
body.template-zeeuwind .gform_wrapper button.gform_button,
body.template-zeeuwind .gform_wrapper input[type=submit] {
  background-color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--text) !important;
}

body.template-zeeuwind .gform_wrapper button.gform_next_button:hover,
body.template-zeeuwind .gform_wrapper button.gform_button:hover,
body.template-zeeuwind .gform_wrapper input[type=submit]:hover {
  background-color: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: var(--text) !important;
}

body.template-zeeuwind .gform_wrapper button.gform_previous_button {
  background-color: transparent !important;
  border: 1px solid var(--text) !important;
  color: var(--text) !important;
}

/* ---------- Tabellen van geneste formulieren (GP Nested Forms) ---------- */

body.template-zeeuwind .gpnf-nested-entries-container,
body.template-zeeuwind .gpnf-nested-entries {
  width: 100%;
}

body.template-zeeuwind table.gpnf-nested-entries {
  table-layout: auto;
  font-size: 15px;
}

body.template-zeeuwind table.gpnf-nested-entries th,
body.template-zeeuwind table.gpnf-nested-entries td {
  padding: 8px 10px;
  vertical-align: middle;
  word-break: normal;
}

/* Als de tabel toch breder is dan de kaart: netjes scrollen binnen de kaart */
body.template-zeeuwind .gpnf-nested-entries-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Compactere tabelcellen zodat de bouwdelen-tabel eerder past */
body.template-zeeuwind table.gpnf-nested-entries {
  font-size: 14px;
  width: 100%;
}

body.template-zeeuwind table.gpnf-nested-entries th,
body.template-zeeuwind table.gpnf-nested-entries td {
  padding: 6px 8px;
}

body.template-zeeuwind table.gpnf-nested-entries .gpnf-row-actions a,
body.template-zeeuwind table.gpnf-nested-entries .gpnf-row-actions button {
  padding: 6px 14px !important;
  font-size: 14px !important;
}