/*
 Theme Name: Divi Child
 Template: Divi
*/

/* ============================================
   HEADER / LOGO (legacy header safeguards)
   ============================================ */
#logo,
.et-fixed-header #logo {
  max-height: 20px !important;
  height: 20px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#main-header,
.et-fixed-header #main-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
}

#et-top-navigation,
.et-fixed-header #et-top-navigation {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Keep Theme Builder header above hero/content when transparent */
.et-l--header { z-index: 9999 !important; }

/* ============================================
   DESKTOP NAV SPACING (Theme Builder menu)
   ============================================ */
@media (min-width: 981px){
  .et_pb_menu .et-menu > li { margin: 0 22px; }
  .et_pb_menu__logo-wrap { padding: 0 64px; }
}

/* ============================================
   HOME-STYLE HERO (Crossfade slideshow)
   Targets: .page-id-400 (/home-2/) and .home
   Requirements: Section ID="splash" (overlay), Section ID="hero" (stage)
   ============================================ */

/* Splash overlay (auto fade away) */
.home #splash,
.page-id-400 #splash{
  display: flex; align-items: center; justify-content: center; text-align: center;
  opacity: 1; visibility: visible;
  animation: splashFade 6s ease-in-out 150ms forwards;
}
@keyframes splashFade { to { opacity: 0; visibility: hidden; } }

/* Prevent extra animation on splash logo (if using Image module) */
.home #splash .splash-logo img,
.page-id-400 #splash .splash-logo img{
  opacity: 1 !important; animation: none !important;
}

/* Stage + wrapper fixes */
.home #hero,
.page-id-400 #hero{
  position: relative; min-height: 100vh; width: 100%; overflow: hidden; background: #000;
}
.home #hero .et_pb_row,
.page-id-400 #hero .et_pb_row{
  width: 100% !important; max-width: none !important; padding: 0 !important;
}
.home #hero .et_pb_column,
.page-id-400 #hero .et_pb_column{
  width: 100% !important; padding: 0 !important; margin: 0 !important; position: static !important;
}
.home #hero .et_pb_code,
.home #hero .et_pb_code_inner,
.page-id-400 #hero .et_pb_code,
.page-id-400 #hero .et_pb_code_inner{
  position: static !important; display: block !important;
  width: 100% !important; height: 100vh !important; padding: 0 !important;
}

/* Cross-dissolve stack */
.home #hero .hero-crossfade,
.page-id-400 #hero .hero-crossfade{
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.home #hero .hero-crossfade .xf-slide,
.page-id-400 #hero .hero-crossfade .xf-slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  opacity: 0; z-index: 0;
  animation: heroXfade 50s linear infinite both; /* T = 50s for 5 slides */
  will-change: opacity;
}

/* Timing (T=50s):
   0–6% fade in (~3s), 6–20% hold (~7s), 20–26% fade out (~3s), rest hidden */
@keyframes heroXfade{
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  20%  { opacity: 1; }
  26%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Slide sources + staggering */
.home #hero .hero-crossfade .s1,
.page-id-400 #hero .hero-crossfade .s1{
  background-image: url("/wp-content/uploads/2025/09/modern-livingroom-tallahassee-fl-home-barton-construction.webp");
  animation-delay: -0.3s;
}
.home #hero .hero-crossfade .s2,
.page-id-400 #hero .hero-crossfade .s2{
  background-image: url("/wp-content/uploads/2025/09/modern-home-aerial-barton-construction-tallahassee-fl.webp");
  animation-delay: 10s;
}
.home #hero .hero-crossfade .s3,
.page-id-400 #hero .hero-crossfade .s3{
  background-image: url("/wp-content/uploads/2025/09/mid-century-modern-tallahassee-fl-barton-construction.webp");
  animation-delay: 20s;
}
.home #hero .hero-crossfade .s4,
.page-id-400 #hero .hero-crossfade .s4{
  background-image: url("/wp-content/uploads/2025/08/poolside-a-frame-exterior-tallahassee-fl-barton-construction-01.webp");
  animation-delay: 30s;
}
.home #hero .hero-crossfade .s5,
.page-id-400 #hero .hero-crossfade .s5{
  background-image: url("/wp-content/uploads/2025/08/poolside-a-frame-kitchen-interior-tallahassee-fl-barton-construction-01.webp");
  animation-delay: 40s;
}

/* Subtle top gradient for menu readability */
.home #hero .hero-crossfade::after,
.page-id-400 #hero .hero-crossfade::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,0) 30%);
  z-index: 3; pointer-events: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .home #hero .hero-crossfade .xf-slide,
  .page-id-400 #hero .hero-crossfade .xf-slide{ animation: none; opacity: 1; }
}

