/* Accessibility Fixer — keyboard focus styles and reveal rules. */

:root {
	--afx-ring: #308CC7;       /* outer ring, set from the settings page */
	--afx-ring-inner: #ffffff; /* inner ring, keeps the outline visible on dark and light backgrounds */
}

/* On dark backgrounds (set by the script per focused item): light outer
   ring with a navy gap, so it stands out from both the dark section and a
   light button. */
[data-afx-dark] {
	--afx-ring: var(--afx-ring-dark, #ffffff);
	--afx-ring-inner: var(--afx-ring-dark-inner, #0A1A3E);
}

/* ── Focus ring: only shown for keyboard focus, never on mouse click ── */
html.afx-ring :focus-visible {
	outline: 3px solid var(--afx-ring) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px var(--afx-ring-inner) !important;
}

/* Plain text links get softly rounded corners (styled buttons keep their own shape). */
:where(html.afx-ring) a:not([class]):focus-visible {
	border-radius: 3px;
}

/* Header menu links are as tall as the header (35px padding top and bottom),
   so draw the box around the link text instead of the whole bar. */
html.afx-ring .main-navigation .menu > li > a:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
html.afx-ring .main-navigation .menu > li > a:focus-visible > span {
	outline: 3px solid var(--afx-ring) !important;
	outline-offset: 8px;
	border-radius: 4px;
}

/* Tab titles (Track 1–4): a roomier rounded box, the text has no padding. */
html.afx-ring .e-n-tab-title:focus-visible {
	outline-offset: 8px !important;
	border-radius: 6px !important;
	box-shadow: none !important;
}

/* Phone field (Enquiries): the number input runs under the "+971" button.
   Box only the typing area, from the divider to the right end. */
html.afx-ring .gcs-phone > input[type="tel"]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
html.afx-ring .gcs-phone.afx-phone-focus[style*="--afx-phone-border"] > input[type="tel"] {
	border-color: var(--afx-phone-border) !important;
}
html.afx-ring .gcs-phone.afx-phone-focus::after {
	content: "";
	position: absolute;
	z-index: 3;
	top: calc(var(--afx-phone-top, 0px) + 5px);
	height: calc(var(--afx-phone-h, 100%) - 10px);
	left: calc(var(--afx-phone-left, 0px) + 5px);
	right: calc(var(--afx-phone-right, 0px) + 5px);
	border-radius: 6px 999px 999px 6px;
	outline: 3px solid var(--afx-ring);
	pointer-events: none;
}
/* The "+971" button: follow the pill's rounded left end, inside the field. */
html.afx-ring .gcs-phone > .gcs-phone__toggle:focus-visible {
	outline: 3px solid var(--afx-ring) !important;
	outline-offset: -5px !important;
	box-shadow: none !important;
	border-radius: 999px 6px 6px 999px !important;
}

/* Third-party iframes (reCAPTCHA badge): the focus is inside the frame, so
   draw the box on the frame's wrapper. */
html.afx-keyboard.afx-ring .grecaptcha-badge:focus-within {
	outline: 3px solid var(--afx-ring) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px var(--afx-ring-inner) !important;
}

/* Containers that receive focus by script (skip-link target, popup wrapper)
   would otherwise get a ring around the whole page. */
html.afx-ring :is(div, section, main, article, header, footer, nav)[tabindex="-1"]:not([role="tab"]):not([role="option"]):focus-visible,
html.afx-ring .mfp-wrap:focus-visible,
html.afx-ring #content:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Agenda round icon buttons (share / ⓘ) are now keyboard buttons. */
.schedules-button-share[data-afx-btn],
.schedules-button-popup[data-afx-btn] {
	cursor: pointer;
}

/* ── Reveal scroll-animated sections once the keyboard is used ──
   Elementor hides them (visibility:hidden) until scrolled to, and TAB skips
   hidden content. Their entrance animation still plays when scrolled into view. */
html.afx-reveal .elementor-invisible {
	visibility: visible !important;
}
/* Fields such as the enquiry form fade in over 0.3s; without this the first
   frame is still "hidden" and TAB would jump past them. */
html.afx-reveal .elementor-invisible * {
	transition-duration: 0s !important;
	transition-delay: 0s !important;
}

/* ── Auto-hiding header: stay on screen while something inside has focus ── */
.hide-header:focus-within {
	transform: none !important;
}

/* ── Desktop dropdowns open for keyboard users too ── */
.main-navigation .menu-item-has-children:focus-within > .sub-menu,
.hfe-nav-menu .menu-item-has-children:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
}

/* ── Respect reduced motion for focus scrolling ── */
@media (prefers-reduced-motion: reduce) {
	html.afx-keyboard {
		scroll-behavior: auto !important;
	}
}