/*
 Theme Name:   Pixels to Prospects Master Child
 Theme URI:    https://pixelstoprospects.com
 Description:  A custom child theme for Divi 5 builds. Optimized for Pixels to Prospects.
 Author:       Pixels to Prospects
 Author URI:   https://pixelstoprospects.com
 Template:     Divi
 Version:      1.0.12
*/

/* ==========================================================================
   Agency Custom CSS Resets
   ========================================================================== */

/* Fix: Prevent horizontal scroll on mobile if elements overflow */
html, body {
    overflow-x: hidden;
}

/* Fix: Make inputs look modern by default (overrides Divi's default grey) */
input[type="text"], input[type="email"], textarea {
    border-radius: 4px;
    padding: 12px;
    border: 1px solid #e1e1e1;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    border-color: #000; /* Change to your primary brand color */
    outline: none;
}

/* Fix: Improve Default Line Heights */
p {
    line-height: 1.6em;
    margin-bottom: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2em;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   AGENCY POLISH & UTILITIES
   ========================================================================== */

/* 1. Fix Divi's "Bullet Point" Alignment */
/* By default, Divi bullets are often too close to the text or align weirdly. */
.et_pb_text ul, .et_pb_text ol {
    padding-left: 20px;
    margin-bottom: 20px;
}
.et_pb_text li {
    margin-bottom: 10px;
    padding-left: 5px;
}

/* 2. Make the Mobile Menu Look Modern */
/* The default Divi mobile dropdown is narrow and has a blue line at the top. */
.et_mobile_menu {
    border-top: none; /* Remove the blue line */
    width: 100%; /* Force full width */
    box-shadow: 0px 10px 30px rgba(0,0,0,0.1); /* Soft shadow instead of harsh line */
}
.et_mobile_menu li a {
    border-bottom: 1px solid #f1f1f1; /* subtle separators */
    padding: 15px 20px; /* Larger tap targets for thumbs */
}

/* 3. Fix the "Jumping" Header on Scroll */
/* Sometimes the fixed header shrinks too aggressively. This smooths it out. */
header#main-header, #main-header .container {
    transition: all 0.4s ease-in-out !important;
}

/* 4. Modern "Success" Message for Contact Forms */
/* Divi's default success text is just plain text that can be missed. This turns it into a green notification box. */
.et-pb-contact-message-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 20px;
    border-radius: 6px;
    font-weight: 600;
    margin-top: 20px;
}

/* 5. Vertical Align Content in Columns */
/* Add the class 'agency-vertical-center' to any Row, and the columns will vertically center. 
   Much faster than playing with padding settings. */
.agency-vertical-center {
    display: flex;
    align-items: center;
}
@media (max-width: 980px) {
    .agency-vertical-center {
        display: block; /* Disable on mobile so they stack normally */
    }
}

/* 6. Prevent the "Logo Shift" */
/* Ensures the logo doesn't get blurry or shift pixels when the page loads. */
#logo {
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    backface-visibility: hidden;
}

/* ==========================================================================
   AGENCY CUSTOM EFFECTS
   ========================================================================== */
   
/* ================================================= */
/* 1. PRELOADER STYLES                               */
/* ================================================= */
#site-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff; /* Background color of loading screen */
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s;
}

.preloader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #000000; /* Spinner color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Class added by JS to hide it */
.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ================================================= */
/* 2. TYPEWRITER EFFECT STYLES                       */
/* ================================================= */
/* Standard Cursor */
.typewriter-text::after,
.typewriter-loop::after {
    content: '|';
    animation: blink 0.7s step-end infinite;
    font-weight: bold;
    color: currentColor; /* Matches your text color automatically */
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ================================================= */
/* 3. FLIP CARD STYLES                               */
/* ================================================= */
.flip-box-col {
  perspective: 1000px;
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.8s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-card-front {
  transform: rotateY(0deg);
  z-index: 2;
}

.flip-card-back {
  transform: rotateY(180deg);
  z-index: 1;
  /* IMPORTANT: Set a background color in Divi settings for the back card! */
}

/* Hover Effects */
.flip-box-col:hover .flip-card-front {
    transform: rotateY(-180deg);
}
.flip-box-col:hover .flip-card-back {
    transform: rotateY(0deg);
}

/* ================================================= */
/* 4. VERTICAL FLIP MODIFIER (SMOOTH VERSION)        */
/* ================================================= */

/* 1. Slow down the animation specifically for vertical flips */
.flip-box-col.flip-vertical,
.flip-box-col.flip-vertical .flip-card-front,
.flip-box-col.flip-vertical .flip-card-back {
    /* Increased from 0.8s to 1.2s for a lazier, clearer flip */
    transition: transform 1.2s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* 2. Setup the back card */
.flip-box-col.flip-vertical .flip-card-back {
    transform: rotateX(180deg);
}

/* 3. Setup the front card */
.flip-box-col.flip-vertical .flip-card-front {
    transform: rotateX(0deg);
}

/* HOVER EFFECTS */

/* Rotate the front card UP */
.flip-box-col.flip-vertical:hover .flip-card-front {
    transform: rotateX(180deg);
}

/* Rotate the back card UP */
.flip-box-col.flip-vertical:hover .flip-card-back {
    transform: rotateX(0deg);
}

/* ================================================= */
/* MOBILE FIX: DISABLE FLIP & STACK CARDS            */
/* ================================================= */

@media screen and (max-width: 980px) {

    /* 1. Reset the Container */
    .flip-box-col {
        min-height: auto !important; /* Let height grow naturally */
        perspective: none !important; /* Turn off 3D space */
        cursor: default;
    }

    /* 2. Reset the Modules (Front and Back) */
    .flip-card-front,
    .flip-card-back {
        position: relative !important; /* Stop floating on top of each other */
        top: auto !important;
        left: auto !important;
        
        /* Reset rotation so they both face forward */
        transform: rotateY(0deg) !important; 
        transform: rotateX(0deg) !important; /* Reset vertical flip too */
        
        /* Ensure they are visible */
        opacity: 1 !important;
        backface-visibility: visible !important;
        visibility: visible !important;
        
        /* Add spacing between them */
        margin-bottom: 20px; 
    }
    
    /* 3. Disable Hover Effects (Prevent twitching) */
    .flip-box-col:hover .flip-card-front,
    .flip-box-col:hover .flip-card-back {
        transform: none !important;
    }
}

/* ================================================= */
/* 5. 3D MOUSE TILT EFFECT               */
/* ================================================= */

.tilt-card {
    /* Gives it depth */
    perspective: 1000px; 
    transform-style: preserve-3d;
    /* Ensures the card stays on top during interaction */
    z-index: 1; 
}

/* The inner container that actually moves */
/* Note: The JS will target the module inside, but we can set defaults here */
.tilt-card > .et_pb_module {
    transition: transform 0.1s ease-out; /* Very fast transition for tracking */
    will-change: transform;
    /* Optional: Add a shadow that moves nicely */
    /*box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
}

/* ================================================= */
/* 6. TILT SHINE EFFECT                              */
/* ================================================= */

/* Create the shine layer on top of the module */
.tilt-card .et_pb_module::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* The Light Source: Uses CSS variables set by JS */
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(255, 255, 255, 0) 60%
    );
    
    /* Blending: 'Overlay' makes it look like light, not white paint */
    mix-blend-mode: overlay;
    
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease;
    pointer-events: none; /* Allows you to click buttons/links underneath */
    z-index: 10;
    border-radius: inherit; /* Matches your module's rounded corners */
}

/* Show the shine when hovering */
.tilt-card:hover .et_pb_module::after {
    opacity: 1;
}