/* ==========================================================================
   ABPN Accessibility and Compliance Styles
   ========================================================================== */

:root {
    --abpn-navy: #002266;
    --abpn-orange: #f15519;
    --abpn-green: #58842e;
    --abpn-on-orange: #222222;
    --abpn-on-navy: #ffffff;
    --abpn-on-green: #ffffff;

    --abpn-focus-dark: #000000;
    --abpn-focus-light: #ffffff;
}


/* ==========================================================================
   Skip to Content Link
   ========================================================================== */

.skip-to-content-link {
    width: 100%;
    padding: 10px;
    display: block;
    position: fixed;
    top: -100px;
    left: 0;
    z-index: 999999;

    background-color: var(--abpn-orange);
    color: var(--abpn-on-orange) !important;

    font-family: canada-type-gibson, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 18px;
    text-align: center;

    transition:
        top 0.2s ease-out,
        background-color 0.2s linear;
}

.skip-to-content-link:hover,
.skip-to-content-link:focus,
.skip-to-content-link:focus-visible {
    top: 0;

    transition:
        top 0.2s ease-in,
        background-color 0.5s linear;
}


/* ==========================================================================
   Global Focus Indicators
   WCAG 2.4.7 – Focus Visible
   ========================================================================== */

/*
 * Expanded selectors WITHOUT :where() so each has real specificity.
 * Covers all standard interactive elements.
 */
html body a:focus,
html body a:focus-visible,
html body button:focus,
html body button:focus-visible,
html body input:not([type="hidden"]):focus,
html body input:not([type="hidden"]):focus-visible,
html body select:focus,
html body select:focus-visible,
html body textarea:focus,
html body textarea:focus-visible,
html body summary:focus,
html body summary:focus-visible,
html body iframe:focus,
html body iframe:focus-visible,
html body [contenteditable="true"]:focus,
html body [contenteditable="true"]:focus-visible,
html body [tabindex]:not([tabindex="-1"]):focus,
html body [tabindex]:not([tabindex="-1"]):focus-visible,
html body [role="button"]:focus,
html body [role="button"]:focus-visible,
html body [role="link"]:focus,
html body [role="link"]:focus-visible,
html body [role="checkbox"]:focus,
html body [role="checkbox"]:focus-visible,
html body [role="radio"]:focus,
html body [role="radio"]:focus-visible,
html body [role="switch"]:focus,
html body [role="switch"]:focus-visible,
html body [role="tab"]:focus,
html body [role="tab"]:focus-visible,
html body [role="menuitem"]:focus,
html body [role="menuitem"]:focus-visible {
    outline: 3px solid var(--abpn-focus-dark) !important;
    outline-offset: 3px !important;

    /*
     * The white separation ring keeps the focus indicator visible
     * against both dark and light backgrounds.
     */
    box-shadow:
        0 0 0 2px var(--abpn-focus-light),
        0 0 0 5px var(--abpn-focus-dark) !important;
}


/* ==========================================================================
   Explicit Theme Component Focus Indicators
   ========================================================================== */

/*
 * Additional specificity for navigation, header, theme buttons,
 * Slick Slider, and Swiper controls.
 */
