/*
 * Wesley Pilgrimage guidebook — frontend styles.
 *
 * Colour and type come from the theme: Kadence's global palette and font variables on
 * wesleypilgrimage.org (green #2e5e4e, sage boxes, EB Garamond headings, Inter body), with
 * block-theme presets and neutral values as fallbacks elsewhere. This file handles layout.
 *
 * Values marked "Fixed:" were matched by eye to the live site and do NOT follow Kadence's
 * Customizer settings. See "What follows Kadence" in README.md before changing them.
 */

:root {
	--pp-accent: var(--global-palette1, var(--wp--preset--color--contrast, #2e5e4e));
	--pp-text: var(--global-palette4, currentColor);
	--pp-muted: var(--global-palette6, #5e6b65);
	--pp-surface: var(--global-palette7, #edf1ee);
	--pp-card: var(--global-palette9, #fff);
	--pp-rule: var(--global-palette7, rgba(0, 0, 0, 0.1));
	--pp-heading-font: var(--global-heading-font-family, inherit);
	--pp-body-font: var(--global-body-font-family, inherit);
	--pp-shadow: 0 0 14px rgba(0, 0, 0, 0.1); /* Fixed: card shadow. */
	--pp-gap: var(--global-md-spacing, 2rem);
}

.pp-itinerary,
.pp-leaders,
.pp-reading,
.pp-dates,
.pp-summary,
.pp-day-detail,
.pp-site {
	margin-block: 0 var(--pp-gap);
}

.pp-heading { margin-block: 0 0.75rem; }
.pp-subheading { margin-block: 1.25rem 0.5rem; }
.pp-note,
.pp-muted { color: var(--pp-muted); }
.pp-label { font-weight: 600; }
.pp-box { background: var(--pp-surface); padding: 1.5rem; } /* Fixed: box padding. */
.pp-back { margin: 0 0 1.5rem; font-size: 0.9em; }
.pp-back a,
.pp-more__link { text-decoration: none; }
.pp-more { margin: 1rem 0 0; font-weight: 600; }

/* ── Pilgrimage landing: main column + sidebar ─────────────────────────────── */

.pp-landing {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pp-gap);
	margin-top: var(--pp-gap);
}
.pp-landing__main > :first-child { margin-top: 0; }
/* On subpages the visitor came for the main content: on phones the dates box follows it. */
.pp-landing--itinerary .pp-landing__aside { order: 2; }

/* Fixed: two-column breakpoint. */
@media (min-width: 60rem) {
	.pp-landing { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); } /* Fixed: sidebar width. */
	/* The aside comes first in the source (so it leads on phones); on desktop it sits right. */
	.pp-landing__aside { grid-column: 2; grid-row: 1; }
	.pp-landing__main { grid-column: 1; grid-row: 1; }
	.pp-landing__sticky {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
	}
}

/* Important dates box (sidebar) */
.pp-dates__heading { display: flex; align-items: center; gap: 0.5rem; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); } /* Fixed: dates box heading size. */
.pp-icon { flex: none; width: 0.85em; height: 0.85em; }
.pp-dates__list { margin: 0; }
.pp-dates__list > div { margin-bottom: 0.9rem; }
.pp-dates__list dt { /* Fixed: 1.2rem title size. */ font-family: var(--pp-heading-font); font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.pp-dates__list dd { margin: 0.1rem 0 0; color: var(--pp-text); }
.pp-dates__cta { margin: 1.25rem 0 0; }
.pp-dates__cta .pp-button { display: block; text-align: center; }
.pp-dates__sponsor { margin: 1rem 0 0; font-size: 0.85em; color: var(--pp-muted); }

.pp-page-nav { margin-bottom: 1.25rem; padding-inline: 1.5rem; }
.pp-page-nav__title { margin: 0 0 0.35rem; font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pp-muted); }
.pp-page-nav ul { list-style: none; margin: 0; padding: 0; }
.pp-page-nav li { margin: 0.2rem 0; }
.pp-page-nav a { text-decoration: none; }

.pp-button {
	display: inline-block;
	padding: 0.6em 1.3em;
	border-radius: 3px; /* Fixed: button corners. */
	background: var(--global-palette-btn-bg, var(--pp-accent));
	color: var(--global-palette-btn, var(--wp--preset--color--base, #fff));
	text-decoration: none;
	font-weight: 600;
}
.pp-button:hover,
.pp-button:focus {
	background: var(--global-palette-btn-bg-hover, var(--pp-accent));
	color: var(--global-palette-btn-hover, var(--wp--preset--color--base, #fff));
}

/* Summary block (when placed by hand) */
.pp-summary { background: var(--pp-surface); padding: 1.5rem; }
.pp-summary__facts,
.pp-site__facts { display: grid; gap: 0.35rem 1.5rem; margin: 0; }
.pp-summary__facts > div,
.pp-site__facts > div { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.pp-summary__facts dt,
.pp-site__facts dt { font-weight: 600; }
.pp-summary__facts dt::after,
.pp-site__facts dt::after { content: ":"; }
.pp-summary__facts dd,
.pp-site__facts dd { margin: 0; }
.pp-summary__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1rem 0 0; }
.pp-summary__deadline { color: var(--pp-muted); font-size: 0.9em; }

/* ── Leaders: photo cards ──────────────────────────────────────────────────── */

.pp-leaders__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.pp-card-box { /* Fixed: 4px corners. */ background: var(--pp-card); border-radius: 4px; box-shadow: var(--pp-shadow); overflow: hidden; }
.pp-leader__photo { aspect-ratio: 1; background: var(--pp-surface); }
.pp-leader__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-leader__body { padding: 1rem 1.25rem 1.25rem; }
.pp-leader__name { /* Fixed: 1.2rem title size. */ margin: 0; font-family: var(--pp-heading-font); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.pp-leader__name a { color: inherit; text-decoration: none; }
.pp-leader__title { margin: 0.35rem 0 0; font-size: 0.9em; color: var(--pp-muted); }

/* ── Itinerary ─────────────────────────────────────────────────────────────── */

.pp-itinerary__days { list-style: none; margin: 0; padding: 0; }
.pp-day__sep { margin-inline: 0.35em; }

/* Compact: one line per day */
.pp-day-line {
	display: grid;
	grid-template-columns: 11.5rem minmax(0, 1fr);
	gap: 0.15rem 1rem;
	align-items: baseline;
	padding-block: 0.6rem;
	border-top: 1px solid var(--pp-rule);
}
.pp-day-line:first-child { border-top: 0; }
.pp-day-line__when { font-size: 0.85em; color: var(--pp-muted); font-variant-numeric: tabular-nums; }
.pp-day-line__title { font-weight: 600; }
.pp-day-line__title a { text-decoration: none; }
.pp-day__city { margin-inline-start: 0.5em; font-size: 0.85em; font-weight: 400; color: var(--pp-muted); }

@media (max-width: 36rem) {
	.pp-day-line { grid-template-columns: minmax(0, 1fr); }
}

/* Detailed */
.pp-day { padding-block: 1.25rem; border-top: 1px solid var(--pp-rule); }
.pp-day:first-child { border-top: 0; padding-top: 0.5rem; }
.pp-day__meta { margin: 0; font-size: 0.85em; color: var(--pp-muted); }
.pp-day__title {
	margin: 0.15rem 0 0.5rem;
	font-family: var(--pp-body-font);
	font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem); /* Fixed: day title size. */
	font-weight: 700;
	color: var(--pp-text);
}
.pp-day__title a { color: inherit; text-decoration: none; }
.pp-day__stops { margin: 0 0 0.5rem; padding-inline-start: 1.1rem; }
.pp-day__stops li { margin-block: 0.3rem; }
.pp-day__stop-summary { display: block; font-size: 0.9em; color: var(--pp-muted); }
.pp-day__overnight { margin: 0; font-size: 0.9em; }
.pp-day__notes { padding: 0.75rem 1rem; border-inline-start: 3px solid var(--pp-accent); background: var(--pp-surface); margin-bottom: 1rem; }
.pp-day__notes > :last-child { margin-bottom: 0; }

/* ── Reading list ──────────────────────────────────────────────────────────── */

.pp-books { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.pp-book { display: flex; gap: 1rem; align-items: flex-start; }
.pp-book__cover { flex: none; width: 5.5rem; }
.pp-book__cover img { display: block; width: 100%; height: auto; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.pp-book__body p { margin: 0 0 0.25rem; }
.pp-book__title { /* Fixed: 1.2rem title size. */ font-family: var(--pp-heading-font); font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.pp-book__authors,
.pp-book__isbn { color: var(--pp-muted); font-size: 0.9em; }
.pp-book__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.9em; }

/* ── Day and site pages ────────────────────────────────────────────────────── */

.pp-day-detail--header .pp-day__meta { margin-bottom: 1rem; }
.pp-cards { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; }
.pp-card { display: flex; gap: 1rem; align-items: flex-start; }
.pp-card__media { flex: none; width: min(35%, 12rem); }
.pp-card__media img { display: block; width: 100%; height: auto; border-radius: 4px; }
.pp-card__title { margin: 0 0 0.25rem; font-size: 1.2rem; } /* Fixed: title size. */
.pp-card__title a { text-decoration: none; }
.pp-card__time { margin: 0 0 0.25rem; color: var(--pp-muted); font-size: 0.9em; }
.pp-card__summary { margin: 0; }
.pp-day-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--pp-rule); }
.pp-day-nav a { text-decoration: none; }
.pp-day-nav__next { margin-inline-start: auto; text-align: end; }
.pp-site__kicker { font-size: 0.85em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pp-muted); }
.pp-site__links dd { display: flex; gap: 1rem; }
.pp-site__trip { margin: 0.75rem 0 0.25rem; font-weight: 600; }
.pp-site__visits { margin: 0; padding-inline-start: 1.1rem; }

@media (max-width: 36rem) {
	.pp-card { flex-direction: column; }
	.pp-card__media { width: 100%; }
	.pp-day-nav { flex-direction: column; }
	.pp-day-nav__next { margin-inline-start: 0; text-align: start; }
}

@media print {
	.pp-landing { display: block; }
	.pp-day { break-inside: avoid; }
	.pp-page-nav,
	.pp-dates__cta,
	.pp-summary__cta,
	.pp-day-nav,
	.pp-back { display: none; }
}

/* ── Theme resets ──────────────────────────────────────────────────────────────
 * Themes (Kadence included) indent lists and space paragraphs inside post content with
 * selectors like `.entry-content ul`. Two-class selectors here win without !important. */
.pp-leaders .pp-leaders__list,
.pp-itinerary .pp-itinerary__days,
.pp-reading .pp-books,
.pp-page-nav .pp-page-nav__list,
.pp-day-detail .pp-cards {
	margin-inline-start: 0;
	padding-inline-start: 0;
}
.pp-reading .pp-book__body p,
.pp-leaders .pp-leader p,
.pp-dates .pp-dates__list,
.pp-card .pp-card__body p {
	margin-block: 0 0.25rem;
}
.pp-reading .pp-subheading { font-size: 1.5rem; }

/* Headings inside guidebook sections: the theme's heading margins are sized for articles. */
.pp-itinerary .pp-day__title { margin-block: 0.15rem 0.5rem; }
.pp-itinerary .pp-day__meta,
.pp-page-nav .pp-page-nav__title { margin-block: 0 0.35rem; }
.pp-dates .pp-dates__heading,
.pp-leaders .pp-leader__name,
.pp-day-detail .pp-card__title { margin-top: 0; }