/*
 * Press For Change — pmpro-style.css
 * Replaces PMPro's dequeued base.css + variation_1.css.
 *
 * Selectors verified against live DOM (PMPro 3.6.5):
 *
 * LEVELS PAGE structure:
 *   section#pmpro_levels.pmpro_section
 *     div.pmpro_section_content
 *       div#pmpro_level_group-1.pmpro_card.pmpro_level_group  ← white card
 *         div.pmpro_card_content
 *           table.pmpro_table.pmpro_levels_table
 *             thead > tr > th (Level / Price / Action)
 *             tbody
 *               tr#pmpro_level-1.pmpro_level
 *                 th[data-title="Level"]       ← level name
 *                 td > p.pmpro_level-price > strong
 *                 td > a.pmpro_btn.pmpro_btn-select
 *
 * PMPro also injects <style id="pmpro_colors"> with CSS variables
 * (dequeued in functions.php, but we override them here too as
 *  a belt-and-braces fallback).
 */

/* ─────────────────────────────────────────────
   OVERRIDE PMPRO CSS VARIABLES
   Belt-and-braces in case the inline style block
   survives — our values win via !important on
   the properties that use them.
   ───────────────────────────────────────────── */

:root {
    --pmpro--color--base:             #141c1e;
    --pmpro--color--contrast:         #e8f0f2;
    --pmpro--color--accent:           #30737d;
    --pmpro--color--accent--variation: #498a93;
    --pmpro--color--border--variation: rgba(48,115,125,0.22);
}

/* ─────────────────────────────────────────────
   MESSAGES
   ───────────────────────────────────────────── */

.pmpro_message {
    padding: 1rem 1.4rem !important;
    margin: 0 0 1.8rem !important;
    font-family: 'Crimson Pro', Georgia, serif !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    border: none !important;
    border-left: 3px solid var(--teal) !important;
    background: var(--ink-soft) !important;
    color: var(--ash-light) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.pmpro_message.pmpro_error,
.pmpro_message.pmpro_alert-danger {
    border-left-color: #9e3b1a !important;
    color: #d9806a !important;
    background: rgba(158,59,26,0.08) !important;
}

.pmpro_message.pmpro_success { border-left-color: var(--teal) !important; }
.pmpro_message a { color: var(--teal-bright) !important; }


/* ══════════════════════════════════════════════
   LEVELS PAGE
   ══════════════════════════════════════════════ */

/* Section wrapper — transparent */
#pmpro_levels,
#pmpro_levels .pmpro_section_content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* The white card wrapper — make it a transparent grid container */
.pmpro_card.pmpro_level_group,
#pmpro_level_group-1 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.pmpro_card_content {
    background: transparent !important;
    padding: 0 !important;
}

/* Strip all default table styles — display:block is required so
   tbody can become a grid container (browser ignores display:grid
   on a child of a display:table element) */
.pmpro_levels_table,
table.pmpro_levels_table {
    display: block !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    box-shadow: none !important;
}

/* Hide column headers — card layout doesn't need them */
.pmpro_levels_table thead {
    display: none !important;
}

/* Transform tbody into a card grid */
.pmpro_levels_table tbody {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 2px !important;
    width: 100% !important;
}

/* Each row = one card */
.pmpro_levels_table tbody tr.pmpro_level {
    display: flex !important;
    flex-direction: column !important;
    background: var(--ink-soft) !important;
    border: 1px solid rgba(48,115,125,0.2) !important;
    padding: 2.5rem 2rem !important;
    transition: border-color 0.3s !important;
    vertical-align: top !important;
}

.pmpro_levels_table tbody tr.pmpro_level:hover {
    border-color: rgba(196,145,42,0.45) !important;
}

/* All cells become block elements */
.pmpro_levels_table tbody th,
.pmpro_levels_table tbody td {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    width: auto !important;
}

/* Level name — in a <th> */
.pmpro_levels_table tbody th[data-title="Level"] {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.9rem !important;
    font-weight: 300 !important;
    color: var(--vellum) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.1 !important;
    margin-bottom: 1.2rem !important;
}

/* Price cell */
.pmpro_levels_table tbody td[data-title="Price"] {
    flex: 1 !important;
    margin-bottom: 0.5rem !important;
}

