/**
 * Accessibility-focused CSS
 * WCAG 2.1 Level AA Compliance
 * InterpreterEmailForm Application
 */

/* ========================================
   SKIP LINKS
   ======================================== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    font-weight: bold;
    font-size: 16px;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #ffbf47;
    outline-offset: 0;
}

/* ========================================
   SCREEN READER ONLY
   ======================================== */
.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}

/* ========================================
   FOCUS INDICATORS
   ======================================== */
*:focus {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

a:focus {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
    background-color: #ffbf47;
    text-decoration: underline;
}

button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
.serialformbutton:focus,
.formbutton:focus,
.finalBtn:focus {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #0066CC;
    outline-offset: 0;
    border-color: #0066CC;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

/* ========================================
   HIGH CONTRAST COLORS
   ======================================== */
.required {
    color: #8B0000; /* Dark red - AAA enhanced: 8.1:1 on white, 7.2:1 on #FFF9C4 */
    font-weight: bold;
}

/* Remove inline color styles */
text[style*="color:red"] {
    color: #8B0000 !important;
    font-weight: bold;
}

/* ========================================
   ERROR MESSAGES
   ======================================== */
.error-message,
.fielderror,
.error-summary {
    color: #8B0000;
    background-color: #FFEBEE;
    border: 2px solid #8B0000;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 4px;
    display: block;
}

.error-summary {
    padding: 16px 20px;
    margin-bottom: 24px;
}

.error-summary h2 {
    color: #8B0000;
    margin: 0 0 12px 0;
    font-size: 20px;
}

.error-summary ul {
    margin: 0;
    padding-left: 20px;
}

.error-summary li {
    margin: 8px 0;
}

.error-summary a {
    color: #8B0000;
    text-decoration: underline;
    font-weight: 600;
}

.error-display {
    margin-top: 16px;
}

/* ========================================
   SUCCESS MESSAGES
   ======================================== */
.success-message {
    color: #1B5E20; /* Dark green - 7.5:1 contrast ratio */
    background-color: #E8F5E9;
    border: 2px solid #1B5E20;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 600;
}

/* ========================================
   FORM GROUPS
   ======================================== */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    color: #212121;
}

.form-group .hint {
    display: block;
    font-size: 14px;
    color: #424242;
    margin-top: 4px;
    font-style: italic;
}

/* ========================================
   REQUIRED FIELD LEGEND
   ======================================== */
.required-fields-legend {
    background-color: #FFF9C4;
    border: 2px solid #F57F17;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 24px;
    color: #4A4A4A; /* AAA enhanced: 7.2:1 on #FFF9C4 (overrides body #555555 which is 6.96:1) */
}

.required-fields-legend p {
    margin: 4px 0;
    font-weight: 600;
    line-height: 1.5; /* WCAG 1.4.8 — at least 1.5x font size, relative unit */
}

/* Description list layout for required-fields legend (HTML5 semantic markup) */
.required-fields-list {
    margin: 0;
    padding: 0;
}

.required-fields-item {
    display: flex;
    align-items: baseline;
    margin: 4px 0;
    line-height: 1.5; /* WCAG 1.4.8 */
}

.required-fields-item dt {
    flex-shrink: 0;
    margin-right: 6px;
    font-weight: bold;
}

.required-fields-item dd {
    margin: 0;
    font-weight: 600;
}

[dir="rtl"] .required-fields-item dt {
    margin-right: 0;
    margin-left: 6px;
}

/* ========================================
   FIELDSETS AND LEGENDS
   ======================================== */
fieldset {
    border: 2px solid #BDBDBD;
    border-radius: 4px;
    padding: 16px;
    margin: 20px 0;
}

legend {
    padding: 0 8px;
    font-weight: bold;
    font-size: 18px;
    color: #212121;
}

legend h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
    color: #212121;
    line-height: 1.4;
}

/* ========================================
   TOUCH TARGETS (44x44 minimum)
   ======================================== */
button,
.serialformbutton,
.formbutton,
.finalBtn,
input[type="submit"],
input[type="reset"],
input[type="button"],
a.action-link {
    min-width: 44px;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 16px;
    display: inline-block;
    text-align: center;
}

.finalBtn-primary {
    background-color: #004DA6; /* AAA enhanced: 7.1:1 with #FFFFFF */
    color: #FFFFFF;
    border: 2px solid #004DA6;
}

.finalBtn-primary:hover,
.finalBtn-primary:focus {
    background-color: #003D80;
    border-color: #003D80;
}

