/**
 * UI/UX Enforcement
 *
 * Last-loaded guardrails for accessibility, tap targets, and feedback states.
 *
 * @package AWE_EV_Classic
 */

:root {
	--tap-target-min: 44px;
	--color-action: #8f5d52;
	--color-action-hover: #73483f;
	--color-action-soft: #f4e7e2;
	--color-focus-accent: #3f6f73;
	--focus-ring-color: var(--color-focus-accent, #3f6f73);
	--focus-ring-shadow: rgba(63, 111, 115, 0.2);
}

:where(a[href], button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
	touch-action: manipulation;
}

:where(a[href], button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--focus-ring-color);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--focus-ring-shadow);
}

:where(.btn, button, input[type="button"], input[type="submit"], input[type="reset"], .lang-toggle, .nav-toggle-label, .faq-toggle, .hero-control, .hero-dot, .amount-pill, .frequency-pill, .back-to-top-button, .card__link, .partner-card__link, .people-filter, .pagination a, .pagination-wrapper a, .footer-social a, .social-link) {
	min-width: var(--tap-target-min);
	min-height: var(--tap-target-min);
}

.hero-carousel .hero-carousel-dots {
	gap: 1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 1px 2px !important;
	line-height: 0 !important;
}

.hero-carousel .hero-carousel-dot {
	width: 2px !important;
	min-width: 2px !important;
	height: 2px !important;
	min-height: 2px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	transform: none !important;
}

.hero-carousel .hero-carousel-dot.is-active {
	transform: none !important;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	min-height: var(--tap-target-min);
}

