/* Mobile Responsiveness Fixes for Smolensk Memorial Website */
/* UTF-8 Encoding - Polskie znaki: ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ */

/* Prevent horizontal scrolling on all devices */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Improve touch scrolling performance */
body {
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}

/* FIX: Mobile menu - show hamburger, hide horizontal menu */
@media (max-width: 760px) {
    /* CRITICAL: Show hamburger menu icon on mobile */
    .menu-icon {
        display: block !important;
        position: relative;
        z-index: 10000;
    }

    /* Hide horizontal menu by default */
    .navbar-collapse {
        display: none !important;
        position: absolute;
        top: 65px;
        left: 0;
        right: 0;
        width: 100% !important;
        z-index: 9999;
        background-color: white;
        border-top: 1px solid #cecece;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        float: none !important;
        margin: 0 !important;
        border-bottom: none !important;
    }

    /* Show menu when opened (Bootstrap adds .in class) */
    .navbar-collapse.in,
    .navbar-collapse.collapsing {
        display: block !important;
    }

    /* Override flexbox horizontal layout on mobile */
    .navbar-collapse #menu-primary-navigation {
        display: block !important;
        width: 100% !important;
        flex-direction: column !important;
    }

    /* Make menu items stack vertically */
    .navbar-collapse #menu-primary-navigation li {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        float: none !important;
        flex-grow: 0 !important;
    }

    /* Improve menu link styling */
    .navbar-collapse #menu-primary-navigation li a {
        display: block !important;
        padding: 15px 20px !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Last menu item - no bottom border */
    .navbar-collapse #menu-primary-navigation li:last-child a {
        border-bottom: none;
    }

    /* Fix navbar header on mobile */
    .navbar-header {
        background-color: #000000 !important;
        width: 100%;
        margin: 0 !important;
        padding: 0;
        position: relative;
        min-height: 65px;
    }

    /* Make logo visible on mobile */
    .navbar-brand .logo {
        opacity: 1 !important;
        width: 50px !important;
        height: 50px !important;
        background-image: url(../img/logo-white.svg) !important;
    }

    .navbar-brand {
        margin: 7.5px 0 7.5px 15px !important;
    }

    /* Ensure hamburger icon is white on black background */
    .menu-icon span {
        background: -webkit-linear-gradient(top, transparent 0%, transparent 20%, #fff 20%, #fff 23%, transparent 23%, transparent 48%, #fff 48%, #fff 50%, transparent 47%, transparent 76%, #fff 76%, #fff 78%, transparent 78%), -webkit-linear-gradient(transparent, transparent) !important;
        background: linear-gradient(to bottom, transparent 0%, transparent 20%, #fff 20%, #fff 23%, transparent 23%, transparent 48%, #fff 48%, #fff 50%, transparent 47%, transparent 76%, #fff 76%, #fff 78%, transparent 78%), linear-gradient(transparent, transparent) !important;
    }

    .menu-icon span.clicked {
        background: -webkit-linear-gradient(135deg, transparent 0%, transparent 48%, #fff 49%, #fff 51%, transparent 51%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 48%, #fff 49%, #fff 51%, transparent 51%, transparent 100%) !important;
        background: linear-gradient(-45deg, transparent 0%, transparent 48%, #fff 49%, #fff 51%, transparent 51%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 48%, #fff 49%, #fff 51%, transparent 51%, transparent 100%) !important;
    }

    /* Fix portrait list page header (has different styling) */
    .portrety .navbar-brand .logo {
        background-image: url(../img/logo-white.svg) !important;
    }

    .post-type-archive-portret .navbar-brand .logo {
        background-image: url(../img/logo-white.svg) !important;
    }

    /* Prevent text from being too small */
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Fix container widths */
    .container-full,
    .container-half {
        max-width: 100%;
        overflow: hidden;
    }

    /* Improve image responsiveness */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Enable horizontal scroll for portrait gallery on mobile */
    .portrety .portraits {
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Improve touch targets for buttons and links */
    a, button, .menu-icon span {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-nav li a {
        padding: 15px 20px !important;
        display: block;
    }

    /* Fix portrait images on small screens - show full image without cropping */
    .portrait-small .img-bg img {
        width: 100%;
        height: 100%;
        object-fit: contain !important;
        object-position: center center;
    }

    /* Fix for portrait gallery page - ensure full images visible */
    .portrety .portrait-small .img-bg {
        height: 80% !important;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
    }

    .portrety .portrait-small .img-bg img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain !important;
    }

    /* Portrait gallery row on mobile */
    .portrety .portrait-small {
        width: 220px !important;
        height: auto !important;
        min-height: 280px;
        padding: 5px;
        display: inline-block;
        float: none;
        flex: 0 0 auto;
    }

    .portrety .portrait-small p {
        text-align: center !important;
        padding: 10px 5px;
        margin: 0;
    }

    /* Improve readability of text content */
    .content-container p,
    .content-container h1,
    .content-container h2,
    .content-container h3 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Fix footer positioning on mobile */
    footer {
        position: relative !important;
        width: 100% !important;
    }
}

/* Allow horizontal portrait scrolling on touch devices regardless of width */
.touch-device.portrety .portraits {
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

.touch-device.portrety .set-portrait {
    display: inline-flex;
    flex-wrap: nowrap;
    width: auto !important;
}

.touch-device.portrety .portrait-small {
    flex: 0 0 auto;
    float: none;
}

@media (hover: none) and (pointer: coarse) {
    .portrety .portraits,
    .portrety .scrollable-portrait {
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .portrety .set-portrait {
        display: inline-flex;
        flex-wrap: nowrap;
        width: auto !important;
    }

    .portrety .portrait-small {
        flex: 0 0 auto;
        float: none;
    }
}

/* Extra small devices (phones in portrait, less than 375px) */
@media (max-width: 374px) {
    /* Further reduce font sizes for very small screens */
    h1 {
        font-size: 1.25rem !important;
    }

    h1.white {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.125rem !important;
    }

    p {
        font-size: 0.875rem !important;
        line-height: 1.5rem !important;
    }

    /* Make portrait grid single column on very small screens */
    .portrait-small {
        width: 100% !important;
        height: 320px !important;
    }
}

/* Tablets and larger phones in landscape */
@media (min-width: 569px) and (max-width: 768px) {
    /* Ensure proper layout for tablets */
    .navbar-collapse {
        position: relative;
        top: auto;
    }

    .portrait-small {
        width: 33.333% !important;
    }
}

/* Fix for iOS Safari viewport height issues */
@supports (-webkit-touch-callout: none) {
    .container-half {
        min-height: -webkit-fill-available;
    }
}

/* FIX: All pages - prevent image/text overlap on mobile */
@media (max-width: 768px) {
    /* Remove fixed positioning on mobile for ALL container-half elements */
    .container-half {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        overflow: visible !important;
    }

    /* Image container should be at top - for regular pages */
    .page .container-half:first-child,
    .single-portret .container-half:first-child {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        margin-bottom: 0;
        margin-top: 65px; /* Account for fixed header */
    }

    /* Content container should follow below - for all pages */
    .container-half.content-container {
        margin-top: 0;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
    }

    /* Fix image display for all pages */
    .container-half .animated-img {
        position: relative !important;
        width: 100%;
        height: 100%;
    }

    .container-half .img-bg {
        height: 100% !important;
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container-half .img-bg img {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    /* Fix title positioning on image for all pages */
    .container-half h1.white {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0 20px;
    }

    /* Image description should be visible - for all pages */
    .container-half .img-desc {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10;
    }

    /* Scrollable content on all pages */
    .scrollable {
        height: auto !important;
        overflow-y: visible !important;
    }

    /* Fix title spacing */
    .single-portret h1 {
        margin-top: 20px;
    }

    /* Ensure gallery images are responsive */
    .single-portret .gallery-col {
        padding: 5px;
    }

    .single-portret .gallery-item img {
        width: 100%;
        height: auto;
    }

    /* Fix post navigation on portrait pages */
    .single-portret .post-nav {
        position: relative !important;
        width: 100% !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 30px;
        clear: both;
    }

    .single-portret .post-prev,
    .single-portret .post-next {
        width: 100% !important;
        float: none !important;
        border-right: none !important;
        text-align: center !important;
    }

    .single-portret .post-prev {
        margin-bottom: 10px;
    }
}

/* Improve tap highlighting for better UX */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

a:active,
button:active {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
}

/* Enable horizontal scroll in portrait list on small screens */
@media (max-width: 760px) {
    .portrety .set-portrait {
        display: inline-flex;
        flex-wrap: nowrap;
        width: auto !important;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Ensure sufficient contrast */
    .navbar-default .navbar-nav > li > a {
        color: #000;
        font-weight: 300;
    }

    /* Improve focus states for keyboard navigation */
    a:focus,
    button:focus,
    .menu-icon span:focus {
        outline: 2px solid #4A90E2;
        outline-offset: 2px;
    }
}

/* Fix for sticky hover states on touch devices */
@media (hover: none) and (pointer: coarse) {
    .portrait-small .img-bg:hover:before {
        transition: none;
    }

    .portrait-small a:hover .img-bg {
        filter: saturate(100%);
        -webkit-filter: saturate(100%);
    }
}

/* Performance optimization for animations on mobile */
@media (max-width: 768px) {
    .animated-img,
    .animated-content,
    .animated-bg {
        animation: none;
        transition: none;
        transform: none !important;
        opacity: 1 !important;
        position: relative;
    }
}

/* Fix scrollbar on mobile webkit browsers */
@media (max-width: 768px) {
    .scrollable::-webkit-scrollbar {
        display: none;
    }

    .scrollable {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}