/*
 * Prayer Mentions — page styles.
 *
 * Scoped to `.pm-page`, which PM_Pages adds to the body class, so nothing here
 * reaches a page the plugin does not own. The theme keeps its header, footer
 * and typography; this styles the page body only.
 *
 * Colours mirror the app's ColorTheme: a purple content role for text and a
 * darker surface role for anything carrying white text. That split exists in
 * the app because one purple cannot do both jobs at 4.5:1 — see the app repo's
 * CLAUDE.md section 14 — and the same is true here.
 */

.pm-page {
	--pm-surface: #522d55;
	--pm-surface-deep: #3d2142;
	--pm-content: #4a2a4d;
	--pm-tint: #f4eef5;
	--pm-tint-edge: #e2d3e4;
	--pm-text: #24202a;
	--pm-muted: #5d5766;
	--pm-rule: #e3dee6;
	--pm-page-bg: transparent;
	--pm-card-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
	.pm-page {
		--pm-content: #d3a9d8;
		--pm-tint: #2a2130;
		--pm-tint-edge: #3a2f42;
		--pm-text: #ece8f0;
		--pm-muted: #b0a8ba;
		--pm-rule: #3a3342;
		--pm-card-bg: #241e2a;
	}
}

/*
 * The plugin's pages sit in whatever container the theme gives them, and that
 * is not one container. A page the plugin created renders inside Divi's normal
 * row, which already has gutters; the adopted overview page is a full-width
 * Divi Builder layout with none, so without this the text ran to the screen
 * edge there and nowhere else. The padding is harmless where a gutter already
 * exists — it only narrows the measure slightly — and `border-box` keeps
 * `max-width` meaning what it says.
 */
.pm-page .pm-nav,
.pm-page .pm-breadcrumb,
.pm-page .pm-section,
.pm-page .pm-hero,
.pm-page .pm-verse,
.pm-page .pm-doc,
.pm-page .pm-legal {
	box-sizing: border-box;
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 4vw, 1.5rem);
	padding-right: clamp(1rem, 4vw, 1.5rem);
}

/* ---------------------------------------------------------------- nav */

.pm-page .pm-nav {
	margin: 0 auto 2rem;
	border-bottom: 1px solid var(--pm-rule);
}

.pm-page .pm-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0 0 0.75rem;
}

.pm-page .pm-nav a {
	display: inline-block;
	padding: 0.35rem 0;
	color: var(--pm-muted);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid transparent;
}

.pm-page .pm-nav a:hover,
.pm-page .pm-nav a:focus {
	color: var(--pm-content);
}

/* The current section is marked by weight and a rule, not colour alone —
   the app declares "Differentiate Without Color Alone" on the App Store. */
.pm-page .pm-nav .is-current a {
	color: var(--pm-content);
	border-bottom-color: var(--pm-content);
}

.pm-page .pm-breadcrumb {
	margin-top: -1rem;
	margin-bottom: 2rem;
	font-size: 0.95rem;
}

.pm-page .pm-breadcrumb a {
	color: var(--pm-muted);
	text-decoration: none;
}

/* --------------------------------------------------------------- hero */

.pm-page .pm-hero {
	text-align: center;
	padding: 2.5rem 1.5rem 3rem;
	margin-bottom: 2rem;
	background: linear-gradient(135deg, var(--pm-surface) 0%, var(--pm-surface-deep) 100%);
	border-radius: 1.25rem;
	color: #fff;
	max-width: none;
}

.pm-page .pm-hero__logo {
	width: 120px;
	height: 120px;
	object-fit: contain;
	margin-bottom: 1rem;
}

.pm-page .pm-hero__title {
	color: #fff;
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 6vw, 3rem);
}

.pm-page .pm-hero__tagline {
	color: #fff;
	font-size: 1.2rem;
	margin: 0 auto 1.75rem;
	max-width: 32rem;
}

/* Not .9 opacity — dimmed white on this surface measures under 3:1. */
.pm-page .pm-hero__note {
	color: #fff;
	font-size: 0.95rem;
	margin-top: 1rem;
}

/* ------------------------------------------------------------ sections */

