/*
Theme Name:   New Day for Christians
Theme URI:    https://newdayforchristians.com
Description:  Child theme of Kadence for New Day for Christians — a faith-based blog and speaking site. Carries the brand palette, Cormorant Garamond + Jost typography, and the one-page section styles. All contrast values are corrected to WCAG AA for a 40–60 readership.
Author:       Moruwa Consulting
Template:     kadence
Version:      1.0.5
Text Domain:  newday
*/

/* ==========================================================================
   1. TOKENS
   Brand colors exactly as supplied, plus the support colors the design
   depends on, plus contrast-corrected variants used ONLY for small text.
   ========================================================================== */

:root {
	/* Brand */
	--nd-blush:        #f3bbba;
	--nd-peach:        #feab65;
	--nd-peach-light:  #fecda0;
	--nd-burnt:        #e1400d;
	--nd-coral:        #fb606b;
	--nd-brown:        #854734;
	--nd-burgundy:     #830c1e;
	--nd-sage:         #b3c47c;
	--nd-forest:       #457112;

	/* Support */
	--nd-cream:        #fdf0ef;
	--nd-warm-white:   #fff8f7;
	--nd-text-dark:    #2a1510;
	--nd-text-mid:     #5a3a30;
	--nd-input-border: #e8d5d0;
	--nd-deep-brown:   #5a2e1e;
	--nd-deep-forest:  #2a4509;
	--nd-border:       rgba(225, 64, 13, 0.15);

	/* Contrast-corrected. Small text only — headings, backgrounds and
	   large type use the unmodified brand values above. */
	--nd-burnt-text:   #cc3a0c; /* 4.52:1 on cream, 4.79:1 on warm white */
	--nd-burnt-btn:    #d93e0d; /* 4.52:1 against white button text */
	--nd-text-light:   #8d6658; /* 4.52:1 on cream, 4.80:1 on warm white */

	/* Alphas raised to clear AA on dark grounds */
	--nd-on-dark:      rgba(255, 255, 255, 0.92);
	--nd-on-dark-soft: rgba(255, 255, 255, 0.71);
	--nd-on-dark-mute: rgba(255, 255, 255, 0.61);
	--nd-on-peach:     rgba(83, 23, 10, 0.77);

	/* Type */
	--nd-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--nd-sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Rhythm */
	--nd-pad-y:  100px;
	--nd-pad-x:  80px;
	--nd-gap:    80px;

	/* Readability floor. The source design used 0.7rem (11.2px) for meta
	   text; for a 40–60 audience that is too small. 0.8rem is the floor. */
	--nd-meta:   0.8rem;
}

/* ==========================================================================
   1b. GUTENBERG PLUMBING
   Core Group blocks sometimes render their children directly and sometimes
   wrap them in .wp-block-group__inner-container, depending on the block's
   layout attribute and the WordPress version. `display: contents` makes
   that wrapper transparent so the grid works either way — otherwise the
   two-column sections silently collapse to one column.
   ========================================================================== */

/* WordPress wraps Group-block children in a container div whose class
   name varies by version and by the block's layout attribute — and a
   raw HTML block sits as a direct child with no wrapper at all. That
   mix means a grid can end up with one real column and one wrapped
   column, which stacks instead of sitting side by side.

   Rather than guess the wrapper's class name, neutralise ANY child div
   that isn't one of ours. `display: contents` makes it vanish from the
   box tree so its children become grid items directly. */
.nd-hero > div:not([class*="nd-hero-"]),
.nd-about > div:not(.nd-about-image-wrap):not(.nd-about-content),
.nd-speak > div:not(.nd-speak-intro):not(.nd-form-card),
.nd-devotional-inner > div:not(.nd-book):not(.nd-devotional-content),
.nd-topics > div:not(.nd-topic),
.nd-footer-inner > div:not([class*="nd-footer-col"]) {
	display: contents;
}

/* Full-bleed sections — DO NOT set width, max-width or margins here.
   Kadence's Fullwidth page layout stretches .alignfull by applying a
   negative inline margin sized to the content container's padding.
   Two earlier attempts both fought that and lost:

     v1.0.2  added `margin-inline: calc(50% - 50vw)` on top of Kadence's
             negative margin — double-applied, pushing sections half a
             screen left.
     v1.0.3  removed the margin but left `max-width: 100%`. That capped
             the element at the CONTENT width while Kadence's negative
             left margin still pulled it left, so sections ended up
             offset by roughly their own padding and clipped on the left.

   The correct amount of intervention here is none. Kadence already does
   this properly; the sideways-scroll guard lives on <body> instead. */

/* THE GUTTER FIX — measured, not guessed.
   Console readout from the live site (viewport 1729):

     BLOG  | left 0 right 1729 w 1729 | ml -32px mr -32px pl 0px
     SPEAK | left 0 right 1729 w 1729 | ml -32px mr -32px pl 0px
     parent <div.entry-content-wrap> | pl 32px

   The full-bleed is perfect: -32px margins exactly cancel the parent's
   32px padding, so each section spans 0 → 1729. Nothing was ever wrong
   with the positioning — I spent three versions "fixing" a bug that
   wasn't there.

   The real fault is `pl 0px`. Kadence zeroes horizontal padding on
   .alignfull children of .entry-content, and that rule outranks a bare
   `.nd-blog { padding: ... }`. With no padding, text starts hard against
   the window edge — which reads as "cut off".

   Doubling the class raises specificity to 0,3,0, enough to win without
   reaching for !important. */