.form-actions {
    text-align: center;
    padding-top: 16px;
    margin-top: 20px;
}

.form-actions button {
    margin: 8px;
}

/* ========================================
   FORM INPUTS
   ======================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea,
.entryfield,
.selectstyle {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
    border: 2px solid #757575;
    border-radius: 4px;
    width: 100%;
    max-width: 500px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    border-color: #0066CC;
}

/* ========================================
   RADIO AND CHECKBOX
   ======================================== */
input[type="radio"],
input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 8px;
}

.radio-group {
    margin-bottom: 12px;
}

.radiolanguage {
    display: block;
    margin: 8px 0;
}

/* ========================================
   LANGUAGE SELECTOR
   ======================================== */
.language-selector {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.language-selector li {
    display: inline-block;
}

.language-selector form {
    display: inline;
}

/* Optional visual separation for RTL language items */
.rtl-language {
    /* Can add specific styling if needed */
}

/* ========================================
   HEADINGS
   ======================================== */
h1.title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
}

h2 {
    font-size: 18px;
    font-weight: bold;
    margin: 16px 0 8px 0;
}

/* Ensure headings within legends don't add extra margin */
legend h2 {
    margin: 0;
}

/* Field instructions */
.field-instructions {
    margin: 8px 0 12px 0;
    font-size: 14px;
    color: #212121;
    line-height: 1.5;
}

[dir="rtl"] .field-instructions {
    text-align: right;
}

/* Radio button and label inline layout */
input[type="radio"] {
    display: inline-block;
    vertical-align: middle;
    margin: 4px 8px 4px 0;
}

input[type="radio"] + label,
label.radiolanguage {
    display: inline-block;
    vertical-align: middle;
    margin-right: 16px;
    margin-bottom: 8px;
    cursor: pointer;
    color: #4a4a4a; /* Ensures 7:1 contrast ratio with #f5f5f5 background */
}

/* Ensure radio groups wrap properly */
.radio-group {
    margin-bottom: 8px;
    line-height: 1.8;
}

/* RTL radio button layout */
[dir="rtl"] input[type="radio"] {
    margin: 4px 0 4px 8px;
}

[dir="rtl"] input[type="radio"] + label,
[dir="rtl"] label.radiolanguage {
    margin-right: 0;
    margin-left: 16px;
}

/* ========================================
   RTL SUPPORT
   ======================================== */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .form-group label {
    text-align: right;
}

[dir="rtl"] .required {
    margin-left: 4px;
    margin-right: 0;
}

