/* Footer Mobile Optimization - WCAG 2.1 Compliant */
/* Ensures proper touch targets, spacing, and mobile UX for footer */

/* ============================================
   Base Mobile Styles (All Mobile Devices)
   ============================================ */
@media (max-width: 767px) {

    /* Container padding for safe viewing on all devices */
    footer .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Prevent horizontal overflow */
    footer {
        overflow-x: hidden !important;
    }

    footer .f-items {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Footer columns stack properly */
    footer .f-items .item {
        margin-bottom: 30px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }

    /* Last item shouldn't have bottom margin */
    footer .f-items .item:last-child {
        margin-bottom: 15px !important;
    }

    /* ============================================
       Footer Links - WCAG Touch Targets (44x44px)
       ============================================ */

    /* City links with proper touch targets */
    footer .f-item.link ul li {
        margin-bottom: 4px !important;
    }

    footer .f-item.link ul li a {
        display: block !important;
        padding: 12px 16px !important; /* Min 44px touch target */
        min-height: 44px !important; /* WCAG minimum */
        line-height: 20px !important;
        color: #FFF !important;
        font-size: 15px !important;
        border-radius: 4px;
        transition: background-color 0.2s ease;

        /* Text overflow handling */
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 100% !important;
    }

    /* Icon spacing in links */
    footer .f-item.link ul li a i {
        margin-right: 8px;
        min-width: 16px;
        display: inline-block;
    }

    /* Hover/Active states for touch feedback */
    footer .f-item.link ul li a:active,
    footer .f-item.link ul li a:focus {
        background-color: rgba(255, 255, 255, 0.1);
        outline: 2px solid rgba(255, 255, 255, 0.3);
        outline-offset: 2px;
    }

    /* ============================================
       Contact Info Touch Targets
       ============================================ */

    footer .f-item.contact-widget .address ul li {
        margin-bottom: 20px !important;
        padding: 10px 0 !important;
    }

    /* Phone link with large touch target */
    footer .f-item.contact-widget .address ul li .content a {
        display: inline-block !important;
        padding: 12px 16px !important;
        min-height: 44px !important;
        line-height: 20px !important;
        margin-left: -16px; /* Offset padding for alignment */
        border-radius: 4px;
        transition: background-color 0.2s ease;
    }

    footer .f-item.contact-widget .address ul li .content a:active,
    footer .f-item.contact-widget .address ul li .content a:focus {
        background-color: rgba(255, 255, 255, 0.1);
        outline: 2px solid rgba(255, 255, 255, 0.3);
        outline-offset: 2px;
    }

    /* Icon alignment */
    footer .f-item.contact-widget .address ul li .icon {
        width: 24px !important;
        min-width: 24px !important;
        margin-right: 12px !important;
        font-size: 18px !important;
    }

    footer .f-item.contact-widget .address ul li .icon i {
        font-size: 18px !important;
    }

    /* ============================================
       Typography Optimization
       ============================================ */

    /* Widget titles */
    footer .f-item h4.widget-title {
        font-size: 18px !important;
        margin-bottom: 20px !important;
        padding-bottom: 12px !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
        color: #FFF !important;
        font-weight: 600 !important;
    }

    /* About section text */
    footer .f-item.about p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #FFF !important;
        margin-bottom: 15px !important;
    }

    /* Logo sizing */
    footer .f-item.about img {
        max-width: 180px !important;
        height: auto !important;
        margin-bottom: 15px !important;
    }

    /* ============================================
       Footer Bottom Bar
       ============================================ */

    footer .footer-bottom {
        padding: 20px 0 !important;
    }

    footer .footer-bottom .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    footer .footer-bottom p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }

    /* ============================================
       Notched Phone Support (Safe Area)
       ============================================ */

    @supports (padding: max(0px)) {
        footer .container {
            padding-left: max(20px, env(safe-area-inset-left)) !important;
            padding-right: max(20px, env(safe-area-inset-right)) !important;
        }

        footer .footer-bottom .container {
            padding-left: max(20px, env(safe-area-inset-left)) !important;
            padding-right: max(20px, env(safe-area-inset-right)) !important;
            padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ============================================
   Small Mobile (320px - 374px)
   ============================================ */
@media (max-width: 374px) {

    footer .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Slightly smaller touch targets on very small screens (still WCAG compliant) */
    footer .f-item.link ul li a {
        padding: 11px 14px !important;
        font-size: 14px !important;
    }

    footer .f-item h4.widget-title {
        font-size: 17px !important;
    }

    footer .f-item.about p {
        font-size: 14px !important;
    }

    footer .f-item.about img {
        max-width: 160px !important;
    }
}

/* ============================================
   Medium Mobile (375px - 424px)
   ============================================ */
@media (min-width: 375px) and (max-width: 424px) {

    footer .f-item.link ul li a {
        font-size: 15px !important;
    }

    footer .f-item.about img {
        max-width: 170px !important;
    }
}

/* ============================================
   Large Mobile (425px - 767px)
   ============================================ */
@media (min-width: 425px) and (max-width: 767px) {

    footer .f-item.link ul li a {
        font-size: 15px !important;
        padding: 12px 18px !important;
    }

    footer .f-item h4.widget-title {
        font-size: 19px !important;
    }

    footer .f-item.about p {
        font-size: 15px !important;
    }

    footer .f-item.about img {
        max-width: 190px !important;
    }

    /* Two-column layout for city lists on larger mobile */
    footer .f-items .col-lg-2,
    footer .f-items .col-lg-3 {
        width: 50% !important;
        float: left !important;
    }
}

/* ============================================
   Tablet Portrait (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {

    footer .container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    footer .f-items .item {
        margin-bottom: 35px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Touch targets still important on tablets */
    footer .f-item.link ul li a {
        padding: 10px 14px !important;
        min-height: 44px !important;
        font-size: 15px !important;
    }

    footer .f-item h4.widget-title {
        font-size: 19px !important;
    }

    footer .f-item.about p {
        font-size: 15px !important;
    }
}

/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Focus visible for keyboard navigation */
@media (max-width: 991px) {
    footer a:focus-visible {
        outline: 3px solid rgba(255, 255, 255, 0.8) !important;
        outline-offset: 3px !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) and (max-width: 767px) {
    footer .f-item.link ul li a {
        border: 1px solid rgba(255, 255, 255, 0.3);
        margin-bottom: 2px;
    }

    footer .f-item h4.widget-title {
        border-bottom: 3px solid #FFF;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    footer .f-item.link ul li a {
        transition: none !important;
    }

    footer .f-item.contact-widget .address ul li .content a {
        transition: none !important;
    }
}

/* ============================================
   Landscape Mobile Optimization
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {

    /* Reduce vertical spacing in landscape */
    footer .f-items .item {
        margin-bottom: 20px !important;
    }

    footer .f-item h4.widget-title {
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }

    footer .f-item.contact-widget .address ul li {
        margin-bottom: 15px !important;
    }
}