/* Accessibility Enhancements for Elderly-Friendly Design */

/* ========================================
   CSS Variables for Accessibility
   ======================================== */
:root {
    /* Font Size Scale - Larger for readability */
    --font-size-base: 18px;
    --font-size-small: 16px;
    --font-size-medium: 20px;
    --font-size-large: 24px;
    --font-size-xlarge: 32px;
    --font-size-xxlarge: 40px;

    /* Line Heights - Increased for readability */
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* Minimum Touch Target Size (WCAG 2.5.5) */
    --min-touch-target: 44px;

    /* Focus Ring */
    --focus-ring-color: #0066cc;
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;

    /* High Contrast Colors */
    --text-color-high-contrast: #1a1a1a;
    --text-color-secondary: #4a4a4a;
    --link-color: #0055aa;
    --link-color-visited: #660099;
    --error-color: #cc0000;
    --success-color: #006600;
    --warning-color: #995500;
}

/* ========================================
   Base Typography
   ======================================== */
html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: var(--line-height-normal);
    color: var(--text-color-high-contrast);
    letter-spacing: 0.01em;
}

/* Headings with clear hierarchy */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    margin-bottom: 0.5em;
    font-weight: 600;
}

h1 { font-size: var(--font-size-xxlarge); }
h2 { font-size: var(--font-size-xlarge); }
h3 { font-size: var(--font-size-large); }
h4 { font-size: var(--font-size-medium); }
h5, h6 { font-size: var(--font-size-base); }

/* Paragraphs */
p {
    line-height: var(--line-height-relaxed);
    margin-bottom: 1em;
    max-width: 75ch; /* Optimal reading width */
}

/* ========================================
   Focus Indicators (Critical for Accessibility)
   ======================================== */
*:focus {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Enhanced focus for form elements */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 0;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.2);
}

/* ========================================
   Links
   ======================================== */
a {
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

a:visited {
    color: var(--link-color-visited);
}

a:hover,
a:focus {
    text-decoration-thickness: 3px;
}

/* ========================================
   Buttons - Larger Touch Targets
   ======================================== */
button,
.btn,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
    min-height: var(--min-touch-target);
    min-width: var(--min-touch-target);
    padding: 12px 24px;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Large buttons for primary actions */
.btn-large,
.btn-primary {
    min-height: 56px;
    padding: 16px 32px;
    font-size: var(--font-size-medium);
}

/* ========================================
   Form Elements - Enhanced for Elderly
   ======================================== */
label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: var(--font-size-base);
    color: var(--text-color-high-contrast);
}

/* Form field descriptions */
.form-help,
.field-description {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    margin-top: 4px;
    line-height: var(--line-height-normal);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
    min-height: var(--min-touch-target);
    padding: 12px 16px;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    border: 2px solid #666;
    border-radius: 6px;
    width: 100%;
    max-width: 500px;
    background-color: white;
    color: var(--text-color-high-contrast);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
select:hover,
textarea:hover {
    border-color: #333;
}

/* Larger checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    cursor: pointer;
    accent-color: var(--link-color);
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    display: inline;
    cursor: pointer;
    user-select: none;
}

/* Error states with clear indication */
input.invalid,
input[aria-invalid="true"],
select.invalid,
select[aria-invalid="true"],
textarea.invalid,
textarea[aria-invalid="true"] {
    border-color: var(--error-color);
    border-width: 3px;
    background-color: #fff5f5;
}

.validation-message,
.error-message,
[role="alert"] {
    color: var(--error-color);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #fff5f5;
    border-left: 4px solid var(--error-color);
    border-radius: 4px;
}

/* Success messages */
.success-message {
    color: var(--success-color);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #f0fff0;
    border-left: 4px solid var(--success-color);
    border-radius: 4px;
}

/* ========================================
   Tables - Enhanced Readability
   ======================================== */
table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--font-size-base);
}

th, td {
    padding: 16px;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

th {
    background-color: #f5f5f5;
    font-weight: 700;
}

tr:nth-child(even) {
    background-color: #fafafa;
}

tr:hover {
    background-color: #f0f0f0;
}

/* ========================================
   Cards and Containers
   ======================================== */
.card,
.panel,
.box {
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Navigation - Larger Click Areas
   ======================================== */
nav a,
.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--min-touch-target);
    padding: 12px 20px;
    font-size: var(--font-size-base);
    font-weight: 500;
}

/* Dropdown menus with larger targets */
.dropdown-menu a,
.dropdown-content a {
    min-height: var(--min-touch-target);
    padding: 14px 20px;
    font-size: var(--font-size-base);
}

/* ========================================
   Images and Media
   ======================================== */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure icons are visible */
.icon,
[class*="icon-"] {
    min-width: 24px;
    min-height: 24px;
}

/* ========================================
   Skip Links (Screen Reader & Keyboard Users)
   ======================================== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-color-high-contrast);
    color: white;
    padding: 16px 24px;
    font-size: var(--font-size-medium);
    font-weight: 600;
    z-index: 10000;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
    outline: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ========================================
   Loading States
   ======================================== */
[aria-busy="true"],
.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    body {
        font-size: 14pt;
        line-height: 1.5;
        color: black;
    }

    a {
        text-decoration: underline;
    }

    .no-print {
        display: none !important;
    }
}

/* ========================================
   Reduced Motion (Respect User Preference)
   ======================================== */
@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;
    }
}

/* ========================================
   High Contrast Mode Support
   ======================================== */
@media (prefers-contrast: high) {
    :root {
        --text-color-high-contrast: #000;
        --link-color: #0000cc;
    }

    input,
    select,
    textarea,
    button {
        border-width: 3px;
    }

    a {
        text-decoration-thickness: 3px;
    }
}

/* ========================================
   Large Text Mode Support
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Font Size Increase Classes (for user-controlled sizing) */
.font-size-normal {
    font-size: 100%;
}

.font-size-large {
    font-size: 125%;
}

.font-size-xlarge {
    font-size: 150%;
}

/* ========================================
   Spacing for Touch Devices
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Increase spacing for touch devices */
    button,
    .btn,
    [role="button"] {
        margin: 8px 0;
    }

    nav a,
    .nav-link {
        margin: 4px 0;
    }
}

/* ========================================
   Screen Reader Only Content
   ======================================== */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.visually-hidden-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}