/**
 * Mobile Usability Fixes - Phase 2 Task 6
 * Date: 2025-11-17
 *
 * Fixes:
 * - Touch targets minimum 48px height
 * - Text minimum 16px on mobile
 * - Better tap target spacing
 */

/* ========================================
   Mobile Touch Target Fixes (min 48px)
   ======================================== */

@media (max-width: 768px) {

    /* Exception: Floating Request Button - Excluded from general rules below */

    /* Service Card Buttons - Increase from 40px to 48px */
    .elementor-button,
    a.elementor-button,
    .elementor-button-link {
        min-height: 48px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        line-height: 1.5 !important;
    }

    /* Social Media Icons - Increase touch target from 28px to 48px */
    .site-header a[href*="mailto"],
    .site-header a[href*="google.com"],
    .site-header a[href*="tel"] {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Navigation Menu Links - Increase touch targets */
    .main-navigation a,
    .mobile-menu-control-wrapper .menu-toggle {
        min-height: 48px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Footer Links */
    .site-footer a {
        min-height: 44px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        display: inline-block !important;
    }

    /* All Links - Minimum touch target (excluding floating button) */
    a:not(.floating-request-button a) {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Exception for inline text links */
    p a,
    li a:not(.elementor-button),
    span a {
        min-height: auto !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* ========================================
   Mobile Text Size Fixes (min 16px)
   ======================================== */

@media (max-width: 768px) {

    /* Navigation Menu - Increase from 13px to 16px */
    .main-navigation a,
    .main-navigation li,
    .navigation-search input,
    .menu-item a {
        font-size: 16px !important;
    }

    /* Mobile Menu */
    .mobile-menu-control-wrapper,
    .mobile-menu-control-wrapper .menu-toggle {
        font-size: 16px !important;
    }

    /* Cookie Notice - Increase from 14px to 16px */
    .cky-consent-container,
    .cky-consent-container p,
    .cky-consent-container a,
    .cky-notice,
    .cky-notice-des {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* Body Text - Ensure minimum 16px */
    body,
    p,
    li,
    span,
    div {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Elementor Widgets */
    .elementor-widget-text-editor,
    .elementor-text-editor,
    .elementor-heading-title {
        font-size: 16px !important;
    }

    /* Small exceptions that should stay small */
    .elementor-element small,
    .copyright-text,
    .site-footer .footer-copyright {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Links - Ensure readable */
    a {
        font-size: inherit !important;
        min-font-size: 16px !important;
    }

    /* Form Labels and Inputs */
    label,
    input,
    textarea,
    select,
    button {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* Buttons Text */
    .elementor-button,
    button,
    input[type="submit"],
    input[type="button"] {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
}

/* ========================================
   Mobile Spacing and Readability
   ======================================== */

@media (max-width: 768px) {

    /* Better spacing between clickable elements */
    .elementor-button-wrapper {
        margin: 10px 0 !important;
    }

    /* Service cards spacing */
    .elementor-column {
        margin-bottom: 20px !important;
    }

    /* Ensure touch targets have clear visual boundaries */
    a:not(.elementor-button),
    button {
        padding: 8px 12px !important;
    }

    /* Better line height for readability */
    p,
    li,
    div {
        line-height: 1.6 !important;
    }

    /* Headings */
    h1 { font-size: 32px !important; line-height: 1.3 !important; }
    h2 { font-size: 28px !important; line-height: 1.3 !important; }
    h3 { font-size: 24px !important; line-height: 1.4 !important; }
    h4 { font-size: 20px !important; line-height: 1.4 !important; }
    h5 { font-size: 18px !important; line-height: 1.5 !important; }
    h6 { font-size: 16px !important; line-height: 1.5 !important; }
}

/* ========================================
   Accessibility Improvements
   ======================================== */

@media (max-width: 768px) {

    /* Better focus states for touch */
    a:focus,
    button:focus,
    input:focus {
        outline: 3px solid #007bff !important;
        outline-offset: 2px !important;
    }

    /* Increase button padding for easier tapping */
    .elementor-button {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Better contrast for links */
    a {
        text-decoration: underline !important;
    }

    a.elementor-button {
        text-decoration: none !important;
    }

    /* ========================================
       FLOATING BUTTONS OVERRIDE - Must come LAST
       ======================================== */

    /* Green Request Collection Button */
    .floating-request-button {
        position: fixed !important;
        bottom: 90px !important;
        right: 15px !important;
        left: auto !important;
        z-index: 9998 !important;
        display: block !important;
    }

    .floating-request-button a {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        border-radius: 50% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 5px !important;
        text-decoration: none !important;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
        box-shadow: 0 4px 12px rgba(34,197,94,0.4) !important;
    }

    /* WhatsApp Button - ensure circular and properly positioned */
    .ht-ctc-chat,
    .ht_ctc_chat_style {
        position: fixed !important;
        bottom: 20px !important;
        right: 15px !important;
        z-index: 9999 !important;
    }

    .ht-ctc-chat a,
    .ht_ctc_chat_style a,
    #ht-ctc-chat a {
        width: 65px !important;
        height: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        min-height: 65px !important;
        max-height: 65px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ht-ctc-chat img,
    .ht_ctc_chat_style img,
    .ht-ctc-chat svg,
    .ht_ctc_chat_style svg,
    #ht-ctc-chat img,
    #ht-ctc-chat svg {
        width: 42px !important;
        height: 42px !important;
    }
}

/* ========================================
   CLS Prevention - DEV6 2025-11-21
   ======================================== */

/* Reserve space for images before they load */
img {
    aspect-ratio: attr(width) / attr(height);
}

/* Fallback aspect ratios for common image sizes */
.elementor-image img,
.wp-post-image {
    aspect-ratio: auto;
    max-width: 100%;
    height: auto;
}

/* Reserve space for header area to prevent shift */
.site-header,
header.elementor-location-header {
    min-height: 80px;
}

@media (max-width: 768px) {
    .site-header,
    header.elementor-location-header {
        min-height: 60px;
    }
}

/* Reserve space for footer logo */
.site-footer img {
    aspect-ratio: 754 / 228; /* Logo dimensions */
}

/* Prevent font loading CLS */
html {
    font-display: swap;
}

body {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Reserve space for cookie notice - DEV6 CLS fix 2025-11-21 */
/* FORCE disable ALL cookie banner animations to prevent CLS */
.cky-consent-container,
.cky-consent-bar,
.cky-modal,
.cookie-notice-container,
#cookie-notice,
.cn-bottom,
[class*="cky-"] {
    animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition: none !important;
    transition-duration: 0s !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Ensure cookie banner is visible immediately without animation */
.cky-consent-container:not(.cky-hide) {
    display: block !important;
    visibility: visible !important;
}

/* Reserve space at bottom of page for cookie banner */
html {
    scroll-padding-bottom: 120px;
}

/* Make cookie banner not affect layout - use transform for positioning */
.cky-consent-container.cky-banner-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateZ(0) !important; /* GPU layer, no CLS */
}

/* Prevent layout shift from lazy-loaded content */
[data-lazy-src] {
    min-height: 1px;
}

/* Fixed position elements shouldn't cause CLS */
.floating-request-button,
.ht-ctc-chat,
#ht-ctc-chat {
    position: fixed !important;
    transform: translateZ(0); /* GPU acceleration */
}

/* Ensure grid layouts don't shift */
.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
}

/* ========================================
   Template 2346 Hero CLS Fix - DEV6 2025-11-21
   Prevents Cumulative Layout Shift on PGP pages
   ======================================== */

/* Reserve space for hero section BEFORE content loads */
[data-id="dcd_hero"],
.elementor-element-dcd_hero,
section[data-id="dcd_hero"] {
    min-height: 500px !important;
    contain: layout style;
}

[data-id="dcd_hero"] > .elementor-container {
    min-height: 500px !important;
}

/* Hero HTML widget - prevent shift */
[data-id="hero_html_innovent"],
.elementor-element-hero_html_innovent {
    min-height: 450px !important;
}

/* Modern CLS prevention for hero */
[data-id="dcd_hero"] {
    contain-intrinsic-size: auto 500px;
    content-visibility: visible; /* Don't lazy-load hero */
}

/* Mobile hero - smaller but still reserved */
@media (max-width: 767px) {
    [data-id="dcd_hero"],
    .elementor-element-dcd_hero,
    section[data-id="dcd_hero"] {
        min-height: 400px !important;
        contain-intrinsic-size: auto 400px;
    }

    [data-id="dcd_hero"] > .elementor-container,
    [data-id="hero_html_innovent"] {
        min-height: 380px !important;
    }
}

/* Tablet hero */
@media (min-width: 768px) and (max-width: 1024px) {
    [data-id="dcd_hero"],
    section[data-id="dcd_hero"] {
        min-height: 450px !important;
        contain-intrinsic-size: auto 450px;
    }
}