/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 3 Jun 2026, 6:59 pm
*/

/* ==========================================================================
   1. UNIVERSAL BRAND TYPOGRAPHY & DESKTOP CARD LAYOUT
   ========================================================================== */

/* Desktop Only: Widens the floating text card panel to 580px and aligns it right */
@media (min-width: 769px) {
    body .fg-panel-info-inner,
    .fg-panel-info-inner {
        width: 580px !important; 
        max-width: 580px !important;
        margin-left: auto !important;
        margin-right: 40px !important;
    }
}

/* SANCTUARY DEFAULT TITLE: Company Forest Green (#055B00) */
body .fgl-caption-title,
body .fgl-caption-title *,
body .fg-media-caption .title,
body .fg-media-caption .title *,
body .fgl-caption h3,
body .fgl-caption h3 *,
body .fg-media-caption h3,
body .fg-media-caption h3 * {
    font-size: 36px !important;
    font-weight: 700 !important;
    font-family: "Georgia", "Times New Roman", serif !important;
    color: #055B00 !important; 
    display: block !important;
    margin-top: 0 !important; 
    padding-top: 0 !important;
    margin-bottom: 15px !important;
    text-align: center !important;
}

/* UNIVERSAL BIOGRAPHY TEXT: Company Saddle Brown (#A85600) */
body .fgl-caption-desc,
body .fgl-caption-desc *,
body .fg-media-caption .desc,
body .fg-media-caption .desc *,
body .fgl-caption p,
body .fgl-caption p *,
body .fg-media-caption p,
body .fg-media-caption p *,
body .fg-media-caption {
    font-size: 22px !important;
    font-weight: 400 !important;
    font-family: "Georgia", "Times New Roman", serif !important;
    color: #A85600 !important; 
    line-height: 1.8 !important;
    text-align: left !important;
}


/* ==========================================================================
   2. NUCLEAR SAFETY NET: SANCTUARY DEFAULT BUTTONS (#055B00)
   ========================================================================== */
/* Automatically forces any link pointing to Zeffy to become a Forest Green button */
body .fgl-caption a[href*="zeffy.com"], 
body .fg-media-caption a[href*="zeffy.com"],
body .sponsor-button {
    display: block !important; 
    width: max-content !important; 
    margin-left: auto !important;  
    margin-right: auto !important; 
    margin-top: 25px !important;
    padding: 12px 28px !important;
    background-color: #055B00 !important; /* Company Forest Green */
    color: #FFF4DB !important; /* Company Cream Accent text */
    font-family: "Georgia", "Times New Roman", serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    text-align: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: opacity 0.2s ease-in-out !important;
}

body .fgl-caption a[href*="zeffy.com"]:hover, 
body .fg-media-caption a[href*="zeffy.com"]:hover,
body .sponsor-button:hover {
    opacity: 0.9 !important;
    color: #FFF4DB !important;
    text-decoration: none !important;
}

/* LESSON SECONDARY TEXT LINK: Centers nicely under the main action buttons */
body .secondary-text-link {
    display: block !important;
    text-align: center !important;
    margin-top: 18px !important;
    font-family: "Georgia", "Times New Roman", serif !important;
    font-size: 16px !important;
    color: #055B00 !important; /* Clean Forest Green text link */
    text-decoration: underline !important;
    font-weight: 600 !important;
}


/* ==========================================================================
   3. MAIN WEB GRID HOVER CLEANUP: SHOW ONLY TITLE
   ========================================================================== */
/* Strips descriptions and pop-up overlay icons cleanly from main gallery grids */
.foogallery .fg-caption-desc, 
.foogallery .fg-caption-desc *,
.foogallery .fg-hover-icon, 
.foogallery .fg-thumb-icon,
.foogallery [class*="fg-hover-icon"] {
    display: none !important; 
}


/* ==========================================================================
   4. SOLID COLOR LOCKDOWN: MULTI-LIGHTBOX STAGE & SOLID LIGHT CREAM CARD
   ========================================================================== */
/* Casts a heavy solid black blanket across all background elements to kill text bleed-through */
div.fbx-modal, .fbx-modal, .fbx-overlay, .fbx-stage, .fbx-instance, div.fbx-lightbox, .fg-lightbox, .fg-lightbox-overlay, .foogallery-lightbox, .foogallery-lightbox-panel, body .fg-panel-info-overlay, body .fg-panel-info, .foogallery-lightbox body .fg-panel, .fg-panel, .fg-panel-area, .fg-panel-area-inner, .fg-panel-content, .fg-panel-content-inner, .fg-panel-container {
    background-color: #111111 !important; /* Solid Dark Charcoal Theater Curtain */
    background: #111111 !important;
    opacity: 1 !important;
}

