/*
 Theme Name: Divi Child - Cohesion Studio
 Author: Cohesion Studio
 Author URI: https://www.madewithcohesion.com
 Template: Divi
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* ==========================================================================
   GLOBAL SITE SETTINGS
   ========================================================================== */

/* Enable fluid smooth scrolling for all anchor links sitewide */
html {
  scroll-behavior: smooth !important;
}

/* Accessibility: Respect OS-level "Reduce Motion" settings for users sensitive to animations */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* Prevent Divi from hiding columns with background images on mobile */
@media all and (max-width: 980px) {
    .et_pb_column.et_pb_column_empty {
        display: block !important; /* Forces the column box structure to render */
    }
}



/* ==========================================================================
   GLOBAL FIXED OVERLAY HEADER (Anti-Jump Alignment Matrix)
   ========================================================================== */

/* Forces the header section to act as a consistent 100% fixed overlay on the live site */
.et_pb_section_0_tb_header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important; 
  z-index: 99999 !important;
  margin-top: 0 !important;
  background-color: transparent !important; 
  
  /* THE SMOOTH GLIDE: Smoothly animates the padding changes over 400ms */
  transition: padding 400ms ease !important; 
}

/* ==========================================================================
   DYNAMIC SCROLL SENSOR FROSTED GLASS SYSTEM
   ========================================================================== */

/* 1. Base State (Completely clear on initial page load with floating gap) */
.et_pb_section_0_tb_header .sf-menu-content {
  -webkit-backdrop-filter: blur(40px) !important;
  backdrop-filter: blur(40px) !important;
  background-color: rgba(255, 255, 255, 0.0) !important; 
  
  /* CRITICAL: Tells the browser to smoothly animate BOTH the color and corner shifts */
  transition: background-color 400ms ease, border-radius 400ms ease !important;     
}

/* 2. True Active Scroll State (Fires flawlessly via native window tracking) */
.et_pb_section_0_tb_header.scrolled-header {
  padding-top: 0 !important; /* Vaporizes the top gap so the row hits the browser ceiling */
}

.et_pb_section_0_tb_header.scrolled-header .sf-menu-content {
  background-color: rgba(255, 241, 216, 0.8) !important; /* Premium cream frosting at 80% */
  
  /* THE FIX: Flattens only the top two corners as it docks against the top edge, 
     while keeping your bottom corners beautifully rounded! */
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

/* ==========================================================================
   SCHREIBER MOBILE MENU
   ========================================================================== */

/* Make the custom mobile header stick to the top */
@media all and (max-width: 980px) {
    .sf-sticky-mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
    }

    /* THE BULLETPROOF FIX: Use a relative top offset on the main body content wrapper */
    #main-content {
        position: relative !important;
        top: 104px !important; /* Matches your exact header bar height from DevTools */
    }
}

.sf-sticky-mobile-header {
    background-color: rgba(255, 241, 216, 0.9) !important; /* Premium cream frosting at 80% */
     -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}

/* Core setup for the custom JS overlay */
#sf-custom-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    /* Hidden states */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.4s ease-in-out !important;

    /* THE FIX: Hardcoded Frosted Glass Background */
    background-color: rgba(255, 241, 216, 0.8) !important; /* Adjust opacity as needed */
    -webkit-backdrop-filter: blur(15px) !important;
    backdrop-filter: blur(15px) !important;
}

/* Visible states */
#sf-custom-overlay.sf-menu-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; 
}

/* THE FIX: Pin the X button to the top right corner */
/* 1. Strip Divi's internal anchor points inside the overlay */
#sf-custom-overlay .et_pb_row,
#sf-custom-overlay .et_pb_column {
    position: static !important;
}

/* 2. Anchor the X button directly to the full-screen overlay */
#sf-close-btn {
    position: absolute !important;
    top: 35px !important;
    right: 10% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9999999 !important;
}

#sf-open-btn {
    cursor: pointer;
}

/* Pin the logo to the top left of the open overlay */
#sf-overlay-logo {
    position: fixed !important;
    top: 16px !important;
    left: 10% !important; /* Adjust left spacing to match your layout */
    max-width: 150px !important; /* Adjust this to size your logo perfectly */
    z-index: 9999999 !important;
}