.entry-content .nd-about.nd-about,
.entry-content .nd-devotional.nd-devotional,
.entry-content .nd-blog.nd-blog,
.entry-content .nd-speak.nd-speak,
.entry-content .nd-newsletter.nd-newsletter {
	padding-left: var(--nd-pad-x);
	padding-right: var(--nd-pad-x);
}

/* Same treatment for the hero's inner column, in case Kadence reaches
   that far down. */
.entry-content .nd-hero .nd-hero-left {
	padding-left: var(--nd-pad-x);
	padding-right: 60px;
}

/* Core blocks bring their own margins; the section padding already handles
   rhythm, so strip the doubled spacing. */
.nd-hero p,
.nd-about p,
.nd-devotional p,
.nd-speak p,
.nd-newsletter p,
.nd-hero h1,
.nd-hero h2,
.nd-about h2,
.nd-devotional h2,
.nd-speak h2 {
	margin-top: 0;
}

/* The editor renders Group blocks with a min-height that can distort the
   preview; only apply the hero's viewport height on the front end. */
body:not(.block-editor-page) .nd-hero {
	min-height: 100vh;
}

/* Build-time placeholders. Deliberately loud — if one of these ever reaches
   the live site, it should be impossible to miss rather than quietly wrong. */
.nd-placeholder {
	background: repeating-linear-gradient(45deg, #fff0b3, #fff0b3 12px, #ffe680 12px, #ffe680 24px);
	border: 2px dashed var(--nd-burnt);
	color: #5a4500 !important;
	padding: 20px;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	border-radius: 4px;
	margin: 16px 0;
}

.nd-read-all-wrap {
	margin: 0;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body,
.entry-content,
.content-area {
	font-family: var(--nd-sans);
	color: var(--nd-text-dark);
	background: var(--nd-warm-white);
}

body {
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.nd-serif {
	font-family: var(--nd-serif);
	color: var(--nd-brown);
	font-weight: 300;
	line-height: 1.15;
}

h1 em, h2 em, h3 em,
.entry-title em {
	font-style: italic;
	color: var(--nd-burnt);
	font-weight: 400;
}

p {
	line-height: 1.8;
	color: var(--nd-text-mid);
}

a {
	color: var(--nd-burnt-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--nd-burgundy);
}

/* Visible keyboard focus everywhere. The source design removed outlines
   on form fields and never replaced them. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--nd-burnt);
	outline-offset: 2px;
}

/* ==========================================================================
   3. SHARED SECTION FURNITURE
   ========================================================================== */

.nd-section {
	padding: var(--nd-pad-y) var(--nd-pad-x);
}

.nd-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--nd-sans);
	font-size: var(--nd-meta);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--nd-burnt-text);
	margin-bottom: 16px;
}

.nd-eyebrow::before {
	content: '';
	width: 28px;
	height: 1px;
	background: var(--nd-burnt);
	flex: none;
}

.nd-title {
	font-family: var(--nd-serif);
	font-size: clamp(2.2rem, 4vw, 3.6rem);
	font-weight: 300;
	color: var(--nd-brown);
	line-height: 1.15;
	margin-bottom: 20px;
}

.nd-sub {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--nd-text-mid);
	max-width: 560px;
}

.nd-divider {
	width: 60px;
	height: 1px;
	background: var(--nd-peach);
	margin-bottom: 24px;
}

/* On dark grounds, the eyebrow flips to peach-light (7.10:1 on burgundy). */
.nd-on-dark .nd-eyebrow {
	color: var(--nd-peach-light);
}

.nd-on-dark .nd-eyebrow::before {
	background: var(--nd-peach-light);
}

.nd-on-dark .nd-title,
.nd-on-dark h2 {
	color: #fff;
}

.nd-on-dark p {
	color: var(--nd-on-dark-soft);
}

/* ==========================================================================
   4. BUTTONS

   Buttons arrive in two shapes on this site:
     a) a plain <a class="nd-btn nd-btn-primary"> inside an HTML block
     b) a core Button block, where the classes land on the WRAPPER div and
        the actual link is a child <a class="wp-block-button__link">

   All visual styling therefore targets the ELEMENT that is really the
   button — never the bare class, which would style the wrapper in case (b)
   and let the base `a { color: … }` rule repaint the label. That produced
   burnt-orange text on a burnt-orange background: an invisible button.
   ========================================================================== */

/* Case (b): the wrapper is layout only. */
div.nd-btn {
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
}

a.nd-btn,
button.nd-btn,
div.nd-btn > .wp-block-button__link {
	display: inline-block;
	font-family: var(--nd-sans);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 32px;
	border-radius: 2px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.25s, border-color 0.25s, transform 0.25s, color 0.25s;
}

a.nd-btn-primary,
button.nd-btn-primary,
div.nd-btn-primary > .wp-block-button__link {
	background: var(--nd-burnt-btn);
	border-color: var(--nd-burnt-btn);
	color: #fff;
}