/* ============================================
   PAGE 749 — HERO BACKGROUND VIDEO UNDER HEADER
   Requires: hero Section has CSS ID = hero
   ============================================ */
.page-id-749 #page-container { padding-top: 0 !important; }
.page-id-749 .et_builder_inner_content { padding-top: 0 !important; margin-top: 0 !important; }

.page-id-749 #hero{
  position: relative;
  min-height: 100vh;
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: hidden;
  z-index: 1;
}
.page-id-749 #hero .et_pb_row{
  width: 100% !important; max-width: none !important; padding: 0 !important;
}
.page-id-749 #hero .et_pb_column{
  width: 100% !important; padding: 0 !important; margin: 0 !important;
  position: static !important;
}
.page-id-749 #hero .et_pb_section_video_bg,
.page-id-749 #hero .et_pb_section_video_bg > video{
  position: absolute !important; top: 0; left: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: center center; z-index: 0;
}

/* ============================================
   PAGE 890 — HERO BACKGROUND VIDEO UNDER HEADER
   Requires: hero Section has CSS ID = hero
   ============================================ */
.page-id-890 #page-container { padding-top: 0 !important; }
.page-id-890 .et_builder_inner_content { padding-top: 0 !important; margin-top: 0 !important; }

.page-id-890 #hero{
  position: relative;
  min-height: 100vh;
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: hidden;
  z-index: 1;
}
.page-id-890 #hero .et_pb_row{
  width: 100% !important; max-width: none !important; padding: 0 !important;
}
.page-id-890 #hero .et_pb_column{
  width: 100% !important; padding: 0 !important; margin: 0 !important;
  position: static !important;
}
.page-id-890 #hero .et_pb_section_video_bg,
.page-id-890 #hero .et_pb_section_video_bg > video{
  position: absolute !important; top: 0; left: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: center center; z-index: 0;
}

/* ============================================
   FADE BETWEEN PAGES (content-only)
   ============================================ */
#et-main-area{
  opacity: 1;
  transition: opacity .45s ease;
}
html.pp-is-loading #et-main-area,
html.pp-nav-fading #et-main-area{
  opacity: 0;
}
@media (prefers-reduced-motion: reduce){
  #et-main-area{ transition: none !important; }
}
.et-fb #et-main-area,
.logged-in.admin-bar #et-main-area{
  opacity: 1 !important; transition: none !important;
}

/* ============================================
   VIEWPORT CENTERING UTILITY
   Apply class "vh-center" to the Section OR Row
   - If on Section: Row will fill and center
   - If on Row: Column will stack/center modules
   ============================================ */
.vh-center{
  /* viewport sizing with fallbacks (svh helps mobile address bar) */
  min-height: 100vh;      /* fallback */
  min-height: 100svh;     /* iOS/Chromium mobile aware */
  padding: 0 !important;

  display: flex;
  align-items: center;      /* vertical */
  justify-content: center;  /* horizontal */
}

/* If class on Section, make Row fill */
.vh-center .et_pb_row{
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}

/* If class on Row, center the Column & stack modules */
.vh-center .et_pb_column{
  display: flex;
  flex-direction: column;         /* stack image + text */
  align-items: center;             /* center horizontally; switch to flex-start to left-align */
  justify-content: center;         /* group vertically */
  gap: clamp(8px, 2vh, 24px);
}
.vh-center .et_pb_module{ margin: 0; }

/* Mobile tune: slight nudge down if an overlay header exists */
@media (max-width: 767px){
  .vh-center{
    min-height: 100vh;  /* fallback */
    min-height: 100svh; /* dynamic mobile viewport */
    min-height: 100dvh; /* modern mobile */
  }
  .vh-center .et_pb_column{
    transform: translateY(4vh); /* adjust 3–6vh to taste */
  }
}

/* If a page has no header, cancel the mobile nudge on that page */
@media (max-width: 767px){
  .page-id-749 .vh-center .et_pb_column,
  .page-id-890 .vh-center .et_pb_column{
    transform: none;
  }
}

/* ============================================
   OPTIONAL: “No Header” template helper
   - Assign .no-header to the template’s header Section
   ============================================ */
.no-header{ display: none !important; }

/* ============================================
   (Optional) UTILITY: Hide header per page IDs
   Uncomment and add IDs if you prefer CSS-only headerless pages
   ============================================ */
/*
.page-id-123 .et-l--header{ display: none !important; }
.page-id-123 #page-container{ padding-top: 0 !important; }
*/