/*
 * RCX Portal — Shared design primitives
 *
 * Token contract: every color MUST reference var(--wp--preset--color--*)
 * or var(--wp--custom--*). Zero hardcoded hex values.
 *
 * Primitive classes defined here:
 *   .rcx-card          — card shell (white surface, border, radius, hover lift)
 *   .rcx-badge         — navy badge (primary bg, white text, xs uppercase)
 *   .rcx-metric-label  — metric label (xs, uppercase, text-secondary)
 *   .rcx-metric-value  — metric value (lg, 600, primary; --gold modifier for accent-strong)
 *   .rcx-btn-primary   — primary CTA button (primary bg, white text, md radius)
 *
 * DEVIATION: 15-frontend-design SD-03 strong-defaults to @wordpress/scripts.
 * This project uses plain CSS with no build pipeline, consistent with its
 * established no-build pattern (AGENTS.md; zero node footprint in the theme).
 * The mandatory token contract (var(--wp--preset--*), no hardcoded values) is
 * fully honored. See wave-7 decision D3.
 */

/* ----------------------------------------
   Card Shell
   ---------------------------------------- */

.rcx-card {
    background: var(--wp--preset--color--surface);
    border-radius: var(--wp--custom--radius--lg);
    border: 1px solid var(--wp--preset--color--border);
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.rcx-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wp--custom--shadow--card);
}

/* ----------------------------------------
   Badge
   ---------------------------------------- */

.rcx-badge {
    display: inline-block;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border-radius: var(--wp--custom--radius--sm);
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ----------------------------------------
   Metric Label / Value Pair
   ---------------------------------------- */

.rcx-metric-label {
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 500;
    color: var(--wp--preset--color--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.rcx-metric-value {
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

/* Availability value rendered in AA-safe gold (accent-strong >= 4.5:1 on white) */
.rcx-metric-value--gold {
    color: var(--wp--preset--color--accent-strong);
}

/* "Call for Availability" — italic gold link */
.rcx-metric-value--call {
    color: var(--wp--preset--color--accent-strong);
    font-style: italic;
    text-decoration: none;
    cursor: pointer;
}

.rcx-metric-value--call:hover {
    text-decoration: underline;
}

/* ----------------------------------------
   Primary Button
   ---------------------------------------- */

.rcx-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
    border: none;
    border-radius: var(--wp--custom--radius--md);
    padding: 8px 16px;
    font-family: var(--wp--preset--font-family--dm-sans);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms ease;
    line-height: 1;
}

.rcx-btn-primary:hover {
    /* Darken primary navy slightly — computed from primary with no hardcoded hex */
    filter: brightness(1.15);
}

.rcx-btn-primary:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-strong);
    outline-offset: 2px;
}

/* ----------------------------------------
   Global base resets for portal surfaces
   ---------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------
   Main content spine alignment
   Matches chrome inner padding so content
   edges align with header/footer/disclaimers
   at all viewport widths.
   ---------------------------------------- */

.rcx-offerings-page,
.rcx-offering-detail,
.rcx-resources-page,
.rcx-resource-detail-page,
.rcx-account__layout,
.rcx-no-access__content {
    padding-inline: max(48px, calc((100% - 1280px) / 2));
}

@media (max-width: 1024px) {
    .rcx-offerings-page,
    .rcx-offering-detail,
    .rcx-resources-page,
    .rcx-resource-detail-page,
    .rcx-account__layout,
    .rcx-no-access__content {
        padding-inline: max(24px, calc((100% - 1280px) / 2));
    }
}

@media (max-width: 640px) {
    .rcx-offerings-page,
    .rcx-offering-detail,
    .rcx-resources-page,
    .rcx-resource-detail-page,
    .rcx-account__layout,
    .rcx-no-access__content {
        padding-inline: max(16px, calc((100% - 1280px) / 2));
    }
}

/* ----------------------------------------
   Invest Now route: same spine mechanics,
   narrower measure.
   /invest-now is a single-column form, and a single column of fields set to
   the shared 1280px content spine reads far too wide — so this route gets
   its own 860px content width while keeping the identical 48 / 24 / 16px
   minimum page margins the group above uses, so the form still starts on the
   site's margin line rather than at the viewport edge.
   Kept as a separate rule rather than joining the group and overriding the
   width: 1280px stays the single shared default for every other route, and
   one selector carrying two competing widths is an invitation to "simplify"
   them back into one. Vertical padding for this route lives with the rest of
   the Invest Now page shell further down (.rcx-invest-now__layout).
   ---------------------------------------- */

.rcx-invest-now__layout {
    padding-inline: max(48px, calc((100% - 860px) / 2));
}

@media (max-width: 1024px) {
    .rcx-invest-now__layout {
        padding-inline: max(24px, calc((100% - 860px) / 2));
    }
}

@media (max-width: 640px) {
    .rcx-invest-now__layout {
        padding-inline: max(16px, calc((100% - 860px) / 2));
    }
}

/* ----------------------------------------
   Resources listing: heading + subtitle chrome
   "Resources" h1 = 26px/600 navy (xxl preset) — matches offerings heading.
   Subtitle = 14px text-muted, 6px top margin.
   Header block (heading + subtitle) has 24px bottom margin before the filter bar.
   Matches mockup ch-resources-header / ch-resources-subtitle (L818-829).
   ---------------------------------------- */

.rcx-resources-page__heading {
    font-size: var(--wp--preset--font-size--xxl);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0;
    line-height: 1.2;
}

.rcx-resources-page__subtitle {
    font-size: var(--wp--preset--font-size--base);
    color: var(--wp--preset--color--text-muted);
    margin: 6px 0 24px;
    line-height: 1.4;
}

/* ----------------------------------------
   Resources listing: pagination
   Targets wp:query-pagination output (wp-block-query-pagination wrapper)
   inside .rcx-resources-query.
   Buttons are <a> or <span> elements emitted by WP core pagination blocks.
   Center flex row, gap 8px; 36x36 buttons, radius 6px, 1px border.
   CURRENT page = navy bg + surface text (wp-block-query-pagination-numbers
   emits .is-active on the current page span).
   Matches mockup ch-pagination (L965-993).
   ---------------------------------------- */

.rcx-resources-query .wp-block-query-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: var(--wp--preset--spacing--32);
    flex-wrap: wrap;
}

