/**
 * Base components: buttons, cards, badges, form fields, alerts, chips.
 * A reusable component library, not applied to any page yet — future
 * phases compose these classes rather than writing new component CSS
 * from scratch. Unclassed core WordPress form output (search form,
 * comment form, Gutenberg buttons) is also reskinned here so existing
 * templates look designed without template changes.
 */

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: none;
	font-family: var(--font-family-body);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--transition-fast) var(--ease-standard),
		border-color var(--transition-fast) var(--ease-standard),
		color var(--transition-fast) var(--ease-standard),
		box-shadow var(--transition-fast) var(--ease-standard);
}

.btn:disabled,
.btn[aria-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn--primary,
input[type='submit'],
input[type='button'],
.search-submit,
.wp-block-button__link {
	background-color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

.btn--primary:hover,
input[type='submit']:hover,
input[type='button']:hover,
.search-submit:hover,
.wp-block-button__link:hover {
	background-color: var(--color-brand-primary-hover);
	border-color: var(--color-brand-primary-hover);
	color: var(--color-text-inverse);
}

.btn--secondary {
	background-color: var(--color-brand-secondary);
	border-color: var(--color-brand-secondary);
	color: var(--color-text-inverse);
}

.btn--secondary:hover {
	background-color: var(--color-brand-secondary-hover);
	border-color: var(--color-brand-secondary-hover);
}

.btn--outline {
	background-color: transparent;
	border-color: var(--color-brand-primary);
	color: var(--color-brand-primary);
}

.btn--outline:hover {
	background-color: var(--color-primary-50);
}

.btn--ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--color-text);
}

.btn--ghost:hover {
	background-color: var(--color-gray-100);
}

/* ---------- Cards ---------- */

.card {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.card--interactive {
	transition:
		box-shadow var(--transition-base) var(--ease-standard),
		transform var(--transition-base) var(--ease-standard),
		border-color var(--transition-base) var(--ease-standard);
}

.card--interactive:hover {
	box-shadow: var(--shadow-card-hover);
	border-color: var(--color-primary-300);
	transform: translateY(-6px);
}

/* Icon "pop" on hover (Phase 2.14, docs/DECISIONS.md ADR-034) — scoped to
   the specific card components that carry a leading icon, not a blanket
   .card rule, so this doesn't reach for cards that don't have one. */
.service-card:hover .service-card__icon,
.city-card:hover .city-card__icon,
.feature-card:hover .feature-card__icon,
.info-card:hover .info-card__icon,
.caregiver-card:hover .caregiver-card__icon {
	transform: scale(1.1) rotate(-4deg);
}

.service-card__icon,
.city-card__icon,
.feature-card__icon,
.info-card__icon {
	transition: transform var(--transition-base) var(--ease-bounce);
}

/* Premium rounded corners + roomier padding, scoped to the specific card
   types this phase's brief calls out (Service/City) rather than the
   shared base .card, so every other .card consumer elsewhere in the
   theme is unaffected. */
.service-card,
.city-card,
.testimonial-card {
	border-radius: var(--radius-xl);
}

.service-card .card__body,
.city-card .card__body,
.testimonial-card .card__body {
	padding: var(--space-8);
}

.card__header {
	padding: var(--space-5) var(--space-6);
	border-block-end: 1px solid var(--color-border);
}

.card__body {
	padding: var(--space-6);
}

.card__footer {
	padding: var(--space-5) var(--space-6);
	border-block-start: 1px solid var(--color-border);
	background-color: var(--color-background-alt);
}

/* ---------- Badges ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.badge--neutral {
	background-color: var(--color-gray-100);
	color: var(--color-gray-700);
}

.badge--primary {
	background-color: var(--color-primary-100);
	color: var(--color-primary-700);
}

.badge--success {
	background-color: var(--color-success-100);
	color: var(--color-success-500);
}

.badge--warning {
	background-color: var(--color-warning-100);
	color: var(--color-warning-500);
}

.badge--danger {
	background-color: var(--color-danger-100);
	color: var(--color-danger-500);
}

.badge--info {
	background-color: var(--color-info-100);
	color: var(--color-info-500);
}

/* ---------- Form fields ---------- */

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-end: var(--space-5);
}

.form-label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
}

.form-label--required::after {
	content: ' *';
	color: var(--color-danger);
}

.form-input,
.form-textarea,
.form-select,
input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='date'],
.search-field,
textarea,
select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background-color: var(--color-background);
	color: var(--color-text);
	font-size: var(--font-size-base);
	transition:
		border-color var(--transition-fast) var(--ease-standard),
		box-shadow var(--transition-fast) var(--ease-standard);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='tel']:focus,
input[type='number']:focus,
input[type='search']:focus,
input[type='password']:focus,
input[type='date']:focus,
.search-field:focus,
textarea:focus,
select:focus {
	border-color: var(--color-brand-primary);
	box-shadow: var(--shadow-focus);
}

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

input[type='checkbox'],
input[type='radio'] {
	width: auto;
	accent-color: var(--color-brand-primary);
}

.form-help {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.form-error {
	font-size: var(--font-size-xs);
	color: var(--color-danger);
}

.form-field--error .form-input,
.form-field--error input,
.form-field--error textarea,
.form-field--error select {
	border-color: var(--color-danger);
}

/* ---------- Alerts ---------- */

.alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-normal);
}

.alert__icon {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
}

.alert__content {
	flex: 1 1 auto;
}

.alert--success {
	background-color: var(--color-success-100);
	border-color: var(--color-success-500);
	color: var(--color-success-500);
}

.alert--warning {
	background-color: var(--color-warning-100);
	border-color: var(--color-warning-500);
	color: var(--color-warning-500);
}

.alert--danger {
	background-color: var(--color-danger-100);
	border-color: var(--color-danger-500);
	color: var(--color-danger-500);
}

.alert--info {
	background-color: var(--color-info-100);
	border-color: var(--color-info-500);
	color: var(--color-info-500);
}

/* ---------- Chips ---------- */

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background-color: var(--color-gray-100);
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
}

a.chip:hover {
	border-color: var(--color-brand-primary);
	color: var(--color-brand-primary);
}

.chip--selected {
	background-color: var(--color-primary-100);
	border-color: var(--color-primary-500);
	color: var(--color-primary-700);
}

.chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	border: none;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* ---------- Accordion (FAQ Item, §23/§46) — native <details>/<summary>, no JS ----------
   Moved here from home.css in Phase 2.8 (docs/DECISIONS.md ADR-026): the
   FAQ Item component is now used by both the homepage and single-city.php,
   so its styles need to load on every page, not just is_front_page(). */

.faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.faq__item {
	padding: var(--space-2) var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-background);
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
	list-style: none;
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__icon svg {
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
	color: var(--color-brand-primary);
	transition: transform var(--transition-fast) var(--ease-standard);
	transform: rotate(90deg);
}

.faq__item[open] .faq__icon svg {
	transform: rotate(-90deg);
}

.faq__answer {
	margin: 0 0 var(--space-4);
	color: var(--color-text-muted);
}

.chip__remove:hover {
	background-color: rgba(0, 0, 0, 0.08);
}

/* ---------- Emergency Contact Note (Phase 2.10, docs/DECISIONS.md ADR-028) ----------
   Shared by Service Sidebar and City Sidebar — kept here (not
   service.css/city.css) since it's genuinely used by both. */

.emergency-contact-note {
	margin-block-end: var(--space-4);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background-color: var(--color-danger-100);
}

.emergency-contact-note__label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-1);
	color: var(--color-danger-500);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
}

.emergency-contact-note__label svg {
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
}

.emergency-contact-note__description {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}