/*
Theme Name: Werkenbij Janssen
Text Domain: werkenbij-janssen
Version: 2.0
Author: TIC Online Marketing
Author URI: https://ticonlinemarketing.nl/
*/
/*
==========================================
Variables
==========================================
*/
/*
==========================================
Reset & Base
==========================================
*/
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { font-family: "Inter", sans-serif; color: #1a1a1a; background-color: #ffffff; line-height: 1.65; -webkit-font-smoothing: antialiased; }

img { max-width: 100%; height: auto; display: block; }

iframe { max-width: 100%; }

header ul, footer ul { list-style: none; margin: 0; padding: 0; }

p:last-of-type { margin-bottom: 0; }

input:not([type="checkbox"]), textarea { -webkit-appearance: none; border-radius: 4px; }

/*
==========================================
Typography
==========================================
*/
h1, h2, h3, h4, h5, h6 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }

.section-title { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 1rem; }

.section-intro { font-size: 1.125rem; color: #4a4a4a; max-width: 60ch; }

/*
==========================================
Links & Buttons
==========================================
*/
a { color: #ed7218; text-decoration: none; font-weight: 600; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; }
a:hover { color: #c35b0f; text-decoration: underline; }

p a { color: inherit; }

.btn, .wpcf7-form .wpcf7-submit { font-family: "Inter", sans-serif; font-weight: 600; border-radius: 4px; padding: 0.6rem 1.4rem; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; border: 2px solid transparent; letter-spacing: 0.01em; }

.btn-primary, .wpcf7-form .wpcf7-submit { background-color: #ed7218; border-color: #ed7218; color: #ffffff; }
.btn-primary:hover, .wpcf7-form .wpcf7-submit:hover, .btn-primary:focus, .wpcf7-form .wpcf7-submit:focus { background-color: #cc6010; border-color: #cc6010; color: #ffffff; -webkit-transform: translateY(-1px); transform: translateY(-1px); -webkit-box-shadow: 0 4px 12px rgba(237, 114, 24, 0.35); box-shadow: 0 4px 12px rgba(237, 114, 24, 0.35); }

.btn-outline-primary { color: #ed7218; border-color: #ed7218; background: transparent; }
.btn-outline-primary:hover { background-color: #ed7218; color: #ffffff; -webkit-transform: translateY(-1px); transform: translateY(-1px); }

.btn-light { background-color: #ffffff; color: #1a1a1a; border-color: #ffffff; }
.btn-light:hover { background-color: #f8f8f6; color: #1a1a1a; }

.button-primary, .button-secondary, .button-outline-primary { display: inline-block; padding: 0.6rem 1.4rem; border-radius: 4px; font-weight: 600; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
.button-primary:hover, .button-secondary:hover, .button-outline-primary:hover { text-decoration: none; -webkit-transform: translateY(-1px); transform: translateY(-1px); }

.button-primary { background-color: #ed7218; color: #ffffff; }

.button-secondary { background-color: #009dde; color: #ffffff; }

.button-outline-primary { color: #ed7218; border: 2px solid #ed7218; background: none; }
.button-outline-primary:hover { background-color: #ed7218; color: #ffffff; }

/*
==========================================
Navigatie
==========================================
*/
#main-nav .nav-logo { height: 32px; width: auto; }
@media (min-width: 992px) { #main-nav .nav-link { letter-spacing: 0.04em; padding-top: 1.4rem; padding-bottom: 1.4rem; }
  #main-nav .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0.5rem; right: 0.5rem; height: 3px; background-color: #ed7218; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 0.25s ease; transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease; transition: transform 0.25s ease, -webkit-transform 0.25s ease; }
  #main-nav .nav-link:hover::after, #main-nav .nav-link.active::after { -webkit-transform: scaleX(1); transform: scaleX(1); } }
#main-nav .dropdown-menu { --bs-dropdown-bg: #1a1a1a; --bs-dropdown-border-color: rgba(255, 255, 255, 0.1); --bs-dropdown-link-color: rgba(255, 255, 255, 0.75); --bs-dropdown-link-hover-color: #ffffff; --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08); --bs-dropdown-link-active-bg: #ed7218; }

#searchModal .search-form { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.5rem; }
#searchModal .search-field { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0.75rem 1rem; font-size: 1.1rem; border: none; border-radius: 4px; background-color: rgba(255, 255, 255, 0.08); color: #ffffff; outline: none; }
#searchModal .search-field::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.4); }
#searchModal .search-field:-ms-input-placeholder { color: rgba(255, 255, 255, 0.4); }
#searchModal .search-field::-ms-input-placeholder { color: rgba(255, 255, 255, 0.4); }
#searchModal .search-field::placeholder { color: rgba(255, 255, 255, 0.4); }
#searchModal .search-field:focus { background-color: rgba(255, 255, 255, 0.14); }
#searchModal .search-submit { padding: 0.75rem 1.5rem; background-color: #ed7218; color: #ffffff; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; -webkit-transition: background-color 0.25s ease; transition: background-color 0.25s ease; }
#searchModal .search-submit:hover { background-color: #cc6010; }

/*
==========================================
Hero Video
==========================================
*/
.hero-video { position: relative; min-height: 85vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; background-color: #1a1a1a; }
.hero-video__bg { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.hero-video__bg--image { background-size: cover; background-position: center; }
.hero-video__overlay { position: absolute; inset: 0; background-color: #1a1a1a; }
.hero-video__content { position: relative; z-index: 2; padding: 6rem 0; color: #ffffff; }
.hero-video__eyebrow { display: inline-block; font-family: "Inter", sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #ed7218; margin-bottom: 1rem; }
.hero-video__title { font-size: clamp(2.5rem, 7vw, 5rem); color: #ffffff; margin-bottom: 1.5rem; line-height: 1.05; }

/*
==========================================
Header template parts
==========================================
*/
/*
==========================================
Vacatures Grid
==========================================
*/
.vacatures-grid { background-color: #f8f8f6; }

.vacatures-filter { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.5rem; }
.vacatures-filter .filter-btn { background: #ffffff; border: 2px solid #e8e8e8; border-radius: 99px; padding: 0.4rem 1.1rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; color: #4a4a4a; }
.vacatures-filter .filter-btn:hover, .vacatures-filter .filter-btn.active { background-color: #ed7218; border-color: #ed7218; color: #ffffff; }

.vacature-item { -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease; transition: opacity 0.25s ease, -webkit-transform 0.25s ease; transition: opacity 0.25s ease, transform 0.25s ease; transition: opacity 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease; }
.vacature-item.hidden { display: none; }

.vacature-card { background: #ffffff; border-radius: 8px; -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease; transition: -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease; transition: box-shadow 0.25s ease, transform 0.25s ease; transition: box-shadow 0.25s ease, transform 0.25s ease, -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease; }
.vacature-card:hover { -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14); -webkit-transform: translateY(-3px); transform: translateY(-3px); }
.vacature-card__image-link { display: block; overflow: hidden; }
.vacature-card__image { height: 220px; background-size: cover; background-position: center; -webkit-transition: -webkit-transform 0.45s ease; transition: -webkit-transform 0.45s ease; transition: transform 0.45s ease; transition: transform 0.45s ease, -webkit-transform 0.45s ease; }
.vacature-card:hover .vacature-card__image { -webkit-transform: scale(1.04); transform: scale(1.04); }
.vacature-card__body { padding: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.vacature-card__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.vacature-card__tag { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.6rem; background-color: rgba(237, 114, 24, 0.1); color: #ed7218; border-radius: 99px; }
.vacature-card__tag--afdeling { background-color: rgba(0, 157, 222, 0.1); color: #009dde; }
.vacature-card__title { font-size: 1.25rem; margin-bottom: 0.75rem; }
.vacature-card__title a { color: #1a1a1a; font-weight: 700; }
.vacature-card__title a:hover { color: #ed7218; text-decoration: none; }
.vacature-card__excerpt { font-size: 0.9rem; color: #4a4a4a; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-bottom: 1.25rem; }
.vacature-card__cta { -ms-flex-item-align: start; align-self: flex-start; }

.vacatures-empty { color: #4a4a4a; }

/*
==========================================
Stats Counter
==========================================
*/
.stat-item__icon { font-size: 2.5rem; color: #ffffff; opacity: 0.7; }
.stat-item__number { font-family: "Barlow Condensed", sans-serif; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; color: #ffffff; line-height: 1; margin-bottom: 0.5rem; }
.stat-item__label { font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); font-weight: 500; }

/*
==========================================
Employee Slider
==========================================
*/
.employee-carousel .carousel-item { padding: 1rem 0; }

.employee-card__media { border-radius: 8px; overflow: hidden; }
.employee-card__foto, .employee-card__gif { width: 100%; height: 420px; -o-object-fit: cover; object-fit: cover; border-radius: 8px; display: block; }
.employee-card__quote { font-family: "Barlow Condensed", sans-serif; font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 600; line-height: 1.35; color: #1a1a1a; margin-bottom: 1.5rem; position: relative; padding-left: 2rem; }
.employee-card__quote-icon { position: absolute; left: 0; top: 0.1em; font-size: 1.2rem; color: #ed7218; opacity: 0.5; }
.employee-card__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.3rem; }
.employee-card__naam { font-family: "Barlow Condensed", sans-serif; font-size: 1.25rem; color: #1a1a1a; }
.employee-card__functie { font-size: 0.9rem; color: #ed7218; font-weight: 600; }
.employee-card__jaren { font-size: 0.85rem; color: #4a4a4a; }
.employee-card__jaren i { margin-right: 0.3rem; }

.carousel-controls { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; }

.carousel-control-prev-custom, .carousel-control-next-custom { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #e8e8e8; background: #ffffff; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; color: #1a1a1a; -ms-flex-negative: 0; flex-shrink: 0; }
.carousel-control-prev-custom:hover, .carousel-control-next-custom:hover { border-color: #ed7218; color: #ed7218; }

.carousel-indicators-custom { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.5rem; }
.carousel-indicators-custom button { width: 8px; height: 8px; border-radius: 50%; border: none; background: #e8e8e8; cursor: pointer; -webkit-transition: background 0.25s ease; transition: background 0.25s ease; padding: 0; }
.carousel-indicators-custom button.active { background: #ed7218; width: 24px; border-radius: 4px; }

/*
==========================================
Benefits Grid
==========================================
*/
.benefit-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 1rem; }
.benefit-item__icon-wrap { width: 48px; height: 48px; border-radius: 12px; background-color: rgba(237, 114, 24, 0.1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; }
.benefit-item__icon { font-size: 1.2rem; color: #ed7218; }
.benefit-item__title { font-size: 1.1rem; margin-bottom: 0.3rem; }
.benefit-item__description { font-size: 0.9rem; color: #4a4a4a; margin-bottom: 0; }

/*
==========================================
Projects Showcase
==========================================
*/
.project-card { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; }
.project-card__image { width: 100%; height: 320px; background-size: cover; background-position: center; -webkit-transition: -webkit-transform 0.45s ease; transition: -webkit-transform 0.45s ease; transition: transform 0.45s ease; transition: transform 0.45s ease, -webkit-transform 0.45s ease; position: relative; overflow: hidden; }
.project-card__video { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; }
.project-card:hover .project-card__video { opacity: 1; }
.project-card__overlay { position: absolute; inset: 0; background: -webkit-gradient(linear, left bottom, left top, from(rgba(26, 26, 26, 0.85)), color-stop(60%, rgba(26, 26, 26, 0.1)), to(transparent)); background: linear-gradient(to top, rgba(26, 26, 26, 0.85) 0%, rgba(26, 26, 26, 0.1) 60%, transparent 100%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 1.5rem; -webkit-transition: background 0.25s ease; transition: background 0.25s ease; }
.project-card:hover .project-card__image { -webkit-transform: scale(1.04); transform: scale(1.04); }
.project-card__content { color: #ffffff; }
.project-card__title { font-size: 1.35rem; color: #ffffff; margin-bottom: 0.4rem; }
.project-card__description { font-size: 0.875rem; opacity: 0.8; margin-bottom: 0.75rem; }

/*
==========================================
CTA Banner
==========================================
*/
.cta-banner__title { font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin-bottom: 0.5rem; }
.cta-banner__text { opacity: 0.9; font-size: 1.05rem; }

/*
==========================================
Contact Form
==========================================
*/
.contact-form-section { background-color: #f8f8f6; }

.contact-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.75rem; }
.contact-info__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
.contact-info__icon { width: 20px; color: #ed7218; text-align: center; }

.wpcf7-form .wpcf7-text, .wpcf7-form .wpcf7-email, .wpcf7-form .wpcf7-textarea, .wpcf7-form .wpcf7-file, .wpcf7-form .wpcf7-select { width: 100%; padding: 0.6rem 0.9rem; border: 2px solid #e8e8e8; border-radius: 4px; font-family: "Inter", sans-serif; font-size: 0.95rem; -webkit-transition: border-color 0.25s ease; transition: border-color 0.25s ease; background: #ffffff; }
.wpcf7-form .wpcf7-text:focus, .wpcf7-form .wpcf7-email:focus, .wpcf7-form .wpcf7-textarea:focus, .wpcf7-form .wpcf7-file:focus, .wpcf7-form .wpcf7-select:focus { outline: none; border-color: #ed7218; }
.wpcf7-form .wpcf7-textarea { min-height: 130px; resize: vertical; }
.wpcf7-form .wpcf7-submit { width: 100%; cursor: pointer; }
.wpcf7-form .wpcf7-response-output { border-radius: 4px; padding: 0.75rem 1rem; margin-top: 1rem; font-size: 0.9rem; }

/*
==========================================
Footer
==========================================
*/
footer { background-color: #1a1a1a; color: rgba(255, 255, 255, 0.8); }
footer ul, footer ul li { padding-left: 0; }
footer a { color: rgba(255, 255, 255, 0.7); font-weight: 400; }
footer a:hover { color: #ffffff; text-decoration: none; }
footer h5, footer h6 { color: #ffffff; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.25rem; }
footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); }
footer .footer-bottom a { color: rgba(255, 255, 255, 0.5); }

/*
==========================================
Blog card (bestaand, verbeterd)
==========================================
*/
.blog-card { border: none; border-radius: 8px; -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden; -webkit-transition: -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease; transition: -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease; transition: box-shadow 0.25s ease, transform 0.25s ease; transition: box-shadow 0.25s ease, transform 0.25s ease, -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease; }
.blog-card:hover { -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14); -webkit-transform: translateY(-3px); transform: translateY(-3px); }
.blog-card .category-tag { font-size: 0.78rem; font-weight: 600; }
.blog-card .category-tag a { color: #009dde; }
.blog-card .category-tag a:hover { color: #ed7218; }

/*
==========================================
Spacing utilities
==========================================
*/
.pt-6 { padding-top: 4rem; }

.pb-6 { padding-bottom: 4rem; }

.pt-7 { padding-top: 6.5rem; }

.pb-7 { padding-bottom: 6.5rem; }

.pt-8 { padding-top: 9rem; }

.pb-8 { padding-bottom: 9rem; }

@media (min-width: 992px) { .pt-6 { padding-top: 5rem; }
  .pb-6 { padding-bottom: 5rem; }
  .pt-7 { padding-top: 7.5rem; }
  .pb-7 { padding-bottom: 7.5rem; }
  .pt-8 { padding-top: 10rem; }
  .pb-8 { padding-bottom: 10rem; } }
/*
==========================================
Reduced motion
==========================================
*/
@media (prefers-reduced-motion: reduce) { .hero-video__bg, .vacature-card, .project-card, .employee-card__foto { -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; }
  html { scroll-behavior: auto; } }
/*
==========================================
Single Vacature
==========================================
*/
.vacature-hero { min-height: 55vh; background-size: cover; background-position: center; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
.vacature-hero__overlay { position: absolute; inset: 0; background: -webkit-gradient(linear, left bottom, left top, from(rgba(26, 26, 26, 0.8)), color-stop(70%, rgba(26, 26, 26, 0.2)), to(transparent)); background: linear-gradient(to top, rgba(26, 26, 26, 0.8) 0%, rgba(26, 26, 26, 0.2) 70%, transparent 100%); }
.vacature-hero__content { position: relative; z-index: 2; padding-bottom: 3rem; color: #ffffff; }

.vacature-sidebar { background: #f8f8f6; border-radius: 8px; padding: 1.75rem; position: -webkit-sticky; position: sticky; top: 90px; }
.vacature-sidebar__title { font-size: 1.3rem; margin-bottom: 0.75rem; }