/* Force the mobile overlay button to match your brand style */
#sf-custom-overlay .et_pb_button {
    font-family: 'Bitter', Georgia, "Times New Roman", serif;
    font-weight: 700;
    color: #521c03 !important;
    font-size: 18px !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-width: 1px;
    border-color: #521c03;
    border-style: solid;
    transition-property: background-color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

/* Optional: Add a smooth hover state */
#sf-custom-overlay .et_pb_button:hover {
    background-color: #c68b23 !important;
    color: #521c03 !important;
}

/* THE FIX: Completely disable the sliding hover icon */
#sf-custom-overlay .et_pb_button::after {
    display: none !important;
    content: "" !important;
    opacity: 0 !important;
}

/* ==========================================================================
   SCHREIBER TOTAL HERO OVERFLOW CONTAINMENT & SPACING
   ========================================================================== */

/* 1. Force the hero section to cleanly mask all internal breakout graphics */
.et_pb_section.schreiber-hero-section,
.et_pb_section.main-hero-section {
  position: relative !important;
  overflow: hidden !important; 
  
  /* POSITION CONTROL CENTER: Adjust this value to push your headline 
     text perfectly down below your fixed header menu links! */
  padding-top: 140px !important; 
}

/* 2. Global fallback safety rail to prevent browser page jitter */
#page-container, 
body {
  overflow-x: hidden !important;
}

/* 3. The Row handles the blur and opens its horizontal bounds */
.et_pb_section .et_pb_row.schreiber-blur-bg {
  position: relative !important;
  overflow: visible !important; 
  -webkit-backdrop-filter: blur(15px) !important;
  backdrop-filter: blur(15px) !important;
}

/* ==========================================================================
   SCHREIBER SVG GRAPHIC REVERSE FADE-OUT MATRIX
   ========================================================================== */
.et_pb_section .et_pb_row.schreiber-blur-bg::after {
  content: "" !important;
  position: absolute !important;
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: -500px !important;
  bottom: -500px !important;
  z-index: 1 !important; 
  pointer-events: none !important; 
  background-image: url('/wp-content/uploads/2026/06/hero-lines.svg') !important;
  background-size: 100% auto !important; 
  background-position: center center !important;
  background-repeat: no-repeat !important;

  mask-image: linear-gradient(
    to bottom, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 1) 45%, 
    rgba(0, 0, 0, 0) 65%
  ) !important;
  -webkit-mask-image: linear-gradient(
    to bottom, 
    rgba(0, 0, 0, 1) 0%, 
    rgba(0, 0, 0, 1) 45%, 
    rgba(0, 0, 0, 0) 65%
  ) !important;
}

/* Float your text and button column to the absolute top layer */
.et_pb_section .et_pb_row.schreiber-blur-bg .et_pb_column {
  position: relative !important;
  z-index: 2 !important; 
}

/* ==========================================================================
   MAIN HERO SECTION: MOBILE UN-CLIPPING OVERRIDES (767px and below)
   ========================================================================== */
@media (max-width: 767px) {
  .et_pb_section.main-hero-section {
    background-position: center -160px !important;
    height: auto !important;          
    min-height: 750px !important;     
    padding-top: 100px !important; /* Slightly tighter top spacing on mobile screens */
  }
  .et_pb_section.main-hero-section .et_pb_row.schreiber-blur-bg {
    height: auto !important;
    max-height: none !important;
    min-height: 0px !important;
  }
  .et_pb_section.main-hero-section .et_pb_row.schreiber-blur-bg .et_pb_column {
    height: auto !important;
    min-height: 0px !important;
  }
}

/* Forces the Divi column to vertically center any grain icon inside it */
.et_pb_column:has(.grain-offering-icon) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; 
}

/* Kills Divi's forced 100% width stretch so grain icons can actually center */
.grain-offering-icon {
  width: auto !important;
  max-width: none !important;
  margin: auto !important;
}

