/* ============================================================
   MUSLIGO - MOBILE & RESPONSIVE LAYER
   File: static/css/mobile.css
   Loaded on every page after style.css. Mobile-first fixes that
   apply site-wide so individual templates do not overflow on phones.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }
body { padding-bottom: env(safe-area-inset-bottom); }

img, video, svg, canvas, iframe { max-width: 100%; }
img { height: auto; }
canvas { height: auto !important; }

/* Long words, URLs and emails never push the layout wider than the screen */
h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, a, span, label, .card-title, .card-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Tables scroll inside their container instead of the page */
.table-responsive, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 991.98px) {
    table.table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.table > thead, table.table > tbody, table.table > tfoot { width: 100%; }
}

/* Skip link */
.skip-link { position: absolute; z-index: 100000; inset-inline-start: 8px; top: 8px; background: #c9a84c; color: #1a2a4a;
    padding: 8px 14px; border-radius: 10px; font-weight: 600; }

/* Footer links */
.footer-links li { margin-bottom: 6px; }
.footer-links a { opacity: 0.75; transition: opacity 0.2s; }
.footer-links a:hover { opacity: 1; }
.footer-social a { opacity: 0.75; font-size: 24px; transition: all 0.2s; }
.footer-social a:hover { opacity: 1; color: #c9a84c !important; }

/* Mobile back button */
.back-button { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); inset-inline-start: 20px; z-index: 999;
    background: #1a2a4a; color: white; border-radius: 50%; width: 50px; height: 50px; display: none;
    align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); border: none; }
.back-button:hover, .back-button:focus { color: #c9a84c; }

/* Touch targets */
@media (pointer: coarse) {
    .btn, .nav-link, .dropdown-item, .form-control, .form-select { min-height: 44px; }
    .btn-sm { min-height: 36px; }
    .form-check-input { width: 1.25em; height: 1.25em; }
}

/* Inputs: 16px prevents iOS zoom-on-focus */
@media (max-width: 767.98px) {
    input, select, textarea, .form-control, .form-select { font-size: 16px !important; }
}

/* Navbar on small screens */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse { max-height: calc(100vh - 70px); overflow-y: auto; padding-bottom: 12px; }
    .navbar .dropdown-menu { border: none; background: rgba(255, 255, 255, 0.96); }
    .navbar .nav-item.dropdown .nav-link[style*="border-radius: 25px"] { display: inline-flex; margin-top: 8px; }
}

/* Phones */
@media (max-width: 575.98px) {
    .container, .container-fluid { padding-inline: 14px; }
    h1, .h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    h2, .h2 { font-size: clamp(1.35rem, 6vw, 1.8rem); }
    h3, .h3 { font-size: clamp(1.15rem, 5vw, 1.5rem); }
    .display-1, .display-2, .display-3 { font-size: clamp(2rem, 10vw, 3rem); }
    .display-4, .display-5, .display-6 { font-size: clamp(1.6rem, 8vw, 2.4rem); }
    .lead { font-size: 1rem; }
    .btn-lg { padding: 0.6rem 1.2rem !important; font-size: 1rem; }
    .card-body { padding: 1rem; }
    .modal-dialog { margin: 0.75rem; }
    .row > [class*="col-"] { min-width: 0; }
    .d-flex { min-width: 0; }
    .flex-nowrap-mobile { flex-wrap: nowrap !important; overflow-x: auto; }
    /* Elements built with fixed pixel widths in inline styles */
    [style*="min-width: 400px"], [style*="min-width: 500px"], [style*="min-width: 600px"] { min-width: 0 !important; }
    [style*="width: 400px"], [style*="width: 500px"], [style*="width: 600px"] { width: 100% !important; }
    .pwa-install { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* Admin & dashboard sidebars stack on tablets/phones */
@media (max-width: 991.98px) {
    .admin-sidebar, .dashboard-sidebar, .sidebar { position: static !important; width: 100% !important;
        height: auto !important; min-height: 0 !important; }
}

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

/* Installed PWA (standalone) */
@media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top); }
}