/**
 * Pricing page styles
 * File: /wp-content/themes/wrestlerfinder/assets/css/pricing.css
 *
 * Enqueued only on /pricing/. Depends on home.css — the pricing
 * cards, coach strip, FAQ accordion, and closing CTA all reuse the
 * .wf-home-* classes verbatim so the visual treatment stays in
 * lockstep with the homepage. This file adds only the pricing-page
 * chrome that has no homepage counterpart:
 *
 *   .wf-pricing-hero        clean centered intro block
 *   .wf-pricing-cards       tighter top padding since the hero
 *                            already provides the section break
 *   .wf-pricing-comparison  feature comparison table (desktop) with
 *                            horizontal-scroll fallback for narrow
 *                            viewports
 *
 * All tokens from design-system.css. Mobile first.
 *
 * @package WrestlerFinder
 */

/* =============================================================================
   Section 1 — Hero
============================================================================= */

.wf-pricing-hero {
    padding-block: var(--space-16) var(--space-10);
    background:    var(--color-bg);
    text-align:    center;
}

.wf-pricing-hero__inner {
    max-width: 720px;
}

.wf-pricing-hero__headline {
    margin:      0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size:   var(--text-4xl);
    font-weight: 700;
    line-height: 1.1;
    color:       var(--color-text);
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .wf-pricing-hero__headline {
        font-size: var(--text-5xl);
    }
}

.wf-pricing-hero__sub {
    margin:      0;
    font-size:   var(--text-lg);
    color:       var(--color-text-muted);
    line-height: 1.5;
}

/* =============================================================================
   Section 2 — Pricing cards wrapper
   ----------------------------------------------------------------------------
   The .wf-home-pricing section carries generous top/bottom padding for
   the homepage where it sits between narrative sections. On the
   pricing page the hero already provides the break above, so we
   collapse the top padding a touch.
============================================================================= */

.wf-pricing-cards.wf-home-pricing {
    padding-block: var(--space-4) var(--space-12);
}

/* =============================================================================
   Section 3 — Feature comparison table
   ----------------------------------------------------------------------------
   Semantic <table>. The wrapper is overflow-x: auto so on very narrow
   viewports the table can scroll horizontally rather than collapse
   into an unreadable stack. Column widths lean on the feature column
   taking most of the width; the two value columns are fixed narrow so
   the check/dash sits centered without wandering.
============================================================================= */

.wf-pricing-comparison {
    padding-block: var(--space-12);
    background:    var(--color-bg);
}

.wf-pricing-comparison .wf-home-section-heading {
    text-align:  center;
    margin-block-end: var(--space-8);
}

.wf-pricing-comparison__scroll {
    overflow-x: auto;
    /* Match the homepage's max-width container feel — the table can be
       narrower than the page container on wider viewports. */
    max-width:  960px;
    margin-inline: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    border:        1px solid var(--color-border);
    background:    var(--color-surface);
}

.wf-pricing-comparison__table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--text-sm);
    color:           var(--color-text);
    /* Prevents narrow viewports from squishing the value columns down
       to icon-hugging widths; combined with overflow-x on the wrapper,
       the table scrolls rather than compresses. */
    min-width:       520px;
}

.wf-pricing-comparison__table thead tr {
    background: var(--color-surface-2);
}

.wf-pricing-comparison__table th,
.wf-pricing-comparison__table td {
    padding:        var(--space-3) var(--space-4);
    text-align:     left;
    border-bottom:  1px solid var(--color-border-subtle);
    vertical-align: middle;
}

.wf-pricing-comparison__table thead th {
    font-family:    var(--font-heading);
    font-size:      var(--text-sm);
    font-weight:    700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color:          var(--color-text);
    border-bottom-color: var(--color-border);
}

.wf-pricing-comparison__table tbody tr:last-child th,
.wf-pricing-comparison__table tbody tr:last-child td {
    border-bottom: 0;
}

.wf-pricing-comparison__table tbody tr:hover {
    background: var(--color-surface-2);
}

.wf-pricing-comparison__feature-col {
    width: auto;
}

.wf-pricing-comparison__value-col {
    width:      88px;
    text-align: center;
}

@media (min-width: 640px) {
    .wf-pricing-comparison__value-col {
        width: 120px;
    }
}

.wf-pricing-comparison__feature {
    font-weight: 500;
    color:       var(--color-text);
    /* Reset browser default <th> styling — this is a row header, not
       a column header. Left-aligned, non-caps, regular weight-ish. */
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.wf-pricing-comparison__cell {
    text-align: center;
}

.wf-pricing-comparison__check {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--color-teal-dim);
    color:           var(--color-primary);
    font-weight:     700;
    font-size:       var(--text-base);
    line-height:     1;
}

