/* Accessibility fixes from the A-2-Z report (31.5.2026). Loaded last in header.php. */

/* Skip link: off-screen until it gets keyboard focus. */
.skip-link {
    position: absolute;
    top: -100px;
    right: 10px;
    z-index: 100000;
    padding: 10px 18px;
    background: #000;
    color: #fff !important;
    font-size: 18px;
    text-decoration: underline;
}
.skip-link:focus {
    top: 10px;
}

/* Visible keyboard focus on every interactive element, with the report's CSS.
   accessibility.php applies the same style under .accessibility_mode; this covers the elements it misses
   and the pages that don't load it (footer-kids.php).
   !important overrides the theme's and Bootstrap's outline:none / outline:0 rules. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
.btn:focus-visible,
.slick-slide:focus-visible,
.slick-arrow:focus-visible {
    outline: 3px dashed #000 !important;
    outline-offset: 2px !important;
    border: 2px dashed #fff !important;
}

/* Custom checkboxes hide the real input (opacity:0), so draw the focus ring on the visible box. */
.custom-checkbox input:focus-visible ~ .checkmark,
.custom-checkbox input:focus ~ .checkmark {
    outline: 3px dashed #000 !important;
    outline-offset: 2px !important;
    border: 2px dashed #fff !important;
}

/* Contrast: Bootstrap's default link blue #007bff is about 4:1 on white. #0056b3 is about 7:1. */
a {
    color: #0056b3;
}

/* Contrast: #929292 small text is about 3:1 on white. #6b6b6b is about 5.3:1. */
.members-content p small {
    color: #6b6b6b;
}

/* Thank-you pages (tpl.toda.php, tpl.toda2.php): the message is now an H1 but keeps its old look. */
.toda h1.toda-title {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
}

/* Phones (portrait): the theme hides section.banner-small, so pages without a #mobile_devices banner lost their H1
   (the thank-you pages, .toda, show their banner on phones and are left alone).
   Keep that H1 readable by screen readers; the banner stays visually hidden and its links can't take focus. */
@media screen and (min-device-width: 100px) and (max-device-width: 768px) and (orientation: portrait) {
	section.banner-small:not(#mobile_devices):not(:has(~ #mobile_devices)):not(:has(.toda)) {
		display: block !important;
		position: absolute !important;
		width: 1px !important; height: 1px !important;
		margin: -1px !important; padding: 0 !important; border: 0 !important;
		overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
		white-space: nowrap !important;
	}
	section.banner-small:not(#mobile_devices):not(:has(~ #mobile_devices)):not(:has(.toda)) * { visibility: hidden !important; }
	section.banner-small:not(#mobile_devices):not(:has(~ #mobile_devices)):not(:has(.toda)) h1,
	section.banner-small:not(#mobile_devices):not(:has(~ #mobile_devices)):not(:has(.toda)) h1 * { visibility: visible !important; }
}