/* ===================================================================
   Cook County Property Tax Portal — accessibility overrides
   Target: WCAG 2.1 Level AA
   Load AFTER bundle.min.css so these rules win.
   =================================================================== */

/* --- 1. BRAND BLUE ---------------------------------------------------
   #3595df on white = 3.22:1. AA needs 4.5:1.
   #1c70b0 is the same hue, darkened = 5.26:1. Fixes 16 contrast errors. */

a, a:link, a:visited,
.footertaxinglinks,
.footerdepartmentlinks,
.pinsearchlink2,
a.pinsearchlink2.active,
a.newseventslink:link, a.newseventslink:visited,
a.newseventslink:hover, a.newseventslink:active,
.newsarticletext a:link, .newsarticletext a:visited,
.newsarticletext a:hover, .newsarticletext a:active,
.sectioncontentfaq a:link, .sectioncontentfaq a:visited,
.sectioncontentfaq a:hover, .sectioncontentfaq a:active,
.formlink a,
.searchtitle2 a,
.btnpinclear, .btnaddressclear, .btnsearchclear,
.btnpinclear a, .btnaddressclear a, .btnsearchclear a,
.errormessage2 div:nth-of-type(2),
a.contactlink:hover {
    color: #1c70b0;
}

    .btnpinsearch, .btnaddresssearch, .btnsearch,
    a.footertaxinglinks {
        background-color: #1c70b0;
        color: #ffffff;
    }

    /* --- 2. LOW-CONTRAST GREYS -------------------------------------------
   #b2b2b2 = 2.12:1, #999999 = 2.85:1, #a0a0a0 = 2.61:1 — all fail. */

    .footercontent,
    a.footerdepartmentlinks,
    a.footerdisclaimerlink {
        color: #d6d6d6; /* on the #272727 footer — was #999999 */
    }

.contacttitle1,
.contactttitle2 {
    color: #6e6e6e; /* on white — was #a0a0a0 */
}

.newseventsdate {
    color: #6e6e6e; /* was #9d9c9c */
}

.titlemenu {
    color: #6e6e6e; /* was #b2b2b2 */
}

/* Search box: white text on #b2b2b2 is unreadable. */
#cse-search-input-box-id {
    background-color: #5f5f5f !important;
    color: #ffffff !important;
}

.magn, .print, .assess {
    background-color: #5f5f5f;
}

/* Validation errors: pure red #f00 on white is 4.0:1 — just under AA. */
.validationerrorsection {
    color: #b3261e;
}

/* --- 3. VERY SMALL TEXT (1 alert) ------------------------------------
   site.css line 2526 sets icon-bar labels to .6em (~9.6px) at 768–917px.
   The same labels are .7em (~11.2px) everywhere else. 12px is the floor. */

.flexbox .navg2 a,
.flexboxtweener .navg2 a,
.no-flexbox .navg2 a {
    font-size: 0.8125em;
    line-height: 1.3;
}

@media screen and (min-width: 768px) and (max-width: 917px) {
    .flexbox .navg2 a,
    .flexboxtweener .navg2 a,
    .no-flexbox .navg2 a {
        font-size: 0.75em;
        line-height: 1.3;
    }
}

/* --- 4. JUSTIFIED TEXT (20 alerts) -----------------------------------
   Five rules in site.css: lines 70, 559, 717, 1352, 1427.
   Justified text creates "rivers of white" — a barrier for dyslexic
   readers and anyone using magnification. */

.sectioncontentaligntext,
.newsarticletext p,
.link > p,
.otherprogramscontent p,
.faqanswer {
    text-align: left;
}

/* --- 5. VISIBLE KEYBOARD FOCUS ---------------------------------------
   site.css has ONE :focus rule in 466 rules, and it REMOVES the outline
   (input:focus{outline:none}). Keyboard users currently cannot see
   where they are. WCAG 2.4.7. */

a:focus, button:focus, input:focus,
select:focus, textarea:focus, [tabindex]:focus {
    outline: 3px solid #1c70b0 !important;
    outline-offset: 2px;
}

