/* Global Responsive Design Enhancements for GCEC Institute */

/* Base responsive typography - Reduced for medium appearance */
html {
    font-size: 14px; /* Reduced from 16px */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Responsive viewport meta tag enhancement */
@media screen and (max-width: 320px) {
    html {
        font-size: 12px; /* Reduced from 14px */
    }
}

@media screen and (min-width: 1200px) {
    html {
        font-size: 15px; /* Reduced from 18px */
    }
}

/* Enhanced responsive breakpoints */
@media (max-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    /* Responsive text scaling - Reduced maximum values */
    h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); } /* Reduced from 2.5rem */
    h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); } /* Reduced from 2rem */
    h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); } /* Reduced from 1.75rem */
    h4 { font-size: clamp(1rem, 2.2vw, 1.2rem); } /* Reduced from 1.5rem */
    h5 { font-size: clamp(0.9rem, 1.8vw, 1.1rem); } /* Reduced from 1.25rem */
    h6 { font-size: clamp(0.8rem, 1.5vw, 0.9rem); } /* Reduced from 1rem */
    
    p, .text-content {
        font-size: clamp(0.8rem, 1.3vw, 0.9rem); /* Reduced from 1rem */
        line-height: 1.5; /* Reduced from 1.6 */
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    /* Enhanced mobile navigation */
    .navbar-nav {
        text-align: center;
    }
    
    .navbar-nav .nav-link {
        padding: 8px 12px !important; /* Reduced from 10px 15px */
        margin: 2px 0;
        border-radius: 8px; /* Reduced from 10px */
    }
    
    /* Responsive sidebar adjustments */
    .sidebar {
        position: relative;
        height: auto;
        min-height: auto;
    }
    
    .main-content {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 720px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Mobile-first responsive design */
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Enhanced mobile typography - Reduced maximum values */
    h1 { font-size: clamp(1.3rem, 5vw, 1.6rem); } /* Reduced from 2rem */
    h2 { font-size: clamp(1.1rem, 4.5vw, 1.4rem); } /* Reduced from 1.8rem */
    h3 { font-size: clamp(1rem, 4vw, 1.2rem); } /* Reduced from 1.5rem */
    h4 { font-size: clamp(0.9rem, 3.5vw, 1.1rem); } /* Reduced from 1.3rem */
    h5 { font-size: clamp(0.8rem, 3vw, 1rem); } /* Reduced from 1.1rem */
    h6 { font-size: clamp(0.7rem, 2.5vw, 0.9rem); } /* Reduced from 1rem */
    
    p, .text-content {
        font-size: clamp(0.75rem, 2.2vw, 0.85rem); /* Reduced from 0.95rem */
        line-height: 1.4; /* Reduced from 1.5 */
    }
    
    /* Mobile form enhancements */
    .form-control {
        font-size: 14px; /* Reduced from 16px */
        padding: 10px 12px; /* Reduced from 12px 15px */
        border-radius: 8px; /* Reduced from 10px */
    }
    
    .btn {
        padding: 10px 16px; /* Reduced from 12px 20px */
        font-size: 0.8rem; /* Reduced from 0.9rem */
        border-radius: 8px; /* Reduced from 10px */
    }
    
    /* Mobile card adjustments */
    .card {
        border-radius: 12px; /* Reduced from 15px */
        margin-bottom: 12px; /* Reduced from 15px */
    }
    
    .card-body {
        padding: 16px 12px; /* Reduced from 20px 15px */
    }
    
    /* Mobile table responsiveness */
    .table-responsive {
        border-radius: 8px; /* Reduced from 10px */
        overflow: hidden;
    }
    
    .table {
        font-size: 0.75rem; /* Reduced from 0.85rem */
    }
    
    .table th, .table td {
        padding: 6px 4px; /* Reduced from 8px 6px */
        vertical-align: middle;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Extra small device optimizations - Reduced maximum values */
    h1 { font-size: clamp(1.1rem, 6vw, 1.4rem); } /* Reduced from 1.8rem */
    h2 { font-size: clamp(1rem, 5.5vw, 1.3rem); } /* Reduced from 1.6rem */
    h3 { font-size: clamp(0.9rem, 5vw, 1.2rem); } /* Reduced from 1.4rem */
    h4 { font-size: clamp(0.8rem, 4.5vw, 1.1rem); } /* Reduced from 1.2rem */
    h5 { font-size: clamp(0.8rem, 4vw, 1rem); } /* Reduced from 1.1rem */
    h6 { font-size: clamp(0.7rem, 3.5vw, 0.9rem); } /* Reduced from 1rem */
    
    p, .text-content {
        font-size: clamp(0.7rem, 2.8vw, 0.8rem); /* Reduced from 0.9rem */
        line-height: 1.3; /* Reduced from 1.4 */
    }
    
    /* Enhanced mobile buttons */
    .btn {
        padding: 8px 15px; /* Reduced from 10px 18px */
        font-size: 0.75rem; /* Reduced from 0.85rem */
        width: 100%;
        margin: 4px 0; /* Reduced from 5px 0 */
    }
    
    .btn-group .btn {
        width: auto;
        margin: 2px;
    }
    
    /* Mobile modal adjustments */
    .modal-content {
        border-radius: 12px; /* Reduced from 15px */
        margin: 8px; /* Reduced from 10px */
    }
    
    .modal-body {
        padding: 16px 12px; /* Reduced from 20px 15px */
    }
    
    .modal-header {
        padding: 12px 16px; /* Reduced from 15px 20px */
    }
    
    /* Mobile navigation */
    .navbar-brand {
        font-size: 1rem; /* Reduced from 1.1rem */
    }
    
    .navbar-toggler {
        padding: 3px 6px; /* Reduced from 4px 8px */
        font-size: 0.8rem; /* Reduced from 0.9rem */
    }
}

@media (max-width: 375px) {
    /* iPhone SE and small devices - Reduced maximum values */
    h1 { font-size: clamp(1rem, 7vw, 1.3rem); } /* Reduced from 1.6rem */
    h2 { font-size: clamp(0.9rem, 6.5vw, 1.2rem); } /* Reduced from 1.4rem */
    h3 { font-size: clamp(0.8rem, 6vw, 1.1rem); } /* Reduced from 1.3rem */
    h4 { font-size: clamp(0.8rem, 5.5vw, 1rem); } /* Reduced from 1.1rem */
    h5 { font-size: clamp(0.7rem, 5vw, 0.9rem); } /* Reduced from 1rem */
    h6 { font-size: clamp(0.65rem, 4.5vw, 0.8rem); } /* Reduced from 0.9rem */
    
    p, .text-content {
        font-size: clamp(0.65rem, 3.2vw, 0.75rem); /* Reduced from 0.85rem */
        line-height: 1.2; /* Reduced from 1.3 */
    }
    
    .btn {
        padding: 7px 12px; /* Reduced from 8px 15px */
        font-size: 0.7rem; /* Reduced from 0.8rem */
    }
    
    .form-control {
        padding: 8px 10px; /* Reduced from 10px 12px */
        font-size: 14px; /* Reduced from 16px */
    }
}

/* Landscape orientation optimizations */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: 100vh;
        padding: 20px 0;
    }
    
    .navbar {
        padding: 5px 0;
    }
    
    .modal-dialog {
        margin: 5px auto;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .btn, .form-control, .card {
        border-width: 0.5px;
    }
    
    .text-shadow {
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
}

/* Print styles */
@media print {
    .navbar, .sidebar, .btn, .floating-shapes {
        display: none !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
    
    .table {
        font-size: 10px;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
    }
    
    p, .text-content {
        color: #333 !important;
    }
}

/* Accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-color-scheme: dark) {
    /* Dark mode support can be added here */
}

/* Focus enhancements for better accessibility */
.btn:focus, .form-control:focus, .nav-link:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Touch target size optimization */
@media (pointer: coarse) {
    .btn, .nav-link, .form-control {
        min-height: 44px;
    }
    
    .btn {
        padding: 12px 20px;
    }
    
    .nav-link {
        padding: 12px 16px !important;
    }
}

/* Responsive image handling */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive iframe handling */
iframe {
    max-width: 100%;
    width: 100%;
}

/* Responsive video handling */
video {
    max-width: 100%;
    height: auto;
}

/* Responsive table handling */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Responsive grid system enhancement */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Responsive spacing utilities */
@media (max-width: 768px) {
    .p-md-0 { padding: 0 !important; }
    .p-md-1 { padding: 0.25rem !important; }
    .p-md-2 { padding: 0.5rem !important; }
    .p-md-3 { padding: 1rem !important; }
    .p-md-4 { padding: 1.5rem !important; }
    .p-md-5 { padding: 3rem !important; }
    
    .m-md-0 { margin: 0 !important; }
    .m-md-1 { margin: 0.25rem !important; }
    .m-md-2 { margin: 0.5rem !important; }
    .m-md-3 { margin: 1rem !important; }
    .m-md-4 { margin: 1.5rem !important; }
    .m-md-5 { margin: 3rem !important; }
}

@media (max-width: 576px) {
    .p-sm-0 { padding: 0 !important; }
    .p-sm-1 { padding: 0.25rem !important; }
    .p-sm-2 { padding: 0.5rem !important; }
    .p-sm-3 { padding: 1rem !important; }
    .p-sm-4 { padding: 1.5rem !important; }
    .p-sm-5 { padding: 3rem !important; }
    
    .m-sm-0 { margin: 0 !important; }
    .m-sm-1 { margin: 0.25rem !important; }
    .m-sm-2 { margin: 0.5rem !important; }
    .m-sm-3 { margin: 1rem !important; }
    .m-sm-4 { margin: 1.5rem !important; }
    .m-sm-5 { margin: 3rem !important; }
}

/* Responsive text alignment */
@media (max-width: 768px) {
    .text-md-center { text-align: center !important; }
    .text-md-left { text-align: left !important; }
    .text-md-right { text-align: right !important; }
}

@media (max-width: 576px) {
    .text-sm-center { text-align: center !important; }
    .text-sm-left { text-align: left !important; }
    .text-sm-right { text-align: right !important; }
}

/* Responsive display utilities */
@media (max-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline-flex { display: inline-flex !important; }
}

@media (max-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline-flex { display: inline-flex !important; }
}

/* Responsive flex utilities */
@media (max-width: 768px) {
    .flex-md-row { flex-direction: row !important; }
    .flex-md-column { flex-direction: column !important; }
    .flex-md-wrap { flex-wrap: wrap !important; }
    .flex-md-nowrap { flex-wrap: nowrap !important; }
    .justify-content-md-start { justify-content: flex-start !important; }
    .justify-content-md-end { justify-content: flex-end !important; }
    .justify-content-md-center { justify-content: center !important; }
    .justify-content-md-between { justify-content: space-between !important; }
    .align-items-md-start { align-items: flex-start !important; }
    .align-items-md-end { align-items: flex-end !important; }
    .align-items-md-center { align-items: center !important; }
}

@media (max-width: 576px) {
    .flex-sm-row { flex-direction: row !important; }
    .flex-sm-column { flex-direction: column !important; }
    .flex-sm-wrap { flex-wrap: wrap !important; }
    .flex-sm-nowrap { flex-wrap: nowrap !important; }
    .justify-content-sm-start { justify-content: flex-start !important; }
    .justify-content-sm-end { justify-content: flex-end !important; }
    .justify-content-sm-center { justify-content: center !important; }
    .justify-content-sm-between { justify-content: space-between !important; }
    .align-items-sm-start { align-items: flex-start !important; }
    .align-items-sm-end { align-items: flex-end !important; }
    .align-items-sm-center { align-items: center !important; }
}