/* =====================================================================
   Touch-optimized interactive elements — Story US-003
   Buttons, links, form inputs, CTAs sized and spaced for thumbs.

   Builds on assets/css/responsive.css (loaded first). Rules here are
   intentionally SITE-WIDE and forward-compatible: they are keyed on HTML5
   input types and shared form/button classes so that forms added by later
   features (contact form, appointment booking, service request) inherit
   touch-friendly sizing automatically — no per-form CSS required.

   Guarantees:
     • >= 44x44px tap target on every interactive element
     • >= 8px spacing between adjacent tappable elements
     • 16px input font-size (prevents iOS focus auto-zoom)
     • labels stacked above inputs on mobile for easier tapping
     • full-width submit / CTA buttons below 768px
     • visible :focus-visible and :active feedback on touch
   ===================================================================== */

:root {
	/* Minimum comfortable gap between two adjacent tap targets. */
	--mytheme-tap-gap: 0.75rem; /* 12px — comfortably above the 8px floor */
}

/* =====================================================================
   1. Universal minimum tap target
   Any control the user taps must clear 44x44px, even icon-only ones.
   ===================================================================== */
a.mytheme-btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.wp-element-button {
	min-height: var(--mytheme-touch);
	min-width: var(--mytheme-touch);
}

/* Inline text links inside body copy keep their natural size, but stand-alone
   action links get a generous vertical hit area without changing layout. */
.entry__content a,
.post-card__meta a,
.entry__meta a {
	padding-block: 2px;
}

/* =====================================================================
   2. Touch feedback — :focus-visible outline + :active press state
   :hover is unreliable on touch, so every control also confirms the tap
   with a subtle press transform.
   ===================================================================== */
a.mytheme-btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.wp-element-button,
.search-submit,
.page-numbers {
	transition: background var(--mytheme-duration) var(--mytheme-ease),
		border-color var(--mytheme-duration) var(--mytheme-ease),
		transform var(--mytheme-duration) var(--mytheme-ease),
		box-shadow var(--mytheme-duration) var(--mytheme-ease);
	touch-action: manipulation; /* removes the 300ms tap delay on mobile */
}

a.mytheme-btn:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
.wp-block-button__link:active,
.wp-element-button:active,
.search-submit:active,
.page-numbers:not(.current):active {
	transform: translateY(0) scale(0.97);
}

/* Consistent, always-visible focus ring for keyboard AND switch/AT users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.mytheme-btn:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--mytheme-accent);
	outline-offset: 2px;
}

/* =====================================================================
   3. Form controls — big, legible, stacked labels
   Applies to the search form, the comment form and any future
   contact / appointment / service-request forms.
   ===================================================================== */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
select,
textarea {
	width: 100%;
	min-height: var(--mytheme-touch);
	padding: 0.65rem 0.9rem;
	/* 16px keeps mobile Safari from zooming the viewport on focus. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--mytheme-ink);
	background: var(--mytheme-surface);
	border: 1px solid var(--mytheme-border);
	border-radius: var(--mytheme-radius-sm);
	transition: border-color var(--mytheme-duration) var(--mytheme-ease),
		box-shadow var(--mytheme-duration) var(--mytheme-ease);
	-webkit-appearance: none;
	appearance: none;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
	border-color: var(--mytheme-accent);
	box-shadow: 0 0 0 3px rgba(200, 40, 30, 0.15);
	outline: none;
}

/* Labels sit ABOVE their input so the tap target for the field is unbroken
   and never squeezed into a narrow inline column on small screens. */
.comment-form label,
.mytheme-form label,
.contact-form label,
.appointment-form label,
.service-request-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Vertical rhythm between fields guarantees >= 8px between adjacent targets. */
.comment-form p,
.mytheme-form .form-row,
.contact-form .form-row,
.appointment-form .form-row {
	margin: 0 0 1.15rem;
}

.required {
	color: var(--mytheme-accent);
}

/* Checkbox / radio rows: keep the box compact but extend the tap area across
   the whole label so it clears 44px in height. */
.comment-form-cookies-consent label,
.mytheme-form .checkbox-row label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--mytheme-touch);
	margin-bottom: 0;
	font-weight: 400;
}