.navg2header a:focus,
footer a:focus {
    outline: 3px solid #ffffff !important;
}

/* --- 6. SCREEN-READER-ONLY TEXT --------------------------------------
   Used by the skip link, page <h1>, and form labels added later.
   Do NOT use display:none — that hides it from screen readers too. */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 10px 18px;
    background: #ffffff;
    color: #1c70b0;
    font-weight: 600;
    text-decoration: underline;
    border: 2px solid #1c70b0;
}

    .skip-link:focus {
        left: 0;
    }

/* --- 7. FORM LABELS (styling for labels added in File 3) ------------- */

.field-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.875em;
    font-weight: 600;
    color: #131313;
}

.required-marker {
    color: #b3261e;
    font-weight: 700;
}

/* --- 8. TOUCH TARGETS (WCAG 2.5.8) ----------------------------------- */

.pinsearchitem,
.addresssearchitem,
.addresssearchitem2 {
    min-height: 40px;
    font-size: 1em;
}

/* --- 9. REDUCED MOTION ----------------------------------------------- */

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

/* --- 10. NEWS BANNER OVER HERO PHOTO --------------------------------
   White text sits directly on a photograph; contrast varies per pixel
   and cannot be fixed with a colour change. A dark scrim behind the
   text guarantees the ratio regardless of which image loads. */

.latestnewsheading {
    background-color: rgba(0, 0, 0, 0.65);
    padding: 15px 30px;
    border-radius: 3px;
}

.latestnewsheading,
a.latestnewsarticlelink:link,
a.latestnewsarticlelink:visited,
a.latestnewsarticlelink:hover,
a.latestnewsarticlelink:active {
    color: #ffffff;
    text-shadow: none;
}

/* --- 11. ADDRESS SEARCH LABEL LAYOUT ---------------------------------
   Fields are floated at 59% / 35%. A wrapper div carries the width so
   the label sits above its own field without breaking the float row.
   Verified in Chromium against site.css at 1000px and 420px. */

.field-group {
    float: left;
    box-sizing: border-box;
    margin: 5px 1% 5px 1%;
}

.field-group-full {
    width: 96%;
}

.field-group-wide {
    width: 59%;
}

.field-group-narrow {
    width: 35%;
}

.field-group .addresssearchitem,
.field-group .addresssearchitem2 {
    width: 100%;
    margin: 0;
    float: none;
}

.field-group .field-label {
    margin: 0 0 4px 0;
}

/* --- 12. GOOGLE CSE OVERRIDES ----------------------------------------
   Google's CSE script applies inline colours to elements inside its
   form, including our hidden label. Visually-hidden text is never
   painted, so contrast is moot -- but forcing a passing colour stops
   scanners flagging it. */

.visually-hidden,
label.visually-hidden {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.searchcontentheader h2 {
    font-weight: 700;
    font-size: 1.875em;
    text-align: center;
    margin-bottom: 20px;
}

/* --- 13. CONTACT US ------------------------------------------------ */

.sectioncontactustext {
    color: #595959; /* on white, 7.0:1 -- was #999999, then wrongly #d6d6d6 */
}

a.contactlink {
    display: inline-block;
}

a.contactlink:hover .spritecontactus-btns-C-01, a.contactlink:focus .spritecontactus-btns-C-01 { background-position: -113px -5px; }
a.contactlink:hover .spritecontactus-btns-C-02, a.contactlink:focus .spritecontactus-btns-C-02 { background-position: -221px -113px; }
a.contactlink:hover .spritecontactus-btns-C-03, a.contactlink:focus .spritecontactus-btns-C-03 { background-position: -5px -113px; }
a.contactlink:hover .spritecontactus-btns-C-04, a.contactlink:focus .spritecontactus-btns-C-04 { background-position: -113px -221px; }
a.contactlink:hover .spritecontactus-btns-C-05, a.contactlink:focus .spritecontactus-btns-C-05 { background-position: -329px -5px; }