/* All pagination items: page numbers, prev/next chevron anchors */
.rcx-resources-query .wp-block-query-pagination-numbers a,
.rcx-resources-query .wp-block-query-pagination-numbers span,
.rcx-resources-query .wp-block-query-pagination-previous a,
.rcx-resources-query .wp-block-query-pagination-next a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--wp--custom--radius--md);
    border: 1px solid var(--wp--preset--color--border);
    background: var(--wp--preset--color--surface);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    transition: background 150ms ease;
    line-height: 1;
}

/* Hover state */
.rcx-resources-query .wp-block-query-pagination-numbers a:hover,
.rcx-resources-query .wp-block-query-pagination-previous a:hover,
.rcx-resources-query .wp-block-query-pagination-next a:hover {
    background: var(--wp--preset--color--background);
}

/* Current/active page number */
.rcx-resources-query .wp-block-query-pagination-numbers span.current,
.rcx-resources-query .wp-block-query-pagination-numbers .is-active {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
    border-color: var(--wp--preset--color--primary);
}

/* Disabled prev/next (WP renders as span when at boundary) */
.rcx-resources-query .wp-block-query-pagination-previous span,
.rcx-resources-query .wp-block-query-pagination-next span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--wp--custom--radius--md);
    border: 1px solid var(--wp--preset--color--border);
    background: var(--wp--preset--color--surface);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    color: var(--wp--preset--color--text-secondary);
    opacity: 0.4;
    line-height: 1;
}

/* ----------------------------------------
   Resources listing: empty state
   Centered, text-muted, 14px, ~48px vertical padding.
   Consistent with offering listing empty state treatment.
   ---------------------------------------- */

