/*
Theme Name: Le Nerd Child
Theme URI: https://www.lennertbontinck.com/
Description: Child thema voor Le Nerd website
Author: Lennert Bontinck
Author URI: https://www.lennertbontinck.com/
Version: 1.0.0
Template: le-nerd
*/

@import url("../le-nerd/style.css");

:root {
   /* ================================
   Le Nerd — Brand Core
   ================================ */

   --logo-primary: #3AAFA9;
   --logo-primary-dark: #2B827D;
   --logo-dark: #1E1E1E;
   --logo-light: #b5b9c0;
   --logo-tagline: #6B7280;


   /* ================================
   Neutrals & Typography
   ================================ */

   --web-text-primary: #1E1E1E;
   --web-text-secondary: #6B7280;

   --web-bg-primary: #F7F9FA;
   --web-bg-secondary: #FFFFFF;

   /* ================================
   State & Utility
   ================================ */

   --state-color-success: #16A34A;
   --state-color-warning: #F59E0B;
   --state-color-error: #DC2626;
   --state-color-info: #0284C7;

   /* ================================
   Nerd colors 
   ================================ */

   --nerd-color-phd: #1e64c8;
   --nerd-color-web: #3aafa9;
   --nerd-color-it: #ffbe34;
   --nerd-color-ai: #7b5cff;
   --nerd-color-law: #6b7280;
   --nerd-color-car: #c1121f;

   --nerd-color-phd-bg: rgba(30, 100, 200, 0.08);
   --nerd-color-web-bg: rgba(58, 175, 169, 0.08);
   --nerd-color-it-bg: rgba(255, 190, 52, 0.12);
   --nerd-color-ai-bg: rgba(123, 92, 255, 0.08);
   --nerd-color-law-bg: rgba(107, 114, 128, 0.10);
   --nerd-color-car-bg: rgba(193, 18, 31, 0.08);

   /* ================================
   Breakpoints 
   ================================ */

   --breakpoint-xl-lower-limit: 1200px;

   --breakpoint-lg-upper-limit: 1199px;
   --breakpoint-lg-lower-limit: 992px;

   --breakpoint-md-upper-limit: 991px;
   --breakpoint-md-lower-limit: 768px;

   --breakpoint-sm-upper-limit: 767px;
}

/* ================================
General CSS
=============================== */

p {
   margin-bottom: 10px;
}

.lenerd_header_offset {
   height: 35px !important;
}

.content,
.content .container,
.full_width {
   background-color: var(--web-bg-primary) !important;
}

.lenerd_alternate_bg {
   background-color: var(--web-bg-secondary) !important;
}

.lenerd_nerd_image {
   background-color: var(--logo-primary);
   border-radius: 30px 30px 0 0;
   margin-bottom: -60px;
}

.lenerd_intext_links a,
.lenerd_intext_links a:hover {
   transition: all 0.2s ease;
}

.lenerd_intext_links a::after {
   content: "";
   display: inline-block;
   width: 0.75em;
   height: 0.75em;
   margin-left: 4px;
   vertical-align: baseline;
   transform: translateY(2px);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   background-color: currentColor;
   opacity: 0.5;
   transition: all 0.2s ease;
}


.lenerd_intext_links a:hover::after {
   background-color: var(--logo-primary);
   opacity: 1;
}

@media (max-width: 1000px) {
   .lenerd_header_offset {
      height: 0px !important;
   }
}

@media (max-width: 767px) {
   .hidden_sm {
      display: none !important;
   }
}

.lenerd_non_padded_row {
   overflow: hidden !important;
}

.lenerd_non_padded_row .vc_column-inner,
.lenerd_non_padded_row .wpb_wrapper {
   padding: 0 !important;
   margin: 0 !important;
}

/* ================================
CTA Page Bottom CSS
=============================== */

.lenerd_CTA_pagebottom_block {
   background-color: var(--logo-primary)
}

.lenerd_CTA_pagebottom_block_text_column * {
   color: white;
   font-size: 50px;
   line-height: 50px;
}

@media only screen and (max-width: 767px) {
   .lenerd_CTA_pagebottom_block_text_column {
      margin-bottom: 30px;
   }

   .lenerd_CTA_pagebottom_block * {
      text-align: center;
   }

   .lenerd_CTA_pagebottom_block_text_column * {
      font-size: 30px;
      line-height: 30px;
   }
}

