/* =========================================================================
 * HK Base — House Kit design tokens + utility classes
 * =========================================================================
 * Per-site theme overrides: put redefined --hk-* variables in
 *   Appearance → Customize → Additional CSS
 * Everything below is brand-neutral by default.
 * =======================================================================*/

:root {
	/* Colour tokens — default greyscale + a placeholder accent.
	   Override per-site in Additional CSS. */
	--hk-ink:           #1a1a1a;
	--hk-muted:         #5a5a5a;
	--hk-accent:        #b8182f;
	--hk-accent-dark:   #8f1324;
	--hk-accent-soft:   #fbf5ed;
	--hk-surface:       #ffffff;
	--hk-surface-alt:   #f6f5f2;
	--hk-line:          #e5dfd2;
	--hk-inverse:       #1a1a1a;       /* background for inverse sections */
	--hk-inverse-ink:   #ffffff;        /* text on inverse sections */

	/* Spacing scale (rem) */
	--hk-space-xs:  .5rem;
	--hk-space-sm:  1rem;
	--hk-space-md:  1.5rem;
	--hk-space-lg:  3rem;
	--hk-space-xl:  5rem;
	--hk-space-2xl: 7rem;

	/* Type scale */
	--hk-text-xs:   0.75rem;
	--hk-text-sm:   0.875rem;
	--hk-text-base: 1rem;
	--hk-text-lg:   1.125rem;
	--hk-text-xl:   1.5rem;
	--hk-text-2xl:  2rem;
	--hk-text-3xl:  3rem;
	--hk-text-4xl:  4rem;

	/* Other tokens */
	--hk-radius-sm:   2px;
	--hk-radius-md:   6px;
	--hk-radius-lg:   14px;
	--hk-shadow-sm:   0 1px 2px rgba(0,0,0,.06);
	--hk-shadow-md:   0 8px 24px rgba(0,0,0,.08);
	--hk-transition:  .15s ease;

	/* Layout widths */
	--hk-container-narrow: 720px;
	--hk-container-wide:   1180px;
}

/* -------------------------------------------------------------------------
 * Sections (padding rhythm + background variants)
 * Apply to any container block via globalClasses.
 * ---------------------------------------------------------------------- */
.hk-section-sm  { padding-top: var(--hk-space-lg); padding-bottom: var(--hk-space-lg); padding-left: var(--hk-space-md); padding-right: var(--hk-space-md); }
.hk-section-md  { padding-top: var(--hk-space-xl); padding-bottom: var(--hk-space-xl); padding-left: var(--hk-space-md); padding-right: var(--hk-space-md); }
.hk-section-lg  { padding-top: var(--hk-space-2xl); padding-bottom: var(--hk-space-2xl); padding-left: var(--hk-space-md); padding-right: var(--hk-space-md); }

.hk-section-accent  { background-color: var(--hk-accent-soft); }
.hk-section-muted   { background-color: var(--hk-surface-alt); }
.hk-section-inverse { background-color: var(--hk-inverse); color: var(--hk-inverse-ink); }
.hk-section-inverse a { color: var(--hk-inverse-ink); }

/* -------------------------------------------------------------------------
 * Inner containers
 * ---------------------------------------------------------------------- */
.hk-container-narrow,
.hk-container-wide {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.hk-container-narrow { max-width: var(--hk-container-narrow); }
.hk-container-wide   { max-width: var(--hk-container-wide); }

/* -------------------------------------------------------------------------
 * Typography utilities
 * ---------------------------------------------------------------------- */
.hk-eyebrow {
	font-size: var(--hk-text-xs);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hk-accent);
	margin-bottom: var(--hk-space-xs);
}
.hk-display {
	font-size: var(--hk-text-4xl);
	line-height: 1.05;
	font-weight: 700;
	margin: 0 0 var(--hk-space-md);
}
@media (max-width: 768px) { .hk-display { font-size: var(--hk-text-3xl); } }

.hk-heading {
	font-size: var(--hk-text-2xl);
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 var(--hk-space-sm);
}
.hk-body {
	font-size: var(--hk-text-base);
	line-height: 1.65;
	color: var(--hk-ink);
}
.hk-text-muted { color: var(--hk-muted); }

/* -------------------------------------------------------------------------
 * Buttons — always apply to an <a> (GB element with tagName=a) or GB button
 * ---------------------------------------------------------------------- */
.hk-btn-primary,
.hk-btn-ghost,
.hk-btn-inverse {
	display: inline-block;
	padding: .85rem 1.75rem;
	border-radius: var(--hk-radius-sm);
	font-weight: 600;
	font-size: var(--hk-text-sm);
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color var(--hk-transition), color var(--hk-transition), transform var(--hk-transition);
	cursor: pointer;
}
.hk-btn-primary {
	background-color: var(--hk-accent);
	color: var(--hk-inverse-ink);
	border-color: var(--hk-accent);
}
.hk-btn-primary:hover,
.hk-btn-primary:focus {
	background-color: var(--hk-accent-dark);
	border-color: var(--hk-accent-dark);
	color: var(--hk-inverse-ink);
	transform: translateY(-1px);
}
.hk-btn-ghost {
	background: transparent;
	color: var(--hk-ink);
	border-color: var(--hk-ink);
}
.hk-btn-ghost:hover,
.hk-btn-ghost:focus {
	background-color: var(--hk-ink);
	color: var(--hk-inverse-ink);
}
.hk-btn-inverse {
	background-color: var(--hk-surface);
	color: var(--hk-ink);
	border-color: var(--hk-surface);
}
.hk-btn-inverse:hover,
.hk-btn-inverse:focus { opacity: .9; }

/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */
.hk-card {
	background-color: var(--hk-surface);
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-radius-md);
	padding: var(--hk-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--hk-space-xs);
}
.hk-card-hover {
	transition: transform var(--hk-transition), box-shadow var(--hk-transition);
}
.hk-card-hover:hover,
.hk-card-hover:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--hk-shadow-md);
}

/* -------------------------------------------------------------------------
 * Header / footer / sidebar bits — only the obvious reusable shapes
 * ---------------------------------------------------------------------- */
.hk-header-bar {
	/* small announcement bar above the primary nav */
	background-color: var(--hk-inverse);
	color: var(--hk-inverse-ink);
	font-size: var(--hk-text-xs);
	padding: .5rem var(--hk-space-md);
	text-align: center;
	letter-spacing: .06em;
}

.hk-footer-meta {
	/* bottom-of-footer line: copyright, legal links, socials */
	font-size: var(--hk-text-xs);
	color: var(--hk-muted);
	border-top: 1px solid var(--hk-line);
	padding-top: var(--hk-space-md);
	margin-top: var(--hk-space-md);
}

.hk-sidebar-card {
	/* for GP sidebar widget styling */
	background-color: var(--hk-surface);
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-radius-md);
	padding: var(--hk-space-md);
	margin-bottom: var(--hk-space-md);
}

/* -------------------------------------------------------------------------
 * Small helpers
 * ---------------------------------------------------------------------- */
.hk-text-center  { text-align: center; }
.hk-gap-md       { gap: var(--hk-space-md); }
.hk-mt-lg        { margin-top: var(--hk-space-lg); }
.hk-mb-lg        { margin-bottom: var(--hk-space-lg); }