/* Horotiu Homestead base styles. Uses tokens.css only. */

body {
	background: var(--hh-paper);
	color: var(--hh-ink);
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title,
.elementor-heading-title {
	font-family: var(--hh-font-display);
	font-weight: 400;
	color: var(--hh-forest);
	line-height: 1.12;
	letter-spacing: -0.005em;
	text-wrap: balance;
}
h1 { font-size: var(--hh-h1); }
h2 { font-size: var(--hh-h2); }
h3 { font-size: var(--hh-h3); }
h4 { font-size: var(--hh-h4); }
.elementor-widget-heading h1.elementor-heading-title { font-size: var(--hh-h1); }
.elementor-widget-heading h2.elementor-heading-title { font-size: var(--hh-h2); }
.elementor-widget-heading h3.elementor-heading-title { font-size: var(--hh-h3); }
.elementor-widget-heading h4.elementor-heading-title { font-size: var(--hh-h4); }

h5, h6 {
	font-family: var(--hh-font-body);
	font-weight: 600;
	color: var(--hh-forest);
}

p { max-width: 68ch; }

a { color: var(--hh-leaf); text-underline-offset: 3px; }
a:hover { color: var(--hh-forest); }

::selection { background: var(--hh-gold-light); color: var(--hh-forest-deep); }

/* Small lead-in line above a heading. Sentence case, only where it adds meaning. */
.hh-kicker,
.hh-kicker .elementor-heading-title {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	font-weight: 600;
	color: var(--hh-gold-ink);
	letter-spacing: 0;
	margin-bottom: var(--hh-space-2);
}

/* Buttons */
.hh-btn,
.elementor-button,
.ast-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hh-space-2);
	padding: 0.9em 1.6em;
	border: 1px solid var(--hh-forest);
	border-radius: var(--hh-radius-sm);
	background: var(--hh-forest);
	color: var(--hh-paper);
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--hh-ease), color 0.2s var(--hh-ease), border-color 0.2s var(--hh-ease);
}
.hh-btn:hover,
.elementor-button:hover,
.ast-button:hover {
	background: var(--hh-forest-deep);
	border-color: var(--hh-forest-deep);
	color: var(--hh-white);
}
.hh-btn--gold,
.hh-btn-gold .elementor-button {
	background: var(--hh-gold);
	border-color: var(--hh-gold);
	color: var(--hh-forest-deep);
}
.hh-btn--gold:hover,
.hh-btn-gold .elementor-button:hover {
	background: var(--hh-gold-light);
	border-color: var(--hh-gold-light);
	color: var(--hh-forest-deep);
}
.hh-btn--ghost,
.hh-btn-ghost .elementor-button {
	background: transparent;
	color: var(--hh-forest);
}
.hh-btn--ghost:hover,
.hh-btn-ghost .elementor-button:hover {
	background: var(--hh-forest);
	color: var(--hh-paper);
}
.elementor .hh-btn-text .elementor-button {
	background: none;
	border: 0;
	padding: 0;
	color: var(--hh-forest);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--hh-gold);
}
.elementor .hh-btn-text .elementor-button:hover { background: none; color: var(--hh-leaf); }

/* Form fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	border: 1px solid var(--hh-line);
	border-radius: var(--hh-radius-sm);
	background: var(--hh-white);
	color: var(--hh-ink);
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-base);
	padding: 0.7em 0.85em;
	transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--hh-leaf);
	box-shadow: 0 0 0 3px rgba(63, 107, 79, 0.18);
}

:focus-visible { outline: 2px solid var(--hh-gold); outline-offset: 3px; }

/* Astra adjustments: let our pages own the layout. */
.ast-separate-container,
.ast-plain-container,
.ast-page-builder-template { background: var(--hh-paper); }
.ast-page-builder-template .site-content > .ast-container { max-width: 100%; padding: 0; }

.hh-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}