/* membership.css — PMPro's four pages (levels, checkout, account, login),
   restyled with this theme's tokens. Enqueued ONLY on those pages (see
   inc/enqueue.php) — never loaded sitewide, never in global.css.

   STRATEGY: inherit, don't dequeue. PMPro's own base.css and
   variation_1.css stay enqueued and load first; this file only overrides
   the resolved color/spacing/type properties on PMPro's real class
   names (.pmpro_card, .pmpro_btn, .pmpro_form_input, …), using this
   theme's own tokens as the values. Dequeuing PMPro's CSS was rejected —
   it would mean reimplementing every layout, state and responsive rule
   PMPro's markup already depends on (the mobile card transform for
   .pmpro_levels_table below is a working example: PMPro's own base.css
   already turns it into label/value rows via data-title + ::before at
   767px; this file only adds the card border/shadow/spacing on top of
   that, it doesn't reimplement it) — "owning every screen forever", the
   exact tradeoff Pass 21 was warned about.

   ONE DELIBERATE NON-OVERRIDE: this file never redefines PMPro's own
   --pmpro--color--* custom properties. PMPro injects a second, LATER
   <style id="pmpro_colors"> block directly in <head> (after this
   enqueued stylesheet) that redeclares those same properties on :root —
   at equal specificity, later source order wins, so redefining them here
   would just lose to that block on every page load. Setting resolved
   properties (background-color, color, border-color, …) directly on
   PMPro's class names sidesteps that race entirely.

   NO !important anywhere in this file — every selector here matches or
   exceeds the specificity of the PMPro/WP-core rule it overrides, and
   this stylesheet is enqueued to load after both PMPro stylesheets, so
   normal cascade order is sufficient.

   Presentation only, throughout: no PMPro markup, field, or behavior is
   changed by anything below.
   ========================================================================== */

/* ==========================================================================
   1. CARDS, SECTION HEADINGS, MESSAGES — shared by all four pages
   ========================================================================== */

.pmpro .pmpro_card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.pmpro .pmpro_card_title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
}

.pmpro .pmpro_section_title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
}

