/* ── Skip link ───────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -999em;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    background: #003366;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 4px 0;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
}
.skip-link:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
}

/* ── Root tokens ─────────────────────────────────────────── */
:root {
    --brand-navy:   #003366;
    --brand-mid:    #1a5276;
    --brand-accent: #c0392b;
    --brand-gold:   #d4ac0d;
    --surface:      #ffffff;
    --surface-alt:  #f4f6f9;
    --border:       #c8d0da;
    --text-primary: #1a1a2e;

    /* (AAA 1.4.6 Color Contrast Enhanced):
       #4a5568 on white = ~5.9:1 — fails AAA (needs 7:1).
       #374151 on white = ~8.6:1 — passes AAA. */
    --text-muted:   #374151;

    /* 
       #c0392b on white = ~5.3:1 — fails AA for small text and AAA.
       #990000 on white = ~8.7:1 — passes AAA. */
    --error:        #990000;

    --focus-ring:   #f0a500;
    --radius:       6px;
    --shadow:       0 2px 12px rgba(0, 51, 102, .10);
}

/* ── Page wrapper ────────────────────────────────────────── */
.vib-page {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-primary);
    background: var(--surface-alt);
    min-height: 100vh;
    padding: 0 0 3rem;

    /* (AAA 1.4.8 Line Height):
       Default browser line-height ~1.2 is below the WCAG 1.4.8 minimum of 1.5.
       Setting 1.6 here satisfies the AAA criterion across all descendant text. */
    line-height: 1.6;
}


.vib-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-mid) 100%);
    color: #fff;
    padding: 2.25rem 2.5rem 2rem;
    border-bottom: 4px solid var(--brand-gold);
    margin-bottom: 2rem;
}
.vib-hero h1 {
    margin: 0 0 .5rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.3px;

   
    line-height: 1.3;
}
.vib-hero p {
    margin: 0;  
    line-height: 1.6;
    max-width: 760px;
}

/* ── Card container ──────────────────────────────────────── */
.vib-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem 2.5rem;
    max-width: 900px;
    margin: 0 auto 1.5rem;
}

/* ── Section fieldset / legend ───────────────────────────── */
.vib-fieldset {
    border: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.vib-fieldset legend,
.vib-section-title {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-navy);
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--brand-navy);
    margin-bottom: 1.25rem;
    letter-spacing: .2px;
    text-transform: uppercase;
}