a.nd-btn-primary:hover,
a.nd-btn-primary:focus,
div.nd-btn-primary > .wp-block-button__link:hover,
div.nd-btn-primary > .wp-block-button__link:focus {
	background: var(--nd-burgundy);
	border-color: var(--nd-burgundy);
	color: #fff;
	transform: translateY(-1px);
}

a.nd-btn-secondary,
button.nd-btn-secondary,
div.nd-btn-secondary > .wp-block-button__link {
	background: transparent;
	border-color: var(--nd-brown);
	color: var(--nd-brown);
}

a.nd-btn-secondary:hover,
a.nd-btn-secondary:focus,
div.nd-btn-secondary > .wp-block-button__link:hover,
div.nd-btn-secondary > .wp-block-button__link:focus {
	background: var(--nd-brown);
	color: #fff;
	transform: translateY(-1px);
}

/* Peach CTA on the devotional panel — burgundy on peach is 5.51:1. */
a.nd-btn-gold,
button.nd-btn-gold,
div.nd-btn-gold > .wp-block-button__link {
	background: var(--nd-peach);
	color: var(--nd-burgundy);
	font-weight: 600;
	padding: 15px 36px;
}

a.nd-btn-gold:hover,
a.nd-btn-gold:focus,
div.nd-btn-gold > .wp-block-button__link:hover,
div.nd-btn-gold > .wp-block-button__link:focus {
	background: var(--nd-peach-light);
	color: var(--nd-burgundy);
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(254, 171, 101, 0.4);
}

/* ==========================================================================
   5. HERO
   ========================================================================== */

.nd-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

.nd-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 70% 30%, rgba(254, 171, 101, 0.12) 0%, transparent 60%),
		radial-gradient(ellipse at 20% 80%, rgba(243, 187, 186, 0.18) 0%, transparent 50%);
}

.nd-hero-left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 60px 80px 80px;
	position: relative;
	z-index: 2;
}

.nd-hero-title {
	font-family: var(--nd-serif);
	font-size: clamp(3rem, 5vw, 5.5rem);
	font-weight: 300;
	line-height: 1.08;
	color: var(--nd-brown);
	margin-bottom: 8px;
}

.nd-hero-subtitle {
	font-family: var(--nd-serif);
	font-size: clamp(1.4rem, 2vw, 2rem);
	font-weight: 300;
	font-style: italic;
	color: var(--nd-text-mid);
	line-height: 1.4;
	margin-bottom: 28px;
}

.nd-hero-body {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--nd-text-mid);
	max-width: 440px;
	margin-bottom: 40px;
}

.nd-hero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.nd-hero-right {
	position: relative;
	background: linear-gradient(160deg, var(--nd-brown) 0%, var(--nd-burgundy) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 60px 50px;
	overflow: hidden;
}

.nd-hero-right::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(254, 171, 101, 0.06) 60px, rgba(254, 171, 101, 0.06) 61px),
		repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(254, 171, 101, 0.06) 60px, rgba(254, 171, 101, 0.06) 61px);
}

.nd-verse-card {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(254, 171, 101, 0.35);
	border-radius: 4px;
	padding: 40px;
	backdrop-filter: blur(4px);
}

.nd-verse-card::before {
	content: '\201C';
	display: block;
	font-family: var(--nd-serif);
	font-size: 5rem;
	line-height: 0.7;
	color: var(--nd-peach);
	opacity: 0.6;
	margin-bottom: 20px;
}

.nd-verse-text {
	font-family: var(--nd-serif);
	font-size: 1.6rem;
	font-style: italic;
	font-weight: 300;
	color: var(--nd-on-dark);
	line-height: 1.5;
	margin-bottom: 16px;
}

.nd-verse-ref {
	display: block;
	font-family: var(--nd-sans);
	font-size: var(--nd-meta);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--nd-peach-light);
	font-weight: 500;
}

/* ==========================================================================
   6. TICKER
   No Kadence equivalent — this is the one piece that is pure custom CSS.
   Burgundy ground with peach-light text: 7.10:1, versus 3.01:1 for the
   original white-on-coral. Coral is kept as the top and bottom hairline
   so the accent survives.
   ========================================================================== */

.nd-ticker {
	background: var(--nd-burgundy);
	border-top: 3px solid var(--nd-coral);
	border-bottom: 3px solid var(--nd-coral);
	padding: 14px 0;
	overflow: hidden;
	white-space: nowrap;
}

.nd-ticker-inner {
	display: inline-flex;
	animation: nd-ticker 30s linear infinite;
}

.nd-ticker-inner span {
	font-family: var(--nd-sans);
	font-size: var(--nd-meta);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nd-peach-light);
	padding: 0 48px;
}

.nd-ticker-inner span::before {
	content: '\2726';
	margin-right: 48px;
	color: var(--nd-coral);
	font-size: 0.5rem;
	vertical-align: middle;
}

@keyframes nd-ticker {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ==========================================================================
   7. ABOUT
   ========================================================================== */

.nd-about {
	background: var(--nd-cream);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nd-gap);
	align-items: center;
	padding: var(--nd-pad-y) var(--nd-pad-x);
}

.nd-about-image-wrap {
	position: relative;
}