html body #top-menu a:focus,
html body #top-menu a:focus-visible,
html body #mobile-menu a:focus,
html body #mobile-menu a:focus-visible,
html body #nav a:focus,
html body #nav a:focus-visible,
html body #nav li a:focus,
html body #nav li a:focus-visible,
html body #nav li > ul > li > a:focus,
html body #nav li > ul > li > a:focus-visible,
html body #nav li.nav-btn > a:focus,
html body #nav li.nav-btn > a:focus-visible,
html body .menu a:focus,
html body .menu a:focus-visible,
html body .sub-menu a:focus,
html body .sub-menu a:focus-visible,
html body .btn:focus,
html body .btn:focus-visible,
html body .button:focus,
html body .button:focus-visible,
html body a.btn:focus,
html body a.btn:focus-visible,
html body a.button:focus,
html body a.button:focus-visible,
html body input[type="submit"]:focus,
html body input[type="submit"]:focus-visible,
html body .slick-arrow:focus,
html body .slick-arrow:focus-visible,
html body .slick-dots button:focus,
html body .slick-dots button:focus-visible,
html body .swiper-button-prev:focus,
html body .swiper-button-prev:focus-visible,
html body .swiper-button-next:focus,
html body .swiper-button-next:focus-visible,
html body .swiper-pagination-bullet:focus,
html body .swiper-pagination-bullet:focus-visible,
html body #hdr a:focus,
html body #hdr a:focus-visible,
html body #hdr #logo a:focus,
html body #hdr #logo a:focus-visible,
html body .search-icon:focus,
html body .search-icon:focus-visible,
html body #search-form-wrapper input:focus,
html body #search-form-wrapper input:focus-visible,
html body .breadcrumbs a:focus,
html body .breadcrumbs a:focus-visible,
html body #main-menu a:focus,
html body #main-menu a:focus-visible,
html body #main-menu ul li a:focus,
html body #main-menu ul li a:focus-visible,
html body ul#menu-main-menu li a:focus,
html body ul#menu-main-menu li a:focus-visible,
html body #main-menu-child-pages a:focus,
html body #main-menu-child-pages a:focus-visible {
    outline: 3px solid var(--abpn-focus-dark) !important;
    outline-offset: 3px !important;

    box-shadow:
        0 0 0 2px var(--abpn-focus-light),
        0 0 0 5px var(--abpn-focus-dark) !important;
}


/* ==========================================================================
   Footer Focus Indicators (dark background – use light outline)
   ========================================================================== */

html body #ftr a:focus,
html body #ftr a:focus-visible,
html body #ftr button:focus,
html body #ftr button:focus-visible,
html body #ftr input:focus,
html body #ftr input:focus-visible,
html body #ftr #ftr-menu a:focus,
html body #ftr #ftr-menu a:focus-visible,
html body #ftr #ftr-menu ul li a:focus,
html body #ftr #ftr-menu ul li a:focus-visible,
html body #ftr #ftr-menu #social-icons a:focus,
html body #ftr #ftr-menu #social-icons a:focus-visible {
    outline: 3px solid var(--abpn-focus-light) !important;
    outline-offset: 3px !important;

    box-shadow:
        0 0 0 2px var(--abpn-focus-dark),
        0 0 0 5px var(--abpn-focus-light) !important;
}


/* ==========================================================================
   Focus Indicators Inside Overflow-Hidden Components
   ========================================================================== */

/*
 * Slider and carousel containers commonly use overflow: hidden,
 * which can clip outside outlines. Use an inset focus ring here.
 */
html body .slick-slide a:focus,
html body .slick-slide a:focus-visible,
html body .slick-slide button:focus,
html body .slick-slide button:focus-visible,
html body .slick-slider .slick-list a:focus,
html body .slick-slider .slick-list a:focus-visible,
html body .slick-slider .slick-list button:focus,
html body .slick-slider .slick-list button:focus-visible,
html body [class*="slider"] a:focus,
html body [class*="slider"] a:focus-visible,
html body [class*="slider"] button:focus,
html body [class*="slider"] button:focus-visible,
html body [class*="carousel"] a:focus,
html body [class*="carousel"] a:focus-visible,
html body [class*="carousel"] button:focus,
html body [class*="carousel"] button:focus-visible {
    outline: 3px solid var(--abpn-focus-dark) !important;
    outline-offset: -3px !important;

    box-shadow:
        inset 0 0 0 3px var(--abpn-focus-light),
        inset 0 0 0 6px var(--abpn-focus-dark) !important;
}


/* ==========================================================================
   Slick Slider Specific Overrides
   Counteracts outline:none in style.css lines 3518, 3570, 3596, 3662, 3673
   ========================================================================== */

html body .slick-slider .slick-arrow:focus,
html body .slick-slider .slick-arrow:focus-visible,
html body .slick-slider .slick-arrow:hover:focus,
html body .slick-slider .slick-arrow:hover:focus-visible,
html body .slick-slider .slick-dots li button:focus,
html body .slick-slider .slick-dots li button:focus-visible,
html body .slick-slider .slick-dots li button:hover:focus,
html body .slick-slider .slick-dots li button:hover:focus-visible {
    outline: 3px solid var(--abpn-focus-dark) !important;
    outline-offset: -3px !important;

    box-shadow:
        inset 0 0 0 3px var(--abpn-focus-light),
        inset 0 0 0 6px var(--abpn-focus-dark) !important;
}