.lenerd_CTA_pagebottom_block .section_inner_margin {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

/* 
################################################
# Footer CSS
################################################
*/


.footer-icon i {
   transition: margin 0.3s ease;
   margin-left: 5px;
}

.footer-icon:hover {
   transition: margin 0.3s ease;
}

.footer-icon:hover i {
   margin-left: 10px;
   transition: margin 0.3s ease;
}

.footer_inner a,
.footer_inner a:hover {
   transition: all 0.3s ease;
}

@media (max-width: 767px) {

   .footer_col2,
   .footer_col3 {
      display: none;
   }
}

/* 
################################################
# Buttons CSS
################################################
*/

.lenerd_button {
   border-radius: 20px;
}

.lenerd_button.qode-btn {
   display: inline-flex;
   align-items: center;
   flex-wrap: nowrap;
   max-width: 100%;
}

.lenerd_button .qode-btn-text {
   flex: 1 1 auto;
   min-width: 0;
   max-width: calc(100% - 64px);
   white-space: normal;
   overflow-wrap: break-word;
   hyphens: auto;
   display: flex;
   align-items: center;
   line-height: 1.3;
   text-align: center;
}

.lenerd_button .qode-button-v2-icon-holder {
   flex: 0 0 64px;
   width: 64px;
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
}

.lenerd_button.qode-btn>span {
   margin: 0;
}

a .qode-btn-text {
   display: inline !important;
}

@media only screen and (max-width: 768px) {
   .lenerd_button.qode-btn.qode-btn-icon .qode-btn-text {
      padding-right: 20px;
      padding-left: 20px;
   }
}

/* ================================
Choose nerd CSS
=============================== */

.lenerd_other_nerd_outline img {
   max-height: 300px;
   width: auto;
}

/* ================================
General nerd pages CSS
=============================== */

.lenerd_other_nerd_outline img {
   max-height: 300px;
   width: auto;
}

.qode_icon_shortcode {
   margin-top: 10px;
}

@media (max-width: 767px) {
   .le-nerd-pill {
      display: none !important;
   }

   .nerd_heading_image_column {
      margin-top: 30px;
   }
}

@media (min-width: 768px) {

   /* Force image of nerd heading to be at bottom of column */
   .nerd_heading_row .full_section_inner {
      display: flex !important;
      flex-wrap: wrap;
      align-items: stretch;
      width: 100%;
   }

   .nerd_heading_row .full_section_inner::before,
   .nerd_heading_row .full_section_inner::after {
      display: none !important;
   }

   .nerd_heading_row {
      padding-bottom: 0 !important;
   }

   .nerd_heading_image_column {
      display: flex !important;
      flex-direction: column;
      position: relative;
      z-index: 1;
   }

   /* 6. Force the image to the bottom */
   .nerd_heading_image_column>.vc_column-inner {
      display: flex !important;
      flex-direction: column;
      justify-content: flex-end;
      height: 100%;
      flex-grow: 1;
      padding-bottom: 0 !important;
   }

   /* 7. Reset Image Margins */
   .nerd_heading_image_column .wpb_single_image,
   .nerd_heading_image_column img {
      margin-bottom: 0 !important;
      vertical-align: bottom !important;
      display: block;
   }
}

/* ================================
PhD Nerd CSS
=============================== */

.lenerd_nerd_image_phd {
   background-color: var(--nerd-color-phd);
}

.lenerd_CTA_pagebottom_block_phd {
   background-color: var(--nerd-color-phd);
}

.lenerd_intext_links_phd a:hover {
   color: var(--nerd-color-phd);
}

.lenerd_intext_links_phd a:hover::after {
   background-color: var(--nerd-color-phd);
}

.page-id-31 .footer_inner a:hover {
   color: var(--nerd-color-phd) !important;
}

.page-id-31 ::selection {
   background: var(--nerd-color-phd);
}

.page-id-31 .lenerd_CTA_pagebottom_block_phd ::selection {
   background: white;
   color: var(--nerd-color-phd);
}

.page-id-31 nav.main_menu a.current,
.page-id-31 nav.main_menu a:hover {
   color: var(--nerd-color-phd) !important;
}

.page-id-31 .drop_down .second .inner>ul>li>a:hover,
.page-id-31 .drop_down .wide .second ul li ul li.menu-item-has-children>a:hover,
.page-id-31 .drop_down .wide .second .inner ul li.sub ul li.menu-item-has-children>a:hover {
   color: var(--nerd-color-phd) !important;
}

.page-id-31 #back_to_top:hover>span {
   background-color: var(--nerd-color-phd);
   border-color: var(--nerd-color-phd);
}