/* Desktop Only: Safely isolates and builds the floating cream card panel on larger displays */
@media (min-width: 769px) {
    body .fg-panel-info-inner,
    .fg-panel-info-inner,
    body .fgl-caption,
    body .fg-media-caption {
        background-color: #FFF9ED !important; /* True solid ultra-light cream card */
        background: #FFF9ED !important;
        opacity: 1 !important; 
        padding: 30px !important;
        box-sizing: border-box !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
        border-radius: 6px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important; 
    }
    
    /* Disables internal duplicate stacking padding on desktop sub-layers */
    .fg-panel-info-inner .fgl-caption,
    .fg-panel-info-inner .fg-media-caption {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}


/* ==========================================================================
   5. MOBILE PROFILE DRAWER OVERLAY (SPACIOUS & VOID-FREE MOBILE VIEW)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* Outer Card Wrapper: The ONLY layer that dictates background, top position, and screen size */
    body .fg-panel-info,
    .fg-panel-info {
        position: absolute !important;
        top: 20% !important; 
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: auto !important; 
        overflow-y: auto !important; 
        background-color: #FFF9ED !important; 
        background: #FFF9ED !important;
        
        /* OPTIMIZED BOTTOM SPACE: Trimmed from 100px down to 50px */
        padding: 15px 24px 50px 24px !important; 
        box-sizing: border-box !important;
        border-top: 4px solid #A85600 !important; /* Structural saddle brown top accent bar */
        z-index: 999999 !important;
    }
    
    /* Inner Child Elements: Flattened to 0 padding/margins to permanently erase the empty space bug */
    body .fgl-caption, 
    body .fg-media-caption,
    body .fg-panel-info-inner,
    .fg-panel-info-inner {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* Mobile Title Optimization: Locks the horse name directly to the top edge of the card */
    body .fgl-caption-title, body .fgl-caption-title *, body .fg-media-caption .title, body .fg-media-caption .title *, body .fgl-caption h3, body .fgl-caption h3 *, body .fg-media-caption h3, body .fg-media-caption h3 * {
        font-size: 26px !important; 
        margin-top: 0 !important;   
        padding-top: 0 !important;  
        margin-bottom: 12px !important;
    }

    body .fgl-caption-desc, body .fgl-caption-desc *, body .fg-media-caption .desc, body .fg-media-caption .desc *, body .fgl-caption p, body .fgl-caption p *, body .fg-media-caption p, body .fg-media-caption p *, body .fg-media-caption {
        font-size: 17px !important; 
        line-height: 1.7 !important;
        margin-top: 0 !important;   
        padding-top: 0 !important;
    }

    body .fgl-caption a[href*="zeffy.com"], body .fg-media-caption a[href*="zeffy.com"], body .sponsor-button {
        font-size: 16px !important;
        padding: 12px 24px !important;
        margin-top: 20px !important;
    }
}


/* ==========================================================================
   6. LESSON HERD COLOR OVERRIDE & LESSON NUCLEAR SAFETY NETS (GALLERY ID: 1199)
   ========================================================================== */

/* Swaps title typography to Company Saddle Brown (#A85600) exclusively inside the Lesson Lightbox */
.foogallery-lightbox-1199 .fgl-caption-title,
.foogallery-lightbox-1199 .fgl-caption-title *,
.foogallery-lightbox-1199 .fg-media-caption .title,
.foogallery-lightbox-1199 .fg-media-caption .title *,
.foogallery-lightbox-1199 .fgl-caption h3,
.foogallery-lightbox-1199 .fgl-caption h3 * {
    color: #A85600 !important; 
}

/* LESSON NUCLEAR SAFETY NET: Transforms Zeffy or scheduling links into Saddle Brown buttons */
.foogallery-lightbox-1199 .sponsor-button,
.foogallery-lightbox-1199 a[href*="zeffy.com"],
.foogallery-lightbox-1199 a[href*="book"],
.foogallery-lightbox-1199 a[href*="lesson"] {
    background-color: #A85600 !important; /* Main action button changes to Saddle Brown */
    color: #FFF4DB !important; /* Cream accent text color */
}

/* Lesson Hover States */
.foogallery-lightbox-1199 .sponsor-button:hover,
.foogallery-lightbox-1199 a[href*="zeffy.com"]:hover,
.foogallery-lightbox-1199 a[href*="book"]:hover,
.foogallery-lightbox-1199 a[href*="lesson"]:hover {
    opacity: 0.9 !important;
    color: #FFF4DB !important;
}

/* Secondary alternative donation link styling inside the Lesson Grid */
.foogallery-lightbox-1199 .secondary-text-link {
    color: #055B00 !important; /* Displays as a crisp Forest Green text link beneath the brown button */
}