/* ============================================================================
   Page Polish — Login, Events, Members Directory
   Design token-based styling for non-profile pages
   ============================================================================ */

/* ============================================================================
   1. SECTION: Login Page (wp-login.php)
   ============================================================================ */
/* wp-login.php styles are handled by inline CSS in functions.php section 12.1.
   Do NOT add body.login rules here — they conflict with the inline !important styles. */
/* end of 1 */

/* ============================================================================
   2. SECTION: Events Page Cards
   ============================================================================ */

/* 2.1 Event card grid */
.events-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-xl, 24px);
}

/* 2.1.0 P2.33a — events grid mobile/tablet adaptation
   Drop minmax floor to 260px between 481-768px to prevent overflow,
   single-column under 480px (smallest phone). */
@media (max-width: 768px) {
    .events-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--space-md, 16px);
    }
}
@media (max-width: 480px) {
    .events-card-grid {
        grid-template-columns: 1fr;
    }
}

/* 2.1.1 Event card */
.event-card {
    position: relative;
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(26, 26, 46, 0.08));
    overflow: hidden;
    transition: box-shadow var(--motion-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1),
                transform var(--motion-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card:hover {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(26, 26, 46, 0.12));
    transform: translateY(-2px);
}

/* 2.1.2 Hero image */
.event-card-hero {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.event-card-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(3, 27, 131, 0.4) 0%, transparent 100%);
    pointer-events: none;
}

/* 2.1.3 Date badge */
.event-card-date {
    position: absolute;
    top: var(--space-md, 12px);
    right: var(--space-md, 12px);
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-xs, 4px) var(--space-sm, 8px);
    text-align: center;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(26, 26, 46, 0.08));
    min-width: 48px;
}

.event-card-date-day {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 22px;
    color: var(--color-navy, #031B83);
    line-height: 1;
    display: block;
}

.event-card-date-month {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-gold, #CC9900);
    letter-spacing: 0.5px;
    display: block;
}

/* 2.1.4 Card body */
.event-card-body {
    padding: var(--space-lg, 16px);
}

.event-card-title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-navy, #031B83);
    margin: 0 0 var(--space-sm, 8px) 0;
    line-height: 1.3;
}

.event-card-venue {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 4px);
    font-size: 14px;
    color: var(--color-text-muted, #6B7280);
    margin-bottom: var(--space-md, 12px);
}

.event-card-venue .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--color-gold, #CC9900);
}

/* 2.1.5 Attendee avatar stack */
.event-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-card-attendees {
    display: flex;
    align-items: center;
}

.event-card-attendees img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--color-surface, #FFFFFF);
    object-fit: cover;
    margin-left: -8px;
}

.event-card-attendees img:first-child {
    margin-left: 0;
}

.event-card-attendees-more {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface-raised, #F9F8F5);
    border: 2px solid var(--color-surface, #FFFFFF);
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted, #6B7280);
}

/* 2.1.6 RSVP button */
.event-card-rsvp {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs, 4px) var(--space-md, 12px);
    background: var(--color-gold, #CC9900);
    color: #031B83; /* S47: D055 — gold bg = blue text */
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.event-card-rsvp:hover {
    background: var(--color-gold-dark, #80641D);
    color: #031B83; /* S47: D055 */
}

/* 2.2 Filter bar */
.events-filter-bar {
    display: flex;
    gap: var(--space-sm, 8px);
    overflow-x: auto;
    padding-bottom: var(--space-md, 12px);
    margin-bottom: var(--space-xl, 24px);
    -webkit-overflow-scrolling: touch;
}

.events-filter-bar::-webkit-scrollbar {
    display: none;
}

.events-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs, 4px) var(--space-md, 12px);
    border-radius: 9999px;
    border: 1px solid var(--color-border, #E5E7EB);
    background: var(--color-surface, #FFFFFF);
    color: var(--color-text, #1A1A2E);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.events-filter-pill:hover {
    border-color: var(--color-gold, #CC9900);
    color: var(--color-gold, #CC9900);
}

.events-filter-pill.active {
    background: var(--color-gold, #CC9900);
    border-color: var(--color-gold, #CC9900);
    color: #031B83; /* S47: D055 — gold bg = blue text */
}

/* 2.3 Empty state */
.events-empty-state {
    text-align: center;
    padding: var(--space-3xl, 48px) var(--space-xl, 24px);
    color: var(--color-text-muted, #6B7280);
}

.events-empty-state .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    opacity: 0.3;
    margin-bottom: var(--space-md, 12px);
}

.events-empty-state p {
    font-size: 16px;
    margin: 0;
}

/* 2.10 Search/filter row — centre the Search button + Reset link */
.events-filter-row-secondary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px;
    margin-top: 12px;
}
.events-filter-button {
    background: #fffbe6 !important;
    color: #031B83 !important;
    border: 2px solid #CC9900 !important;
    border-radius: 8px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
.events-filter-button:hover {
    background: #CC9900 !important;
    color: #031B83 !important;
    border-color: #031B83 !important;
}

/* 2.11 Kill Seeko theme-static.min.css margin-bottom: 1rem on form inputs
   inside event/organiser/venue filter rows. Needs type-attribute selector
   to match Seeko's specificity: input[type=text] { margin-bottom: 1rem } */
.events-filter-row input[type=text],
.events-filter-row select,
.events-filter-row button { margin-bottom: 0 !important; }
/* end of 2 */

/* ============================================================================
   3. SECTION: Members Directory
   ============================================================================ */

/* 3.1 Member card grid */
.members-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-xl, 24px);
}

/* 3.1.1 Member card */
.member-card {
    background: var(--color-surface, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(26, 26, 46, 0.08));
    padding: var(--space-xl, 24px);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.member-card:hover {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(26, 26, 46, 0.12));
    transform: translateY(-2px);
}

/* 3.1.2 View profile overlay */
.member-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 27, 131, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: var(--radius-lg, 12px);
}

.member-card:hover .member-card-overlay {
    opacity: 1;
}

.member-card-overlay a {
    color: #CC9900; /* S47: D055 — blue bg = gold text */
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    padding: var(--space-sm, 8px) var(--space-xl, 24px);
    border: 2px solid #CC9900; /* S47: D055 — gold border on blue bg */
    border-radius: var(--radius-md, 8px);
    transition: background var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.member-card-overlay a:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* 3.1.3 Avatar */
.member-card-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--space-md, 12px);
    border: 3px solid var(--color-surface-raised, #F9F8F5);
}

/* 3.1.3.1 T179: Gold circle for default gravatar avatars */
.member-card-avatar[src*="gravatar"],
img.avatar[src*="gravatar"] {
    background: var(--color-navy, #031B83) !important;
    border-color: var(--color-gold, #CC9900) !important;
}

/* 3.1.4 Name + badges */
.member-card-name {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-navy, #031B83);
    margin: 0 0 var(--space-xs, 4px) 0;
}

.member-card-personality {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--color-navy, #031B83);
    color: var(--color-gold, #CC9900);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: var(--space-md, 12px);
}

/* 3.1.5 Interest tags */
.member-card-interests {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 4px);
    justify-content: center;
}

.member-card-interest-tag {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--color-surface-raised, #F9F8F5);
    color: var(--color-text-muted, #6B7280);
    font-size: 12px;
}

/* 3.1.6 Compatibility score */
.member-card-compat {
    margin-top: var(--space-md, 12px);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gold, #CC9900);
}

/* 3.2 Search/filter bar */
.members-filter-bar {
    display: flex;
    gap: var(--space-sm, 8px);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl, 24px);
    align-items: center;
}

.members-search-input {
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 12px);
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: 14px;
    transition: border-color var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.members-search-input:focus {
    outline: none;
    border-color: var(--color-gold, #CC9900);
    box-shadow: 0 0 0 2px rgba(204, 153, 0, 0.15);
}

.members-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs, 4px) var(--space-md, 12px);
    border-radius: 9999px;
    border: 1px solid var(--color-border, #E5E7EB);
    background: var(--color-surface, #FFFFFF);
    color: var(--color-text, #1A1A2E);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.members-filter-pill:hover {
    border-color: var(--color-gold, #CC9900);
}

.members-filter-pill.active {
    background: var(--color-gold, #CC9900);
    border-color: var(--color-gold, #CC9900);
    color: #031B83; /* S47: D055 — gold bg = blue text */
}

/* 3.3 Load more */
.members-load-more {
    text-align: center;
    margin-top: var(--space-xl, 24px);
}

.members-load-more button {
    background: transparent;
    border: 2px solid var(--color-gold, #CC9900);
    color: var(--color-gold, #CC9900);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-sm, 8px) var(--space-2xl, 32px);
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--motion-fast, 150ms) var(--motion-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.members-load-more button:hover {
    background: var(--color-gold, #CC9900);
    color: #031B83; /* S47: D055 — gold bg = blue text */
}

/* 3.4 BP members directory override — redesigned member cards */
#buddypress #members-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
}

/* S59 2026-04-15: BuddyPress core's livestamp.min.js strips the "Active " prefix
   when it rewrites the timestamp to moment.js format, leaving bare "a week ago"
   on each card. Rob wants "Active" back on every card, always. CSS ::before is
   the cleanest fix — no JS race, no flash, no hook on livestamp. */
#buddypress #members-list .item-meta .activity::before {
    content: 'Active ';
}

#buddypress #members-list li {
    /* S59 2026-04-15: background card grey so the white foreground card reads distinctly against it (Rob 2026-04-15). !important because Seeko parent theme sets white on li with higher cascade priority. E5E7EB chosen over F3F4F6 so the grey is clearly visible against the white inner card, not a subtle tint. */
    background: #E5E7EB !important;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    padding: 28px 20px 22px;
    text-align: center;
    transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
    /* Override Seeko/Bootstrap col constraints — grid handles sizing */
    max-width: 100% !important;
    flex: none !important;
    width: 100% !important;
    /* S58 2026-04-14 rev2: outer (background) card permanently navy, inner permanently gold — no hover swap (Rob: "hover state as permanent state") */
    border: 2px solid #031B83 !important;
    position: relative;
    overflow: visible;
}

#buddypress #members-list li:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.21) !important;
}

/* Kill Seeko base animations — leave hover states free for our custom transforms */
#buddypress #members-list li,
#buddypress #members-list li * {
    animation: none !important;
}

/* S58 2026-04-14: background card hover = 50% of foreground growth (scale + translate). Higher specificity than the Seeko kill rule so the transform actually applies.
   S58 2026-04-15 rev2: Added body.page-id-926 so the rear-card hover fires on the About Us gallery too — matches foreground animation on both pages. */
body.directory.members #buddypress #members-list li:hover,
body.page-id-926 #buddypress #members-list li:hover {
    transform: translateY(-5px) scale(1.025) !important;
}

/* Gentle name colour shift on hover — the only hover feedback */
#buddypress #members-list li:hover .item-title a {
    color: #CC9900 !important;
}

/* 3.4.1 Force vertical card layout — override Seeko's flex-row. S58 2026-04-14 rev2: inner foreground card permanently gold (outer li card = navy). No hover swap per Rob. */
#buddypress #members-list .item-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding-top: 16px !important;
    background: #FFFFFF !important;
    border: 2px solid #CC9900 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding-bottom: 16px !important;
    margin: 0 !important;
    width: 100% !important;
}
#buddypress #members-list li:hover .item-container {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.42) !important;
    /* S58 2026-04-15: vertical translateY removed from foreground card per
       Rob — only scale on hover, no vertical lift. */
    transform: scale(1.05) !important;
}

/* S58 2026-04-14: Lock inner content — Seeko parent applies its own transform on .item-card causing it to animate vertically over the sigil on hover. Kill all nested transforms so only the parent .item-container animation applies. */
#buddypress #members-list li .item,
#buddypress #members-list li .item-card,
#buddypress #members-list li .item-title,
#buddypress #members-list li .item-meta,
#buddypress #members-list li .member-card-badges,
#buddypress #members-list li:hover .item,
#buddypress #members-list li:hover .item-card,
#buddypress #members-list li:hover .item-title,
#buddypress #members-list li:hover .item-meta,
#buddypress #members-list li:hover .member-card-badges {
    transform: none !important;
    animation: none !important;
    transition: color 150ms ease !important;
}

/* 3.4.2 Avatar area — centred with gold ring */
#buddypress #members-list .item-avatar {
    width: 110px !important;
    height: 110px !important;
    margin: 0 auto 0 !important;
    flex-shrink: 0;
    position: relative;
}

#buddypress #members-list .item-avatar a {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #CC9900 0%, #E6B800 50%, #CC9900 100%);
    box-shadow: 0 3px 12px rgba(204, 153, 0, 0.25);
    transition: box-shadow 250ms ease, transform 250ms ease;
    overflow: hidden !important;
}

/* Subtle gold glow on avatar hover — no movement */
#buddypress #members-list li:hover .item-avatar a {
    box-shadow: 0 3px 14px rgba(204, 153, 0, 0.3) !important;
}

/* Override Seeko's aspect-ratio figure */
#buddypress #members-list .item-avatar figure,
#buddypress #members-list .item-avatar figure.img-dynamic,
#buddypress #members-list .item-avatar figure.aspect-ratio {
    width: 104px !important;
    height: 104px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    position: relative !important;
    /* Kill Seeko's aspect-ratio padding hack */
    padding-bottom: 0 !important;
    /* Prevent gold gradient bleed-through from parent link */
    background: #FFFFFF !important;
}

#buddypress #members-list .item-avatar figure::before,
#buddypress #members-list .item-avatar figure::after {
    display: none !important;
}

#buddypress #members-list .item-avatar img {
    width: 104px !important;
    height: 104px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Default avatar (no custom sigil) — navy background for premium feel */
#buddypress #members-list .item-avatar img[src*="mystery-man"],
#buddypress #members-list .item-avatar img[src*="bp-default"],
#buddypress #members-list .item-avatar img[src*="mystery"],
#buddypress #members-list .item-avatar img[src*="gravatar.com"] {
    background: linear-gradient(145deg, #041D88 0%, #0A2A9E 100%);
}

/* 3.4.3 Online status dot */
#buddypress #members-list li.is-online .item-avatar::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #22C55E;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.4);
}