/* ================================
Web Nerd CSS
=============================== */

.lenerd_nerd_image_web {
   background-color: var(--nerd-color-web);
}

.lenerd_CTA_pagebottom_block_web {
   background-color: var(--nerd-color-web);
}

.lenerd_intext_links_web a:hover {
   color: var(--nerd-color-web);
}

.lenerd_intext_links_web a:hover::after {
   background-color: var(--nerd-color-web);
}

.page-id-35 .footer_inner a:hover {
   color: var(--nerd-color-web) !important;
}

.page-id-35 ::selection {
   background: var(--nerd-color-web);
}

.page-id-35 .lenerd_CTA_pagebottom_block_web ::selection {
   background: white;
   color: var(--nerd-color-web);
}

.page-id-35 nav.main_menu a.current,
.page-id-35 nav.main_menu a:hover {
   color: var(--nerd-color-web) !important;
}

.page-id-35 .drop_down .second .inner>ul>li>a:hover,
.page-id-35 .drop_down .wide .second ul li ul li.menu-item-has-children>a:hover,
.page-id-35 .drop_down .wide .second .inner ul li.sub ul li.menu-item-has-children>a:hover {
   color: var(--nerd-color-web) !important;
}

.page-id-35 #back_to_top:hover>span {
   background-color: var(--nerd-color-web);
   border-color: var(--nerd-color-web);
}

/* ================================
IT Nerd CSS
=============================== */

.lenerd_nerd_image_it {
   background-color: var(--nerd-color-it);
}

.lenerd_CTA_pagebottom_block_it {
   background-color: var(--nerd-color-it);
}

.lenerd_intext_links_it a:hover {
   color: var(--nerd-color-it);
}

.lenerd_intext_links_it a:hover::after {
   background-color: var(--nerd-color-it);
}

.page-id-39 .footer_inner a:hover {
   color: var(--nerd-color-it) !important;
}

.page-id-39 ::selection {
   background: var(--nerd-color-it);
}

.page-id-39 .lenerd_CTA_pagebottom_block_it ::selection {
   background: white;
   color: var(--nerd-color-it);
}

.page-id-39 nav.main_menu a.current,
.page-id-39 nav.main_menu a:hover {
   color: var(--nerd-color-it) !important;
}

.page-id-39 .drop_down .second .inner>ul>li>a:hover,
.page-id-39 .drop_down .wide .second ul li ul li.menu-item-has-children>a:hover,
.page-id-39 .drop_down .wide .second .inner ul li.sub ul li.menu-item-has-children>a:hover {
   color: var(--nerd-color-it) !important;
}

.page-id-39 #back_to_top:hover>span {
   background-color: var(--nerd-color-it);
   border-color: var(--nerd-color-it);
}

/* ================================
AI Nerd CSS
=============================== */

.lenerd_nerd_image_ai {
   background-color: var(--nerd-color-ai);
}

.lenerd_CTA_pagebottom_block_ai {
   background-color: var(--nerd-color-ai);
}

.lenerd_intext_links_ai a:hover {
   color: var(--nerd-color-ai);
}

.lenerd_intext_links_ai a:hover::after {
   background-color: var(--nerd-color-ai);
}

.page-id-33 .footer_inner a:hover {
   color: var(--nerd-color-ai) !important;
}

.page-id-33 ::selection {
   background: var(--nerd-color-ai);
}

.page-id-33 .lenerd_CTA_pagebottom_block_ai ::selection {
   background: white;
   color: var(--nerd-color-ai);
}

.page-id-33 nav.main_menu a.current,
.page-id-33 nav.main_menu a:hover {
   color: var(--nerd-color-ai) !important;
}

.page-id-33 .drop_down .second .inner>ul>li>a:hover,
.page-id-33 .drop_down .wide .second ul li ul li.menu-item-has-children>a:hover,
.page-id-33 .drop_down .wide .second .inner ul li.sub ul li.menu-item-has-children>a:hover {
   color: var(--nerd-color-ai) !important;
}

.page-id-33 #back_to_top:hover>span {
   background-color: var(--nerd-color-ai);
   border-color: var(--nerd-color-ai);
}

/* ================================
Law Nerd CSS
=============================== */

.lenerd_nerd_image_law {
   background-color: var(--nerd-color-law);
}

.lenerd_CTA_pagebottom_block_law {
   background-color: var(--nerd-color-law);
}

.lenerd_intext_links_law a:hover {
   color: var(--nerd-color-law);
}