.pm-page .pm-section {
	margin: 0 auto 3rem;
}

.pm-page .pm-section h2 {
	color: var(--pm-content);
	margin-bottom: 0.75rem;
}

.pm-page .pm-lede {
	font-size: 1.1rem;
	color: var(--pm-muted);
	margin-bottom: 2rem;
}

.pm-page .pm-section--feature {
	background: var(--pm-tint);
	border: 1px solid var(--pm-tint-edge);
	border-radius: 1rem;
	padding: 2rem;
}

.pm-page .pm-section--closing {
	text-align: center;
}

/* --------------------------------------------------------------- cards */

.pm-page .pm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
}

.pm-page .pm-card {
	background: var(--pm-card-bg);
	border: 1px solid var(--pm-rule);
	border-radius: 0.9rem;
	padding: 1.4rem;
}

.pm-page .pm-card h3 {
	margin: 0 0 0.5rem;
	color: var(--pm-content);
	font-size: 1.05rem;
}

.pm-page .pm-card p {
	margin: 0;
	color: var(--pm-text);
}

/* ----------------------------------------------------------- buttons */

.pm-page .pm-button {
	display: inline-block;
	padding: 0.85rem 2rem;
	border-radius: 999px;
	background: #fff;
	color: var(--pm-surface-deep);
	font-weight: 700;
	text-decoration: none;
}

.pm-page .pm-section .pm-button,
.pm-page .pm-contact .pm-button {
	background: var(--pm-surface);
	color: #fff;
}

.pm-page .pm-button:hover,
.pm-page .pm-button:focus {
	opacity: 0.92;
}

.pm-page .pm-cta {
	margin: 1.5rem 0 0;
}

.pm-page .pm-contact {
	margin: 1.5rem 0;
}

/* ------------------------------------------------- appearance toggle */

.pm-page .pm-appearance {
	display: inline-flex;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	padding: 0.25rem;
	border: 1px solid var(--pm-rule);
	border-radius: 999px;
	background: var(--pm-card-bg);
}

.pm-page .pm-appearance__option {
	appearance: none;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--pm-muted);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.4rem 1.1rem;
	cursor: pointer;
}

/*
 * The current option is filled, not merely tinted — colour alone must not be
 * the signal (the app declares "Differentiate Without Color Alone"), and
 * aria-pressed carries the same state for anyone not looking at it.
 */
.pm-page .pm-appearance__option.is-current {
	background: var(--pm-surface);
	color: #fff;
}

.pm-page .pm-appearance__option:focus-visible {
	outline: 2px solid var(--pm-content);
	outline-offset: 2px;
}

/* ---------------------------------------------------------- screenshots */

.pm-page .pm-shots {
	display: grid;
	/* min() so a viewport narrower than the track cannot overflow the grid.
	   `minmax(11rem, 1fr)` alone overflows below about 13rem, which a 320px
	   device at 200% text zoom reaches. */
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: 1.25rem;
}

.pm-page .pm-shot {
	margin: 0;
}

/* `display: block`, or the inline anchor adds a descender's worth of space
   under every shot and the hairline draws around the gap. */
.pm-page .pm-shot__link {
	display: block;
	border-radius: 1rem;
	cursor: zoom-in;
}

/* Declared, because `a:focus { outline: none }` is the most common line in
   anybody's stylesheet and the preview has no theme to show it being removed. */
.pm-page .pm-shot__link:focus-visible {
	outline: 2px solid var(--pm-content);
	outline-offset: 3px;
}

.pm-page .pm-shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1rem;
	border: 1px solid var(--pm-rule);
}

/* ------------------------------------------------------------------ lightbox */

/*
 * The viewer is its own surface, and it deliberately reaches for NONE of the
 * page's tokens.
 *
 * --pm-surface is brand purple and is one of the three that deliberately does
 * not change in dark, so nothing in this palette behaves correctly as modal
 * chrome in both appearances. The field is a fixed dark, the chrome is white on
 * it — the same literal #fff the hero and the step markers already use over
 * --pm-surface — and this block therefore needs no prefers-color-scheme
 * override at all. That is also what keeps it the same CSS as the sibling
 * FerventWord plugin's, which themes with light-dark() rather than a media
 * query: the two mechanisms differ only where tokens are involved.
 *
 * And the focus ring is #fff, never var(--pm-content): that is #4a2a4d in
 * light, which is dark purple on a near-black scrim — a focus ring nobody sees.
 */

