/*
Theme Name:   Astra · EQPACK (Red Wolf Associates)
Theme URI:    https://eqpack.org/
Description:  Astra child theme for EQPACK, aligned to the Red Wolf Associates brand system. Overrides Astra's color palette, typography, and header lockup to match the RWA design tokens.
Author:       Red Wolf Associates
Author URI:   https://redwolfassociates.com/
Template:     astra
Version:      1.0.10
Text Domain:  astra-eq-subscription
*/

/* ============================================================
   RWA brand tokens (mirrors eq-subscription-service-design-files/styles/brand.css)
   Scoped to :root so they cascade through Astra's stylesheet.
   ============================================================ */

:root {
    --rwa-red:        #8A2222;                   /* oklch(0.42 0.13 25) */
    --rwa-red-deep:   #5A1212;                   /* oklch(0.34 0.12 25) */
    --rwa-red-tint:   #FAEFEC;                   /* oklch(0.96 0.02 25) */
    --rwa-paper:      #FAFAF7;                   /* warm ivory page */
    --rwa-paper-pure: #FFFFFF;                   /* clean white for tables/cards */
    --rwa-ink:        #1A1A1A;
    --rwa-ink-soft:   #2C2C2C;
    --rwa-muted:      #6B6B66;
    --rwa-muted-soft: #8C8C87;
    --rwa-rule:       #D8D4CC;
    --rwa-rule-soft:  #EBE7DF;

    --rwa-font-serif: 'Source Serif 4', 'Source Serif Pro', Cambria, Georgia, serif;
    --rwa-font-sans:  'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --rwa-font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================================================
   Astra global color palette overrides
   Astra emits CSS custom properties like --ast-global-color-N for each
   palette slot. We override those here so any block/widget that
   references a palette slot picks up the new brand colors automatically.
   ============================================================ */

body {
    --ast-global-color-0: var(--rwa-red);        /* primary */
    --ast-global-color-1: var(--rwa-red-deep);   /* primary hover */
    --ast-global-color-2: var(--rwa-ink);        /* heading */
    --ast-global-color-3: var(--rwa-ink-soft);   /* body */
    --ast-global-color-4: var(--rwa-paper);      /* page bg */
    --ast-global-color-5: var(--rwa-paper-pure); /* content bg */
    --ast-global-color-6: var(--rwa-rule);       /* borders */
    --ast-global-color-7: var(--rwa-rule-soft);  /* subtle bg */
    --ast-global-color-8: var(--rwa-muted);      /* muted text */

    background-color: var(--rwa-paper);
    color: var(--rwa-ink);
    font-family: var(--rwa-font-sans);
}

a {
    color: var(--rwa-red);
}
a:hover,
a:focus {
    color: var(--rwa-red-deep);
}

/* ============================================================
   Typography — headings switch to Source Serif 4
   The Customizer SQL patch also updates Astra's headings-font-family
   setting; this CSS is the belt-and-suspenders fallback for any
   stylesheet that hard-references font stacks.
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.ast-archive-title {
    font-family: var(--rwa-font-serif);
    color: var(--rwa-ink);
    text-wrap: balance;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ============================================================
   Header logo — recolored EQPACK mark (oxblood)
   The PNG itself is recolored; we just normalize sizing here so
   the logo renders cleanly at the Astra-default 100px width
   without distortion.
   ============================================================ */

.site-branding .custom-logo {
    max-height: 72px;
    width: auto;
    height: auto;
}

@media (max-width: 768px) {
    .site-branding .custom-logo {
        max-height: 52px;
    }
}

/* ============================================================
   bbPress — keep the legible font-size lift the previous Customizer
   custom CSS added, but scope it inside the brand and clean it up.
   ============================================================ */

#bbpress-forums,
#bbpress-forums .bbp-forums,
#bbpress-forums .bbp-topics,
#bbpress-forums .bbp-replies,
#bbpress-forums .bbp-body,
#bbpress-forums .bbp-topic-content,
#bbpress-forums .bbp-reply-content {
    font-size: 17px;
    line-height: 1.55;
}