.rcx-resources-page .rcx-listing-empty-state {
    padding: 48px var(--wp--preset--spacing--24);
}

.rcx-resources-page .rcx-listing-empty-state__message {
    font-size: var(--wp--preset--font-size--base);
    color: var(--wp--preset--color--text-muted);
}

/* ----------------------------------------
   Offerings listing: title row + title-group
   "Offerings" h1 = 26px/600 navy (xxl preset).
   The title ROW is the horizontal band at the top of the listing: title group
   on the left, the V2 Invest Now control (when it renders at all) hard right,
   both top-aligned. space-between puts the control on the spine's right edge,
   which is where Clear Filters sits in the filter band above — the alignment
   the two controls are meant to share.
   The title GROUP stacks the heading and the "Showing X of Y offerings" count
   with a 6px gap; the 24px before the card grid is carried by the row, not the
   group, so that when the row stacks on narrow viewports the group's own
   bottom margin cannot add itself to the stacking gap. Note the 6px is the
   declared gap, not the whole rendered distance: the count line sits in a
   [data-rcx-count-region] wrapper that is the group's second child, so core's
   block-gap flow margin adds 24px on top of it. That is pre-existing and left
   alone deliberately — it is not what the row layout is changing.
   With the CTA absent — the production default, since the block renders no
   wrapper at all when the feature flag is off or the visitor is logged out —
   the row has a single child: gap applies between items only, so nothing
   shifts and no empty space appears.
   The row's own 24px margin-bottom is left at single-class specificity, unlike
   the child rules below: it is the same declaration, on the same kind of
   selector, in the same cascade position as the title group's margin-bottom it
   replaces, so it resolves core's (0,1,0) `margin-block-end: 0` the same way
   that one already did.
   Matches mockup ch-content__title-group / ch-content__title.
   ---------------------------------------- */

.rcx-offerings-page__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--24);
    margin-bottom: 24px;
}

/* Zero the WP block-gap flow margin on the row's direct children. The row is a
   wp:group with the default (flow) layout, so core emits
   `:root :where(.is-layout-flow) > * { margin-block: 24px 0 }` with a
   `:first-child` reset: the title group is first and resets itself, but the CTA
   is the second child and would render 24px below the heading instead of level
   with it — the same interaction documented on
   .rcx-offering-detail__body > .rcx-offering-detail__sidebar above. Both
   children are named rather than relying on `> *` for two reasons: `> *` would
   score (0,1,0), an order-dependent tie with core's selector, whereas each
   selector below scores (0,2,0) and wins outright with no !important; and
   naming both means the row does not silently depend on source order. This is
   also what removes the title group's WP default top margin, so the group's own
   rule below does not restate it. */
.rcx-offerings-page__title-row > .rcx-offerings-page__title-group,
.rcx-offerings-page__title-row > .rcx-listing-invest-now {
    margin-block: 0;
}

/* Narrow viewports (<=640px, matching the breakpoint the spine rules use):
   stack rather than squeeze the heading. flex-start keeps the control at its
   intrinsic width instead of stretching it across the column. */
@media (max-width: 640px) {
    .rcx-offerings-page__title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wp--preset--spacing--16);
    }
}

.rcx-offerings-page__title-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rcx-offerings-page__heading {
    font-size: var(--wp--preset--font-size--xxl);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0;
    line-height: 1.2;
}

/* Count line inside the title-group: remove its own margin so the group gap controls spacing */
.rcx-offerings-page__title-group .rcx-listing-count-line {
    margin: 0;
}

/* ----------------------------------------
   Listing empty state
   Rendered by patterns/listing-empty-state.php when query returns zero posts.
   Centered with generous vertical padding; uses secondary text token for
   the muted message, primary navy for the reset link.
   ---------------------------------------- */

.rcx-listing-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px var(--wp--preset--spacing--24);
    text-align: center;
    gap: var(--wp--preset--spacing--16);
}