.nd-about-image-wrap img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.nd-about-image-wrap::after {
	content: '';
	position: absolute;
	bottom: -20px;
	right: -20px;
	width: 80px;
	height: 80px;
	background: var(--nd-coral);
	border-radius: 50%;
	opacity: 0.15;
	pointer-events: none;
}

.nd-about-image-wrap::before {
	content: '';
	position: absolute;
	top: 30px;
	left: -30px;
	width: 60px;
	height: 1px;
	background: var(--nd-peach);
	z-index: 2;
}

.nd-quote {
	font-family: var(--nd-serif);
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 300;
	color: var(--nd-brown);
	line-height: 1.5;
	border-left: 2px solid var(--nd-peach);
	padding-left: 24px;
	margin: 32px 0;
}

.nd-about-body {
	font-size: 1rem;
	line-height: 1.85;
	color: var(--nd-text-mid);
	margin-bottom: 24px;
}

.nd-social-row {
	display: flex;
	gap: 16px;
	margin-top: 32px;
}

.nd-social-link {
	width: 44px;
	height: 44px;
	border: 1px solid var(--nd-border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--nd-text-mid);
	transition: border-color 0.2s, color 0.2s;
}

.nd-social-link:hover,
.nd-social-link:focus {
	border-color: var(--nd-burnt);
	color: var(--nd-burnt-text);
}

.nd-social-link svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ==========================================================================
   8. DEVOTIONAL
   ========================================================================== */

.nd-devotional {
	background: linear-gradient(135deg, var(--nd-burgundy) 0%, var(--nd-brown) 100%);
	padding: var(--nd-pad-y) var(--nd-pad-x);
	position: relative;
	overflow: hidden;
}

.nd-devotional::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -100px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(254, 171, 101, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

.nd-devotional-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nd-gap);
	align-items: center;
	position: relative;
	z-index: 2;
}

.nd-book {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nd-book img {
	width: 260px;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: -12px 12px 40px rgba(0, 0, 0, 0.4);
	transform: perspective(1200px) rotateY(-14deg);
	transition: transform 0.5s ease;
}

.nd-book img:hover {
	transform: perspective(1200px) rotateY(-5deg);
}

.nd-devotional-lede {
	font-family: var(--nd-serif);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--nd-on-dark);
	line-height: 1.6;
	margin-bottom: 24px;
}

.nd-devotional-body {
	font-size: 1rem;
	line-height: 1.85;
	color: var(--nd-on-dark-soft);
	margin-bottom: 20px;
}

.nd-byline {
	font-family: var(--nd-sans);
	font-size: var(--nd-meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nd-on-dark-soft);
	margin-bottom: 16px;
}

.nd-price {
	font-family: var(--nd-serif);
	font-size: 2rem;
	font-weight: 300;
	color: var(--nd-peach-light);
	margin-bottom: 24px;
}

.nd-price sup {
	font-size: 1rem;
	color: var(--nd-on-dark-soft);
	margin-right: 4px;
	vertical-align: top;
}

/* ==========================================================================
   9. BLOG
   The design calls for one large featured card and two smaller ones
   (2fr 1fr 1fr). Kadence's Posts block renders equal columns, so this
   overrides the first child's span and type scale.
   ========================================================================== */

.nd-blog {
	background: var(--nd-warm-white);
	padding: var(--nd-pad-y) var(--nd-pad-x);
}

.nd-blog-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 60px;
}

.nd-read-all {
	font-family: var(--nd-sans);
	font-size: 0.85rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--nd-burnt-text);
	text-decoration: none;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	transition: gap 0.2s;
}

.nd-read-all::after {
	content: '\2192';
}

.nd-read-all:hover {
	gap: 16px;
}

/* Kadence Posts block, retrofitted to the asymmetric grid. */
.nd-blog .kb-posts,
.nd-blog .kt-blocks-post-loop-wrap,
.nd-blog-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 32px;
}

.nd-blog .kb-post-item:first-child .kb-post-title,
.nd-blog-grid > *:first-child .nd-card-title {
	font-size: 1.8rem;
}

.nd-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.nd-card:hover {
	transform: translateY(-4px);
}

.nd-card-image {
	aspect-ratio: 16 / 10;
	border-radius: 4px;
	margin-bottom: 20px;
	overflow: hidden;
	position: relative;
}

.nd-blog-grid > *:first-child .nd-card-image {
	aspect-ratio: 3 / 2;
}

.nd-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.nd-card:hover .nd-card-image img {
	transform: scale(1.03);
}

/* Branded fallbacks for posts with no featured image. */
.nd-no-thumb .nd-card-image,
.nd-grad-1 .nd-card-image { background: linear-gradient(135deg, var(--nd-burnt) 0%, var(--nd-burgundy) 100%); }
.nd-grad-2 .nd-card-image { background: linear-gradient(135deg, var(--nd-brown) 0%, var(--nd-deep-brown) 100%); }
.nd-grad-3 .nd-card-image { background: linear-gradient(135deg, var(--nd-forest) 0%, var(--nd-deep-forest) 100%); }

.nd-card-category {
	font-family: var(--nd-sans);
	font-size: var(--nd-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nd-burnt-text);
	font-weight: 500;
	margin-bottom: 8px;
}