.comment-form-cookies-consent input[type="checkbox"],
.mytheme-form input[type="checkbox"],
.mytheme-form input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--mytheme-accent);
}

/* =====================================================================
   4. Submit / CTA buttons — full width on mobile, auto on larger screens
   ===================================================================== */
.comment-form .submit,
.mytheme-form [type="submit"],
.contact-form [type="submit"],
.appointment-form [type="submit"],
.service-request-form [type="submit"],
.mytheme-btn--block {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--mytheme-touch);
}

/* Ensure the comment submit button carries the primary button styling even
   though WordPress prints it as a bare <input type="submit">. */
.comment-form .submit {
	padding: 0.7rem 1.4rem;
	border: 2px solid var(--mytheme-accent);
	border-radius: var(--mytheme-radius-sm);
	background: var(--mytheme-accent);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}

.comment-form .submit:hover,
.comment-form .submit:focus {
	background: var(--mytheme-accent-dark);
	border-color: var(--mytheme-accent-dark);
}

@media (min-width: 768px) {
	.comment-form .submit,
	.mytheme-form [type="submit"],
	.contact-form [type="submit"],
	.appointment-form [type="submit"],
	.service-request-form [type="submit"],
	.mytheme-btn--block {
		width: auto;
	}
}

/* =====================================================================
   5. Spacing between adjacent tappable elements (>= 8px)
   ===================================================================== */
.mytheme-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mytheme-tap-gap);
	align-items: center;
}

/* On mobile, stacked CTA groups become full-width so each is easy to hit. */
@media (max-width: 767px) {
	.mytheme-btn-group {
		flex-direction: column;
		align-items: stretch;
	}

	.mytheme-btn-group > .mytheme-btn {
		width: 100%;
	}
}

/* Fallback gap for two buttons/links placed side by side without a group. */
.mytheme-btn + .mytheme-btn {
	margin-left: var(--mytheme-tap-gap);
}

@media (max-width: 767px) {
	.mytheme-btn + .mytheme-btn {
		margin-left: 0;
		margin-top: var(--mytheme-tap-gap);
	}
}

/* Map / directions link: a real tappable pill rather than a bare text link. */
.mytheme-directions-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--mytheme-touch);
	padding: 0.6rem 1.1rem;
	border-radius: var(--mytheme-radius-sm);
	background: var(--mytheme-bg);
	border: 1px solid var(--mytheme-border);
	font-weight: 600;
	text-decoration: none;
}

.mytheme-directions-link:hover,
.mytheme-directions-link:focus {
	border-color: var(--mytheme-accent);
}

/* =====================================================================
   6. Search form — give the field and button equal, tappable heights
   (extends the .error-404 search rules to the default get_search_form()).
   ===================================================================== */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.search-form .search-field {
	flex: 1 1 220px;
}

.search-form .search-submit {
	min-height: var(--mytheme-touch);
	padding: 0 1.25rem;
	border: 0;
	border-radius: var(--mytheme-radius-sm);
	background: var(--mytheme-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	width: auto;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
	background: var(--mytheme-accent-dark);
}

/* =====================================================================
   7. Comment form container rhythm
   ===================================================================== */
.comment-respond,
#respond {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--mytheme-border);
}

.comment-form-comment textarea {
	min-height: 9rem;
}

/* =====================================================================
   8. Reduced motion — drop the press transform for users who opt out
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	a.mytheme-btn,
	button,
	input[type="submit"],
	input[type="button"],
	.wp-block-button__link,
	.search-submit,
	.page-numbers {
		transition: none;
	}

	a.mytheme-btn:active,
	button:active,
	input[type="submit"]:active,
	.search-submit:active,
	.page-numbers:active {
		transform: none;
	}
}