/* 3.4.4 Card text area — full width, centred */
/* S59 2026-04-15: force pure white bg. The lower portion of the foreground card
   (name + badges + attendance pill) is rendered by this element as an opaque
   child on top of .item-container. Seeko parent theme ships a cream bg on
   .item-card which was bleeding through and making the whole foreground look
   cream — proven by setting it magenta in Chrome MCP and watching the whole
   lower area turn magenta. Visually verified before landing this rule. */
#buddypress #members-list .item-card {
    width: 100% !important;
    text-align: center;
    padding-top: 10px !important;
    background: #FFFFFF !important;
}

#buddypress #members-list .item {
    width: 100%;
}

#buddypress #members-list .item-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #031B83;
    margin: 0 0 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#buddypress #members-list .item-title a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}

#buddypress #members-list li:hover .item-title a {
    color: #CC9900;
}

/* Hide status update and nickname text appended after display name */
#buddypress #members-list .item-title span.user-nicename,
#buddypress #members-list .item-title .nickname-text,
#buddypress #members-list .item-title span.update {
    display: none !important;
}

#buddypress #members-list .item-meta {
    font-size: 12px;
    color: #9CA3AF;
    margin: 0;
    letter-spacing: 0.01em;
}

/* 3.4.5 Action area — hidden on members directory (messaging requires mutual interest) */
#buddypress #members-list .action {
    display: none !important;
}

/* 3.4.6 Member card badges — membership level + pinned preference symbols */
#buddypress #members-list .member-card-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(3, 27, 131, 0.06);
}

#buddypress #members-list .member-card-symbols {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

#buddypress #members-list .member-symbol-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(3, 27, 131, 0.04);
    font-size: 16px;
    line-height: 1;
}

#buddypress #members-list .member-card-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9CA3AF;
    padding: 3px 12px;
    border-radius: 9999px;
    background: rgba(3, 27, 131, 0.03);
    text-align: center;
    line-height: 1.4;
}

/* Colour-code by membership tier */
#buddypress #members-list .member-card-level.level-free {
    color: #6B7280;
    background: rgba(107, 114, 128, 0.08);
}
#buddypress #members-list .member-card-level.level-standard {
    color: #031B83;
    background: rgba(3, 27, 131, 0.06);
}
#buddypress #members-list .member-card-level.level-premium {
    color: #CC9900;
    background: rgba(204, 153, 0, 0.08);
}
#buddypress #members-list .member-card-level.level-organiser {
    color: #28a745;
    background: rgba(40, 167, 69, 0.08);
}
#buddypress #members-list .member-card-level.level-venue {
    color: #6f42c1;
    background: rgba(111, 66, 193, 0.08);
}

/* ============================================================================
   4. SECTION: Mobile Responsive — 360px floor (Nothing Phone 3a)
   ============================================================================ */

/* 4.1 Tablet breakpoint */
@media (max-width: 768px) {
    /* Event cards — single column on mobile */
    .events-card-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .event-card-hero {
        height: 160px;
    }

    .event-card-title {
        font-size: 16px;
    }

    .event-card-body {
        padding: 12px;
    }

    /* Events filter bar — horizontal scroll, no wrap overflow */
    .events-filter-bar {
        gap: 6px;
        padding-bottom: 8px;
        margin-bottom: 16px;
    }

    .events-filter-pill {
        font-size: 13px;
        padding: 4px 10px;
    }

    /* Members directory — single column */
    .members-card-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* BP members directory — single column */
    #buddypress #members-list {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    #buddypress #members-list li {
        padding: 20px 16px 18px;
    }

    /* Members filter bar — stack on mobile */
    .members-filter-bar {
        flex-direction: column;
        gap: 8px;
    }

    .members-search-input {
        min-width: 100%;
    }

    /* Member card avatar — slightly smaller on mobile */
    #buddypress #members-list .item-avatar {
        width: 90px !important;
        height: 90px !important;
        margin-bottom: 12px !important;
    }

    #buddypress #members-list .item-avatar a {
        width: 90px;
        height: 90px;
    }

    #buddypress #members-list .item-avatar figure,
    #buddypress #members-list .item-avatar figure.img-dynamic,
    #buddypress #members-list .item-avatar figure.aspect-ratio {
        width: 84px !important;
        height: 84px !important;
    }

    #buddypress #members-list .item-avatar img {
        width: 84px !important;
        height: 84px !important;
    }
}

/* 4.2 Extra small — 360px floor */
@media (max-width: 480px) {
    /* Reduce excessive container padding — 51px each side at 360px is too much */
    .events-page-wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Featured events — stack vertically instead of horizontal scroll */
    .events-featured-scroll {
        flex-direction: column !important;
        gap: 12px !important;
        overflow-x: visible !important;
    }

    .events-featured-scroll .event-card {
        min-width: 0 !important;
        flex-shrink: 1 !important;
        width: 100% !important;
    }

    /* Date badge — inline flow on small screens instead of absolute overlay */
    .event-card-date {
        position: static !important;
        display: block;
        text-align: center;
        margin-bottom: 8px;
        box-shadow: none; /* intentional: flatten date-badge shadow when position changes from absolute overlay to inline block at ≤480px (Phase 2a S65) */
    }

    /* Center section headings */
    .events-section-title {
        text-align: center;
    }

    /* Center submit button */
    .event-submit-link {
        display: block;
        margin: 0 auto 20px;
        text-align: center;
        width: fit-content;
    }

    /* Tighter padding on cards */
    .event-card-body {
        padding: 10px;
    }

    .event-card-title {
        font-size: 15px;
    }

    .event-card-rsvp {
        font-size: 12px;
        padding: 3px 10px;
    }

    #buddypress #members-list li {
        padding: 16px 12px 14px;
    }

    .member-card {
        padding: 20px 16px;
    }

    /* Prevent horizontal overflow globally */
    .events-card-grid,
    .members-card-grid,
    #buddypress #members-list {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Global page content — reduce padding for all shortcode pages */
    .entry-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* end of 3 + 4 */

/* 5. SECTION: About Us page — members grid (BUG-08).
   <!-- AMENDMENT v2.5 (2026-04-11): The Seeko members-grid Elementor widget
        wraps the BP loop in a display:flex container that gives 5-per-row at
        the About Us breakpoint, producing an awkward 5+3 layout with 8 cards.
        For the 8-card About Us grid we want a clean 4×2 layout. We honour
        Rob's "match /members/" intent by leaving the CARD interior styling
        completely untouched (avatar, name, badges, hover all inherit) and
        only nudging the row count. No padding, no max-width gymnastics, no
        margin tricks — just the flex-basis. -->
*/
/* T233: 4 cards stacked vertically — single column, centered */
body.page-id-926 .elementor-widget-members-grid #members-list-grid {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
}
body.page-id-926 .elementor-widget-members-grid #members-list-grid > li {
    flex: 0 0 auto !important;
    max-width: 360px !important;
    width: 100% !important;
}
@media (max-width: 480px) {
    body.page-id-926 .elementor-widget-members-grid #members-list-grid > li {
        max-width: 100% !important;
    }
}
/* end of 5 */

/* 6. SECTION: Pricing page polish */

/* 6.1 TASK-NEW-11 (5b.1) — Pricing h1 brand colour
   The Pricing page heading widget has no color set in Elementor, so the
   .elementor-heading-title inherits from the theme default (#000/#111),
   rendering black instead of brand blue. Force brand blue #031B83 on
   page-id-439 headings so the title matches D055. */
body.page-id-439 .elementor-widget-heading .elementor-heading-title,
body.page-id-439 .elementor-element-b3512e4 .elementor-heading-title {
    color: #031B83 !important;
}
/* end of 6.1 */

/* end of 6 */

/* ============================================================================
   7. SECTION: Venues & Organisers Directory pages
   ============================================================================ */