#bbpress-forums .bbp-forum-title,
#bbpress-forums .bbp-topic-title {
    font-family: var(--rwa-font-serif);
    font-weight: 600;
    color: var(--rwa-ink);
}

#bbpress-forums .bbp-forum-title a:hover,
#bbpress-forums .bbp-topic-title a:hover {
    color: var(--rwa-red);
}

/* Subtle red rule under forum headers to echo the brand */
#bbpress-forums .bbp-forum-header,
#bbpress-forums .bbp-topic-header {
    border-bottom: 2px solid var(--rwa-red);
}

/* ============================================================
   Buttons — adopt brand red
   ============================================================ */

.wp-block-button__link,
.ast-button,
button,
input[type="submit"],
.bbp-submit-wrapper button {
    background-color: var(--rwa-red);
    border-color: var(--rwa-red);
    color: var(--rwa-paper);
    font-family: var(--rwa-font-sans);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.wp-block-button__link:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover,
.bbp-submit-wrapper button:hover {
    background-color: var(--rwa-red-deep);
    border-color: var(--rwa-red-deep);
    color: var(--rwa-paper);
}

/* ============================================================
   Ultimate Member form buttons (login, register, account, etc.)
   UM ships with its own button styles using inline-styled <input>
   elements; we override with higher specificity to apply brand red.
   ============================================================ */

.um-button,
.um-button:not(.um-alt),
input.um-button,
button.um-button,
.um a.um-button,
.um-form input[type="submit"],
.um-form button[type="submit"] {
    background-color: var(--rwa-red) !important;
    border-color: var(--rwa-red) !important;
    color: var(--rwa-paper) !important;
    font-family: var(--rwa-font-sans);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 3px;
    box-shadow: none;
    text-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.um-button:hover,
.um-button:not(.um-alt):hover,
input.um-button:hover,
button.um-button:hover,
.um a.um-button:hover,
.um-form input[type="submit"]:hover,
.um-form button[type="submit"]:hover {
    background-color: var(--rwa-red-deep) !important;
    border-color: var(--rwa-red-deep) !important;
    color: var(--rwa-paper) !important;
}

/* UM's "alt" button (secondary action like 'Register' next to 'Login') */
.um-button.um-alt,
.um a.um-button.um-alt,
input.um-button.um-alt {
    background-color: transparent !important;
    color: var(--rwa-red) !important;
    border: 1px solid var(--rwa-rule) !important;
}

.um-button.um-alt:hover,
.um a.um-button.um-alt:hover,
input.um-button.um-alt:hover {
    background-color: var(--rwa-red-tint) !important;
    border-color: var(--rwa-red) !important;
    color: var(--rwa-red-deep) !important;
}

/* UM "Keep me signed in" and similar checkbox row spacing */
.um .um-field-checkbox label,
.um-field-checkbox-option {
    color: var(--rwa-ink-soft);
}

/* UM "Forgot your password?" link */
.um-form a {
    color: var(--rwa-red);
}
.um-form a:hover {
    color: var(--rwa-red-deep);
}

/* ============================================================
   bbPress submit / form buttons — final brand pass
   ============================================================ */

#bbpress-forums .bbp-submit-wrapper button,
#bbpress-forums .bbp-submit-wrapper input[type="submit"],
#bbpress-forums button[type="submit"],
#bbpress-forums input[type="submit"],
#bbpress-forums .bbp-login-form input[type="submit"],
.bbp-search-form input[type="submit"],
.bbp-search-form button[type="submit"] {
    background-color: var(--rwa-red) !important;
    border-color: var(--rwa-red) !important;
    color: var(--rwa-paper) !important;
    font-family: var(--rwa-font-sans);
    font-weight: 600;
    border-radius: 3px;
}

#bbpress-forums .bbp-submit-wrapper button:hover,
#bbpress-forums input[type="submit"]:hover,
.bbp-search-form input[type="submit"]:hover,
.bbp-search-form button[type="submit"]:hover {
    background-color: var(--rwa-red-deep) !important;
    border-color: var(--rwa-red-deep) !important;
    color: var(--rwa-paper) !important;
}

/* ============================================================
   Hide forum topic byline (Astra default post meta) on bbPress
   single-topic pages — it shows "By <author> /" which is awkward
   for forum content (the topic content already has its own author
   attribution within the bbPress reply table).
   ============================================================ */

body.single-topic .entry-meta,
body.single-topic .ast-author-meta,
body.single-topic .ast-single-post-meta,
body.bbpress.single .entry-meta {
    display: none;
}

/* ============================================================
   Forum / topic table header — pick up brand red instead of grey
   ============================================================ */

#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
    background: var(--rwa-red-tint);
    border-color: var(--rwa-rule);
}

#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-header a {
    color: var(--rwa-ink);
    font-family: var(--rwa-font-sans);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 11.5px;
}