.pmpro .pmpro_card_content {
  color: var(--color-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.pmpro .pmpro_card_actions {
  background: var(--color-surface-soft);
  border-color: var(--color-border-soft);
}

.pmpro .pmpro_list.pmpro_list-plain .pmpro_list_item {
  padding-block: var(--space-1);
  font-size: var(--text-body);
}

.pmpro .pmpro_list_item strong {
  color: var(--color-muted);
  font-weight: var(--weight-semibold);
  margin-right: var(--space-1);
}

/* Contextual messages: bare .pmpro_message (no modifier) reads as info. */
.pmpro_message {
  border-radius: var(--radius-sm);
  border: none;
  border-left: 4px solid var(--color-brand);
  background: var(--color-brand-wash);
  color: var(--color-brand);
  font-size: var(--text-body);
  padding: var(--space-3);
  box-shadow: none;
}

.pmpro_message.pmpro_success {
  border-left-color: var(--color-accent-ink);
  background: var(--color-success-wash);
  color: var(--color-accent-ink);
}

.pmpro_message.pmpro_error {
  border-left-color: var(--color-alert);
  background: var(--color-alert-wash);
  color: var(--color-alert);
}

.pmpro_message.pmpro_alert {
  border-left-color: var(--color-warning);
  background: var(--color-warning-wash);
  color: var(--color-warning);
}

.pmpro_message a {
  color: inherit;
  text-decoration: underline;
}

.pmpro .pmpro_tag {
  border-radius: var(--radius-sm);
}

.pmpro .pmpro_tag-success {
  background: var(--color-success-wash);
  border-color: var(--color-accent-ink);
  color: var(--color-accent-ink);
}

.pmpro .pmpro_tag-error {
  background: var(--color-alert-wash);
  border-color: var(--color-alert);
  color: var(--color-alert);
}

.pmpro .pmpro_tag-alert {
  background: var(--color-warning-wash);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

/* ==========================================================================
   2. BUTTONS
   Reuses this theme's own button language rather than inventing a
   second one — same colors, same weight, same minimum tap size —
   applied to PMPro's actual class names since its markup can't change.
   ========================================================================== */

.pmpro .pmpro_btn {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  background: var(--color-brand);
  border: 1px solid var(--color-brand);
  color: var(--color-surface);
  box-shadow: none;
}

.pmpro .pmpro_btn:hover,
.pmpro .pmpro_btn:focus {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-surface);
}

/* The box-shadow:none above (stripping PMPro's own default drop shadow)
   has higher specificity (2 classes) than global.css's bare
   ":focus-visible { box-shadow: var(--focus-ring); }" (1 pseudo-class),
   so it was silently cancelling the focus ring on every PMPro button,
   including the checkout submit button — found by tabbing through the
   real checkout form and checking computed styles via CDP, not
   assumed. This rule's extra pseudo-class is enough to win back over
   the resting-state rule above without needing !important. Covers every
   .pmpro_btn variant (select, submit-checkout, outline, cancel, delete,
   plain) in one place, since they all carry the base .pmpro_btn class. */
.pmpro .pmpro_btn:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Pass 21 made Select/Log In/Submit and Check Out large green slabs —
   wrong per tokens.css itself (green is a surface color, "NEVER text or
   link color", and a primary action's background reads the same way a
   link does: something you're told to act on). Pass 22, Problem 2:
   primary actions are navy with white text, which is exactly what the
   base .pmpro_btn rule above already is — so there is no color override
   left to make here. .pmpro_btn-select isn't even reachable any more
   (the levels page is a theme template override now, Problem 3, using
   .btn--primary directly instead of PMPro's own table markup); kept
   below only as a safety net in case PMPro ever renders it elsewhere,
   and left with no color override so it inherits the base navy too.
   The one exception: the header's "Join OSTA" button, on every page
   including these — still green, because header.php is off-limits this
   pass, not a design choice made here. No rule for .pmpro_btn-select
   follows on purpose: nothing left to override. */

/* Submit and Check Out is still the single most important action on the
   page (Problem 4: "the submit button must be the most prominent
   element on the page") — carried by size and full width now, not
   color, consistent with Problem 2's "no color alone" and the audience
   brief neither of these buttons should ever have relied on. */
.pmpro .pmpro_btn-submit-checkout {
  width: 100%;
  font-size: var(--text-lead);
  font-weight: var(--weight-bold);
  padding: var(--space-3) var(--space-4);
}

/* .pmpro_form_submit is display:flex (PMPro's own base.css); the
   button's own width:100% above only fills #pmpro_submit_span, the
   actual flex item wrapping it — and a flex item doesn't grow to fill
   its row by default, so the button was rendering at content width
   (~292px) inside a 1152px-wide row, not full width. Confirmed by
   measuring both elements' rects, not guessed. Growing the flex item
   itself is what actually makes the button "the most prominent element
   on the page" (Problem 4). */
.pmpro .pmpro_form_submit #pmpro_submit_span {
  flex: 1 1 100%;
}

.pmpro .pmpro_btn-outline {
  background: transparent;
  border: 3px solid var(--color-brand);
  color: var(--color-brand);
}

.pmpro .pmpro_btn-outline:hover,
.pmpro .pmpro_btn-outline:focus {
  background: var(--color-brand-wash);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.pmpro .pmpro_btn-cancel {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-body);
}

.pmpro .pmpro_btn-cancel:hover,
.pmpro .pmpro_btn-cancel:focus {
  background: var(--color-surface-soft);
  border-color: var(--color-border);
  color: var(--color-body);
}

.pmpro .pmpro_btn-delete {
  background: var(--color-alert);
  border-color: var(--color-alert);
  color: var(--color-surface);
}

/* No --color-alert-hover token exists, and adding one for a single
   :hover state would be a fourth new token for a cosmetic detail —
   opacity (already this codebase's pattern for a button state, see
   .btn[disabled] in global.css) gets the same "clearly a state changed"
   result without inventing a color. */
.pmpro .pmpro_btn-delete:hover,
.pmpro .pmpro_btn-delete:focus {
  opacity: 0.85;
}

/* Plain/text buttons (the password show/hide toggle) must stay
   unfilled — declared after the base .pmpro_btn rule above so it wins
   at equal specificity regardless of the two plugin stylesheets' own
   internal order. */
.pmpro .pmpro_btn-plain {
  min-height: auto;
  min-width: auto;
  background: transparent;
  border: none;
  color: var(--color-brand);
  padding: 0;
  /* PASS "Restyle the checkout page": was --text-small (16px), below
     this pass's explicit 18px body-text floor for this audience. */
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
}

.pmpro .pmpro_btn-plain:hover,
.pmpro .pmpro_btn-plain:focus {
  background: transparent;
  color: var(--color-brand-hover);
}

.pmpro .pmpro_form_field-password-toggle button {
  min-height: var(--tap-min);
  color: var(--color-brand);
  /* PASS "Restyle the checkout page": PMPro core's own variation_1.css
     hardcodes font-size: 16px on this EXACT selector (.pmpro .pmpro_
     form_field-password-toggle button — nested inside .pmpro{} there),
     which has HIGHER specificity than .pmpro_btn-plain (two classes +
     one element vs. two classes alone) and so was winning over this
     pass's own .pmpro_btn-plain font-size bump — confirmed live via
     CSS.getMatchedStylesForNode, not guessed. Matching that exact
     selector here, at equal specificity, later in source order, is
     what actually wins it back up to the 18px floor. */
  font-size: var(--text-body);
}

/* Known, accepted gap: the password-toggle eye icon's stroke color is
   set inline in PMPro's SVG markup (stroke="var(--pmpro--color--accent)"),
   which this file cannot reach without redefining that custom property
   sitewide — the exact race condition explained at the top of this file.
   It stays PMPro's own teal. Cosmetic only: a ~20px decorative icon next
   to text that already reads "Show/Hide Password", not a contrast or
   functionality issue. */

/* ==========================================================================
   3. FORM FIELDS
   ========================================================================== */

.pmpro .pmpro_form_label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  /* PASS "Restyle the checkout page": was --text-small (16px). This
     pass's own explicit floor is 18px body text for this audience,
     superseding the smaller label size an earlier pass judged
     acceptable — every field label on checkout now meets --text-body. */
  font-size: var(--text-body);
  color: var(--color-ink);
}

.pmpro .pmpro_form_input {
  min-height: var(--tap-min);
  padding: var(--space-2);
  font-size: var(--text-body);
  font-family: var(--font-body);
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 4 — was --color-border (1.53:1 on white). Same
     fix as the global input/select/textarea border. */
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: none;
}

.pmpro .pmpro_form_input:focus {
  background: var(--color-surface);
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
  outline: none;
}

.pmpro .pmpro_form_input.pmpro_form_input-error {
  border-color: var(--color-alert);
  box-shadow: none;
}

.pmpro .pmpro_form_hint {
  /* PASS "Restyle the checkout page": was --text-small (16px) — same
     18px floor as .pmpro_form_label above. */
  font-size: var(--text-body);
  color: var(--color-muted);
  opacity: 1; /* --color-muted is already tuned to 5.91:1 on white; PMPro's
                 own 0.75 opacity would needlessly dim it further. */
}

.pmpro .pmpro_form_fieldset {
  min-width: 0;
}

/* PASS "Declutter the checkout page" — tighten the vertical gap between
   fields within a card (PMPro core's own variation_1.css sets
   .pmpro_form_fields to flex column with an 18px gap,
   --pmpro--base--spacing--medium) so the merged "Your Details" card in
   particular reads shorter with its ~10 fields, without touching any
   field's own size: .pmpro_form_input already has min-height: var(
   --tap-min) (48px, set above) — that's the actual tap target, and
   this rule never changes it, only the empty space BETWEEN inputs. 16px
   (this theme's own --space-2 token, in place of PMPro's un-tokenized
   18px) is a small, deliberate reduction, not a cram — still clearly
   more than a hairline between two 48px-tall touch targets. */
.pmpro .pmpro_form_fields {
  gap: var(--space-2);
}

.pmpro .pmpro_asterisk abbr {
  color: var(--color-alert);
}

/* ==========================================================================
   4. TABLES (order history — the levels page is no longer a table, see
   section 4a below)
   ========================================================================== */

.pmpro .pmpro_table th,
.pmpro .pmpro_table td {
  font-size: var(--text-body);
  border-bottom: 1px solid var(--color-border-soft);
}

.pmpro .pmpro_table thead th {
  border-bottom: 2px solid var(--color-border);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

/* Below 767px, PMPro's own base.css already turns each row into a
   label/value stack (data-title + ::before, see base.css's Responsive
   Styles section) — that mechanism is untouched. This only adds the
   card border/shadow/spacing so each row actually reads as a distinct
   card, matching Step 2's "readable cards below the mobile breakpoint". */
@media (max-width: 767px) {
  .pmpro .pmpro_table_orders tbody tr {
    display: block;
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    box-shadow: var(--shadow-card);
  }

  .pmpro .pmpro_table_orders tbody tr:last-child {
    margin-bottom: 0;
  }

  .pmpro .pmpro_table_orders tbody tr th,
  .pmpro .pmpro_table_orders tbody tr td {
    border-bottom: 1px solid var(--color-border-soft);
    padding-block: var(--space-1);
  }

  .pmpro .pmpro_table_orders tbody tr th:last-child,
  .pmpro .pmpro_table_orders tbody tr td:last-child {
    border-bottom: none;
  }

  .pmpro .pmpro_table_orders tbody tr th::before,
  .pmpro .pmpro_table_orders tbody tr td::before {
    color: var(--color-muted);
    font-weight: var(--weight-semibold);
  }
}

/* ==========================================================================
   4a. LEVEL CARDS (levels page) — Pass 22, Problem 3.
   PMPro's own Level / Price / Select table gave no reason to pick $90
   over $30. This theme now supplies its own copy of
   paid-memberships-pro/pages/levels.php (PMPro's documented theme-
   override point — see that file's docblock), rendering three cards via
   this theme's own .card-grid/.card (global.css, Pass 21) instead of
   PMPro's table. The classes below (osta-level-*) style what that
   override adds on top of .card; core card look and feel — border,
   shadow, radius, padding — is already .card's job, not repeated here.
   ========================================================================== */

.osta-level-group {
  margin-bottom: var(--space-6);
}

.osta-level-group:last-child {
  margin-bottom: 0;
}

.osta-level-group__title {
  margin-bottom: var(--space-2);
}

/* Each card is a flex column so .card__footer (the action button) lines
   up at the same baseline across all three cards regardless of how much
   text is above it — matters once real level descriptions exist and
   are different lengths. */
.osta-level-card {
  display: flex;
  flex-direction: column;
}

.osta-level-card__eyebrow {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-semibold);
  color: var(--color-accent-ink);
  margin: 0 0 var(--space-1);
}

/* "Your Current Plan" is a fact about the logged-in visitor's own
   membership, not an editorial "recommended" judgment (Problem 3
   explicitly rules that out) — this is the "a selected state" use of
   green Problem 2 allows as an accent, on a rule rather than as text. */
.osta-level-card--current {
  border-top: 4px solid var(--color-accent);
}

.osta-level-card__price {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin: var(--space-2) 0 0;
}

.osta-level-card__price strong {
  font-weight: inherit;
}

.osta-level-card__includes {
  flex-grow: 1;
  margin-top: var(--space-3);
  color: var(--color-body);
}

.osta-level-card__includes p:last-child {
  margin-bottom: 0;
}

.osta-level-card .card__footer {
  margin-top: var(--space-4);
}

/* ==========================================================================
   4b. CHECKOUT GROUPING — Pass 22, Problem 4. Gap tightened in PASS
   "Restyle the checkout page to match the approved design".
   PMPro already emits several separate <fieldset><div class="pmpro_card">
   groups (Membership Information, Account Information, Billing Address,
   Payment Information, …) — section 1 above already gives each its own
   border/shadow/radius via .pmpro_card. What was missing originally was
   RHYTHM: PMPro's own fieldset has margin:0, so the only gap between one
   card and the next was each card's own small ~18px default margin — not
   enough to read as separate groups on a form this long. Generous
   between, unchanged within: only the fieldset's own outer margin
   changes here, nothing inside a card.
   --space-8 (64px) read as "large empty vertical gaps" against the
   approved design's own tighter rhythm (the mockup's own gap-6 utility,
   24px) — brought down to --space-3 (24px) to match, still clearly more
   than a hairline between distinct cards.
   ========================================================================== */

.pmpro .pmpro_form_fieldset {
  margin-bottom: var(--space-3);
}

.pmpro .pmpro_form_fieldset:last-of-type {
  margin-bottom: var(--space-3);
}

/* The submit button is the most important thing on the page (Problem 4)
   — isolating it in its own quiet band, separate from Payment
   Information above, is what actually makes it read as "the next and
   final step" rather than one more form row. */
.pmpro .pmpro_form_submit {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   5. LOGIN PAGE — this is core WordPress's own wp_login_form() output,
   wrapped by the [pmpro_login] shortcode, not PMPro's own form markup —
   different class names entirely (.login-username, .input,
   .button-primary), so none of the .pmpro_form_* rules above reach it.
   ========================================================================== */

/* Problem 5: "the form is too wide for what it contains". page.php
   (Problem 1's fix) gives every page.php page the sitewide 1200px
   .container — right for checkout's multi-column fields or three level
   cards, too wide for two fields and a checkbox. PMPro stamps a
   pmpro-login body class on this one page specifically (see
   includes/init.php), which is what this is scoped to.
   Deliberately NOT done by shrinking .container's own max-width: that
   element also carries margin-inline: auto, so narrowing it recenters
   the box in the full viewport and drags the title away from the
   header logo's left edge — measured 376.5px vs 136.5px at 1440px
   before this comment was corrected. .container itself stays exactly
   as it is everywhere else; only its two direct children below are
   capped to .container--narrow's measure (720px) with no margin of
   their own, so default block layout keeps them flush against the same
   left edge .container already establishes, only narrower. */
body.pmpro-login .page-header__row,
body.pmpro-login .pmpro {
  max-width: var(--measure-max);
}

#loginform p {
  margin-bottom: var(--space-3);
}

#loginform label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 2 — a form label, was --text-small (16px). Matches
     .pmpro .pmpro_form_label above, already fixed the same way by
     "Restyle the checkout page". */
  font-size: var(--text-body);
  color: var(--color-ink);
}

/* PMPro's own variation_1.css nests its whole stylesheet inside a single
   ".pmpro { … }" block, using native CSS nesting (the "&" combinator) —
   so a selector that reads ".pmpro_section #loginform .input" in the
   source actually compiles to ".pmpro .pmpro_section #loginform .input"
   (1 ID + 3 classes), one class more than it looks like at a glance.
   Confirmed via CSS.getMatchedStylesForNode, not guessed — an earlier
   version of this rule that only matched the visible source text lost
   to it. Matched exactly here so this file's later cascade position is
   what decides it, same as everywhere else in this file. */
.pmpro .pmpro_section #loginform .input {
  min-height: var(--tap-min);
  padding: var(--space-2);
  font-size: var(--text-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}

.pmpro .pmpro_section #loginform .input:focus {
  background: var(--color-surface);
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
  outline: none;
}

