/**
 * Featured election widget (US-932).
 *
 * Announcement card for the activity feed sidebar: accent bar, state chip,
 * closing date and a solid full-width CTA.
 *
 * DOM (BuddyBoss registers before_widget as
 * `<aside id="%1$s" class="widget %2$s">`, so the wrapper class is the
 * WordPress-generated `widget_ms_featured_election`):
 *
 *   <aside class="widget widget_ms_featured_election">
 *     <div class="ms-few">
 *       <span class="ms-few__chip ms-few__chip--open|--draft|--closed">…</span>
 *       <h4 class="ms-few__title">…</h4>
 *       <p class="ms-few__description">…</p>
 *       <p class="ms-few__closes">…</p>
 *       <a class="ms-few__cta">…</a>
 *     </div>
 *   </aside>
 *
 * The wrapper is the visible card (global-branding.css already paints every
 * `.widget` white with a radius and shadow). Its padding is zeroed here so
 * `.ms-few` reaches the edges and the accent bar sits flush against the top
 * of the card instead of floating inside the theme's gutter. `!important`
 * is required to win over the BuddyBoss theme sheets, same as in
 * activity-layout.css.
 */

.widget_ms_featured_election {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 10px;
}

.ms-few {
    position: relative;
    padding: 22px 18px 18px;
    font-size: 14px;
    line-height: 1.5;
}

/* Accent bar, flush with the top edge of the card. */
.ms-few::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #385DFF 0%, #52A5FF 100%);
}

/* ─── State chip ──────────────────────────────────────────────────── */

.ms-few__chip {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Contrast ratios below are against each chip's own background (WCAG AA). */
.ms-few__chip--open {
    background: #E6F4EA;
    color: #146C2E;
}

.ms-few__chip--draft {
    background: #EDF2F7;
    color: #2D3748;
}

.ms-few__chip--closed {
    background: #F1F2F4;
    color: #5A6069;
}

/* ─── Content ─────────────────────────────────────────────────────── */

.ms-few__title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1A202C;
    /* Long society names must wrap, never overflow a 260px sidebar. */
    overflow-wrap: anywhere;
}

.ms-few__description {
    margin: 0 0 12px;
    font-size: 0.875rem;
    color: #4A5568;
    overflow-wrap: anywhere;
}

.ms-few__closes {
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #718096;
}

/* ─── CTA ─────────────────────────────────────────────────────────── */

.ms-few__cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border-radius: 8px;
    background: #385DFF;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

.ms-few__cta:hover,
.ms-few__cta:focus {
    background: #2447D6;
    color: #FFFFFF;
    text-decoration: none;
}

.ms-few__cta:focus-visible {
    outline: 2px solid #1A202C;
    outline-offset: 2px;
}

/* ─── Dark mode ───────────────────────────────────────────────────── */

/*
 * BuddyBoss Theme 2.20.1 only adds `bb-dark-theme` to <body> on TutorLMS
 * inner pages (inc/theme/template-functions.php:318-321), so the activity
 * feed has no dark mode on this platform — see Amendment A-1 in
 * sdd/specs/US-932/tasks.md. These overrides cost nothing and keep the card
 * correct wherever the theme does apply the class.
 *
 * prefers-color-scheme is deliberately NOT used: the surrounding BuddyBoss
 * page does not respond to it, so darkening only this card would leave it
 * inverted against a light feed.
 */
.bb-dark-theme .widget_ms_featured_election {
    background: #1E2132 !important;
}

.bb-dark-theme .ms-few__title {
    color: #F7FAFC;
}

.bb-dark-theme .ms-few__description {
    color: #CBD5E0;
}

.bb-dark-theme .ms-few__closes {
    color: #A0AEC0;
}

.bb-dark-theme .ms-few__chip--open {
    background: #14361F;
    color: #7EE2A0;
}

.bb-dark-theme .ms-few__chip--draft {
    background: #2D3748;
    color: #E2E8F0;
}

.bb-dark-theme .ms-few__chip--closed {
    background: #2A2E3D;
    color: #A0AEC0;
}

.bb-dark-theme .ms-few__cta:focus-visible {
    outline-color: #F7FAFC;
}