.lenerd_intext_links_law a:hover::after {
   background-color: var(--nerd-color-law);
}

.page-id-43 .footer_inner a:hover {
   color: var(--nerd-color-law) !important;
}

.page-id-43 ::selection {
   background: var(--nerd-color-law);
}

.page-id-43 .lenerd_CTA_pagebottom_block_law ::selection {
   background: white;
   color: var(--nerd-color-law);
}

.page-id-43 nav.main_menu a.current,
.page-id-43 nav.main_menu a:hover {
   color: var(--nerd-color-law) !important;
}

.page-id-43 .drop_down .second .inner>ul>li>a:hover,
.page-id-43 .drop_down .wide .second ul li ul li.menu-item-has-children>a:hover,
.page-id-43 .drop_down .wide .second .inner ul li.sub ul li.menu-item-has-children>a:hover {
   color: var(--nerd-color-law) !important;
}

.page-id-43 #back_to_top:hover>span {
   background-color: var(--nerd-color-law);
   border-color: var(--nerd-color-law);
}

/* ================================
Car Nerd CSS
=============================== */

.lenerd_nerd_image_car {
   background-color: var(--nerd-color-car);
}

.lenerd_CTA_pagebottom_block_car {
   background-color: var(--nerd-color-car);
}

.lenerd_intext_links_car a:hover {
   color: var(--nerd-color-car);
}

.lenerd_intext_links_car a:hover::after {
   background-color: var(--nerd-color-car);
}

.page-id-45 .footer_inner a:hover {
   color: var(--nerd-color-car) !important;
}

.page-id-45 ::selection {
   background: var(--nerd-color-car);
}

.page-id-45 .lenerd_CTA_pagebottom_block_car ::selection {
   background: white;
   color: var(--nerd-color-car);
}

.page-id-45 nav.main_menu a.current,
.page-id-45 nav.main_menu a:hover {
   color: var(--nerd-color-car) !important;
}

.page-id-45 .drop_down .second .inner>ul>li>a:hover,
.page-id-45 .drop_down .wide .second ul li ul li.menu-item-has-children>a:hover,
.page-id-45 .drop_down .wide .second .inner ul li.sub ul li.menu-item-has-children>a:hover {
   color: var(--nerd-color-car) !important;
}

.page-id-45 #back_to_top:hover>span {
   background-color: var(--nerd-color-car);
   border-color: var(--nerd-color-car);
}

/******************
* Contact form
******************/

.lenerd_contact_panel {
   margin-top: 20px;
}

.lenerd_contact_panel .full_section_inner {
   overflow: visible;
}

.lenerd_contact_panel .lenerd_contact_panel_contact_details,
.lenerd_contact_panel .lenerd_contact_panel_contact_form {
   position: relative;
}

