/* Daily Devotion — front-end styles.
   Colors align with the Nusafe theme: accent #fd5a5a, ink #191919,
   border #dddfe1, muted #646464. Fonts inherit from the theme. */

:root {
	--dd-accent: #fd5a5a;
	--dd-ink: #191919;
	--dd-muted: #646464;
	--dd-border: #dddfe1;
	--dd-soft: #f7f7f7;
}

.dd-devotion-app { max-width: 780px; margin: 0 auto; font-family: inherit; color: var(--dd-ink); }
.dd-devotion-app *, .dd-devotion-app *::before, .dd-devotion-app *::after { box-sizing: border-box; }

/* Single-devotion layout.
   The layout reacts to the width of the box the devotion is placed in (not the
   screen), so it also works inside narrow theme content columns. Narrow box:
   one column (toolbar → Bible in a Year → devotion). Wide box: devotion on the
   left, "Bible in a Year" column on the right. */
.dd-devotion-app:not(.dd-standalone-calendar) {
	max-width: 1120px;
	width: 100%;
	container-type: inline-size;
	container-name: ddapp;
}
.dd-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "toolbar" "side" "content";
	align-items: start;
}
.dd-layout .dd-content { grid-area: content; min-width: 0; }
.dd-side { grid-area: side; margin-bottom: 26px; }
.dd-side.is-empty { display: none; }
.dd-side-title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.2;
	color: var(--dd-ink);
}
.dd-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.dd-chip {
	margin: 0;
	padding: 10px 14px;
	background: var(--dd-soft);
	border: 1px solid var(--dd-border);
	border-radius: 6px;
	font-size: 16px;
	line-height: 1.2;
	color: var(--dd-ink);
	box-shadow: 0 1px 1px rgba(25, 25, 25, .04);
}

@container ddapp (min-width: 900px) {
	.dd-layout {
		grid-template-columns: minmax(0, 1fr) 350px;
		grid-template-areas: "toolbar side" "content side";
		column-gap: 56px;
	}
	.dd-side { margin-bottom: 0; padding-top: 6px; }
	.dd-side-title { font-size: 20px; margin-bottom: 24px; }
	.dd-chips { gap: 14px; }
	.dd-chip { font-size: 18px; padding: 14px 18px; }
}

/* ------------------------------------------------------------------ */
/* Toolbar: previous day / date picker / next day                      */
/* ------------------------------------------------------------------ */

.dd-toolbar {
	grid-area: toolbar;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--dd-border);
}

.dd-nav,
.dd-date-toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	color: var(--dd-ink);
	cursor: pointer;
	transition: color .2s;
	font-family: inherit;
	font-size: 24px;
	line-height: 1.2;
}

.dd-nav {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}
.dd-nav .dd-arrow { flex: 0 0 auto; }

.dd-nav:disabled { opacity: .3; cursor: default; }
.dd-nav:not(:disabled):hover,
.dd-date-toggle:hover { color: var(--dd-accent); }

.dd-date-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 auto;
	font-weight: 400;
}

.dd-date-toggle .dd-caret {
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	opacity: .55;
	transition: transform .2s;
}
.dd-date-toggle[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }

.dd-nav:focus-visible,
.dd-date-toggle:focus-visible,
.dd-cal-day:focus-visible,
.dd-cal-nav:focus-visible { outline: 2px solid var(--dd-accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* Calendar popover                                                    */
/* ------------------------------------------------------------------ */

.dd-calendar-pop {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 90;
	width: min(340px, 96vw);
	background: #fff;
	border: 1px solid var(--dd-border);
	border-radius: 10px;
	box-shadow: 0 14px 40px rgba(25, 25, 25, .14);
	padding: 16px;
}

.dd-standalone-calendar .dd-calendar-inner {
	background: #fff;
	border: 1px solid var(--dd-border);
	border-radius: 10px;
	padding: 16px;
}

.dd-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.dd-cal-title { font-weight: 700; font-size: 15px; }

.dd-cal-nav {
	appearance: none;
	width: 32px; height: 32px;
	border: 1px solid var(--dd-border);
	border-radius: 50%;
	background: #fff;
	color: var(--dd-ink);
	font-size: 18px; line-height: 1;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}
.dd-cal-nav:not(:disabled):hover { border-color: var(--dd-accent); color: var(--dd-accent); }
.dd-cal-nav:disabled { opacity: .3; cursor: default; }

.dd-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	text-align: center;
}

.dd-cal-dow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dd-muted);
	padding: 6px 0;
}

