/**
 * LBC Theme - LiteSpeed Cache Compatibility Fixes
 *
 * This file overrides aggressive CSS optimizations made by LiteSpeed Cache
 * that can break the theme's visual appearance.
 *
 * Issues addressed:
 * - Underlines appearing on navigation links
 * - Logo/header positioning issues
 * - Flex container layout problems
 * - LQIP (Low Quality Image Placeholder) shadow/blur effect on lazy-loaded images
 * - Layout shift from responsive placeholders
 *
 * @package LBC_Theme
 * @since 1.0.4
 * @updated 2026-01-31 - Added lazy loading image fixes
 *
 * USAGE: This file is enqueued in inc/enqueue.php with high priority
 * to ensure it loads after LiteSpeed's optimizations.
 */

/* ==========================================================================
   NAVIGATION LINK FIXES
   LiteSpeed's "Remove Unused CSS" can strip text-decoration rules
   ========================================================================== */

/* Desktop Navigation */
.lbc-nav-link,
.lbc-nav-link:link,
.lbc-nav-link:visited,
.lbc-nav-link:hover,
.lbc-nav-link:active {
    text-decoration: none !important;
}

/* Mega Menu Links */
.mega-link-item,
.mega-link-item:link,
.mega-link-item:visited,
.mega-link-item:hover,
.mega-link-item:active,
.mega-title,
.mega-desc {
    text-decoration: none !important;
}

/* Simple List Links (Connect menu) */
.simple-link,
.simple-link:link,
.simple-link:visited,
.simple-link:hover,
.simple-link:active,
.simple-link-parent {
    text-decoration: none !important;
}

/* Nested Submenu Links */
.nested-link,
.nested-link:link,
.nested-link:visited,
.nested-link:hover,
.nested-link:active {
    text-decoration: none !important;
}

/* Mobile Navigation Links */
.m-link,
.m-link:link,
.m-link:visited,
.m-sublink,
.m-sublink:link,
.m-sublink:visited,
.m-sublink-nested,
.m-accordion-btn,
.m-nested-btn {
    text-decoration: none !important;
}

/* CTA Buttons */
.btn-visit,
.btn-visit:link,
.btn-visit:visited,
.btn-watch,
.btn-watch:link,
.btn-watch:visited,
.m-btn-visit,
.m-btn-visit:link,
.m-btn-visit:visited {
    text-decoration: none !important;
}

/* Footer Links */
.lbc-footer a,
.lbc-footer a:link,
.lbc-footer a:visited,
.footer-link,
.footer-link:link,
.footer-link:visited {
    text-decoration: none !important;
}

/* ==========================================================================
   HEADER/LOGO POSITIONING FIXES
   LiteSpeed can strip flex properties causing layout issues
   ========================================================================== */

/* Main Header Container */
.lbc-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
}

/* Header container only - NOT footer containers */
.lbc-header .lbc-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
}

/* Footer bottom container - mobile-first stacking */
.footer-bottom .lbc-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 1rem !important;
}

@media (min-width: 601px) {
    .footer-bottom .lbc-container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: initial !important;
        text-align: left !important;
        flex-wrap: wrap !important;
    }
}

/* Logo Styling */
.lbc-logo {
    display: block !important;
    flex-shrink: 0 !important;
}

.lbc-logo img {
    height: 50px !important;
    width: auto !important;
    display: block !important;
}