.rcx-listing-empty-state__message {
    font-size: var(--wp--preset--font-size--md);
    color: var(--wp--preset--color--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.rcx-listing-empty-state__clear {
    font-size: var(--wp--preset--font-size--base);
    font-weight: 500;
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 150ms ease;
}

.rcx-listing-empty-state__clear:hover {
    color: var(--wp--preset--color--accent-strong);
}

/* ----------------------------------------
   Offering + Resource grid: equal-height cards + responsive column counts
   Mockup target: concept-1v3 .ch-grid (L205-209) — 3-col → 2-col → 1-col,
   .ch-card flex-column (L215-226), .ch-card__metrics margin-top:auto (L325).

   WP's post-template (columnCount:3) emits grid-template-columns via a
   generated .wp-container-* class or inline style that wins by specificity.
   We override with a doubled-class selector (no !important needed at this level)
   so our responsive breakpoints take effect.

   Equal-height: .wp-block-post grid items stretch to the full row height by
   default (align-items:stretch). display:flex on the item lets the card fill
   the cell; flex-direction:column preserves top→bottom internal layout.
   The card's own display:flex;flex-direction:column is already declared in
   src/blocks/offering-card/style.css + resource-card/style.css; height:100%
   here ensures the article fills the flex item.
   ---------------------------------------- */

/* Make each WP post-template grid item a flex container so the card fills it */
.rcx-offering-grid > .wp-block-post {
    display: flex;
    flex-direction: column;
}

.rcx-resource-grid > .wp-block-post {
    display: flex;
    flex-direction: column;
}

/* Card fills its flex item; flex-direction:column already set in block style.css */
.rcx-offering-grid > .wp-block-post > .rcx-offering-card {
    height: 100%;
}

.rcx-resource-grid > .wp-block-post > .rcx-resource-card {
    height: 100%;
}

/* Responsive column overrides — doubled-class specificity beats WP's
   .wp-container-* generated rules without requiring !important.
   Mirrors concept-1v3 .ch-grid responsive breakpoints (L1556, L1574). */

/* Tablet: 2 columns (641px–1024px) */
@media (max-width: 1024px) {
    .rcx-offering-grid.rcx-offering-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rcx-resource-grid.rcx-resource-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 column (≤640px) */
@media (max-width: 640px) {
    .rcx-offering-grid.rcx-offering-grid {
        grid-template-columns: 1fr;
    }

    .rcx-resource-grid.rcx-resource-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------
   Offering detail: flex row layout (single column at <=1024px)
   main = flex:1; min-width:0 (prevents grid blowout)
   sidebar = fixed 340px on desktop; stacks full-width below main at <=1024px
   gap 32px between columns per mockup ch-detail__columns.
   Replaces wp:columns 66.67/33.33 percentage split which conflicted
   with the sidebar's fixed-width requirement.
   ---------------------------------------- */

.rcx-offering-detail__body {
    display: flex;
    gap: 32px;
}

.rcx-offering-detail__main {
    flex: 1;
    min-width: 0;
}

.rcx-offering-detail__sidebar {
    flex: 0 0 340px;
    width: 340px;
}

/* Top-align the sidebar column with the gallery image at the top of the main
   column (stakeholder request: the Invest Now button reads as the start of the
   right-hand column, not as something hanging below it).

   Why a margin is in the way at all: WordPress core emits
   `:root :where(.is-layout-flow) > * { margin-block: 24px 0 }` for the block
   gap, with a companion `:first-child` reset. .rcx-offering-detail__body is a
   wp:group with the default (flow) layout, so .rcx-offering-detail__main —
   its first child — resets to 0 while .rcx-offering-detail__sidebar, the
   second child, keeps the 24px block-start and sits 24px lower.

   Specificity is deliberate, not incidental: core's selector scores (0,1,0)
   (`:root` is the only scoring component — `:where()` contributes nothing),
   so a bare `.rcx-offering-detail__sidebar { margin-block-start: 0 }` would be
   a (0,1,0) tie broken only by stylesheet order, and the order of core's global
   styles relative to this file is not something this theme controls. The
   two-class descendant selector below scores (0,2,0) and wins outright. Do not
   simplify it to a single class, and do not reach for !important.

   No compensation is needed in the <=1024px stacked layout below: there
   .rcx-offering-detail__body becomes a flex COLUMN and its existing 32px gap
   — not this margin — is what separates the stacked sidebar from the main
   content. Core's margin was simply additive on top of that gap (32 + 24),
   so removing it brings stacked spacing back to the 32px the rest of the
   layout uses rather than leaving anything flush. */
.rcx-offering-detail__body > .rcx-offering-detail__sidebar {
    margin-block-start: 0;
}

/* Tablet (<=1024px): stack to a single column — main content full-width,
   sidebar below. The squeezed 2-column layout was clipping the tab strip
   on tablet viewports. Sidebar renders full-width below the content
   (matches the block's own .rcx-offering-sidebar responsive rule). */
@media (max-width: 1024px) {
    .rcx-offering-detail__body {
        flex-direction: column;
    }

    .rcx-offering-detail__sidebar {
        width: 100%;
        /* Release the fixed 340px basis so the outer layout column is
           full-width + auto-height when stacked below the main content. */
        flex: 0 0 auto;
    }
}

/* Description tab: divider between body and Property Location block */
.rcx-offering-description__divider {
    border: none;
    border-top: 1px solid var(--wp--preset--color--border);
    margin: var(--wp--preset--spacing--24) 0;
}

/* ----------------------------------------
   Account Information page
   Two-column layout: main (flex:1) + sidebar (340px fixed).
   Mirrors .rcx-offering-detail__body/__main/__sidebar pattern.
   Mockup source: concept-1v3/pages/AccountInfo.tsx + styles.css ch-acct__*.
   ---------------------------------------- */

.rcx-account__layout {
    padding-top: var(--wp--preset--spacing--32);
    padding-bottom: var(--wp--preset--spacing--48);
}

.rcx-account__page-title {
    font-size: var(--wp--preset--font-size--xxl);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--24);
    line-height: 1.2;
}

/* Two-column flex: main grows, sidebar fixed at 340px */
.rcx-account__columns {
    display: flex;
    gap: 32px;
}

.rcx-account__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--24);
}

.rcx-account__side {
    flex: 0 0 340px;
    width: 340px;
}

/* ----------------------------------------
   Account cards
   ---------------------------------------- */

/* Base card: white surface, border, radius — mirrors .rcx-card but without hover lift */
.rcx-account__card {
    background: var(--wp--preset--color--surface);
    border-radius: var(--wp--custom--radius--lg);
    border: 1px solid var(--wp--preset--color--border);
    overflow: hidden;
}

/* Card body: padded section containing title + fields */
.rcx-account__card-body {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--24);
}

