/*
Theme Name:   GeneratePress D&D Caring Hearts Child
Theme URI:    https://ddcaringhearts.com/
Description:  Child theme for D&D's Caring Hearts. Custom front page built with ACF Pro, in a warm, trustworthy senior-care design system.
Author:       Kilo
Template:     generatepress
Version:      1.0.0
Text Domain:  generatepress-ddch
*/

/**
 * Site-wide design tokens (warm-trust palette, type, spacing, radius,
 * shadow). Defined here so the header/footer branding below — and the
 * homepage section stylesheets in assets/css/ — share one source of truth.
 */
:root {
	--ddch-ivory: #fbf8f3;
	--ddch-cream: #f3efe7;
	--ddch-white: #ffffff;
	--ddch-sage: #6e8b74;
	--ddch-sage-dark: #4f6b57;
	--ddch-teal: #276e6c;
	--ddch-terracotta: #d99b7c;
	--ddch-terracotta-dark: #c47c58;
	--ddch-terracotta-darker: #96603f;
	--ddch-peach: #e6b59e;
	--ddch-charcoal: #2b2a28;
	--ddch-ink: #33322f;
	--ddch-muted: #6b675f;

	--ddch-font-heading: "Fraunces", Georgia, serif;
	--ddch-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--ddch-radius-lg: 20px;
	--ddch-radius: 16px;
	--ddch-radius-sm: 12px;
	--ddch-radius-pill: 999px;

	--ddch-shadow: 0 24px 48px -24px rgba(43, 42, 40, 0.28);
	--ddch-shadow-sm: 0 12px 28px -14px rgba(43, 42, 40, 0.2);

	/*
	 * `--ddch-teal` was darkened from the original #2e7d7b to #276e6c (and
	 * `--ddch-terracotta-darker` added) during a WCAG AA contrast sweep:
	 * teal-on-cream measured 4.22:1 (fails 4.5:1) at the original value;
	 * #276e6c measures 5.18:1 on cream / 5.61:1 on ivory / 5.94:1 on white,
	 * a safe margin everywhere teal is used as text. Teal is never used as
	 * a background color, so darkening it cannot regress contrast anywhere.
	 * `--ddch-terracotta-darker` exists solely as an AA-safe alternative to
	 * `--ddch-terracotta-dark` for white-text-on-background uses (that pair
	 * only reaches 3.30:1); see assets/css/homepage-base.css button rules.
	 */

	--ddch-section-pad: clamp(3.5rem, 3rem + 2vw, 6rem);
	--ddch-container-max: 1200px;
	--ddch-container-pad: clamp(1.25rem, 1rem + 2vw, 2.5rem);

	--ddch-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------------------------------------------------- */
/* Global header / text-based wordmark (applies to every page)           */
/* ----------------------------------------------------------------------- */

.site-header {
	background-color: var(--ddch-white);
	border-bottom: 1px solid rgba(43, 42, 40, 0.08);
}

.inside-header {
	padding-block: 1rem;
}

/*
 * The custom logo image already carries the full "D&D's Caring Hearts"
 * wordmark, so GeneratePress's separate text site title (and tagline,
 * were one set) next to it is redundant — hide both and let the logo
 * image stand alone. The title link is purely decorative here (the logo
 * image is already wrapped in its own link to the homepage), so hiding
 * it loses no functionality.
 */
.main-title,
.site-description {
	display: none;
}

/*
 * Custom logo image (Customizer "Site Identity" > Logo). GeneratePress
 * prints the uploaded attachment's real width/height as HTML attributes
 * (2560x815 for our source file) and only caps it with `max-width: 100%`
 * — with nothing narrower than the full-bleed header row to shrink
 * against, the browser renders the logo at full native resolution.
 * Constrain it explicitly here instead of relying on the Customizer's
 * "Logo Width" field (`generate_settings[logo_width]`), so the fix lives
 * in version control rather than mutable theme_mod state. Sized generously
 * (vs. a typical ~48px header logo) since the logo artwork itself carries
 * small-caps wordmark text ("D&D's CARING HEARTS") that needs to stay
 * legible at header scale.
 */
.site-header .header-image {
	width: auto;
	height: auto;
	max-width: 280px;
	max-height: 68px;
}

.main-navigation,
.main-navigation .inside-navigation {
	background-color: transparent;
}

.main-navigation #primary-menu.main-nav > ul > li > a {
	font-family: var(--ddch-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--ddch-ink);
}

.main-navigation #primary-menu.main-nav > ul > li > a:hover,
.main-navigation #primary-menu.main-nav > ul > li.current-menu-item > a,
.main-navigation #primary-menu.main-nav > ul > li.current_page_item > a {
	color: var(--ddch-teal);
}

.main-navigation .menu-toggle {
	color: var(--ddch-charcoal);
}

.main-navigation .menu-toggle .mobile-menu {
	font-family: var(--ddch-font-body);
	font-weight: 600;
}

a.skip-link.screen-reader-text:focus {
	background-color: var(--ddch-charcoal);
	color: var(--ddch-white) !important;
	padding: 0.75rem 1.25rem;
	border-radius: var(--ddch-radius-sm);
	z-index: 100000;
}