/* 7.1 Center directory header (heading + apply button) */
.directory-header {
    text-align: center;
}
.directory-header .directory-apply-button {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
/* 7.2 Reorder: button above heading, heading directly above search */
.directory-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.directory-header h2 {
    order: 2 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #031B83 !important;
}
.directory-header .directory-apply-button {
    order: 1 !important;
    margin-bottom: 12px !important;
}

/* 7.3 Single venue page — centre title block + indicators */
.venue-title-block {
    text-align: center !important;
}
.venue-title-block .venue-title {
    justify-content: center !important;
}
.venue-title-block .venue-hero-meta {
    justify-content: center !important;
}
.venue-title-block .venue-badge {
    display: inline-block !important;
}

/* 7.4 T221: Venue card content + addresses centered */
.events-grid .event-card .event-card-body {
    text-align: center !important;
}
.events-grid .event-card .event-card-footer {
    justify-content: center !important;
}

/* end of 7 */

/* ============================================================================
   8. SECTION: Members directory mobile centering fix
   ============================================================================ */

/* 8.1 Remove Bootstrap negative margins that offset the grid left on mobile */
@media (max-width: 480px) {
    #buddypress #members-list {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    /* Reduce excessive container padding on members page */
    body.page-id-13 .content-wrapper.container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}
/* end of 8 */

/* ============================================================================
   9. SECTION: Pricing page — reassurance card centering
   ============================================================================ */

/* 9.1 Center the "Before you think twice" text */
.pricing-reassurance-card {
    text-align: center;
}
/* end of 9 */

/* ============================================================================
   10. SECTION: About Us page — heading colour fix
   ============================================================================ */

/* 10.1 "Where Culture Meets Connection" heading should be brand blue */
body.page-id-926 .elementor-element-8972833 .elementor-heading-title {
    color: #031B83 !important;
}
/* end of 10 */

/* ============================================================================
   11. SECTION: Contact Us page fixes
   ============================================================================ */

/* 11.1 "Email Form" heading — brand blue */
body.page-id-3727 .elementor-element-83d05f1 .elementor-heading-title {
    color: #031B83 !important;
}

/* 11.2 Reduce dead space in form box */
body.page-id-3727 .elementor-element-ffe5566 {
    padding: 16px 16px 20px !important;
}

/* 11.3 T285: Reduce spacing in contacts box (links / QR) — tighter */
body.page-id-3727 .elementor-element-b913745 {
    padding: 8px 16px !important;
    gap: 8px !important;
}
/* 11.3.1 T285: Links closer to heading — reduce top margin */
body.page-id-3727 .elementor-element-b913745 .elementor-widget-text-editor {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 11.4 T285: Reduce gap between contacts box and woman image */
body.page-id-3727 .elementor-element-e156348 {
    gap: 4px !important;
    margin-bottom: 0 !important;
}

/* 11.5 T285: Reduce massive gap between image and form */
body.page-id-3727 .elementor-section .elementor-container > .elementor-column {
    margin-bottom: 8px !important;
}

/* 11.6 T285: Woman image centering */
body.page-id-3727 .elementor-element-e156348 img {
    display: block !important;
    margin: 0 auto !important;
}
/* end of 11 */

/* ============================================================================
   12. SECTION: Blog cards mobile polish
   ============================================================================ */

/* 12.1 Blog card — force title visible (Seeko entire-post-card hides it) */
article.post-card .entry-header {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
}
article.post-card .entry-header .entry-title {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #031B83 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 8px 0 !important;
    padding: 0 16px !important;
}
article.post-card .entry-header .entry-title a {
    color: inherit !important;
    text-decoration: none !important;
}

/* 12.2 Collapse empty image area when no featured image */
article.post-card a.img-card-hover:empty {
    display: none !important;
}

/* 12.2.1 Collapse Seeko pseudo-element height spacers */
article.post-card .entry-wrapper::before,
article.post-card .entry-wrapper::after {
    height: 0 !important;
    display: none !important;
}

/* 12.2.2 Make entry-all flow normally instead of absolute overlay */
article.post-card .entry-all {
    position: relative !important;
    padding-bottom: 16px !important;
}

/* 12.2.3 Collapse entry-middle to content height */
article.post-card .entry-middle {
    height: auto !important;
    min-height: 0 !important;
}

/* 12.2.4 Entry content — show excerpt text */
article.post-card .entry-content {
    padding: 0 16px 12px !important;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

/* 12.2.5 Entry wrapper — auto height */
article.post-card .entry-wrapper {
    height: auto !important;
}

/* 12.3 Category badge — brand-consistent */
article.post-card .meta-category .btn-tag {
    background: #031B83;
    color: #CC9900;
    border-color: #031B83;
    font-weight: 600;
}

/* 12.4 Mobile — full-width blog cards */
@media (max-width: 480px) {
    article.post-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Reduce excessive wrapper padding */
    .col-xl-3.col-lg-4.col-md-6 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ============================================================================
   13. SECTION: Character badge spacing on member cards
   ============================================================================ */

/* 13.1 T231: Character badges panel inside foreground card.
   S59 2026-04-15: bg dropped from #f5f5f5 to transparent so the whole foreground
   card reads as pure white (Rob 2026-04-15: "foreground card is still not white"). */
#buddypress #members-list .member-card-badges {
    background: transparent !important;
    border: 1px solid #CC9900 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-top: 10px !important;
}

/* 13.2 T232: Badge pill spacing — increase gap for readability */
.member-card-character-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
}
.member-character-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid #031B83 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
.character-badge-emoji {
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}
.character-badge-label {
    color: #031B83 !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    /* S58-015: nudge label up 1px so visual text center (x-height midline)
       sits on the pill's geometric center line. Emoji glyph sits correctly
       at 0, so no emoji nudge needed. */
    position: relative !important;
    top: -1px !important;
}

/* 13.3 T291: Mobile badge pills uniform size */
@media (max-width: 480px) {
    .member-character-badge {
        padding: 3px 8px !important;
        font-size: 11px !important;
        min-width: 0 !important;
    }
    .character-badge-emoji {
        font-size: 12px !important;
    }
}

/* 13.4 Five member cards per row at widescreen (xl breakpoint and up).
        #members-list is a CSS grid with fixed-width tracks; override the
        grid-template-columns to widen each card from ~215px to ~262px.     */
@media (min-width: 1200px) {
    #buddypress #members-list,
    #buddypress div#members-dir-list ul#members-list {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* 13.5 Membership pill — canonical per-tier palette per BRAND_GUIDE.md §11 Membership
        Level Badges + S62 Rob sign-off of B23/B24/B25 (per-tier tint + matching text +
        no border) + D089 (Admin exception: solid green bg + navy text + navy border).
        Rewrite S63 Phase 1c — replaces the S58-015/S58-016 gold-family legacy palette
        that preceded the canonical sign-off.
        Targets the pill regardless of whether JS has floated it above the timestamp
        via .member-card-level-floated. */
#buddypress #members-list .member-card-level.level-free {
    background: rgba(107, 114, 128, 0.08) !important;
    border: 0 none !important;
    color: #6B7280 !important;
}
#buddypress #members-list .member-card-level.level-standard {
    background: rgba(3, 27, 131, 0.06) !important;
    border: 0 none !important;
    color: #031B83 !important;
}
#buddypress #members-list .member-card-level.level-premium {
    background: rgba(204, 153, 0, 0.08) !important;
    border: 0 none !important;
    color: #CC9900 !important;
}
#buddypress #members-list .member-card-level.level-organiser {
    background: rgba(40, 167, 69, 0.08) !important;
    border: 0 none !important;
    color: #28a745 !important;
}
#buddypress #members-list .member-card-level.level-venue {
    background: rgba(111, 66, 193, 0.08) !important;
    border: 0 none !important;
    color: #6f42c1 !important;
}
#buddypress #members-list .member-card-level.level-admin {
    background: rgb(74, 222, 128) !important;
    border: 1px solid #031B83 !important;
    color: #031B83 !important;
}
/* Fallback for pills with no .level-* class (older rendering paths). */
#buddypress #members-list .member-card-level:not([class*="level-"]) {
    background: rgba(3, 27, 131, 0.06) !important;
    border: 0 none !important;
    color: #031B83 !important;
}

/* 13.6 S58-017: Back to Members button — shown on no-results search pages.
        Injected by members_back_button_no_results() in functions.php §6.4. */
.members-back-to-list {
    text-align: center;
    margin: 24px 0;
}
.members-back-to-list .members-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid #CC9900;
    color: #031B83 !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}
.members-back-to-list .members-back-button:hover {
    background: rgba(204, 153, 0, 0.1);
    color: #031B83 !important;
    text-decoration: none;
}
/* end of 13 */

/* ============================================================================
   14. SECTION: Account page styling fixes
   ============================================================================ */

/* 14.1 Account subscription badge — D055: blue bg → gold text */
.account-badge {
    color: #CC9900 !important;
    font-weight: 700 !important;
}

/* 14.2 Account status — "Active" should be green */
.account-status {
    color: #28a745 !important;
    font-weight: 600 !important;
}

/* 14.3 T236: Account details boxes — alignment, symmetry, email wrapping */
.account-tab-wrap {
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}
.account-subscription-box,
.account-details-box {
    border-radius: 14px !important;
    padding: 28px 32px !important;
    border: 2px solid #CC9900 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(3, 27, 131, 0.06) !important;
    margin-bottom: 24px !important;
}
.account-details-table {
    width: 100% !important;
    table-layout: auto !important;
}
.account-details-table td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}
.account-details-label {
    white-space: nowrap !important;
    width: 110px !important;
    text-align: left !important;
    color: #666 !important;
    font-size: 0.9rem !important;
}
.account-details-value {
    text-align: left !important;
    word-break: break-all !important;
}

/* 14.4 Mobile account page */
@media (max-width: 480px) {
    .account-tab-wrap {
        max-width: 100% !important;
        padding: 0 8px !important;
    }
    .account-details-table td {
        display: block !important;
        width: 100% !important;
        padding: 4px 8px !important;
    }
    .account-details-label {
        font-weight: 600 !important; /* intentional: bolder label (600) when .account-details-table stacks to single column on mobile; base is theme-inherited 400 (Phase 2a S65) */
        /* color removed: duplicated base #666 at L1423 — Phase 2a S65 cascade cleanup */
        padding-bottom: 0 !important;
    }
}
/* end of 14 */

/* ============================================================================
   15. SECTION: Settings page centering + tab overflow fix
   ============================================================================ */

/* 15.1 T239: Settings sub-nav — scrollable, no overflow/truncation, no clipping */
#buddypress .item-list-tabs#subnav {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px !important;
}
#buddypress .item-list-tabs#subnav ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 4px !important;
    justify-content: center !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    list-style: none !important;
}
#buddypress .item-list-tabs#subnav ul li {
    flex-shrink: 0 !important;
    overflow: visible !important;
}
#buddypress .item-list-tabs#subnav ul li a {
    padding: 6px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* 15.2 T238: Settings page content centering + input text centering */
#buddypress #item-body .standard-form {
    max-width: 700px !important;
    margin: 0 auto !important;
}
#buddypress #item-body .standard-form label {
    text-align: center !important;
    display: block !important;
}
#buddypress #item-body .standard-form input[type="text"],
#buddypress #item-body .standard-form input[type="email"],
#buddypress #item-body .standard-form input[type="password"],
#buddypress #item-body .standard-form textarea,
#buddypress #item-body .standard-form select {
    text-align: center !important;
    max-width: 500px !important;
    margin: 4px auto 16px !important;
    display: block !important;
}

/* 15.3 Email notification page — fix vertical Yes/No header alignment */
#buddypress .notification-settings {
    table-layout: fixed !important;
    width: 100% !important;
}
#buddypress .notification-settings th {
    text-align: center !important;
    vertical-align: bottom !important;
    padding: 8px !important;
}
#buddypress .notification-settings th.title,
#buddypress .notification-settings td.title {
    text-align: left !important;
    width: auto !important;
}
#buddypress .notification-settings th.yes,
#buddypress .notification-settings th.no,
#buddypress .notification-settings td.yes,
#buddypress .notification-settings td.no {
    width: 40px !important;
    min-width: 40px !important;
    white-space: nowrap !important;
}
#buddypress .notification-settings th.icon,
#buddypress .notification-settings td.icon {
    width: 0 !important;
    padding: 0 !important;
    display: none !important;
}
#buddypress .notification-settings td {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 8px 4px !important;
}
#buddypress .notification-settings td:first-child {
    text-align: left !important;
}

/* 15.3.1 T241: Profile Visibility tab — centering and formatting */
#buddypress .profile-settings {
    max-width: 500px !important;
    margin: 0 auto !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}
#buddypress .profile-settings th,
#buddypress .profile-settings td {
    text-align: center !important;
    padding: 8px 12px !important;
    font-family: 'Montserrat', sans-serif !important;
}
#buddypress .profile-settings th {
    color: #031B83 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-bottom: 2px solid #CC9900 !important;
}
#buddypress .profile-settings td.field-name {
    color: #031B83 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-align: left !important;
}
#buddypress .profile-settings select {
    border: 2px solid #CC9900 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    color: #031B83 !important;
    font-weight: 600 !important;
    background: #fff !important;
    text-align: center !important;
}
#buddypress .profile-settings .submit {
    text-align: center !important;
}

/* 15.3.2 T242: Export Data tab — remove bullets, clean layout */
#buddypress .data-settings-form ul,
#buddypress form[action*="data"] ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 16px auto !important;
    max-width: 400px !important;
    text-align: center !important;
}
#buddypress .data-settings-form ul li,
#buddypress form[action*="data"] ul li {
    padding: 4px 0 !important;
    color: #031B83 !important;
    font-size: 14px !important;
    font-family: 'Montserrat', sans-serif !important;
}
#buddypress .data-settings-form h2,
#buddypress form[action*="data"] h2 {
    text-align: center !important;
    color: #031B83 !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* 15.4 Mobile settings */
@media (max-width: 480px) {
    #buddypress .item-list-tabs#subnav ul li a {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }
    #buddypress #item-body .standard-form {
        padding: 0 8px !important;
    }
}
/* end of 15 */

/* ============================================================================
   16. SECTION: Dashboard workspace content — universal centering
   All BP tab content inside the workspace must be centered and properly spaced.
   Covers: Reputation, Attendance, Wish List, Invites, Interests, Gallery, Suggestions
   ============================================================================ */

/* 16.1 Universal workspace content centering */
body.profile-dashboard-active #item-body .col-inner > *:not(.dashboard-sidenav):not(.profile-editor-wrapper):not(.profile-customise-cta) {
    text-align: center !important;
}

/* 16.1.1 Allow inner content blocks to left-align their text where appropriate */
body.profile-dashboard-active .invite-tab-main,
body.profile-dashboard-active .mi-card,
body.profile-dashboard-active .attendance-profile-section table,
body.profile-dashboard-active .attendance-profile-section .attendance-event,
body.profile-dashboard-active form,
body.profile-dashboard-active .standard-form {
    text-align: left !important;
}

/* 16.2 Center headings on all workspace tab pages */
body.profile-dashboard-active #item-body h2,
body.profile-dashboard-active #item-body h3 {
    text-align: center !important;
    color: #031B83 !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* 16.3 Center intro/description text */