.wf-pricing-comparison__dash {
    display: inline-block;
    color:   var(--color-text-subtle);
    font-size: var(--text-lg);
    line-height: 1;
    letter-spacing: 0;
}

/* =============================================================================
   FAQ accordion — pricing-specific tightening
   ----------------------------------------------------------------------------
   The .wf-home-faq classes already provide the accordion visual. The
   scoped alias below is just an anchor for any future pricing-only
   FAQ tweaks (larger padding, denser answer type, etc). Kept empty on
   purpose so the class is a valid selector without adding rules the
   homepage would suddenly inherit if scoping changed.
============================================================================= */

.wf-pricing-faq {
    /* No overrides today — carried on the section so the accordion
       JS can scope its listener to the pricing page's FAQ list. */
}

/* =============================================================================
   Billing frequency toggle
   ----------------------------------------------------------------------------
   Pill row above the pricing cards. Two buttons: Monthly / Annually. The
   active pill carries .is-active — teal border, brighter surface. The
   annual pill has a teal Save X% badge inline.

   Only the Pro card responds to this toggle (via inline JS). Free and
   Founding Member cards stay fixed at their displayed prices.
============================================================================= */

.wf-pricing-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    margin-bottom:   var(--space-6);
    flex-wrap:       wrap;
}

.wf-pricing-toggle__btn {
    display:      inline-flex;
    align-items:  center;
    gap:          var(--space-2);
    padding:      var(--space-2) var(--space-4);
    background:   transparent;
    border:       1px solid var(--color-border);
    border-radius: var(--radius-full);
    color:        var(--color-text-muted);
    cursor:       pointer;
    font-family:  inherit;
    font-size:    var(--text-sm);
    font-weight:  600;
    transition:   background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wf-pricing-toggle__btn:hover {
    color: var(--color-text);
}

.wf-pricing-toggle__btn.is-active {
    background:   var(--color-surface-2);
    color:        var(--color-text);
    border-color: var(--color-teal);
}

.wf-pricing-toggle__save {
    font-size:      var(--text-xs);
    background:     var(--color-teal);
    color:          var(--color-bg);
    padding:        2px 6px;
    border-radius:  var(--radius-sm);
    font-weight:    700;
    letter-spacing: 0.02em;
}

/* =============================================================================
   Pro card — toggle-driven price block
   ----------------------------------------------------------------------------
   min-height on the swap targets keeps the card height stable across
   the Monthly → Annual transition (Monthly has an empty subprice + note;
   without min-height the card would jump vertically on swap).

   The .wf-pricing-price wrapper is the fade-transition container; the
   JS adds .is-switching for ~150ms to hide, swaps text, and removes.
============================================================================= */

.wf-pricing-price {
    transition: opacity 0.15s ease;
}

.wf-pricing-price.is-switching {
    opacity: 0;
}

.wf-pricing-card__subprice {
    margin:      var(--space-1) 0 0;
    font-size:   var(--text-sm);
    color:       var(--color-text-muted);
    min-height:  1.4em;
    line-height: 1.4;
}

.wf-pricing-card__note {
    margin:      var(--space-1) 0 0;
    font-size:   var(--text-xs);
    color:       var(--color-teal);
    min-height:  1.2em;
    line-height: 1.4;
    font-weight: 600;
}

/* Founding card — static "Monthly billing only." line under the
   price. Not toggle-driven; always visible. Muted so it reads as a
   footnote, not a headline. */
.wf-pricing-card__billing-note {
    margin:      var(--space-1) 0 0;
    font-size:   var(--text-xs);
    color:       var(--color-text-muted);
    font-style:  italic;
    line-height: 1.4;
}

/* Founding-card annual-only differentiator note
   ----------------------------------------------------------------------------
   Matches the Pro card's "4 months free" note visually — teal, xs,
   semi-bold — but only surfaces when the Annual pill is active.
   Show/hide is driven by the [hidden] attribute in the toggle JS; no
   display property here so the attribute wins on its own (see
   CLAUDE.md's "[hidden] can be overridden by class-based display
   rules" gotcha — we deliberately don't set display). */
.wf-pricing-founding-annual-note {
    margin:      var(--space-1) 0 0;
    font-size:   var(--text-xs);
    color:       var(--color-teal);
    font-weight: 600;
    line-height: 1.4;
}