.lenerd_contact_panel .lenerd_contact_panel_contact_details>.vc_column-inner,
.lenerd_contact_panel .lenerd_contact_panel_contact_form>.vc_column-inner {
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.lenerd_contact_panel .lenerd_contact_panel_contact_details>.vc_column-inner {
   background-color: var(--logo-primary);
   padding: 35px;
}

.lenerd_contact_panel .lenerd_contact_panel_contact_details *,
.lenerd_contact_panel .lenerd_contact_panel_contact_details .icon_with_text_text *:not(:hover) {
   color: #ffffff !important;
}

.lenerd_contact_panel .lenerd_contact_panel_contact_details a:hover {
   color: #ffffff !important;
}

.lenerd_contact_panel .lenerd_contact_panel_contact_form>.vc_column-inner {
   background-color: #ffffff;
   padding: 35px;
}

@media only screen and (min-width: 1000px) {
   .lenerd_contact_panel .full_section_inner {
      display: flex;
      align-items: center;
   }

   .lenerd_contact_panel .lenerd_contact_panel_contact_details {
      width: 36%;
      margin-right: -5%;
      z-index: 2;
   }

   .lenerd_contact_panel .lenerd_contact_panel_contact_form {
      width: 64%;
   }

   .lenerd_contact_panel .lenerd_contact_panel_contact_form>.vc_column-inner {
      padding-left: calc(5% + 40px);
   }
}

@media only screen and (max-width: 999px) {

   .lenerd_contact_panel .lenerd_contact_panel_contact_details,
   .lenerd_contact_panel .lenerd_contact_panel_contact_form {
      width: 100%;
   }

   .lenerd_contact_panel .lenerd_contact_panel_contact_details {
      margin-bottom: 60px;
   }
}

/******************
* Contact form 7
******************/

input.wpcf7-form-control.wpcf7-text:focus,
textarea.wpcf7-form-control.wpcf7-textarea:focus,
select.wpcf7-form-control.wpcf7-select:focus,
input.wpcf7-form-control.wpcf7-date:focus {
   box-shadow: 0 0 20px var(--logo-primary);
   transition: 0.3s ease;
}

input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea,
select.wpcf7-form-control.wpcf7-select,
input.wpcf7-form-control.wpcf7-date {
   border: 1px solid var(--web-text-secondary);
   transition: 0.3s ease;
}

.wpcf7-acceptance .wpcf7-list-item {
   margin-left: 0;
}

.lenerd_form_half_width_row {
   display: flex !important;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   justify-content: space-between;
   align-items: center;
}

.lenerd_form_half_width_row .lenerd_form_half_width_item {
   width: calc(100% / 2 - 10px);
   box-sizing: border-box;
}

.lenerd_form_container p {
   padding: 0 !important;
   margin: 0 !important;
}

#respond textarea,
#respond input[type='text'],
#respond input[type='email'],
.contact_form input[type='text'],
.contact_form textarea,
.comment_holder #respond textarea,
.comment_holder #respond input[type='text'],
.comment_holder #respond input[type='email'],
input.wpcf7-form-control.wpcf7-text,
input.wpcf7-form-control.wpcf7-number,
input.wpcf7-form-control.wpcf7-date,
textarea.wpcf7-form-control.wpcf7-textarea,
select.wpcf7-form-control.wpcf7-select,
input.wpcf7-form-control.wpcf7-quiz,
.post-password-form input[type='password'] {
   color: var(--web-text-primary);
   border-radius: 10px;
}

.wpcf7-submit {
   border-radius: 20px !important;
}

.lenerd_captcha_form_block {
   margin-top: 30px;
   max-width: 100%;
   overflow: hidden;
}

.lenerd_captcha_form_block p {
   color: var(--web-text-secondary);
   margin-bottom: 0 !important;
   text-align: right;
}

.lenerd_captcha_form_block .wpcf7-turnstile,
.lenerd_captcha_form_block .cf-turnstile,
.lenerd_captcha_form_block .cf-turnstile>div,
.lenerd_captcha_form_block .cf-turnstile iframe {
   max-width: 100% !important;
}

.lenerd_captcha_form_block .wpcf7-turnstile,
.lenerd_captcha_form_block .cf-turnstile {
   width: 100%;
}

.lenerd_captcha_form_block .cf-turnstile iframe {
   display: block;
}

@media only screen and (max-width: 768px) {
   .lenerd_form_half_width_row {
      display: block !important;
   }

   .lenerd_form_half_width_row .lenerd_form_half_width_item {
      width: 100%;
      margin-bottom: 15px;
   }

   .lenerd_interitemcontent_margin_bottom {
      margin-bottom: 0;
   }
}

/* ================================
Note CSS
=============================== */

.lenerd_note {
   margin: 1.5rem 0;
}

.lenerd_note .wpb_wrapper {
   padding: 1rem 1.15rem;
   border-left: 4px solid var(--nerd-note-color, var(--logo-dark));
   background: var(--nerd-note-bg, rgba(0, 0, 0, 0.04));
   border-radius: 0.65rem;
}

.lenerd_note p {
   margin: 0;
   font-size: 0.95rem;
   line-height: 1.55;
}

.lenerd_note p::before {
   content: "NOTE:";
   display: inline-block;
   margin-right: 0.45rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   color: var(--nerd-note-color, var(--logo-dark));
}

.lenerd_note_phd {
   --nerd-note-color: var(--nerd-color-phd);
   --nerd-note-bg: var(--nerd-color-phd-bg);
}

.lenerd_note_web {
   --nerd-note-color: var(--nerd-color-web);
   --nerd-note-bg: var(--nerd-color-web-bg);
}

.lenerd_note_it {
   --nerd-note-color: var(--nerd-color-it);
   --nerd-note-bg: var(--nerd-color-it-bg);
}

.lenerd_note_ai {
   --nerd-note-color: var(--nerd-color-ai);
   --nerd-note-bg: var(--nerd-color-ai-bg);
}

.lenerd_note_law {
   --nerd-note-color: var(--nerd-color-law);
   --nerd-note-bg: var(--nerd-color-law-bg);
}

.lenerd_note_car {
   --nerd-note-color: var(--nerd-color-car);
   --nerd-note-bg: var(--nerd-color-car-bg);
}