/*
 * Paid Memberships Pro pages (page-membership-account.php), R1 2026-10-01.
 * No JS bundle on purpose; nothing here animates, so prefers-reduced-motion
 * has nothing to switch off.
 *
 * PMPro's own CSS still loads on these pages: these pages are deliberately
 * outside dfw_is_redesign_request(), so checkout keeps the scripts it needs.
 * This bundle sits on top of it. It sets PMPro's palette variables to the
 * brand tokens rather than restyling every component, then adds a few
 * targeted rules: the compact header, the card surface, the fields, and the
 * Submit button on the locked .btn-gold treatment.
 */

.pmpro-page {
  background: var(--color-bg);
}

/* ── Compact header ─────────────────────────────────────────────────────────
   Carries the fixed header's clearance itself (72px nav row; +45px utility
   bar from 1024px, see style.css). It replaces TT5's invisible header + H1 +
   spacing-60 stack that put the first card at y=523 on a 1440x900 screen. */
.pmpro-page__head {
  position: relative;
  color: var(--color-text-light);
  background:
    radial-gradient(circle at 82% 0%, rgba(212,175,55,.12), transparent 40%),
    linear-gradient(150deg, var(--color-navy) 0%, var(--color-navy-3) 80%);
}
.pmpro-page__head::after {
  position: absolute;
  right: var(--page-gutter, 1.5rem);
  bottom: 0;
  left: var(--page-gutter, 1.5rem);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--color-gold), rgba(212,175,55,.08) 70%, transparent);
}
.pmpro-page__head-inner {
  width: min(100% - 3rem, 56rem);
  margin-inline: auto;
  padding: calc(72px + 1.75rem) 0 1.75rem;
}
@media (min-width: 1024px) {
  .pmpro-page__head-inner { padding-top: calc(117px + 1.75rem); }
}
.pmpro-page__eyebrow {
  margin: 0 0 .6rem;
  color: rgba(237,232,224,.72);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pmpro-page__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
}

/* ── Surface ─────────────────────────────────────────────────────────────── */
.pmpro-page__surface {
  --color-gold: var(--color-gold-ink);
  padding: clamp(1.75rem, 4vh, 2.75rem) 0 clamp(4rem, 9vh, 6rem);
}
.pmpro-page__frame {
  width: min(100% - 3rem, 56rem);
  margin-inline: auto;
  color: var(--color-text);
}

/* Headings typed into the page content in wp-admin ("Step 2 of 3: Membership
   Billing" on checkout) are a second <h1> in the stored HTML. They read as a
   step label under the page title, so they are set that way. */
.pmpro-page__frame > :is(h1, h2, h3) {
  margin: 0 0 1.25rem;
  color: var(--color-muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.2;
}

/* PMPro reads its whole palette from these variables (variation_1.css). */
.pmpro-page .pmpro {
  --pmpro--color--base: #ffffff;
  --pmpro--color--base-2: var(--color-bg-warm);
  --pmpro--color--contrast: var(--color-text);
  --pmpro--color--accent: var(--color-navy);
  --pmpro--color--accent--variation: var(--color-navy-2);
  --pmpro--color--border--variation: rgba(12,27,46,.18);
  --pmpro--border--radius: 2px;
  font-family: "DM Sans", system-ui, sans-serif;
}

.pmpro-page .pmpro_card {
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-paper, 0 18px 40px -30px rgba(12,27,46,.35));
}
.pmpro-page .pmpro_card_title,
.pmpro-page .pmpro_form_heading,
.pmpro-page .pmpro_form_legend .pmpro_form_heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  color: var(--color-text);
}
.pmpro-page .pmpro_level_cost_text,
.pmpro-page .pmpro_level_name_text { color: var(--color-text); }

.pmpro-page .pmpro_form_label { color: var(--color-text); font-weight: 500; }
.pmpro-page .pmpro_form_input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 46px;
  border: 1px solid rgba(12,27,46,.22);
  border-radius: 2px;
  background: #fff;
  color: var(--color-text);
}
.pmpro-page .pmpro_form_input:focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 2px;
  border-color: var(--color-navy);
}
.pmpro-page a { color: var(--color-gold-ink); }

/* ── Buttons — the locked gold/navy treatment ───────────────────────────────
   The pale pink Submit came from PMPro's accent variables, never from the
   theme. These rules match .btn-gold in site.css: gold field, navy ink
   (8.8:1), --color-gold-light on hover, a gold focus ring, and a dimmed,
   unlifted disabled state (PMPro disables Submit while processing). */
.pmpro-page .pmpro_btn:not(.pmpro_btn-plain),
.pmpro-page input.pmpro_btn-submit-checkout,
.pmpro-page #pmpro_btn-submit {
  min-height: 52px;
  padding: .95rem 2rem;
  border: 1px solid #d4af37;
  border-radius: 2px;
  background: #d4af37;
  color: var(--color-navy-3, #081421);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .11em;
  line-height: 1.1;
  text-transform: uppercase;
  box-shadow: 0 10px 26px -14px rgba(212,175,55,.7);
  cursor: pointer;
}
.pmpro-page .pmpro_btn:not(.pmpro_btn-plain):hover,
.pmpro-page #pmpro_btn-submit:hover {
  border-color: #e8c84a;
  background: #e8c84a;
  color: var(--color-navy-3, #081421);
}
.pmpro-page .pmpro_btn:not(.pmpro_btn-plain):focus-visible,
.pmpro-page #pmpro_btn-submit:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(212,175,55,.45);
}
.pmpro-page .pmpro_btn:not(.pmpro_btn-plain):disabled,
.pmpro-page .pmpro_btn:not(.pmpro_btn-plain)[aria-disabled="true"],
.pmpro-page #pmpro_btn-submit:disabled {
  border-color: rgba(212,175,55,.45);
  background: rgba(212,175,55,.45);
  color: rgba(8,20,33,.6);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.pmpro-page .pmpro_btn-plain { color: var(--color-text); }

@media (max-width: 639px) {
  .pmpro-page #pmpro_btn-submit { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .pmpro-page .pmpro_btn:not(.pmpro_btn-plain),
  .pmpro-page #pmpro_btn-submit {
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .pmpro-page .pmpro_btn:not(.pmpro_btn-plain):not(:disabled):hover,
  .pmpro-page #pmpro_btn-submit:not(:disabled):hover { transform: translateY(-2px); }
}