.pmpro_level-price {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 2.2rem !important;
    font-weight: 300 !important;
    color: var(--gold) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

.pmpro_level-price strong {
    font-weight: 300 !important;
    color: var(--gold) !important;
}

/* Expiry / after-price info */
.pmpro_levels_table .pmpro_after_price,
.pmpro_levels_table td[data-title="Price"] p + p,
.pmpro_levels_table td[data-title="Price"] small {
    font-family: 'Crimson Pro', Georgia, serif !important;
    font-size: 0.85rem !important;
    color: var(--ash) !important;
    font-weight: 400 !important;
    display: block !important;
    margin-top: 0.4rem !important;
    line-height: 1.5 !important;
}

/* Action cell (third td, no data-title) — pinned to bottom */
.pmpro_levels_table tbody td:last-child {
    margin-top: auto !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid var(--gold-rule) !important;
}

/* Select button */
a.pmpro_btn.pmpro_btn-select,
.pmpro_levels_table a.pmpro_btn {
    display: block !important;
    background: var(--gold) !important;
    color: var(--ink) !important;
    padding: 0.8rem 1.5rem !important;
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.18em !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
}

a.pmpro_btn.pmpro_btn-select:hover {
    background: var(--gold-light) !important;
    color: var(--ink) !important;
}

/* Free level (level 4) — teal price + teal button */
#pmpro_level-4 .pmpro_level-price,
#pmpro_level-4 .pmpro_level-price strong {
    color: var(--teal-bright) !important;
}

#pmpro_level-4 a.pmpro_btn.pmpro_btn-select {
    background: var(--teal) !important;
    color: var(--vellum) !important;
}

#pmpro_level-4 a.pmpro_btn.pmpro_btn-select:hover {
    background: var(--teal-light) !important;
}

#pmpro_level-4 td:last-child {
    border-top-color: var(--teal-rule) !important;
}

/* Single Story (level 3) — also free, teal */
#pmpro_level-3 .pmpro_level-price,
#pmpro_level-3 .pmpro_level-price strong {
    color: var(--teal-bright) !important;
}

#pmpro_level-3 a.pmpro_btn.pmpro_btn-select {
    background: var(--teal) !important;
    color: var(--vellum) !important;
}

/* Current membership row */
.pmpro_levels_table tr.pmpro_is_current_level {
    border-color: rgba(48,115,125,0.45) !important;
}

.pmpro_levels_table tr.pmpro_is_current_level a.pmpro_btn {
    background: var(--teal) !important;
    color: var(--vellum) !important;
}

@media (max-width: 600px) {
    .pmpro_levels_table tbody {
        grid-template-columns: 1fr !important;
    }
}


/* ══════════════════════════════════════════════
   CHECKOUT PAGE  (/membership-checkout/)
   <form id="pmpro_form">
     <div id="pmpro_level_cost">
     <div id="pmpro_user_fields">
       <h3>Account Information</h3>
       <div class="pmpro_checkout-fields">
         <div class="pmpro_checkout-field pmpro_checkout-field-FIELDNAME">
           <label> / <input>
     <div id="pmpro_payment_information_fields">
     <div id="pmpro_submit_span">
       <input type="submit" class="pmpro_btn pmpro_btn-submit-checkout">
   ══════════════════════════════════════════════ */

#pmpro_form {
    max-width: 680px !important;
    margin: 0 auto !important;
    background: transparent !important;
}

/* Plan summary banner */
#pmpro_level_cost {
    background: var(--ink-soft) !important;
    border: none !important;
    border-left: 3px solid var(--gold) !important;
    outline: 1px solid var(--gold-rule) !important;
    padding: 1.5rem 2rem !important;
    margin-bottom: 2.5rem !important;
    color: var(--ash-light) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    border-radius: 0 !important;
}

#pmpro_level_cost strong { color: var(--gold) !important; font-weight: 300 !important; }

/* Section containers */
#pmpro_user_fields,
#pmpro_billing_address_fields,
#pmpro_payment_information_fields {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Section headings */
#pmpro_form h3 {
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.32em !important;
    color: var(--teal-bright) !important;
    text-transform: uppercase !important;
    margin: 2.5rem 0 1.2rem !important;
    padding: 0 0 0.6rem !important;
    border: none !important;
    border-bottom: 1px solid var(--rule) !important;
    background: transparent !important;
    display: block !important;
}

#pmpro_form h3:first-child { margin-top: 0 !important; }

/* Field grid */
.pmpro_checkout-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    align-items: start !important;
    background: transparent !important;
}