/* Navigation */
.lbc-nav {
    display: none !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

@media (min-width: 1024px) {
    .lbc-nav {
        display: flex !important;
    }
}

/* CTA Group */
.lbc-cta-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* ==========================================================================
   DROPDOWN PANEL FIXES
   Ensure mega menus display correctly
   ========================================================================== */

.lbc-dropdown-group {
    position: relative !important;
}

.lbc-dropdown-panel {
    position: absolute !important;
    display: flex !important;
}

/* ==========================================================================
   MOBILE MENU FIXES
   ========================================================================== */

.mobile-drawer {
    display: flex !important;
    flex-direction: column !important;
}

.mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.mobile-links {
    display: block !important;
}

.mobile-bottom-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.mobile-icons {
    display: flex !important;
    justify-content: center !important;
    gap: 1.5rem !important;
}

/* ==========================================================================
   GENERAL LINK RESET
   Catch-all for any other links that might have underlines added
   ========================================================================== */

/* Only apply to navigation areas, not content */
.lbc-header a,
.mobile-overlay a,
.lbc-footer a {
    text-decoration: none !important;
}

/* Ensure hover states don't add underlines */
.lbc-header a:hover,
.mobile-overlay a:hover,
.lbc-footer a:hover {
    text-decoration: none !important;
}

/* ==========================================================================
   BUTTON FIXES
   ========================================================================== */

.btn,
.btn-primary,
.btn-outline,
.btn-outline-dark {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   CARD LINK FIXES
   ========================================================================== */

.method-card,
.method-card:link,
.method-card:visited,
.event-card,
.event-card:link,
.event-card:visited,
.sermon-card,
.sermon-card:link,
.sermon-card:visited {
    text-decoration: none !important;
}

/* ==========================================================================
   LITESPEED LAZY LOADING IMAGE FIXES
   Fixes the shadow/blur effect caused by LQIP (Low Quality Image Placeholder)
   ========================================================================== */

/**
 * Before lazy load: Hide images with placeholder attribute
 * This prevents the blurry LQIP from showing with a shadow effect
 */
img[data-lazyloaded] {
    opacity: 0 !important;
}

/**
 * Upon lazy load: Smooth fade-in transition
 * Once image loads, fade it in smoothly
 */
img.litespeed-loaded,
img.lazyloaded {
    -webkit-transition: opacity 0.3s ease-out !important;
    -moz-transition: opacity 0.3s ease-out !important;
    transition: opacity 0.3s ease-out !important;
    opacity: 1 !important;
}

/**
 * Fix for placeholder background showing as shadow
 * Remove any background that might appear behind lazy-loaded images
 */
img[data-src],
img[data-lazyloaded] {
    background: transparent !important;
    box-shadow: none !important;
}

/**
 * Image containers - enforce aspect ratios to prevent layout shift
 * This prevents the "tall gray box" placeholder issue
 * NOTE: .yr-flyer-card__image excluded - flyers should maintain natural aspect ratio
 */
.card-image,
.sermon-thumb,
.event-thumb,
.hero-image,
.pastor-photo,
.missionary-photo {
    overflow: hidden !important;
    background-color: var(--lbc-sand, #f5f0e6) !important;
}

/* Youth Rally speaker photos - small cards get overflow hidden */
.yr-speaker-card:not(.yr-speaker-card--large) .yr-speaker-card__photo {
    overflow: hidden !important;
    background-color: var(--lbc-sand, #f5f0e6) !important;
}

/* Large speaker cards - natural photo, no forced aspect ratio */
.yr-speaker-card--large .yr-speaker-card__photo {
    aspect-ratio: unset !important;
    overflow: visible !important;
    background: transparent !important;
}

.card-image img,
.sermon-thumb img,
.event-thumb img,
.hero-image img,
.pastor-photo img,
.missionary-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Youth Rally large speaker photos - full image, no cropping */
.yr-speaker-card--large .yr-speaker-card__photo img {
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
    object-position: unset !important;
    display: block !important;
}

/**
 * Flyer images - maintain natural aspect ratio
 * Flyers should display at their natural size, not cropped
 */
.yr-flyer-card__image {
    overflow: hidden !important;
    background-color: var(--lbc-sand, #f5f0e6) !important;
}

.yr-flyer-card__image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/**
 * Prevent LiteSpeed responsive placeholder from causing layout issues
 * These selectors target LiteSpeed's generated placeholder elements
 */
.litespeed-placeholder,
[data-litespeed-placeholder] {
    background: var(--lbc-sand, #f5f0e6) !important;
    box-shadow: none !important;
}

/**
 * Fix for hero/banner images
 * Ensure full-width images don't show placeholder artifacts
 */
.hero img[data-lazyloaded],
.banner img[data-lazyloaded],
.page-hero img[data-lazyloaded],
.hero-bg img[data-lazyloaded],
.yr-hero img[data-lazyloaded],
.yr-hero__banner-img[data-lazyloaded] {
    opacity: 0 !important;
    background: transparent !important;
}

.hero img.litespeed-loaded,
.banner img.litespeed-loaded,
.page-hero img.litespeed-loaded,
.hero-bg img.litespeed-loaded,
.yr-hero img.litespeed-loaded,
.yr-hero__banner-img.litespeed-loaded {
    opacity: 1 !important;
}

/**
 * Background images with lazy loading
 * LiteSpeed also lazy-loads background images via data attributes
 */
[data-bg][data-lazyloaded],
.litespeed-bg {
    background-color: var(--lbc-sand, #f5f0e6) !important;
    transition: background-image 0.3s ease-out !important;
}

/**
 * Remove any artificial shadows from lazy-load wrappers
 */
.lazyload-wrapper,
.litespeed-wrapper,
picture:has(img[data-lazyloaded]) {
    box-shadow: none !important;
    filter: none !important;
}

/**
 * Ensure srcset images also get the fix
 */
img[data-srcset][data-lazyloaded] {
    opacity: 0 !important;
}

img[data-srcset].litespeed-loaded {
    opacity: 1 !important;
}

/* ==========================================================================
   EVENTS CAROUSEL LITESPEED FIXES
   Ensure first slide is visible even when JS is deferred/combined
   ========================================================================== */

/**
 * CSS-only fallback: Show first slide by default
 * The .active class is now added in PHP, but this provides extra safety
 * in case LiteSpeed strips or modifies the class attribute
 */
.carousel-slide:first-child:not([aria-hidden="true"]) {
    display: flex !important;
    opacity: 1 !important;
}

/**
 * Hide other slides to prevent flash of all content
 * Only hide slides that are NOT the first child AND don't have .active
 */
.carousel-slide:not(:first-child):not(.active) {
    display: none !important;
    opacity: 0 !important;
}

/**
 * Active slide always visible (takes precedence)
 */
.carousel-slide.active {
    display: flex !important;
    opacity: 1 !important;
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   Respect user preference for reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    img.litespeed-loaded,
    img.lazyloaded {
        transition: none !important;
        opacity: 1 !important;
    }
}