#loginform .login-remember label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--weight-regular);
  min-height: var(--tap-min);
}

#loginform .login-remember input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-height: 24px;
}

#loginform .login-submit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 0;
}

/* Same nesting gap as .input above (see that comment): the real
   compiled selector is ".pmpro .pmpro_section #loginform .login-submit
   .button" (1 ID + 4 classes), matched exactly here. */
/* Navy, not accent green — Log In is a primary action (Pass 22,
   Problem 2), same reasoning as the .pmpro_btn buttons above. */
.pmpro .pmpro_section #loginform .login-submit .button {
  /* width intentionally not set here — base.css's own
     "#loginform input[type=submit] { width: 100% }" already makes this
     a full-width, easy-to-find button, which suits this audience; this
     rule only overrides its color/type/padding, not its width. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
  color: var(--color-surface);
  font-weight: var(--weight-bold);
  font-size: var(--text-lead);
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
}

.pmpro .pmpro_section #loginform .login-submit .button:hover,
.pmpro .pmpro_section #loginform .login-submit .button:focus {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-surface);
}

/* Same box-shadow:none problem as the general .pmpro_btn rule above —
   this button's own resting-state reset needs its own :focus-visible
   override at matching specificity. */
.pmpro .pmpro_section #loginform .login-submit .button:focus-visible {
  box-shadow: var(--focus-ring);
}