/* ==========================================================================
   Fancybox Focus Overrides
   Counteracts outline:none in style.css line 1106 and fancybox.css line 16
   ========================================================================== */

html body .fancybox-wrap:focus,
html body .fancybox-wrap:focus-visible,
html body .fancybox-skin:focus,
html body .fancybox-skin:focus-visible,
html body .fancybox-outer:focus,
html body .fancybox-outer:focus-visible,
html body .fancybox-inner:focus,
html body .fancybox-inner:focus-visible,
html body .fancybox-nav:focus,
html body .fancybox-nav:focus-visible,
html body .fancybox-nav span:focus,
html body .fancybox-nav span:focus-visible,
html body .fancybox-close:focus,
html body .fancybox-close:focus-visible,
html body .fancybox-tmp:focus,
html body .fancybox-tmp:focus-visible {
    outline: 3px solid var(--abpn-focus-dark) !important;
    outline-offset: 3px !important;
    box-shadow:
        0 0 0 2px var(--abpn-focus-light),
        0 0 0 5px var(--abpn-focus-dark) !important;
}


/* ==========================================================================
   Notification Bar Close Button Override
   Counteracts outline:none in style.css line 3476
   ========================================================================== */

html body .btn.btn_notification_close:focus,
html body .btn.btn_notification_close:focus-visible {
    outline: 3px solid var(--abpn-focus-dark) !important;
    outline-offset: 3px !important;
    box-shadow:
        0 0 0 2px var(--abpn-focus-light),
        0 0 0 5px var(--abpn-focus-dark) !important;
}


/* ==========================================================================
   Video Slider CTA Override (dark background – use light outline)
   Counteracts outline:none in style.css line 3852
   ========================================================================== */

html body #page-video-slider #page-slider .video-slider-content .content-inner .btn:focus,
html body #page-video-slider #page-slider .video-slider-content .content-inner .btn:focus-visible,
html body #page-video-slider #page-slider .video-slider-content .content-inner a:focus,
html body #page-video-slider #page-slider .video-slider-content .content-inner a:focus-visible {
    outline: 3px solid var(--abpn-focus-light) !important;
    outline-offset: 3px !important;
    box-shadow:
        0 0 0 2px var(--abpn-focus-dark),
        0 0 0 5px var(--abpn-focus-light) !important;
}


/* ==========================================================================
   Prevent Theme Styles From Removing Focus — Nuclear Override
   Forces outline-style: solid on ALL focusable elements including hover states
   ========================================================================== */

html body a:focus,
html body a:focus-visible,
html body a:hover:focus,
html body a:hover:focus-visible,
html body button:focus,
html body button:focus-visible,
html body button:hover:focus,
html body button:hover:focus-visible,
html body input:focus,
html body input:focus-visible,
html body select:focus,
html body select:focus-visible,
html body textarea:focus,
html body textarea:focus-visible,
html body summary:focus,
html body summary:focus-visible,
html body iframe:focus,
html body iframe:focus-visible,
html body [tabindex]:not([tabindex="-1"]):focus,
html body [tabindex]:not([tabindex="-1"]):focus-visible,
html body [role="button"]:focus,
html body [role="button"]:focus-visible,
html body [role="link"]:focus,
html body [role="link"]:focus-visible {
    outline-style: solid !important;
    outline-width: 3px !important;
    outline-color: var(--abpn-focus-dark) !important;
}


/* ==========================================================================
   Nuclear Catch-All — Absolute Last Resort
   Ensures EVERY focusable element shows a visible focus indicator.
   Using *:focus and *:focus-visible with !important as final safety net.
   ========================================================================== */

html body *:focus-visible {
    outline: 3px solid var(--abpn-focus-dark) !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   WCAG 2.5.8 – Target Size (Minimum)
   Ensures all interactive touch targets are at least 24×24 CSS pixels.
   ========================================================================== */

/*
 * Navigation dropdown sub-menu links (#nav li > ul > li > a).
 * The theme sets padding: 5px 20px with line-height: 1.2 which can
 * produce targets shorter than 24px.  Increase vertical padding to
 * guarantee a minimum 24px hit area and add spacing between items.
 */
html body #nav li > ul > li > a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 24px !important;
}
/*
 * Top-level nav links and inline nav items.
 * These are rendered inline-block with no explicit height; ensure
 * they meet the minimum target size.
 */