.dd-cal-day {
	position: relative;
	appearance: none;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	color: var(--dd-ink);
	padding: 8px 0 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.dd-cal-day.is-disabled { color: #b9bcbf; cursor: default; }
.dd-cal-day.has-devotion:hover { background: var(--dd-soft); color: var(--dd-accent); }
.dd-cal-day.is-today { font-weight: 700; }
.dd-cal-day.is-selected { background: var(--dd-accent); color: #fff; }
.dd-cal-day.is-selected .dd-dot { background: #fff; }

.dd-dot {
	position: absolute;
	left: 50%; bottom: 4px;
	transform: translateX(-50%);
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--dd-accent);
	display: none;
}
.dd-cal-day.has-devotion .dd-dot { display: block; }

.dd-cal-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--dd-muted);
}
.dd-cal-hint .dd-dot { position: static; transform: none; display: inline-block; }

/* ------------------------------------------------------------------ */
/* Devotion article                                                    */
/* ------------------------------------------------------------------ */

.dd-content { min-height: 200px; }
.dd-content.is-loading { opacity: .45; pointer-events: none; transition: opacity .2s; }

.dd-hero { margin: 0 0 26px; }
.dd-hero-img {
	width: 100%;
	height: auto;
	max-height: 430px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.dd-header { text-align: left; margin-bottom: 26px; }

.dd-kicker {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--dd-accent);
	margin: 0 0 10px;
}

.dd-title {
	font-size: clamp(26px, 4.5vw, 38px);
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--dd-ink);
}

.dd-author { color: var(--dd-muted); font-size: 15px; margin: 0; }

/* Today's Scripture — label + large reference */
.dd-readings { margin: 0 0 28px; text-align: left; }

.dd-reading-label {
	display: block;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.2;
	color: var(--dd-ink);
	margin: 0 0 12px;
}

.dd-reading-value {
	display: block;
	margin: 0;
	font-size: clamp(30px, 5vw, 44px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--dd-ink);
}

.dd-scripture-details summary { cursor: pointer; list-style: none; }
.dd-scripture-details summary::-webkit-details-marker { display: none; }
.dd-scripture-details summary::after { content: " +"; font-weight: 700; color: var(--dd-accent); }
.dd-scripture-details[open] summary::after { content: " –"; }

.dd-scripture-text {
	margin-top: 14px;
	background: var(--dd-soft);
	border-radius: 8px;
	padding: 16px 18px;
	text-align: left;
	font-size: 16px;
	line-height: 1.75;
	font-weight: 400;
}

.dd-audio { margin-bottom: 24px; }

.dd-key-verse {
	margin: 0 0 28px;
	padding: 22px 26px;
	border-left: 4px solid var(--dd-accent);
	background: var(--dd-soft);
	border-radius: 0 10px 10px 0;
}

.dd-key-verse p {
	font-size: 20px;
	line-height: 1.55;
	font-style: italic;
	margin: 0 0 6px;
}

.dd-key-verse cite { font-style: normal; font-weight: 700; font-size: 14px; color: var(--dd-accent); }

.dd-body { font-size: 17px; line-height: 1.85; }
.dd-body p { margin: 0 0 1.2em; }

.dd-reflect,
.dd-insight {
	margin-top: 34px;
	padding: 24px 26px;
	border-radius: 10px;
}

