/* ============================================================================
   ClubCircles community pages - Cultivate brand overlay.

   ClubCircles ("circles") ships its own front.css; this sheet overlays the
   cream-first member brand on its markup (everything is prefixed mpcirc-):
   cream surface, dark thread/post cards, terracotta accents on active states,
   Bebas headers, Inter body, a friendly branded empty state. Deliberately
   conservative - typography + colour, no layout surgery - since ClubCircles'
   feed UI is JS-driven. Every selector is scoped to .mpcirc- / #mpcirc- so the
   sheet is a no-op on non-community pages even though it's enqueued globally.

   FIRST PASS: written against ClubCircles' mpcirc- class convention before any
   circles exist. Expect a tweak once the circles are seeded and the rendered
   pages can be inspected - same loop as the account page.
   ============================================================================ */

/* --- Surface: let the cream page show through ClubCircles' containers --- */
.mpcirc-app,
.mpcirc-wrap,
.mpcirc-container,
[class*="mpcirc-page"],
[class*="mpcirc-circle-"] {
    background: transparent;
    color: var(--cv-text-on-cream, #000000);
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
}

/* --- Headers --- */
[class*="mpcirc-"] h1,
[class*="mpcirc-"] h2,
[class*="mpcirc-"] h3,
.mpcirc-circle-title,
.mpcirc-section-title,
.mpcirc-heading {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cv-text-on-cream, #000000);
    line-height: 1.1;
}

/* --- Body text + metadata --- */
[class*="mpcirc-"] p,
[class*="mpcirc-"] li,
.mpcirc-post-body,
.mpcirc-comment-body {
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    color: var(--cv-text-on-cream, #000000);
}
.mpcirc-meta,
.mpcirc-timestamp,
.mpcirc-byline,
[class*="mpcirc-"] time,
.mpcirc-muted {
    color: var(--cv-text-on-cream, #000000);
}

/* --- Thread / post cards: dark surface, cream text --- */
.mpcirc-post,
.mpcirc-feed-item,
.mpcirc-thread,
.mpcirc-card,
[class*="mpcirc-post-card"],
[class*="mpcirc-feed-card"] {
    background: var(--cv-bg-secondary, #000000);
    color: var(--cv-text-on-dark, #F7F3E9);
    border: 0;
    border-radius: var(--cv-radius-md, 16px);
    padding: 20px 22px;
    margin: 0 0 16px;
}
.mpcirc-post p,
.mpcirc-feed-item p,
.mpcirc-thread p,
.mpcirc-card p,
.mpcirc-post li,
.mpcirc-feed-item li,
.mpcirc-thread li,
.mpcirc-card li,
.mpcirc-post h1, .mpcirc-post h2, .mpcirc-post h3,
.mpcirc-feed-item h1, .mpcirc-feed-item h2, .mpcirc-feed-item h3,
.mpcirc-thread h1, .mpcirc-thread h2, .mpcirc-thread h3,
.mpcirc-card h1, .mpcirc-card h2, .mpcirc-card h3 {
    color: var(--cv-text-on-dark, #F7F3E9);
}
.mpcirc-post .mpcirc-meta,
.mpcirc-feed-item .mpcirc-meta,
.mpcirc-thread .mpcirc-meta,
.mpcirc-card .mpcirc-meta,
.mpcirc-post time,
.mpcirc-feed-item time,
.mpcirc-thread time,
.mpcirc-card time {
    color: var(--cv-text-on-dark, #F7F3E9);
}
.mpcirc-post a,
.mpcirc-feed-item a,
.mpcirc-thread a,
.mpcirc-card a {
    color: var(--cv-accent, #CC5500);
}

/* --- Buttons / actions: terracotta pills --- */
.mpcirc-button,
button.mpcirc-button,
a.mpcirc-button,
[class*="mpcirc-button--primary"],
.mpcirc-btn,
.mpcirc-submit {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--cv-accent, #CC5500);
    color: var(--cv-text-on-dark, #F7F3E9);
    border: 0;
    border-radius: var(--cv-radius-pill, 9999px);
    padding: 9px 22px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
}
.mpcirc-button:hover,
.mpcirc-btn:hover,
.mpcirc-submit:hover {
    background: var(--cv-accent-hover, #b34a00);
    color: var(--cv-text-on-dark, #F7F3E9);
}
.mpcirc-button--secondary,
.mpcirc-button.is-secondary,
[class*="mpcirc-button--ghost"] {
    background: transparent;
    color: var(--cv-text-on-cream, #000000);
    border: 1px solid var(--cv-border-medium, #8C8279);
}

/* --- Active states (tabs, filters, in-circle nav) --- */
.mpcirc-tab.is-active,
.mpcirc-tab.active,
.mpcirc-nav-item.is-active,
.mpcirc-nav-item.active,
[class*="mpcirc-"].is-active,
[class*="mpcirc-"][aria-current="page"] {
    color: var(--cv-accent-ink, #9A3E00);   /* text-safe on cream; border below stays decorative terracotta */
    border-color: var(--cv-accent, #CC5500);
}

/* --- Form inputs (composer, comments, search) --- */
[class*="mpcirc-"] input[type="text"],
[class*="mpcirc-"] input[type="search"],
[class*="mpcirc-"] input[type="email"],
[class*="mpcirc-"] textarea,
[class*="mpcirc-"] select,
.mpcirc-composer textarea,
.mpcirc-compose-input {
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    color: var(--cv-text-on-cream, #000000);
    background: #FFFFFF;
    border: 1px solid var(--cv-border-medium, #8C8279);
    border-radius: var(--cv-radius-sm, 8px);
}
[class*="mpcirc-"] input:focus,
[class*="mpcirc-"] textarea:focus,
[class*="mpcirc-"] select:focus {
    border-color: var(--cv-accent, #CC5500);
}
/* Keyboard focus: visible ring; mouse-click focus drops it. */
[class*="mpcirc-"] input:focus-visible,
[class*="mpcirc-"] textarea:focus-visible,
[class*="mpcirc-"] select:focus-visible {
    outline: 2px solid var(--cv-accent-ink, #9A3E00);
    outline-offset: 2px;
}
[class*="mpcirc-"] input:focus:not(:focus-visible),
[class*="mpcirc-"] textarea:focus:not(:focus-visible),
[class*="mpcirc-"] select:focus:not(:focus-visible) {
    outline: none;
}

/* --- Empty state: a friendly branded card, not a bare "No results found" --- */
.mpcirc-no-results {
    text-align: center;
    background: var(--cv-bg-secondary, #000000);
    color: var(--cv-text-on-dark, #F7F3E9);
    border-radius: var(--cv-radius-lg, 20px);
    padding: 48px 32px;
    margin: 24px auto;
    max-width: 520px;
}
.mpcirc-no-results::before {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: var(--cv-accent, #CC5500);
    margin: 0 auto 20px;
    border-radius: 2px;
}
.mpcirc-no-results p {
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cv-text-on-dark, #F7F3E9);
    margin: 0;
}