.nd-card-title {
	font-family: var(--nd-serif);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--nd-text-dark);
	line-height: 1.35;
	margin-bottom: 12px;
}

.nd-card:hover .nd-card-title {
	color: var(--nd-burgundy);
}

.nd-card-excerpt {
	font-size: 0.95rem;
	color: var(--nd-text-mid);
	line-height: 1.7;
	margin-bottom: 16px;
	flex: 1;
}

.nd-card-meta {
	font-family: var(--nd-sans);
	font-size: var(--nd-meta);
	letter-spacing: 0.1em;
	color: var(--nd-text-light);
}

/* ==========================================================================
   10. SPEAKING + FORMS
   ========================================================================== */

.nd-speak {
	background: var(--nd-cream);
	padding: var(--nd-pad-y) var(--nd-pad-x);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nd-gap);
	align-items: center;
}

.nd-topics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 32px 0;
}

.nd-topic {
	background: #fff;
	border: 1px solid var(--nd-border);
	border-radius: 4px;
	padding: 20px;
	transition: border-color 0.2s;
}

.nd-topic:hover {
	border-color: var(--nd-burnt);
}

.nd-topic-name {
	font-family: var(--nd-serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--nd-brown);
	margin-bottom: 4px;
}

.nd-topic-desc {
	font-size: 0.875rem;
	color: var(--nd-text-light);
	line-height: 1.6;
}

.nd-form-card {
	background: #fff;
	border: 1px solid var(--nd-border);
	border-radius: 8px;
	padding: 48px;
}

.nd-form-title {
	font-family: var(--nd-serif);
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--nd-burgundy);
	margin-bottom: 8px;
}

.nd-form-sub {
	font-size: 0.9rem;
	color: var(--nd-text-light);
	margin-bottom: 28px;
	line-height: 1.6;
}

/* Kadence Advanced Form fields, restyled to match the design. */
.nd-form-card .kb-form input[type="text"],
.nd-form-card .kb-form input[type="email"],
.nd-form-card .kb-form input[type="tel"],
.nd-form-card .kb-form textarea,
.nd-form-card .kb-form select,
.nd-input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--nd-input-border);
	border-radius: 2px;
	font-family: var(--nd-sans);
	font-size: 1rem;
	color: var(--nd-text-dark);
	background: var(--nd-warm-white);
	transition: border-color 0.2s;
}

.nd-form-card .kb-form input:focus,
.nd-form-card .kb-form textarea:focus,
.nd-input:focus {
	border-color: var(--nd-burnt);
}

.nd-form-card .kb-form label,
.nd-label {
	display: block;
	font-family: var(--nd-sans);
	font-size: var(--nd-meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nd-text-mid);
	font-weight: 500;
	margin-bottom: 7px;
}

.nd-form-card .kb-form ::placeholder,
.nd-input::placeholder {
	color: var(--nd-text-light);
	opacity: 1;
}

.nd-form-card .kb-form textarea {
	min-height: 90px;
	resize: vertical;
}

.nd-form-card .kb-form button[type="submit"],
.nd-btn-submit {
	width: 100%;
	background: var(--nd-burnt-btn);
	color: #fff;
	border: none;
	padding: 15px 24px;
	font-family: var(--nd-sans);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.25s, transform 0.25s;
	margin-top: 8px;
	min-height: 48px;
}

.nd-form-card .kb-form button[type="submit"]:hover,
.nd-btn-submit:hover {
	background: var(--nd-burgundy);
	transform: translateY(-1px);
}

/* ==========================================================================
   11. NEWSLETTER
   ========================================================================== */

.nd-newsletter {
	background: var(--nd-peach);
	padding: 80px var(--nd-pad-x);
	text-align: center;
}

.nd-newsletter-inner {
	max-width: 600px;
	margin: 0 auto;
}

.nd-newsletter .nd-eyebrow {
	justify-content: center;
	color: var(--nd-on-peach);
	letter-spacing: 0.2em;
}

.nd-newsletter .nd-eyebrow::before {
	display: none;
}

.nd-newsletter-title {
	font-family: var(--nd-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 300;
	color: var(--nd-burgundy);
	line-height: 1.2;
	margin-bottom: 16px;
}

.nd-newsletter-sub {
	font-size: 1rem;
	color: var(--nd-on-peach);
	line-height: 1.7;
	margin-bottom: 36px;
}

.nd-newsletter .kb-form,
.nd-newsletter-form {
	display: flex;
	gap: 12px;
	max-width: 440px;
	margin: 0 auto;
}

.nd-newsletter .kb-form input[type="email"],
.nd-newsletter-form input[type="email"] {
	flex: 1;
	padding: 14px 20px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--nd-sans);
	font-size: 1rem;
	background: #fff;
	color: var(--nd-text-dark);
}

.nd-newsletter .kb-form button,
.nd-newsletter-form button {
	background: var(--nd-burgundy);
	color: #fff;
	border: none;
	padding: 14px 28px;
	font-family: var(--nd-sans);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 2px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s;
	min-height: 48px;
}

.nd-newsletter .kb-form input[type="email"],
.nd-newsletter-form input[type="email"] {
	min-height: 48px;
}

