/*
Theme Name: De Saak website
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Child theme van "hello elementor" voor De Saak
Author: Wessel Oud
Author URI: https://wesseloud.nl
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ================================
   Design Tokens
   ================================ */
:root {
  /* Colors */
  --white: #FFFFFF;
  --very-light-grey: #E7EFEF;
  --light-grey: #587685;
  --grey: #46616D;
  --dark-grey: #314047;
  --blackout: #051A1E;
  --blue: #405C65;
  --dark-blue: #1A596B;
  --tailwind: #7FDcdf;

  /* Content widths / side margins */
  --content-narrow: 600px;   /* e.g. blog text */
  --content-medium: 900px;   /* e.g. main content */
  --content-wide: 1200px;    /* e.g. full sections */
}

/* ================================
   Base
   ================================ */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

/* ================================
   Layout
   ================================ */
.site-header .header-inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  width: 100%;
}

.elementor-kit-5 h3 {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.562rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* ================================
   Components
   ================================ */

/* Header Button - base styles */
#header-button {
  padding: 20px 32px;
  background-color: #BADF7F;
  color: #051a1e !important;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  
}

#header-button:hover {
  background-color: #C8E599;
}

/* Blue typewriter cursor - Homepage only */
body.home .anim-typewriter-cursor {
  color: #7fdcdf;
}


/* Text container inside header button */
#header-button .e-n-menu-title-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1;
}

/* Original text */
#header-button .e-n-menu-title-text {
  display: block;
  position: relative;
  z-index: 1;
  transform: translateY(0);
  transition: transform 0.4s ease;
}

/* Clone text */
#header-button .e-n-menu-title-text::after {
  content: "Plan een kennismaking";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  color: #051a1e;
  font-weight: 600;
  text-align: center;
  transition: top 0.4s ease;
}

/* Hover state */
#header-button:hover .e-n-menu-title-text {
  transform: translateY(-100%);
}

#header-button:hover .e-n-menu-title-text::after {
  top: 100%;
}



/* ================================
   Utilities
   ================================ */
.reveal-text {
  display: block;
  position: relative;
}

.line-wrap {
  overflow: hidden;
  display: block;
}

.reveal-text .line {
  display: block;
}

/* =========================================
   Header and Navigation (migrated from widgets)
   ========================================= */

.header-inner {
  background-color: #fff;
  box-shadow:
    0 2px 6px rgba(70, 97, 109, 0.08),
    0 6px 20px rgba(70, 97, 109, 0.06),
    0 12px 40px rgba(70, 97, 109, 0.04);
}

.menu-item-active span {
  color: #1a596b !important;
  cursor: pointer;
}

#header-button {
  border-radius: 6px;
  margin-left: 40px;
}

.header-inner .e-n-menu-title:not(#header-button):hover .e-n-menu-dropdown-icon svg,
.header-inner .e-n-menu-title:not(#header-button).e.current .e-n-menu-dropdown-icon svg {
  fill: #1a596b;
}

#header-button .e-n-menu-title-text,
#header-button .e-n-menu-dropdown-icon {
  color: #051a1e !important;
}

.page-id-2751 .header-inner-mobile .logo-light { opacity: 0; }
.page-id-2751 .header-inner-mobile .logo-dark { opacity: 1; }

/* =========================================
   Mobile Header and Menu
   ========================================= */

.header-inner-mobile {
  background-color: transparent;
  transition: background-color 0.4s ease;
}

.elementor-sticky--active .header-inner-mobile {
  background-color: #fff;
}

/* Center + consistent spacing for mobile menu */

/* Add same horizontal padding as header inner */
.site-header-mobile .e-n-menu-heading,
.site-header-mobile .e-n-menu-dropdown-content,
.site-header-mobile .e-n-menu ul {
  padding-left: 20px;
  padding-right: 20px;
}

/* Optional: subtle hover color */
.site-header-mobile .e-n-menu-item:hover .e-n-menu-title-text {
  color: #1a596b;
}

/* Ensure dropdown isn’t clipped or misaligned */
.site-header-mobile .e-n-menu-dropdown-content {
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 2px 6px rgba(70,97,109,0.08),
    0 6px 20px rgba(70,97,109,0.06),
    0 12px 40px rgba(70,97,109,0.04);
}

#header-button-mobile {
  border-radius: 0px 0px 6px 6px;
  background-color: #BADF7F;
}

.site-header-mobile .e-n-menu-heading > .e-n-menu-item:first-child {
  border-radius: 6px 6px 0px 0px;
}

/* =========================================
   Logo Behavior
   ========================================= */

.site-logo {
  position: relative;
  display: inline-block;
}

.site-logo img {
  display: block;
  height: auto;
}

@media (max-width: 768px) {
  .site-logo {
    max-width: 140px;
  }
}

/* Container */
.logo-light,
.logo-dark {
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.3s ease;
}

/* Alleen wit zichtbaar bij start */
.logo-light { opacity: 0; }
.logo-dark { opacity: 1; }


.header-inner-mobile .logo-light { opacity: 1; }
.header-inner-mobile .logo-dark { opacity: 0; }

.elementor-sticky--active .header-inner-mobile .logo-light { opacity: 0; }
.elementor-sticky--active .header-inner-mobile .logo-dark { opacity: 1; }

/* =========================================
   Buttons
   ========================================= */

/* Small Button */
.btn-small {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1lh;
}

/* Original text */
.btn-small .elementor-button-text {
  display: block;
  position: relative;
  z-index: 1;
  transform: translateY(0);
  transition: transform 0.4s ease;
}

/* Clone text */
.btn-small .elementor-button-text::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  color: inherit;
  text-align: center;
  transition: top 0.4s ease;
}

