/**
 * Plain page — generic content-width wrapper for the shared de-Bricksing
 * template (templates/plain-page.php, Wave 9 of the theme consolidation).
 *
 * SCOPE: every rule is nested under .cwpl, the <main> on every page this
 * template serves. This file is loaded on EVERY page using the shared
 * `cwpr-plain.php` registry entry (this wave: FAQs, Understanding Online
 * Delivery, Lost Password, Wishlist; Wave 10: ~25 more) — so a rule added
 * here reaches all of them at once. Keep it generic; a page with a real
 * design need (like the FAQs tab/accordion widget) brings its OWN <style>
 * inside its own post_content rather than growing this file per-page.
 *
 * WIDTH MODEL — deliberately NOT one fixed reading column for everything:
 *   - .cwpl itself is a wide shell (max 1100px) so a self-contained
 *     component (a shortcode's own grid/table/form, a hand-built widget with
 *     its own background band) has room to lay itself out.
 *   - .cwpl-prose is an OPT-IN narrower column (max 720px, centered) for
 *     hand-authored copy — wrap plain prose in it when a page is mostly
 *     text (see Understanding Online Delivery). A page that is ALL
 *     self-contained widget (FAQs) or ALL plugin markup (Wishlist) should
 *     NOT use it — those already lay themselves out.
 *
 * Depends only on assets/css/cw-tokens.css (loaded site-wide at priority 10,
 * see functions.php) — no dependency on factory-fresh.css (that sheet is the
 * WPForms skin for the bespoke pixel-rebuild pages and is loaded
 * conditionally by inc/forms.php; this template has no such coupling).
 *
 * @package cw-bricks-child
 */

.cwpl {
	box-sizing: border-box;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 24px 72px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--cw-ink-2, #52575a);
	-webkit-font-smoothing: antialiased;
}

.cwpl *,
.cwpl *::before,
.cwpl *::after {
	box-sizing: border-box;
}

.cwpl-article__header {
	margin: 0 0 28px;
}

.cwpl-article__title {
	margin: 0;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--cw-ink, #263238);
}

.cwpl-article__body {
	/* Deliberately no max-width here — see the WIDTH MODEL note above. */
}

