/**
 * The Gentle Art Accessibility: base styles.
 *
 * Skip link, visible keyboard focus and colour contrast fixes for site-wide components.
 */

/* Skip link: hidden until it receives keyboard focus. */
.tga-a11y-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000000;
	padding: 12px 20px;
	background: #1a1a1a;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	transform: translateY(-120%);
}

.tga-a11y-skip-link:focus {
	transform: translateY(0);
}

/*
 * Visible keyboard focus. Divi sets `outline: 0` on :focus globally, so the outline is forced here.
 * A dark ring with a white halo keeps at least 3:1 contrast on both light and dark backgrounds.
 */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body summary:focus-visible,
body [role="button"]:focus-visible,
body [tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid #1a1a1a !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #fff !important;
}

/* Keep the focus target of the skip link from showing a ring when focused by script. */
#main-content:focus {
	outline: 0;
}

/* The mobile menu toggle is now a real control. */
.et_pb_menu .mobile_menu_bar[role="button"] {
	cursor: pointer;
}

/*
 * Colour contrast (WCAG 1.4.3).
 *
 * Brand slate #698996 with white (or on white) is 3.7:1. The darker slate #4b6673 is 6.1:1 on white and 4.9:1 on the
 * cream sections. Divi writes colours per module with !important, so these selectors are deliberately specific
 * (the doubled id selector #page-container#page-container adds specificity for builder pages, which add #et-boc).
 */

/* Header buttons and the current menu item (the header appears on every page). */
html body #page-container#page-container .et-l--header .et_pb_button.et_pb_button,
html body #page-container#page-container .et-l--header .et-menu .current-menu-item > a,
html body #page-container#page-container .et-l--header .et-menu .current-menu-ancestor > a,
html body #page-container#page-container .et-l--header .et-menu .current-menu-parent > a,
html body #page-container#page-container .et-l--header .et-menu .current_page_item > a {
	color: #4b6673 !important;
}

html body #page-container#page-container .et-l--header .et_pb_button.et_pb_button:hover,
html body #page-container#page-container .et-l--header .et_pb_button.et_pb_button:focus-visible {
	background-color: #4b6673 !important;
	color: #fff !important;
}

/* WooCommerce buttons (shop product table, account, cart, checkout): white text on slate. */
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button,
html body .woocommerce-page a.button,
html body .woocommerce-page button.button,
html body .woocommerce-page input.button,
html body .woocommerce-button,
html body .wc-product-table a.button,
html body .wc-product-table button.button,
html body a.button.wc-backward,
html body a.button.wc-forward,
html body a.button.checkout-button {
	background-color: #4b6673 !important;
	color: #fff !important;
}

/* Links inside WooCommerce content and the product table: Divi's default link blue #2ea3f2 is 2.7:1, #0e6ba8 is 5.7:1. */
.wc-product-table td a:not(.button):not(.et_pb_button),
.woocommerce form a:not(.button),
.woocommerce-LostPassword a,
.woocommerce-MyAccount-content a:not(.button),
.woocommerce-privacy-policy-text a,
a.print-page {
	color: #0e6ba8;
}