/*
Theme Name: MexDot Child
Theme URI: https://cenabis.de/
Description: Child theme for MexDot
Author: Cenabis
Template: mexdot
Version: 1.0.0
Text Domain: mexdot-child
*/

/* ================================
   GLOBAL / BASE STYLES
   ================================ */
/* overflow-x: clip (NOT hidden) — clip has no scroll-container side-effect,
   so GSAP ScrollTrigger pinning and position:sticky both continue to work. */
body {
  overflow-x: clip;
}

.wpcf7-form-control-wrap.recaptcha{
	width:100%;
}

:root,
body,
body.version-dark,
body.version-light,
:root .v-light,
:root .v-dark,
.background-theme,
:root .v-light.v-light .background-theme {
  --theme-color: #ffb549;
  --bg-color: #ede9e7;
  --font-color: #623412;
  --heading-color: #623412;
  --assistant-color: #e7e2df;
  --farbwelt6-color: #633512;
  --body-font: "Raleway", -apple-system, sans-serif;
  --heading-font: "Raleway", -apple-system, sans-serif;
  --font-weight-body: 400;
  --font-weight-heading: 700;
  --font-size-h1: 36px;
}

/* ================================
   sticky social icon
   ================================ */

.social-side {
  mix-blend-mode: multiply;
  --heading-color: #623412; /* green tint */
}

/* ================================
   NAVIGATION / MENU
   ================================ */

.site-header {
  padding-top: 10px;   /* reduced to 10px */
  padding-bottom: 10px;
}


/* Hamburger menu - make submenus 50% wider */
@media only screen and (min-width: 992px) {
  .site-header.dsn-hamburger ul.primary-nav {
    width: 105%; /* 70% * 1.5 = 105% (50% wider) */
  }
}

/* Classic dropdown menu - make submenus 50% wider */
@media only screen and (min-width: 992px) {
  .site-header:not(.dsn-hamburger) ul.primary-nav > li ul {
    min-width: 400px; /* 200px * 1.5 = 300px (50% wider) */
  }
  
  /* Prevent right-side submenus from clipping outside viewport */
  .site-header:not(.dsn-hamburger) ul.primary-nav > li:last-child ul,
  .site-header:not(.dsn-hamburger) ul.primary-nav > li:nth-last-child(2) ul {
    right: 0;
    left: auto;
    margin-left: 0;
    margin-right: -20px;
  }
}

/* Mobile navbar — logo 50% smaller, logo + hamburger on one row */
@media (max-width: 1024px) {
  .site-header {
    padding: 14px 20px !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #site_menu_header .main-logo img {
    width: 50px !important;
    height: auto !important;
  }
}

/* ================================
   TYPOGRAPHY
   ================================ */

/* Replace square-before / square-after with custom Cenabis-C SVG
   ---------------------------------------------------------------
   Adjust --cenabis-c-size to resize the icon.
   --cenabis-c-gap controls the space between the icon and the text.
   Both values together drive the padding-left that reserves real estate,
   so the text never overlaps the icon regardless of size.
   --------------------------------------------------------------- */
:root {
  --cenabis-c-size: 45px;   /* icon width & height */
  --cenabis-c-gap:  8px;    /* gap between icon and text */
}

.square-before {
  /* override the theme's hard-coded 25 px with the variable-driven value */
  padding-left: calc(var(--cenabis-c-size) + var(--cenabis-c-gap)) !important;
}

