/*
 * Healing Chapters Premium — component refinements.
 * Hover states, shadows and rhythm that theme.json alone can't express.
 * Purely presentational; does not change any editable content.
 */

html {
	scroll-behavior: smooth;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Site header: give the "Healing Chapters Foundation" brand mark real
 * presence at the top of every page, with a soft separation from the hero.
 */
header.wp-block-template-part {
	background: var(--wp--preset--color--background, #FAF6F0);
	border-bottom: 1px solid rgba(75, 42, 99, 0.1);
	box-shadow: 0 4px 16px rgba(43, 20, 56, 0.05);
	position: relative;
	z-index: 10;
}

.wp-block-site-logo img {
	border-radius: 10px;
}

.wp-block-site-title a {
	color: var(--wp--preset--color--foreground, #2A2130);
	text-decoration: none;
}

.wp-block-site-tagline {
	color: var(--wp--preset--color--secondary, #B8923F);
}

header.wp-block-template-part .wp-block-navigation {
	--wp--style--block-gap: 1.75rem;
}

header.wp-block-template-part .wp-block-navigation-item a {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground, #2A2130);
	text-decoration: none;
}

header.wp-block-template-part .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--primary, #4B2A63);
}

/*
 * Site footer: note the organization's nonprofit status beneath the brand
 * mark, small and understated.
 */
footer.wp-block-template-part {
	border-top: 1px solid rgba(75, 42, 99, 0.1);
}

.hc-footer__ein {
	margin: 0.35rem 0 0;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--secondary, #B8923F);
}

/*
 * WordPress core ships a default "Vivid Purple" / "Cyan bluish gray" color
 * in its built-in palette. Theme.json can't override core-origin palette
 * slugs by matching slug name, so we repaint those utility classes here
 * directly (matching the higher-specificity + !important core uses).
 */
body .has-vivid-purple-color {
	color: #4B2A63 !important;
}

body .has-vivid-purple-background-color {
	background-color: #4B2A63 !important;
}

body .has-cyan-bluish-gray-color {
	color: #D9BF8A !important;
}

body .has-cyan-bluish-gray-background-color {
	background-color: #D9BF8A !important;
}

/*
 * The deep plum background is dark enough that default body text (a dark
 * charcoal) becomes unreadable on it. Any text inside a vivid-purple
 * section that doesn't already set its own explicit color should default
 * to white, matching the site's original design intent for these sections.
 */
.has-vivid-purple-background-color {
	color: #fff;
}

.has-vivid-purple-background-color a:not(.wp-block-button__link) {
	color: #fff;
	opacity: 0.9;
}

.has-vivid-purple-background-color a:not(.wp-block-button__link):hover {
	opacity: 1;
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	font-size: 0.8125rem;
	box-shadow: 0 4px 14px rgba(75, 42, 99, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(75, 42, 99, 0.38);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	box-shadow: none;
}

/* ---------- Links ---------- */
a {
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* ---------- Separators ---------- */
.wp-block-separator {
	position: relative;
	border: none;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(75, 42, 99, 0.35), transparent);
	overflow: visible;
}

.wp-block-separator::after {
	content: "";
	position: absolute;
	top: -3.5px;
	left: 50%;
	transform: translateX(-50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
}

/* ---------- Images: soft rounding for a more designed feel ---------- */
.wp-block-image img,
.wp-block-media-text__media img {
	border-radius: 8px;
}

/* Avatars / circular photos should stay circular. */
.hc-board__photo,
.is-style-rounded img {
	border-radius: 50% !important;
}