/* ============================================================
   Tables — when a page or block renders a table, use the brand
   treatment (red header band, warm zebra rows). Matches the
   sell-sheet design.
   ============================================================ */

.entry-content table:not(.bbp-topic-form):not(.bbp-reply-form) thead th,
.wp-block-table thead th {
    background: var(--rwa-red);
    color: var(--rwa-paper);
    font-family: var(--rwa-font-sans);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85em;
}

.entry-content table:not(.bbp-topic-form):not(.bbp-reply-form) tbody tr:nth-child(even) td,
.wp-block-table tbody tr:nth-child(even) td {
    background: #F7F4EC;
}

/* ============================================================
   Topic gate (non-members on single topic pages)
   ============================================================ */

.rwa-topic-gate-wrapper .rwa-topic-title {
    font-family: var(--rwa-font-serif);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.18;
    color: var(--rwa-ink);
    margin: 18px 0 24px;
    text-wrap: balance;
}

.rwa-topic-gate {
    background: var(--rwa-paper-pure);
    border: 1px solid var(--rwa-rule);
    border-left: 3px solid var(--rwa-red);
    padding: 28px 30px;
    margin: 0 auto;
    max-width: 640px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(138, 34, 34, 0.04);
}

.rwa-topic-gate .rwa-gate-eyebrow {
    font-family: var(--rwa-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rwa-red);
    margin: 0 0 12px;
}

