/**
 * WDF — Wave C a11y polish CSS
 * Loaded via wdf-wave-c-a11y.php.
 *
 * Research basis:
 *  - WCAG 2.2 SC 2.4.13 Focus Appearance: "focus indicator must have a minimum area of
 *    2 CSS pixels around the perimeter" (https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html)
 *  - WCAG 2.2 SC 2.5.8 Target Size (Minimum): "target size of at least 24 by 24 CSS pixels
 *    except when there is equivalent alternative or spacing" (https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
 *  - WCAG 2.1 SC 1.4.10 Reflow: "content can be presented without loss at 320 CSS pixels
 *    width without two-dimensional scrolling" (https://www.w3.org/WAI/WCAG21/Understanding/reflow.html)
 *  - Bootstrap focus research: Deque axe-core rule `button-name` and `focus-order-semantics`
 *
 * Load order: loaded AFTER ayecode-ui/bootstrap.css so our selectors win on specificity or
 *  !important overrides. Loaded late via `wp_enqueue_scripts` priority 100.
 */

/* ========== SC 2.4.13 Focus Appearance — visible outline on all interactive elements ========== */

/* Bootstrap buttons override the browser default outline; restore with equivalent visual weight. */
.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
	outline: 3px solid #d4a853 !important;  /* brand orange = primary accent */
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(212,168,83, 0.25) !important;
}

/* Form controls: Bootstrap uses `outline: 0` + box-shadow alone. Add a real outline. */
.form-select:focus-visible,
.form-check-input:focus-visible,
.form-control:focus-visible,
.form-control-plaintext:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid #d4a853 !important;
	outline-offset: 1px !important;
}

/* Keyboard-only navigation — ensure main search input has a visible focus ring. */
.wdf-ss-input:focus,
.wdf-ss-input:focus-visible {
	outline: 2px solid #d4a853 !important;
	outline-offset: 2px !important;
}

/* ========== SC 2.5.8 Target Size Minimum (24×24 CSS pixels) ========== */

/* Breadcrumb links were measured at 15.5px tall — pad to reach 24px effective hitbox.
   Spacing alternative per WCAG: 24px target OR 24px between targets. Padding ensures both. */
.breadcrumb-item a,
nav.gd-breadcrumbs a,
.yoast-breadcrumb a,
[class*="breadcrumb"] a {
	display: inline-block !important;
	min-height: 24px !important;
	padding: 4px 2px !important;
	line-height: 1.2 !important;
}

/* Logo link target-size note:
   `.wdf-nav-logo` is a flex container with a 44×44 SVG mark inside — the SVG itself already
   satisfies SC 2.5.8 (24×24 minimum). Originally I forced `display: inline-block + min-height:44px`
   here but that broke the original flex layout (SVG stacked above text instead of side-by-side,
   pushing logo to 87px tall > 72px nav). Reverted — the flex layout's intrinsic 44px height
   is enough.
   For other brand anchors that use image-only logos (.navbar-brand without an inner flex), the
   44px minimum still applies. */
a.wdf-logo,
.navbar-brand:not(.wdf-nav-logo) {
	display: inline-block !important;
	min-height: 44px !important;
	padding: 6px 0 !important;
	line-height: 1 !important;
}

/* Listing card links — boost to at least 24px tall via padding. */
.wdfhp-card-name a,
.wdfhp-card a[href*="/places/"] {
	min-height: 24px !important;
	padding: 2px 0 !important;
}

/* ========== SC 1.4.10 Reflow — prevent 320px horizontal scroll ========== */

/* Homepage compare block overflowed by 35px at 320px viewport. */
@media (max-width: 520px) {
	.wdfhp-compare,
	.wdfhp-compare-head {
		overflow-x: auto !important;
		max-width: 100vw !important;
		-webkit-overflow-scrolling: touch;
	}
	.wdfhp-about-cols,
	.wdfhp-inner {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* ========== SC 1.3.1 Info and Relationships — comparison table semantics ========== */

/* `.wdf-compare` should have proper table semantics; when using div grids, add ARIA.
   This is visual-only a11y marker — JS or template-level fix in Wave F for full solution. */
.wdf-compare[role="table"] > .wdf-compare-row {
	display: contents;  /* preserves grid layout while allowing table semantics */
}