/* Mobile and responsive design enhancements */

/* General mobile adjustments */
@media (max-width: 767px) {
    body {
        font-size: 15px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.2rem;
    }
    
    /* Adjust container padding for all mobile screens */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Adjust navbar */
    .navbar-brand {
        font-size: 1rem;
        max-width: 70%;
        white-space: normal;
        line-height: 1.2;
    }
    
    /* Hero section for homepage */
    .hero-section {
        height: 60vh;
    }
    
    .hero-title {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Section adjustments */
    .section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .section-title::after {
        width: 60px;
    }
    
    /* Activity logs improvements */
    .log-card {
        margin-bottom: 20px;
    }
    
    .log-title {
        font-size: 1.3rem;
    }
    
    .log-date-info {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .log-timestamp {
        margin-left: 0;
        margin-top: 5px;
    }
    
    .log-content {
        padding: 15px;
    }
    
    .log-gallery .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    
    .log-gallery .col-md-3, 
    .log-gallery .col-sm-6 {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* Footer improvements */
    footer {
        padding: 2rem 0;
        text-align: center;
    }
    
    .footer-title {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .social-links {
        justify-content: center;
        margin-bottom: 1rem;
    }
    
    /* Button enhancements */
    .btn-custom {
        padding: 0.6rem 1.5rem;
    }
    
    /* Page headers */
    .page-header {
        height: auto;
        padding: 30px 0;
        margin-top: 56px; /* Account for fixed navbar */
        margin-bottom: 20px;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    /* Adjust content for readability */
    .log-text {
        font-size: 15px;
        line-height: 1.5;
    }
    
    /* Improve image gallery spacing */
    .log-gallery {
        margin-top: 15px;
        padding-top: 15px;
    }
    
    /* Make search form more compact */
    .page-header .form-control {
        height: 38px;
    }
    
    .page-header .btn {
        height: 38px;
        padding: 0.375rem 0.75rem;
    }
    
    /* Improve text truncation for captions */
    .text-truncate {
        max-width: 100%;
        display: block;
    }
    
    /* Enhance touch target for view gallery button */
    .view-gallery {
        width: 100%;
        margin-top: 10px;
    }
    
    /* Improve gallery loading on mobile */
    .gallery-item img,
    .gallery-item video {
        transition: transform 0.2s ease;
    }
    
    /* Hide scrollbars but allow scrolling */
    .log-text::-webkit-scrollbar {
        display: none;
    }
    
    .log-text {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Add touch highlight effect */
    .touch-active {
        opacity: 0.8;
    }
    
    /* Fix for iOS fixed navbar */
    .fixed-top {
        -webkit-backface-visibility: hidden;
    }
    
    /* Ensure content never gets hidden under fixed navbar */
    body {
        padding-top: 56px;
    }
    
    .page-header {
        margin-top: 0; /* We already have padding-top on body */
    }
}

/* Ultra-small screens (iPhone SE) */
@media (max-width: 375px) {
    body {
        font-size: 14px;
    }
    
    .navbar-brand {
        font-size: 0.9rem;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .log-title {
        font-size: 1.2rem;
    }
    
    .col-md-3, .col-sm-6 {
        width: 50%;
    }
    
    .gallery-item img, 
    .gallery-item video {
        height: 120px !important;
    }
}

/* Medium-sized screens (iPhone 12, 13, 14) */
@media (min-width: 376px) and (max-width: 428px) {
    .col-md-3, .col-sm-6 {
        width: 50%;
    }
    
    .gallery-item img, 
    .gallery-item video {
        height: 140px !important;
    }
}

/* Large screens (iPhone Pro Max models) */
@media (min-width: 429px) and (max-width: 767px) {
    .col-md-3, .col-sm-6 {
        width: 50%;
    }
    
    .gallery-item img, 
    .gallery-item video {
        height: 160px !important;
    }
}

/* Enhanced touch targets for mobile */
@media (max-width: 767px) {
    /* Larger touch targets */
    .nav-link,
    .btn,
    .gallery-item,
    .social-links a {
        padding: 0.6rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-link {
        justify-content: flex-start;
    }
    
    /* Fix video modal for mobile */
    #videoModal .modal-dialog {
        margin: 0.5rem;
    }
    
    /* Lightbox improvements */
    .lb-nav a.lb-prev,
    .lb-nav a.lb-next {
        opacity: 0.9 !important;
        background-size: 20px !important;
        width: 35px !important;
        height: 35px !important;
    }
    
    /* Gallery improvements */
    .gallery-item {
        margin-bottom: 10px;
    }
    
    /* Back to top button */
    .back-to-top {
        bottom: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    
    /* Table responsive improvements */
    .table-responsive {
        font-size: 0.9rem;
    }
    
    /* Timeline improvements */
    .timeline::before {
        left: 31px;
    }
    
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    
    .timeline-item:nth-child(even) {
        left: 0;
    }
    
    .timeline-item:nth-child(odd) .timeline-content {
        text-align: left;
    }
    
    .timeline-year::after {
        left: -39px !important;
        right: auto !important;
    }
    
    /* Certificate grid */
    .certificate-card {
        margin-bottom: 15px;
    }
}

/* iPhone-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS 100vh issue */
    .hero-section {
        height: calc(var(--vh, 1vh) * 60);
    }
    
    /* Fix for iOS input zooming */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"] {
        font-size: 16px;
    }
}

/* Global fixes for fixed navbar */
.navbar.fixed-top {
    z-index: 1030;
}

body {
    padding-top: 70px; /* Account for fixed navbar */
}

.page-header, 
.admin-header {
    margin-top: 0 !important; /* Override any inline styles */
}

/* Mobile enhancements */

/* Navbar brand adjustments */
@media (max-width: 320px) {
    /* iPhone SE and similar tiny screens */
    .navbar-brand {
        font-size: 0.85rem;
        max-width: 65%;
    }
}

@media (min-width: 321px) and (max-width: 375px) {
    .navbar-brand {
        font-size: 0.9rem;
        max-width: 68%;
    }
}

@media (min-width: 376px) and (max-width: 428px) {
    .navbar-brand {
        font-size: 0.95rem;
        max-width: 70%;
    }
}

/* Touch friendly enhancements */