@charset "UTF-8";
/*
Theme Name: ût Fruttersfist
Theme URI: https://fruttersfist.nl
Author: Sjors Hartwijk
Author URI: https://sjorshartwijk.nl
Description: Het officiële wordPress thema van ût Fruttersfist
Requires at least: 6.8.3
Tested up to: 6.8.3
Requires PHP: 8.3
Version: 1.2.4
Tags: secure custom fields, contact form 7, responsive, accessibility-ready,
*/
@import url("https://fonts.googleapis.com/css2?family=Catamaran:wght@100..900&display=swap");
body {
  font-family: "Catamaran", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  text-wrap: pretty;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  text-wrap: balance;
  color: #020041;
}

a {
  color: #009fe3;
  text-decoration: none;
}
a:hover {
  color: #020041;
}

.btn {
  border-radius: calc(infinity * 1px);
  padding: 0.5em 1.25em;
  font-weight: 500;
}
.btn.btn-blauw {
  background-color: #009fe3;
  color: #000;
}
.btn.btn-blauw:hover {
  background-color: #020041;
  color: #fff;
}
.btn.btn-groen {
  background-color: #24ff66;
  color: #000;
}
.btn.btn-groen:hover {
  background-color: rgb(0, 240, 72.3287671233);
  color: #fff;
}
.btn.btn-rood {
  background-color: #ff2424;
  color: #000;
}
.btn.btn-rood:hover {
  background-color: #f00000;
  color: #fff;
}
.btn.btn-oranje {
  background-color: #ff7625;
  color: #000;
}
.btn.btn-oranje:hover {
  background-color: rgb(241, 89.5458715596, 0);
  color: #fff;
}
.btn.btn-geel {
  background-color: #ff0;
  color: #000;
}
.btn.btn-geel:hover {
  background-color: #cccc00;
  color: #000;
}
.btn.btn-paars {
  background-color: #b300ff;
  color: #fff;
}
.btn.btn-paars:hover {
  background-color: rgb(143.2, 0, 204);
  color: #000;
}
.btn.btn-zwart {
  background-color: #000;
  color: #fff;
}
.btn.btn-zwart:hover {
  background-color: rgb(25.5, 25.5, 25.5);
  color: #009fe3;
}

body:not(.home) nav {
  background: #020041;
}

.pre {
  display: block;
  height: 86px;
}

.melding {
  font-weight: 600;
}
.melding a {
  color: #000;
  text-decoration: underline;
}
.melding a:hover {
  color: #fff;
}
.melding p {
  text-wrap: balance;
  margin-bottom: 0;
}
.melding.blauw {
  background-color: #009fe3;
  color: #000;
}
.melding.groen {
  background-color: #24ff66;
  color: #000;
}
.melding.geel {
  background-color: #ff0;
  color: #000;
}
.melding.rood {
  background-color: #ff2424;
  color: #000;
}
.melding.oranje {
  background-color: #ff7625;
  color: #000;
}
.melding.paars {
  background-color: #b300ff;
  color: #fff;
}
.melding.paars a {
  color: #fff;
}
.melding.paars a:hover {
  color: #000;
}
.melding.zwart {
  background-color: #000;
  color: #fff;
}
.melding.zwart a {
  color: #fff;
}
.melding.zwart a:hover {
  color: #009fe3;
}

nav {
  background-color: #020041;
}
@media (min-width: 992px) {
  nav {
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  }
}
nav .navbar-brand img {
  max-height: 60px;
}
nav .navbar-nav .nav-link {
  font-size: 1.25em;
  color: #fff !important;
  font-weight: 600;
}
nav .navbar-nav .nav-link:hover {
  color: #009fe3 !important;
}
nav .navbar-nav .nav-link.active {
  color: #009fe3 !important;
}

.home header {
  margin-top: -86px;
  min-height: 75dvh;
  background-size: cover;
  background-position: center;
}
.home header .date {
  display: inline-flex;
  background-color: #009fe3;
  border-radius: calc(infinity * 1px);
  font-weight: 600;
  color: #000;
}
.home h1 {
  font-weight: 800;
}
.home .evenementen .card img.card-img {
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
  background-position: center;
  aspect-ratio: 4/3;
}
@media (min-width: 992px) {
  .home .evenementen .card img.card-img {
    height: 300px;
  }
}
.home .evenementen .card .card-title {
  font-weight: 600;
  color: #fff;
  text-shadow: #000 1px 1px 2px;
}
.home .evenementen .card .card-text {
  color: #fff;
  text-shadow: #000 1px 1px 2px;
}
.home .nieuws .card img.card-img-top {
  max-height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  background-position: center;
  aspect-ratio: 4/3;
}
@media (min-width: 992px) {
  .home .nieuws .card img.card-img-top {
    max-height: 275px;
  }
}

