/**
 * Vividly in Love: devotion page styling.
 *
 * Every colour here is a Kadence global palette variable, never a hex value.
 * That means changing the palette in the Customizer changes this page too, and
 * the brand stays single-sourced. The mapping is recorded in PROJECT-BRIEF.md.
 *
 *   --global-palette1  Vivid Crimson   accent
 *   --global-palette2  Crimson dark    hover
 *   --global-palette3  Prussian Blue   strongest text
 *   --global-palette5  Prussian tint   medium text
 *   --global-palette6  Prussian tint   subtle text
 *   --global-palette7  Papaya Whip     subtle background
 *   --global-palette8  Papaya light    lighter background
 *   --global-palette9  White
 *   --global-palette10 Air Blue        complement, LARGE TYPE AND BORDERS ONLY
 *
 * Air Blue is 3.01:1 on white. It must never carry small text. The contrast
 * sweep caught exactly that mistake during the design pass.
 *
 * No child combinators are used anywhere in this file, and the character itself
 * does not appear even in a comment. Not required in a plugin stylesheet, but it
 * keeps the file safe to paste into the Customizer, where one of those
 * characters anywhere, comments included, silently destroys the whole sheet.
 */

.vil-devotion {
	--vil-measure: 34rem;
	--vil-serif: Georgia, "Times New Roman", serif;
}

/* Every band runs full width, the reading column inside it does not. */
.vil-devotion .vil-band {
	padding-block: 2.5rem;
	padding-inline: 1.25rem;
}
.vil-devotion .vil-inner {
	max-width: var(--vil-measure);
	margin-inline: auto;
}

/* ---- eyebrow labels ---------------------------------------------------- */
.vil-devotion .vil-eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--global-palette1);
	margin: 0 0 0.5rem;
}

/* ---- series header ----------------------------------------------------- */
.vil-devotion .vil-head {
	background: var(--global-palette7);
	border-bottom: 1px solid rgba(0, 48, 73, 0.10);
}
.vil-devotion .vil-progress {
	font-size: 0.8rem;
	color: var(--global-palette6);
	margin: 0.1rem 0 1rem;
}
.vil-devotion .vil-progress strong {
	color: var(--global-palette3);
}
.vil-devotion .vil-byline {
	font-size: 0.85rem;
	color: var(--global-palette6);
	margin: 0;
}
.vil-devotion .vil-rule {
	width: 2.5rem;
	height: 3px;
	background: var(--global-palette1);
	border: 0;
	margin: 1.25rem 0 0;
}

/* ---- scripture --------------------------------------------------------- */
.vil-devotion .vil-scripture {
	background: var(--global-palette7);
	padding-top: 1.5rem;
}
.vil-devotion .vil-verse {
	font-family: var(--vil-serif);
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.65;
	color: var(--global-palette3);
	margin: 0 0 0.45rem;
}
.vil-devotion .vil-ref {
	display: block;
	font-style: normal;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--global-palette6);
	margin: 0 0 1.4rem;
}

/* ---- teaching ---------------------------------------------------------- */
.vil-devotion .vil-teaching {
	background: var(--global-palette9);
	padding-top: 2.75rem;
}
.vil-devotion .vil-teaching p {
	margin: 0 0 1.15rem;
	line-height: 1.7;
}
.vil-devotion .vil-pullquote {
	font-family: var(--vil-serif);
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--global-palette3);
	border-left: 3px solid var(--global-palette10);
	padding: 0.15rem 0 0.15rem 1.1rem;
	margin: 1.9rem 0;
}
.vil-devotion .vil-pullquote cite {
	display: block;
	font-family: inherit;
	font-style: normal;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global-palette6);
	margin-top: 0.6rem;
}

/* ---- do together ------------------------------------------------------- */
.vil-devotion .vil-doing {
	background: var(--global-palette8);
	border-top: 1px solid rgba(0, 48, 73, 0.10);
}
/* See the grid note in home.css: WordPress wraps group children in an inner
   container, so the grid needs that wrapper removed from the layout tree or it
   receives a single child and the cards stack. */