/* ==========================================================================
   SCHREIBER MINIMAL EDITORIAL CONTACT FORM
   ========================================================================== */

/* 1. Container Spacing & Unlocking the Right Edge */
.schreiber-cf7-form {
  width: 100% !important;
  max-width: none !important; 
}

.schreiber-cf7-form .input-group {
  margin-bottom: 24px;
}

/* 2. Strip all box borders and leave only the crisp bottom line */
.schreiber-cf7-form input[type="text"],
.schreiber-cf7-form input[type="email"],
.schreiber-cf7-form textarea {
  width: 100% !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 0px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  padding: 12px 0px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.3s ease !important;
}

.schreiber-cf7-form textarea {
  height: 140px !important;
  resize: none !important;
}

.schreiber-cf7-form input::placeholder,
.schreiber-cf7-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 300 !important;
}

.schreiber-cf7-form input:focus,
.schreiber-cf7-form textarea:focus {
  border-bottom: 1px solid #ffffff !important;
}

/* 3. Right-Aligned Cream Button (Flexbox Push) */
.schreiber-cf7-form .submit-group,
.schreiber-cf7-form .submit-group p {
  display: flex !important;
  justify-content: flex-end !important; 
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.schreiber-cf7-form input[type="submit"] {
  background-color: #fdf7ec !important;
  font-family: 'Bitter', Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  color: #1e1e1e !important;
  font-size: 18px !important;
  border-radius: 8px !important;
  border-width: 0px !important;
  border-color: #333 !important;
  border-style: solid !important;
  padding: 14px 28px !important; 
  cursor: pointer !important;
  margin: 0 !important; 
  transition: background-color 300ms ease !important;
}

/* Button Hover State */
.schreiber-cf7-form input[type="submit"]:hover {
  background-color: #C68B23 !important;
}

/* ==========================================================================
   CF7 SUCCESS & ERROR MESSAGE STYLING
   ========================================================================== */
.wpcf7 form .wpcf7-response-output {
  color: #ffffff !important;
  border: none !important;           
  margin: 20px 0px 0px 0px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 300 !important;       
  text-align: right !important;      
}

/* Vaporize the spinner when idle */
.schreiber-cf7-form .wpcf7-spinner {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Horizontal Left Spinner Placement */
.schreiber-cf7-form.submitting .wpcf7-spinner {
  display: block !important;
  margin-right: 12px !important; 
  align-self: center !important;
  order: -1 !important; 
}

/* ==========================================================================
   Blog Styling
   ========================================================================== */

.schreiber-notes-body p {
  margin-bottom: 1rem !important;
}

.schreiber-notes-body h1, 
.schreiber-notes-body h2, 
.schreiber-notes-body h3, 
.schreiber-notes-body h4, 
.schreiber-notes-body h5, 
.schreiber-notes-body h6 {
    margin: 2rem 0 1rem 0 !important;
}

/* ==========================================================================
   SCHREIBER EDITORIAL POST CARDS (Perfect Partial Base Frame)
   ========================================================================== */

/* 1. Base Container Setup (No native borders on this shell) */
.sf-post-grid .df-post-inner-wrap {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 24px !important;  
    padding-right: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 0 !important; 
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    
    /* NEW: Forces the internal layout to stretch to Divi's equal height footprint */
    height: 100% !important; 
}

/* 2. A single continuous frame box that handles the left line, 
      the bottom-left curve, and stops early on the bottom right */
.sf-post-grid .df-post-inner-wrap::after {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;    
    left: 0 !important;     
    bottom: 0 !important;   
    width: 80% !important; 
    pointer-events: none !important;
    border-left: 1px solid rgba(82, 28, 3, 0.25) !important;
    border-bottom: 1px solid rgba(82, 28, 3, 0.25) !important;
    border-bottom-left-radius: 16px !important;
}

/* 3. The Image Wrapper: Shifts left and absorbs all leftover vertical space */
.sf-post-grid .df-post-inner-wrap .df-post-image-wrap {
    margin-left: -24px !important; 
    margin-right: 0 !important; 
    
    /* THE FIX: 'auto' forces all empty vertical space to live right above the image, anchoring it to the bottom */
    margin-top: auto !important;   
    
    margin-bottom: 0 !important; 
    padding: 0 !important;
    width: calc(100% + 24px) !important; 
    position: relative !important; 
    overflow: hidden !important;
    display: block !important;
}

/* 4. The Image Asset: Smoothly rounded on both base corners + top fade mask */
.sf-post-grid .df-post-inner-wrap .df-post-image-wrap img,
.sf-post-grid .df-post-inner-wrap .df-post-image-wrap a {
    display: block !important;
    width: 100% !important;
    min-height: 305px !important;
    object-fit: cover !important; 
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 20px !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 25%) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 25%) !important;
}