.pmpro_actions_nav a,
.pmpro_link {
  color: var(--color-brand);
}

.pmpro_actions_nav a:hover,
.pmpro_link:hover {
  color: var(--color-brand-hover);
}

/* ==========================================================================
   9. CHAPTER INFORMATION — Pass 23. The county/chapter fields inherit
   PMPro's own .pmpro_form_input styling automatically (already covered
   above); the two additions below are specific to this pass.
   ========================================================================== */

/* The account page's appended "Chapter Information" card (theme override,
   paid-memberships-pro/pages/account.php) sits right after PMPro's own
   account sections, which end with no bottom margin of their own. */
.osta-account-chapter-info {
  margin-top: var(--space-4);
}

/* The chapter <select>'s disabled "No chapters yet in {County} County"
   option (inc/checkout-fields.php, osta_chapter_select_html()) — muted,
   italic, so it visually reads as unavailable rather than a normal choice. */
.pmpro select#osta_chapter_id option:disabled {
  color: var(--color-muted);
  font-style: italic;
}

/* Section 10 (PAYMENT METHOD SELECTOR) removed in "Declutter the
   checkout page" — its markup, osta_render_payment_methods() in inc/
   checkout-payment.php, was deleted outright: a theme-built radio
   display sitting next to PMPro's own real Billing Address / Payment
   Information fieldsets, exactly the second/duplicate payment UI that
   pass explicitly required removing. See that file's own docblock. */