body.profile-dashboard-active .mi-intro,
body.profile-dashboard-active .attendance-profile-section > p,
body.profile-dashboard-active .wishlist-intro {
    text-align: center !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 16.4 Center grids/card containers and flex containers within workspace */
body.profile-dashboard-active .mi-grid,
body.profile-dashboard-active .wishlist-grid {
    justify-content: center !important;
}

/* 16.4.1 Flex containers that need centering */
body.profile-dashboard-active .item-list-tabs ul,
body.profile-dashboard-active .wishlist-tab-content {
    justify-content: center !important;
}
/* Column flex containers need align-items for horizontal centering */
body.profile-dashboard-active .attendance-profile-section {
    align-items: center !important;
}

/* 16.4.2 Attendance stats boxes — center the row */
body.profile-dashboard-active .attendance-stats,
body.profile-dashboard-active .attendance-summary {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* 16.4.3 Buttons inside workspace — center */
body.profile-dashboard-active .attendance-toggle-btn,
body.profile-dashboard-active .wishlist-empty-cta,
body.profile-dashboard-active .browse-more-link {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* 16.5 Gallery title + count centering */
body.profile-dashboard-active #rtmedia-gallery-container h2,
body.profile-dashboard-active .rtmedia-container h2,
body.profile-dashboard-active .gallery-title {
    text-align: center !important;
}
body.profile-dashboard-active .rtmedia-item-count,
body.profile-dashboard-active .gallery-count {
    text-align: center !important;
    display: block !important;
}
/* end of 16 */
/* end of 12 */

/* ============================================================================
   17. SECTION: Preferences page fixes (T282, T308, T310, T322, T323)
   ============================================================================ */

/* 17.1 T282: Preferences page — all text centered */
body.profile-dashboard-active .cta-text,
body.profile-dashboard-active .questionnaire-complete-panel,
body.profile-dashboard-active .character-badge-picker-wrap {
    text-align: center !important;
}
body.profile-dashboard-active .character-badge-picker-wrap h3,
body.profile-dashboard-active .character-badge-picker-wrap p,
body.profile-dashboard-active .questionnaire-complete-panel h2,
body.profile-dashboard-active .questionnaire-complete-panel p {
    text-align: center !important;
}

/* 17.2 T308: Preferences workspace top-aligned with sidenav top */
body.profile-dashboard-active #buddypress #item-body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 17.3 T310: Character badges grid symmetry — center pills within container */
#character-badge-grid {
    justify-content: center !important;
}

/* 17.4 T322: CTA aligned tightly below banner, questions tight beneath.
   Progress bar must fill its grey wrap completely — no grey strip at top. */
body.profile-dashboard-active .cta-text {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}
body.profile-dashboard-active .questionnaire-progress .questionnaire-progress-bar,
body .questionnaire-progress .questionnaire-progress-bar {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100% !important;
}
/* 17.4.1 Hide BuddyPress default primary+sub nav on profile pages
   (the custom dashboard sidenav replaces them; leaving the defaults in
   the grid pushes the workspace content down below sidenav top).
   T401 S59 2026-04-15: Messages and Notifications pages REQUIRE the BP subnav so
   users can switch between Inbox / Starred / Sent / Compose etc. — those pages
   are excluded from the hide rule via :not() and restyled below. */
body.bp-user:not(.messages):not(.notifications) #subnav.item-list-tabs,
body.bp-user:not(.messages):not(.notifications) #object-nav.item-list-tabs,
body:not(.messages):not(.notifications) .col-inner > #subnav.item-list-tabs,
body:not(.messages):not(.notifications) .col-inner > #object-nav.item-list-tabs {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 17.4.1b T401 S59 2026-04-15: Messages + Notifications BP subnav restyle.
   Brand-aligned horizontal pill bar: cream cards with gold border, navy text,
   active state inverts to gold-on-navy. Replaces BP legacy grey tabs. */
body.messages #buddypress #subnav.item-list-tabs,
body.notifications #buddypress #subnav.item-list-tabs {
    display: block !important;
    height: auto !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
body.messages #buddypress #subnav.item-list-tabs ul,
body.notifications #buddypress #subnav.item-list-tabs ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
body.messages #buddypress #subnav.item-list-tabs li,
body.notifications #buddypress #subnav.item-list-tabs li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    list-style: none !important;
}
body.messages #buddypress #subnav.item-list-tabs li a,
body.notifications #buddypress #subnav.item-list-tabs li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    background: #fffbe6 !important;
    border: 2px solid #CC9900 !important;
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
    transition: all 0.18s ease !important;
}
body.messages #buddypress #subnav.item-list-tabs li a:hover,
body.notifications #buddypress #subnav.item-list-tabs li a:hover {
    background: #CC9900 !important;
    border-color: #031B83 !important;
    color: #031B83 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;
}
body.messages #buddypress #subnav.item-list-tabs li.current a,
body.messages #buddypress #subnav.item-list-tabs li.selected a,
body.notifications #buddypress #subnav.item-list-tabs li.current a,
body.notifications #buddypress #subnav.item-list-tabs li.selected a {
    background: #031B83 !important;
    border-color: #031B83 !important;
    color: #CC9900 !important;
}
body.messages #buddypress #subnav.item-list-tabs li a span,
body.notifications #buddypress #subnav.item-list-tabs li a span {
    display: inline-block !important;
    margin-left: 6px !important;
    padding: 1px 7px !important;
    background: #CC9900 !important;
    color: #031B83 !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
body.messages #buddypress #subnav.item-list-tabs li.current a span,
body.notifications #buddypress #subnav.item-list-tabs li.current a span {
    background: #CC9900 !important;
    color: #031B83 !important;
}
/* 17.4.2 Let .cta-banner position absolute inside .col-inner so it doesn't
   consume a grid row and push questionnaire content down. */
body.bp-user .col-inner { position: relative !important; }
body.bp-user .questionnaire-wrapper { padding-top: 0 !important; margin-top: 0 !important; }

/* 17.4.5 Preferences summary — stronger, prettier container borders.
   The inline-styled cards in questionnaire-system.php use #e8e8e8 1px which
   is barely visible against the light page bg. Bump to brand-accent borders
   with subtle shadow so each container reads as its own panel. */
.character-badge-picker-wrap,
.questionnaire-complete-panel {
    padding: 20px 24px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(3, 27, 131, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(3, 27, 131, 0.06), 0 1px 2px rgba(3, 27, 131, 0.04) !important;
}
.character-badge-picker-wrap { margin-bottom: 20px !important; }
.questionnaire-complete-panel .q-summary-section-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(204, 153, 0, 0.35) !important;
    border-bottom-width: 2px !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(3, 27, 131, 0.05) !important;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.questionnaire-complete-panel .q-summary-section-card:hover {
    transform: translateY(-1px);
    border-color: #CC9900 !important;
    box-shadow: 0 4px 10px rgba(3, 27, 131, 0.08) !important;
}

/* 17.4.3 CTA banner click pass-through: the .cta-banner is absolute-positioned
   and its box can overlap interactive elements below (sliders, skip/next buttons).
   Disable pointer-events on the banner box itself, then re-enable pointer-events
   only on the text children so the back-to-summary link still works. */
.cta-banner {
    pointer-events: none !important;
}
.cta-banner .cta-text,
.cta-banner a,
.cta-banner .cta-back-link {
    pointer-events: auto !important;
}
/* 17.4.4 Back-to-summary link: looks like plain styled text, underlines on hover
   to make clickability obvious (not styled as a button). */
.cta-back-link {
    color: #CC9900 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: text-decoration-color 120ms ease, color 120ms ease;
}
.cta-back-link:hover,
.cta-back-link:focus {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    color: #b88500 !important;
}

/* 17.5 T323: Photo panel header — corner label + equal padding */
.photo-panel-handle {
    padding: 6px 10px !important;
    min-height: auto !important;
}
.photo-corner-label {
    position: absolute !important;
    top: 4px !important;
    left: 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.8) !important;
    pointer-events: none !important;
}
.photo-panel-handle {
    position: relative !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
/* end of 17 */

/* ============================================================================
   18. SECTION: Site-wide button brand override (T266, T270, T271, T272, T273, T295)
   ============================================================================ */

/* 18.1 T266: ALL generic BuddyPress buttons → white bg + gold border pill
   Targets: generic-button links, BP submit buttons, BP action buttons, message buttons.
   Excludes: interest-btn (has own styles in interest-system.php), header btns (style.css),
   hide-att-btn (inline in event-system.php, overridden below in 18.3). */
#buddypress .generic-button a,
#buddypress input[type="submit"],
#buddypress button[type="submit"],
#buddypress .button-nav a,
#buddypress .acomment-reply a,
#buddypress #message-threads .action a,
body.profile-dashboard-active .button,
body.profile-dashboard-active button.btn,
body.profile-dashboard-active input[type="submit"],
body.profile-dashboard-active .generic-button a {
    background: #fff !important;
    border: 2px solid #CC9900 !important;
    color: #031B83 !important;
    border-radius: 22px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
#buddypress .generic-button a:hover,
#buddypress input[type="submit"]:hover,
#buddypress button[type="submit"]:hover,
#buddypress .button-nav a:hover,
#buddypress .acomment-reply a:hover,
#buddypress #message-threads .action a:hover,
body.profile-dashboard-active .button:hover,
body.profile-dashboard-active button.btn:hover,
body.profile-dashboard-active input[type="submit"]:hover,
body.profile-dashboard-active .generic-button a:hover {
    background: #031B83 !important;
    color: #CC9900 !important;
    border-color: #031B83 !important;
}

/* 18.1.1 Preserve interest-btn specific styles — do NOT override */
#buddypress .generic-button a.interest-btn,
#buddypress .generic-button a.interest-btn-active,
#buddypress .generic-button a.interest-btn-matched,
.generic-button a.interest-btn,
.generic-button a.interest-btn-active,
.generic-button a.interest-btn-matched {
    font-size: 12px !important;
}

/* 18.2 T271: Send Suggestion button → white bg + gold border */
.suggestions-submit {
    background: #fff !important;
    border: 2px solid #CC9900 !important;
    color: #031B83 !important;
    border-radius: 22px !important;
    padding: 10px 28px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}
.suggestions-submit:hover {
    background: #031B83 !important;
    color: #CC9900 !important;
    border-color: #031B83 !important;
    transform: scale(1.03);
}

/* 18.3 T270: Attendance Hide button → white bg + gold border (override inline styles) */
.hide-att-btn {
    background: #fff !important;
    border: 2px solid #CC9900 !important;
    color: #031B83 !important;
}
.hide-att-btn:hover {
    background: #031B83 !important;
    color: #CC9900 !important;
    border-color: #031B83 !important;
}
.hide-att-btn[aria-pressed="true"] {
    background: #031B83 !important;
    color: #CC9900 !important;
    border-color: #031B83 !important;
}
.hide-att-btn[aria-pressed="true"]:hover {
    background: #fff !important;
    color: #031B83 !important;
    border-color: #CC9900 !important;
}

/* 18.4 S58 2026-04-14: Rogue .header-logout-btn block removed. Unified sizing
   for LOGOUT + DASHBOARD now lives in style.css so both buttons stay visually
   identical. Do not re-add a .header-logout-btn-only rule here. */

/* 18.6 T295: Attendance count badge on member cards */
#buddypress #members-list .member-attendance-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    background: #fff;
    border: 1px solid #CC9900;
    border-radius: 12px;
    padding: 4px 12px !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #031B83;
    line-height: 1 !important;
    margin-top: 10px !important;
}
#buddypress #members-list .member-attendance-badge .att-icon {
    font-size: 13px;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}
/* T295: Red flag for hidden attendance */
#buddypress #members-list .member-attendance-badge.att-hidden {
    border-color: #cc3333;
    color: #cc3333;
    background: #fff5f5;
}
/* end of 18 */

/* ============================================================================
   19. SECTION: Remaining visual fixes (T296, T334, T343)
   ============================================================================ */

/* 19.1 T296: Reputation page text centering */
body.profile-dashboard-active .widget-reputation,
body.profile-dashboard-active .reputation-badges,
body.profile-dashboard-active .reputation-empty {
    text-align: center !important;
}
body.profile-dashboard-active .reputation-badges .reputation-badge {
    text-align: center !important;
}

/* 19.2 T343: Teapot emoji fallback — use a universally-supported emoji */
.event-card .teapot-fallback {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
}
/* end of 19 */

/* ============================================================================
   20. SECTION: Top Bar Social Icons — True Centre
   S58 WS-walkthrough fix. Top bar is a 3-column Elementor flex with
   space-between, but the left and right widgets are different widths, so the
   middle social-icon column lands ~48px left of true centre. Anchor the
   widget absolutely to the full-width row so it sits on viewport centre.
   ============================================================================ */

/* 20.1 Make the full-width top row positioned so we can anchor the social widget */
.elementor-element-79b2e73 {
    position: relative !important;
}

/* 20.1.1 Push email widget in from left edge so gap matches DASHBOARD's right gap */
@media (min-width: 1025px) {
    .elementor-element-3e8df955 {
        padding-left: 40px !important;
    }
}

/* 20.2 Pull the social-icons widget out of flex flow and centre on the row */
.elementor-element-c38eb63 {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
}
/* end of 20 */

/* ============================================================================
   21. SECTION: Dashboard "What's Happening" heading
   Bump the feed heading to a proper title weight/size so it reads as a
   section header, not body text.
   ============================================================================ */