.rwa-topic-gate .rwa-gate-heading {
    font-family: var(--rwa-font-serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25;
    color: var(--rwa-ink);
    margin: 0 0 14px;
}

.rwa-topic-gate .rwa-gate-body {
    font-family: var(--rwa-font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--rwa-ink-soft);
    margin: 0 0 22px;
}

.rwa-topic-gate .rwa-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.rwa-topic-gate .rwa-gate-button {
    display: inline-block;
    padding: 10px 20px;
    font-family: var(--rwa-font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rwa-topic-gate .rwa-gate-button-primary {
    background: var(--rwa-red);
    color: var(--rwa-paper);
    border: 1px solid var(--rwa-red);
}
.rwa-topic-gate .rwa-gate-button-primary:hover {
    background: var(--rwa-red-deep);
    border-color: var(--rwa-red-deep);
    color: var(--rwa-paper);
}

.rwa-topic-gate .rwa-gate-button-secondary {
    background: transparent;
    color: var(--rwa-red);
    border: 1px solid var(--rwa-rule);
}
.rwa-topic-gate .rwa-gate-button-secondary:hover {
    background: var(--rwa-red-tint);
    border-color: var(--rwa-red);
    color: var(--rwa-red-deep);
}

@media (max-width: 600px) {
    .rwa-topic-gate {
        padding: 22px 20px;
    }
    .rwa-topic-gate .rwa-gate-heading {
        font-size: 19px;
    }
    .rwa-topic-gate .rwa-gate-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .rwa-topic-gate .rwa-gate-button {
        text-align: center;
    }
}

/* ============================================================
   Conditional menu items.
   .rwa-anon-only      → hidden for logged-in users
   .rwa-loggedin-only  → hidden for anonymous (logged-out) users
   Both classes are applied to nav menu items via wp_update_nav_menu_item.
   ============================================================ */

.logged-in .rwa-anon-only {
    display: none !important;
}

body:not(.logged-in) .rwa-loggedin-only {
    display: none !important;
}

/* ============================================================
   ACCESSIBILITY — Ultimate Member form contrast (rec #8)
   pa11y-ci flagged the required-asterisk markers, checkbox labels,
   "Forgot your password?" link, password-reset helper text, and
   "Keep me signed in" as below WCAG AA 4.5:1 on the ivory background.
   Bumping all to --rwa-ink-soft (#2C2C2C) where they were grey.
   ============================================================ */

.um .um-req,
.um-req {
    color: var(--rwa-red);                       /* meets AA on #FAFAF7 */
    font-weight: 600;
}

.um .um-field-checkbox label,
.um .um-field-checkbox-option,
.um-field-checkbox label,
.um-field-checkbox-option {
    color: var(--rwa-ink-soft);                  /* ≥4.5:1 on ivory */
}

.um-form a,
.um-form a:visited {
    color: var(--rwa-red-deep);                  /* deeper red for higher contrast on body */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.um-form .um-field-block,
.um .um-field-block,
.um-field-block div {
    color: var(--rwa-ink-soft);                  /* password-reset helper prose */
}

/* Password-reset / account-edit input visible label (rec #9, paired
   with the functions.php filter that injects the <label> element).
   Style it like every other UM label so it doesn't look bolted on. */
.um-form label[for="username_b"] {
    display: block;
    font-family: var(--rwa-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--rwa-ink);
    margin-bottom: 6px;
}

/* ============================================================
   LOGGED-IN HOMEPAGE CTAs (rec #6)
   The home page (post 21) renders "Register Now" + "Login" buttons
   as standard Gutenberg button blocks. Until those blocks are
   wrapped in [um_loggedout]…[/um_loggedout] in the page editor,
   hide them via CSS for authenticated visitors.
   The selector is permalink-scoped to /register/ and /login/ so we
   don't accidentally hide other "Login" text elsewhere.
   ============================================================ */

body.home.logged-in a.wp-block-button__link[href$="/register/"],
body.home.logged-in a.wp-block-button__link[href$="/login/"],
body.home.logged-in a.wp-block-button__link[href*="/register/?"],
body.home.logged-in a.wp-block-button__link[href*="/login/?"],
body.home.logged-in .wp-block-button:has(a[href$="/register/"]),
body.home.logged-in .wp-block-button:has(a[href$="/login/"]) {
    display: none !important;
}

/* ============================================================
   MOBILE — Cookie banner footprint (rec #1)
   CookieYes ("cky-*") banner occupies roughly half the viewport
   on phones and overlaps the active page task. Cap the height and
   tighten paddings on ≤600px.
   ============================================================ */

@media (max-width: 600px) {

    .cky-consent-container,
    .cky-modal,
    .cky-consent-bar,
    .cky-overlay + .cky-consent-container {
        max-height: 42vh;                        /* leave 58% of viewport for actual content */
        overflow-y: auto;
        padding: 14px 14px !important;
        font-size: 13px;
    }

    .cky-title,
    .cky-notice-title {
        font-size: 15px;
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .cky-notice-des,
    .cky-notice-des p {
        font-size: 12.5px;
        line-height: 1.4;
        margin: 0 0 8px;
    }

    .cky-notice-btn-wrapper,
    .cky-consent-bar .cky-notice-btn-wrapper {
        flex-wrap: wrap;
        gap: 6px;
    }

    .cky-notice-btn-wrapper .cky-btn,
    .cky-consent-bar .cky-btn {
        padding: 8px 12px;
        font-size: 13px;
        min-width: 0;
        flex: 1 1 calc(50% - 6px);               /* two-up button row instead of stacking */
    }

    /* Hide the verbose "preferences" toggle button text on phones —
       icon/short label only. The full settings modal is still reachable. */
    .cky-btn-customize .cky-btn-label-long,
    .cky-btn-preferences .cky-btn-label-long {
        display: none;
    }
}

/* ============================================================
   MOBILE — bbPress forum index responsive layout (rec #4)
   On ≤768px, convert the forum table into a stacked card layout.
   Each forum row becomes its own card with the title on top and
   topic/post counts as a compact metadata row underneath.
   ============================================================ */

@media (max-width: 768px) {

    /* Stack rows; drop fixed table-cell widths */
    #bbpress-forums .bbp-forums-list,
    #bbpress-forums ul.bbp-forums,
    #bbpress-forums ul.bbp-topics {
        display: block;
    }

    #bbpress-forums li.bbp-header,
    #bbpress-forums li.bbp-footer {
        display: none;                            /* column headers don't make sense in a card layout */
    }

    #bbpress-forums li.bbp-body ul.forum,
    #bbpress-forums li.bbp-body ul.topic {
        display: block;
        padding: 14px 14px 12px;
        margin: 0 0 10px;
        background: var(--rwa-paper-pure);
        border: 1px solid var(--rwa-rule);
        border-left: 3px solid var(--rwa-red);
        border-radius: 3px;
    }

    /* Forum/topic title takes full width */
    #bbpress-forums li.bbp-forum-info,
    #bbpress-forums li.bbp-topic-title {
        float: none;
        width: 100%;
        padding: 0;
        margin-bottom: 8px;
    }

    #bbpress-forums .bbp-forum-title,
    #bbpress-forums .bbp-topic-title a {
        font-size: 17px;
        line-height: 1.3;
    }

    #bbpress-forums .bbp-forum-content,
    #bbpress-forums .bbp-topic-meta {
        font-size: 13px;
        color: var(--rwa-muted);
        margin: 4px 0 0;
    }

    /* Compact metadata row: topics · replies · last post */
    #bbpress-forums li.bbp-forum-topic-count,
    #bbpress-forums li.bbp-forum-reply-count,
    #bbpress-forums li.bbp-topic-voice-count,
    #bbpress-forums li.bbp-topic-reply-count {
        display: inline-block;
        float: none;
        width: auto;
        padding: 0 12px 0 0;
        font-size: 12.5px;
        color: var(--rwa-muted);
        text-align: left;
    }

    #bbpress-forums li.bbp-forum-topic-count::before { content: "Topics: "; opacity: 0.65; }
    #bbpress-forums li.bbp-forum-reply-count::before { content: "Replies: "; opacity: 0.65; }
    #bbpress-forums li.bbp-topic-voice-count::before { content: "Voices: "; opacity: 0.65; }
    #bbpress-forums li.bbp-topic-reply-count::before { content: "Replies: "; opacity: 0.65; }

    /* Last-post column: simplified to author + relative time on its own line */
    #bbpress-forums li.bbp-forum-freshness,
    #bbpress-forums li.bbp-topic-freshness {
        display: block;
        float: none;
        width: 100%;
        padding: 8px 0 0;
        margin: 8px 0 0;
        border-top: 1px solid var(--rwa-rule-soft);
        font-size: 12.5px;
        color: var(--rwa-muted);
        text-align: left;
    }

    #bbpress-forums li.bbp-forum-freshness::before,
    #bbpress-forums li.bbp-topic-freshness::before {
        content: "Last post: ";
        opacity: 0.65;
    }

    /* Search row: stack input + button vertically, full width */
    #bbpress-forums .bbp-search-form {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    #bbpress-forums .bbp-search-form input[type="text"],
    #bbpress-forums .bbp-search-form input[type="search"] {
        width: 100%;
        max-width: none;
    }
    #bbpress-forums .bbp-search-form input[type="submit"],
    #bbpress-forums .bbp-search-form button[type="submit"] {
        width: 100%;
    }
}