.pmpro_checkout-field {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Full-width fields */
.pmpro_checkout-field-username,
.pmpro_checkout-field-bemail,
.pmpro_checkout-field-bconfirmemail {
    grid-column: 1 / -1 !important;
}

/* Hide honeypot */
.pmpro_checkout-field-fullname { display: none !important; }

/* Labels */
.pmpro_checkout-field label,
#pmpro_form label {
    display: block !important;
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.25em !important;
    color: var(--ash) !important;
    margin-bottom: 0.35rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Inputs */
#pmpro_form input[type="text"],
#pmpro_form input[type="email"],
#pmpro_form input[type="password"],
#pmpro_form input[type="number"],
#pmpro_form input[type="tel"],
#pmpro_form select,
#pmpro_form textarea {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(48,115,125,0.25) !important;
    border-radius: 0 !important;
    color: var(--vellum) !important;
    padding: 0.78rem 0.95rem !important;
    font-family: 'Crimson Pro', Georgia, serif !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    width: 100% !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
}

#pmpro_form input:focus,
#pmpro_form select:focus {
    border-color: var(--teal) !important;
    background: rgba(255,255,255,0.06) !important;
}

#pmpro_form input::placeholder { color: var(--ash) !important; opacity: 0.5 !important; }

#pmpro_form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235da4af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.9rem center !important;
    background-color: rgba(255,255,255,0.04) !important;
    padding-right: 2.4rem !important;
}

#pmpro_form input[type="checkbox"],
#pmpro_form input[type="radio"] {
    width: auto !important;
    accent-color: var(--teal) !important;
    margin-right: 0.5rem !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Show-password button */
button.pmpro_btn-show-password {
    background: transparent !important;
    border: none !important;
    color: var(--teal-bright) !important;
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.14em !important;
    cursor: pointer !important;
    padding: 0.2rem 0 !important;
    box-shadow: none !important;
}

/* Stripe element */
.StripeElement, #card-element {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(48,115,125,0.25) !important;
    padding: 0.82rem 0.95rem !important;
    min-height: 44px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.StripeElement--focus  { border-color: var(--teal) !important; }
.StripeElement--invalid { border-color: #9e3b1a !important; }

/* Coupon */
#pmpro_coupon {
    grid-column: 1 / -1 !important;
    padding: 1.2rem 1.5rem !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 0.75rem !important;
    margin-top: 0.5rem !important;
}
#pmpro_coupon label { flex: 0 0 100% !important; }
#pmpro_coupon input[type="text"] { flex: 1 !important; min-width: 0 !important; }
#pmpro_applycoupon {
    background: transparent !important;
    border: 1px solid var(--teal-rule) !important;
    color: var(--teal-bright) !important;
    padding: 0.78rem 1.2rem !important;
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
}
#pmpro_applycoupon:hover { background: var(--teal-ghost) !important; }

/* ToS */
#pmpro_tosbox {
    margin: 0.5rem 0 !important;
    padding: 1.2rem 1.5rem !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    font-size: 0.88rem !important;
    color: var(--ash-light) !important;
    line-height: 1.65 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
}
#pmpro_tosbox a { color: var(--teal-bright) !important; }

/* Order summary */
#pmpro_review_submit {
    background: var(--ink-soft) !important;
    border: none !important;
    border-left: 3px solid var(--gold) !important;
    outline: 1px solid var(--gold-rule) !important;
    padding: 1.8rem 2rem !important;
    margin: 2rem 0 !important;
    color: var(--ash-light) !important;
    border-radius: 0 !important;
}
#pmpro_review_submit p { margin: 0 0 0.6rem !important; font-size: 0.95rem !important; }
#pmpro_review_submit strong { color: var(--gold) !important; }

/* Submit */
#pmpro_submit_span { margin-top: 2rem !important; display: block !important; }

#pmpro_form input[type="submit"],
#pmpro_form button[type="submit"],
input.pmpro_btn-submit-checkout,
.pmpro_btn-submit-checkout {
    display: block !important;
    width: 100% !important;
    background: var(--gold) !important;
    color: var(--ink) !important;
    border: none !important;
    padding: 0.95rem 2rem !important;
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.2em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    text-align: center !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#pmpro_form input[type="submit"]:hover { background: var(--gold-light) !important; }

#pmpro_already_logged_in {
    text-align: center !important;
    margin-top: 1rem !important;
    font-size: 0.85rem !important;
    color: var(--ash) !important;
}
#pmpro_already_logged_in a { color: var(--teal-bright) !important; }

