/**
 * EPSD UI Component Library
 *
 * Reusable, design-token-driven components for use across all templates
 * and WordPress core blocks. Loaded globally on frontend and in the
 * block editor via add_editor_style().
 *
 * Sections:
 *   1. Buttons
 *   2. Form Inputs
 *   3. Selection Controls (Checkbox, Radio, Toggle)
 *   4. Links
 */

/* ══════════════════════════════════════════
   1. BUTTONS
   ══════════════════════════════════════════ */

/**
 * Base button
 * Usage: <button class="epsd-btn epsd-btn--primary">Label</button>
 *        <a class="epsd-btn epsd-btn--secondary" href="#">Label</a>
 */
.epsd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--epsd-space-xs);
	padding: var(--epsd-space-xs) var(--epsd-space-md);
	font-family: var(--epsd-font-sans);
	font-size: 0.875rem;
	font-weight: var(--epsd-font-weight-medium);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--epsd-radius-sm);
	transition:
		background-color var(--epsd-transition-fast),
		border-color var(--epsd-transition-fast),
		color var(--epsd-transition-fast);
}

.epsd-btn:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

.epsd-btn:disabled,
.epsd-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Primary ── */
.epsd-btn--primary {
	background-color: var(--epsd-interactive-primary);
	color: var(--epsd-interactive-primary-text);
	border-color: var(--epsd-interactive-primary);
}

.epsd-btn--primary:hover {
	background-color: var(--epsd-accent-primary);
	border-color: var(--epsd-accent-primary);
	color: var(--epsd-color-green-900);
}

.epsd-btn--primary:active {
	background-color: var(--epsd-interactive-primary-active);
	border-color: var(--epsd-interactive-primary-active);
}

/* ── Secondary ── */
.epsd-btn--secondary {
	background-color: var(--epsd-interactive-secondary);
	color: var(--epsd-interactive-secondary-text);
	border-color: var(--epsd-interactive-secondary-border);
}

.epsd-btn--secondary:hover {
	background-color: var(--epsd-interactive-secondary-hover);
}

/* ── Gold / Accent ── */
.epsd-btn--gold {
	background-color: var(--epsd-accent-primary);
	color: var(--epsd-color-green-900);
	border-color: var(--epsd-accent-primary);
}

.epsd-btn--gold:hover {
	background-color: var(--epsd-accent-hover);
	border-color: var(--epsd-accent-hover);
}

/* ── Ghost ── */
.epsd-btn--ghost {
	background-color: transparent;
	color: var(--epsd-text-link);
	border-color: transparent;
}

.epsd-btn--ghost:hover {
	color: var(--epsd-text-link-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Size: Small ── */
.epsd-btn--sm {
	padding: var(--epsd-space-2xs) var(--epsd-space-sm);
	font-size: 0.8125rem;
}

/* ── Size: Large ── */
.epsd-btn--lg {
	padding: var(--epsd-space-sm) var(--epsd-space-xl);
	font-size: 1rem;
	font-weight: var(--epsd-font-weight-semibold);
}

/* WordPress core Button block hover override (CSS layer) */
.wp-block-button__link:hover {
	background-color: var(--epsd-accent-primary);
	border-color: var(--epsd-accent-primary);
	color: var(--epsd-color-green-900);
}

/* ══════════════════════════════════════════
   2. FORM INPUTS
   ══════════════════════════════════════════ */

/* ── Label ── */
.epsd-label {
	display: block;
	font-family: var(--epsd-font-sans);
	font-size: var(--epsd-fluid-sm);
	font-weight: var(--epsd-font-weight-semibold);
	color: var(--epsd-text-primary);
	margin-bottom: var(--epsd-space-2xs);
}

.epsd-label--required::after {
	content: ' *';
	color: var(--epsd-status-error-text);
	font-weight: var(--epsd-font-weight-normal);
}

/* ── Form Group ── */
.epsd-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--epsd-space-2xs);
}

/* ── Hint & Error text ── */
.epsd-form-hint {
	font-family: var(--epsd-font-sans);
	font-size: var(--epsd-fluid-xs);
	color: var(--epsd-text-secondary);
	margin: 0;
}

