/*
Theme Name: MysteryLake
Theme URI: https://www.mysterylake.nl
Description: Child theme voor MysteryLake, gebaseerd op Hello Elementor. Bevat de site-specifieke styling en functionaliteit voor mysterylake.nl.
Author: MysteryLake
Author URI: https://www.mysterylake.nl
Template: hello-elementor
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mysterylake
*/

/* ============================================================
   MysteryLake - Homepage flex layout utilities
   Used by Elementor containers via the css_classes field.
   ============================================================ */

/* Multi-column flex children */
.ml-card-quarter { flex: 0 0 23.5% !important; max-width: 23.5% !important; }
.ml-card-third   { flex: 0 0 32% !important;   max-width: 32% !important; }
.ml-card-half-48 { flex: 0 0 48% !important;   max-width: 48% !important; }
.ml-col-half-47  { flex: 0 0 47% !important;   max-width: 47% !important; }
.ml-col-65       { flex: 0 0 65% !important;   max-width: 65% !important; }
.ml-col-33       { flex: 0 0 32% !important;   max-width: 32% !important; }
.ml-cta-panel    { width: 1100px !important; max-width: 100% !important; }
.ml-row-1200     { width: 100% !important; max-width: 1200px !important; }

/* Stats sub-columns inside Passie */
.ml-stat-col { flex: 0 0 auto !important; }

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .ml-card-quarter,
  .ml-card-third,
  .ml-card-half-48,
  .ml-col-half-47,
  .ml-col-65,
  .ml-col-33 {
    flex-basis: 48% !important;
    max-width: 48% !important;
  }
}

/* Mobile breakpoint */
@media (max-width: 600px) {
  .ml-card-quarter,
  .ml-card-third,
  .ml-card-half-48,
  .ml-col-half-47,
  .ml-col-65,
  .ml-col-33 {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  .ml-cta-panel {
    padding: 40px 24px !important;
  }
}

/* Hide page title on any Elementor-driven page (belt + braces in case template doesn't fully hide it) */
.elementor-page .entry-header,
.elementor-page .page-header,
.elementor-page > .entry-title,
body.page-template-elementor_header_footer .entry-title { display: none !important; }

/* ============================================================
   Transparent header over the hero (homepage only).
   On other pages the header keeps its normal flow + dark bg.
   ============================================================ */
body.home .ml-header {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%) !important;
}

body.home .ml-header > .e-con-inner,
body.home .ml-header-row,
body.home .ml-header-logo,
body.home .ml-header-nav,
body.home .ml-header-cta {
  background: transparent !important;
}

/* Sticky on inner pages (always-visible nav once you scroll) */
body:not(.home) .ml-header {
  position: sticky !important;
  top: 0;
  z-index: 100;
  background-color: rgba(10,10,10,0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Make sure the hero starts at viewport top on home (no header push-down) */
body.home .elementor-section-wrap > .elementor-element:first-child,
body.home main > .elementor > .elementor-element:first-child,
body.home main > .elementor section:first-child,
body.home main > .elementor > .e-con:first-child {
  margin-top: 0 !important;
}