/* 5. Lock the Button Wrapper closely under the excerpt */
.sf-post-grid .df-post-inner-wrap .df-post-button-wrap {
    margin-top: 16px !important;    /* Locks exactly 16px below the excerpt */
    margin-bottom: 30px !important; /* Ensures the button never collides with the image on smaller screens */
}

/* ==========================================================================
   COHESION TRUE FLUID WAVE (SNAPPY NTH-OF-TYPE ENGINE)
   ========================================================================== */
a.cohesion-link {
  display: flex !important;                
  flex-direction: row !important;  
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.5) !important;                        
  letter-spacing: 0px !important;
  overflow: hidden !important;             
  position: relative !important;
}

a.cohesion-link br {
  display: none !important;
}

a.cohesion-link span {
  display: inline-block !important;
  position: relative !important;
  line-height: 1 !important;
  transition: transform 0.2s cubic-bezier(0.625, 0.05, 0, 1), color 0.15s ease !important;
}

a.cohesion-link span::after {
  content: attr(data-char) !important;
  position: absolute !important;
  top: 100% !important;                    
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  color: rgba(255, 255, 255, 0.8) !important;               
}

a.cohesion-link:hover span {
  transform: translateY(-100%) !important;
}

a.cohesion-link span:nth-of-type(1)  { transition-delay: 0.000s !important; }
a.cohesion-link span:nth-of-type(2)  { transition-delay: 0.002s !important; } 
a.cohesion-link span:nth-of-type(3)  { transition-delay: 0.005s !important; } 
a.cohesion-link span:nth-of-type(4)  { transition-delay: 0.009s !important; } 
a.cohesion-link span:nth-of-type(5)  { transition-delay: 0.014s !important; } 
a.cohesion-link span:nth-of-type(6)  { transition-delay: 0.020s !important; } 
a.cohesion-link span:nth-of-type(7)  { transition-delay: 0.027s !important; } 
a.cohesion-link span:nth-of-type(8)  { transition-delay: 0.035s !important; } 
a.cohesion-link span:nth-of-type(9)  { transition-delay: 0.044s !important; } 
a.cohesion-link span:nth-of-type(10) { transition-delay: 0.054s !important; } 
a.cohesion-link span:nth-of-type(11) { transition-delay: 0.065s !important; } 
a.cohesion-link span:nth-of-type(12) { transition-delay: 0.077s !important; } 
a.cohesion-link span:nth-of-type(13) { transition-delay: 0.090s !important; } 
a.cohesion-link span:nth-of-type(14) { transition-delay: 0.104s !important; } 
a.cohesion-link span:nth-of-type(15) { transition-delay: 0.119s !important; } 
a.cohesion-link span:nth-of-type(16) { transition-delay: 0.135s !important; } 
a.cohesion-link span:nth-of-type(17) { transition-delay: 0.152s !important; } 
a.cohesion-link span:nth-of-type(18) { transition-delay: 0.170s !important; } 
a.cohesion-link span:nth-of-type(19) { transition-delay: 0.189s !important; } 
a.cohesion-link span:nth-of-type(20) { transition-delay: 0.209s !important; } 
a.cohesion-link span:nth-of-type(21) { transition-delay: 0.230s !important; } 
a.cohesion-link span:nth-of-type(22) { transition-delay: 0.252s !important; } 
a.cohesion-link span:nth-of-type(23) { transition-delay: 0.275s !important; }