.epsd-form-error {
	font-family: var(--epsd-font-sans);
	font-size: var(--epsd-fluid-xs);
	color: var(--epsd-status-error-text);
	margin: 0;
}

/* ── Base input shared styles ── */
.epsd-input,
.epsd-textarea,
.epsd-select {
	display: block;
	width: 100%;
	padding: var(--epsd-space-xs) var(--epsd-space-md);
	font-family: var(--epsd-font-sans);
	font-size: var(--epsd-fluid-md);
	font-weight: var(--epsd-font-weight-normal);
	color: var(--epsd-text-primary);
	background-color: var(--epsd-surface-primary);
	border: 1px solid var(--epsd-border-default);
	border-radius: var(--epsd-radius-sm);
	transition: border-color var(--epsd-transition-fast);
	appearance: none;
	-webkit-appearance: none;
}

.epsd-input::placeholder,
.epsd-textarea::placeholder {
	color: var(--epsd-text-secondary);
	font-weight: var(--epsd-font-weight-normal);
}

.epsd-input:hover,
.epsd-textarea:hover,
.epsd-select:hover {
	border-color: var(--epsd-border-strong);
}

.epsd-input:focus,
.epsd-textarea:focus,
.epsd-select:focus {
	outline: var(--epsd-focus-ring);
	outline-offset: 0;
	border-color: var(--epsd-interactive-primary);
}

.epsd-input:disabled,
.epsd-textarea:disabled,
.epsd-select:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background-color: var(--epsd-surface-secondary);
}

/* Error state */
.epsd-input--error,
.epsd-textarea--error,
.epsd-select--error {
	border-color: var(--epsd-status-error-border);
	background-color: var(--epsd-status-error-bg);
}

.epsd-input--error:focus,
.epsd-textarea--error:focus,
.epsd-select--error:focus {
	border-color: var(--epsd-status-error-border);
}

/* ── Textarea ── */
.epsd-textarea {
	resize: vertical;
	min-height: 120px;
	line-height: var(--epsd-line-height-normal);
}

/* ── Select ── */
.epsd-select {
	padding-right: var(--epsd-space-2xl);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2354565a' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--epsd-space-sm) center;
	background-size: 16px;
	cursor: pointer;
}

