/**
 * Accessibility corrections (WCAG 2.1 AA).
 *
 * Loaded after style.css and matching its selectors, so equal specificity
 * resolves here. Nothing in this file needs !important.
 *
 * Each rule below fixes a measured failure rather than a matter of taste; the
 * ratio is recorded next to it so a future change can tell whether it is about
 * to break something that was deliberate.
 *
 * The brand orange is NOT replaced wholesale. #e85d04 measures 3.50:1 on white,
 * which is a pass for large text, borders, icons and other non-text contrast
 * (all need 3:1) and a fail only for normal-size text (4.5:1). So the orange
 * stays everywhere it is legal, and --primary-strong — computed in
 * inc/customizer.php by darkening whatever primary is set until it clears
 * 4.5:1 — is used only where small text is involved. With the stock brand
 * colour that lands on #c85003 at 4.56:1: the same orange, slightly deeper.
 */

/* ---------------------------------------------------------------------------
 * 1.4.3 Contrast — button labels
 *
 * .btn is 14px (.875rem), which is normal text, not large text, so white on it
 * needs 4.5:1. On the stock orange that was 3.50:1 — and it applied to every
 * call to action on the site, including Book a Reservation and Submit
 * Reservation. Hover keeps using --primary-dark, which is darker still.
 * ------------------------------------------------------------------------ */
.btn-primary {
	background: var(--primary-strong, #c85003);
}

/* ---------------------------------------------------------------------------
 * 1.4.3 Contrast — small orange text on white
 *
 * The uppercase section labels (Discover, Right Now, Why Choose Us) are 14px
 * at weight 600 in --primary: 3.50:1. The hero pretitle is excluded on purpose
 * — it uses --accent over a dark image, where it measures 10.46:1.
 * ------------------------------------------------------------------------ */
.section-header .pretitle,
.about-content .pretitle {
	color: var(--primary-strong, #c85003);
}

/* ---------------------------------------------------------------------------
 * 1.4.3 Contrast — links in body copy
 *
 * style.css sets `a{color:var(--primary)}` globally, which is 3.50:1 on white.
 * Scoped to prose rather than fixed on the bare `a` rule on purpose: the same
 * orange is used for links in the footer and inside hero sections, where it sits
 * on --secondary or a darkened photo and measures around 5:1 — correct already,
 * and darkening it there would make it worse, not better.
 *
 * .btn-outline is deliberately left alone for the same reason: it only ever
 * appears inside a hero, over a dark image.
 * ------------------------------------------------------------------------ */
.post-content a,
.entry-content a,
.comment-content a,
.single-post-content p a {
	color: var(--primary-strong, #c85003);
}

/* ---------------------------------------------------------------------------
 * 2.4.7 Focus Visible — form fields
 *
 * style.css sets `outline:none` on :focus for every input, select and textarea
 * and replaces it with a border tint plus a 10%-opacity glow, which is close to
 * invisible. That is the booking form: the one place a keyboard user most needs
 * to know where they are.
 *
 * The outline is restored on :focus-visible, so it appears for keyboard users
 * without drawing a ring around a field somebody merely clicked. The soft glow
 * is kept and strengthened rather than removed, because it reads as a pleasant
 * "this field is active" cue for everyone.
 * ------------------------------------------------------------------------ */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
	outline: 2px solid var(--primary-strong, #c85003);
	outline-offset: 2px;
	border-color: var(--primary-strong, #c85003);
	box-shadow: 0 0 0 3px rgba(200, 80, 3, .22);
}

/* Mouse users keep the original, quieter treatment. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: var(--primary-strong, #c85003);
	box-shadow: 0 0 0 3px rgba(200, 80, 3, .18);
}

/* ---------------------------------------------------------------------------
 * 2.5.8 Target Size (WCAG 2.2 AA, 24x24)
 *
 * The mobile menu button was a 25x19px target — three 3px bars with two 5px
 * gaps — which is the single most important control on a phone. Padding brings
 * the tappable area up without moving the bars themselves, so nothing shifts
 * visually. The negative margin cancels the padding's effect on layout.
 * ------------------------------------------------------------------------ */
.nav-toggle {
	padding: 12px;
	margin: -12px;
}

/* ---------------------------------------------------------------------------
 * Mobile: stop iOS zooming the page when a field is focused.
 *
 * Safari auto-zooms any input whose font-size is below 16px, which on a booking
 * form throws the layout sideways mid-typing. 16px is the whole fix.
 * ------------------------------------------------------------------------ */
@media (max-width: 782px) {
	.form-group input,
	.form-group select,
	.form-group textarea {
		font-size: 16px;
	}
}