/**
 * D&D's Caring Hearts — Homepage design tokens + shared utilities.
 *
 * Loaded first (see functions.php), after the child theme's style.css
 * (which defines the shared :root palette/type/spacing tokens used
 * site-wide for header/footer branding). This file adds the homepage-only
 * base type and the small set of reusable building blocks (container,
 * buttons, cards, icon badges, eyebrow/section headings, media & avatar
 * placeholders, scroll-reveal animation base) shared by every section.
 *
 * @package generatepress-ddch
 */

/* ----------------------------------------------------------------------- */
/* Base type — applied while the homepage assets are enqueued            */
/* ----------------------------------------------------------------------- */

body.home {
	background-color: var(--ddch-ivory);
	color: var(--ddch-ink);
	font-family: var(--ddch-font-body);
	font-size: 1.125rem;
	line-height: 1.7;
}

body.home img {
	max-width: 100%;
	display: block;
}

body.home a {
	color: var(--ddch-teal);
}

body.home a:focus-visible,
body.home button:focus-visible {
	/*
	 * "currentColor" instead of a fixed "--ddch-teal": a hardcoded teal
	 * outline measures a healthy 5.61:1 against light backgrounds (ivory)
	 * but only 1.01:1 against "--ddch-sage-dark" (primary/secondary button
	 * backgrounds) and the dark ".ddch-cta-band" — both fail the WCAG
	 * 1.4.11 3:1 non-text-contrast minimum, making the focus ring nearly
	 * invisible there. Every text color already used on this page was
	 * verified during the AA contrast sweep to reach >=4.5:1 against its
	 * own background, so borrowing that color for the outline via
	 * "currentColor" guarantees the ring is always visible wherever the
	 * underlying text already is. (The footer was dark when this note was
	 * written; it's since been switched to a light background — see
	 * ".ddch-footer" in homepage-sections-c.css.)
	 */
	outline: 3px solid currentColor;
	outline-offset: 3px;
	border-radius: 4px;
}

/* ----------------------------------------------------------------------- */
/* Layout primitives                                                      */
/* ----------------------------------------------------------------------- */

.ddch-container {
	max-width: var(--ddch-container-max);
	margin-inline: auto;
	padding-inline: var(--ddch-container-pad);
}

.ddch-eyebrow {
	font-family: var(--ddch-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddch-teal);
	margin: 0 0 0.75rem;
}

.ddch-section-title {
	font-family: var(--ddch-font-heading);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ddch-charcoal);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	margin: 0 0 1rem;
}

.ddch-section-head {
	max-width: 640px;
	margin: 0 0 2.5rem;
}

.ddch-section-head.ddch-section-head--center {
	margin-inline: auto;
	text-align: center;
}

/* Visually hidden; available to screen readers and used for heading hierarchy. */
.ddch-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ----------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ----------------------------------------------------------------------- */

.ddch-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ddch-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--ddch-radius-pill);
	padding: 0.9rem 1.75rem;
	border: 2px solid transparent;
	transition: transform 0.2s var(--ddch-ease), background-color 0.2s var(--ddch-ease), color 0.2s var(--ddch-ease), border-color 0.2s var(--ddch-ease);
	cursor: pointer;
	min-height: 48px;
}

/*
 * Compounded with ".ddch-btn" (e.g. ".ddch-btn.ddch-btn--primary") so these
 * color declarations reach specificity (0,2,0) — otherwise "body.home a"
 * in the base type rules above, at (0,1,2), silently overrides the
 * intended text color whenever a button is rendered as an <a> (which is
 * true for nearly every CTA on this site). Confirmed via computed-style
 * contrast checks: without this, ".ddch-btn--primary" rendered at a
 * 1.29:1 ratio (teal text on sage) and ".ddch-btn--ghost" at 3.57:1 —
 * both well under the WCAG AA 4.5:1 minimum for normal-weight button text.
 *
 * The specificity fix alone was not enough: white text on the *intended*
 * "--ddch-sage" background only reaches 3.74:1, and white on
 * "--ddch-terracotta-dark" (the original hover color) only reaches 3.30:1 —
 * both still fail AA. Swapped to "--ddch-sage-dark" (5.88:1) and the
 * AA-only "--ddch-terracotta-darker" token (5.20:1) below.
 */
.ddch-btn.ddch-btn--primary {
	background-color: var(--ddch-sage-dark);
	color: var(--ddch-white);
	border-color: var(--ddch-sage-dark);
}

.ddch-btn.ddch-btn--primary:hover,
.ddch-btn.ddch-btn--primary:focus-visible {
	background-color: var(--ddch-terracotta-darker);
	border-color: var(--ddch-terracotta-darker);
	color: var(--ddch-white);
	transform: translateY(-2px);
}