.square-before::before {
  background-color: transparent !important;
  background-image: url('./assets/Cenabis-C.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: var(--cenabis-c-size) !important;
  height: var(--cenabis-c-size) !important;
}

/* Also replace square-after if used */
.square-after {
  padding-right: calc(var(--cenabis-c-size) + var(--cenabis-c-gap)) !important;
}

.square-after::after {
  background-color: transparent !important;
  background-image: url('./assets/Cenabis-C.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: var(--cenabis-c-size) !important;
  height: var(--cenabis-c-size) !important;
}

.sm-p {
    font-size: 15px !important;
    letter-spacing: 1.5px;
}

h1,
.h1,
h2,
.h2 {
  font-family: "Antonio", sans-serif;
  font-weight: 600;
}

.title-h2 {
  font-size: 30px;
  line-height: 34px;
  letter-spacing: 1px;
}

.dsn-heading-title:not(.ah-headline) p:not(.animate-number), .dsn-heading-title:not(.ah-headline) span:not(.animate-number) {
    line-height: 34px;
}

p strong {
  font-weight: 600;
}

@media (min-width: 764px){
	.title-h2 {
	  font-size: var(--title-h2, 50px);
	  line-height: calc(var(--title-h2, 50px) + 3px);
	  --line-height-base: calc(var(--title-h2, 50px) + 3px);
	  letter-spacing: 2px;
	}
	
	.dsn-heading-title:not(.ah-headline) p:not(.animate-number), .dsn-heading-title:not(.ah-headline) span:not(.animate-number) {
    line-height: var(--line-height-base);
}
}

/* ================================
   COLOR THEMES (Farbwelten)
   ================================ */
.bg-cenabis-farbwelt2 {
  --assistant-color: #cfc3be;
  --font-color: #623412;
  --heading-color: #623412;
  --bg-color: #dcd4d0;
}

.bg-cenabis-farbwelt3 {
  --assistant-color: #8e6e58;
  --font-color: #ede9e7;
  --heading-color: #fff;
}

.bg-cenabis-farbwelt4 {
  --assistant-color: #ae8859;
  --font-color: #ede9e7;
  --heading-color: #fff;
}

.bg-cenabis-farbwelt6 {
  --assistant-color: #a6935b;
  --font-color: #fff;
  --heading-color: #fff;
	--bg-color: #988653;
}

/* ================================
   CENABIS STATEMENT SECTION
   ================================ */
.bg-cenabis-statement {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  --assistant-color: #ffb549;
  --font-color: #623412;
  --heading-color: #623412;
}

.bg-cenabis-statement .title-h2,
.cenabis-statement h3 {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 2px;
}

.statement-button {
  --assistant-color: #623412;
  --font-color: #ffb549;
  --heading-color: #ffb549;
}

/* ================================
   CONTACT FORM
   ================================ */
#contact-form-container {
  position: relative;
  min-height: 80vh;
  background-color: #cfc3be;
}

#contact-form {
  font-size: var(30px);
  font-family: var(--body-font);
  color: var(--heading-color);
}

#contact-form label {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-family: var(--body-font);
  color: var(--heading-color);
}

#contact-form label input,
#contact-form label textarea {
  border-radius: 15px;
  border: none;
  padding: 12px;
  margin-top: 4px;
  margin-bottom: 16px;
}

.wpcf7-form-control.wpcf7-submit.has-spinner {
  padding: 10px 40px;
  background-color: #623412;
  color: #fff;
  font-size: 14px;
  border-radius: 70px;
  cursor: pointer;
  transition: all 0.3s ease-in;
}

.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
  background-color: #45250d;
}

/* ================================
   FOOTER
   ================================ */

/* Fix footer to be full width */
#dsn_footer {
  width: 100%;
  max-width: 100%;
}

#dsn_footer_content.container {
  max-width: 100%;
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
}

/* If you want the inner content to still be constrained but background full width */
.cenabis-footer-inner {
  max-width: 1200px; /* or whatever max-width you want for content */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

footer .footer-content {
  padding-top: 40px;
  padding-bottom: 20px;
}

footer.footer-static,
footer .footer-content {
  font-size: 12.8px;
}

.cenabis-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cenabis-footer-logo img {
  height: 40px;
  width: auto;
  display: block;
}

.cenabis-footer-menu {
  display: flex;
  align-items: start;
  gap: 0;
}

.cenabis-footer-menu li {
  position: relative;
  padding: 0 4px;
}

.cenabis-footer-menu li:first-child {
  padding-left: 0;
}

.cenabis-footer-menu li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: currentColor;
  opacity: 0.3;
}

.cenabis-footer-menu a {
  text-decoration: none;
}

.cenabis-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cenabis-footer-copyright {
  font-size: 12.8px;
  opacity: 0.8;
  line-height: 1.4;
}