/* Simple card variant (Associated Account): no separate body/footer split */
.rcx-account__card--simple {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Card title: 18px/600/navy — visual h2; size differs from sidebar title via CSS only */
.rcx-account__card-title {
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0;
    line-height: 1.3;
}

/* Field: label stacked above value */
.rcx-account__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Label: 13px/500/text-secondary */
.rcx-account__label {
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    color: var(--wp--preset--color--text-secondary);
}

/* Value: 15px/primary navy */
.rcx-account__value {
    font-size: var(--wp--preset--font-size--md);
    color: var(--wp--preset--color--primary);
}

/* Card footer: bordered top, right-aligned Change Password link */
.rcx-account__card-footer {
    border-top: 1px solid var(--wp--preset--color--border);
    padding: 16px 32px;
    display: flex;
    justify-content: flex-end;
}

/* Change Password CTA: 14px/500/accent-strong (gold) */
.rcx-account__change-pw {
    font-size: var(--wp--preset--font-size--base);
    font-weight: 500;
    color: var(--wp--preset--color--accent-strong);
    text-decoration: none;
    transition: color 150ms ease;
}

.rcx-account__change-pw:hover {
    text-decoration: underline;
}

/* ----------------------------------------
   Contact Support sidebar card
   ---------------------------------------- */

.rcx-account__sidebar-card {
    background: var(--wp--preset--color--surface);
    border-radius: var(--wp--custom--radius--lg);
    border: 1px solid var(--wp--preset--color--border);
    padding: var(--wp--preset--spacing--24);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--16);
}

