/*
Theme Name: Divi Child
Theme URI: [Your Site URL]
Description: A child theme for the basic Divi theme.
Author: Jackie Blum
Author URI: www.jady-design.com
Template: Divi
Version: 1.0.0
*/

/* ==========================================================================
   LITTLE HAITI GLOBAL BASELINE CSS v3.35
   Updated: December 6, 2024
   CHANGES: Adapted from JADY v3.3 structure
            - Replaced Instrument Serif with Basis Grotesque (6 weights)
            - Adopted JADY's targeted Divi resets (granular control)
            - Added width safety net for sections/rows
            - Added .seo-hidden utility
            - Removed JADY span utilities (serif-caps, thin-caps, etc.)
            - Added .hero-thin and .black-caps utilities for LHG
            - Kept .split-content-row from JADY
            - Removed JADY hero section styles
            - Kept LHG-specific .site-header and .mobile-login-button
            - Added Basis Grot Medium Font
            - Removed bottom padding from site heder (reg & scrolled)
   ========================================================================== */

/* ==========================================================================
   1. FONT DECLARATIONS
   ========================================================================== */

/* Basis Grotesque Font Family - All 6 Weights */
@font-face {
    font-family: 'Basis Grotesque Thin';
    src: url('https://9m6.da4.mytemp.website/wp-content/uploads/2025/11/basisgrotesque-thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Basis Grotesque ExtraLight';
    src: url('https://9m6.da4.mytemp.website/wp-content/uploads/2025/11/basisgrotesque-extralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Basis Grotesque Light';
    src: url('https://9m6.da4.mytemp.website/wp-content/uploads/2025/11/basisgrotesque-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Basis Grotesque Regular';
    src: url('https://9m6.da4.mytemp.website/wp-content/uploads/2025/11/basisgrotesque-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Basis Grotesque Medium';
    src: url('https://9m6.da4.mytemp.website/wp-content/uploads/2025/12/basisgrotesque-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Basis Grotesque Bold';
    src: url('https://9m6.da4.mytemp.website/wp-content/uploads/2025/11/basisgrotesque-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Basis Grotesque Black';
    src: url('https://9m6.da4.mytemp.website/wp-content/uploads/2025/11/basisgrotesque-black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* ==========================================================================
   2. DIVI RESETS
   ========================================================================== */

/* Safety Net - Force Proper Widths */
.et_pb_section {
    width: 100% !important;
}

.et_pb_row {
    width: 100% !important;
}

/* Text Module Headings */
.et_pb_text h1, 
.et_pb_text h2, 
.et_pb_text h3, 
.et_pb_text h4, 
.et_pb_text h5, 
.et_pb_text h6 {
    margin: 0 !important;
    padding: 0 !important;
}

/* Blurb Module Headings */
.et_pb_blurb h1,
.et_pb_blurb h2,
.et_pb_blurb h3,
.et_pb_blurb h4,
.et_pb_blurb h5,
.et_pb_blurb h6,
.et_pb_blurb .et_pb_module_header {
    margin: 0 !important;
    padding: 0 !important;
}

/* Button Resets - Allow Divi styling controls */
.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button {
    font-family: initial !important;
    font-size: initial !important;
    font-weight: initial !important;
    line-height: initial !important;
    color: initial !important;
    letter-spacing: initial !important;
}

/* Prevent Responsive Font-Family Changes */
@media (max-width: 980px) {
    .et_pb_text h1, 
    .et_pb_text h2, 
    .et_pb_text h3, 
    .et_pb_text h4, 
    .et_pb_text h5, 
    .et_pb_text h6,
    .et_pb_blurb h1,
    .et_pb_blurb h2,
    .et_pb_blurb h3,
    .et_pb_blurb h4,
    .et_pb_blurb h5,
    .et_pb_blurb h6,
    .et_pb_blurb .et_pb_module_header,
    .et_pb_button,
    .et_pb_button_module_wrapper .et_pb_button {
        font-family: inherit !important;
    }
}

@media (max-width: 767px) {
    .et_pb_text h1, 
    .et_pb_text h2, 
    .et_pb_text h3, 
    .et_pb_text h4, 
    .et_pb_text h5, 
    .et_pb_text h6,
    .et_pb_blurb h1,
    .et_pb_blurb h2,
    .et_pb_blurb h3,
    .et_pb_blurb h4,
    .et_pb_blurb h5,
    .et_pb_blurb h6,
    .et_pb_blurb .et_pb_module_header,
    .et_pb_button,
    .et_pb_button_module_wrapper .et_pb_button {
        font-family: inherit !important;
    }
}

/* ==========================================================================
   3. SPACING SYSTEM
   ========================================================================== */

/* Section Spacing */
.hero-section { 
    padding: 220px 0;
}

.content-section { 
    padding: 120px 0; 
}

/* Row Width System */
.text-row,
.content-row,
.showcase-row,
.cta-row,
.split-content-row {
    width: 100% !important;
    margin: 0 auto;
}

.text-row { max-width: 800px; }
.content-row { max-width: 1000px; }
.showcase-row { max-width: 1200px; }
.cta-row { max-width: 600px; }
.split-content-row { max-width: 1200px; }

/* Module Spacing */
.standard-text { margin-bottom: 30px; }
.heder-text { margin-bottom: 10px; }
.standard-button { margin-bottom: 40px; }
.last-module { margin-bottom: 0; }

/* ==========================================================================
   4. CUSTOM UTILITIES
   ========================================================================== */

/* Hero Thin Weight - For large hero headlines */
.hero-thin {
    font-family: 'Basis Grotesque Extra Light', sans-serif !important;
    font-weight: 200 !important;
    letter-spacing: 0.5px;
    display: inline !important;
}

/* Black Caps - For inline emphasis pairing */
.black-caps {
    font-family: 'Basis Grotesque Black', sans-serif !important;
    font-weight: 900 !important;
    display: inline !important;
}

/* Text Highlight Style */
.text-highlight {
    background-image: linear-gradient(
        rgba(225, 254, 196, 0.79),
        rgba(225, 254, 196, 0.79)
    );
    background-size: 100% 0.6em;
    background-repeat: no-repeat;
    background-position: 0 0.35em;
    padding: 0 0.3em;
    border-radius: 8px;
    display: inline;
}

/* SEO Hidden H1 */
.seo-hidden {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* Fixed Header Spacing */
body.et-fb:not(.et-fb-preview-active) .et-l {
    padding-top: 0 !important;
}

body:not(.et-fb) #page-container {
    padding-top: 90px !important;
}

/* ==========================================================================
   5. SITE-SPECIFIC: FIXED HEADER STYLES
   ========================================================================== */

.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    padding: 20px 0 !important;
    transition: padding 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.site-header.scrolled {
    padding: 10px 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Mobile menu login button styling */
.mobile-login-button a {
    display: inline-block;
    background-color: #FFF9C4;
    color: #000000;
    padding: 12px 30px;
    border-radius: 50px;
    border: 2px solid #000000;
    margin-top: 20px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.mobile-login-button a:hover {
    background-color: #000000;
    color: #FFFFFF;
}

/* ==========================================================================
   6. LAYOUT: SPLIT CONTENT ROW
   Desktop: Photo (left) matches text column height | Text (right)
   Tablet: Stacked, photo natural height, body text in 2 CSS columns
   Mobile: Stacked, photo natural height, single column text
   ========================================================================== */

/* Desktop - Side by side, photo matches text height */
@media (min-width: 981px) {
    .split-content-row {
        display: flex !important;
        align-items: stretch !important;
    }
    
    .split-content-row .et_pb_column_0 {
        position: relative !important;
        overflow: hidden !important;
    }
    
    .split-content-row .et_pb_column_0 .et_pb_image_wrap img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* Tablet - Stacked, natural photo height, 2-column body text */
@media (max-width: 980px) {
    .split-content-row .et_pb_column_0,
    .split-content-row .et_pb_column_1 {
        width: 100% !important;
    }
    
    .split-content-row .et_pb_column_0 {
        margin-bottom: 30px !important;
    }
    
    .split-content-row .et_pb_column_0 .et_pb_image_wrap img {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Body text flows into 2 CSS columns */
    .split-content-row .body-text-module {
        column-count: 2 !important;
        column-gap: 30px !important;
    }
}

/* Mobile - Stacked, natural photo height, single column text */
@media (max-width: 767px) {
    .split-content-row .et_pb_column_0 {
        margin-bottom: 20px !important;
    }
    
    /* Body text returns to single column */
    .split-content-row .body-text-module {
        column-count: 1 !important;
    }
}

/* ==========================================================================
   7. GLOBAL RESPONSIVE OVERRIDES
   ========================================================================== */

/* Tablet Breakpoint */
@media (max-width: 980px) {
    .hero-section {
        padding: 90px 0;
    }
    
    .content-section {
        padding: 60px 0;
    }
    
    .text-row,
    .content-row,
    .showcase-row,
    .cta-row,
    .split-content-row {
        padding: 0 30px;
    }
}

/* Mobile Breakpoint */
@media (max-width: 767px) {
    .hero-section {
        padding: 60px 0;
    }
    
    .content-section {
        padding: 40px 0;
    }
    
    .text-row,
    .content-row,
    .showcase-row,
    .cta-row,
    .split-content-row {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .standard-text { margin-bottom: 20px; }
    .heder-text { margin-bottom: 8px; }
    .standard-button { margin-bottom: 30px; }
    
    .site-header {
        padding: 15px 0 !important;
    }
    
    .site-header.scrolled {
        padding: 10px 0 !important;
    }
    
    body:not(.et-fb) #page-container {
        padding-top: 70px !important;
    }
}