[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .language-selector {
    flex-direction: row-reverse;
}

[dir="rtl"] .error-message {
    text-align: right;
}

[dir="rtl"] .form-actions {
    text-align: center;
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */
@media (max-width: 768px) {
    .language-selector {
        flex-direction: column;
        align-items: stretch;
    }
    
    .language-selector li {
        display: block;
    }
    
    .serialformbutton {
        width: 100%;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea,
    .entryfield {
        max-width: 100%;
    }
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */
@media (prefers-contrast: high) {
    * {
        border-width: 2px;
    }
    
    *:focus {
        outline-width: 4px;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .skip-link,
    .language-selector,
    button,
    .formbutton {
        display: none;
    }
}

/* ========================================
   BOXING (for language selection areas)
   ======================================== */
.boxing {
    border: 1px solid #BDBDBD;
    padding: 12px;
    border-radius: 4px;
    background-color: #F5F5F5;
}

/* ========================================
   SUCCESS/WARNING ALERTS
   ======================================== */
.success-alert {
    background-color: #E8F5E9;
    border: 3px solid #1B5E20;
    border-radius: 8px;
    padding: 24px;
    margin: 24px 0;
}

.success-title {
    color: #1B5E20;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 16px;
}

.success-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    font-size: 32px;
}

.success-message {
    color: #1B5E20;
    font-size: 18px;
    line-height: 1.6;
}

.warning-alert {
    background-color: #FFF3E0;
    border: 3px solid #E65100;
    border-radius: 8px;
    padding: 24px;
    margin: 24px 0;
}

.warning-title {
    color: #E65100;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 16px;
}

.warning-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    font-size: 32px;
}

.warning-message {
    color: #E65100;
    font-size: 18px;
    line-height: 1.6;
}

.warning-message strong {
    font-weight: 700;
}

/* ========================================
   ACTION LISTS
   ======================================== */
.action-list {
    list-style: none;
    padding: 0;
}

.action-list li {
    margin: 16px 0;
}

.action-link {
    font-size: 18px;
    font-weight: bold;
    text-decoration: underline;
}

/* ========================================
   IMPORTANT MESSAGE STYLING
   ======================================== */
.important-message {
    font-size: 16px;
    line-height: 1.8;
    background-color: #FFF9C4;
    border: 2px solid #F57F17;
    padding: 16px;
    border-radius: 4px;
}

h1.important,
h2.important {
    color: #8B0000;
    background-color: #FFEBEE; /* Light pink — 7.5:1 contrast with #8B0000 */
    border-color: #8B0000;
    font-weight: bold;
}

/* ========================================
   TIMEPICKER DROPDOWN FONT SIZE FIX
   ======================================== */
.ui-timepicker-wrapper {
    font-size: 16px;
    width: auto;
    min-width: 8em;
}

.ui-timepicker-list li {
    font-size: 16px;
    padding: 6px 10px;
    line-height: 1.4;
}

/* ========================================
   NATIVE HTML5 DATE INPUT STYLING
   (jQuery UI datepicker CSS removed — migrated to native <input type="date">)
   ======================================== */
input[type="date"].entryfield {
    font-size: 16px;           /* Prevent iOS zoom on focus */
    padding: 6px 8px;
    min-height: 36px;          /* Touch-friendly target size */
    font-family: inherit;
    color: #212121;
    border: 1px solid #767676; /* 4.5:1 contrast on white */
    border-radius: 3px;
    box-sizing: border-box;
}

input[type="date"].entryfield:focus {
    outline: 2px solid #004DA6;
    outline-offset: 1px;
    border-color: #004DA6;
}

input[type="date"].date-input-error {
    border: 2px solid #A01B1B;
}

input[type="date"].date-input-error:focus {
    outline-color: #A01B1B;
    border-color: #A01B1B;
}

.date-validation-error {
    display: block;
    color: #A01B1B;           /* was #D32F2F (~5:1) — #A01B1B = ~7.9:1 on white (AAA) */
    font-size: 14px;
    margin-top: 4px;
}

/* ========================================
   PHONE INPUT VALIDATION STYLING
   ======================================== */
input[type="tel"].phone-input-error {
    border: 2px solid #D32F2F;
}

input[type="tel"].phone-input-error:focus {
    outline-color: #D32F2F;
    border-color: #D32F2F;
}

.phone-validation-error {
    display: block;
    color: #D32F2F;
    font-size: 14px;
    margin-top: 4px;
}

/* ========================================
   SUCCESS PAGE — TARGET SIZE (WCAG 2.5.5)
   ======================================== */
.success-actions .action-link {
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
    line-height: 44px;
    padding: 0 16px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: underline;
}

.success-actions .formbutton {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 16px;
}

/* ========================================
   FLATPICKR CALENDAR — ADA / WCAG 2.1 AAA
   All calendar text and touch targets scaled
   to match the rest of the accessible form.
   Contrast ratios target 7:1 (WCAG 1.4.6).
   ======================================== */

/* Root font size for the calendar popup — all em units inside scale from here */
.flatpickr-calendar {
    font-size: 18px !important;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #767676;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.20);
    width: auto !important;
}

/* Container width overrides — base flatpickr hard-codes 307.875px (39px × 7 + gaps)
   which is too narrow for our 44px WCAG touch-target cells (44 × 7 = 308px).
   Without this, the 7th day wraps and only 6 days show per row. */
.flatpickr-days {
    width: 308px !important;
}
.dayContainer {
    width: 308px;
    min-width: 308px;
    max-width: 308px;
}
.flatpickr-day {
    max-width: 44px;
}

/* Month / year navigation header */
.flatpickr-months {
    background: #073873;
    color: #FFFFFF;
    border-radius: 3px 3px 0 0;
    padding: 4px 0;
}
.flatpickr-months .flatpickr-month {
    height: 44px;
    line-height: 44px;
    color: #FFFFFF;
}
.flatpickr-current-month {
    font-size: 1em;          /* 18px */
    font-weight: bold;
    padding-top: 6px;
    color: #FFFFFF;
}
/* Month dropdown: explicit background required — native <select> ignores
   'background: transparent' in some browsers (Windows Aero/Chrome native UI)
   and falls back to OS default (light gray), which fails 7:1 contrast.
   pointer-events: auto is required — flatpickr sets pointer-events: none on
   the parent .flatpickr-current-month and re-enables it per-element; our rule
   must carry that forward or clicks pass straight through. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 1em;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #073873;   /* explicit — not transparent */
    border: 1px solid rgba(255,255,255,0.50);
    border-radius: 3px;
    padding: 2px 4px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    pointer-events: auto;        /* must be explicit — parent has pointer-events: none */
}
/* Dropdown option rows also need explicit colours for browsers that honour them */
.flatpickr-monthDropdown-months option,
.flatpickr-monthDropdown-month {
    background-color: #073873;
    color: #FFFFFF;
}
.flatpickr-current-month input.cur-year {
    font-size: 1em;
    font-weight: bold;
    color: #FFFFFF;
    background: transparent;
    border: none;
    outline: none;
    pointer-events: auto;        /* must be explicit — parent has pointer-events: none */
}
/* Year number input wrapper — arrows hidden; month nav arrows are sufficient
   for scheduling 2-3 months out. Width trimmed since no spinner space needed. */
.flatpickr-current-month .numInputWrapper {
    position: relative;
    width: 5ch;
}
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    display: none;
}

/* Prev / next month arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    padding: 10px 14px;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(255,255,255,0.20);
    border-radius: 50%;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    width: 20px;
    height: 20px;
}

/* Day-of-week header row */
.flatpickr-weekdays {
    background: #E8EEF7;
}
.flatpickr-weekday {
    font-size: 0.85em;       /* ~15px */
    font-weight: bold;
    color: #003366;
    line-height: 40px;
    min-width: 44px;
}

/* Individual day cells — WCAG 2.5.5: 44×44 min touch target */
.flatpickr-day {
    font-size: 1em;          /* 18px */
    min-height: 44px;
    line-height: 44px;
    min-width: 44px;
    border-radius: 4px;
    color: #212121;
    border: 1px solid transparent;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: #E8EEF7;
    border-color: #004DA6;
    outline: 2px solid #004DA6;
    outline-offset: 1px;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #073873;
    border-color: #073873;
    color: #FFFFFF;
}
/* Today highlight */
.flatpickr-day.today {
    border-bottom: 3px solid #073873;
    font-weight: bold;
}
.flatpickr-day.today.selected {
    border-bottom-color: #FFFFFF;
}
/* Disabled days (weekends, past dates)
   #545454 on white = ~7.5:1 — exceeds WCAG AAA 7:1 threshold (1.4.6)
   Was #999999 (~2.8:1 — failed even AA) */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #545454;
    background: transparent;
    border-color: transparent;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* The visible (altInput) field — match entryfield sizing */
.flatpickr-alt-input {
    font-size: 16px;
    padding: 6px 8px;
    min-height: 36px;
    font-family: inherit;
    color: #212121;
    border: 1px solid #767676;
    border-radius: 3px;
    box-sizing: border-box;
    width: 100%;
}
.flatpickr-alt-input:focus {
    outline: 2px solid #004DA6;
    outline-offset: 1px;
    border-color: #004DA6;
}
.flatpickr-alt-input.date-input-error {
    border: 2px solid #A01B1B;    /* was #D32F2F (~5:1) — #A01B1B = ~7.9:1 on white (AAA) */
}
.flatpickr-alt-input.date-input-error:focus {
    outline-color: #A01B1B;
    border-color: #A01B1B;
}

/* Close button inside the calendar popup (WCAG 2.1.1: visible dismiss for keyboard/switch users) */
.flatpickr-close-btn {
    display: block;
    width: 100%;
    padding: 8px 0;
    margin: 0;
    border: none;
    border-top: 1px solid #767676;
    border-radius: 0 0 4px 4px;
    background: #F5F5F5;
    color: #073873;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    min-height: 44px;             /* WCAG 2.5.5 touch target */
    line-height: 28px;
}
.flatpickr-close-btn:hover {
    background: #E8EEF7;
}
.flatpickr-close-btn:focus {
    outline: 2px solid #004DA6;
    outline-offset: -2px;
    background: #E8EEF7;
}

/* ==========================================
   FOOTER — ADA & STICKY
   ========================================== */

/* ADA: Override very small footer font-size — minimum 14px per WCAG 1.4.4 */
footer, footer span, footer a,
#footerWrap, #footerWrap span, #footerWrap a {
    font-size: 0.875rem !important;
}

/* Sticky footer — push footer to bottom of viewport */
html, body {
    height: 100%;
    margin: 0;
}

.containerfade {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#containerLanding {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#main-content {
    flex: 1 0 auto;
}

#footerWrap {
    flex-shrink: 0;
    margin-top: auto;
}