/* ==========================================================================
   11. CHECKBOXES (Auto-Renewal + Same as billing address) — Pass 60
   originally scoped this to #pmpro_autorenewal_checkbox only. PASS
   "Restyle the checkout page" GENERALIZES it to every inline checkbox
   PMPro renders this same way on checkout — .pmpro_form_label-inline is
   the SAME class PMPro's own PMPro_Field::getHTML() gives a checkbox's
   wrapping <label> regardless of which field it is (class-pmpro-
   field.php, checkbox branch — confirmed by reading it, not assumed),
   so one rule now covers both "Yes, renew…" and "Same as billing
   address" identically, per this pass's own explicit instruction that
   the two "should look consistent."
   THE ACTUAL BUG THIS PASS FOUND: nothing before this ever set a WIDTH
   on the checkbox input itself — only .pmpro_form_input's own sitewide
   min-height: var(--tap-min) (48px) was reaching it (checkboxes carry
   that class too), stretching a native ~13px-wide checkbox to 13×48px,
   a visibly broken sliver rather than a square control. Measured live
   before fixing: computed 13px × 48px. Explicit width/height below fixes
   it; the 48px TAP TARGET requirement is met by the wrapping row (min-
   height: var(--tap-min) below), the same "small glyph inside a full-
   height clickable row" pattern this file already used for Auto-Renewal
   — a real checkbox rendered at 48×48px would look oversized next to
   18px label text; the WCAG target-size guidance is about the
   clickable/tappable area, which the row already satisfies.
   ========================================================================== */