.nd-newsletter .kb-form button:hover,
.nd-newsletter-form button:hover {
	background: var(--nd-brown);
}

.nd-newsletter-promise {
	font-size: var(--nd-meta);
	color: var(--nd-on-peach);
	margin-top: 14px;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.nd-footer,
.site-footer.nd-footer {
	background: var(--nd-burgundy);
	padding: 60px var(--nd-pad-x) 40px;
	color: var(--nd-on-dark-mute);
}

.nd-footer-inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 60px;
	margin-bottom: 48px;
}

.nd-footer-logo {
	font-family: var(--nd-serif);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 16px;
}

.nd-footer-logo span {
	color: var(--nd-peach-light);
}

.nd-footer-tagline {
	font-family: var(--nd-serif);
	font-style: italic;
	font-size: 1rem;
	color: var(--nd-on-dark-mute);
	line-height: 1.7;
	max-width: 280px;
}

.nd-footer-col-title {
	font-family: var(--nd-sans);
	font-size: var(--nd-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nd-peach-light);
	font-weight: 500;
	margin-bottom: 20px;
}

.nd-footer a {
	font-size: 0.95rem;
	color: var(--nd-on-dark-mute);
	text-decoration: none;
	transition: color 0.2s;
}

.nd-footer a:hover,
.nd-footer a:focus {
	color: var(--nd-peach-light);
}

.nd-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nd-footer li {
	margin-bottom: 12px;
}

.nd-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.nd-footer-copy {
	font-size: var(--nd-meta);
	color: var(--nd-on-dark-mute);
	letter-spacing: 0.05em;
}

/* ==========================================================================
   13. HEADER / NAV
   ========================================================================== */

/* v1.0.6: moved off .site-header — backdrop-filter on #masthead made it the
   containing block for Kadence's position:fixed sticky row, so the sticky
   header scrolled away with the page. Same look, applied inside the fixed row. */
.site-header .site-main-header-wrap .site-header-row-container-inner,
.nd-nav {
	background: rgba(253, 240, 239, 0.93);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--nd-border);
}

.site-header .site-title,
.nd-nav-logo {
	font-family: var(--nd-serif);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nd-brown);
}

.nd-nav-logo span {
	color: var(--nd-burnt-text);
}

.site-header .menu-item > a,
.nd-nav-links a {
	font-family: var(--nd-sans);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nd-text-mid);
	text-decoration: none;
}

.site-header .menu-item > a:hover,
.nd-nav-links a:hover {
	color: var(--nd-burnt-text);
}

.nd-nav-cta > a,
a.nd-nav-cta {
	background: var(--nd-burnt-btn);
	color: #fff !important;
	padding: 9px 22px;
	border-radius: 2px;
	letter-spacing: 0.1em;
}

.nd-nav-cta > a:hover,
a.nd-nav-cta:hover {
	background: var(--nd-burgundy);
	color: #fff !important;
}

/* ==========================================================================
   14. SINGLE POST — the page Sebrena's writing actually lands on
   ========================================================================== */

.single-post .entry-content {
	max-width: 700px;
	margin: 0 auto;
	font-size: 1.0625rem;
	line-height: 1.85;
}

.single-post .entry-content p {
	margin-bottom: 1.5em;
}

.single-post .entry-content h2 {
	font-size: 2rem;
	margin: 2em 0 0.6em;
}

.single-post .entry-content h3 {
	font-size: 1.5rem;
	margin: 1.8em 0 0.5em;
}

.single-post .entry-content blockquote {
	font-family: var(--nd-serif);
	font-size: 1.4rem;
	font-style: italic;
	color: var(--nd-brown);
	border-left: 2px solid var(--nd-peach);
	padding-left: 24px;
	margin: 2em 0;
}

.single-post .entry-content a {
	color: var(--nd-burnt-text);
}

/* ==========================================================================
   15. MOTION
   ========================================================================== */