/* ── Search ── */
.epsd-search {
	display: block;
	width: 100%;
	padding: var(--epsd-space-xs) var(--epsd-space-md) var(--epsd-space-xs) var(--epsd-space-2xl);
	font-family: var(--epsd-font-sans);
	font-size: var(--epsd-fluid-md);
	font-weight: var(--epsd-font-weight-normal);
	color: var(--epsd-text-primary);
	background-color: var(--epsd-surface-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354565a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: var(--epsd-space-sm) center;
	background-size: 16px;
	border: 1px solid var(--epsd-border-default);
	border-radius: var(--epsd-radius-sm);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color var(--epsd-transition-fast);
}

.epsd-search::placeholder {
	color: var(--epsd-text-secondary);
}

.epsd-search:hover {
	border-color: var(--epsd-border-strong);
}

.epsd-search:focus {
	outline: var(--epsd-focus-ring);
	outline-offset: 0;
	border-color: var(--epsd-interactive-primary);
}

.epsd-search::-webkit-search-cancel-button {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354565a' stroke-width='2'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 16px;
	cursor: pointer;
}

/* ══════════════════════════════════════════
   3. SELECTION CONTROLS
   ══════════════════════════════════════════ */

/* ── Shared label wrapper ── */
.epsd-checkbox-label,
.epsd-radio-label {
	display: inline-flex;
	align-items: center;
	gap: var(--epsd-space-xs);
	font-family: var(--epsd-font-sans);
	font-size: var(--epsd-fluid-sm);
	color: var(--epsd-text-primary);
	cursor: pointer;
}

.epsd-checkbox-label:has(:disabled),
.epsd-radio-label:has(:disabled) {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ── Checkbox ── */
.epsd-checkbox {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: var(--epsd-surface-primary);
	border: 1.5px solid var(--epsd-border-strong);
	border-radius: var(--epsd-radius-sm);
	cursor: pointer;
	transition: background-color var(--epsd-transition-fast), border-color var(--epsd-transition-fast);
}

.epsd-checkbox:hover {
	border-color: var(--epsd-interactive-primary);
}

.epsd-checkbox:checked {
	background-color: var(--epsd-interactive-primary);
	border-color: var(--epsd-interactive-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.epsd-checkbox:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

/* ── Radio ── */
.epsd-radio {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: var(--epsd-surface-primary);
	border: 1.5px solid var(--epsd-border-strong);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color var(--epsd-transition-fast), box-shadow var(--epsd-transition-fast);
}

.epsd-radio:hover {
	border-color: var(--epsd-interactive-primary);
}

.epsd-radio:checked {
	border-color: var(--epsd-interactive-primary);
	box-shadow: inset 0 0 0 4px var(--epsd-interactive-primary), inset 0 0 0 9px var(--epsd-surface-primary);
}

.epsd-radio:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

/* ── Toggle Switch ── */

/**
 * Markup:
 * <label class="epsd-toggle-label">
 *   <input type="checkbox" class="epsd-toggle" role="switch" />
 *   <span class="epsd-toggle__track" aria-hidden="true"></span>
 *   Enable notifications
 * </label>
 */
.epsd-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: var(--epsd-space-xs);
	font-family: var(--epsd-font-sans);
	font-size: var(--epsd-fluid-sm);
	color: var(--epsd-text-primary);
	cursor: pointer;
}

.epsd-toggle-label:has(.epsd-toggle:disabled) {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Visually hidden actual input — use sr-only pattern */
.epsd-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Track */
.epsd-toggle__track {
	display: block;
	flex-shrink: 0;
	position: relative;
	width: 40px;
	height: 22px;
	background-color: var(--epsd-border-strong);
	border-radius: var(--epsd-radius-full);
	transition: background-color var(--epsd-transition-fast);
}

/* Thumb (::before) */
.epsd-toggle__track::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background-color: var(--epsd-color-white);
	border-radius: 50%;
	box-shadow: var(--epsd-shadow-sm);
	transition: transform var(--epsd-transition-fast);
}

/* Checked state */
.epsd-toggle:checked + .epsd-toggle__track {
	background-color: var(--epsd-interactive-primary);
}

.epsd-toggle:checked + .epsd-toggle__track::before {
	transform: translateX(18px);
}

/* Focus ring on track */
.epsd-toggle:focus-visible + .epsd-toggle__track {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

/* ══════════════════════════════════════════
   4. LINKS
   ══════════════════════════════════════════ */

/* ── Base ── */
.epsd-link {
	color: var(--epsd-text-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--epsd-transition-fast), text-decoration-thickness var(--epsd-transition-fast);
}

.epsd-link:hover {
	color: var(--epsd-text-link-hover);
	text-decoration-thickness: 2px;
}

.epsd-link:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
	border-radius: var(--epsd-radius-sm);
}

/* ── Nav ── */
.epsd-link--nav {
	color: var(--epsd-text-primary);
	text-decoration: none;
}

.epsd-link--nav:hover {
	color: var(--epsd-text-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── External ── */
.epsd-link--external::after {
	content: ' \2197';
	font-size: 0.75em;
	vertical-align: super;
}

/* ── Muted ── */
.epsd-link--muted {
	color: var(--epsd-text-secondary);
	text-decoration: underline;
	text-decoration-color: var(--epsd-border-default);
	text-underline-offset: 2px;
}

.epsd-link--muted:hover {
	color: var(--epsd-text-primary);
	text-decoration-color: var(--epsd-border-strong);
}

/* Astra bleed resets moved to assets/css/astra-bleed-resets.css — see that
   file's header for the decision pattern. They live in a separate stylesheet
   so the file name documents the intent. */

/* ══════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.epsd-btn,
	.epsd-input,
	.epsd-textarea,
	.epsd-select,
	.epsd-search,
	.epsd-checkbox,
	.epsd-radio,
	.epsd-toggle__track,
	.epsd-toggle__track::before,
	.epsd-link {
		transition: none;
	}
}