:where(button:disabled, input:disabled, select:disabled, textarea:disabled, .btn[aria-disabled="true"], [aria-disabled="true"]) {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

:where([aria-busy="true"], .is-loading, .loading) {
	cursor: progress;
}

:where(.form-message, .wpcf7-response-output) {
	padding: 0.9rem 1rem;
	border-radius: var(--radius-md, 0.75rem);
	border: 1px solid var(--color-border, #d4cfc5);
	background-color: var(--color-white, #ffffff);
	color: var(--color-dark, #543e34);
	font-size: 0.95rem;
	line-height: 1.5;
}

:where(.form-message--success, .wpcf7 form.sent .wpcf7-response-output, .wpcf7-mail-sent-ok) {
	border-color: var(--color-success, #a8b89c);
	background-color: rgba(168, 184, 156, 0.16);
}

:where(.form-message--warning, .wpcf7 form.spam .wpcf7-response-output) {
	border-color: var(--color-warning, #c9a87a);
	background-color: rgba(201, 168, 122, 0.16);
}

:where(.form-message--error, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7-validation-errors) {
	border-color: var(--color-error, #b37164);
	background-color: rgba(179, 113, 100, 0.14);
}

:where(.wpcf7-not-valid-tip, .field-error, .error-message) {
	display: block;
	margin-top: 0.35rem;
	color: var(--color-error, #b37164);
	font-size: 0.9rem;
	font-weight: 600;
}

:where(.wpcf7-not-valid-tip, .field-error, .error-message)::before {
	content: "Error: ";
	font-weight: 800;
}

:where(.wpcf7-form-control.wpcf7-not-valid, input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]) {
	border-color: var(--color-error, #b37164) !important;
	background-color: rgba(179, 113, 100, 0.08);
}

.btn,
.search-submit,
.event-filter-btn,
.amount-pill,
.frequency-pill,
.people-filter,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
}

.btn,
.search-submit,
.faq-search .search-submit.btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background-color: var(--color-action);
	color: var(--color-white, #ffffff);
	border-color: var(--color-action);
}

.btn:hover,
.search-submit:hover,
.faq-search .search-submit.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	background-color: var(--color-action-hover);
	border-color: var(--color-action-hover);
	color: var(--color-white, #ffffff);
}

.btn.btn--secondary,
.btn.btn--reset {
	background-color: var(--color-white, #ffffff);
	color: var(--color-action);
	border-color: rgba(143, 93, 82, 0.45);
}

.btn.btn--secondary:hover,
.btn.btn--reset:hover {
	background-color: var(--color-action-soft);
	color: var(--color-action-hover);
	border-color: var(--color-action-hover);
}

.filters-actions,
.filter-actions,
.search-form__actions,
.event-filters {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.filters-actions,
.filter-actions,
.search-form__actions {
	align-self: flex-end;
}

.filters-actions .btn,
.filter-actions .btn,
.search-form__actions .btn {
	min-width: 9.5rem;
}

.filters-group,
.filter-group,
.stories-filters__inner,
.search-form {
	align-items: flex-end;
}

.filter-field,
.stories-filters__group {
	text-align: left;
}

.filter-field label,
.stories-filters__group label {
	display: block;
	text-align: left;
}

.filter-field input[type="search"],
.filter-field select,
.search-form .search-field {
	width: 100%;
	min-width: 10rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--color-border, #d4cfc5);
	border-radius: var(--radius-md, 0.75rem);
	background-color: var(--color-white, #ffffff);
	color: var(--color-dark, #543e34);
	font: inherit;
}

.filter-field input[type="search"]:focus,
.filter-field select:focus,
.search-form .search-field:focus {
	border-color: var(--color-focus-accent);
}

.newsletter-form-wrapper {
	width: 100%;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.newsletter-form-wrapper .newsletter-form,
.newsletter-form-wrapper .wpcf7 form {
	display: grid;
	gap: 1rem;
	width: 100%;
	max-width: none;
	margin: 0;
	align-items: stretch;
}

.newsletter-form-wrapper .newsletter-form-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.85rem;
	align-items: stretch;
	width: 100%;
}

.newsletter-form-wrapper .newsletter-form-row--with-name {
	grid-template-columns: minmax(0, 1fr);
}

.newsletter-form-wrapper .newsletter-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	text-align: left;
	min-width: 0;
}

.newsletter-form-wrapper .newsletter-form-row > p,
.newsletter-form-wrapper .newsletter-form-field p,
.newsletter-form-wrapper .newsletter-helper p {
	margin: 0;
}

.newsletter-form-wrapper .newsletter-form-row > p {
	display: flex;
	align-items: end;
}

.newsletter-form-wrapper .hidden-fields-container {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.newsletter-form-wrapper label {
	font-weight: 700;
	color: var(--color-dark, #543e34);
}

.newsletter-form-wrapper input[type="text"],
.newsletter-form-wrapper input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	min-width: 0;
	border: 1px solid var(--color-border, #d4cfc5);
	border-radius: var(--radius-md, 0.75rem);
	background-color: var(--color-white, #ffffff);
	color: var(--color-dark, #543e34);
	padding: 0.75rem 0.9rem;
	font: inherit;
}

.newsletter-form-wrapper .wpcf7-form-control-wrap {
	display: block;
}

.newsletter-form-wrapper .newsletter-helper,
.newsletter-form-wrapper .newsletter-privacy-note {
	color: var(--color-muted, #6f625c);
	font-size: 0.85rem;
	line-height: 1.45;
	margin: 0;
	text-align: left;
}

.newsletter-form-wrapper .newsletter-form-submit {
	display: flex;
	align-items: end;
	width: 100%;
	min-width: 0;
}

.newsletter-form-wrapper .wpcf7-submit,
.newsletter-form-wrapper button[type="submit"] {
	width: 100%;
	min-width: 9rem;
	height: 48px;
	white-space: nowrap;
}

.newsletter-consent,
.newsletter-form-wrapper .newsletter-consent {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.55rem;
	align-items: start;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
}

.newsletter-consent input[type="checkbox"] {
	margin-top: 0.2rem;
}

.newsletter-bot-field {
	position: absolute;
	left: -5000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.newsletter-form-wrapper--sidebar .newsletter-form-row,
.newsletter-form-wrapper--home .newsletter-form-row,
.footer-newsletter-wrapper .newsletter-form-row {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
	.newsletter-form-wrapper .newsletter-form-row {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}

	.newsletter-form-wrapper .newsletter-form-row--email-only {
		grid-template-columns: minmax(18rem, 1fr) auto;
	}

	.newsletter-form-wrapper .newsletter-form-row--with-name {
		grid-template-columns: minmax(10rem, 0.9fr) minmax(16rem, 1.25fr) auto;
	}

	.newsletter-form-wrapper .newsletter-form-submit,
	.newsletter-form-wrapper button[type="submit"] {
		width: auto;
	}

	.newsletter-form-wrapper--home .newsletter-form-row--with-name,
	.newsletter-form-wrapper--home .newsletter-form-row--email-only,
	.newsletter-form-wrapper--sidebar .newsletter-form-row--with-name,
	.newsletter-form-wrapper--sidebar .newsletter-form-row--email-only,
	.footer-newsletter-wrapper .newsletter-form-row--email-only,
	.footer-newsletter-wrapper .newsletter-form-row--with-name {
		grid-template-columns: minmax(0, 1fr);
	}

	.newsletter-form-wrapper--home .newsletter-form-submit,
	.newsletter-form-wrapper--home button[type="submit"],
	.newsletter-form-wrapper--sidebar .newsletter-form-submit,
	.newsletter-form-wrapper--sidebar button[type="submit"],
	.footer-newsletter-wrapper .newsletter-form-submit,
	.footer-newsletter-wrapper button[type="submit"] {
		width: 100%;
	}
}

@media (min-width: 980px) {
	.newsletter-signup-band .newsletter-form-wrapper:not(.newsletter-form-wrapper--sidebar) .newsletter-form-row--with-name {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) auto;
	}
}

.site-main :where(.entry-content, .page-content, .intro-content, .archive-header__intro, .page-header__intro, .section__subtitle, .partners-section__subtitle, .donation-copy, .volunteer-intro, .card__body, .result-excerpt, .faq-answer-content, .newsletter-card__meta, .event-body, .event-info-card, .story-card, .project-card, .document-card, .person-card) {
	text-align: left;
}

.site-main :where(.entry-content p, .page-content p, .intro-content p, .card__body p, .result-excerpt p, .faq-answer-content p, .event-body p, .event-info-card p, .newsletter-card__meta, .archive-header__intro, .page-header__intro, .section__subtitle, .partners-section__subtitle, .donation-copy p, .volunteer-intro p, .opportunity-card__description) {
	text-align: left;
}

.site-main :where(.no-results, .no-faqs, .stories-no-results) {
	text-align: center;
}

.site-main :where(.no-results p, .no-results h2, .no-results h3, .no-faqs p, .stories-no-results p) {
	text-align: center;
}

.event-filters {
	width: fit-content;
	max-width: 100%;
}

.event-filter-btn {
	text-decoration: none;
}

.event-filter-btn.is-active {
	background-color: var(--color-action);
	color: var(--color-white, #ffffff);
}

.event-filter-btn:not(.is-active):hover {
	background-color: var(--color-action-soft);
	color: var(--color-action-hover);
}

.search-page-form {
	margin-top: 1.5rem;
	max-width: 760px;
}

.faq-search .search-form {
	flex-wrap: wrap;
	align-items: flex-end;
}

.faq-search .search-field {
	min-width: min(100%, 18rem);
}

@media (min-width: 769px) {
	.site-header .header-inner {
		display: grid;
		grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
		align-items: center;
		gap: 0.75rem 1.5rem;
		padding: 0.85rem 1.5rem 1rem;
		flex-wrap: nowrap;
	}

	.site-header .logo {
		min-width: 0;
		max-width: 360px;
	}

	.site-header .logo-image {
		width: 56px;
		height: 56px;
		object-fit: contain;
	}

	.site-header .logo-title,
	.site-header .logo-tagline {
		white-space: normal;
	}

	.site-header .main-nav {
		width: 100%;
		min-width: 0;
		align-items: stretch;
		gap: 0.55rem;
	}

	.site-header .main-nav-top {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: thin;
	}

	.site-header .main-nav-top ul {
		width: max-content;
		min-width: 100%;
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 0.55rem;
	}

	.site-header .main-nav-top a {
		padding: 0.25rem 0.05rem 0.35rem;
		font-size: 0.82rem;
		line-height: 1.25;
		white-space: nowrap;
	}

	.site-header .main-nav-bottom {
		width: 100%;
		justify-content: flex-end;
		padding-top: 0.55rem;
		border-top: 1px solid rgba(212, 207, 197, 0.65);
	}

	.site-header .main-nav__cta {
		width: 100%;
		max-width: 100%;
		justify-content: flex-end;
		align-items: center;
		gap: 0.5rem;
		flex-wrap: wrap;
		padding-right: 0.2rem;
	}

	.site-header .header-lang-switcher {
		padding: 0.1rem 0.25rem;
		border-radius: var(--radius-pill, 999px);
		background-color: rgba(244, 231, 226, 0.65);
	}

	.site-header .main-nav__cta .btn,
	.site-header .lang-toggle {
		white-space: nowrap;
	}

	.site-header .main-nav__cta .btn {
		min-height: 40px;
		padding: 0.55rem 1rem;
		font-size: 0.8rem;
	}
}

@media (max-width: 640px) {
	:where(.btn, button, input[type="button"], input[type="submit"], input[type="reset"], .card__link, .partner-card__link) {
		width: auto;
	}

	:where(.main-nav__cta .btn, .donation-button-area .btn, .filters-actions .btn, .error-buttons .btn) {
		width: 100%;
	}

	:where(.filters-actions, .filter-actions, .search-form__actions, .event-filters) {
		width: 100%;
		align-items: stretch;
	}

	:where(.filters-actions .btn, .filter-actions .btn, .search-form__actions .btn, .event-filter-btn) {
		flex: 1 1 auto;
		white-space: normal;
	}
}