html body #nav > li > a {
    min-height: 24px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/*
 * Footer menu links.
 * Theme sets padding: 4px 10px 6px which totals only 10px vertical
 * padding on roughly 16px text — just barely meeting 24px in some
 * cases. Add a safety margin.
 */
html body #ftr #ftr-menu ul li a {
    min-height: 24px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/*
 * Mobile / collapsed menu links.
 */
html body #mobile-menu a {
    min-height: 24px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/*
 * Main menu icon links (Become Certified, etc.).
 * These are already large on desktop, but ensure the clickable
 * area is at least 24×24 on all viewports.
 */
html body #main-menu ul li a {
    min-height: 24px !important;
}

/*
 * Child-page sub-navigation links.
 */
html body #main-menu-child-pages ul li a {
    min-height: 24px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* ==========================================================================
   Visually Hidden Content
   ========================================================================== */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important;
}


/*
 * Reveal screen-reader-only links when focused.
 */
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
    clip: auto !important;
    clip-path: none;
    width: auto;
    height: auto;
    overflow: visible;
    position: fixed !important;
    top: 10px;
    left: 10px;
    z-index: 999999;

    padding: 12px 16px;
    background-color: #ffffff;
    color: #000000;

    font-size: 16px;
    font-weight: 700;
    text-decoration: none;

    outline: 3px solid var(--abpn-focus-dark) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px var(--abpn-focus-light) !important;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-brand-orange,
#nav li.nav-btn > a,
#page-video-slider .btn {
    background-color: var(--abpn-orange);
    color: var(--abpn-on-orange);
    font-weight: 700;
}

#nav li.nav-btn > a:hover {
    background-color: var(--abpn-orange);
    color: var(--abpn-on-orange);
}

.btn-brand-navy {
    background-color: var(--abpn-navy);
    color: var(--abpn-on-navy);
}

.text-brand-orange {
    color: var(--abpn-orange);
    font-size: 1.5rem;
    font-weight: 700;
}

a.viewall {
    color: #a83a0c;
}


/* ==========================================================================
   Text and Links
   ========================================================================== */

#fp-upcoming-deadlines ul li .deadline-title {
    font-size: 18px;
}

.members .member {
    color: #4d4d4d;
}

.members .member .link {
    color: #005ea2;
    text-decoration: none;
}

#page ol a,
#page ul a,
#page p a:not(.btn):not(.button):not(.wp-block-button__link) {
    text-decoration: underline !important;
    font-weight: 700;
}

#page .breadcrumbs li a {
    text-decoration: none !important;
}

.deadlines .deadline .deadline-title {
    color: #002266;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    text-decoration: none;
}

.deadlines .deadline .deadline-title span {
    color: #666666;
}

#fp-upcoming-deadlines ul li .deadline-title span {
    color: #57822d;
}


/* ==========================================================================
   Forms
   ========================================================================== */

body .gform_wrapper .charleft {
    color: #666666;
}

body
.gform_wrapper
.gform_body
.gform_fields
.gfield
.gfield_label
.gfield_required {
    color: #b00020;
}


/* ==========================================================================
   Footer
   ========================================================================== */

#ftr #ftr-menu #social-icons p.footer-title {
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}


/* ==========================================================================
   Archives and News
   ========================================================================== */

.categories-pages .news .article a p {
    margin-bottom: 10px;
}

.categories-pages .news .article a {
    font-weight: 700;
}

.news .article .post_title {
    margin-bottom: 0;
    color: #002266;
    font-size: 1.05em;
    font-weight: 700;
    text-decoration: underline;
}


/* ==========================================================================
   Upcoming Deadlines
   ========================================================================== */

#fp-upcoming-deadlines p.title {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #002266;
    font-size: 1.3em;
    font-weight: 700;
    text-transform: uppercase;
}


/* ==========================================================================
   Video Slider
   ========================================================================== */

/* #page-video-slider #page-slider .video-slider-content .content-inner {
    background-color: #222222;
} */