/*
Theme Name: Imagine
Theme URI: https://sjdworld.me/imagine
Description: Child theme for the Imagine site. Built on Hello Elementor with scroll-reveal sticky nav (Marsden Church pattern).
Author: SJD World
Author URI: https://sjdworld.me/
Template: hello-elementor
Version: 1.1.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: hello-elementor-imagine
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   Site-specific styles — most layout is handled in Elementor
   ========================================================================== */

/* ==========================================================================
   Sticky nav — hidden in editor, scroll-reveal on front end
   ========================================================================== */

/* Hide sticky nav by default (editor and any context where "show" rule doesn't apply) */
.ttt-scroll-header {
  display: none;
}

/* Force hide in Elementor preview when our theme adds this body class (fallback) */
body.hee-sticky-editor-off .ttt-scroll-header {
  display: none !important;
}

/* Sticky nav: show and style only on the live site (not in Elementor editor) */
body:not(.elementor-editor-active) .ttt-scroll-header {
  display: block;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999 !important;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 300ms ease-out, transform 600ms ease-out;
}

body:not(.elementor-editor-active) .ttt-scroll-header.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hide on mobile */
@media (max-width: 767px) {
  body:not(.elementor-editor-active) .ttt-scroll-header {
    display: none !important;
  }
}

/* Offset when admin bar is showing */
body:not(.elementor-editor-active).admin-bar .ttt-scroll-header {
  top: 32px;
}

@media (max-width: 782px) {
  body:not(.elementor-editor-active).admin-bar .ttt-scroll-header {
    top: 46px;
  }
}

/* When sticky nav is visible, drop quick links behind it */
body.ttt-sticky-visible .ttt-quick-links {
  z-index: 1 !important;
}



/* transparent nav*/

:root {
  /* Fallback until JS measures the live header; overridden by transparent-header.js */
  --header-h: 100px;
}

/* Positioning context for the overlay header */
body:has(.transparent-header) #page {
  position: relative;
}

/* Non-transparent headers stay in normal document flow */
.site-header:not(.transparent-header) {
  position: relative;
  z-index: 10000;
}

/* Transparent header style — absolute overlay avoids negative-margin drift */
.transparent-header,
.elementor-location-header.transparent-header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.admin-bar .transparent-header,
body.admin-bar .elementor-location-header.transparent-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .transparent-header,
  body.admin-bar .elementor-location-header.transparent-header {
    top: 46px;
  }
}

/* Keep inner header wrappers transparent too */
.transparent-header > .e-con,
.transparent-header .elementor-container,
.transparent-header .elementor-element {
  background: transparent !important;
  background-color: transparent !important;
}

/* Hero starts at viewport top; padding clears the overlay header.
   !important beats Elementor per-device inline margin/padding. */
.maintop {
  margin-top: 0 !important;
  padding-top: var(--header-h) !important;
  position: relative;
  z-index: 1;
}

/* CSS fallbacks before JS runs (mobile header is taller when logo/menu stack) */
@media (max-width: 1024px) {
  :root {
    --header-h: 110px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 130px;
  }
}