.cwpl-empty {
	padding: 60px 0;
	text-align: center;
	color: var(--cw-grey, #6b6b6b);
}

/* -------------------------------------------------------------------------
 * .cwpl-prose — the opt-in reading column for hand-authored copy.
 * ---------------------------------------------------------------------- */

.cwpl-prose {
	max-width: 720px;
	margin: 0 auto;
}

/*
 * A zero-specificity typographic baseline (:where(), matching the convention
 * in assets/css/contact-us.css) so a more specific rule anywhere else always
 * wins without needing !important.
 */
:where(.cwpl-prose) h2,
:where(.cwpl-prose) h3,
:where(.cwpl-prose) h4 {
	margin: 34px 0 12px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cw-ink, #263238);
}

:where(.cwpl-prose) h2:first-child,
:where(.cwpl-prose) h3:first-child,
:where(.cwpl-prose) h4:first-child {
	margin-top: 0;
}

:where(.cwpl-prose) h2 {
	font-size: 24px;
}

:where(.cwpl-prose) h3 {
	font-size: 19px;
}

:where(.cwpl-prose) h4 {
	font-size: 16px;
}

:where(.cwpl-prose) p {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.65;
}

:where(.cwpl-prose) .cwpl-kicker {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cw-lime-dark, #4c7000);
}

:where(.cwpl-prose) .cwpl-lede {
	font-size: 18px;
	line-height: 1.55;
	color: var(--cw-ink-2, #52575a);
}

:where(.cwpl-prose) ul,
:where(.cwpl-prose) ol {
	margin: 0 0 16px;
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.6;
}

:where(.cwpl-prose) li {
	margin-bottom: 6px;
}

:where(.cwpl-prose) li > ul,
:where(.cwpl-prose) li > ol {
	margin-top: 6px;
	margin-bottom: 0;
}

:where(.cwpl-prose) strong {
	font-weight: 700;
	color: var(--cw-ink, #263238);
}

:where(.cwpl-prose) a {
	color: var(--cw-lime-dark, #4c7000);
	text-decoration: underline;
	text-decoration-color: var(--cw-lime-line, #dcecb8);
	text-underline-offset: 2px;
}

:where(.cwpl-prose) a:hover,
:where(.cwpl-prose) a:focus-visible {
	color: var(--cw-lime-deep, #5f8c00);
}

:where(.cwpl-prose) img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 8px 0 4px;
	border-radius: 8px;
	border: 1px solid var(--cw-line, #e7e5df);
}

:where(.cwpl-prose) figure {
	margin: 24px 0;
}

:where(.cwpl-prose) figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--cw-grey, #6b6b6b);
}

:where(.cwpl-prose) blockquote {
	margin: 20px 0;
	padding: 4px 18px;
	border-left: 3px solid var(--cw-lime, #80bc00);
	color: var(--cw-ink-2, #52575a);
	font-style: italic;
}

:where(.cwpl-prose) hr {
	margin: 32px 0;
	border: none;
	border-top: 1px solid var(--cw-line, #e7e5df);
}

.cwpl-prose__section {
	margin: 0 0 30px;
	padding: 22px 24px;
	background: var(--cw-card, #ffffff);
	border: 1px solid var(--cw-line, #e7e5df);
	border-radius: 12px;
}

.cwpl-prose__section:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.cwpl {
		padding: 28px 16px 56px;
	}

	.cwpl-article__title {
		font-size: 25px;
	}

	:where(.cwpl-prose) h2 {
		font-size: 20px;
	}

	:where(.cwpl-prose) .cwpl-lede {
		font-size: 16px;
	}

	.cwpl-prose__section {
		padding: 18px 16px;
	}
}

/* -------------------------------------------------------------------------
 * WIDE MODE (Wave 10) — opt-in via post meta `_cwpl_wide`, see
 * templates/plain-page.php. Used by most of the staff/report pages: a data
 * table, a multi-chart dashboard or a multi-column card grid reads better
 * with more than 1100px to work with.
 * ---------------------------------------------------------------------- */

.cwpl--wide {
	max-width: 1600px;
}

/*
 * Defensive safety net, not a fix: several of the legacy report shortcodes
 * this template now hosts render very wide tables (one carries 23 columns)
 * that no reasonable max-width solves. If one overflows, let THIS
 * container scroll horizontally rather than the page/viewport — the
 * shortcode's own table markup and styling are left completely alone.
 */
.cwpl-article__body {
	overflow-x: auto;
}

/* -------------------------------------------------------------------------
 * cwpl-back-link — [cwpr_back_link], inc/plain-page-shortcodes.php.
 * Matches the dark/white back-arrow button several migrated report pages
 * used to link back to their hub (CW Hub, 333711) or index
 * (Visualization Reports, 330435).
 * ---------------------------------------------------------------------- */

.cwpl-back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 28px;
	padding: 9px 16px;
	background: #2d3748;
	color: #f7f7f7;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

.cwpl-back-link:hover,
.cwpl-back-link:focus-visible {
	background: #1a202c;
	color: #ffffff;
}

.cwpl-back-link__arrow {
	font-size: 16px;
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * cwpl-login-gate — [cwpr_login_gate]'s logged-out branch. A small centred
 * card around [magic_login_form]'s own markup, which this file does not
 * otherwise style (it is a shared shortcode used elsewhere on the site).
 * ---------------------------------------------------------------------- */

.cwpl-login-gate {
	max-width: 420px;
	margin: 40px auto;
	padding: 32px 28px;
	background: var(--cw-card, #ffffff);
	border: 1px solid var(--cw-line, #e7e5df);
	border-radius: 12px;
	text-align: center;
}

.cwpl-login-gate__title {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 700;
	color: var(--cw-ink, #263238);
}

/* -------------------------------------------------------------------------
 * cwpl-intro — the small "eyebrow / heading / description" block repeated
 * at the top of the Hub, the Visualization Reports index and the Training
 * page (all three had this exact pattern in their own Bricks canvas).
 * ---------------------------------------------------------------------- */

.cwpl-intro {
	margin: 0 0 32px;
}

.cwpl-intro__eyebrow {
	display: block;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cw-lime-dark, #4c7000);
}

.cwpl-intro__desc {
	max-width: 680px;
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cw-ink-2, #52575a);
}

/* -------------------------------------------------------------------------
 * cwpl-card-grid — the icon+title+description+arrow card pattern used by
 * the Hub's quick-access grid, the Training page's branch grid, and the
 * Visualization Reports index's report grid. `.cwpl-card-group` is one
 * labelled cluster of cards (a category); a page with only one cluster can
 * skip the group header and just use `.cwpl-card-grid` directly.
 * ---------------------------------------------------------------------- */

.cwpl-card-group {
	margin: 0 0 34px;
}

.cwpl-card-group:last-child {
	margin-bottom: 0;
}

.cwpl-card-group__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}

.cwpl-card-group__icon {
	font-size: 18px;
	line-height: 1;
}

.cwpl-card-group__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cw-ink, #263238);
}

.cwpl-card-group__desc {
	font-size: 13px;
	color: var(--cw-grey, #6b6b6b);
}

.cwpl-card-group__rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--cw-line, #e7e5df);
}

.cwpl-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.cwpl-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 18px;
	background: var(--cw-card, #ffffff);
	border: 1px solid var(--cw-line, #e7e5df);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.cwpl-card:hover,
.cwpl-card:focus-visible {
	border-color: var(--cw-lime, #80bc00);
	transform: translateY(-1px);
}

.cwpl-card__icon {
	flex: 0 0 auto;
	font-size: 24px;
	line-height: 1;
}

.cwpl-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cwpl-card__title {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 700;
	color: var(--cw-ink, #263238);
}

.cwpl-card__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cw-grey, #6b6b6b);
}

.cwpl-card__arrow {
	flex: 0 0 auto;
	align-self: center;
	font-size: 16px;
	color: var(--cw-grey, #6b6b6b);
}

/* -------------------------------------------------------------------------
 * cwpl-contact-block — the Hub's closing "Got Questions?" panel.
 * ---------------------------------------------------------------------- */

.cwpl-contact-block {
	margin: 34px 0 0;
	padding: 26px 24px;
	background: var(--cw-card, #ffffff);
	border: 1px solid var(--cw-line, #e7e5df);
	border-radius: 12px;
	text-align: center;
}

.cwpl-contact-block h2 {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	color: var(--cw-ink, #263238);
}

.cwpl-contact-block p {
	margin: 0 0 16px;
	color: var(--cw-ink-2, #52575a);
}

.cwpl-contact-block a.cwpl-contact-btn {
	display: inline-block;
	padding: 9px 20px;
	background: var(--cw-lime, #80bc00);
	color: #14351f;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
}

.cwpl-contact-block a.cwpl-contact-btn:hover,
.cwpl-contact-block a.cwpl-contact-btn:focus-visible {
	background: var(--cw-lime-deep, #5f8c00);
	color: #ffffff;
}

@media (max-width: 767px) {
	.cwpl-card-grid {
		grid-template-columns: 1fr;
	}
}