.page-template header {
  min-height: 33dvh;
  background-size: cover;
  background-position: center;
}
.page-template h1 {
  font-weight: 800;
}

.single-post header {
  min-height: 33dvh;
  background-size: cover;
  background-position: center;
}
.single-post h1 {
  font-weight: 800;
}

.single-evenement header {
  min-height: 33dvh;
  background-size: cover;
  background-position: center;
}
.single-evenement h1 {
  font-weight: 800;
}
.single-evenement .leeftijd {
  color: #009fe3;
  font-weight: 600;
}

.page-template-page-location iframe {
  height: 250px;
}
@media (min-width: 992px) {
  .page-template-page-location iframe {
    height: 350px;
  }
}

.blog aside.sidebar ul, .archive aside.sidebar ul {
  padding-left: 0;
  list-style-type: none;
}
.blog aside.sidebar ul li, .archive aside.sidebar ul li {
  margin-bottom: 0.75em;
}
.blog aside.sidebar ul li a, .archive aside.sidebar ul li a {
  color: #009fe3;
}
.blog aside.sidebar ul li a:hover, .archive aside.sidebar ul li a:hover {
  color: #020041;
  text-decoration: underline;
}

.error404 {
  background-color: #020041;
  color: #fff;
}
.error404 h1, .error404 h2, .error404 h3, .error404 h4, .error404 h5, .error404 h6 {
  color: #fff;
}
.error404 .display-1 {
  font-weight: 800;
  color: #009fe3;
  font-size: 6rem;
}
@media (min-width: 768px) {
  .error404 .display-1 {
    font-size: 16rem;
  }
}

.accordion {
  background-color: #fff;
}
.accordion .accordion-item {
  background-color: #fff;
}
.accordion .accordion-item .accordion-header .accordion-button {
  padding: 1rem 0;
  font-weight: 500;
  background-color: #fff;
}
.accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  font-weight: 500;
  color: #009fe3;
}
.accordion .accordion-item .accordion-body {
  padding: 1rem 0;
}

footer {
  font-size: 1.15em;
  background-color: #020041;
  color: #fff;
  overflow-x: hidden;
}
footer h3, footer h4 {
  color: #fff;
}
footer a {
  color: #009fe3;
}
footer a:hover {
  color: #fff;
  text-decoration: underline;
}
footer .sponsor-swiper {
  font-size: 0.85em;
}
footer .sponsor-swiper img {
  max-height: 100px;
}
@media (min-width: 768px) {
  footer .sponsor-swiper img {
    max-height: 75px;
  }
}
footer .sponsor-swiper a {
  color: #fff;
}
footer ul.menu {
  list-style-type: none;
  padding-left: 0;
}
footer ul.menu li.menu-item {
  padding: 0.75em 0;
  font-weight: 500;
}
footer ul.social-media li i {
  font-size: 1.75em;
}
footer .nix img {
  max-height: 40px;
}
@media (min-width: 768px) {
  footer .nix img {
    max-height: 30px;
  }
}

.copyright {
  color: #fff;
  background-color: #000;
}
.copyright a {
  color: #009fe3;
}
.copyright a:hover {
  color: #fff;
  text-decoration: underline;
}

.grecaptcha-badge {
  display: none;
}

/* ---------------------------
   Contact Form 7 -> Bootstrap 5.3 look
   Plak in style.css of Customizer -> Extra CSS
   --------------------------- */
/* Basiscontainer: optionele wrapper styling */
.wpcf7-form {
  font-size: 1rem;
  line-height: 1.5;
}

/* Inputs, textareas, selects — bootstrap-like "form-control" */
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=url],
.wpcf7-form input[type=number],
.wpcf7-form input[type=password],
.wpcf7-form input[type=search],
.wpcf7-form input[type=date],
.wpcf7-form input[type=time],
.wpcf7-form textarea,
.wpcf7-form select {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.375rem; /* 6px, Bootstrap 5.3-ish */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
}