/* ── Form rows ───────────────────────────────────────────── */
.vib-field {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: start;
    gap: .5rem 1rem;
    margin-bottom: 1.1rem;
}
@media (max-width: 600px) {
    .vib-field { grid-template-columns: 1fr; }
}
.vib-field label {
    padding-top: .45rem;
    color: var(--text-primary);
}
.vib-field label .req {
    color: var(--error);
    margin-left: 2px;
    font-weight: 700;
}
.vib-input-wrap {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* ── Inputs ──────────────────────────────────────────────── */
input[type="text"],
select,
.form-control {
    display: block;
    width: 100%;
    max-width: 420px;
    padding: .5rem .75rem;
    color: var(--text-primary);
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    font-family: inherit; 
    line-height: 1.5;
}
input[type="text"]:focus,
select:focus,
.form-control:focus {
    border-color: var(--brand-mid);
    outline: 3px solid var(--focus-ring);
    outline-offset: 1px;
    box-shadow: none;
}
.form-control { max-width: 420px; }
select, .dropdown { max-width: 440px; height: auto; }

/* ── Inline hint text ────────────────────────────────────── */
.field-hint {   
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;

    /* FIX #7: hint text line-height */
    line-height: 1.5;
}

/* ── Error / validation messages ─────────────────────────── */
.text-danger,
.field-error {  
    font-size: 0.875rem;
    color: var(--error);   /* FIX #6: now #990000 (8.7:1 on white) */
    font-weight: 600;
    display: block;
    margin-top: 2px;   
    line-height: 1.5;
}

/* ── Checkbox rows ───────────────────────────────────────── */
.vib-check-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
    min-height: 44px;
}
.vib-check-row input[type="checkbox"] {
   
    width: 22px;
    height: 22px;
    accent-color: var(--brand-navy);
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.vib-check-row label {
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* ── Yes / No group ──────────────────────────────────────── */
.vib-yn-group {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Upload area ─────────────────────────────────────────── */
.vib-upload-box {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    background: var(--surface-alt);
    margin-top: .5rem;
}
.vib-upload-box p {
    margin: 0 0 .75rem;
    font-size: 0.9rem;
    color: var(--text-muted);   
    line-height: 1.5;
}

/* Telerik RadAsyncUpload row states */
li.ruUploading  { display: none; }
li.ruUploading2 { display: block; }

/* Upload file-type error */
#error {
    color: var(--error);  
    font-weight: 600;  
    font-size: 0.9rem;
    margin-top: .4rem;

    /* FIX #7 */
    line-height: 1.5;
}

/* ── Required field legend ───────────────────────────────── */
.vib-required-legend { 
    line-height: 1.5;
}
.vib-required-legend .req {
    color: var(--error);  
    font-weight: 700;
}

/* ── ALTCHA widget ───────────────────────────────────────── */
altcha-widget {
    display: block;
    margin: 1rem 0;
}


altcha-widget *:not(input):not(svg):not(path):not(circle):not(rect):not(line) {
    font-size: 0.875rem !important;  /* 14px — above the 9px/xx-small floor   */
    line-height: 1.5 !important;
}
/* Links and text spans need the color override specifically */
altcha-widget a,
altcha-widget small,
altcha-widget span:not([class*="spinner"]):not([class*="check"]),
altcha-widget label span,
altcha-widget p,
altcha-widget div {
    color: #374151 !important;       /* 8.6:1 on white — passes AAA            */
}
/* Keep the link underline as a visual cue since color alone isn't enough */
altcha-widget a {
    text-decoration: underline !important;
}


input::placeholder,
textarea::placeholder {
    color: #595959;
    opacity: 1;    /* Firefox lowers opacity on ::placeholder by default */
}

/* ── CAPTCHA / server-side alert ─────────────────────────── */
.vib-alert-error {
    border-radius: var(--radius);
    color: var(--error);  
    padding: .6rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* ── Submit button ───────────────────────────────────────── */
.vib-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--brand-navy);
    color: #fff;
    border: none;
    border-radius: var(--radius);   
    padding: 0.75rem 2rem;
    min-height: 44px;

    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: .2px;
    font-family: inherit;
}
.vib-submit-btn:focus  { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.vib-submit-btn:active { transform: scale(.98); }

/* ── Download button ─────────────────────────────────────── */

.vib-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #fff;
    background: #333;
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    min-height: 44px;

    font-size: 1rem;        
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
    margin-left: .5rem;
}

.vib-dl-btn:hover,
.vib-dl-btn:visited,
.vib-dl-btn:active {
    color: #fff;
    background: #222;       /* optional: slightly darker on hover for feedback */
}

.vib-dl-btn:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ── Date badge ──────────────────────────────────────────── */
.vib-date-badge {
    display: inline-block;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .3rem .9rem;
    font-size: 0.9rem;
    color: var(--text-muted);   
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* ── Validation summary ──────────────────────────────────── */
.vib-val-summary {
    background: #fdf0ef;
    border: 2px solid var(--error);  
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    max-width: 900px;
    margin: 0 auto 1.5rem;   
    line-height: 1.5;
}

/* ── Success panel ───────────────────────────────────────── */
.vib-success {
    background: #eafaf1;
    border: 2px solid #27ae60;
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    max-width: 900px;
    margin: 2rem auto;
    color: #145a32;  
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: .75rem;   
    line-height: 1.5;
}
.vib-success::before {
    content: "✔";
    font-size: 1.4rem;
}

/* ── Horizontal divider ──────────────────────────────────── */
.vib-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

/* ── Date meta bar ───────────────────────────────────────── */
.vib-meta-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

/* ── Browse button ───────────────────────────────────────── */
.vib-browse-btn {
    display: inline-flex;
    align-items: center;   
    padding: 0.65rem 1.1rem;
    min-height: 44px;

    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid #005a9e;
    background: #005a9e;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 0.6rem;
}
.vib-browse-btn:hover,
.vib-browse-btn:focus {
    background: #003f75;
    border-color: #003f75;
    outline: 3px solid #ffbf00;
    outline-offset: 2px;
}

/* ── Screen-reader only utility ──────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}