/* ================================================================
   Mobile Standards - KT.WebNumerology
   Unified breakpoints, touch targets, typography, and accessibility
   ================================================================
   Import this file in all layouts AFTER the main CSS.
   ================================================================ */

/* ================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ================================================================ */
:root {
    /* ---- Breakpoints (as custom properties for reference) ---- */
    /* These match Bootstrap 5 standard */
    --bp-xs: 576px;
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;

    /* ---- Touch Targets ---- */
    --touch-target-min: 44px;

    /* ---- Safe Areas ---- */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ================================================================
   2. BASE MOBILE-FIRST RESETS
   ================================================================ */

/* Ensure all interactive elements meet Apple's 44x44pt touch target */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
label[for],
.landing-nav-link,
.landing-btn,
.login-submit-btn,
.action-btn,
[class*="btn"] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

/* Smaller icon-only buttons may be 32x32px */
.icon-only-btn,
.login-password-toggle,
.modal-close-button,
.landing-nav-toggle {
    min-height: 32px;
    min-width: 32px;
}

/* Scroll padding for anchor navigation - prevents content from hiding
   under fixed headers/navbars */
html {
    scroll-padding-top: 80px;
    scroll-behavior: smooth;
}

/* Ensure inputs never trigger auto-zoom on iOS */
input,
textarea,
select {
    font-size: 16px !important;
}

/* ================================================================
   3. UNIFIED RESPONSIVE BREAKPOINTS
   (Bootstrap 5 standard: 576 / 768 / 992 / 1200 / 1400)
   ================================================================ */

/* ---- XS: Extra small devices (iPhone SE, small Android < 576px) ---- */
@media (max-width: 575.98px) {
    /* Base typography - slightly smaller on smallest screens */
    html {
        font-size: 14px;
    }

    /* Single-column layouts by default */
    .landing-products-grid,
    .landing-packages-grid,
    .landing-about-content,
    .landing-contact-content,
    .landing-tracuu-indices-columns {
        grid-template-columns: 1fr !important;
    }

    /* Reduce padding on very small screens */
    .landing-container {
        padding: 0 16px;
    }

    /* Touch targets remain at minimum 44px */
    button,
    a,
    .landing-btn {
        min-height: 44px;
    }

    /* Form inputs comfortable size */
    .login-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px;
    }

    /* Modal adjustments */
    .landing-modal-luan-giai-container {
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        margin: auto;
    }

    .landing-modal-luan-giai-overlay {
        align-items: center !important;
    }
}

/* ---- SM: Small devices (large phones, landscape phones >= 576px) ---- */
@media (min-width: 576px) and (max-width: 767.98px) {
    html {
        font-size: 15px;
    }
}

/* ---- MD: Medium devices (tablets >= 768px) ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
    html {
        font-size: 15px;
    }
}

/* ---- LG: Large devices (laptops >= 992px) ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    html {
        font-size: 16px;
    }
}

/* ---- XL: Extra large devices (desktops >= 1200px) ---- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    html {
        font-size: 16px;
    }
}

/* ---- XXL: Extra extra large (large desktops >= 1400px) ---- */
@media (min-width: 1400px) {
    html {
        font-size: 16px;
    }
}

/* ================================================================
   4. REDUCED MOTION - Accessibility
   Disables heavy animations for users who prefer 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;
    }

    /* Specifically disable heavy landing page animations */
    .astro-star,
    .shooting-star,
    .star-cluster,
    .star-cluster .cluster-star,
    .login-blob,
    .login-stats-progress-bar,
    .login-form-group,
    .login-form-wrapper,
    .login-error-modal-icon,
    .login-error-modal-icon i {
        animation: none !important;
    }
}

/* ================================================================
   5. LANDSCAPE ORIENTATION FIXES (iPhone landscape)
   ================================================================ */
@media (max-width: 767.98px) and (orientation: landscape) {
    /* Prevent nav links from overlapping on landscape phones */
    .landing-nav-links {
        top: 60px !important;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    /* Reduce hero section height on landscape */
    .landing-hero {
        min-height: auto;
        padding: 80px 20px 40px;
    }

    /* Hero title can be larger in landscape */
    .landing-hero-title {
        font-size: clamp(1.25rem, 4vw, 2rem) !important;
    }

    /* Ensure content doesn't overflow */
    .landing-tracuu-result-section {
        overflow-x: hidden;
    }

    /* Stats cards can be 2 columns in landscape */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ================================================================
   6. iOS SAFE AREA EXTENSIONS
   ================================================================ */
@supports (padding: env(safe-area-inset-top)) {
    /* Fixed navigation */
    .landing-nav,
    .site-nav {
        padding-top: calc(1rem + env(safe-area-inset-top));
        padding-left: calc(1rem + env(safe-area-inset-left));
        padding-right: calc(1rem + env(safe-area-inset-right));
    }

    /* Fixed bottom action bars */
    .fixed-bottom-action-bar,
    .modal-fixed-footer,
    .landing-modal-luan-giai-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    /* Fixed float buttons (Zalo, hotline) */
    .landing-float-contact {
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: calc(16px + env(safe-area-inset-right));
    }

    /* Horizontal safe area for notch devices */
    .landing-hero,
    .landing-container,
    .landing-nav-content {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

/* ================================================================
   7. FOCUS ACCESSIBILITY
   ================================================================ */
:focus-visible {
    outline: 2px solid #244B94;
    outline-offset: 2px;
}

/* Remove default focus outline on mouse click, keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}

/* ================================================================
   8. TABLE RESPONSIVENESS HELPERS
   ================================================================ */
/* Horizontal scroll wrapper for tables on mobile */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Ensure tables don't break layout */
.table-scroll-wrapper table {
    min-width: 600px;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .table-scroll-wrapper {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Allow tables to be scrollable */
    .layui-table,
    .layui-table-view {
        overflow-x: auto !important;
        display: block;
    }

    .layui-table-box {
        overflow-x: auto !important;
    }
}

/* ================================================================
   9. MODAL & DIALOG HELPERS
   ================================================================ */
@media (max-width: 575.98px) {
    .landing-modal-luan-giai-container {
        width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 32px) !important;
        border-radius: 16px !important;
        margin: 16px auto !important;
    }

    .landing-modal-luan-giai-header {
        padding: 16px 16px 12px !important;
    }

    .landing-modal-luan-giai-body {
        padding: 12px 16px !important;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    .landing-modal-luan-giai-footer {
        padding: 12px 16px 16px !important;
    }

    .landing-modal-contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ================================================================
   10. FORM POLISH
   ================================================================ */
@media (max-width: 575.98px) {
    .login-form-wrapper {
        padding: 0 4px;
    }

    .login-form-group {
        margin-bottom: 16px;
    }

    /* Ensure submit button is full width and comfortable */
    .login-submit-btn {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }

    /* All form inputs at least 48px height for touch */
    input,
    select,
    textarea {
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 10px;
    }

    /* Date inputs on mobile - increase touch area */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        min-height: 48px;
    }
}