/* 21.1 What's Happening heading on dashboard feed */
.dashboard-feed-section h2,
.dashboard-feed-section .feed-heading,
.dashboard-whats-happening-heading {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 16px !important;
    line-height: 1.2 !important;
}
/* end of 21 */

/* ============================================================================
   22. SECTION: Sidenav badge (notification/message counts)
   The badge is a fixed-size gold circle containing a count. Pure geometric
   centring with line-height locked to box height and tabular-nums for
   consistent digit widths. Verified against 1/5/9/10/16/22/100 in DevTools.
   ============================================================================ */

/* 22.1 Badge — pure geometric centring + approved small-pill colours
   (light gold bg + darker gold bottom edge, dark blue numerals for readability). */
.sidenav-badge {
    padding: 0 !important;
    line-height: 20px !important;
    font-size: 11px !important;
    width: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
    background: #FFF0C2 !important; /* AMENDMENT S58 2026-04-14: reverted — Rob prefers darker cream for sidenav badges. NOTE: #FFF0C2 is NON-BRAND, tracked for future sweep. */
    color: #031B83 !important;
    border: 1px solid #CC9900 !important;
    border-bottom-width: 2px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
/* end of 22 */

/* ============================================================================
   23. SECTION: Dashboard feed row layout (Section B "From your list" rows)
   Grid layout: [date column] | [gold divider] | [thumb] | [title]
   Applied by profile_system_render_dashboard_feed() in mu-plugins/profile-system.php §9.4.1
   ============================================================================ */

/* 23.1 Feed rows container */
.dashboard-feed-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto;
}

/* 23.2 Individual feed row */
.dashboard-feed-row {
    display: grid !important;
    grid-template-columns: 110px 2px 40px 1fr;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    text-decoration: none !important;
    color: #333 !important;
    transition: background 0.15s, border-color 0.15s;
}
.dashboard-feed-row:hover {
    background: #fafafa;
    border-color: #CC9900;
}

/* 23.3 Date column */
.dashboard-feed-date {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #555;
    text-align: right;
    white-space: nowrap;
}

/* 23.4 Gold vertical divider */
.dashboard-feed-divider {
    width: 2px;
    height: 28px;
    background: #CC9900;
    border-radius: 1px;
    justify-self: center;
}

/* 23.5 Thumb */
.dashboard-feed-thumb {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
}
.dashboard-feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dashboard-feed-thumb-emoji {
    font-size: 22px;
    background: transparent;
}

/* 23.6 Title */
.dashboard-feed-title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    text-align: left;
    line-height: 1.3;
}

/* 23.7 Section A — Featured events — section header + randomise button */
.dashboard-section-a,
.dashboard-section-b {
    max-width: 700px;
    margin: 0 auto 32px;
    font-family: 'Nunito Sans', sans-serif;
    text-align: center;
}
.dashboard-section-heading {
    font-family: Montserrat, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #031B83;
    margin: 0 0 16px;
    line-height: 1.2;
    text-align: center;
}

/* 23.8 Section A randomise button */
.dashboard-randomise-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    margin: 16px auto 0;
    background: #fff;
    border: 2px solid #CC9900;
    border-radius: 24px;
    color: #CC9900;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dashboard-randomise-btn:hover {
    background: #CC9900;
    color: #fff;
}
.dashboard-randomise-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* 23.9 Section B week navigation (Previous Week / Next Week) */
.dashboard-week-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}
.dashboard-week-nav-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #031B83;
    padding: 0 8px;
    min-width: 180px;
    text-align: center;
}
.dashboard-week-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: #fff;
    border: 2px solid #CC9900;
    border-radius: 20px;
    color: #CC9900;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dashboard-week-nav-btn:hover {
    background: #CC9900;
    color: #fff;
}
.dashboard-week-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 23.10 Loading/fetching state for AJAX sections */
.dashboard-feed-loading {
    padding: 24px;
    color: #999;
    font-size: 13px;
    font-style: italic;
    text-align: center;
}

/* 23.11 Empty state */
.dashboard-feed-empty {
    padding: 20px;
    color: #888;
    font-size: 14px;
    text-align: center;
    font-style: italic;
}

/* 23.12 Mobile: stack the grid vertically */
@media (max-width: 600px) {
    .dashboard-feed-row {
        grid-template-columns: 1fr;
        gap: 6px;
        text-align: center;
    }
    .dashboard-feed-date {
        text-align: center;
    }
    .dashboard-feed-divider {
        display: none;
    }
    .dashboard-feed-thumb {
        justify-self: center;
    }
    .dashboard-feed-title {
        text-align: center;
    }
}
/* end of 23 */

/* ============================================================================
   24. SECTION: Standard button style — dashboard Randomise + Week Nav (Prev/Next)
   AMENDMENT S58 2026-04-14: adopt the profile-button standard (brand cream #fffbe6
   + gold border, fills gold with navy border on hover). "Same as the profile
   buttons" per Rob 2026-04-14. Applies to .dashboard-randomise-btn and
   .dashboard-week-nav-btn (Prev/Next).
   ============================================================================ */
.dashboard-randomise-btn,
.dashboard-week-nav-btn {
    background: #fffbe6 !important;
    color: #031B83 !important;
    border: 2px solid #CC9900 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.18s ease !important;
}
.dashboard-randomise-btn:hover,
.dashboard-week-nav-btn:hover {
    background: #CC9900 !important;
    color: #031B83 !important;
    border: 2px solid #031B83 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}
/* end of 24 */

/* ============================================================================
   25. SECTION: Members directory — on-brand the grey bits
   AMENDMENT S58 2026-04-14: pag-count, dir-search input, order-by label + select
   get navy text + gold border/hover per brand. No more greys.
   ============================================================================ */
/* 25.1 Pagination count ("Viewing 1 - 22 of 22 members") */
#buddypress .pag-count,
#buddypress #member-dir-count-top,
#buddypress #member-dir-count-bottom {
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 600 !important;
}
/* 25.1a Centre the bottom pagination count under the gallery (S59 2026-04-15). */
body.directory.members #buddypress #pag-bottom,
body.directory.members #buddypress #member-dir-count-bottom {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* 25.2 Search form row — input with embedded magnifier button on the right.
   <!-- AMENDMENT S59 2026-04-15 rev5: button moved from external flex item to
   absolute-positioned overlay inside the input's right edge. Input gets
   padding-right to reserve the icon area. form has position:relative so the
   absolute button anchors to it. --> */
#buddypress #members-dir-search,
#buddypress .dir-search {
    width: 100% !important;
}
/* Search form = 90% of gallery window width at every viewport.
   Gallery window = parent width - (2 × arrow padding).
   calc() mirrors the gallery-wrap padding per breakpoint. */
#buddypress #search-members-form {
    display: block !important;
    width: calc((100% - 112px) * 0.9) !important;
    max-width: calc((1400px - 112px) * 0.9) !important;
    margin: 0 auto !important;
    position: relative !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
    #buddypress #search-members-form {
        width: calc((100% - 80px) * 0.9) !important;
    }
}
@media (max-width: 480px) {
    #buddypress #search-members-form {
        width: calc((100% - 64px) * 0.9) !important;
    }
}
#buddypress #search-members-form label[for="members_search"] {
    display: none !important;
}
#buddypress #members-dir-search input[type="search"],
#buddypress #members-dir-search input[type="text"],
#buddypress .dir-search input[type="search"],
#buddypress .dir-search input[type="text"],
#buddypress #members_search {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 2px solid #CC9900 !important;
    border-radius: 8px !important;
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    /* right padding reserves space for the absolute-positioned magnifier icon */
    padding: 0 48px 0 14px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.18s ease !important;
}
/* Search submit button — absolute inside input's right edge, transparent background, just the icon visible. right offset = form's right padding (91px) + 6px so the icon sits 6px inside the input's gold border. */
#buddypress #members_search_submit,
#buddypress button#members_search_submit {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    color: #031B83 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: background 0.18s ease !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}
#buddypress #members_search_submit:hover {
    background: rgba(204, 153, 0, 0.15) !important;
    box-shadow: none !important;
}
#buddypress #members_search_submit i,
#buddypress #members_search_submit .icon {
    color: #031B83 !important;
    font-size: 16px !important;
}
#buddypress #members-dir-search input::placeholder,
#buddypress .dir-search input::placeholder {
    color: #031B83 !important;
    opacity: 0.55 !important;
}
#buddypress #members-dir-search input:focus,
#buddypress .dir-search input:focus {
    outline: none !important;
    border-color: #031B83 !important;
    box-shadow: 0 0 0 2px rgba(204, 153, 0, 0.25) !important;
}

/* 25.3 Order-by label + select — right-aligned so dropdown's right edge matches search row's right edge. Scoped to body.directory.members so the settings-page #subnav padding doesn't apply here. */
body.directory.members #buddypress .item-list-tabs#subnav,
body.directory.members #buddypress #subnav {
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
}
body.directory.members #buddypress .item-list-tabs#subnav > ul,
body.directory.members #buddypress #subnav > ul.list-unstyled,
body.directory.members #buddypress #subnav > ul {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
}
body.directory.members #buddypress li#members-order-select {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
#buddypress #subnav #members-order-select label,
#buddypress li#members-order-select label {
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin: 0 !important;
}
#buddypress #members-order-by,
#buddypress select#members-order-by {
    background: #fffbe6 !important;
    border: 2px solid #CC9900 !important;
    border-radius: 8px !important;
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 0 32px 0 32px !important;
    height: 40px !important;
    cursor: pointer !important;
    text-align: center !important;
    text-align-last: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.18s ease !important;
}
#buddypress #members-order-by option {
    text-align: center !important;
}
#buddypress #members-order-by:hover,
#buddypress #members-order-by:focus {
    background: #CC9900 !important;
    border-color: #031B83 !important;
    color: #031B83 !important;
    outline: none !important;
}

/* 25.4 Single-row tabs layout — "All Members 9" on the left, "Order By"
   dropdown on the right, same horizontal baseline. AMENDMENT S58 2026-04-15:
   previously .item-list-tabs-wrapper rendered its two child .item-list-tabs
   divs on separate rows (All Members row, Order By row); Rob asked for a
   single row with reduced vertical space. */
body.directory.members #buddypress .item-list-tabs-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 16px !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}
/* Invisible flex break — sits between the reset button (order:-1) and
   the toolbar items (order:0), forcing the reset onto its own row */
body.directory.members #buddypress .item-list-tabs-wrapper::before {
    content: '' !important;
    order: 0 !important;
    flex: 0 0 100% !important;
    height: 0 !important;
}
@media (max-width: 480px) {
    body.directory.members #buddypress .item-list-tabs-wrapper {
        justify-content: center !important;
        gap: 8px !important;
    }
    body.directory.members #buddypress .item-list-tabs-wrapper > .item-list-tabs:not(#subnav),
    body.directory.members #buddypress .item-list-tabs-wrapper > .item-list-tabs#subnav {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}
body.directory.members #buddypress .item-list-tabs-wrapper > .item-list-tabs:not(#subnav) {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}
body.directory.members #buddypress .item-list-tabs-wrapper > .item-list-tabs:not(#subnav) > ul {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
body.directory.members #buddypress li#members-all {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
body.directory.members #buddypress li#members-all > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    border: 0 !important;
}
/* 25.4.1 Circle count badge — mirrors .sidenav-badge (light cream fill,
   gold border with darker bottom edge, navy numerals). */
body.directory.members #buddypress li#members-all > a > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    border: 1px solid #CC9900 !important;
    border-bottom-width: 2px !important;
    border-radius: 50% !important;
    background: #FFF0C2 !important;
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

/* 25.4.2 Order By container — override the earlier "width: 100% /
   justify-content: flex-end" rules so the #subnav hugs its content and
   sits on the right of the flex row rather than pushing to its own line. */
body.directory.members #buddypress .item-list-tabs-wrapper > .item-list-tabs#subnav {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
body.directory.members #buddypress .item-list-tabs-wrapper > .item-list-tabs#subnav > ul {
    width: auto !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 25.4.3 Vertical alignment — "All Members 9" label and "Order By:"
   label both forced to a 40px box so their text baselines match the
   "Last Active" text inside the dropdown. AMENDMENT S58 2026-04-15:
   Rob — labels previously sat ~9px below the dropdown text. Root
   cause of the offset: .custom-order-select div was 58px tall (40px
   button + 18px phantom space from Seeko defaults), pushing the
   flex-row center 9px lower than the button's own center. Fix:
   force .custom-order-select to 40px so every flex item in the row
   is the same height, then all three visually centre on one line. */