.pmpro .pmpro_form_label-inline.pmpro_clickable {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: var(--weight-regular);
}

.pmpro .pmpro_form_label-inline.pmpro_clickable:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-wash);
}

.pmpro .pmpro_form_input-checkbox {
  width: 24px;
  height: 24px;
  min-height: 24px;
  min-width: 24px;
  flex-shrink: 0;
  margin-top: 2px; /* Optically centers against the label's own first line of text. */
  accent-color: var(--color-brand);
}

.pmpro .pmpro_form_label-inline.pmpro_clickable .pmpro_form_input:focus-visible {
  box-shadow: none; /* The wrapping label's own focus-visible ring (below) is the real indicator. */
}

.pmpro .pmpro_form_label-inline.pmpro_clickable:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

/* Section 12 (MOCK PAYMENT PREVIEW) removed in "Declutter the checkout
   page" — inc/checkout-mock-payment.php (mock card/expiry/CVC, "Demo
   preview" note, and the collapsed "Current live payment setup"
   disclosure) was deleted outright, per that pass's own explicit
   instruction. PMPro's own real Billing Address / Payment Information
   fieldsets (hardcoded into the plugin's checkout.php, unstyled by this
   theme beyond the shared .pmpro_form_input/.pmpro_form_label rules
   above) are now the only payment UI on the page. */
#pmpro_form_fieldset-before_submit_button .pmpro_form_label {
  font-size: var(--text-body);
}

/* ==========================================================================
   12a. MAILING ADDRESS GROUP LAYOUT — PASS "Fix checkout order + mailing
   address layout". Presentation only, same as every rule in this file:
   the Mailing Address Add On's own PMPro_Field_Group::display() markup
   (inc/checkout-mailing-address.php calls it directly, unmodified —
   'card' args, same as PMPro core's own early-boxes loop) already gives
   each field its own <div id="{field}_div" class="pmpro_form_field ...">
   inside one #pmpro_form_fieldset-pmproship .pmpro_form_fields
   container — nothing here changes that markup, only how those existing
   divs lay out relative to each other.

   A 6-column grid lets a 2-item row (First/Last Name, 3 cols each) and a
   3-item row (City/State/Postal Code, 2 cols each) share one grid
   without needing two different column counts or a wrapper div PMPro
   doesn't render. Every other field (address 1/2, phone) spans the full
   6 columns, same full-width single-field-per-row look the rest of
   checkout already uses.

   Field IDs are stable and add-on-owned (pmpro-shipping.php's own
   $text_fields_map keys) — targeted directly, not by fragile
   :nth-child() position, so a future PMPro/add-on markup change that
   reorders fields doesn't silently break this layout.
   ========================================================================== */

#pmpro_form_fieldset-pmproship .pmpro_form_fields {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--space-3);
}

#pmpro_sfirstname_div,
#pmpro_slastname_div {
  grid-column: span 3;
}

#pmpro_scity_div,
#pmpro_sstate_div,
#pmpro_szipcode_div {
  grid-column: span 2;
}

#pmpro_saddress1_div,
#pmpro_saddress2_div,
#pmpro_sphone_div,
#pmproship_same_billing_address_div {
  grid-column: 1 / -1;
}

/* Hide mailing inputs while "Same as billing" is checked — CSS so the
   fields never flash visible before checkout-same-as-billing.js runs.
   Unchecking the native checkbox reveals them. Country stays hidden. */
#pmpro_form_fieldset-pmproship:has(#pmproship_same_billing_address:checked) .pmpro_form_fields > .pmpro_form_field:not(#pmproship_same_billing_address_div) {
  display: none !important;
}

/* Country: OSTA is Oregon-only (single-country membership). The field
   stays real and submitted (PMPro's own default pre-selects "United
   States" — inc/checkout-mailing-address.php touches nothing about its
   value), just not shown. display:none does not exclude a <select> from
   form submission — only a missing name= or the disabled attribute does
   — so this is presentation-only, same as every other rule in this
   section, and works identically with JavaScript disabled. */
#pmpro_scountry_div {
  display: none;
}

@media (max-width: 599px) {
  #pmpro_form_fieldset-pmproship .pmpro_form_fields {
    grid-template-columns: 1fr;
  }

  #pmpro_sfirstname_div,
  #pmpro_slastname_div,
  #pmpro_scity_div,
  #pmpro_sstate_div,
  #pmpro_szipcode_div {
    grid-column: 1;
  }
}

