/* =========================================================================
   Site-wide responsive polish — Mobile / Tablet / Desktop
   Loaded last in _Layout.cshtml so it overrides earlier rules where needed.
   Breakpoints:
     - Mobile:  up to 575.98px
     - Tablet:  576px – 991.98px
     - Desktop: 992px+
   ========================================================================= */

/* ---------- Global fluid basics ---------- */
html { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

/* Prevent tables/pre from forcing horizontal page scroll */
.table-responsive, .admin-table-wrap { -webkit-overflow-scrolling: touch; }

/* ---------- Navbar / header ---------- */
@media (max-width: 1199.98px) {
    .site-navbar .navbar-brand img { max-height: 44px; }
    .site-navbar .navbar-brand .brand-text,
    .site-navbar .navbar-brand h1 { font-size: 1rem; line-height: 1.15; }
    /* Collapsed mobile menu spacing */
    .site-navbar .navbar-collapse { padding: .75rem 0; }
    .site-navbar .nav-premium .nav-item { width: 100%; }
    .site-navbar .nav-premium .nav-link {
        padding: .75rem .25rem;
        border-bottom: 1px solid rgba(0,0,0,.06);
    }
    /* Keep the Register Now button prominent on mobile */
    .site-navbar .btn-register,
    .site-navbar .navbar-nav .btn {
        display: inline-flex;
        width: auto;
        margin-top: .5rem;
    }
}

/* ---------- Generic containers & headings ---------- */
@media (max-width: 767.98px) {
    h1, .h1 { font-size: 1.85rem !important; line-height: 1.15; }
    h2, .h2 { font-size: 1.5rem !important; line-height: 1.2; }
    h3, .h3 { font-size: 1.2rem !important; }
    .lead, .lead-sub { font-size: 1rem !important; }
    section, .gh-section { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
}

/* ---------- Home / About hero areas ---------- */
@media (max-width: 767.98px) {
    .hero, .hero-section, .about-hero, .gh-hero {
        padding: 3rem 0 3.5rem !important;
        text-align: center;
    }
    .hero .btn, .about-hero .btn { width: 100%; margin-bottom: .5rem; }
}

/* ---------- Registration wizard ---------- */
@media (max-width: 767.98px) {
    .stepper { flex-wrap: wrap; gap: .5rem; }
    .stepper .step { flex: 1 1 40%; }
    .stepper .step .lbl { font-size: .68rem; }
    .ticket-card { padding: 1rem !important; }
    .side-card { position: static !important; margin-top: 1.5rem; }
    .confirm-item { flex-direction: column; align-items: flex-start; }
}

/* ---------- Explore Ghana ---------- */
@media (max-width: 991.98px) {
    .gh-slideshow { border-radius: 16px; }
    .gh-slideshow .caption h3 { font-size: 1.15rem; }
    .gh-slideshow .nav-btn { width: 42px; height: 42px; }
    .gh-video-wrap { max-width: 100% !important; aspect-ratio: 16/9; }
    .gh-filter-bar {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .gh-filter-bar .gh-filter { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 767.98px) {
    .gh-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .6rem !important;
    }
    .gh-tile img { height: 140px; object-fit: cover; }
    .gh-tile .cap { font-size: .78rem; padding: .35rem .5rem; }
    .gh-tile .tag { font-size: .65rem; padding: .15rem .5rem; }
    .gh-slideshow { aspect-ratio: 4/3; }
}

@media (max-width: 480px) {
    .gh-grid { grid-template-columns: 1fr !important; }
    .gh-tile img { height: 220px; }
}

/* Tablet columns: 2 for filter grid, 3 for gallery */
@media (min-width: 768px) and (max-width: 991.98px) {
    .gh-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .gh-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1.15rem !important;
    }
}

/* ---------- Steering Committee cards ---------- */
@media (max-width: 767.98px) {
    .sc-grid, .steering-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .sc-card, .steering-card { padding: 1.25rem !important; }
    .sc-avatar { width: 96px !important; height: 96px !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sc-grid, .steering-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

/* ---------- Admin area ---------- */
@media (max-width: 991.98px) {
    .admin-shell,
    .admin-layout {
        display: block !important;
    }
    .admin-sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid var(--a-border, #e6e6e6);
    }
    .admin-nav { display: flex; flex-wrap: wrap; gap: .35rem; padding: .75rem; }
    .admin-nav-link { flex: 1 1 45%; justify-content: center; }
    .admin-content, .admin-main { padding: 1rem !important; }

    .admin-panel-head,
    .admin-messages-row {
        display: block !important;
    }
    .admin-messages-row > * + * { margin-top: 1rem; }

    .admin-filters { width: 100%; }
    .admin-filters .form-control,
    .admin-filters .form-select { flex: 1 1 auto; min-width: 0; }
    .admin-filters .admin-btn,
    .admin-filters .btn { flex: 1 1 auto; }

    /* Tables become horizontally scrollable rather than squished */
    .admin-table-wrap { overflow-x: auto; }
    .admin-table { min-width: 720px; }
}

@media (max-width: 575.98px) {
    .admin-page-header h2 { font-size: 1.35rem; }
    .admin-card { padding: 1rem !important; }
    .admin-form-grid { grid-template-columns: 1fr !important; }
    .admin-form-grid .span-2 { grid-column: span 1 !important; }
}

/* ---------- Sponsors / Exhibitions grids ---------- */
@media (max-width: 767.98px) {
    .sponsor-grid, .tier-grid, .exhibition-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .sponsor-card, .tier-card { padding: 1.25rem !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sponsor-grid, .tier-grid, .exhibition-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

/* ---------- Footer ---------- */
@media (max-width: 767.98px) {
    .site-footer .row > [class*="col-"] { margin-bottom: 1.5rem; }
    .site-footer h5, .site-footer h6 { font-size: 1rem; }
    .site-footer .social a { margin-right: .35rem; }
}

/* ---------- MOBILE-FIRST FORM ENHANCEMENTS ---------- */
/* Form inputs optimized for touch and smaller screens */
@media (max-width: 767.98px) {
    .input-premium, .select-premium, textarea.input-premium {
        font-size: 16px !important; /* Prevents auto-zoom on iOS */
        padding: 1rem !important;
        height: auto;
        min-height: 48px; /* Touch target minimum */
    }

    .form-group, .mb-2, .mb-3, .mb-4 {
        margin-bottom: 1.25rem !important;
    }

    .lbl-premium {
        font-size: 1rem !important;
        margin-bottom: 0.6rem !important;
    }

    .field-hint {
        font-size: 0.9rem !important;
    }

    /* Better spacing for radio/checkbox on mobile */
    .form-check {
        padding-left: 2rem !important;
        margin-bottom: 1rem !important;
    }

    .form-check-input {
        width: 20px;
        height: 20px;
        margin-top: 0.3rem;
    }

    /* Make labels and form content full width on small screens */
    .card-panel {
        padding: 1.5rem 1rem !important;
    }

    /* Ticket card improvements */
    .ticket-card {
        margin-bottom: 1rem !important;
        flex-direction: column !important;
    }

    /* Button sizing for mobile */
    .btn, .input-premium[type="submit"], .input-premium[type="button"] {
        min-height: 48px;
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        width: 100%;
        margin-bottom: 0.75rem !important;
    }

    /* Grid adjustments for forms */
    .form-row, .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .form-row .col-md-6, .row .col-md-6,
    .form-row .col-lg-4, .row .col-lg-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 1rem !important;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991.98px) {
    .input-premium, .select-premium, textarea.input-premium {
        font-size: 15px;
        padding: 0.9rem !important;
        min-height: 44px;
    }

    .form-check-input {
        width: 18px;
        height: 18px;
    }

    .btn, .input-premium[type="submit"], .input-premium[type="button"] {
        min-height: 44px;
    }

    .card-panel {
        padding: 1.75rem !important;
    }
}

/* Desktop - standard sizing */
@media (min-width: 992px) {
    .input-premium, .select-premium, textarea.input-premium {
        font-size: 0.95rem;
        padding: 0.85rem 1rem;
    }

    .btn, .input-premium[type="submit"], .input-premium[type="button"] {
        min-height: auto;
    }
}

/* Viewport orientation and landscape mode fixes */
@media (max-height: 600px) and (orientation: landscape) {
    .reg-form-hero {
        padding: 1.5rem 0 1rem !important;
    }

    .stepper {
        margin-bottom: 1rem !important;
    }

    .card-panel {
        padding: 1rem !important;
    }
}

/* Prevent input zoom on iOS - ensure minimum font size is 16px */
input, select, textarea {
    font-size: 16px;
}

/* Improve select dropdowns on mobile */
select.select-premium {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 20px;
    padding-right: 2.5rem;
}

/* ---------- Utility: tap targets & focus ---------- */
@media (max-width: 991.98px) {
    a.btn, button.btn, .admin-btn, .gh-filter {
        min-height: 48px;
        padding: 0.75rem 1.5rem;
    }

    /* Improve touch targets for navigation */
    a, button, .nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 2px solid #C9A227;
    outline-offset: 2px;
}

/* ---------- Print-friendly ---------- */
@media print {
    .site-navbar, .site-footer, .admin-sidebar, .no-print { display: none !important; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}

/* ---------- ACCESSIBILITY IMPROVEMENTS ---------- */
/* Improve contrast for better readability on small screens */
@media (max-width: 767.98px) {
    body {
        -webkit-text-size-adjust: 100%;
        text-rendering: optimizeLegibility;
    }

    /* Ensure sufficient line-height for mobile readability */
    p, li, label {
        line-height: 1.6;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}