/* Textarea height hint (kan overschreven worden per formulier) */
.wpcf7-form textarea {
  min-height: 120px;
  resize: vertical;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Focus state like bootstrap */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* Placeholder styling */
.wpcf7-form ::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}
.wpcf7-form ::placeholder {
  color: #6c757d;
  opacity: 1;
}

/* Disabled/read-only */
.wpcf7-form input[disabled],
.wpcf7-form textarea[disabled],
.wpcf7-form select[disabled],
.wpcf7-form input[readonly],
.wpcf7-form textarea[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

/* Labels — toevoegen als je labels gebruikt */
.wpcf7-form label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #212529;
}

/* Help / small text (gebruik .form-text) */
.wpcf7-form .form-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #6c757d;
}

/* Checkboxes & radios — bootstrap-like inline controls */
.wpcf7-form .wpcf7-form-control-wrap .wpcf7-list-item {
  margin-bottom: 0.25rem;
}

.wpcf7-form input[type=checkbox],
.wpcf7-form input[type=radio] {
  width: auto;
  margin-top: 0.15rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* File input — basic bootstrap-ish look */
.wpcf7-form input[type=file] {
  padding: 0.4rem 0.75rem;
}

/* Submit button — bootstrap .btn .btn-primary look */
.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type=submit],
.wpcf7-form button[type=submit] {
  display: inline-block;
  font-weight: 600;
  color: #000;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: #24ff66;
  border: 1px solid #24ff66;
  border-radius: calc(infinity * 1px);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.05s ease;
}

/* Hover / active / focus for button */
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form input[type=submit]:hover,
.wpcf7-form button[type=submit]:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  transform: translateY(-1px);
}

.wpcf7-form .wpcf7-submit:active {
  transform: translateY(0);
}

.wpcf7-form .wpcf7-submit:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  outline: none;
}

/* Secondary button variant if gebruikt */
.wpcf7-form .btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}

/* Validation / error states (matching Bootstrap 'is-invalid') */
.wpcf7-form .wpcf7-not-valid,
.wpcf7-form .wpcf7-not-valid-tip {
  color: #ff2424;
  border-color: #ff2424;
}

/* Add invalid style to the input itself when CF7 adds the invalid class */
.wpcf7-form .wpcf7-form-control.wpcf7-not-valid,
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid {
  border-color: #ff2424;
  padding-right: calc(0.75rem + 1.5em); /* ruimte voor icon, optioneel */
  box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.12);
}

/* CF7 inline validation message that sometimes appears after submit */
.wpcf7-response-output {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
}

.wpcf7-mail-sent-ok.wpcf7-response-output {
  color: #0f5132;
  background-color: #d1e7dd;
  border: 1px solid #badbcc;
}

.wpcf7-validation-errors.wpcf7-response-output,
.wpcf7-mail-sent-ng.wpcf7-response-output {
  color: #842029;
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
}

/* Compact grid / inline fields — gebruik .form-row en .col-* klassen in formulier markup of via CF7 wrapper classes */
/* Voorbeeld: voeg in CF7 markup wrapper classes toe zoals [text* naam class:col-6] en style below */
.wpcf7-form .form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.wpcf7-form .col-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.wpcf7-form .col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.wpcf7-form .col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.wpcf7-form .col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.wpcf7-form .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.wpcf7-form .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Small utility: icon in invalid field (optioneel) - requires extra markup/positioning if used */
.wpcf7-form .field-with-icon {
  position: relative;
}

.wpcf7-form .field-with-icon input,
.wpcf7-form .field-with-icon textarea {
  padding-right: 2.5rem;
}

.wpcf7-form .field-with-icon .invalid-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #dc3545;
  font-size: 1.1rem;
}

/* Make sure inline labels for checkboxes/radios align nicely */
.wpcf7-list-item-label {
  vertical-align: middle;
  margin-left: 0.25rem;
}

/* Small responsive tweaks */
@media (max-width: 576px) {
  .wpcf7-form .form-row {
    gap: 0.5rem;
  }
  .wpcf7-form .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Optional: reduce excessive margins CF7 sometimes injects */
.wpcf7-form p {
  margin: 0 0 1rem 0;
}

/* Accessibility: visible focus for keyboard users (stronger than default) */
.wpcf7-form :focus-visible {
  outline: 3px solid rgba(13, 110, 253, 0.18);
  outline-offset: 2px;
}/*# sourceMappingURL=style.css.map */