/*
 * Paid Memberships Pro, themed by remapping its own variables.
 *
 * PMPro publishes 27 custom properties on :root and uses them 73 times through
 * its front-end stylesheet. Redeclaring them is the whole theme: no template is
 * forked, no selector is out-ranked, and nothing here needs re-diffing when
 * PMPro updates.
 *
 * That matters for a specific reason. This repo already carries ONE PMPro
 * template fork — `paid-memberships-pro/pages/invoice.php`, in sync at template
 * v3.1 — which must be checked against every PMPro release. A second standing
 * cost of that kind is worth avoiding.
 *
 * It also fails the right way. If PMPro renames a property, the page reverts to
 * PMPro's own default: light, obvious, and caught by the contrast sweep. An
 * override that quietly stops matching leaves a page that looks NEARLY right,
 * which is the failure nobody notices.
 *
 * Scoped to the CyberSlam template. PMPro pages still on Divi keep PMPro's own
 * palette, because a surface's ground, its text and its stylesheet change
 * together — never one ahead of the others.
 */

.csds-page {

	/* ---- Structure ------------------------------------------------- */
	/* PMPro ships 8px corners. The brand book caps a panel at 0 and a button
	   at 2px, and says no component introduces its own radius. */
	--pmpro--base--border-radius: var(--csds-radius-none);
	--pmpro--btn--border-radius: var(--csds-radius-xs);

	--pmpro--base--spacing--small: var(--csds-space-3);
	--pmpro--base--spacing--medium: var(--csds-space-4);
	--pmpro--base--spacing--large: var(--csds-space-6);

	--pmpro--btn--top-bottom-padding: var(--csds-space-2);
	--pmpro--btn--left-right-padding: var(--csds-space-4);

	/* ---- Colour ---------------------------------------------------- */
	/* `base` is PMPro's surface and `contrast` its text, so the pairing has to
	   invert together: a panel fill with ink on it, never one without the other. */
	--pmpro--color--base: var(--csds-surface-panel);
	--pmpro--color--base-2: var(--csds-surface-raised);
	--pmpro--color--contrast: var(--csds-ink);
	--pmpro--color--border: var(--csds-border-default);

	/* PMPro's accent is a petrol blue used for links and primary buttons.
	   Crimson is correct for a button FILL under a bold uppercase label — the
	   brand book's documented 4.1:1 pair. It is NOT correct for a small link,
	   which is 3.44:1, so links are re-pointed at the link token below rather
	   than inheriting this. */
	--pmpro--color--accent: var(--csds-crimson);

	/* ---- State ------------------------------------------------------ */
	/*
	 * PMPro declares these with light-dark(). CyberSlam has ONE theme, so left
	 * alone each of these would resolve from the browser's colour preference —
	 * a visitor in light mode would get PMPro's light-mode pastels on a black
	 * panel. They are pinned to explicit token values instead.
	 *
	 * Each state keeps its own hue: a message is distinguishable by more than
	 * its border, and these are the surfaces that carry payment errors.
	 */
	--pmpro--color--info-background: var(--csds-surface-raised);
	--pmpro--color--info-border: var(--csds-border-default);
	--pmpro--color--info-text: var(--csds-ink);
	--pmpro--color--info-link: var(--csds-link-hover);

	--pmpro--color--success-background: var(--csds-surface-raised);
	--pmpro--color--success-border: var(--csds-state-win);
	--pmpro--color--success-text: var(--csds-state-win);
	--pmpro--color--success-link: var(--csds-link-hover);

	/* blood, not crimson: an error message is body copy, and crimson text on a
	   raised surface does not clear the 4.5:1 floor. */
	--pmpro--color--error-background: var(--csds-surface-raised);
	--pmpro--color--error-border: var(--csds-blood);
	--pmpro--color--error-text: var(--csds-ink);
	--pmpro--color--error-link: var(--csds-link-hover);

	--pmpro--color--alert-background: var(--csds-surface-raised);
	--pmpro--color--alert-border: var(--csds-gold);
	--pmpro--color--alert-text: var(--csds-gold-light);
	--pmpro--color--alert-link: var(--csds-link-hover);

	--pmpro--color--alert2-background: var(--csds-surface-raised);
	--pmpro--color--alert2-border: var(--csds-gold-dark);
	--pmpro--color--alert2-text: var(--csds-gold-light);
	--pmpro--color--alert2-link: var(--csds-link-hover);
}

/*
 * The few places PMPro does not route through a variable.
 * Kept deliberately short: every rule here is a standing cost.
 */

/* Links inside PMPro content take the link token, not the accent — crimson as
   flat text is 3.44:1 and these are body-sized. */
