/*
Theme Name:   LoveMsgs Child
Theme URI:    https://lovemsgs.com
Description:  Minimal Kadence child theme for LoveMsgs.com. Scoped deliberately narrow (Step 3 of the Phase 2C/3 sprint): design tokens, typography, spacing, and focus states only. All interactive behavior (the Love Messages Wheel, etc.) lives in the lovemsgs-core plugin, not here - this theme should never need to ship JavaScript.
Author:       LoveMsgs
Author URI:   https://lovemsgs.com
Template:     kadence
Version:      0.2.0
Text Domain:  lovemsgs-child
*/

/*
 * This file intentionally does NOT redefine the --lm-* design tokens -
 * those are owned by lovemsgs-core's assets/css/core.css (loaded first,
 * site-wide, by the plugin) so there is exactly one source of truth for
 * color/type/spacing values. This file only APPLIES those tokens to
 * Kadence's own structural chrome (body copy, headings, links, the
 * site header/footer wrappers Kadence renders) so the parent theme's
 * default look matches the LoveMsgs visual language without touching
 * Kadence's core files or needing Kadence Blocks (Step 4 - not installed).
 */

body {
	background-color: var(--lm-bg-primary, #120710);
	color: var(--lm-text-on-dark, #f3e6e0);
	font-family: var(--lm-font-body, 'Hanken Grotesk', sans-serif);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--lm-font-display, 'Cormorant Garamond', serif);
	color: var(--lm-text-heading-on-dark, #e9c894);
}

a {
	color: var(--lm-accent, #e9c894);
}

a:hover,
a:focus {
	color: var(--lm-accent-soft, #e2b9c8);
}

/* Site header / footer wrappers that Kadence renders around page content -
   kept dark/editorial to match the rest of the site rather than Kadence's
   light default. Scoped to Kadence's own structural classes only. */
.site-header,
.site-footer,
.entry-content {
	background-color: var(--lm-bg-primary, #120710);
}

/* Spacing scale applied to Kadence's default content width wrapper so
   native pages built in later steps inherit consistent rhythm without
   each one redeclaring padding. */
.content-area {
	padding-top: var(--lm-space-lg, 2.5rem);
	padding-bottom: var(--lm-space-lg, 2.5rem);
}

/* FIX (found during Step 14 live QA, 2026-09-12): Kadence's own compiled
 * theme CSS sets a more specific default text color on block content
 * (h1-h6 and p/li computed to dark navy/gray - #1a202c / #2d3748) than the
 * plain-tag `body`/`h1..h6` rules above can override. Because .entry-content
 * itself is already forced dark (--lm-bg-primary, above - by design, to
 * match the site's dark editorial look), the net effect on EVERY page that
 * contains plain, hand-typed paragraph or heading content directly in the
 * WordPress editor - not wrapped in one of lovemsgs-core's own shortcode
 * components, which set their own light text color locally - is dark text
 * on a near-black background: unreadable. Confirmed live on the *already
 * published* Privacy page (id 18) as well as the new Daily Love Message and
 * Shop pages, so this was not a new-content-only issue - it has been live
 * and illegible on at least one production-bound page this whole sprint.
 *
 * Fixed by re-asserting the light tokens with !important, scoped ONLY to
 * elements that are DIRECT children of .entry-content (or direct
 * grandchildren for list items / blockquote text). Every lovemsgs-core
 * shortcode wrapper (.lm-wheel-wrapper, .lm-write-room, .lm-pause-tool,
 * .lm-daily-message, .lm-unspoken-letters, .lm-crisis-support) renders as
 * ONE direct child of .entry-content and everything those components style
 * lives at least one level deeper - so this fix cannot reach into and
 * override any component's own carefully-chosen internal colors (e.g. a
 * button's dark text on hover, or a soft-rose accent label). It only
 * catches plain content typed straight into the block editor, which is
 * exactly and only what needed catching. */
.entry-content > p,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > ul > li,
.entry-content > ol > li,
.entry-content > blockquote,
.entry-content > blockquote > p,
.entry-content > .wp-block-group > p,
.entry-content > .wp-block-group > h1,
.entry-content > .wp-block-group > h2,
.entry-content > .wp-block-group > h3,
.entry-content > .wp-block-columns .wp-block-column > p {
	color: var(--lm-text-on-dark, #f3e6e0) !important;
}

.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > .wp-block-group > h1,
.entry-content > .wp-block-group > h2,
.entry-content > .wp-block-group > h3 {
	color: var(--lm-text-heading-on-dark, #e9c894) !important;
}

/* Accessible focus states - same token the plugin uses, applied globally
   so keyboard navigation is consistent whether you're inside a
   lovemsgs-core component or plain Kadence/theme markup. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--lm-focus-ring, 0 0 0 3px rgba(233, 200, 148, 0.55));
}

/* Reduced motion: defer to the same global rule lovemsgs-core's core.css
   defines (see that file) - not redeclared here to avoid two competing
   definitions. Kadence's own transitions already respect the OS-level
   prefers-reduced-motion setting via this theme's inherited body styles. */