/*
Theme Name: Texelaar
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 1.0
Description: Texelaar
Author: Dynadex
Author URI: https://dynadex.nl
Template: Divi
*/
@import url("../Divi/style.css");

h1,h2,h3,h4,h5,h6 {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* Hero-knoppen (Fullwidth Header): hover-lift, geen native transform-optie */
.et_pb_fullwidth_header .et_pb_button {
        transition: transform .18s ease, box-shadow .18s ease;
}
.et_pb_fullwidth_header .et_pb_button:hover {
        transform: translateY(-3px);
}
.et_pb_more_button:hover:after {
        margin-left: .3em;
}

/* Ghost-knop: blur kan niet native */
.et_pb_button_two,
.et_pb_button.tes-btn-ghost {
        backdrop-filter: blur(3px);
}

/******************************/
/********** Menu **************/
/******************************/
/* CTA */
.tes-cta-menu {
        margin-top: -5px;
}

/* Divi rekt de link uit tot de hoogte van het menu-item (align-items: stretch);
   sinds de menulinks 36px padding hebben (submenu onder de header) werd de knop 86px hoog.
   Selector even specifiek als die van Divi, anders wint Divi. */
.et_pb_menu .et_pb_menu__menu > nav > ul > li.tes-cta-menu {
        align-items: center;
}

.tes-cta-menu a {
     color: #1c2706 !important;
         background-color: #aecb3a;
         font-family: 'Bricolage Grotesque',Helvetica,Arial,Lucida,sans-serif !important;
     font-weight: 700;
         font-size: 16px;
         padding: 14px 26px !important;
        border-radius: 11px;
}

.et_mobile_menu .tes-cta-menu {
         text-align: center;
         margin-top: 14px;
}

.et_mobile_menu .tes-cta-menu a {
         display: inline-block;
         padding: 0.55em 1em !important;
}

/* Geen scheidingslijn onder het een-na-laatste item (Contact), boven de CTA */
.et_mobile_menu > li:nth-last-child(2) > a {
         border-bottom: 0;
}


/* Sticky header: logo laten overvloeien.
   Divi zet bij scrollen op hetzelfde element #main-menu de klasse .et_pb_sticky (en plaatst
   een onzichtbare kopie als .et_pb_sticky_placeholder). Achtergrond en tekstkleur vloeien
   0,3s over, maar het logo werd gewisseld met `content: url()` (geen overgang), waardoor het
   lichte logo even op de crèmekleurige balk stond. Nu: lichte logo faadt uit, donkere faadt in.
   De `content`-wissel uit het Divi-veld wordt hier uitgezet. */
#main-menu .et_pb_menu__logo {
        position: relative;
}

#main-menu .et_pb_menu__logo img {
        transition: opacity .3s ease;
}

#main-menu.et_pb_sticky .et_pb_menu__logo img {
        content: normal !important;
        opacity: 0;
}

#main-menu .et_pb_menu__logo:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url("/wp-content/uploads/2026/08/logo-tes-texelaar-elite-schapen-dark.svg") left center / contain no-repeat;
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
}

#main-menu.et_pb_sticky .et_pb_menu__logo:after {
        opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
        #main-menu .et_pb_menu__logo img,
        #main-menu .et_pb_menu__logo:after {
                transition: none;
        }
}

/* Hide CTA menu */
@media (min-width: 980px) and (max-width: 1200px) {
        .tes-cta-menu {
                display: none !important;
        }
}


/******************************/
/********** CF7 ***************/
/******************************/

.wpcf7 .wpcf7-textarea,
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-select,
.wpcf7 .wpcf7-date,
.wpcf7 .wpcf7-number {
  background-color: #efefef;
  border: none;
  border-radius: 0;
  color: #2c2a27;
  width: 100%;
  padding: 14px 20px;
  height: auto;
  line-height: 22px;
  padding: 17px 20px !important;
  font-size: clamp(0.875rem, 1vw, 1.125rem);
}

.wpcf7 .wpcf7-textarea:focus,
.wpcf7 .wpcf7-text:focus,
.wpcf7 .wpcf7-select:focus,
.wpcf7 .wpcf7-date:focus,
.wpcf7 .wpcf7-number:focus {
  color: #2c2a27;
  background-color: #efefef;
}

.wpcf7 .wpcf7-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M267.3 395.3c-6.2 6.2-16.4 6.2-22.6 0l-192-192c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L256 361.4 436.7 180.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-192 192z'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 97%;
  background-position-y: 15px;
  background-size: 20px;
}

/* Accept privacy */
.wpcf7-acceptance .wpcf7-list-item {
  margin: 0 0 1rem 0;
}

.wpcf7 form .wpcf7-response-output {
        margin: 0;
}

/******************************/
/********** Cursor ************/
/******************************/
.wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7 .wpcf7-select,
.wpcf7-date,
.wpcf7-submit {
  cursor: pointer;
}

/******************************/
/********** Checkbox **********/
/******************************/
.wpcf7 input[type=checkbox] {
        accent-color: #1a1a1a;
        height: 25px;
        width: 25px;
        background-color: #BDDBFE;
        vertical-align: middle;
        margin-right: 1rem !important;
        cursor: pointer;
}

.wpcf7 input[type=checkbox]:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid #BDDBFE;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
.wpcf7 input[type=checkbox]:checked {
        background-color: #222;
}

/******************************/
.wpcf7 .wpcf7-file {
  background-color: #efefef;
  color: #2c2a27;
  padding: 0;
  width: 100%;
  font-size: clamp(0.875rem, 1vw, 1.125rem);
  line-height: 22px;
  box-sizing: border-box;
  cursor: pointer;
  border: none;
  border-radius: 0;
  font-family: inherit;
}

.wpcf7 .wpcf7-file::file-selector-button {
  background-color: #007dc4;
  color: #fff;
  border: none;
  padding: 17px 20px;
  cursor: pointer;
  font-size: clamp(0.875rem, 1vw, 1.125rem);
  margin-right: 16px;
  font-family: inherit;
}

.wpcf7 .wpcf7-file::file-selector-button:hover {
  background-color: #444;
}

.wpcf7-response-output {
        border-color: #00aa96 !important;
        padding: 17px 20px !important;
        background-color: #111111;
        color: #fff;
        font-size: clamp(0.875rem, 1vw, 1.125rem);
}