/* ADA Compliance - Skip to Main Content Link (WCAG 2.4.1 Bypass Blocks)
   Hidden off-screen left by default; appears to the right of the CrimeMapping
   logo on keyboard focus. DOM position is first so Tab 1 always reaches it. */
.skip-to-content {
    position: fixed;
    top: 5px;
    left: -9999px;
    z-index: 9999;
    padding: 2px 10px;
    background-color: #ffffff;
    color: #005fcc;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
    border-bottom: 3px solid #005fcc;
    outline: none;
}

.skip-to-content:focus {
    left: 300px;
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

@media screen and (max-width: 649px) {
    .skip-to-content:focus {
        left: 10px;
        top: 80px;
    }
}

/* Suppress browser focus outline on the skip-link target div */
#top:focus,
#main:focus,
#main-heading:focus,
#alert-heading:focus {
    outline: none !important;
}

/* ADA: Modal dialog container — suppress focus ring on the wrapper div.
   Only interactive children (buttons, links) inside the dialog should
   display a visible focus indicator, not the dialog container itself. */
#modalAlertDialog:focus,
#modalAlertDialog:focus-visible,
#modalAlertDialog .successModal:focus,
#modalAlertDialog .successModal:focus-visible {
    outline: none !important;
}

/* ADA Compliance - Save Alert Button Reset */
/* ADA Compliance - Button Reset (All Custom Buttons) */
#btn-save-alert,
#btn-verify-address,
#btn-try-again,
#btnShareMap,
button.greenSubmit,
button.locationgo,
button.agencyInfo {
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

#btn-save-alert:focus,
#btn-verify-address:focus,
#btn-try-again:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* ADA Compliance - Staging Login Form Field Labels */
.login-field-label {
    display: block;
    text-align: left;
    color: #ffffff;
    background-color: transparent;
    margin-bottom: 6px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ADA Compliance - Color Contrast Overrides */
 
.help-doc-list a,
.faq-list a {
    color: #005fcc !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

.help-doc-list a:hover,
.faq-list a:hover {
    text-decoration: underline !important;
}
 
#content p a {
    color: #005fcc !important;
    text-decoration: none;
}

#centralsquare-link {
    color: #005fcc;
    text-decoration: underline;
    font-weight: bold;
}

#centralsquare-link:hover {
    color: #005fcc;
    text-decoration: underline;
}

/* ADA Compliance - Label used instead of h1 for accessible section headers */
label.profileSectionHeader {
    margin: 20px 0 !important;
    color: #007aff !important;
    font-weight: 200 !important;
    float: left !important;
    font-size: 20px !important;
    width: 100% !important;
    display: block !important;
    cursor: default !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

.visually-hidden-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   ADA Compliance - Crime-E634: Email Preferences Radio Group
   Semantic list markup reset for fieldset and ul elements wrapping
   radio button groups. Ensures no visual change while providing
   proper list semantics for screen readers.
   ================================================================ */
 .emailPrefFieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    clear:both;
} 

.emailPrefRadioList {
    list-style: none;
    padding: 10px;
    margin: 0;
}

.emailPrefRadioList li {
    margin: 0;
    padding: 5px;
}

/* ================================================================
   ADA Compliance - Keyboard Focus Indicators (WCAG 2.4.7)
   Ensures all interactive controls display a visible focus indicator
   when navigated via keyboard (Tab key).
   Applies to: map page, public site, admin pages.
   ================================================================ */

/* Universal focus indicator: links, buttons, form controls, and
   any element made interactive via role/tabindex (Areas 1-4) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="radio"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="listbox"]:focus-visible,
[role="option"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* Area 1 & 4: Radio buttons and checkboxes are often visually replaced
   by a styled label; show focus indicator on the label instead */
input[type="radio"]:focus-visible + label,
input[type="checkbox"]:focus-visible + label {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* Area 3: Hamburger menu — the checkbox toggle is visually hidden;
   show focus indicator on its label (the visible menu icon) */
.nav-trigger:focus-visible + label {
    outline: 3px solid #005fcc !important;
    outline-offset: 3px !important;
}

/* Area 2: Contact Support / Contact Sales tab buttons */
ul.tab li a:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: -3px !important;
}

/* Area 3: Header links and controls */
#pgHeader a:focus-visible,
#pgHeader button:focus-visible,
#pgHeader [role="button"]:focus-visible,
#pgHeader [tabindex]:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* Area 1 & 4: Map page slide-out navigation links */
#mapnavigation a:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

.landinglabel {
    float: left;
    margin-left: 11%;
    font-size: 15px;
    color: #FFF;
    font-weight: bold;
}

h2.yellow, h3.yellow, h4.yellow {
    margin: .5em 0;
    color: #fbd13b;
    font-weight: 300;
}

h2.orange, h3.orange, h4.orange {
    color: #fbb03b;
    font-weight: 400;
    font-size: 1.5em;
}

h2.orangeMedium, h3.orangeMedium, h4.orangeMedium {
    color: #fbb03b;
    font-weight: 300;
    font-size: 1.3em;
}

h2.orangeSmall, h3.orangeSmall, h4.orangeSmall {
    color: #fbb03b;
    font-weight: 400;
    font-size: 1.1em;
}
.hidden{
    display:none;
}
h1.blueSub {
    font-size: clamp(24px, 5vw, 2em);
}