/**
 * Responsive Styles
 * Mobile-first breakpoints for the accounting website
 */

/* ==================== TABLET (768px and below) ==================== */
@media (max-width: 767.98px) {
    /* Hero sections */
    .page-hero { padding: 2rem 0 !important; }
    .page-hero h1 { font-size: 1.75rem !important; }
    .page-hero .lead { font-size: 1rem !important; }

    /* Homepage hero slider */
    .hero-slider { min-height: 50vh !important; }
    .hero-slider .hero-content h1 { font-size: 2rem !important; }
    .hero-slider .hero-content p { font-size: 1rem !important; }

    /* Section padding */
    .section-padding { padding: 2rem 0 !important; }

    /* Service cards */
    .service-card { margin-bottom: 1rem; }

    /* Team section */
    .team-card { margin-bottom: 1.5rem; }

    /* Stats */
    .stat-number { font-size: 2rem !important; }

    /* Blog cards */
    .blog-card { margin-bottom: 1rem; }

    /* Footer */
    .footer { text-align: center; }
    .footer h5 { margin-top: 1.5rem; }
    .footer-bottom .row > div { text-align: center !important; }

    /* Header */
    .top-bar { display: none !important; }
    .navbar-brand img { max-height: 35px !important; }

    /* Admin sidebar */
    .admin-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        z-index: 1050;
        transition: left 0.3s ease;
    }
    .admin-sidebar.show { left: 0; }
    .admin-content { margin-left: 0 !important; }
    .sidebar-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
        display: none;
    }
    .sidebar-overlay.show { display: block; }

    /* Admin tables */
    .table-responsive { font-size: 0.85rem; }
    .btn-sm { padding: 0.2rem 0.4rem; font-size: 0.75rem; }

    /* Admin stat widgets */
    .stat-widget { margin-bottom: 1rem; }
    .stat-widget .stat-icon { font-size: 1.5rem; }
    .stat-widget .stat-number { font-size: 1.25rem; }
}

/* ==================== SMALL PHONES (576px and below) ==================== */
@media (max-width: 575.98px) {
    /* Container */
    .container { padding-left: 1rem; padding-right: 1rem; }

    /* Hero slider */
    .hero-slider { min-height: 40vh !important; }
    .hero-slider .hero-content h1 { font-size: 1.5rem !important; }
    .hero-slider .hero-content .btn { padding: 0.5rem 1rem; font-size: 0.875rem; }

    /* Display headings */
    .display-1 { font-size: 2.5rem !important; }
    .display-2 { font-size: 2rem !important; }
    .display-3 { font-size: 1.75rem !important; }
    .display-4 { font-size: 1.5rem !important; }
    .display-5 { font-size: 1.25rem !important; }

    /* Cards */
    .admin-card { border-radius: 8px !important; }

    /* Forms */
    .form-control, .form-select { font-size: 16px; /* Prevents zoom on iOS */ }

    /* 404 page */
    .display-1.fw-bold.text-accent { font-size: 4rem !important; }
}

/* ==================== LARGE PHONES / SMALL TABLETS (576px - 768px) ==================== */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-slider .hero-content h1 { font-size: 1.75rem !important; }
}

/* ==================== TABLETS (768px to 991px) ==================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-slider { min-height: 55vh !important; }
    .hero-slider .hero-content h1 { font-size: 2.5rem !important; }

    /* Footer columns */
    .footer .row > div { margin-bottom: 1.5rem; }

    /* Admin sidebar narrower on tablets */
    .admin-sidebar { width: 220px; }
    .admin-content { margin-left: 220px; }
}

/* ==================== DESKTOPS (992px and above) ==================== */
@media (min-width: 992px) {
    /* Ensure proper grid behavior */
    .row.g-5 > [class*="col-"] { --bs-gutter-x: 3rem; }
}

/* ==================== LARGE DESKTOPS (1200px and above) ==================== */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

/* ==================== EXTRA LARGE DESKTOPS (1400px and above) ==================== */
@media (min-width: 1400px) {
    .container { max-width: 1200px; }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    .admin-sidebar, .topbar, .btn, .breadcrumb, .top-bar, footer { display: none !important; }
    .admin-content { margin-left: 0 !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a { color: #000; text-decoration: none; }
    .admin-card { border: 1px solid #ddd; box-shadow: none; }
}

/* ==================== DARK MODE RESPONSIVE ==================== */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --bs-body-bg: #1a1a2e;
        --bs-body-color: #e0e0e0;
    }
}

/* ==================== HIGH DPI DISPLAYS ==================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img { image-rendering: -webkit-optimize-contrast; }
}

/* ==================== ACCESSIBILITY ==================== */
@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;
    }
    [data-animate] { opacity: 1 !important; transform: none !important; }
}

/* ==================== FOCUS VISIBLE (keyboard navigation) ==================== */
:focus-visible {
    outline: 2px solid var(--accent-color, #c9a961);
    outline-offset: 2px;
}

/* ==================== LANDSCAPE PHONES ==================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-slider { min-height: 70vh !important; }
    .page-hero { padding: 1.5rem 0 !important; }
}