#menu-footer-main {
  padding-inline-start: 0;
}

/* ================================
   IMAGE SECTIONS
   ================================ */
@media (min-width: 1025px) {
   .cenabis-image-left{
	padding-right:50px;
	}

	.cenabis-image-right{
		padding-left:50px;
	}
}

.cenabis-img-section {
  position: relative !important;
  width: 40%;
  max-width: 480px;
  flex-shrink: 0;
  height: auto !important;
  min-height: unset !important;
  align-self: flex-start;
}

.cenabis-img-section .elementor-widget-dsn_image {
  position: relative !important;
  height: auto !important;
}

.cenabis-img-section .img-box-parallax {
  position: relative !important;
  width: 100%;
  padding-bottom: 150%;
  height: 0 !important;
  border-radius: 14px;
  overflow: hidden;
}

.cenabis-img-section .img-box-parallax img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 115% !important; /* extra height needed for parallax movement */
  object-fit: cover !important;
  object-position: top center;
}

.cenabis-img-row {
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
}

@media (max-width: 1024px) {
    .e-con.e-child:has(> .dsn-position-absolute.elementor-widget-dsn_image.cenabis-img-section), .cenabis-img-section {
        width: 450px;
    }
}

/* ================================
   LOGO HORIZONTAL SCROLL CAROUSEL
   ================================ */

/* Portfolio items without external links - disable click behavior */
.dsn-item-post a[href="#no-link"],
.dsn-item-post a[href="javascript:void(0)"] {
  pointer-events: none;
  cursor: default;
}

/* Remove hover effects on non-clickable items */
.dsn-item-post:has(a[href="#no-link"]) .box-image-bg,
.dsn-item-post:has(a[href="#no-link"]) .box-image-link {
  cursor: default;
}

.dsn-item-post:has(a[href="#no-link"]):hover .box-image-bg img {
  transform: none !important;
}

.dsn-grid-layout.dsn-posts.active-horizontal-scroll .dsn-item-post {
  width: 250px !important;
  min-width: 250px !important;
  height: 250px !important;
  flex-shrink: 0;
  background: transparent !important;
}

.dsn-grid-layout.dsn-posts.active-horizontal-scroll .dsn-item-post .box-content,
.dsn-grid-layout.dsn-posts.active-horizontal-scroll .dsn-item-post .elementor,
.dsn-grid-layout.dsn-posts.active-horizontal-scroll .dsn-item-post .e-con,
.dsn-grid-layout.dsn-posts.active-horizontal-scroll .dsn-item-post .elementor-widget-dsn_featured-image,
.dsn-grid-layout.dsn-posts.active-horizontal-scroll .dsn-item-post .elementor-widget-container,
.dsn-grid-layout.dsn-posts.active-horizontal-scroll .dsn-item-post .box-image-link,
.dsn-grid-layout.dsn-posts.active-horizontal-scroll .dsn-item-post .box-image-bg {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  background: transparent !important;
}

.dsn-grid-layout.dsn-posts.active-horizontal-scroll .box-image-bg img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 15px;
  box-sizing: border-box;
  background: transparent !important;
}

.dsn-grid-layout.dsn-posts.active-horizontal-scroll {
  height: auto !important;
  max-height: none !important;
}

.dsn-grid-layout.dsn-posts.active-horizontal-scroll .post-content {
  display: none !important;
}

.dsn-grid-layout.dsn-posts.active-horizontal-scroll .box-image-bg[data-overlay]::before,
.dsn-grid-layout.dsn-posts.active-horizontal-scroll .bg-shadow::before,
.dsn-grid-layout.dsn-posts.active-horizontal-scroll .bg-shadow::after {
  display: none !important;
}

/* ================================
   VERTICAL SCROLL PORTFOLIO (LOGO STYLE)
   ================================ */

/* Hide title, description, category - just show images */
.dsn-grid-layout.dsn-posts.active-v-scroll .post-content,
.dsn-grid-layout.dsn-posts.active-v-scroll .elementor-element-530cbd1,
.dsn-grid-layout.dsn-posts.active-v-scroll .elementor-widget-dsn_post_title,
.dsn-grid-layout.dsn-posts.active-v-scroll .elementor-widget-dsn_post_cat {
  display: none !important;
}