/* ============================================================
   MOBILE — bbPress single-topic / reply layout (rec #5)
   Convert AUTHOR / POSTS two-column layout into stacked cards.
   ============================================================ */

@media (max-width: 768px) {

    #bbpress-forums div.bbp-reply-header,
    #bbpress-forums div.bbp-topic-header,
    #bbpress-forums li.bbp-header {
        display: none;                            /* column header row is meaningless in stacked layout */
    }

    #bbpress-forums div.bbp-topic-author,
    #bbpress-forums div.bbp-reply-author {
        float: none;
        width: 100%;
        max-width: 100%;
        text-align: left;
        padding: 12px 14px 6px;
        background: var(--rwa-paper);
        border-bottom: 1px solid var(--rwa-rule-soft);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #bbpress-forums div.bbp-topic-author img.avatar,
    #bbpress-forums div.bbp-reply-author img.avatar {
        width: 32px;
        height: 32px;
        margin: 0;
    }

    #bbpress-forums div.bbp-topic-author .bbp-author-name,
    #bbpress-forums div.bbp-reply-author .bbp-author-name {
        font-weight: 600;
        font-size: 14px;
    }

    #bbpress-forums div.bbp-topic-author .bbp-author-role,
    #bbpress-forums div.bbp-reply-author .bbp-author-role {
        font-size: 12px;
        color: var(--rwa-muted);
        margin-left: auto;
    }

    #bbpress-forums div.bbp-topic-content,
    #bbpress-forums div.bbp-reply-content {
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 14px;
        margin: 0;
        font-size: 15.5px;
        line-height: 1.55;
    }

    /* Reply form: bigger tap targets, more breathing room */
    #bbpress-forums .bbp-reply-form,
    #bbpress-forums #new-reply,
    #bbpress-forums fieldset.bbp-form {
        padding: 14px;
    }

    #bbpress-forums .wp-editor-tools,
    #bbpress-forums .quicktags-toolbar {
        padding: 6px 4px;
    }

    #bbpress-forums .wp-editor-tools .ed_button,
    #bbpress-forums .quicktags-toolbar input.ed_button {
        min-width: 36px;
        min-height: 36px;                         /* 36×36 hits WCAG 2.5.5 target size */
        margin: 2px;
        font-size: 13px;
    }

    #bbpress-forums textarea#bbp_reply_content,
    #bbpress-forums .wp-editor-area {
        min-height: 180px;
        font-size: 16px;                          /* 16px prevents iOS Safari zoom on focus */
        padding: 10px;
        line-height: 1.5;
    }
}