/* ==========================================================================
   12b. ONE PAYMENT INFORMATION CARD — PASS "Restyle the checkout page to
   match the approved design". Billing Address, Payment Information, and
   Mailing Address are still THREE separate PMPro fieldsets/cards in the
   DOM — nothing here merges them structurally, and nothing here touches
   PMPro's own Billing Address fieldset (kept exactly where PMPro puts
   it, per this pass's own explicit "must stay... do not remove or
   relocate it" instruction). What changes is purely which BORDERS/
   SHADOWS/RADII/MARGINS render at the two seams between them, so the
   three read as one continuous card — background, border and padding
   are otherwise untouched (still section 1's shared .pmpro_card rules).

   Each seam: the card ABOVE loses its bottom border/radius/shadow AND
   its bottom margin (so there's no gap to close); the card BELOW loses
   its top border/radius (its own shadow is also dropped, so one edge
   doesn't get a doubled-up shadow line) and gets a single 1px divider
   line drawn INSET inside its own content area — the same "border-top
   on the content, not the card edge" technique the approved design's
   own mockup uses ("Mailing Address" sits below a `border-t` divider
   inside the card, not a second bordered box).
   ========================================================================== */

/* Seam 1: Billing Address → Payment Information. */
#pmpro_billing_address_fields {
  margin-bottom: 0;
}

#pmpro_billing_address_fields .pmpro_card {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#pmpro_payment_information_fields .pmpro_card {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none;
}

#pmpro_payment_information_fields .pmpro_card_content {
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-4);
}

/* Seam 2: Payment Information → Mailing Address (the "Same as billing
   address" checkbox and the fields beneath it — no separate card,
   separated by a divider, per this pass's own explicit instruction). */
#pmpro_payment_information_fields {
  margin-bottom: 0;
}

#pmpro_payment_information_fields .pmpro_card {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#pmpro_form_fieldset-pmproship .pmpro_card {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none;
}

#pmpro_form_fieldset-pmproship .pmpro_card_content {
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-4);
}

/* The Mailing Address group's own PMPro-rendered <h2> card title
   ("Mailing Address") stays as real text (never remove a heading a
   screen reader depends on to know what section it's in) but is
   restyled down from a full card title to a sub-heading, matching the
   approved design's own smaller "Mailing Address" label sitting inside
   the Payment Information card rather than announcing a new one. */
#pmpro_form_fieldset-pmproship .pmpro_card_title {
  font-size: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   12c. STRIPE ELEMENTS WRAPPERS — the Card Number / Expiration / CVC
   fields are Stripe.js-mounted iframes (js.stripe.com), not plain
   inputs; PMPro core's own base CSS gives their wrapper <div>s a
   background/radius/padding by ID (#AccountNumber/#Expiry/#CVV) but no
   border, so they read slightly inconsistent next to this theme's own
   bordered .pmpro_form_input fields. This styles only the WRAPPER divs
   this theme can reach — never anything inside the iframe itself (its
   own font size/colors are Stripe.js's own style config, passed by
   PMPro core at mount time; touching that is touching the Stripe
   integration, explicitly out of scope for this pass). Confirmed live:
   the wrapper itself already measures 48px+ tall — this only makes its
   border/radius match .pmpro_form_input, nothing about its size.
   ========================================================================== */

.pmpro_checkout_gateway-stripe #pmpro_payment_information_fields div#AccountNumber,
.pmpro_checkout_gateway-stripe #pmpro_payment_information_fields div#Expiry,
.pmpro_checkout_gateway-stripe #pmpro_payment_information_fields div#CVV {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   12d. "ALREADY HAVE AN ACCOUNT?" LINK — moved below the submit button,
   per the approved design. See inc/checkout-layout.php's own docblock
   for the mechanics (the original stays in place, hidden with CSS only;
   a second, real, server-rendered copy renders after the form). Hiding
   the original with display:none removes it from the accessibility tree
   entirely (unlike visibility:hidden), so a screen reader never
   announces it twice.
   ========================================================================== */

#pmpro_user_fields .pmpro_card_actions {
  display: none;
}

.osta-checkout-login-link {
  text-align: center;
  margin: var(--space-4) 0 0;
  font-size: var(--text-body);
  color: var(--color-body);
}

.osta-checkout-login-link a {
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
}

.osta-checkout-login-link a:hover,
.osta-checkout-login-link a:focus {
  color: var(--color-brand-hover);
}