body.directory.members #buddypress li#members-all > a,
body.directory.members #buddypress li#members-order-select > label,
body.directory.members #buddypress #subnav #members-order-select label {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.directory.members #buddypress #members-order-select .custom-order-select {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* 25.5 Vertical spacing around the tabs row.
   AMENDMENT S58 2026-04-15 rev2 (T406): Rob "the distance between the
   last active box and the bottom of the search bar should be the same
   distance as the other side between the bottom of the last active box
   and the top of the gallery". Equal 16px gaps above and below the
   tabs row by zeroing the search/gallery side margins and putting all
   of the spacing on the tabs wrapper itself.
   AMENDMENT rev3 2026-04-15 (T406): z-index boost on the search bar
   and tabs row so the gallery window's outer navy halo box-shadow
   (§26.1.1) paints BEHIND them instead of bleeding over their bottoms.
   The gallery is later in DOM so its shadow layer paints on top of
   siblings by default; explicit z-index on earlier siblings restores
   the expected order. */
body.directory.members #buddypress #members-dir-search,
body.directory.members #buddypress .dir-search {
    margin: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    /* S59 2026-04-15 rev4: CSS padding approach retired. Form width + left position now set by JS in functions.php §6.7.3a — reads the live .members-gallery-window bounding rect and matches exactly, so the form is guaranteed to span from gallery-window-left to gallery-window-right regardless of upstream container differences. */
}
body.directory.members #buddypress .item-list-tabs-wrapper {
    margin: 16px 0 16px 0 !important;
    position: relative !important;
    z-index: 5 !important;
}
body.directory.members #buddypress #members-dir-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transition: opacity 0.2s ease !important;
}
/* T406 S58 2026-04-15: immediate dim during BP AJAX (search / sort /
   reset). The §6.9 reset button adds .is-loading synchronously on
   click; the §6.7.3 parent observer removes it when BP finishes
   swapping in fresh content. Gives instant feedback instead of a
   dead two-second pause. */
body.directory.members #buddypress #members-dir-list.is-loading {
    opacity: 0.45 !important;
    pointer-events: none !important;
}
body.directory.members .members-gallery-wrap {
    margin-top: 0 !important;
}

/* 25.6 (retired) — navy halo via window box-shadow was painting over
   the search bar + sort controls because the gallery is later in DOM
   than those elements. Replaced by §25.7. */

/* 25.7 (retired rev10) — Navy halo moved off #buddypress background
   and onto the .members-gallery-window box-shadow stack at §26.1.1.
   Background gradients on rectangular containers always leak a visible
   rectangle at the element edges ("what's with the rectangular edge
   that it just suddenly drops off at" — Rob, S58). A box-shadow with
   zero offset + large blur naturally fades radially around the window's
   rounded-rect border, no rectangle to drop off. Left here as a marker
   so future sessions don't re-add the gradient approach. */
body.directory.members #buddypress {
    background-image: none !important;
}
/* end of 25 */

/* ============================================================================
   26. SECTION: Members directory — single-row gallery, custom dropdown, postcode
   AMENDMENT S58 2026-04-14: grid → horizontal scrollable gallery with arrows,
   native Last Active select → custom branded dropdown, postcode area badge.
   ============================================================================ */

/* 26.1 Gallery wrapper — outer container that holds arrow buttons in its
   left/right padding area, OUTSIDE the gold-bordered window. The window
   itself does the clipping. AMENDMENT S58 2026-04-15 rev5: arrows moved
   outside the gold window per Rob, gold border added to inner window. */
body.directory.members .members-gallery-wrap {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 56px;
    box-sizing: border-box;
    overflow: visible;
}
@media (max-width: 768px) {
    body.directory.members .members-gallery-wrap {
        padding: 0 40px;
    }
}
@media (max-width: 480px) {
    body.directory.members .members-gallery-wrap {
        padding: 0 32px;
    }
}

/* 26.1.1 Gallery window — the gold-bordered viewport that clips the
   horizontally-translating list. Cards that flow out either edge are
   clipped right at the gold border. AMENDMENT S58 2026-04-15 rev6: inset
   shadow stack so the window looks pushed into the page (3D). Order of
   shadows matters — inset darks first for the recessed feel, outer gold
   ambient last for the brand glow. */
body.directory.members .members-gallery-window {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 2px solid #CC9900;
    border-radius: 16px;
    background: #ffffff;
    /* S58 rev10 2026-04-15: navy halo returns as an OUTER box-shadow
       on the window itself (not a background gradient on #buddypress).
       A shadow with zero offset + large blur fades radially around the
       rounded-rect border, so there is no rectangular cut-off visible
       anywhere — the diffusion is in the blur profile, not a sharp
       edge on a container element. Matches Rob's mock from earlier in
       S58 ("soft navy outer glow around the gold border"). */
    box-shadow:
        /* inset stack — recessed 3D feel */
        inset 0 6px 14px rgba(0, 0, 0, 0.18),
        inset 0 -3px 10px rgba(0, 0, 0, 0.10),
        inset 6px 0 12px rgba(0, 0, 0, 0.10),
        inset -6px 0 12px rgba(0, 0, 0, 0.10),
        /* thin gold ambient */
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 10px rgba(204, 153, 0, 0.18),
        /* large navy halo — radial diffusion around the rounded border */
        0 0 110px 0 rgba(3, 27, 131, 0.45);
    box-sizing: border-box;
}

/* 26.2 #members-list becomes a single-row horizontally scrollable flex row.
   Overrides the previous #buddypress #members-list grid rule specifically on
   the members directory. S58 2026-04-14 rev2: 4 cards visible + half-peek on
   each side (YouTube carousel style). */
body.directory.members #buddypress #members-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    padding: 28px 20px !important;
    margin: 0 !important;
    list-style: none !important;
    /* Transform-based carousel — JS sets translateX, CSS animates it. */
    transform: translateX(0);
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* 26.3 Each card takes 20% of the viewport width and the flex container
   uses gap: 5% for real visible space between cards. Math: 4W + 4G =
   80% + 20% = 100% → 3 full cards in the middle + half a card peeking on
   each side, with breathing room between every card. AMENDMENT S58
   2026-04-15 rev3: reverted to 20% cards + real flex gap, removed
   scroll-snap (was eating the JS half-peek offset). DO NOT touch padding
   here — the card's internal padding lives at L472 (28px 20px 22px) and
   overriding it strips the avatar/name/badge breathing room. */
/* 26.3 Fixed-width cards — same size at every viewport.
   Gallery clips overflow, arrows scroll. However many fit naturally, that's
   what shows. Partial peek on edges hints more exist. */
body.directory.members #buddypress #members-list li {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 26.4 Arrow buttons */
body.directory.members .members-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fffbe6;
    border: 2px solid #CC9900;
    color: #031B83;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Nunito Sans', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    z-index: 10;
    padding: 0;
    line-height: 1;
}
body.directory.members .members-gallery-arrow:hover {
    background: #CC9900;
    border-color: #031B83;
    color: #031B83;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
body.directory.members .members-gallery-arrow-left { left: 4px; }
body.directory.members .members-gallery-arrow-right { right: 4px; }
body.directory.members .members-gallery-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* 26.5 Custom Order By dropdown — replaces native <select> */
body.directory.members .custom-order-select {
    position: relative;
    display: inline-block;
    min-width: 180px;
    font-family: 'Nunito Sans', sans-serif;
}
body.directory.members .custom-order-select-btn {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    background: #fffbe6;
    border: 2px solid #CC9900;
    border-radius: 8px;
    color: #031B83;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    box-sizing: border-box;
}
/* S58 2026-04-14: hover removed per Rob — only the open (clicked) state
   flips colours, so hover and click aren't duplicating the same animation. */
body.directory.members .custom-order-select.is-open .custom-order-select-btn {
    background: #CC9900;
    border-color: #031B83;
    color: #031B83;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
body.directory.members .custom-order-select-label {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.directory.members .custom-order-select-caret {
    font-size: 12px;
    transition: transform 0.2s ease;
}
body.directory.members .custom-order-select.is-open .custom-order-select-caret {
    transform: rotate(180deg);
}
/* AMENDMENT S58 2026-04-15 rev3 (T406): Restyled to match the
   interest-reasons popover at interest-system.php §7.1.3. Rob
   "use the same style as with the interested feature questionnaire
   pop up. All still too dark." White container, gold border, white
   option pills with faint navy borders, cream-bg gold-border on
   hover, soft-blue bg with navy border on selected. */
body.directory.members .custom-order-select-menu,
body.directory.members ul.custom-order-select-menu {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 220px !important;
    margin: 0 !important;
    padding: 14px !important;
    gap: 8px !important;
    list-style: none !important;
    background: #FFFFFF !important;
    border: 2px solid #CC9900 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    font-family: 'Nunito Sans', sans-serif !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 1000;
}
body.directory.members .custom-order-select.is-open .custom-order-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
body.directory.members .custom-order-select-option,
body.directory.members li.custom-order-select-option {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex: none !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(3, 27, 131, 0.2) !important;
    border-radius: 8px !important;
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    text-align: center !important;
    user-select: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    list-style: none !important;
    box-sizing: border-box !important;
}
body.directory.members .custom-order-select-option:hover {
    background: #fffbe6 !important;
    border-color: #CC9900 !important;
    color: #031B83 !important;
}
body.directory.members .custom-order-select-option.is-selected,
body.directory.members li.custom-order-select-option.is-selected {
    background: #f0f4ff !important;
    border-color: #031B83 !important;
    color: #031B83 !important;
    font-weight: 700 !important;
}
body.directory.members .custom-order-select-option.is-selected:hover {
    background: #f0f4ff !important;
    border-color: #031B83 !important;
    color: #031B83 !important;
}

/* 26.6 Postcode area badge — next to attendance badge, post-box icon.
   AMENDMENT S58 2026-04-15 rev2 (T406): Rob "the postcode and the
   attendance counter buttons should be the same size and style."
   Unified to match §18.6 .member-attendance-badge — same padding,
   border, radius, font, colour, margin. */
#buddypress #members-list .member-postcode-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: #fff !important;
    border: 1px solid #CC9900 !important;
    border-radius: 12px !important;
    padding: 4px 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #031B83 !important;
    line-height: 1 !important;
    margin-top: 10px !important;
}
#buddypress #members-list .member-postcode-badge .postcode-icon {
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 26.7 Bottom row pair — postcode left, attendance right. Wrapper is
   injected by the JS in §6.9. Both badges sit on one horizontal row
   so they read as a "where / how often" summary at the foot of each
   card. T406 S58 2026-04-15. */
#buddypress #members-list .member-bottom-pair {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
}
/* Reset the individual badges' own margin-top so only the wrapper
   margin applies — otherwise they get double-spaced. */
#buddypress #members-list .member-bottom-pair .member-postcode-badge,
#buddypress #members-list .member-bottom-pair .member-attendance-badge {
    margin-top: 0 !important;
    flex: 0 0 auto !important;
}

/* 26.8 "Reset search results" button — own centred row between search bar
   and toolbar. order:-1 puts it above the All Members/Order By items.
   flex-basis:100% forces it onto its own line in the wrapping flex row. */
body.directory.members #members-search-reset {
    order: -1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 8px !important;
    height: 34px !important;
    padding: 0 16px !important;
    background: #fffbe6 !important;
    border: 2px solid #CC9900 !important;
    border-radius: 9999px !important;
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    z-index: 3 !important;
}
body.directory.members #members-search-reset:hover {
    background: #CC9900 !important;
    color: #031B83 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}
body.directory.members #members-search-reset.is-loading,
body.directory.members #members-search-reset:disabled {
    background: #CC9900 !important;
    color: #031B83 !important;
    opacity: 0.85 !important;
    cursor: progress !important;
}
/* end of 26 */

/* ============================================================================
   27. SECTION: About Us page — members gallery (flat variant)
   T404 S58 2026-04-15: Rob "copy the exact member cards from this
   membership page and just do the same thing. Just put a scroll and
   gallery on the about us page... but don't have any of the 3D
   effects, don't have the inner shadow or outer gradient, just have
   the border." Scoped to body.page-id-926.

   Pairs with §6.8 about_us_members_gallery() in functions.php which
   renames the Seeko widget UL id from members-list-grid to members-list
   so every card-interior style in §5/§6 above applies for free.

   Override the old vertical-stack rules at §1.3 that forced 4 cards
   into a single column. Those used .elementor-widget-members-grid
   #members-list-grid selectors; since JS now renames the id, the old
   rules no longer match and we re-layout cleanly here.
   ============================================================================ */

/* 27.0 About Us #buddypress root — the JS in §6.8 injects a synthetic
   <div id="buddypress" class="about-us-bp-root"> around the Seeko
   widget container so card CSS scoped "#buddypress #members-list ..."
   catches on this page. This rule neutralises any inherited BP chrome
   (padding, bg, borders) from rules that target plain #buddypress so
   the synthetic wrapper is transparent. */