/* ============================================================
   MOBILE — UM account page (rec #7)
   Spacing pass for the account tabs at ≤600px so the form fields
   sit clear of the (now-shorter) cookie banner.
   ============================================================ */

@media (max-width: 600px) {

    .um-account .um-account-nav,
    .um-account-tabs,
    .um-account-side {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 16px;
    }

    .um-account .um-account-tab,
    .um-account-tab {
        flex: 1 1 calc(50% - 4px);
        padding: 10px;
        text-align: center;
        font-size: 13.5px;
        font-weight: 600;
        border-radius: 3px;
        background: var(--rwa-rule-soft);
        color: var(--rwa-ink-soft);
    }

    .um-account .um-account-tab.active,
    .um-account-tab.active,
    .um-account-tab[data-active="1"] {
        background: var(--rwa-red);
        color: var(--rwa-paper);                  /* clear active state */
    }

    .um-form .um-field,
    .um-account .um-field {
        margin-bottom: 14px;
    }

    .um-form .um-field input[type="text"],
    .um-form .um-field input[type="email"],
    .um-form .um-field input[type="password"],
    .um-form .um-field textarea,
    .um-account input[type="text"],
    .um-account input[type="email"],
    .um-account input[type="password"] {
        font-size: 16px;                          /* prevent iOS zoom */
        padding: 11px 12px;
    }
}

/* ============================================================
   LANDING PAGE (rec #10) — Hero, forum preview cards,
   "what you can do as a member" grid, EQ Anchor Pro value grid.
   ============================================================ */

/* Hero — restrained technical-blueprint background.
   A radial wash in brand red, plus a faint engineering-grid line pattern
   built from CSS gradients (no image asset needed). */