/* ==========================================================================
   13. MEMBERSHIP LEVELS PAGE — full custom redesign, replacing the old
   bare [pmpro_levels] shortcode output. Section 4a above (LEVEL CARDS)
   styled that shortcode's own markup/classnames — this page no longer
   renders that shortcode at all, so section 4a is simply unused here
   now (left in place, not deleted, in case a future pass restores it).

   SECTION RHYTHM: every section below uses the sitewide .section class
   (80px top+bottom) for the token, but overrides padding-block to a
   single --space-6 (48px) — learned on the earlier News/About passes:
   .section's 80px+80px is correct for a page with fewer, larger
   sections, but stacks into visibly excessive gaps on a page with this
   many short sections back to back. Applied here from the start rather
   than shipped loose and fixed after the fact.
   ========================================================================== */

.membership-levels-reassurance,
.membership-levels-pricing,
.membership-levels-receives,
.membership-levels-faq {
  padding-block: var(--space-6);
}

/* ---- Reassurance callout (directly below the hero) ---- */

.membership-levels-reassurance__text {
  max-width: var(--measure-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-brand);
  background: var(--color-surface-soft);
  border-radius: var(--radius-sm);
  font-style: italic;
  color: var(--color-body);
}

/* ---- Pricing ---- */

.membership-levels-pricing__heading {
  text-align: center;
  margin: 0 0 var(--space-2);
}

.membership-levels-pricing__intro {
  text-align: center;
  max-width: var(--measure-max);
  margin: 0 auto var(--space-6);
  color: var(--color-body);
}

.membership-levels-pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 900px) {
  .membership-levels-pricing__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.membership-levels-pricing__card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.membership-levels-pricing__card--popular {
  /* Same emphasis language .card--primary/the timeline's own highlighted
     node already use sitewide — navy border + stronger shadow, not a
     new visual system. */
  border: 2px solid var(--color-brand);
  box-shadow: var(--shadow-primary);
}

@media (min-width: 900px) {
  .membership-levels-pricing__card--popular {
    /* A popular card that's visually a little larger reads more like
       "the recommended one" than an identical card with just a badge —
       kept modest so it doesn't fight the grid at narrower widths. */
    transform: scale(1.03);
  }
}

.membership-levels-pricing__badge {
  position: absolute;
  top: calc(-1 * var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-surface);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.membership-levels-pricing__name {
  margin: var(--space-2) 0 0;
}

.membership-levels-pricing__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 var(--space-2);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
}

.membership-levels-pricing__period {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
}

.membership-levels-pricing__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-grow: 1;
}

.membership-levels-pricing__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-body);
}

.membership-levels-pricing__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  /* --color-accent-ink, not the plain --color-accent — a checkmark is a
     meaningful graphic (it conveys "included"), not pure decoration, so
     it needs the same ≥3:1 non-text-contrast floor a real UI control
     would (WCAG 1.4.11). Plain --color-accent measures 2.10:1 on white,
     under that floor; --color-accent-ink measures 5.52:1 — the only
     green sitewide that's ever permitted as a foreground colour for
     exactly this reason (tokens.css). */
  color: var(--color-accent-ink);
}

.membership-levels-pricing__cta {
  margin-top: auto;
}

/* ---- What Every Member Receives ---- */

.membership-levels-receives__heading {
  text-align: center;
  margin: 0 0 var(--space-6);
}

.membership-levels-receives__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  background: var(--color-brand-wash);
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}

.membership-levels-receives__icon svg {
  width: 26px;
  height: 26px;
}

/* ---- FAQ ---- */

.membership-levels-faq__inner {
  max-width: 800px;
}

.membership-levels-faq__heading {
  text-align: center;
  margin: 0 0 var(--space-5);
}

.membership-levels-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.membership-levels-faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
}

.membership-levels-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding-block: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.membership-levels-faq__toggle::-webkit-details-marker {
  display: none;
}

.membership-levels-faq__toggle:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.membership-levels-faq__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-brand);
  transition: transform 150ms;
}

@media (prefers-reduced-motion: reduce) {
  .membership-levels-faq__chevron {
    transition: none;
  }
}

.membership-levels-faq__item[open] > .membership-levels-faq__toggle .membership-levels-faq__chevron {
  transform: rotate(180deg);
}

.membership-levels-faq__answer {
  padding-bottom: var(--space-3);
  color: var(--color-body);
}

.membership-levels-faq__answer p {
  margin: 0;
}

/* ---- Closing CTA ---- */

.membership-levels-cta {
  background: var(--color-brand);
  color: var(--color-surface);
  padding-block: var(--space-8);
}

.membership-levels-cta__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.membership-levels-cta__heading {
  color: var(--color-surface);
  margin: 0;
}

.membership-levels-cta__body {
  color: var(--color-surface);
  opacity: 0.92;
  margin: 0 0 var(--space-2);
}