.vil-devotion .vil-cards > .wp-block-group__inner-container {
	display: contents;
}
.vil-devotion .vil-cards {
	display: grid;
	gap: 1rem;
	max-width: 44rem;
	margin-inline: auto;
}
@media (min-width: 44rem) {
	.vil-devotion .vil-cards {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}
}
.vil-devotion .vil-cards {
	align-items: stretch;
}
.vil-devotion .vil-card {
	background: var(--global-palette9);
	border: 1px solid rgba(0, 48, 73, 0.14);
	border-radius: 6px;
	padding: 1.35rem 1.25rem;
	/* Match the taller neighbour, so the pair reads as one unit rather than two
	   panels of different sizes. */
	height: 100%;
}
.vil-devotion .vil-card h2 {
	font-size: 1.05rem;
	margin: 0.15rem 0 0.7rem;
	color: var(--global-palette3);
}
.vil-devotion .vil-card p,
.vil-devotion .vil-card li {
	font-size: 1rem;
	line-height: 1.65;
}
.vil-devotion .vil-tag {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 0.35rem;
}
.vil-devotion .vil-tag-together {
	color: var(--global-palette1);
}
/* Prussian tint, NOT Air Blue. Air Blue fails contrast at this size. */
.vil-devotion .vil-tag-alone {
	color: var(--global-palette6);
}

/* ---- prayer ------------------------------------------------------------ */
.vil-devotion .vil-prayer {
	background: var(--global-palette3);
}
.vil-devotion .vil-prayer .vil-eyebrow {
	color: var(--global-palette10);
}
.vil-devotion .vil-prayer p {
	font-family: var(--vil-serif);
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--global-palette9);
	margin: 0 0 1rem;
}
.vil-devotion .vil-signoff {
	font-family: inherit;
	font-style: normal;
	font-size: 0.9rem;
	color: var(--global-palette7);
	margin: 1.5rem 0 0;
}
.vil-devotion .vil-signoff strong {
	display: block;
	font-size: 1rem;
	color: var(--global-palette9);
}

/* ---- page title -------------------------------------------------------- */
/* Kadence prints the title above the content, outside these bands. On the
   fullwidth, unboxed layout it carries no padding of its own, so without this
   the devotion title sits flat against both screen edges. It also needs the
   same reading width as the content beneath it, or it runs much wider. */
.vil-devotion .entry-header {
	padding-inline: 1.25rem;
}
.vil-devotion .entry-header .entry-title {
	max-width: var(--vil-measure);
	margin-inline: auto;
}

/* ---- closing note ------------------------------------------------------ */
.vil-devotion .vil-note {
	background: var(--global-palette9);
	border-top: 1px solid rgba(0, 48, 73, 0.12);
	padding-block: 1.75rem 3rem;
	padding-inline: 1.25rem;
}
.vil-devotion .vil-note p {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--global-palette6);
	/* Small text needs a shorter line, not a longer one. Left uncapped this
	   ran to 115 characters on a tablet, which is roughly double what is
	   comfortable. */
	max-width: 34rem;
	margin: 0 auto 0.7rem;
}
.vil-devotion .vil-note p:last-child {
	margin-bottom: 0;
}
.vil-devotion .vil-note strong {
	color: var(--global-palette3);
}
.vil-devotion .vil-note a {
	color: var(--global-palette3);
}
.vil-devotion .vil-note strong {
	color: var(--global-palette3);
}

/* ---- day navigation ---------------------------------------------------- */
/* Stacked and centred on a phone, one row from small tablet upwards.
   A single row on mobile looked fine until a long series name was tested:
   "Loving Your Spouse When You Feel Like Walking Away" squeezed the next-day
   link down to 30px wide. Stacking removes the problem at any name length. */
.vil-devotion .vil-daynav {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.6rem;
	max-width: 44rem;
	margin-inline: auto;
	font-size: 0.9rem;
	padding-block: 2rem;
	padding-inline: 1.25rem;
	border-top: 1px solid rgba(0, 48, 73, 0.12);
}
@media (min-width: 34rem) {
	.vil-devotion .vil-daynav {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		text-align: left;
		gap: 1rem;
	}
}
/* Taller tap targets than a bare text link gives. */
.vil-devotion .vil-daynav a,
.vil-devotion .vil-daynav span {
	display: inline-block;
	padding-block: 0.3rem;
}
.vil-devotion .vil-daynav a {
	color: var(--global-palette1);
	text-decoration: none;
	font-weight: 700;
}
.vil-devotion .vil-daynav a:hover,
.vil-devotion .vil-daynav a:focus {
	color: var(--global-palette2);
	text-decoration: underline;
}
.vil-devotion .vil-daynav span {
	color: var(--global-palette6);
}

/* Kadence adds its own page padding; these bands supply their own. */
.vil-devotion .entry-content .alignfull {
	margin-inline: 0;
}

/* ---- ARCHIVE ------------------------------------------------------------
 * The devotion archives were left with no container padding at all when the
 * layout was switched to fullwidth and unboxed, so the first column of cards
 * sat flat against the left edge of the screen. Kadence's loop entries also
 * carry no card styling of their own: they were bare headings and one line of
 * text floating on the page background.
 * ------------------------------------------------------------------------- */