/* Support header: dashicon + title inline */
.rcx-account__support-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rcx-account__support-header .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--wp--preset--color--primary);
    flex-shrink: 0;
}

/* Sidebar card title: 16px/600/navy */
.rcx-account__sidebar-title {
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0;
    line-height: 1.3;
}

/* Support description text */
.rcx-account__support-desc {
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Contact row: dashicon + link inline */
.rcx-account__contact-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-secondary);
    margin: 0;
}

.rcx-account__contact-row .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--wp--preset--color--text-secondary);
    flex-shrink: 0;
}

.rcx-account__contact-row a {
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    transition: color 150ms ease;
}

.rcx-account__contact-row a:hover {
    color: var(--wp--preset--color--primary);
}

/* ----------------------------------------
   Account page responsive
   Sidebar: 340→280px at ≤1024px; single column at ≤640px.
   (Offering detail's sidebar now stacks single-column at ≤1024px instead —
   see .rcx-offering-detail__sidebar above — this account-page layout is
   unchanged and intentionally out of scope for that fix.)
   ---------------------------------------- */

@media (max-width: 1024px) {
    .rcx-account__side {
        flex: 0 0 280px;
        width: 280px;
    }
}

@media (max-width: 640px) {
    .rcx-account__columns {
        flex-direction: column;
    }

    .rcx-account__side {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ----------------------------------------
   Invest Now page shell
   Single-column layout: page title + a bordered card. Reuses the
   .rcx-account__layout / .rcx-account__card token vocabulary above rather
   than introducing a new visual idiom. The fields container inside the card
   (.rcx-invest-now__form-placeholder — the name predates real fields
   landing there, see invest-now.php's docblock) and everything inside it
   are styled by the plugin's own stylesheet,
   web/app/plugins/rcx-invest-now/assets/css/invest-now.css, not here — the
   feature owns its CSS rather than accreting into this shared file.
   ---------------------------------------- */

/* Vertical padding only. The horizontal spine for this route — the site
   margins plus the narrower 860px measure — is set with the other spine
   rules near the top of this file; see "Invest Now route: same spine
   mechanics, narrower measure". */
.rcx-invest-now__layout {
    padding-top: var(--wp--preset--spacing--32);
    padding-bottom: var(--wp--preset--spacing--48);
}

.rcx-invest-now__page-title {
    font-size: var(--wp--preset--font-size--xxl);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--24);
    line-height: 1.2;
}

.rcx-invest-now__card {
    background: var(--wp--preset--color--surface);
    border-radius: var(--wp--custom--radius--lg);
    border: 1px solid var(--wp--preset--color--border);
    padding: 28px 32px;
}

/* ----------------------------------------
   Login page
   Concept-1v3 mockup ch-login* (styles.css L1157-1308).
   Card: 440px max-width, white surface, radius-lg, soft shadow, 48/40 padding.
   Page background: --background (gray).
   ---------------------------------------- */

.rcx-login-page {
    background: var(--wp--preset--color--background);
}

.rcx-login__wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.rcx-login__card {
    width: 440px;
    max-width: 100%;
    background: var(--wp--preset--color--surface);
    border-radius: var(--wp--custom--radius--lg);
    padding: 48px 40px;
    box-shadow: var(--wp--custom--shadow--card);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* Brand block: logo + subtitle stacked, centered */
.rcx-login__brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.rcx-login__logo {
    max-width: 200px;
    max-height: 48px;
    object-fit: contain;
}

.rcx-login__subtitle {
    font-size: var(--wp--preset--font-size--md);
    color: var(--wp--preset--color--text-secondary);
    margin: 0;
}

/* Error alert: light red surface — uses border token for the box */
.rcx-login__error {
    width: 100%;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--radius--md);
    padding: 12px 16px;
    font-size: var(--wp--preset--font-size--base);
}

/* Form: full-width flex column */
.rcx-login__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Field: label stacked above input */
.rcx-login__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rcx-login__label {
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    color: var(--wp--preset--color--text);
}

.rcx-login__input {
    font-family: var(--wp--preset--font-family--dm-sans);
    font-size: var(--wp--preset--font-size--base);
    color: var(--wp--preset--color--text);
    border: 1px solid var(--wp--preset--color--border-input);
    border-radius: var(--wp--custom--radius--md);
    padding: 11px 14px;
    background: var(--wp--preset--color--surface);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 150ms ease;
}

.rcx-login__input::placeholder {
    color: var(--wp--preset--color--text-muted);
}

.rcx-login__input:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary);
}