/*
 * `display: none` is declared here rather than inherited from the UA sheet. A
 * browser that does not know <dialog> treats it as an unknown INLINE element —
 * it has no UA rule to hide it — so a close button, an empty frame and two
 * chevrons would render in the page flow under the strip. The layout lives on
 * [open] for the same reason.
 */
.pm-page .pm-lightbox { display: none; }

/*
 * The UA sheet caps a dialog at calc(100% - 6px - 2em) in both axes and gives
 * it a solid border, 1em of padding and a canvas background — so a "full
 * screen" dialog that does not say otherwise is a bordered box inset by a
 * couple of ems, and it looks deliberate.
 *
 * 100vh then 100dvh, both, because the two support floors do not coincide:
 * showModal() is Safari 15.4 and dvh is Chrome 108, so there is a real browser
 * with a working dialog and no dvh. On iOS 100vh is the LARGE viewport, which
 * puts the bottom bar under Safari's toolbar, which is where the chevrons are.
 */
.pm-page .pm-lightbox[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(20, 16, 24, 0.94);
	overscroll-behavior: contain;
}

/* Belt and braces. The dialog itself carries the scrim, so this is never what
   anyone sees — ::backdrop inheritance differs across engines and must not be
   the mechanism. */
.pm-page .pm-lightbox::backdrop { background: rgba(20, 16, 24, 0.94); }

/* The bars reserve their own rows, which is what keeps every control off the
   screenshot. White on the scrim is about 15:1 over any picture; white on
   whatever happens to be in a capture's top-left corner is a coin toss. */
.pm-page .pm-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
		0.25rem max(0.75rem, env(safe-area-inset-left));
}

.pm-page .pm-lightbox__bar--controls {
	justify-content: center;
	padding-top: 0.25rem;
	padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
}

/* `minmax(0, 1fr)` on the row above and `min-height: 0` here are one fix in two
   places: a bare 1fr track has an auto minimum, so it refuses to shrink below
   the image's intrinsic 1629px and the picture overflows the viewport. */
.pm-page .pm-lightbox__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
	padding: 0 max(0.75rem, env(safe-area-inset-right)) 0 max(0.75rem, env(safe-area-inset-left));
}

/* The 750px cap is the file's own width. Height is always the binding
   constraint on a 750x1629 portrait shot, so without it a tall display gives
   the image a computed width of ~920px and upscales a 750px JPG into a blurry
   one. `height: auto` is required because the width/height attributes
   otherwise supply a used height that beats max-height. */