.rwa-hero {
    background:
        /* fine grid lines */
        repeating-linear-gradient(
            0deg,
            rgba(138, 34, 34, 0.05) 0px,
            rgba(138, 34, 34, 0.05) 1px,
            transparent 1px,
            transparent 48px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(138, 34, 34, 0.05) 0px,
            rgba(138, 34, 34, 0.05) 1px,
            transparent 1px,
            transparent 48px
        ),
        /* warm wash */
        radial-gradient(
            circle at 50% 28%,
            var(--rwa-red-tint) 0%,
            var(--rwa-paper) 62%,
            var(--rwa-paper) 100%
        );
    border-bottom: 1px solid var(--rwa-rule);
}

.rwa-hero-eyebrow {
    font-family: var(--rwa-font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rwa-red);
    margin: 0 0 14px;
}

.rwa-hero-title {
    color: var(--rwa-ink);
    margin: 0 0 0.4em;
    text-wrap: balance;
}

.rwa-hero-lede {
    color: var(--rwa-ink-soft);
    max-width: 36em;
    margin-left: auto;
    margin-right: auto;
}

/* Generic section eyebrow used by the new sections */
.rwa-section-eyebrow {
    font-family: var(--rwa-font-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rwa-red);
    margin: 0 0 10px;
}

.rwa-section-lede {
    color: var(--rwa-ink-soft);
    max-width: 36em;
    margin: 0 auto 28px;
}

/* Forum preview cards — 2×2 grid on desktop, single column on mobile */
.rwa-forum-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 920px;
    margin: 28px auto 0;
    padding: 0 16px;
}

.rwa-forum-card {
    display: block;
    background: var(--rwa-paper-pure);
    border: 1px solid var(--rwa-rule);
    border-left: 3px solid var(--rwa-red);
    border-radius: 3px;
    padding: 20px 22px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.rwa-forum-card:hover {
    box-shadow: 0 4px 18px rgba(138, 34, 34, 0.10);
    border-color: var(--rwa-rule);
    border-left-color: var(--rwa-red-deep);
    transform: translateY(-1px);
}

.rwa-forum-card-tag {
    font-family: var(--rwa-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rwa-red);
    margin: 0 0 8px;
}

.rwa-forum-card-title {
    font-family: var(--rwa-font-serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--rwa-ink);
    margin: 0 0 8px;
}

.rwa-forum-card-body {
    font-family: var(--rwa-font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--rwa-ink-soft);
    margin: 0 0 12px;
}

.rwa-forum-card-cta {
    font-family: var(--rwa-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--rwa-red);
}

.rwa-forum-card:hover .rwa-forum-card-cta {
    color: var(--rwa-red-deep);
}

@media (max-width: 720px) {
    .rwa-forum-cards {
        grid-template-columns: 1fr;
    }
}

/* "What you can do as a member" grid */
.rwa-can-do-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 920px;
    margin: 24px auto 0;
    padding: 0 16px;
}

.rwa-can-do-item {
    background: var(--rwa-paper-pure);
    border: 1px solid var(--rwa-rule);
    border-radius: 3px;
    padding: 22px 24px 24px;
    position: relative;
}

.rwa-can-do-mark {
    font-family: var(--rwa-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;
    color: var(--rwa-red);
    display: block;
    margin-bottom: 8px;
}

.rwa-can-do-title {
    font-family: var(--rwa-font-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--rwa-ink);
    margin: 0 0 8px;
}

.rwa-can-do-body {
    font-family: var(--rwa-font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--rwa-ink-soft);
    margin: 0;
}

@media (max-width: 720px) {
    .rwa-can-do-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* EQ Anchor Pro concrete-value grid (3×2 on desktop, 1-col on mobile) */
.rwa-anchor-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 960px;
    margin: 28px auto 32px;
    padding: 0 16px;
}

.rwa-anchor-value {
    background: var(--rwa-paper-pure);
    border: 1px solid var(--rwa-rule);
    border-top: 3px solid var(--rwa-red);
    border-radius: 3px;
    padding: 18px 20px 20px;
}

.rwa-anchor-value h4 {
    font-family: var(--rwa-font-serif);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--rwa-ink);
    margin: 0 0 6px;
    line-height: 1.25;
}