.ddch-btn.ddch-btn--ghost {
	background-color: transparent;
	color: var(--ddch-white);
	border-color: rgba(255, 255, 255, 0.55);
}

.ddch-btn.ddch-btn--ghost:hover,
.ddch-btn.ddch-btn--ghost:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: var(--ddch-white);
	transform: translateY(-2px);
}

.ddch-btn.ddch-btn--secondary {
	background-color: transparent;
	color: var(--ddch-sage-dark);
	border-color: var(--ddch-sage);
}

.ddch-btn.ddch-btn--secondary:hover,
.ddch-btn.ddch-btn--secondary:focus-visible {
	/* "--ddch-sage" gives only 3.74:1 with white text (fails AA); swapped
	   to "--ddch-sage-dark" (5.88:1) — see ".ddch-btn--primary" comment above. */
	background-color: var(--ddch-sage-dark);
	color: var(--ddch-white);
}

/* ----------------------------------------------------------------------- */
/* Cards + icon badges                                                    */
/* ----------------------------------------------------------------------- */

.ddch-card {
	background-color: var(--ddch-white);
	border-radius: var(--ddch-radius);
	box-shadow: var(--ddch-shadow-sm);
	padding: 2rem;
	transition: transform 0.25s var(--ddch-ease), box-shadow 0.25s var(--ddch-ease);
}

.ddch-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ddch-shadow);
}

.ddch-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--ddch-radius-sm);
	background-color: var(--ddch-cream);
	color: var(--ddch-sage-dark);
	margin-bottom: 1.25rem;
}

.ddch-icon-badge .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
}

.ddch-icon-badge--sm {
	width: 44px;
	height: 44px;
	margin-bottom: 0.75rem;
}

.ddch-icon-badge--sm .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.ddch-card__title {
	font-family: var(--ddch-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--ddch-charcoal);
}

.ddch-card__text {
	color: var(--ddch-muted);
	font-size: 1rem;
	margin: 0;
}

.ddch-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 1rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--ddch-teal);
	text-decoration: none;
}

.ddch-card__link:hover {
	/* "--ddch-terracotta-dark" text on white only reaches 3.30:1 (fails AA);
	   swapped to "--ddch-terracotta-darker" (5.20:1). */
	color: var(--ddch-terracotta-darker);
}

/* ----------------------------------------------------------------------- */
/* Media + avatar placeholders                                            */
/* ----------------------------------------------------------------------- */

.ddch-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--ddch-radius-lg);
}

.ddch-media-placeholder {
	width: 100%;
	height: 100%;
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(155deg, var(--ddch-cream) 0%, var(--ddch-peach) 100%);
	color: var(--ddch-sage-dark);
	border-radius: var(--ddch-radius-lg);
}

.ddch-media-placeholder .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	opacity: 0.6;
}

.ddch-avatar,
.ddch-avatar-placeholder {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.ddch-avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	/* "--ddch-sage" gives only 3.74:1 with white initials text (fails AA
	   at this weight/size); swapped to "--ddch-sage-dark" (5.88:1). */
	background-color: var(--ddch-sage-dark);
	color: var(--ddch-white);
	font-family: var(--ddch-font-heading);
	font-weight: 600;
	font-size: 1.125rem;
}

/* ----------------------------------------------------------------------- */
/* Scroll-reveal animation base (see homepage.js for the trigger)         */
/*                                                                         */
/* Progressive enhancement: [data-animate] elements are fully visible by  */
/* default — the safe baseline for no-JS, slow-JS, or JS-error scenarios. */
/* The hidden-then-reveal state only activates under "html.ddch-js",     */
/* a class added synchronously in <head> (see functions.php) before body */
/* paint, once JS has actually run and the observer in homepage.js can   */
/* guarantee every element will be revealed.                             */
/* ----------------------------------------------------------------------- */

[data-animate] {
	opacity: 1;
	transform: none;
}

/*
 * ":not(.is-visible)" keeps this rule's specificity from ever out-ranking
 * the "[data-animate].is-visible" reveal rule below — without it, the
 * added "html" type selector here (0,2,1) beats ".is-visible" (0,2,0) and
 * elements stay stuck at opacity:0 forever even after JS marks them
 * revealed.
 */
html.ddch-js [data-animate]:not(.is-visible) {
	opacity: 0;
	transition: opacity 0.7s var(--ddch-ease), transform 0.7s var(--ddch-ease);
	will-change: opacity, transform;
}

html.ddch-js [data-animate="fade-up"]:not(.is-visible) {
	transform: translateY(28px);
}

html.ddch-js [data-animate="fade-in"]:not(.is-visible) {
	transform: translateY(0);
}

[data-animate].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.ddch-js [data-animate]:not(.is-visible) {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ddch-card:hover,
	.ddch-btn:hover {
		transform: none;
	}
}