.nd-fade-up {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.nd-fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Respect the OS setting. The source design animated regardless, which
   can trigger nausea for motion-sensitive visitors. */
@media (prefers-reduced-motion: reduce) {
	.nd-fade-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.nd-ticker-inner {
		animation: none;
	}
	.nd-book img,
	.nd-card,
	.nd-btn {
		transition: none;
	}
	html {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   16. RESPONSIVE
   Breakpoints match the source design exactly: a single 900px collapse
   plus an intermediate 901–1100px padding step.
   ========================================================================== */

@media (max-width: 1100px) {
	:root {
		--nd-pad-y: 80px;
		--nd-pad-x: 50px;
		--nd-gap:   50px;
	}
	.nd-hero-left {
		padding: 60px 40px 60px 50px;
	}
}

@media (max-width: 900px) {
	:root {
		--nd-pad-y: 70px;
		--nd-pad-x: 24px;
		--nd-gap:   40px;
	}

	.nd-hero {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.nd-hero-left {
		padding: 60px 24px 40px;
	}

	.nd-hero-right {
		min-height: 380px;
		padding: 40px 24px;
	}

	.nd-verse-text {
		font-size: 1.3rem;
	}

	.nd-about,
	.nd-speak,
	.nd-devotional-inner {
		grid-template-columns: 1fr;
	}

	.nd-about-image-wrap img {
		aspect-ratio: 3 / 2;
	}

	.nd-devotional-inner {
		text-align: center;
	}

	.nd-devotional-inner .nd-eyebrow {
		justify-content: center;
	}

	.nd-blog .kb-posts,
	.nd-blog .kt-blocks-post-loop-wrap,
	.nd-blog-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.nd-blog-grid > *:first-child .nd-card-image,
	.nd-card-image {
		aspect-ratio: 16 / 10;
	}

	.nd-blog-grid > *:first-child .nd-card-title,
	.nd-card-title {
		font-size: 1.35rem;
	}

	.nd-blog-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.nd-topics {
		grid-template-columns: 1fr;
	}

	.nd-form-card {
		padding: 32px 24px;
	}

	.nd-newsletter .kb-form,
	.nd-newsletter-form {
		flex-direction: column;
	}

	.nd-footer-inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.nd-footer-bottom {
		flex-direction: column;
		text-align: center;
	}

	/* Touch targets. Verified in Chromium at 390px: without these the
	   footer links render 17px tall and the "View All Posts" link 15px,
	   well under the 44px WCAG 2.5.8 minimum. */
	.nd-footer li {
		margin-bottom: 4px;
	}

	.nd-footer li a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.nd-footer-social a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 8px;
	}

	.nd-read-all {
		min-height: 44px;
	}
}

/* Below 480px the hero headline needs to come down further or it
   overflows on small phones. */
@media (max-width: 480px) {
	.nd-hero-title {
		font-size: 2.6rem;
	}

	.nd-verse-card {
		padding: 28px;
	}

	.nd-form-card {
		padding: 24px 18px;
	}
}

/* Every interactive target clears 44x44 on touch, per WCAG 2.5.8. */
@media (pointer: coarse) {
	a.nd-btn,
	div.nd-btn > .wp-block-button__link,
	.nd-btn-submit,
	.nd-social-link,
	.nd-read-all,
	.site-header .menu-item > a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}


/* v1.0.6: anchor targets clear the sticky header (80px main row + breathing room) */
#about,
#blog,
#devotional,
#speak,
#newsletter {
	scroll-margin-top: 96px;
}


/* v1.0.6: footer widget row — remove the container gutter (the row is
   fullwidth; .nd-footer supplies its own padding) and Kadence's default
   centered widget text. */
.site-footer .site-container {
	padding-left: 0;
	padding-right: 0;
}

.site-footer .nd-footer {
	text-align: left;
}


/* v1.0.6: Posts block — real markup fixes. Kadence renders
   .kb-post-list-item wrappers with article > h2.entry-title inside;
   the earlier .kb-post-item/.kb-post-title guesses matched nothing. */
.nd-blog .kb-posts .entry-title {
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.35;
}

.nd-blog .kb-posts .kb-post-list-item:first-child .entry-title {
	font-size: 1.8rem;
}

.nd-blog .kb-posts .entry-title a {
	color: var(--nd-text-dark);
}

.nd-blog .kb-posts .entry-title a:hover {
	color: var(--nd-burgundy);
}

/* Kadence's category links render at 11.9px — below the 12.8px floor. */
.nd-blog .kb-posts .entry-taxonomies,
.nd-blog .kb-posts .entry-taxonomies a {
	font-family: var(--nd-sans);
	font-size: var(--nd-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nd-burnt-text);
	font-weight: 500;
}

/* Thumbnails: design ratios (16/10, featured card 3/2) over Kadence's
   padding-bottom ratio boxes. */
.nd-blog .kb-posts .post-thumbnail {
	display: block;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 20px;
	position: relative;
}

/* Kadence sizes thumbnails with a padding-bottom ratio box; keep that
   model and just change the ratio (aspect-ratio on the anchor gives the
   inner a 0-height percentage base and the image collapses). */
.nd-blog .kb-posts .post-thumbnail .post-thumbnail-inner {
	position: relative;
	height: 0;
	padding-bottom: 62.5%; /* 16:10 */
}

.nd-blog .kb-posts .post-thumbnail img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nd-blog .kb-posts .kb-post-list-item:first-child .post-thumbnail .post-thumbnail-inner {
	padding-bottom: 66.667%; /* 3:2 */
}

/* Branded gradient stand-in when a post has no featured image. The
   functions.php post_class fallback never fires on the homepage (it
   bails on is_singular), and Kadence outputs no thumbnail element at
   all for image-less posts — so paint one in CSS. */
.nd-blog .kb-posts article:not(:has(.post-thumbnail))::before {
	content: '';
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 4px;
	margin-bottom: 20px;
	background: linear-gradient(135deg, var(--nd-burnt) 0%, var(--nd-burgundy) 100%);
}

.nd-blog .kb-post-list-item:nth-child(3n+2) article:not(:has(.post-thumbnail))::before {
	background: linear-gradient(135deg, var(--nd-brown) 0%, var(--nd-deep-brown) 100%);
}

.nd-blog .kb-post-list-item:nth-child(3n) article:not(:has(.post-thumbnail))::before {
	background: linear-gradient(135deg, var(--nd-forest) 0%, var(--nd-deep-forest) 100%);
}

.nd-blog .kb-posts .kb-post-list-item:first-child article:not(:has(.post-thumbnail))::before {
	aspect-ratio: 3 / 2;
}

@media (max-width: 900px) {
	.nd-blog .kb-posts .kb-post-list-item:first-child .entry-title {
		font-size: 1.35rem;
	}
	.nd-blog .kb-posts .kb-post-list-item:first-child article:not(:has(.post-thumbnail))::before {
		aspect-ratio: 16 / 10;
	}
	.nd-blog .kb-posts .kb-post-list-item:first-child .post-thumbnail .post-thumbnail-inner {
		padding-bottom: 62.5%;
	}
}


/* v1.0.6: forms vs WordPress 7.0. Core ships a "site designer contrast
   fallback" stylesheet whose input selector carries eight :not() terms
   (specificity 0,9,2) — unbeatable with sane selectors, hence the scoped
   !important below. Field wrappers are .kadence-blocks-form-field; the
   submit sits in .kb-submit-field. */
.nd-form-card .kb-form input[type="text"],
.nd-form-card .kb-form input[type="email"],
.nd-form-card .kb-form input[type="tel"],
.nd-form-card .kb-form textarea,
.nd-form-card .kb-form select {
	background: var(--nd-warm-white) !important;
	color: var(--nd-text-dark) !important;
	border: 1px solid var(--nd-input-border) !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 12px 16px !important;
	border-radius: 2px !important;
	font-family: var(--nd-sans) !important;
	font-size: 1rem !important;
}

.nd-form-card .kb-form input:focus,
.nd-form-card .kb-form textarea:focus {
	border-color: var(--nd-burnt) !important;
}

.nd-form-card .kb-form .kb-submit-field button {
	width: 100% !important;
	background: var(--nd-burnt-btn) !important;
	color: #fff !important;
	border: none !important;
	padding: 15px 24px !important;
	font-family: var(--nd-sans) !important;
	font-size: 0.85rem !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	border-radius: 2px !important;
	min-height: 48px;
}

.nd-form-card .kb-form .kb-submit-field {
	width: 100%;
}

.nd-form-card .kb-form .kb-submit-field button:hover {
	background: var(--nd-burgundy) !important;
}

/* Newsletter: single email field + button on one line */
.nd-newsletter .kb-form input[type="email"] {
	background: #fff !important;
	color: var(--nd-text-dark) !important;
	border: 1px solid transparent !important;
	border-radius: 2px !important;
	padding: 14px 20px !important;
	font-family: var(--nd-sans) !important;
	font-size: 1rem !important;
	min-height: 48px;
}

.nd-newsletter .kb-form input[type="email"]:focus {
	border-color: var(--nd-burgundy) !important;
}

.nd-newsletter .kb-form .kb-submit-field button {
	background: var(--nd-burgundy) !important;
	color: #fff !important;
	border: none !important;
	padding: 14px 28px !important;
	font-family: var(--nd-sans) !important;
	font-size: 0.85rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	border-radius: 2px !important;
	white-space: nowrap;
	min-height: 48px;
	width: auto !important;
}

.nd-newsletter .kb-form .kb-submit-field button:hover {
	background: var(--nd-brown) !important;
}

/* Kadence wraps every field; let the wrappers carry the inline layout. */
.nd-newsletter .kb-form .kadence-blocks-form-field {
	flex: 1 1 auto;
	margin: 0;
}

.nd-newsletter .kb-form .kadence-blocks-form-field.kb-submit-field {
	flex: 0 0 auto;
}

/* Belt and braces: the honeypot must never be visible. */
.kb-form .kadence-verify-label {
	display: none !important;
}

@media (max-width: 600px) {
	.nd-newsletter .kb-form {
		flex-direction: column;
	}
}


/* v1.0.7: comment form on single posts — the comment box, name/email/website
   inputs and Post Comment button rendered transparent on the cream page and
   were invisible (WordPress 7.0's contrast-fallback stylesheet again, plus a
   transparent submit). White fields, visible borders, real button. */
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	background: #fff !important;
	color: var(--nd-text-dark) !important;
	border: 1px solid var(--nd-input-border) !important;
	border-radius: 2px !important;
	padding: 12px 16px !important;
	font-family: var(--nd-sans) !important;
	font-size: 1rem !important;
	width: 100%;
	max-width: 100%;
}

.comment-respond input:focus,
.comment-respond textarea:focus {
	border-color: var(--nd-burnt) !important;
	outline: none;
}

.comment-respond textarea {
	min-height: 160px;
	resize: vertical;
}

.comment-respond label {
	font-family: var(--nd-sans);
	font-size: var(--nd-meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nd-text-mid);
	font-weight: 500;
}

.comment-respond input#submit,
.comment-respond input[type="submit"],
.comment-respond button[type="submit"] {
	background: var(--nd-burnt-btn) !important;
	color: #fff !important;
	border: none !important;
	padding: 15px 28px !important;
	font-family: var(--nd-sans) !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	border-radius: 2px !important;
	min-height: 48px;
	cursor: pointer;
	transition: background 0.25s;
}

.comment-respond input#submit:hover,
.comment-respond input[type="submit"]:hover,
.comment-respond button[type="submit"]:hover {
	background: var(--nd-burgundy) !important;
}