.dd-reflect { background: var(--dd-soft); text-align: center; }
.dd-reflect h3,
.dd-insight h3 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--dd-accent);
	margin: 0 0 12px;
}
.dd-reflect-questions p { margin: 0 0 .6em; font-weight: 600; }
.dd-prayer { color: var(--dd-muted); margin: 10px 0 0; }

.dd-insight { border: 1px solid var(--dd-border); font-size: 15px; line-height: 1.75; }
.dd-insight-author { margin: 10px 0 0; font-weight: 700; font-size: 13px; color: var(--dd-muted); }

.dd-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid var(--dd-border);
}

.dd-share-label { font-size: 13px; font-weight: 700; color: var(--dd-muted); }

.dd-share-btn {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid var(--dd-border);
	border-radius: 30px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dd-ink);
	text-decoration: none;
	transition: all .2s;
}
.dd-share-btn:hover { background: var(--dd-accent); border-color: var(--dd-accent); color: #fff; }

.dd-empty {
	text-align: center;
	color: var(--dd-muted);
	background: var(--dd-soft);
	border-radius: 10px;
	padding: 46px 20px;
}

@media (max-width: 560px) {
	.dd-nav, .dd-date-toggle { font-size: 16px; }
	.dd-nav { gap: 8px; }
	.dd-nav .dd-arrow { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
	.dd-nav-text { display: none; }
	.dd-date-label { white-space: nowrap; }
	.dd-key-verse p { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.dd-devotion-app * { transition: none !important; }
}

/* ------------------------------------------------------------------ */
/* Archive page: [devotion_archive]                                    */
/* ------------------------------------------------------------------ */

.dd-archive {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 44px;
	max-width: 1160px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--dd-ink);
}
.dd-archive *, .dd-archive *::before, .dd-archive *::after { box-sizing: border-box; }

/* --- Sidebar filters --- */

.dd-filters-toggle { display: none; }

.dd-filters-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 22px;
}
.dd-filters-title { font-size: 26px; font-weight: 600; margin: 0; }
.dd-filters-clear { font-size: 14px; color: var(--dd-muted); text-decoration: none; }
.dd-filters-clear:hover { color: var(--dd-accent); }

.dd-filter-group {
	border: 0;
	padding: 0;
	margin: 0 0 28px;
}
.dd-filter-group legend {
	font-size: 17px;
	font-weight: 600;
	padding: 0;
	margin-bottom: 12px;
}

.dd-filter-group input[type="date"] {
	display: block;
	width: 100%;
	padding: 11px 12px;
	margin-bottom: 10px;
	border: 1px solid var(--dd-border);
	border-radius: 5px;
	font-family: inherit;
	font-size: 15px;
	color: var(--dd-ink);
	background: #fff;
}

.dd-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 15px;
	color: #4a4a4a;
	cursor: pointer;
}
.dd-check input {
	width: 17px; height: 17px;
	accent-color: var(--dd-accent);
	margin: 0;
	flex: none;
}
.dd-check:hover span { color: var(--dd-accent); }

.dd-check.dd-check-hidden { display: none; }

.dd-show-more {
	appearance: none;
	background: none;
	border: 0;
	padding: 6px 0 0;
	font-family: inherit;
	font-size: 15px;
	color: var(--dd-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.dd-show-more:hover { color: var(--dd-accent); }
.dd-show-more .dd-caret {
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .2s;
}
.dd-show-more.is-open .dd-caret { transform: rotate(180deg); }

.dd-filters-apply {
	appearance: none;
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: 6px;
	background: var(--dd-accent);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .2s;
}
.dd-filters-apply:hover { opacity: .88; }

/* --- Featured card (today's devotion): image on top, content below --- */

.dd-arch-feature {
	margin-bottom: 44px;
	border-bottom: 1px solid var(--dd-border);
	padding-bottom: 30px;
}

.dd-feature-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
	border-radius: 4px;
	overflow: hidden;
	background: #191919 center/cover no-repeat;
	text-decoration: none;
}
.dd-feature-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 15, .45);
	transition: background .25s;
}
.dd-feature-media:hover::before { background: rgba(15, 15, 15, .55); }

