/**
 * Hello Pro Child — main stylesheet.
 *
 * 1. Design tokens   — read Elementor Global Colors/Fonts, with fallbacks
 * 2. Base            — small additions on top of Hello's reset
 * 3. Components      — classes used by custom widgets and templates
 * 4. Utilities       — single-purpose helpers
 *
 * Colours and fonts are set in Elementor > Site Settings. Elementor prints
 * them as CSS variables (--e-global-color-primary, etc.), so this file reads
 * them instead of repeating hex values. Change a colour in Site Settings and
 * both Elementor and this CSS update together.
 */

/* 1. Design tokens -------------------------------------------------------- */
:root {
	--hpc-color-primary: var(--e-global-color-primary, #1f3a5f);
	--hpc-color-secondary: var(--e-global-color-secondary, #4a6fa5);
	--hpc-color-text: var(--e-global-color-text, #1e1e1e);
	--hpc-color-accent: var(--e-global-color-accent, #e07a2f);
	--hpc-color-surface: #ffffff;
	--hpc-color-border: #e3e6ea;

	--hpc-font-heading: var(--e-global-typography-primary-font-family, system-ui), sans-serif;
	--hpc-font-body: var(--e-global-typography-text-font-family, system-ui), sans-serif;

	--hpc-radius: 8px;
	--hpc-space-1: 0.5rem;
	--hpc-space-2: 1rem;
	--hpc-space-3: 1.5rem;
	--hpc-space-4: 2rem;
	--hpc-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.06);
	--hpc-transition: 200ms ease;
}

/* 2. Base ----------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Visible keyboard focus everywhere; Hello's reset is minimal here. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--hpc-color-accent);
	outline-offset: 2px;
}

img {
	height: auto;
	max-width: 100%;
}

/* 3. Components ----------------------------------------------------------- */

/* Info Card widget (inc/widgets/class-hpc-info-card.php) */
.hpc-card {
	--hpc-card-accent: var(--hpc-color-accent);

	background: var(--hpc-color-surface);
	border: 1px solid var(--hpc-color-border);
	border-top: 4px solid var(--hpc-card-accent);
	border-radius: var(--hpc-radius);
	box-shadow: var(--hpc-shadow);
	padding: var(--hpc-space-4);
	transition: transform var(--hpc-transition), box-shadow var(--hpc-transition);
}

.hpc-card:hover {
	transform: translateY(-2px);
}

.hpc-card__title {
	color: var(--hpc-color-primary);
	font-family: var(--hpc-font-heading);
	margin: 0 0 var(--hpc-space-1);
}

.hpc-card__text {
	color: var(--hpc-color-text);
	font-family: var(--hpc-font-body);
	margin: 0 0 var(--hpc-space-2);
}

.hpc-card__link {
	color: var(--hpc-card-accent);
	font-weight: 600;
	text-decoration: none;
}

.hpc-card__link:hover {
	text-decoration: underline;
}

/* 4. Utilities ------------------------------------------------------------ */
.hpc-visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}