/* ============================================================
   a11y.css — site-wide accessibility helpers (loaded on every page)
   Keep this file small: it is render-blocking by design so that
   focus styles and the skip link work before any other CSS/JS.
   ============================================================ */

/* Visually hidden, still read by screen readers */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* "Skip to main content" link: hidden until it receives keyboard focus */
.skip-link {
	position: absolute;
	top: -100px;
	inset-inline-start: 8px;
	z-index: 1000000;
	background: #2a6806;
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 8px 8px;
	font-weight: 700;
	text-decoration: none;
	transition: top .15s;
}

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

/* Visible keyboard focus everywhere. :focus-visible means mouse clicks
   do not show the ring, only keyboard / assistive-tech focus does. */
:focus-visible {
	outline: 3px solid #f0c300 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #2a6806 !important;
}

.dark-mode :focus-visible {
	outline-color: #ffd84d !important;
	box-shadow: 0 0 0 2px #000 !important;
}

#main-content:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Dropdown menus are hover-only in dropdown-effects/fade-down.css;
   :focus-within lets keyboard users open them with Tab. */
.wsmenu>.wsmenu-list>li:focus-within>ul.sub-menu,
.wsmenu>.wsmenu-list>li>ul.sub-menu>li:focus-within>ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
}

/* Icon-only controls that used to be <i>/<img>/<a href="#"> and are now
   real <button>s: strip the default button chrome so the design is unchanged */
.a11y-btn {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* Finger-alphabet toggle: the <img> used to carry .pointerhand (round-cropped);
   now the <button> does, so clip the image to the same white circle */
.a11y-btn.pointerhand {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 50% !important;
	overflow: hidden;
	line-height: 0;
	justify-content: center;
}

.a11y-btn.pointerhand img {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
}

/* Font-size controls (A- / A / A+) inside the accessibility settings menu */
.settings_menu .controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

.settings_menu .controls button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 32px;
	padding: 3px 8px;
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	border: 1px solid #bbb;
	border-radius: 4px;
	background: #fff;
	color: #2a6806;
	cursor: pointer;
}

.settings_menu .controls button:hover {
	background: #eee;
}

/* Theme rules that were tag-qualified (".section-title h3", ".txt-block h3.h3-sm"):
   same values for the h2 that now carries those classes on the home page */
.section-title h2 {
	margin-bottom: 12px;
}

.txt-block h2.h3-sm {
	margin-bottom: 25px;
}

@media (max-width: 1199.98px) {
	.txt-block h2.h3-sm {
		margin-bottom: 20px;
	}
}

/* Form validation messages: text, not only colour */
.field-error {
	display: block;
	color: #b00020;
	font-size: .95rem;
	margin-top: 4px;
}

.dark-mode .field-error {
	color: #ff8a9b;
}

input.error,
textarea.error,
select.error {
	border-color: #b00020 !important;
}

/* Contact / donate forms: the theme only styles input[type=text]; the email and
   phone fields now use their proper types, so give them the identical box */
.contact-top div input[type=email],
.contact-top div input[type=tel] {
	width: 100%;
	padding: .7em;
	margin: .4em 0 0;
	background: 0 0;
	outline: 0;
	border: 1px solid #bebdbd;
	-webkit-appearance: none;
}

.contact-top div input[type=email].error,
.contact-top div input[type=tel].error {
	border: 1px solid red !important;
	color: red !important;
}

.required-mark {
	color: #b00020;
	font-weight: 700;
	margin-inline-start: 3px;
}

/* Preloader: fade out as soon as the DOM is ready (see template.php) */
#loader-wrapper {
	transition: opacity .3s ease, visibility .3s ease;
}

#loader-wrapper.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Mobile menu button: the theme stretches the toggle across the bar (left:5px +
   right:0) and draws the bars 80px from the right, on top of the date text, so
   on narrow screens the button is covered/invisible. Pin it to a 44px box on
   the left and keep the text clear of it. */
@media (max-width: 991px) {
	#wsnavtoggle {
		left: 8px !important;
		right: auto !important;
		width: 44px !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		z-index: 1000 !important;
	}

	#wsnavtoggle span {
		right: auto !important;
		left: 9px !important;
		top: 50% !important;
		margin-top: -2px !important;
	}

	.mobile-main-bar {
		padding-left: 60px !important;
	}

	/* While the menu is open the theme shifts the header 300px to the left, which
	   pushed the close (X) button off screen. Keep it in the visible strip and
	   draw it as a white X on a green disc so it is readable over the logo. */
	.wsactive #wsnavtoggle {
		left: auto !important;
		right: 8px !important;
		background: #2a6806 !important;
		border-radius: 50%;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
	}

	.wsactive #wsnavtoggle span:before,
	.wsactive #wsnavtoggle span:after {
		background: #fff !important;
	}

	/* English (LTR): the theme puts the logo on the LEFT, so the button goes to
	   the right edge; when the menu is open the header shifts right instead */
	[dir="ltr"] #wsnavtoggle {
		left: auto !important;
		right: 8px !important;
	}

	[dir="ltr"] .mobile-main-bar {
		padding-right: 60px !important;
	}

	[dir="ltr"] .wsactive #wsnavtoggle {
		right: auto !important;
		left: 8px !important;
	}
}

/* About-page tab items are real links now (keyboard + screen readers). The link
   must not change the theme's layout: on desktop it is a plain block; on
   mobile the theme makes each <li> a centred flex column, so the link repeats
   that layout for the icon/text it now wraps. */
#faqs-1 .tabs-1 li > a.tab-item-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

@media (max-width: 991px) {
	#faqs-1 .tabs-1 li > a.tab-item-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
}

/* Honour the user's "reduce motion" OS setting */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	#loader-wrapper {
		display: none !important;
	}
}