.rwa-anchor-value p {
    font-family: var(--rwa-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--rwa-ink-soft);
    margin: 0;
}

@media (max-width: 900px) {
    .rwa-anchor-value-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .rwa-anchor-value-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ============================================================
   FORUM LEAK DETERRENT
   - Per-user watermark overlay (set by inline JS in functions.php)
   - @media print blocks bbPress content and shows a notice
   - Per-topic "do not redistribute" banner
   ============================================================ */

.rwa-watermark {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background-repeat: repeat;
    background-position: center top;
    /* Compositing hint so the overlay doesn't repaint heavily on scroll */
    will-change: transform;
}

/* Don't show the watermark behind the cookie banner / preference center /
   or any modal dialog that needs to be readable. */
.cky-modal,
.cky-consent-container,
.cky-revisit-bottom-left,
.cky-revisit-bottom-right,
.cky-preference-center {
    z-index: 999999;
}

/* Per-topic "do not redistribute" banner */
body.bbp-single-topic #bbpress-forums::before,
body.single.single-topic #bbpress-forums::before {
    content: "This discussion is shared with you under your EQPACK membership. Do not redistribute.";
    display: block;
    padding: 12px 16px;
    margin: 0 0 18px;
    background: var(--rwa-red-tint);
    border-left: 3px solid var(--rwa-red);
    font-family: var(--rwa-font-sans);
    font-size: 13px;
    line-height: 1.45;
    color: var(--rwa-ink-soft);
    border-radius: 0 3px 3px 0;
}

/* Print blocking — on any bbPress page, drop the forum content and emit a
   short notice instead. The user-facing print dialog still works (we don't
   try to block it via JS); the printed page is just the notice. */
@media print {
    body.bbpress #bbpress-forums,
    body.bbpress .bbpress-wrapper,
    body.single.single-topic #bbpress-forums,
    body.bbp-single-topic #bbpress-forums {
        display: none !important;
    }
    body.bbpress::before,
    body.single.single-topic::before,
    body.bbp-single-topic::before {
        content: "Forum content cannot be printed. EQPACK discussions are shared under your member terms and may not be redistributed.";
        display: block !important;
        padding: 60px 40px !important;
        font-family: Georgia, serif !important;
        font-size: 14pt !important;
        line-height: 1.5 !important;
        color: #000 !important;
        max-width: 6.5in !important;
    }
    .rwa-watermark {
        display: none !important;
    }
    /* Hide everything else WP/Astra would normally print */
    body.bbpress .site-header,
    body.bbpress .site-footer,
    body.bbpress .ast-mobile-header-wrap,
    body.bbpress #wpadminbar,
    body.bbpress .cky-consent-container,
    body.bbpress .cky-revisit-bottom-left,
    body.bbpress .cky-revisit-bottom-right,
    body.single.single-topic .site-header,
    body.single.single-topic .site-footer,
    body.single.single-topic #wpadminbar {
        display: none !important;
    }
}

/* ============================================================
   Forum index — empty bbp-topic-meta hide (rec #10 companion)
   The PHP hook in functions.php suppresses the author <span> when
   a forum has zero topics; this rule hides the now-empty wrapping
   <p class="bbp-topic-meta"> so we don't render a stray blank line
   under "No Topics".
   ============================================================ */

#bbpress-forums .bbp-forum-freshness .bbp-topic-meta:empty,
#bbpress-forums .bbp-forum-freshness .bbp-topic-meta:has(> :empty) {
    display: none;
}

/* ============================================================
   Footer — quieter, in keeping with the brand
   ============================================================ */

.site-footer {
    background: var(--rwa-paper);
    color: var(--rwa-muted);
    border-top: 1px solid var(--rwa-rule);
}

.site-footer a {
    color: var(--rwa-muted);
    text-decoration: underline;
    text-decoration-color: var(--rwa-rule);
}
.site-footer a:hover {
    color: var(--rwa-red);
    text-decoration-color: var(--rwa-red);
}