/* Remove dark overlay and shadows */
.dsn-grid-layout.dsn-posts.active-v-scroll .box-image-bg[data-overlay]::before,
.dsn-grid-layout.dsn-posts.active-v-scroll .bg-shadow::before,
.dsn-grid-layout.dsn-posts.active-v-scroll .bg-shadow::after {
  display: none !important;
}

/* Transparent backgrounds */
.dsn-grid-layout.dsn-posts.active-v-scroll .dsn-item-post,
.dsn-grid-layout.dsn-posts.active-v-scroll .box-content,
.dsn-grid-layout.dsn-posts.active-v-scroll .box-image-bg {
  background: transparent !important;
}

/* Image styling - contain instead of cover for logos */
.dsn-grid-layout.dsn-posts.active-v-scroll .box-image-bg img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 20px;
  box-sizing: border-box;
}

/* Non-clickable items styling */
.dsn-grid-layout.dsn-posts.active-v-scroll .dsn-item-post a[href="#no-link"],
.dsn-grid-layout.dsn-posts.active-v-scroll .dsn-item-post a[href="javascript:void(0)"] {
  pointer-events: none;
  cursor: default;
}

.dsn-grid-layout.dsn-posts.active-v-scroll .dsn-item-post:has(a[href="#no-link"]) .box-image-bg,
.dsn-grid-layout.dsn-posts.active-v-scroll .dsn-item-post:has(a[href="#no-link"]) .box-image-link {
  cursor: default;
}

/* ================================
   MOBILE RESPONSIVE
   ================================ */
@media (max-width: 1024px) {
  .e-con.e-child:has(.dsn-position-absolute.elementor-widget-dsn_image),
  .cenabis-img-section {
    width: 100%;
    max-width: 100%;
  }

  .dsn-grid-layout.dsn-posts.active-horizontal-scroll .dsn-item-post {
    width: 180px !important;
    min-width: 180px !important;
    height: 180px !important;
  }
}



.fill-custom .dsn-fill:not(.color-light) span.word{
    -webkit-text-fill-color: rgba(98, 52, 18, 0.4); ; /* Using --font-color with low opacity */
  ;
}

/* Fix: .dsn-fill and dsn_heading widget both run Splitting.js on the same
   elements. The second pass re-wraps existing .word spans, destroying the
   .whitespace siblings that normally provide spacing. Restore word gaps by
   adding margin-right to each outer .word span (direct children only, so
   the inner double-nested spans are not affected). */
.dsn-heading-title > span.word {
    margin-right: 0.25em;
}
.dsn-heading-title > span.word:last-child {
    margin-right: 0;
}

/* ================================
   REFERENZEN — heading sticks during horizontal scroll (desktop only)
   ================================
   GSAP pins the grid (.elementor-element-3973432) with a tall pin-spacer,
   but the heading (.elementor-element-4421f32) is a flex sibling above it
   and scrolls away during the horizontal scroll sequence.
   Making it sticky keeps it anchored at the same visual position throughout.

   Adjust --referenzen-heading-top to fine-tune the distance from the
   top of the viewport (should typically clear the sticky site header).
   ================================ */
:root {
  --referenzen-heading-top: 140px;
}

/* Clip horizontal overflow from GSAP-scrolled grid items without creating
   a scroll container (which would break pinning and sticky). */
#referenzen {
  overflow-x: clip;
}

@media (min-width: 1025px) {
  #referenzen > .elementor-element-4421f32 {
    position: sticky;
    top: var(--referenzen-heading-top);
    /* flex-start is required — without it the sticky child stretches to match
       the sibling height and sticky stops working in a flex container */
    align-self: flex-start;
    /* restore full width that flex-start would otherwise shrink */
    width: 100%;
    z-index: 5;
    /* No transition — JS updates top every scroll frame to hold the lock
       position; a transition would make the heading lag visibly behind. */
  }
}



/* other */
.overlapped_img{
  pointer-events: none;
}