/* =====================================================
   HOME PAGE — front-page.php
   EWI design system variables
   ===================================================== */

/* ── Homepage-scoped dark+gold palette ─────────────────────────
   Deliberately scoped to body.home (WordPress core adds this class
   on the front page automatically), not :root — the site-wide
   --accent (#4da3ff) / --bg / --text system in base.v2.css stays
   untouched for every other page. This is a homepage-only visual
   direction, not a global rebrand (that's a separate future decision).
   Being more specific than :root, these values do take over --text/
   --border-equivalent tokens for anything on this page that reads the
   base tokens by name — intentional here, since the whole homepage is
   being reskinned, but worth knowing if a future homepage addition
   expects the OLD site-wide gray/blue instead of this palette. */
body.home {
    --ink: #0d1015;
    --panel: #161a21;
    --panel-2: #1b2029;
    --line: #262c37;
    --paper: #eef0f2;
    --amber: #c8933f;
    --amber-bright: #e0a659;
    --up: #5fa883;
    --down: #c25f52;
    --text: #cdd3dc;
    --text-dim: #7d8592;
}

/* ── Shared section header ── */
.fp-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.fp-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--amber, #c8933f);
}

.fp-section-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--text);
    margin: 8px 0 12px;
}

.fp-section-sub {
    color: var(--text-dim);
    font-size: 1rem;
    max-width: 560px;
    margin: 0 auto;
}

/* ── Section spacing ── */
.section { padding: 80px 0; }

/* =====================================================
   BUTTONS
   ===================================================== */
.fp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s;
    cursor: pointer;
    border: none;
}

.fp-btn--primary { background: var(--amber, #c8933f); color: #000; }
.fp-btn--primary:hover { opacity: 0.9; transform: translateY(-1px); color: #000; }

.fp-btn--ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
}
.fp-btn--ghost:hover { border-color: var(--amber, #c8933f); color: var(--amber, #c8933f); }

.fp-btn--large { padding: 16px 36px; font-size: 1.0625rem; }

/* =====================================================
   HERO
   ===================================================== */
.fp-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--ink);
    position: relative;
    overflow: hidden;
}

/* Single-column stack (was 35fr/65fr side-by-side) — the pitch (row 1)
   and the Chart of the Week card (row 2) now flow vertically instead of
   splitting the container in half. Grid's default justify-items:stretch
   fills the 1fr column full-width automatically, which is why this
   stays display:grid rather than switching to flexbox: a flex column
   with align-items:center would shrink block children like the chart
   card to fit their own content instead of filling the row. */
.fp-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 60px;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
}

.fp-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 12px 0 20px;
    color: var(--text);
}

.fp-hero__title-accent { color: var(--amber, #c8933f); }

.fp-hero__sub {
    font-size: 1.0625rem;
    color: var(--text-dim);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto 32px;
}

.fp-hero__ctas {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fp-hero__scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-dim);
    font-size: 1.2rem;
    animation: bounce 2s infinite;
}

/* Chart of the Week, promoted into the hero visual — stack image over
   body instead of the section's normal side-by-side split, since it
   now sits in an already-half-width hero column. Selector combines both
   classes (not just .fp-cotw__card--hero) so its specificity actually
   beats the base .fp-cotw__card rule below — as two equally-specific
   single-class selectors, source order previously decided the winner,
   and the base rule's later position in this file silently overrode
   this one, leaving the hero card side-by-side on desktop. */
.fp-cotw__card.fp-cotw__card--hero {
    grid-template-columns: 1fr;
}

/* Compact banner scale for the hero placement — the base 320px min-height
   was sized for sitting beside body text in the Chart of the Week
   section's own 1.2fr/1fr split, not for a full-width image stacked
   above the body in a narrower hero column. */
.fp-cotw__card--hero .fp-cotw__image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
}

/* .fp-cotw__body's default padding (32px 32px 32px 0) drops the left
   side entirely — correct for the side-by-side Chart of the Week
   section, where the image sits to its left and provides the visual
   margin, but wrong once stacked above the body in the hero. Only the
   768px mobile rule happened to already override this; above that
   width it was rendering flush against the card's left edge. */
.fp-cotw__card--hero .fp-cotw__body {
    padding: 24px 28px;
}

/* =====================================================
   STATS STRIP
   ===================================================== */