@media (max-width: 600px) {
    .pmpro_checkout-fields { grid-template-columns: 1fr !important; }
    .pmpro_checkout-field-username,
    .pmpro_checkout-field-bemail,
    .pmpro_checkout-field-bconfirmemail { grid-column: 1 !important; }
}


/* ══════════════════════════════════════════════
   ACCOUNT DASHBOARD
   ══════════════════════════════════════════════ */

#pmpro_account {
    max-width: 820px !important;
    margin: 0 auto !important;
    background: transparent !important;
    padding: 0 !important;
}

#pmpro_account > div {
    background: var(--ink-soft) !important;
    border: 1px solid rgba(48,115,125,0.15) !important;
    padding: 1.8rem 2rem !important;
    margin-bottom: 2px !important;
}

#pmpro_account_membership_levels_div {
    border-top: 3px solid var(--gold) !important;
}

#pmpro_account > div > h3 {
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.3em !important;
    color: var(--teal-bright) !important;
    margin: 0 0 1.2rem !important;
    padding: 0 0 0.6rem !important;
    border: none !important;
    border-bottom: 1px solid var(--rule) !important;
    background: transparent !important;
    text-transform: uppercase !important;
}

#pmpro_account_membership_levels_div > h3 { color: var(--gold) !important; opacity: 0.85 !important; }

#pmpro_account table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    border: none !important;
}

#pmpro_account th {
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.2em !important;
    color: var(--teal-bright) !important;
    background: transparent !important;
    font-weight: 400 !important;
    text-align: left !important;
    padding: 0.4rem 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--rule) !important;
}

#pmpro_account td {
    padding: 0.6rem 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(48,115,125,0.08) !important;
    color: var(--ash-light) !important;
    background: transparent !important;
    font-size: 0.95rem !important;
    vertical-align: top !important;
}

#pmpro_account td strong { color: var(--vellum) !important; }
#pmpro_account ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#pmpro_account li { padding: 0.4rem 0 !important; border-bottom: 1px solid rgba(48,115,125,0.08) !important; }
#pmpro_account a { color: var(--teal-bright) !important; font-size: 0.92rem !important; text-decoration: none !important; }
#pmpro_account a:hover { color: var(--vellum) !important; }
a.pmpro_link-cancel { color: var(--ash) !important; font-size: 0.8rem !important; }


/* ══════════════════════════════════════════════
   BILLING / INVOICE
   ══════════════════════════════════════════════ */

#pmpro_billing,
#pmpro_invoice {
    max-width: 680px !important;
    margin: 0 auto !important;
    background: transparent !important;
}

.pmpro_table_orders,
#pmpro_invoice table,
#pmpro_billing table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--ink-soft) !important;
    border: 1px solid rgba(48,115,125,0.15) !important;
    margin: 1.5rem 0 !important;
}

.pmpro_table_orders th,
#pmpro_invoice table th,
#pmpro_billing table th {
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.2em !important;
    color: var(--teal-bright) !important;
    background: transparent !important;
    font-weight: 400 !important;
    padding: 0.7rem 1rem !important;
    border: none !important;
    border-bottom: 1px solid var(--rule) !important;
    text-align: left !important;
}

.pmpro_table_orders td,
#pmpro_invoice table td,
#pmpro_billing table td {
    padding: 0.7rem 1rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(48,115,125,0.08) !important;
    color: var(--ash-light) !important;
    background: transparent !important;
    font-size: 0.95rem !important;
}

.pmpro_table_orders a,
#pmpro_invoice a,
#pmpro_billing a {
    color: var(--teal-bright) !important;
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
}


/* ══════════════════════════════════════════════
   CANCEL PAGE
   ══════════════════════════════════════════════ */

#pmpro_cancel {
    max-width: 580px !important;
    margin: 0 auto !important;
    background: transparent !important;
}

#pmpro_cancel p { color: var(--ash-light) !important; margin-bottom: 1.2rem !important; }

#pmpro_cancel input[type="submit"],
.pmpro_btn-submit-cancel {
    background: transparent !important;
    border: 1px solid rgba(158,59,26,0.45) !important;
    color: #d9806a !important;
    font-weight: 400 !important;
}

#pmpro_cancel input[type="submit"]:hover {
    background: rgba(158,59,26,0.1) !important;
    color: #e09080 !important;
}