/* ==========================================================================
   PAID MEMBERSHIPS PRO OVERRIDES
   Organized by component role. Theme tokens: --wp--custom--imt--*
   PMPro's own button roles: .pmpro_btn (solid), -outline, -cancel, -plain, -delete
   ========================================================================== */

/* ---------- TOKENS ---------- */
/* PMPro prints its colours in a :root block from its settings; html:root
   out-specifies it. This themes the states we don't override below
   (e.g. PMPro's :focus, icons, links that use the accent). */
html:root {
    --pmpro--color--accent: var(--wp--custom--imt--color--background--secondary--color);
    --pmpro--color--accent--variation: var(--wp--custom--imt--color--background--secondary--hover--button--color);
}

/* ---------- HEADER CTA ---------- */
.im-only,
body:not(.logged-in) .im-log-out {
    display: none !important;
}

/* Logged-in swap of the "Log In" button label to "My Account".
   Note: CSS only changes what's seen; screen readers still announce the
   original link text. A proper fix needs the markup to change. */
body.logged-in .im-log-in .imt-link-text {
    font-size: 0 !important;
}

body.logged-in .im-log-in .imt-link-text::before {
    content: "My Account" !important;
    font-size: var(--wp--custom--imt--button--sm--font-size) !important;
}

/* ---------- BUTTON: SOLID ---------- */
/* delete keeps PMPro's error colours; outline/cancel/plain have their own roles below */
.pmpro_btn:not(.pmpro_btn-outline, .pmpro_btn-cancel, .pmpro_btn-plain, .pmpro_btn-delete),
.pmpro_section #loginform .login-submit .button {
    background-color: var(--wp--custom--imt--color--background--secondary--color) !important;
    color: var(--wp--custom--imt--color--background--secondary--text) !important;
    border: var(--wp--custom--imt--button--default--border-width) solid var(--wp--custom--imt--color--background--secondary--color) !important;
    transition: var(--wp--custom--imt--hover-transition) !important;
}

.pmpro_btn:not(.pmpro_btn-outline, .pmpro_btn-cancel, .pmpro_btn-plain, .pmpro_btn-delete):is(:hover, :focus-visible),
.pmpro_section #loginform .login-submit .button:is(:hover, :focus-visible) {
    background-color: var(--wp--custom--imt--color--background--secondary--hover--button--color) !important;
    border-color: var(--wp--custom--imt--color--background--secondary--hover--button--border) !important;
    color: var(--wp--custom--imt--color--background--secondary--hover--button--text) !important;
}

/* ---------- BUTTON: OUTLINE ---------- */
.pmpro_btn.pmpro_btn-outline,
.pmpro_btn.pmpro_btn-cancel {
    background-color: transparent !important;
    color: var(--wp--custom--imt--color--background--secondary--color) !important;
    border: var(--wp--custom--imt--button--default--border-width) solid var(--wp--custom--imt--color--background--secondary--color) !important;
    box-shadow: none !important;
    transition: var(--wp--custom--imt--hover-transition) !important;
}

.pmpro_btn.pmpro_btn-outline:is(:hover, :focus-visible),
.pmpro_btn.pmpro_btn-cancel:is(:hover, :focus-visible) {
    background-color: var(--wp--custom--imt--color--background--secondary--hover--button--outline--color) !important;
    border-color: var(--wp--custom--imt--color--background--secondary--hover--button--outline--border) !important;
    color: var(--wp--custom--imt--color--background--secondary--hover--button--outline--text) !important;
}

/* ---------- BUTTON: PLAIN (text link) ---------- */
.pmpro_btn.pmpro_btn-plain {
    background-color: transparent !important;
    color: var(--wp--custom--imt--color--background--secondary--color) !important;
}

.pmpro_btn.pmpro_btn-plain:is(:hover, :focus-visible) {
    background-color: transparent !important;
    color: var(--wp--custom--imt--color--background--secondary--color) !important;
    text-decoration: underline;
}