body.page-id-926 #buddypress.about-us-bp-root {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
}

/* 27.1 Outer wrapper — 56px gutter for arrow buttons like §26.1. */
body.page-id-926 .about-us-members-gallery-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0 56px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: visible;
}

/* 27.2 Flat window variant — gold border only. No inset shadows, no
   outer gradient halo, no background gradient. Plain white viewport
   that clips horizontally-translating cards. */
body.page-id-926 .members-gallery-window,
body.page-id-926 .members-gallery-window--flat {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 2px solid #CC9900;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: none;
    box-sizing: border-box;
}

/* 27.3 Row layout — override the Seeko widget's Bootstrap .row + col-*
   stacking and force a single horizontal flex row. Transform-based
   carousel mirrors §26.2. */
body.page-id-926 #buddypress #members-list,
body.page-id-926 .elementor-widget-members-grid #members-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5% !important;
    overflow: visible !important;
    padding: 28px 0 28px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    list-style: none !important;
    transform: translateX(0);
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* 27.4 Cards — 20% width each (5 cards visible, half-peek on each side).
   The Seeko widget applies Bootstrap col-md-* classes for its grid
   layout; we have to beat every likely variant.
   AMENDMENT S58 2026-04-15 rev2: DO NOT zero padding. The shared rule
   at line 472 gives the li its 28px 20px 22px padding, which is what
   creates the visible gap between the background card (li) and the
   foreground card (.item-container nested inside). Zeroing padding
   collapsed the foreground onto the background and killed the stack.
   Only flex/width/margin/float need overriding here. */
body.page-id-926 #buddypress #members-list > li,
body.page-id-926 .elementor-widget-members-grid #members-list > li,
body.page-id-926 #members-list > li[class*="col-"] {
    flex: 0 0 20% !important;
    width: 20% !important;
    max-width: 20% !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* 27.5 Arrow buttons — mirror §26.4 but scoped to page 926. */
body.page-id-926 .members-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fffbe6;
    border: 2px solid #CC9900;
    color: #031B83;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Nunito Sans', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    z-index: 10;
    padding: 0;
    line-height: 1;
}
body.page-id-926 .members-gallery-arrow:hover {
    background: #CC9900;
    border-color: #031B83;
    color: #031B83;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
body.page-id-926 .members-gallery-arrow-left  { left: 4px; }
body.page-id-926 .members-gallery-arrow-right { right: 4px; }
body.page-id-926 .members-gallery-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}
/* end of 27 */

/* ============================================================================
   28. SECTION: Events page spacing + nav dropdown fixes
   ============================================================================ */

/* 28.10 Events search/filter block — on-brand */
.events-filter-section {
    background: #FFFFFF !important;
    border: 2px solid #CC9900 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.events-filter-row-secondary {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
}
.events-search-input {
    border: 1px solid rgba(26,26,46,0.08) !important;
    border-radius: 8px !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    color: #1A1A2E !important;
}
.events-search-input:focus {
    border-color: #CC9900 !important;
    box-shadow: 0 0 0 2px rgba(204,153,0,0.15) !important;
    outline: none !important;
}
.events-filter-select {
    border: 1px solid rgba(26,26,46,0.08) !important;
    border-radius: 8px !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 14px !important;
    padding: 10px !important;
    color: #1A1A2E !important;
}
.events-filter-select:focus {
    border-color: #CC9900 !important;
    box-shadow: 0 0 0 2px rgba(204,153,0,0.15) !important;
    outline: none !important;
}
.events-filter-button {
    background: #fffbe6 !important;
    color: #031B83 !important;
    border: 2px solid #CC9900 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}
.events-filter-button:hover {
    background: #CC9900 !important;
    color: #031B83 !important;
    border-color: #031B83 !important;
}
.events-filter-reset {
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.events-filter-reset:hover {
    color: #CC9900 !important;
}

/* 28.1 Breathing room — Events title → Featured Events heading (reduced 15%) */
body:has(.events-page-wrapper) .elementor-heading-title,
body:has(.events-page-wrapper) .entry-title,
body:has(.events-page-wrapper) .page-title {
    margin-bottom: 21px !important;
}
.events-featured-section .events-section-title {
    padding-bottom: 20px !important;
    margin-bottom: 29px !important;
}
.events-featured-section .events-featured-scroll {
    margin-top: 14px !important;
}

/* 28.1c Full width: extra 20% gap between featured cards and search box */
@media (min-width: 1280px) {
    .events-featured-section {
        margin-bottom: 72px !important; /* 60px + 20% */
    }
}

/* 28.2 Search/filter box — tablet: 80% width, centered, 20% more margin */
@media (min-width: 768px) and (max-width: 1023px) {
    .events-filter-section {
        width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 36px !important;
        margin-bottom: 36px !important;
    }
}

/* 28.2b Tablet/mobile search box: center all content */
/* Tablet/mobile: center ALL search container content */
@media (max-width: 1023px) {
    .events-filter-section {
        text-align: center !important;
    }
    .events-filter-form {
        text-align: center !important;
    }
    .events-filter-row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .events-filter-row-secondary {
        justify-content: center !important;
        align-items: baseline !important;
        flex-direction: row !important;
        gap: 12px !important;
    }
    .events-search-input,
    .events-filter-select {
        width: 100% !important;
        flex: none !important;
        text-align: center !important;
        text-align-last: center !important;
    }
    .events-search-input::placeholder {
        text-align: center !important;
    }
    .events-filter-button {
        margin: 0 !important;
    }
    .events-filter-reset {
        margin: 0 !important;
    }
}

/* All viewports: search container bottom margin +10% (30→33px) */
.events-filter-section {
    margin-bottom: 38px !important;
}

/* Full width (≥1280): also increase top margin */
@media (min-width: 1280px) {
    .events-filter-section {
        margin-top: 33px !important;
    }
}

/* Hide 4th featured card on non-tablet (only tablet gets 4) */
@media (min-width: 1024px), (max-width: 767px) {
    .events-featured-scroll .event-card:nth-child(4) {
        display: none !important;
    }
}

/* 28.4 ALL event cards — identical styling for both .events-grid and .events-featured-scroll */
.events-page-wrapper .event-card,
.events-featured-scroll .event-card {
    border: 2px solid #CC9900 !important;
    overflow: hidden !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-shrink: unset !important;
    width: auto !important;
}

/* Featured scroll → same grid as .events-grid */
.events-featured-scroll {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
}

/* Full width + desktop (≥1024): 347px fixed */
@media (min-width: 1024px) {
    .events-grid .event-card,
    .events-featured-scroll .event-card {
        height: 347px !important;
    }
}
/* Tablet (768–1023): 2-column, 300px fixed */
@media (min-width: 768px) and (max-width: 1023px) {
    .events-grid,
    .events-featured-scroll {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .events-grid .event-card,
    .events-featured-scroll .event-card {
        height: 300px !important;
    }
}
/* Mobile (<768): fixed height + single column for featured */
@media (max-width: 767px) {
    .events-grid .event-card,
    .events-featured-scroll .event-card {
        height: 360px !important;
    }
    .events-featured-scroll {
        grid-template-columns: 1fr !important;
    }
}

/* REMOVED: Section 28.6a nav dropdown centering — Venues/Organisers now top-level,
   dropdown no longer exists. Previously verified centering revoked as unnecessary. */

/* 28.11a Base grid — needed on ALL pages using .events-grid (events, venues, organisers) */
.events-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
}

/* 28.11 Organiser + Venue cards — proper spacing, centering, footer at bottom */
.events-grid .event-card {
    display: flex !important;
    flex-direction: column !important;
}
.events-grid .event-card .event-card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
}
.events-grid .event-card .event-card-title {
    text-align: center !important;
}
.events-grid .event-card .event-card-excerpt {
    text-align: center !important;
}
.events-grid .event-card .event-card-footer {
    margin-top: auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
}
/* Venue/organiser "Show Interest" / "Interested?" button */
.wishlist-button,
.interest-btn {
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 28.12 Organiser/venue search filter — base flex + center on all viewports */
.events-filter-row {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 28.6 Category badge — restyle to match date badge (white bg, gold border, navy text) */
.event-card-badge {
    background: #FFFFFF !important;
    color: #031B83 !important;
    border: 2px solid #CC9900 !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(26, 26, 46, 0.08) !important;
    top: 12px !important;
    left: 12px !important;
}

/* 28.7 Venue text — centered + space after map pin icon */
.event-card-venue {
    text-align: center !important;
    display: block !important;
}
.event-card-venue::before {
    margin-right: 4px !important;
}

/* 28.8 Date badge — gold border to match category badge */
.event-card-date {
    border: 2px solid #CC9900 !important;
}

/* 28.5 Event grid — 60px gap on tablet and up (mobile keeps base) */
@media (min-width: 768px) {
    .events-page-wrapper .events-grid,
    .events-page-wrapper .events-featured-scroll {
        gap: 60px !important;
    }
}
/* end of 28 */

/* ============================================================================
   29. My Events workspace page (T460, 2026-04-17)
   Dashboard workspace for Organisers + Venues + Admins to manage their events.
   Slug: /members/<user>/my-events/
   ============================================================================ */

/* 29.1 Page container */
.my-events-page {
    font-family: "Nunito Sans", sans-serif;
    padding: 24px 0;
    text-align: center;
    max-width: 100%;
}

/* 29.2 Dead-centre Add-an-Event button */
.my-events-header {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.my-events-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fffbe6;
    color: #031B83;
    border: 2px solid #CC9900;
    padding: 10px 28px;
    border-radius: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
    line-height: 1.2;
}
.my-events-add-btn:hover,
.my-events-add-btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    color: #031B83;
    background: #fff5cc;
}
.my-events-add-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
    color: #031B83;
}

/* 29.3 Search + date filter — TWO rows: row 1 = search input (centred, own line), row 2 = From + date + To + date + Filter + Reset (inline).
   Uses !important on the flex mechanics because BuddyPress + Seeko reset `form` to display:block at higher specificity and that cascades down. */
.my-events-page form.my-events-search {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 auto 28px !important;
    width: 100% !important;
    max-width: 100% !important;
}
.my-events-page form.my-events-search .my-events-search-daterow {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
}
.my-events-page form.my-events-search .my-events-search-daterow > * {
    box-sizing: border-box !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 14px !important;
    line-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    width: auto !important;
}
.my-events-page form.my-events-search input.my-events-search-text {
    flex: 1 1 220px !important;
    min-width: 180px !important;
    max-width: 340px !important;
    padding: 0 18px !important;
    border: 2px solid #CC9900 !important;
    border-radius: 16px !important;
    color: #031B83 !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 40px !important;
    height: 44px !important;
}
.my-events-search-text::placeholder {
    color: #031B83;
    opacity: 0.55;
}
.my-events-search-text:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(204,153,0,0.25);
}
.my-events-page form.my-events-search input[type="date"] {
    padding: 0 14px !important;
    border: 2px solid #CC9900 !important;
    border-radius: 16px !important;
    color: #031B83 !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 40px !important;
    width: 160px !important;
    min-width: 150px !important;
    max-width: 180px !important;
    height: 44px !important;
}
.my-events-search input[type="date"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(204,153,0,0.25);
}
.my-events-search-label {
    padding: 0 4px;
    font-weight: 700;
    color: #031B83;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    transform: translateY(-3px); /* Nudge label text up 3px to align with the date input's visible "dd/mm/yyyy" text baseline (Chrome renders date input text slightly below box centre due to the picker icon). */
}
.my-events-page form.my-events-search button {
    padding: 0 22px !important;
    background: #fffbe6 !important;
    color: #031B83 !important;
    border: 2px solid #CC9900 !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
    cursor: pointer;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 150ms ease;
    height: 44px !important;
}
.my-events-search button:hover {
    background: #fff5cc;
}
.my-events-reset {
    padding: 0 8px;
    color: #031B83;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
}
.my-events-reset:hover {
    color: #CC9900;
}

/* 29.3b Verification pending notice — shown to level-4/5 users whose _organiser_verified / _venue_verified meta is not 'approved' */
.my-events-verification-notice {
    max-width: 720px;
    margin: 0 auto 24px;
    padding: 14px 24px;
    background: #fffbe6;
    border: 2px solid #CC9900;
    border-radius: 16px;
    color: #031B83;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    line-height: 1.4;
}

/* 29.4 Events grid (user's own events) */
.my-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 0;
    text-align: left;
}