.csds-page .pmpro_content_message a,
.csds-page .pmpro_form a,
.csds-page .pmpro_table a,
.csds-page .pmpro_level_cost a {
	color: var(--csds-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.csds-page .pmpro_content_message a:hover,
.csds-page .pmpro_form a:hover,
.csds-page .pmpro_table a:hover,
.csds-page .pmpro_level_cost a:hover {
	color: var(--csds-link-hover);
}

/* Form controls: PMPro styles its wrappers through variables but leaves the
   native inputs to the browser, which paints them light. */
.csds-page .pmpro_form input[type="text"],
.csds-page .pmpro_form input[type="email"],
.csds-page .pmpro_form input[type="password"],
.csds-page .pmpro_form input[type="tel"],
.csds-page .pmpro_form input[type="number"],
.csds-page .pmpro_form select,
.csds-page .pmpro_form textarea {
	background: var(--csds-surface-base);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	border-radius: var(--csds-radius-xs);
	color: var(--csds-ink);
	font: var(--csds-body-default);
	padding: var(--csds-space-2) var(--csds-space-3);
}

.csds-page .pmpro_form input:focus,
.csds-page .pmpro_form select:focus,
.csds-page .pmpro_form textarea:focus {
	outline: var(--csds-border-thick) solid var(--csds-gold-light);
	outline-offset: 2px;
}

/* A placeholder must stay legible without reading as filled-in content. */
.csds-page .pmpro_form ::placeholder {
	color: var(--csds-ink-muted);
	opacity: 1;
}

/*
 * PMPro's "plain" button variant paints the accent as TEXT, not as a fill.
 * Crimson text on surface-panel is 3.22:1 at the 16px PMPro uses — measured on
 * the login page's "Show Password" control. The accent is correct behind a bold
 * uppercase label and wrong as body-sized text, which is the same distinction
 * the brand book draws, so this variant takes the link token instead.
 */
.csds-page .pmpro_btn-plain,
.csds-page button.pmpro_btn-plain {
	background: transparent;
	border-color: transparent;
	color: var(--csds-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-transform: none;
	letter-spacing: normal;
}

.csds-page .pmpro_btn-plain:hover,
.csds-page .pmpro_btn-plain:focus {
	color: var(--csds-link-hover);
}

/* Button labels: the crimson fill is the brand book's 4.1:1 pair, valid only
   for a bold uppercase label at body-button scale. Setting the type here is
   what makes the fill permissible. Verified on the rendered type: PMPro's
   SELECT buttons paint at 13px, weight 700, uppercase. */
/*
 * `:not([class*="paypal"])` is not defensive tidiness — it is a measured fix.
 *
 * A blanket `color: ink` on .pmpro_btn painted cream text onto PMPro's PayPal
 * variant (`pmpro_btn-submit-checkout-paypal`), which carries PayPal's brand
 * yellow #FFC439 and its own dark label. Measured 1.13:1 — invisible, on the
 * button a member pays with.
 *
 * A payment gateway's branded button keeps its own colours: we do not control
 * its fill, and PayPal's brand rules do not permit restyling it. Any future
 * gateway variant is excluded the same way.
 */
.csds-page .pmpro_btn:not(.pmpro_btn-plain):not([class*="paypal"]):not([class*="stripe"]),
.csds-page input[type="submit"].pmpro_btn:not([class*="paypal"]):not([class*="stripe"]) {
	font: var(--csds-body-button);
	letter-spacing: var(--csds-body-button-letter-spacing);
	text-transform: uppercase;
	color: var(--csds-ink);
}

/* The fill is blood, not the accent's crimson: ink on crimson is 4.13:1 at the
   13px these buttons paint, under the 4.5 floor. Ink on blood is 6.61:1.
   Re-pointed on the filled buttons only — elsewhere PMPro paints the accent as
   TEXT, where blood would be worse. Hover keeps the fill and lights the edge:
   ink on scarlet is 3.25:1. */
.csds-page .pmpro_btn:not(.pmpro_btn-plain):not(.pmpro_btn-outline):not([class*="paypal"]):not([class*="stripe"]) {
	--pmpro--color--accent: var(--csds-blood);
	--pmpro--color--accent--variation: var(--csds-blood);
}

.csds-page .pmpro_btn:not(.pmpro_btn-plain):not([class*="paypal"]):not([class*="stripe"]):hover {
	border-color: var(--csds-scarlet);
}

/* The login form's submit: PMPro paints its label in `base` (the panel
   colour) on the accent, 3.22:1. Ink on blood instead; on hover PMPro clears
   the fill and paints the accent as text, so the accent becomes ink there. */
.csds-page #loginform .login-submit .button {
	--pmpro--color--accent: var(--csds-blood);
	--pmpro--color--base: var(--csds-ink);
}

.csds-page #loginform .login-submit .button:hover,
.csds-page #loginform .login-submit .button:focus {
	--pmpro--color--accent: var(--csds-ink);
}

/* PMPro's level table: headings take the label style, rows the panel surface. */
.csds-page .pmpro_table th {
	font: var(--csds-heading-label);
	letter-spacing: var(--csds-heading-label-letter-spacing);
	text-transform: uppercase;
	color: var(--csds-ink-muted);
}

.csds-page .pmpro_level_cost,
.csds-page .pmpro_level_expiration {
	color: var(--csds-ink-muted);
}

/* ------------------------------------------------ invoice print (065) --- */
/*
 * "Print or Save as PDF" on an invoice printed the whole site: the top bar,
 * the footer and the cookie tab came out on paper with it. Divi-child's
 * `.printing-content` rule used to hide Divi's chrome; nothing did on csds.
 * Scoped to the invoice page (PMPro's own body class) — every other page
 * prints as it did.
 */
@media print {
  body.pmpro-invoice .csds-skip,
  body.pmpro-invoice .csds-topbar,
  body.pmpro-invoice .csds-footer,
  body.pmpro-invoice .csds-bottomnav,
  body.pmpro-invoice #printing,
  body.pmpro-invoice #cmplz-manage-consent,
  body.pmpro-invoice #cmplz-cookiebanner-container {
    display: none;
  }

  /* 066 A4: a printer drops the dark ground, so the page's cream text came
     out at 1.41:1 on the paper. On the invoice, print dark ink on no ground. */
  body.pmpro-invoice,
  body.pmpro-invoice .csds-page,
  body.pmpro-invoice .csds-page * {
    background: none;
    color: var(--csds-surface-base);
    border-color: var(--csds-surface-base);
  }
}