/* Hover state */
.btn-small:hover .elementor-button-text {
  transform: translateY(-100%);
}

.btn-small:hover .elementor-button-text::after {
  top: 100%;
}

.btn-small .elementor-button-icon svg {
  width: 26px;
  height: auto;
  transition: transform 0.3s ease;
}

.btn-small:hover .elementor-button-icon svg {
  transform: rotate(-45deg)
}

.btn-large {
  position: relative;
  display: inline-block;
  line-height: 1lh;
  width: inherit;
}

.btn-large .elementor-button-content-wrapper {
  overflow: hidden;
}

/* Original text */
.btn-large .elementor-button-text {
  position: relative;
  z-index: 1;
  transform: translateY(0);
  transition: transform 0.4s ease;
}

/* Clone text */
.btn-large .elementor-button-text::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  color: inherit;
  text-align: center;
  transition: top 0.4s ease;
}

/* Hover state */
.btn-large:hover .elementor-button-text {
  transform: translateY(-100%);
}

.btn-large:hover .elementor-button-text::after {
  top: 100%;
}

/* Hero Button */
.hero-button .elementor-button-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  padding: 8px;
  height: 32px;
  border: white 1px solid;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.hero-button .elementor-button-icon svg {
  animation: bounceY 2s infinite ease-in-out;
}

@keyframes bounceY {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}

/* =========================================
   Homepagina
   ========================================= */

/* ---------- Oplossing Card ---------- */

/* Oplossing cards with smooth fade both directions */
/* Oplossing cards with persistent hover + smooth transition */
.oplossing-card {
  position: relative;
  background-color: #46616d; /* default for odd, overridden below */
  transition: background-color 0.3s ease;
  overflow: hidden;
}

/* Even items */
.e-loop-item:nth-child(even) .oplossing-card {
  background-color: #587685;
}

/* Keep hover active even when hovering inner widgets */
.oplossing-card * {
  pointer-events: none;
}

/* Restore pointer events for actual clickable elements if needed (e.g. links inside) */
/* .oplossing-card a { pointer-events: auto; } */

/* Hover color */
.e-loop-item:hover .oplossing-card,
.oplossing-card:hover {
  background-color: #314047;
}

/* Arrow rotation */
.oplossing-card .card-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.oplossing-card:hover .card-icon {
  transform: rotate(-45deg);
}


.oplossing-icon img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(6%) saturate(1667%) hue-rotate(154deg) brightness(93%) contrast(90%) drop-shadow(0 0 0 transparent);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.oplossing-card:hover .oplossing-icon img {
  filter: brightness(1) saturate(120%) invert(0%) sepia(0%) saturate(200%) hue-rotate(0deg) brightness(100%) contrast(100%) drop-shadow(0 3px 3px #051A1E);
  transform: translateY(-2px);
}

/* Base pill container */
.category-pill {
  font-size: 0.92rem;
  color: #000000;
  background-color: #ffffff; /* default fallback */
}

/* Parent with .category-pill that CONTAINS a .category-news child */
.category-pill:has(.category-nieuws) {
  background-color: #EBE0E0;
  color: #6d4646;
  border: 1px solid #d6b1b1;
}

.category-pill:has(.category-inzichten) {
  background-color: #E9EBE0;
  color: #666d46;
  border: 1px solid #b7be98;
}

.category-pill:has(.category-klantverhalen) {
  background-color: #E0E1EB;
  color: #46496d;
  border: 1px solid #a0a3c9;
}

/* Subtle blue overlay for news images */
.news-image {
  position: relative;
  overflow: hidden;
}

.news-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #31404757; /* light blue overlay */
  pointer-events: none; /* keep image clickable */
  border-radius: 8px;
  transition: opacity 0.3s ease;
}

/* Optional: slightly stronger on hover */
.news-image:hover::after {
  opacity: 0.20;
}

.news-image img {
  display: block;
  position: relative;
  z-index: 0;
}

.news-image::after {
  z-index: 1;
}



/* Normalize list indentation in Elementor text blocks */
.elementor ul,
.elementor ol {
  padding-left: 1.8em; /* default is often 2em or more */
  margin-block-start: 0.3em;
  margin-block-end: 1em;
}

.elementor p:has(+ ul),
.elementor p:has(+ ol) {
  margin-block-end: 0.2em;
}

/* Remove bottom margin from the last paragraph in a section */
.elementor p:last-child {
  margin-block-end: 0;
}

.veelgestelde-vragen-accordeon .e-n-accordion-item-title-icon {
  margin-left: auto;
}

.veelgestelde-vragen-accordeon .elementor-widget-text-editor a {
  text-decoration: underline;
  text-decoration-color: inherit;
  color: inherit;
}

.veelgestelde-vragen-accordeon .elementor-widget-text-editor a:hover {
  text-decoration: none;
}

.hero-circles {
  opacity: 0.3;
  z-index: 0 !important;
}

.oplossingen-hero-image {
  z-index: 1 !important
}

/* ─── Type Scale + Line Height ───────────────── */
.post-content h1 {
  font-size: clamp(2.5rem, 1.25rem + 6.25vw, 6.875rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.post-content h2 {
  font-size: clamp(1.5rem, 1.21rem + 1.43vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.post-content h3 {
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.562rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.post-content h4 {
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.post-content p,
.post-content li {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.5;
}
.post-content small {
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1.4;
}

.post-content a {
	color: var(--e-global-color-text);
    text-decoration: underline;
}



/* ─── Spacing ────────────────────────────────── */
.post-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.post-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.post-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.375rem;
}
.post-content p {
  margin-bottom: 1rem;
}
.post-content h2:first-child,
.post-content h3:first-child {
  margin-top: 0;
}