/* Forgot password: gold, right-aligned */
.rcx-login__forgot {
    text-align: right;
    margin: -8px 0 0;
}

.rcx-login__forgot a {
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    color: var(--wp--preset--color--accent-strong);
    text-decoration: none;
}

.rcx-login__forgot a:hover {
    text-decoration: underline;
}

/* Sign In button: full-width, navy primary */
.rcx-login__btn {
    width: 100%;
    height: 46px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
    border: none;
    border-radius: var(--wp--custom--radius--md);
    font-family: var(--wp--preset--font-family--dm-sans);
    font-size: var(--wp--preset--font-size--md);
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease;
}

.rcx-login__btn:hover {
    /* Lighten primary navy — computed from token with no hardcoded hex */
    filter: brightness(1.15);
}

.rcx-login__btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-strong);
    outline-offset: 2px;
}

/* Horizontal rule divider */
.rcx-login__divider {
    width: 100%;
    border: none;
    border-top: 1px solid var(--wp--preset--color--border);
    margin: 0;
}

/* Attribution: "Powered by" + "RCX CAPITAL GROUP" */
.rcx-login__attribution {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rcx-login__powered {
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--text-muted);
}

.rcx-login__rcx {
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    letter-spacing: 1.5px;
}

/* ----------------------------------------
   No-Access page
   Concept-1v3 mockup ch-no-access* (styles.css L1001-1042).
   Full-bleed chrome: content spine on .rcx-no-access__content (not body class).
   Centered column; 48px lock icon; navy heading; gray body text.
   ---------------------------------------- */

/* Content wrapper carries the spine — header/footer remain full-bleed */
.rcx-no-access__content {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Inner column: centered flex, text-center, max 480px body text */
.rcx-no-access__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 400px;
}

/* 48px lock dashicon */
.rcx-no-access__icon {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--wp--preset--color--primary);
    margin-bottom: 16px;
    display: block;
}

/* Navy heading — targets the bare <h1> the template emits (D1 asserts no class on h1) */
.rcx-no-access__inner h1 {
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    margin: 0 0 12px;
}

/* Gray body text, max ~480px width */
.rcx-no-access__body {
    font-size: var(--wp--preset--font-size--base);
    color: var(--wp--preset--color--text-secondary);
    line-height: 1.7;
    margin: 0 0 24px;
    max-width: 480px;
}

.rcx-no-access__body p {
    margin: 0 0 0.75em;
}

.rcx-no-access__body p:last-child {
    margin-bottom: 0;
}

/* Navy CTA button */
.rcx-no-access__btn {
    display: inline-block;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
    border-radius: var(--wp--custom--radius--md);
    padding: 12px 24px;
    font-family: var(--wp--preset--font-family--dm-sans);
    font-size: var(--wp--preset--font-size--base);
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms ease;
}

.rcx-no-access__btn:hover {
    /* Lighten primary navy — computed from token with no hardcoded hex */
    filter: brightness(1.15);
}

.rcx-no-access__btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-strong);
    outline-offset: 2px;
}