.pm-page .pm-lightbox__img {
	max-width: min(100%, 750px);
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.pm-page .pm-lightbox__control {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	/* 44px is the app's own floor for a hit region, and this is the web's. */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
}

.pm-page .pm-lightbox__control svg {
	width: 1.35rem;
	height: 1.35rem;
}

.pm-page .pm-lightbox__control:hover { background: rgba(255, 255, 255, 0.26); }

.pm-page .pm-lightbox__control:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.pm-page .pm-lightbox__meta {
	flex: 0 1 22rem;
	text-align: center;
	margin: 0;
	padding: 0 0.5rem;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Clipped rather than display:none, or a screen reader skips the live region. */
.pm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------- steps */

.pm-page .pm-steps {
	list-style: none;
	counter-reset: pm-step;
	margin: 0;
	padding: 0;
}

.pm-page .pm-steps li {
	counter-increment: pm-step;
	position: relative;
	padding-left: 3.25rem;
	margin-bottom: 1.75rem;
}

.pm-page .pm-steps li::before {
	content: counter(pm-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--pm-surface);
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pm-page .pm-steps h3 {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	color: var(--pm-content);
}

.pm-page .pm-steps p {
	margin: 0;
}

/* --------------------------------------------------------------- verse */

.pm-page .pm-verse {
	text-align: center;
	background: var(--pm-tint);
	border-radius: 1rem;
	padding: 2.5rem 1.5rem;
	margin-bottom: 3rem;
	max-width: none;
}

.pm-page .pm-verse blockquote {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: 1.3rem;
	font-style: italic;
	color: var(--pm-text);
}

.pm-page .pm-verse cite {
	display: block;
	margin-top: 0.75rem;
	font-size: 1rem;
	font-style: normal;
	color: var(--pm-muted);
}

.pm-page .pm-verse__note {
	margin: 1.25rem 0 0;
	color: var(--pm-muted);
	font-size: 0.95rem;
}

/* ------------------------------------------------------ topics + docs */

.pm-page .pm-topics {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pm-page .pm-topics__item {
	border-bottom: 1px solid var(--pm-rule);
}

.pm-page .pm-topics__item a {
	display: block;
	padding: 1rem 0;
	text-decoration: none;
}

.pm-page .pm-topics__title {
	display: block;
	font-weight: 700;
	color: var(--pm-content);
	font-size: 1.1rem;
}

.pm-page .pm-topics__summary {
	display: block;
	color: var(--pm-muted);
	margin-top: 0.2rem;
}

.pm-page .pm-node {
	margin-bottom: 2rem;
}

.pm-page .pm-node h2 {
	color: var(--pm-content);
	font-size: 1.35rem;
	margin: 0 0 0.75rem;
}

/* The lede — prose above the first heading — reads at wider spacing, the same
   way it does in the app, which is what keeps Jerry's account reading as a
   story rather than as a documentation section. */
.pm-page .pm-node--lede {
	font-size: 1.1rem;
	line-height: 1.75;
	margin-bottom: 2.5rem;
}

.pm-page .pm-doc blockquote {
	margin: 1.5rem 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--pm-content);
	font-style: italic;
	color: var(--pm-muted);
}

.pm-page .pm-divider {
	border: 0;
	border-top: 1px solid var(--pm-rule);
	margin: 2.5rem 0;
}

.pm-page .pm-list {
	margin: 1.25rem 0;
}

.pm-page .pm-list dt {
	font-weight: 700;
	color: var(--pm-content);
	margin-top: 1rem;
}

.pm-page .pm-list dd {
	margin: 0.25rem 0 0;
}

.pm-page .pm-list .pm-note {
	color: var(--pm-muted);
	font-size: 0.95rem;
	margin-top: 0.35rem;
}

.pm-page .pm-link {
	margin: 1.25rem 0;
}

.pm-page .pm-link a {
	font-weight: 600;
	color: var(--pm-content);
}

.pm-page .pm-link--unresolved {
	color: var(--pm-muted);
}

.pm-page .pm-signature {
	margin: 2rem 0;
	font-style: italic;
	color: var(--pm-muted);
}

.pm-page .pm-signature__name {
	font-style: normal;
	font-weight: 700;
	color: var(--pm-content);
}

/* -------------------------------------------------------------- tables */

.pm-page .pm-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.pm-page .pm-table th,
.pm-page .pm-table td {
	text-align: left;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--pm-rule);
}

.pm-page .pm-table thead th {
	color: var(--pm-muted);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pm-page .pm-table tbody th {
	font-weight: 600;
}

.pm-page .pm-table tbody td {
	font-weight: 700;
	color: var(--pm-content);
}

/* --------------------------------------------------------------- legal */

.pm-page .pm-legal h2 {
	color: var(--pm-content);
	font-size: 1.3rem;
	margin-top: 2.25rem;
}

.pm-page .pm-legal h3 {
	font-size: 1.05rem;
	margin-top: 1.5rem;
}

.pm-page .pm-meta {
	color: var(--pm-muted);
}

.pm-page .pm-callout {
	background: var(--pm-tint);
	border-left: 4px solid var(--pm-content);
	border-radius: 0.5rem;
	padding: 1.1rem 1.25rem;
	margin: 1.75rem 0;
}

.pm-page .pm-callout p:last-child,
.pm-page .pm-callout ul:last-child {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.pm-page .pm-hero {
		padding: 2rem 1rem 2.5rem;
	}

	.pm-page .pm-section--feature {
		padding: 1.5rem;
	}
}