/*
 * Saint Patrick Palace Accessibility - front-end styles.
 * Every rule is scoped by a body class that is only present when its module is on.
 */

/* Visually hidden text (new-tab notices). */
.spp-a11y .spp-a11y-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Keyboard: visible focus (WCAG 2.4.7, 2.4.11) ---------------------- */
body.spp-a11y-keyboard :focus-visible {
	outline: 3px solid #1f4448;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #fff;
}

/* The skip link target is a focus landing point, not a control: no ring around the whole page. */
body.spp-a11y-keyboard #main-content:focus,
body.spp-a11y-keyboard #main-content:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Keep the ring visible inside Divi's rounded or clipped containers. */
body.spp-a11y-keyboard .et_pb_menu .et-menu a:focus-visible,
body.spp-a11y-keyboard .et_pb_button:focus-visible {
	outline-offset: 0;
}

/* Desktop submenus open for keyboard focus as well as hover (WCAG 2.1.1). */
body.spp-a11y-keyboard .et-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Escape closes an open submenu until focus or the pointer leaves. */
body.spp-a11y-keyboard .et-menu .menu-item-has-children.spp-a11y-closed > .sub-menu {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ---- Touch targets (WCAG 2.5.8; 44px on small screens) ------------------ */
body.spp-a11y-keyboard .et_pb_social_icon a,
body.spp-a11y-keyboard .mobile_menu_bar,
body.spp-a11y-keyboard a.mobile-toggle {
	min-width: 24px;
	min-height: 24px;
}

@media (max-width: 980px) {
	body.spp-a11y-keyboard .et_pb_social_icon a,
	body.spp-a11y-keyboard .mobile_menu_bar,
	body.spp-a11y-keyboard a.mobile-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	body.spp-a11y-keyboard .et_mobile_menu li a,
	body.spp-a11y-keyboard .et-menu li a {
		min-height: 44px;
	}
}

/* ---- Contrast ------------------------------------------------------------ */

/* Brand teal (#477579) on mint (#BEE0D0) is 3.6:1. #2F5558 is 5.8:1. */
body.spp-a11y-contrast .spp-a11y-cta-heading:not(#spp-a11y),
body.spp-a11y-contrast .spp-a11y-cta-heading:not(#spp-a11y) a,
body.spp-a11y-contrast .spp-a11y-darken:not(#spp-a11y):not(:hover):not(:focus-visible),
/* Divi sets button colours with "body #page-container .et_pb_cta_0 ... !important"; repeating the class outranks it. */
body.spp-a11y-contrast #page-container .spp-a11y-darken.spp-a11y-darken.spp-a11y-darken.spp-a11y-darken:not(:hover):not(:focus-visible) {
	color: #2f5558 !important;
}

/* Keep promoted CTA headings looking like the H6s they replace. */
.et_pb_blurb .spp-a11y-cta-heading {
	font-size: 20px;
	line-height: 1.3em;
	font-weight: 600;
	padding-bottom: 10px;
}

/* Soft shadow for light text that sits on photographs. */
body.spp-a11y-contrast .et_pb_fullwidth_header .et_pb_fullwidth_header_container,
body.spp-a11y-contrast .et_pb_with_background.et_pb_section h1,
body.spp-a11y-contrast .et_pb_with_background.et_pb_section h2,
body.spp-a11y-contrast .et_pb_with_background.et_pb_section h4 {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}