/* ---------- BUTTON: FOCUS RING (all roles) ---------- */
/* PMPro sets outline: 0 on .pmpro_btn */
.pmpro_btn:focus-visible,
.pmpro_section #loginform .login-submit .button:focus-visible {
    outline: 2px solid var(--wp--custom--imt--color--background--secondary--color) !important;
    outline-offset: 2px;
}

/* ---------- CARD ---------- */
.pmpro_card_actions {
    background-color: var(--wp--custom--imt--color--palette--background--secondary--100) !important;
    padding: calc(var(--pmpro--base--spacing--large) / 2) var(--pmpro--base--spacing--large) !important;
}

/* ---------- CHIP / TAG ---------- */
.pmpro_tag-success {
    background-color: var(--wp--custom--imt--color--palette--background--secondary--100) !important;
    color: var(--wp--custom--imt--color--link--dark-hover) !important;
    border: none !important;
}

/* ---------- CHECKOUT: INCLUDED COURSES (LearnPress + PMPro add-on) ---------- */
/* The add-on prints a bare <table> of course links + ✓ between the PMPro cards.
   Reshaped into a card that matches .pmpro_card, one row per course. */
.pmpro table.lp-pmpro-membership-list {
    display: block;
    width: 100%;
    margin: var(--pmpro--base--spacing--medium) 0;
    background-color: var(--pmpro--color--base);
    border: 1px solid var(--wp--custom--imt--color--background--white--border, #e2e0db);
    border-radius: var(--pmpro--base--border-radius);
    box-shadow: var(--pmpro--box-shadow);
    overflow: hidden;
    border-collapse: separate;
}

/* card title — visual only; the add-on markup has no heading of its own */
.pmpro table.lp-pmpro-membership-list::before {
    content: "Courses included";
    display: block;
    padding: var(--pmpro--base--spacing--large) var(--pmpro--base--spacing--large) var(--pmpro--base--spacing--small);
    color: var(--wp--custom--imt--color--text--dark);
    font-size: calc(var(--wp--custom--imt--font-size-base) * 1.25);
    font-weight: 700;
    line-height: 1.3;
}

.pmpro table.lp-pmpro-membership-list tbody {
    display: block;
    padding: 0 var(--pmpro--base--spacing--large) calc(var(--pmpro--base--spacing--large) - var(--pmpro--base--spacing--small));
}

.pmpro table.lp-pmpro-membership-list tr.item-row {
    display: flex;
    align-items: center;
    gap: var(--pmpro--base--spacing--small);
    padding: var(--pmpro--base--spacing--small) 0;
    border-top: 1px solid var(--wp--custom--imt--color--background--white--border, #e2e0db);
    background: none !important;
}

.pmpro table.lp-pmpro-membership-list tr.item-row:first-child {
    border-top: 0;
}

.pmpro table.lp-pmpro-membership-list td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.pmpro table.lp-pmpro-membership-list td.list-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* same treatment as body-copy links (theme: .wp-block-post-content a) — link tokens
   for colour, underline and underline position, so these match "Log in here" etc. */
.pmpro table.lp-pmpro-membership-list td.list-main a {
    color: var(--wp--custom--imt--color--link--dark) !important;
    text-decoration: var(--wp--custom--imt--link--text-decoration) !important;
    text-underline-position: var(--wp--custom--imt--link--text-underline-position);
    transition: var(--wp--custom--imt--hover-transition);
}

.pmpro table.lp-pmpro-membership-list td.list-main a:is(:hover, :focus-visible) {
    color: var(--wp--custom--imt--color--link--dark-hover) !important;
    text-decoration: var(--wp--custom--imt--link--hover--text-decoration) !important;
}

/* ✓ as a small round chip */
.pmpro table.lp-pmpro-membership-list td.item-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    background-color: var(--wp--custom--imt--color--palette--background--secondary--100) !important;
    color: var(--wp--custom--imt--color--link--dark-hover);
    font-size: calc(var(--wp--custom--imt--font-size-base) * 0.875);
    font-weight: 700;
    line-height: 1;
}