/* ========================================================= */
/* FPKN Alumni Association - Responsive & Mobile UI/UX CSS   */
/* ========================================================= */

/* 1. Universal Touch Target Accessibility (WCAG 2.5.5 - 44px min) */
button,
a.btn,
.nav-btn,
.touch-target,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 2. Responsive Table Wrappers */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border-radius: var(--radius-md, 12px);
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* 3. Small Mobile Devices (phones <= 640px) */
@media (max-width: 640px) {
    /* Prevent iOS auto-zoom on form inputs by ensuring font-size >= 16px */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px;
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
    }

    /* Container padding */
    .container,
    .max-w-7xl,
    .max-w-6xl,
    .max-w-4xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Compact form sections */
    .form-section {
        padding: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 12px !important;
    }

    .form-section-title {
        font-size: 1.05rem !important;
        margin-bottom: 1rem !important;
    }

    /* Hero heading sizing for narrow screens */
    h1.hero-title {
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
    }

    /* Grid stacks */
    .grid-mobile-stack {
        grid-template-columns: 1fr !important;
    }

    /* Notification toasts */
    .notification-toast {
        top: 76px !important;
        right: 12px !important;
        left: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* Floating chat adjustments */
    #alumniChatWidget {
        bottom: 1rem !important;
        right: 0.75rem !important;
    }

    #chatModalBox {
        right: 0.5rem !important;
        left: 0.5rem !important;
        width: auto !important;
        max-width: 100% !important;
        bottom: 0.5rem !important;
    }
}

/* 4. Tablet Devices (641px to 1023px) */
@media (min-width: 641px) and (max-width: 1023px) {
    .form-section {
        padding: 20px !important;
    }

    .stat-card {
        padding: 1.25rem !important;
    }
}

/* 5. Desktop Navigation Auto-Fit (1024px to 1280px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .nav-desktop-links a {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
        font-size: 0.75rem !important;
    }
}

/* 6. Reduced Motion 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;
    }

    .floating,
    .pulse-glow,
    .shimmer-bg,
    .animate-spin,
    .animate-pulse,
    .animate-ping {
        animation: none !important;
    }
}

/* 7. Institutional Welcome Address - Microsoft Word-Style Justification */
.welcome-address-body {
    max-width: 100%;
}

.welcome-address-body p.welcome-justified,
.welcome-address-body > p:not(.no-justify) {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    line-height: 1.8;
    letter-spacing: -0.005em;
    word-spacing: normal;
    text-rendering: optimizeLegibility;
}

/* Fallback to left-alignment on very narrow mobile screens (<480px) to prevent unsightly word gaps */
@media (max-width: 480px) {
    .welcome-address-body p.welcome-justified,
    .welcome-address-body > p:not(.no-justify) {
        text-align: left !important;
        -webkit-hyphens: manual;
        -ms-hyphens: manual;
        hyphens: manual;
        line-height: 1.65;
    }
}