.fp-stats {
    background: var(--panel-2, #1b2029);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
}

.fp-stats__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.fp-stats__item {
    text-align: center;
    padding: 0 40px;
}

.fp-stats__item strong {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--amber, #c8933f);
}

.fp-stats__item span {
    font-size: 0.8125rem;
    color: var(--text-dim);
}

.fp-stats__divider {
    width: 1px;
    height: 40px;
    background: var(--line);
}

/* =====================================================
   CHART OF THE WEEK
   ===================================================== */
.fp-cotw__card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    background: var(--panel, #161a21);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

.fp-cotw__image {
    position: relative;
    height: 100%;
    min-height: 320px;
}

.fp-cotw__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fp-cotw__image-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
}

.fp-cotw__free-badge {
    background: var(--amber, #c8933f);
    color: #000;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 10px;
    border-radius: 50px;
}

.fp-cotw__body { padding: 32px 32px 32px 0; }

.fp-cotw__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.fp-cotw__asset {
    background: rgba(200,147,63,.1);
    color: var(--amber, #c8933f);
    border: 1px solid rgba(200,147,63,.2);
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
}

.fp-cotw__tf {
    background: rgba(255,255,255,.06);
    color: var(--text-dim);
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.fp-cotwbias {
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
}
.fp-cotwbias--bullish { background: rgba(95,168,131,.15); color: var(--up, #5fa883); }
.fp-cotwbias--bearish { background: rgba(194,95,82,.15); color: var(--down, #c25f52); }
.fp-cotwbias--neutral { background: rgba(168,168,168,.15); color: var(--text-dim); }

.fp-cotw__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.3;
}

.fp-cotw__summary {
    color: var(--text-dim);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

.fp-cotw__note {
    font-size: 0.8125rem;
    color: var(--text-dim);
    margin-top: 12px;
    opacity: .7;
}

.fp-cotw__empty {
    text-align: center;
    padding: 40px;
    color: var(--text-dim);
    border: 1px dashed var(--line);
    border-radius: 12px;
}

.fp-cotw__empty a { color: var(--amber, #c8933f); }

/* =====================================================
   PROMOTION SECTION — NinjaTrader partner offer cards
   Shared markup from template-parts/promo-ninjatrader.php (also used
   by page-pricing.php's NinjaTrader tab). pricing.css styles the same
   classes independently for that page — untouched, still blue; these
   rules only ever load here, on the homepage.
   ===================================================== */
.ewi-pricing__promo {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
    padding: 28px 32px;
    border: 1px solid rgba(200,147,63,.3);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(200,147,63,.08) 0%, var(--panel-2, #1b2029) 70%);
}

.ewi-pricing__promo-eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--amber, #c8933f);
    margin-bottom: 10px;
}

.ewi-pricing__promo-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 18px;
}

.ewi-pricing__promo-cta {
    display: inline-flex;
    align-items: center;
    padding: 11px 24px;
    border-radius: 8px;
    background: var(--amber, #c8933f);
    color: #000;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: filter 0.15s;
}

.ewi-pricing__promo-cta:hover { filter: brightness(1.1); }

.ewi-pricing__promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto 48px;
    align-items: stretch;
}

.ewi-pricing__promos .ewi-pricing__promo { max-width: none; margin: 0; }

.ewi-pricing__promo-details { text-align: left; margin: 16px 0; }

.ewi-pricing__promo-detail-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin: 0 0 6px;
}

.ewi-pricing__promo-detail-label:not(:first-child) { margin-top: 14px; }

.ewi-pricing__promo-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.ewi-pricing__promo-chip {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--ink, #0d1015);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
}

.ewi-pricing__promo-chip--ea {
    border-color: rgba(200,147,63,.25);
    color: rgba(200,147,63,.85);
    background: rgba(200,147,63,.06);
}

.ewi-pricing__promo-chip--soon {
    border-color: var(--line);
    color: var(--text-dim);
    background: transparent;
}

.ewi-pricing__promo-disclosure {
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-dim);
}

/* =====================================================
   LIVE MARKETS PREVIEW
   ===================================================== */
.fp-markets__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.fp-market-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel, #161a21);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    transition: all .15s;
}

.fp-market-card:hover {
    border-color: rgba(200,147,63,.3);
    background: rgba(200,147,63,.04);
}

.fp-market-card__icon { font-size: 1.25rem; flex-shrink: 0; }

.fp-market-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}

.fp-markets__cta { text-align: center; }

/* =====================================================
   FEATURES
   ===================================================== */
.fp-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.fp-feature-card {
    background: var(--panel, #161a21);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px;
    transition: border-color .2s, transform .2s;
}

.fp-feature-card:hover {
    border-color: rgba(200,147,63,.3);
    transform: translateY(-2px);
}

.fp-feature-card__icon {
    font-size: 1.75rem;
    margin-bottom: 12px;
}

.fp-feature-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.fp-feature-card__desc {
    font-size: 0.875rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 14px;
}

.fp-feature-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-feature-card__list li {
    font-size: 0.8125rem;
    color: var(--text-dim);
    padding: 3px 0;
}

.fp-feature-card__list li::before {
    content: '✓ ';
    color: var(--amber, #c8933f);
}

/* =====================================================
   PRICING
   ===================================================== */
.fp-pricing__card {
    max-width: 480px;
    margin: 0 auto;
    background: var(--panel, #161a21);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.fp-pricing__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.fp-pricing__currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dim);
}

.fp-pricing__amount {
    font-size: 4rem;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
}

.fp-pricing__period {
    font-size: 1.125rem;
    color: var(--text-dim);
}

.fp-pricing__note {
    font-size: 0.8125rem;
    color: var(--text-dim);
    margin-bottom: 24px;
}

.fp-pricing__note--from {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.fp-pricing__desc {
    font-size: 0.9375rem;
    color: var(--text-dim);
    line-height: 1.6;
    max-width: 380px;
    margin: 0 auto 28px;
}

.fp-pricing__list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    text-align: left;
}

.fp-pricing__list li {
    font-size: 0.9375rem;
    color: var(--text);
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.fp-pricing__list li:last-child { border-bottom: none; }

.fp-pricing__urgency {
    font-size: 0.8125rem;
    color: var(--text-dim);
    margin-top: 16px;
    opacity: .7;
}

/* =====================================================
   FAQ
   ===================================================== */
.fp-faq__list {
    max-width: 720px;
    margin: 0 auto;
}

.fp-faq__item {
    border-bottom: 1px solid var(--line);
}

.fp-faq__q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    padding: 18px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
}

.fp-faq__q::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--amber, #c8933f);
    transition: transform .2s;
    flex-shrink: 0;
    margin-left: 16px;
}

.fp-faq__item.is-open .fp-faq__q::after { transform: rotate(45deg); }

.fp-faq__a {
    font-size: 0.9375rem;
    color: var(--text-dim);
    line-height: 1.7;
    padding: 0 0 18px;
    display: none;
}

.fp-faq__item.is-open .fp-faq__a { display: block; }

/* =====================================================
   FINAL CTA
   ===================================================== */
.fp-final-cta {
    background: linear-gradient(135deg, rgba(200,147,63,.08), rgba(200,147,63,.02));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.fp-final-cta__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
}

.fp-final-cta__sub {
    color: var(--text-dim);
    margin-bottom: 28px;
    font-size: 1.0625rem;
}

.fp-final-cta__note {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 12px;
    opacity: .7;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes bounce {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
    .fp-features__grid { grid-template-columns: 1fr 1fr; }
    .fp-markets__grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* grid-template-columns/text-align/justify-content now match the
       desktop base above — only the tighter gap and the wider (100%)
       sub max-width still need overriding at this width. */
    .fp-hero__inner { gap: 32px; }

    .fp-hero__sub { max-width: 100%; }

    .fp-cotw__card { grid-template-columns: 1fr; }
    .fp-cotw__body { padding: 24px; }

    .ewi-pricing__promos { grid-template-columns: 1fr; }

    .fp-markets__grid { grid-template-columns: 1fr 1fr; }
    .fp-features__grid { grid-template-columns: 1fr; }

    .fp-stats__item { padding: 12px 20px; }
    .fp-stats__divider { display: none; }
}

@media (max-width: 560px) {
    .fp-markets__grid { grid-template-columns: 1fr; }
    .fp-pricing__card { padding: 24px; }
    .section { padding: 56px 0; }
}

/* =========================================================
   LIGHT MODE FIXES — home.v2.css
   ========================================================= */

body.light-mode .fp-cotw__tf {
    background: rgba(0, 0, 0, 0.06);
}

/* body.home's --text/--text-dim (top of this file) are tuned for the
   dark homepage palette — light gray on a dark panel. At equal
   specificity (one class each), home.v2.css loads after base.v2.css
   (declared dependency), so body.home's light-gray --text silently
   wins over base.v2.css's body.light-mode --text: #1a1a1a, leaving
   homepage text nearly as light in light mode as in dark mode. Needs
   the extra class to actually outrank body.home. Values match
   base.v2.css's own light-mode --text/--text-muted for consistency
   with the rest of the site, rather than inventing new shades. */
body.light-mode.home {
    --text: #1a1a1a;
    --text-dim: #555;
}

/* .fp-hero's background is pinned to --ink (always dark, see its own
   rule above) regardless of theme — it never actually goes light, so
   the override just above would put the new near-black --text on a
   background that never changed, making hero text unreadable in light
   mode. Custom properties inherit, so re-declaring --text/--text-dim
   here on .fp-hero (a descendant of body.light-mode.home) overrides
   them for the hero and everything inside it — the headline, subtext,
   and the embedded Chart of the Week card — back to the original
   dark-panel-friendly values, without touching any of those child
   selectors individually. */
body.light-mode.home .fp-hero {
    --text: #cdd3dc;
    --text-dim: #7d8592;
}

/* Same bug, same fix, for every other homepage element with its own
   fixed --ink/--panel/--panel-2 background (never theme-adaptive,
   unlike the section wrappers around them, which correctly use --bg
   and need no override). Split into two rules so each selector only
   re-declares the token it actually reads — .fp-stats and the promo
   chip never use --text, .fp-market-card never uses --text-dim. */
body.light-mode.home .fp-market-card,
body.light-mode.home .fp-feature-card,
body.light-mode.home .fp-pricing__card {
    --text: #cdd3dc;
}

body.light-mode.home .fp-stats,
body.light-mode.home .ewi-pricing__promo-chip,
body.light-mode.home .fp-feature-card,
body.light-mode.home .fp-pricing__card {
    --text-dim: #7d8592;
}