.vil-devotion.archive .site-main {
	padding-inline: 1.25rem;
}
.vil-devotion.archive ul.kadence-posts-list {
	max-width: 72rem;
	margin-inline: auto;
	gap: 1.25rem;
	padding-block: 2.5rem 1rem;
}
.vil-devotion.archive li.entry-list-item {
	display: flex;
}
.vil-devotion.archive article.entry.loop-entry {
	width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--global-palette9);
	border: 1px solid rgba(0, 48, 73, 0.14);
	border-radius: 8px;
	padding: 1.4rem 1.3rem;
}
.vil-devotion.archive article.entry.loop-entry:hover,
.vil-devotion.archive article.entry.loop-entry:focus-within {
	border-color: var(--global-palette1);
}
.vil-devotion.archive .entry-title {
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 0.55rem;
}
.vil-devotion.archive .entry-title a {
	color: var(--global-palette3);
	text-decoration: none;
}
.vil-devotion.archive .entry-title a:hover,
.vil-devotion.archive .entry-title a:focus {
	color: var(--global-palette1);
}
.vil-devotion.archive .entry-summary p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--global-palette5);
	margin: 0 0 1rem;
}
/* Push the read-more to the bottom so it lines up across a row. */
.vil-devotion.archive .entry-content-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.vil-devotion.archive .entry-summary {
	flex: 1;
}
.vil-devotion.archive .post-more-link,
.vil-devotion.archive .entry-actions {
	margin-top: auto;
}

/* Which series, and where in the run. Without this a card says nothing about
   where it sits among 148 devotions. */
.vil-card-meta {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--global-palette1);
	margin-bottom: 0.5rem;
}
.vil-card-meta a {
	color: inherit;
	text-decoration: none;
}
.vil-card-meta a:hover,
.vil-card-meta a:focus {
	text-decoration: underline;
}
.vil-card-meta em {
	font-style: normal;
	color: var(--global-palette6);
	margin: 0 0.15rem;
}

/* The archive description sits in the theme's title band, which is full width.
   Left uncapped it ran to 138 characters a line on desktop, roughly double a
   readable measure. */
.vil-devotion.archive .archive-description {
	max-width: 42rem;
	margin-inline: auto;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--global-palette5);
}
.vil-devotion.archive .archive-description p:last-child {
	margin-bottom: 0;
}

/* ---- archive pagination -------------------------------------------------
 * Kadence's pagination is a sibling of the posts list and inherits none of
 * its container, so the numbers began at the page padding while the cards
 * began at the 72rem container edge. Measured at 1280: first number at
 * x=20, first card at x=57, and the row ran 73px wider than the content
 * above it. It now shares the list's container, so the first number sits on
 * the card's left edge.
 *
 * Kadence sets justify-content on .nav-links, which does nothing because
 * that element is display:block. It is a flex row here so the alignment
 * rule has something to act on and the gaps are even.
 * ------------------------------------------------------------------------- */
.vil-devotion.archive .navigation.pagination {
	max-width: 72rem;
	margin-inline: auto;
}
.vil-devotion.archive .navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.8rem;
}
/* Kadence puts an 8.5px right margin on each number. Stacked on the flex gap
   that came to 21px a side, which pushed the next-page arrow onto a second
   row at 375. Spacing is the gap alone now. */
.vil-devotion.archive .navigation.pagination .nav-links .page-numbers {
	margin-inline: 0;
}

/* ---- series filter ------------------------------------------------------ */
.vil-series-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	max-width: 60rem;
	margin: 1.4rem auto 0;
}
.vil-pill {
	display: inline-block;
	font-size: 0.85rem;
	line-height: 1.2;
	padding: 0.55rem 0.95rem;
	border-radius: 999px;
	background: var(--global-palette9);
	color: var(--global-palette3);
	border: 1px solid rgba(0, 48, 73, 0.18);
	text-decoration: none;
}
.vil-pill:hover,
.vil-pill:focus {
	border-color: var(--global-palette1);
	color: var(--global-palette1);
}
/* White on Vivid Crimson is 5.35:1. Crimson as TEXT on a light ground is the
   only safe direction; it fails on anything dark. */
.vil-pill.is-current {
	background: var(--global-palette1);
	border-color: var(--global-palette1);
	color: var(--global-palette9);
}

/* ---- header dropdown --------------------------------------------------- */
/* Same fix as home.css. The navigation is right-aligned in the header, so a
   dropdown anchored to its parent's left edge overflows the page. Measured at
   1280: the submenu ran to 1328px against a 1265px page. */
.vil-devotion .main-navigation ul.sub-menu {
	left: auto;
	right: 0;
}

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