.my-events-card {
    background: #fff;
    border: 2px solid #CC9900;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.my-events-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.my-events-card-head {
    display: flex;
    justify-content: flex-end;
}
.my-events-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 9999px;
    font-family: Montserrat, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.my-events-status.status-publish { background: rgba(40,167,69,0.08); color: #28a745; }
.my-events-status.status-pending { background: rgba(204,153,0,0.12); color: #CC9900; }
.my-events-status.status-draft   { background: rgba(107,114,128,0.12); color: #6B7280; }
.my-events-status.status-future  { background: rgba(3,27,131,0.08); color: #031B83; }

.my-events-card-title {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #031B83;
    margin: 0;
    line-height: 1.3;
}
.my-events-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #4b5563;
}
.my-events-card-meta .dashicons {
    color: #CC9900;
    margin-right: 4px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.my-events-card-price {
    font-weight: 700;
    color: #CC9900;
    font-size: 15px;
}
.my-events-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
.my-events-edit-btn,
.my-events-view-btn {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    border-radius: 16px;
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
    font-family: Montserrat, sans-serif;
    transition: transform 150ms ease, background 150ms ease;
}
.my-events-edit-btn {
    background: #031B83;
    color: #CC9900;
    border: 2px solid #031B83;
}
.my-events-edit-btn:hover {
    color: #CC9900;
    background: #0a2daa;
    transform: translateY(-1px);
}
.my-events-view-btn {
    background: transparent;
    color: #031B83;
    border: 2px solid #CC9900;
}
.my-events-view-btn:hover {
    color: #031B83;
    background: #fffbe6;
    transform: translateY(-1px);
}

/* 29.5 Empty state — brand navy copy, no secondary CTA (top Add button is the only entry point) */
.my-events-empty {
    text-align: center;
    padding: 60px 20px;
    color: #031B83;
}
.my-events-empty p {
    font-size: 16px;
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

/* 29.6 Form wrap — centres the [submit_event] form in the workspace */
.my-events-page-form {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.my-events-form-wrap {
    text-align: left;
    margin: 0 auto;
}
.my-events-form-wrap .event-submit-form-wrapper {
    text-align: center;
}
.my-events-form-wrap .event-submit-form-wrapper h2 {
    font-family: Montserrat, sans-serif;
    color: #031B83;
    font-weight: 700;
    margin-bottom: 24px;
}
.my-events-form-wrap .event-submit-form {
    text-align: left;
}
.my-events-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    color: #031B83;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
}
.my-events-back-btn:hover {
    color: #CC9900;
}
.my-events-back-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* 29.7 Small screens — stack the search row, single-column grid */
@media (max-width: 768px) {
    .my-events-search {
        flex-direction: column;
        align-items: stretch;
    }
    .my-events-search input[type="text"] {
        min-width: auto;
        width: 100%;
    }
    .my-events-search label {
        justify-content: space-between;
    }
    .my-events-grid {
        grid-template-columns: 1fr;
    }
}
/* end of 29 */

/* ============================================================================
   30. SECTION: S63 Phase 1c — Uniformity Pass (Rob S62 Table B sign-off +
       T455 Table C + D089/D090/D091 + LB-022/023/024)
   ============================================================================ */

/* 30.1 Event card uniform size (Table B B31/B32/B35 sign-off) — no half-width
        collapse at 1024, identical card size between .events-grid and
        .events-featured-scroll. Desktop (>=1280) = auto-fit 280px cards at 347
        tall; tablet / small-desktop (810-1279) = 2 cols at 248 wide 360 tall;
        mobile (<810) = single col 248 wide 360 tall. Gold border and brand
        chrome inherited from §28.4. Ranges per D091 (locked base at 360). */
.events-page-wrapper .events-grid,
.events-page-wrapper .events-featured-scroll,
.events-featured-scroll,
.events-grid {
    display: grid !important;
    gap: var(--space-xl, 24px) !important;
    justify-content: center !important;
}
@media (max-width: 809px) {
    .events-page-wrapper .events-grid,
    .events-page-wrapper .events-featured-scroll,
    .events-featured-scroll,
    .events-grid {
        grid-template-columns: minmax(0, 248px) !important;
    }
    .events-page-wrapper .event-card,
    .events-featured-scroll .event-card,
    .events-grid .event-card {
        height: 360px !important;
        width: 248px !important;
    }
}
@media (min-width: 810px) and (max-width: 1279px) {
    .events-page-wrapper .events-grid,
    .events-page-wrapper .events-featured-scroll,
    .events-featured-scroll,
    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 248px)) !important;
    }
    .events-page-wrapper .event-card,
    .events-featured-scroll .event-card,
    .events-grid .event-card {
        height: 360px !important;
        width: 248px !important;
    }
}
@media (min-width: 1280px) {
    .events-page-wrapper .events-grid,
    .events-page-wrapper .events-featured-scroll,
    .events-featured-scroll,
    .events-grid {
        grid-template-columns: repeat(auto-fit, 280px) !important;
    }
    .events-page-wrapper .event-card,
    .events-featured-scroll .event-card,
    .events-grid .event-card {
        height: 347px !important;
        width: 280px !important;
    }
}

/* 30.2 Event-card date (B42/B43 sign-off) — navy Montserrat, larger readable
        size, replaces the single grey 13px block. Day/month span split (B46/B47)
        is still pending Rob sign-off — styling applies to whatever element
        currently renders. */
.event-card .event-card-date,
.events-grid .event-card-date,
.events-featured-scroll .event-card-date {
    color: #031B83 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 12px !important;
}

/* 30.3 .events-filter-button (B50 sign-off) — LB-023 canonical cream/gold/navy. */
.events-filter-button,
.events-filter-section button[type="submit"],
.events-filter-form button[type="submit"] {
    background: #fffbe6 !important;
    color: #031B83 !important;
    border: 2px solid #CC9900 !important;
    border-radius: 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.events-filter-button:hover,
.events-filter-section button[type="submit"]:hover,
.events-filter-form button[type="submit"]:hover {
    background: #fff5cc !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(204, 153, 0, 0.18) !important;
}

/* 30.4 Event filter inputs (B56 sign-off) — gold hairline, navy text. No greys. */
.events-filter-row input[type="text"],
.events-filter-row input[type="search"],
.events-filter-row select,
.events-filter-section input[type="text"],
.events-filter-section input[type="search"],
.events-filter-section select {
    border: 2px solid #CC9900 !important;
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}
.events-filter-row input::placeholder,
.events-filter-section input::placeholder {
    color: rgba(3, 27, 131, 0.55) !important;
}

/* 30.5 Events search bar width (B57 sign-off) — 90% of gallery width at every
        viewport; gallery itself maxes at 1440 desktop, 90% of viewport at tablet
        / mobile. Mirrors members-gallery rule. */
.events-page-wrapper .events-filter-section,
.events-page-wrapper .events-filter-form {
    width: 90% !important;
    max-width: 1296px !important; /* 90% of 1440 gallery */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 30.6 T460 submit-event form bottom brand correction — file inputs, native
        color picker, helper text, labels. LB-023 / LB-024. */
.event-submit-form label,
.my-events-form-wrap .event-submit-form label {
    font-family: 'Montserrat', sans-serif !important;
    color: #031B83 !important;
    font-weight: 700 !important;
}
.event-submit-form .form-help,
.event-submit-form .form-hint,
.event-submit-form small,
.event-submit-form .helper-text,
.my-events-form-wrap .event-submit-form p,
.my-events-form-wrap .event-submit-form small {
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
}
/* Native file input — restyle as cream brand card */
.event-submit-form input[type="file"],
.my-events-form-wrap .event-submit-form input[type="file"] {
    background: #fffbe6 !important;
    color: #031B83 !important;
    border: 2px solid #CC9900 !important;
    border-radius: 16px !important;
    padding: 10px 14px !important;
    font-family: 'Nunito Sans', sans-serif !important;
}
.event-submit-form input[type="file"]::-webkit-file-upload-button,
.my-events-form-wrap .event-submit-form input[type="file"]::-webkit-file-upload-button {
    background: #031B83 !important;
    color: #CC9900 !important;
    border: 0 none !important;
    border-radius: 10px !important;
    padding: 6px 14px !important;
    margin-right: 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    cursor: pointer;
}
/* Native color input — compact branded swatch instead of full-width navy rectangle */
.event-submit-form input[type="color"],
.my-events-form-wrap .event-submit-form input[type="color"] {
    width: 64px !important;
    height: 40px !important;
    padding: 2px !important;
    border: 2px solid #CC9900 !important;
    border-radius: 12px !important;
    background: #fffbe6 !important;
    cursor: pointer;
}
/* Submission review-footer — navy Montserrat so the "will be reviewed" text
   reads as a brand note not a default grey disclaimer. */
.event-submit-form .submission-footer,
.event-submit-form .submit-note,
.my-events-form-wrap .event-submit-form .submission-footer,
.my-events-form-wrap .event-submit-form > p:last-of-type {
    color: #031B83 !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-style: italic;
    background: rgba(204, 153, 0, 0.06);
    border-left: 3px solid #CC9900;
    padding: 10px 14px;
    border-radius: 0 12px 12px 0;
    margin-top: 16px;
}

/* 30.7 Account page brand violations (S62 Rob flag — ORGANISER pill, Change
        Plan, Cancel Membership, Change Password) — align with LB-023/024. */
/* Account subscription tier pill — use per-tier tint palette (same rules as
   .bio-level + .member-card-level.level-*). Any ORGANISER/VENUE/etc. badge on
   the account page with class .account-tier-badge or .pmpro-level-name gets
   the per-tier treatment. */
.account-tier-badge,
.pmpro-level-name,
.pmpro_a-s-content .pmpro_level_info strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    padding: 4px 12px 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border: 0 none !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}
.account-tier-badge.level-organiser,
.pmpro-level-name.level-organiser {
    background: rgba(40, 167, 69, 0.08) !important;
    color: #28a745 !important;
}
.account-tier-badge.level-venue,
.pmpro-level-name.level-venue {
    background: rgba(111, 66, 193, 0.08) !important;
    color: #6f42c1 !important;
}
.account-tier-badge.level-premium,
.pmpro-level-name.level-premium {
    background: rgba(204, 153, 0, 0.08) !important;
    color: #CC9900 !important;
}
.account-tier-badge.level-standard,
.pmpro-level-name.level-standard {
    background: rgba(3, 27, 131, 0.06) !important;
    color: #031B83 !important;
}
.account-tier-badge.level-free,
.pmpro-level-name.level-free {
    background: rgba(107, 114, 128, 0.08) !important;
    color: #6B7280 !important;
}

/* Change Plan / Change Password / Cancel Membership buttons on account page —
   LB-023 cream/gold/navy brand button (default) instead of the retired
   gold-bg/navy-text variant. */
.pmpro_account-membership .pmpro_btn,
.pmpro_account-membership a.pmpro_btn,
.account-change-plan-btn,
.account-change-password-btn,
.pmpro_a-s-change_account_info,
.pmpro_a-s-change_password {
    background: #fffbe6 !important;
    color: #031B83 !important;
    border: 2px solid #CC9900 !important;
    border-radius: 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    text-decoration: none !important;
    transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.pmpro_account-membership .pmpro_btn:hover,
.pmpro_account-membership a.pmpro_btn:hover,
.account-change-plan-btn:hover,
.account-change-password-btn:hover {
    background: #fff5cc !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(204, 153, 0, 0.18) !important;
}
/* Cancel Membership specifically — navy link, not grey muted */
.pmpro_account-membership .pmpro_actionlink-cancel,
.account-cancel-membership {
    color: #031B83 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-decoration: underline;
}
.pmpro_account-membership .pmpro_actionlink-cancel:hover,
.account-cancel-membership:hover {
    color: #CC9900 !important;
}


/* 30.8 Cascade-winner overrides — raise specificity on two S63 Phase 1c items
        that didn't land on first upload (T455 miss retrospective):
        - .profile-widget border was still inheriting grey #e8e8e8 (the new
          rule at profile-editor.css §820 had equal specificity and a later
          rule somewhere was winning); bump with body-scoped override.
        - .bio-level font was rendering Nunito Sans because the
          `.profile-grid-public .profile-widget *` body-text rule at
          profile-editor.css §837 had higher specificity (0,2,1) than
          `.bio-level` (0,1,0). Force Montserrat on all tier pills.
*/
body.bp-user .profile-grid-public .profile-widget,
body .profile-grid-public .profile-widget {
    border-color: rgba(204, 153, 0, 0.35) !important;
    border-width: 1px !important;
    border-style: solid !important;
}
body .profile-grid-public .bio-level,
body .profile-grid-public .badge-free,
body .profile-grid-public .badge-standard,
body .profile-grid-public .badge-premium,
body .profile-grid-public .badge-organiser,
body .profile-grid-public .badge-venue,
body .profile-grid-public .badge-admin,
body .bio-level,
body span.bio-level {
    font-family: 'Montserrat', sans-serif !important;
}

/* end of 30 */