.dd-feature-overlay {
	position: relative;
	text-align: center;
	padding: 30px 20px;
}
.dd-arch-hero-kicker {
	display: block;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.dd-arch-hero-title {
	display: block;
	color: #fff;
	font-size: clamp(30px, 4.5vw, 46px);
	font-weight: 600;
	line-height: 1.15;
	margin-bottom: 24px;
}
.dd-arch-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}
.dd-arch-hero-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: #f5a623;
	color: #191919;
	font-size: 18px;
	line-height: 1;
}

.dd-feature-body { padding-top: 22px; }
.dd-feature-body .dd-card-teaser { font-size: 17px; }

/* --- Cards --- */

.dd-arch-card {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 28px;
	padding: 30px 0;
	border-bottom: 1px solid var(--dd-border);
}
.dd-arch-card:first-child { padding-top: 0; }

.dd-card-media { display: block; }
.dd-card-img {
	width: 100%;
	aspect-ratio: 4 / 2.6;
	height: auto;
	object-fit: cover;
	border-radius: 3px;
	display: block;
}

.dd-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--dd-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.dd-card-meta svg { color: var(--dd-muted); flex: none; }
.dd-card-sep {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #c8cacb;
}

.dd-card-title { margin: 0 0 10px; font-size: 26px; line-height: 1.25; }
.dd-card-title a { color: var(--dd-ink); text-decoration: none; }
.dd-card-title a:hover { color: var(--dd-accent); }

.dd-card-teaser { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: #333; }
.dd-card-ref { color: var(--dd-muted); }

.dd-card-author { margin: 0; font-size: 15px; color: #4a4a4a; }

/* --- Pagination (horizontal) --- */

.dd-arch-pagination { margin-top: 36px; }

/* WP gives the <ul> itself the class "page-numbers", so target it explicitly. */
.dd-arch-pagination ul,
.dd-arch-pagination ul.page-numbers {
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.dd-arch-pagination li { margin: 0; padding: 0; display: block; }

.dd-arch-pagination li .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 9px 13px;
	text-align: center;
	border: 1px solid var(--dd-border);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--dd-ink);
	text-decoration: none;
	transition: all .2s;
}
.dd-arch-pagination li a.page-numbers:hover { border-color: var(--dd-accent); color: var(--dd-accent); }
.dd-arch-pagination li .page-numbers.current { background: var(--dd-accent); border-color: var(--dd-accent); color: #fff; }
.dd-arch-pagination li .page-numbers.dots { border: 0; }

/* --- Responsive --- */

@media (max-width: 880px) {
	.dd-archive { grid-template-columns: 1fr; gap: 20px; }

	.dd-filters-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 13px 16px;
		border: 1px solid var(--dd-border);
		border-radius: 6px;
		background: #fff;
		font-family: inherit;
		font-size: 16px;
		font-weight: 600;
		color: var(--dd-ink);
		cursor: pointer;
	}
	.dd-filters-toggle .dd-caret {
		width: 0; height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid currentColor;
		transition: transform .2s;
	}
	.dd-filters-toggle[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }

	.dd-filters { display: none; padding-top: 18px; }
	.dd-filters.is-open { display: block; }

	.dd-feature-media { min-height: 280px; }
	.dd-arch-card { grid-template-columns: 1fr; gap: 14px; }
	.dd-card-title { font-size: 22px; }
}

/* Read counter */
.dd-read-count { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 14px; color: #646464; }
.dd-read-count svg { color: var(--dd-accent, #fd5a5a); }
.dd-read-num { font-weight: 700; color: #191919; }

/* Upcoming (future-dated) calendar days */
.dd-cal-day.is-upcoming.has-devotion { color: var(--dd-accent, #fd5a5a); }