/**
 * Contrast & Mobile UI — WCAG AA and responsive fixes
 * Ensures readable text on desktop/mobile and adequate touch targets.
 */

/* ========== CONTRAST FIXES (WCAG AA: 4.5:1 normal text, 3:1 large) ========== */

/* Muted / secondary text: use darker gray for 4.5:1 on white */
.text-muted,
.small.text-muted,
.form-text,
.breadcrumb-item.active,
.section-subtitle,
.lead.text-muted {
    color: #4b5563 !important; /* gray-600, ~5.5:1 on white */
}

/* Placeholder text: ensure minimum contrast */
.form-control::placeholder,
.form-select option[disabled],
input::placeholder,
textarea::placeholder {
    color: #6b7280 !important; /* gray-500, ~4.6:1 */
}

/* Nav links and dropdown items: readable on light bg */
.navbar .nav-link,
.navbar-premium .nav-link,
.navbar .dropdown-item {
    color: #374151 !important; /* gray-700 */
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar-premium .nav-link:hover,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: #1e40af !important;
}

/* Footer: ensure links meet 4.5:1 on dark background */
.footer a,
.footer-section a,
footer.bg-dark a,
.premium-body .footer-section a {
    color: rgba(255, 255, 255, 0.9) !important;
}
.footer a:hover,
.footer a:focus,
.footer-section a:hover,
footer.bg-dark a:hover,
.premium-body .footer-section a:hover {
    color: #fff !important;
}
.footer-bottom p,
.copyright-section p,
.premium-body .footer-section .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Card and body secondary text */
.card-text,
.feature-card p,
.document-card p {
    color: #4b5563 !important;
}

/* Hero subtitle on dark: keep high contrast */
.hero-section p,
.state-hero p,
.page-hero p,
.premium-hero p {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Hero secondary / utility text (e.g. Bootstrap text-white-50): ensure AA */
.hero-section .text-white-50,
.state-hero .text-white-50,
.page-hero .text-white-50 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Input group addon text */
.input-group-text {
    color: #374151 !important;
    background-color: #f3f4f6 !important;
}

/* Search suggestions section label */
.search-suggestions .suggestions-section strong {
    color: #4b5563 !important;
}

/* ========== MOBILE VIEW & VIEWPORT ========== */

/* Ensure viewport is set (backup for templates that omit it) */
@supports (width: 100dvw) {
    html {
        font-size: 16px;
    }
}

/* Prevent horizontal scroll on small screens */
body {
    overflow-x: hidden;
}
.container, .container-fluid {
    max-width: 100%;
}

/* ========== TOUCH TARGETS (min 44x44px for mobile) ========== */

@media (max-width: 767.98px) {
    /* Buttons and links used as primary actions */
    .btn,
    .btn-lg,
    .btn-sm,
    .nav-link,
    .navbar .dropdown-item,
    a.btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.6rem 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Form controls: comfortable tap height */
    .form-control,
    .form-select {
        min-height: 44px;
        padding: 0.6rem 0.75rem;
    }

    /* Nav toggler */
    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }

    /* Card links and clickable areas */
    .document-card,
    .template-card,
    .list-group-item-action {
        padding: 1rem;
    }

    /* Floating CTA and fixed bottom actions */
    .floating-cta-btn,
    .fixed-bottom .btn {
        min-height: 48px;
        padding: 0.75rem 1.25rem;
    }
}

/* ========== DESKTOP: READABLE LINE LENGTH ========== */

@media (min-width: 992px) {
    .container {
        max-width: 1140px;
    }
    .lead,
    .section-subtitle {
        max-width: 42em;
    }
}

/* ========== FOCUS VISIBLE (keyboard / a11y) ========== */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ========== WIZARD (state doc + form wizards) ========== */

/* Wizard step labels and card secondary text */
.wizard-container .text-muted,
.wizard-container .card-text,
.wizard-container .small.text-muted,
.wizard-container .form-text {
    color: #4b5563 !important;
}

.wizard-container .card-header,
.wizard-container .wizard-form-section h3 {
    color: #1f2937 !important;
}

/* Wizard primary actions: adequate touch targets on mobile */
@media (max-width: 767.98px) {
    .wizard-container .btn-primary,
    .wizard-container .btn-success,
    .wizard-container .wizard-next,
    .wizard-container .wizard-prev {
        min-height: 48px;
        padding: 0.75rem 1.25rem;
    }
    .wizard-steps .wizard-step {
        min-height: 44px;
        padding: 0.5rem 0.25rem;
    }
}

/* ========== STATE DOCUMENT PAGE ========== */

/* Hero secondary text (overrides inline rgba(0.8) where present) */
.state-hero [style*="rgba(255,255,255,0.8)"],
.page-hero [style*="rgba(255,255,255,0.8)"] {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Card body small text on state page */
.card .small.text-muted,
.card-body .small.text-muted {
    color: #4b5563 !important;
}

/* ========== REDUCE MOTION (optional, respects user preference) ========== */

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