* {
    box-sizing: border-box;
}

:root {
    --navy: #101c33;
    --navy-2: #172743;
    --ink: #182032;
    --muted: #6f7787;
    --line: #e4e8ee;
    --paper: #ffffff;
    --soft: #f5f7fa;
    --blue: #333e94;
    --blue-dark: #283277;
    --gold: #e7b347;
    --red: #b94b50;
    --green: #2f8060;
    --shadow: 0 16px 45px rgba(19, 31, 55, .10);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--soft);
    color: var(--ink);
    font-family: "Inter", Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 74px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(16, 28, 51, .97);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.brand-mark {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #7c8cff;
}

.brand-mark svg {
    width: 100%;
    height: 100%;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.brand-text strong {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.brand-text strong em {
    font-style: normal;
    color: #7c8cff;
}

.nav-cta {
    margin-left: 4px;
}

.top-nav {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 13px;
    font-weight: 600;
}

.top-nav > a:not(.btn) {
    color: #d7deeb;
}

.top-nav > a:hover {
    color: #fff;
}

.profile-link {
    border-left: 1px solid rgba(255,255,255,.15);
    padding-left: 25px;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 13px;
    transition: .18s ease;
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-small {
    min-height: 36px;
    padding: 0 15px;
}

.btn-primary {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
}

.btn-primary:hover {
    background: var(--blue-dark);
}

.btn-outline {
    color: #fff;
    border-color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.04);
}

.btn-dark {
    color: #fff;
    background: var(--navy);
}

.hero {
    min-height: 460px;
    padding: 90px 7vw 76px;
    display: flex;
    align-items: center;
    color: #fff;
    background: #0e1727 url("../../images/background1.png") center / cover no-repeat;
}

.hero-content {
    max-width: 780px;
}

.eyebrow {
    margin-bottom: 14px;
    color: #9fabff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
}

.eyebrow.dark {
    color: var(--blue);
}

.hero h1 {
    margin: 0;
    font-size: clamp(48px, 6vw, 82px);
    line-height: .98;
    letter-spacing: -.055em;
    max-width: 900px;
}

.hero h1 span {
    color: #9fa9ff;
}

.hero p {
    max-width: 690px;
    margin: 26px 0 28px;
    color: #c6cfde;
    font-size: 17px;
    line-height: 1.72;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.creator-note {
    margin-top: 23px;
    color: #9faabd;
    font-size: 12px;
}

.creator-note strong {
    color: #dce3ef;
}

/*
============================================================
STAT STRIP (below hero)
============================================================
*/

/*
============================================================
NO HORIZONTAL PADDING HERE, ON PURPOSE

.stat-grid below is min(1420px, 92vw) -- the same width as
.section-shell, so the stats row lines up with every other
section on the page. It can only do that if it centres in the
VIEWPORT, which means this strip must not add a gutter of its
own.

It used to be `padding: 30px 7vw 6px`, and the result was a box
asking for 92vw inside a container offering 100vw - 14vw. That
is over-constrained, so the auto margins resolved to left-0 and
a negative right margin: the grid pinned itself to the left
padding edge, 46px out of line with every other section, and its
right edge landed 2px past the viewport -- a horizontal
scrollbar on the front page that nothing on screen explained.

The 2px rather than the full 92px is worth knowing about,
because it is the part that survives the auto-margin: vw units
are measured against the viewport INCLUDING the scrollbar, while
the layout width excludes it. So 92vw + 7vw + 7vw overflows by
the scrollbar's width even after the negative margin has
absorbed the rest.

If this strip ever needs a gutter again, give it to .stat-grid
as a max-width, not to this element as padding.
============================================================
*/
.stats-strip {
    padding: 30px 0 6px;
}

.stat-grid {
    width: min(1420px, 92vw);
    margin: -64px auto 0;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.stat-card {
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.stat-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-card-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stat-card-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}

.stat-card-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
}

.stat-card-icon svg {
    width: 18px;
    height: 18px;
}

.stat-card.stat-blue { border-top-color: var(--blue); }
.stat-card.stat-blue .stat-card-icon { background: var(--blue); }

.stat-card.stat-green { border-top-color: var(--green); }
.stat-card.stat-green .stat-card-icon { background: var(--green); }

.stat-card.stat-navy { border-top-color: var(--navy); }
.stat-card.stat-navy .stat-card-icon { background: var(--navy); }

.stat-card.stat-gold { border-top-color: var(--gold); }
.stat-card.stat-gold .stat-card-icon { background: var(--gold); }

.section-shell {
    width: min(1420px, 92vw);
    margin: 0 auto;
}

#protests {
    padding-top: 72px;
    padding-bottom: 78px;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-bottom: 25px;
}

.section-heading h2 {
    margin: 0;
    font-size: 34px;
    letter-spacing: -.04em;
}

.section-heading p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.table-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.table-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.table-filter-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-filter-field span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.table-filter-field select {
    min-height: 38px;
    padding: 0 30px 0 12px;
    border: 1px solid #dce1e8;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.table-status {
    margin-bottom: 17px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #42a678;
    box-shadow: 0 0 0 4px rgba(66,166,120,.12);
}

.table-responsive {
    overflow-x: auto;
}

table.dataTable {
    border-collapse: collapse !important;
}

.protest-table thead th {
    padding: 14px 12px !important;
    color: #6d7583;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--line) !important;
}

.protest-table tbody td {
    padding: 18px 12px !important;
    vertical-align: middle;
    border-bottom: 1px solid #edf0f4 !important;
    font-size: 13px;
}

.protest-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: 750;
}

.protest-title small {
    color: #9198a5;
    font-weight: 500;
}

.certified {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.certified::before {
    content: "✓";
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    font-size: 10px;
}

.status-pill {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.status-upcoming {
    background: #eef0ff;
    color: var(--blue);
}

.status-live {
    background: #e6f4ed;
    color: var(--green);
}

.status-ended {
    background: #f1f2f4;
    color: #7c8490;
}

.action-group {
    display: flex;
    gap: 7px;
}

.table-action {
    padding: 7px 11px;
    border-radius: 7px;
    border: 1px solid #d9dfe8;
    background: #fff;
    color: var(--ink);
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.table-action:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.table-action.edit {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    border: 1px solid #dce1e8 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    background: #fff !important;
}

.dt-container .dt-info,
.dt-container .dt-length,
.dt-container .dt-search {
    color: #747c8a;
    font-size: 12px;
}

.dt-container .dt-paging .dt-paging-button {
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 2px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.dt-container .dt-paging .dt-paging-button.current {
    border-color: var(--blue) !important;
    background: var(--blue) !important;
    color: #fff !important;
}

/*
============================================================
TRENDING CIVIC ACTIONS
============================================================
*/

.trending-section {
    padding-bottom: 78px;
}

.trending-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.trending-card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.trending-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 55px rgba(19, 31, 55, .16);
}

.trending-card-visual {
    position: relative;
    height: 130px;
    display: grid;
    place-items: center;
    color: #fff;
}

.trending-card-visual svg {
    width: 38px;
    height: 38px;
    opacity: .9;
}

.trending-visual-blue {
    background: linear-gradient(135deg, var(--navy), var(--blue));
}

.trending-visual-gold {
    background: linear-gradient(135deg, #8a6a1f, var(--gold));
}

.trending-visual-type {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.28);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.trending-card-body {
    padding: 18px 20px 20px;
}

.trending-card-body h3 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--ink);
}

.trending-card-meta {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
}

.trending-card-meta strong {
    color: var(--ink);
    font-weight: 700;
}

.trending-card-cta {
    width: 100%;
}

/*
============================================================
COMMUNITY POLLS
============================================================
*/

.polls-section {
    padding-bottom: 78px;
}

.polls-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.poll-card {
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.poll-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.poll-heading {
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.poll-category-badge {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef0ff;
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.poll-question {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--ink);
}

.poll-discuss-link {
    display: inline-block;
    margin-top: 16px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.poll-discuss-link:hover {
    text-decoration: underline;
}

.poll-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--muted);
    text-align: center;
}

.poll-empty-icon {
    font-size: 26px;
}

.poll-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poll-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.poll-option:hover {
    border-color: var(--blue);
    background: #f6f7fd;
}

.poll-option input {
    accent-color: var(--blue);
}

.poll-submit {
    align-self: flex-start;
    margin-top: 6px;
}

.poll-error {
    margin: 0;
    color: #b94b50;
    font-size: 12px;
    font-weight: 700;
}

.poll-signin-note {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.poll-unsupported {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.poll-results-total {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.poll-bar-row + .poll-bar-row {
    margin-top: 14px;
}

.poll-bar-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--ink);
}

.poll-bar-row-mine .poll-bar-label {
    font-weight: 800;
}

.poll-bar-you {
    color: var(--blue);
    font-weight: 700;
}

.poll-bar-percent {
    flex: 0 0 auto;
    color: var(--muted);
    font-weight: 700;
}

.poll-bar-track {
    height: 10px;
    border-radius: 999px;
    background: #eef0f5;
    overflow: hidden;
}

.poll-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--blue);
}

.poll-bar-row-mine .poll-bar-fill {
    background: var(--navy);
}

.poll-bar-count {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 760px) {
    .polls-grid {
        grid-template-columns: 1fr;
    }
}

/*
============================================================
"WHO WANTS TO BE PRESIDENT?" SECTION
============================================================
*/

.president-section {
    padding: 78px 0;
}

.president-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
}

.president-visual {
    flex: 0 0 auto;
}

.president-visual img {
    display: block;
    height: 450px;
    width: auto;
    max-width: 100%;
}

.president-copy {
    flex: 1 1 320px;
    min-width: 0;
}

.president-copy .eyebrow.dark {
    margin-bottom: 12px;
}

.president-copy h2 {
    margin: 0 0 18px;
    font-size: 34px;
    letter-spacing: -.04em;
    color: var(--ink);
}

.president-copy p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.news-section {
    padding: 70px 0 80px;
    background: var(--navy);
    color: #fff;
}

.news-heading p {
    color: #aeb9cc;
}

.refresh-indicator {
    color: #8f9ab0;
    font-size: 11px;
}

.news-strip-wrap {
    position: relative;
}

.news-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 370px);
    gap: 17px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 5px 2px 16px;
}

.news-strip::-webkit-scrollbar {
    display: none;
}

.news-card {
    overflow: hidden;
    background: #192942;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

.news-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0a111f;
    overflow: hidden;
}

.news-video video,
.news-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.news-card-body {
    padding: 18px;
}

.news-meta,
.comment-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #8e9bb2;
    font-size: 10px;
}

.news-card h3 {
    margin: 10px 0 8px;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.news-brief {
    min-height: 58px;
    margin: 0;
    color: #b7c1d2;
    font-size: 12px;
    line-height: 1.6;
}

.news-divider {
    height: 1px;
    margin: 15px 0;
    background: rgba(255,255,255,.08);
}

.comment-user {
    color: #c3cdfd;
    cursor: pointer;
    font-weight: 700;
}

.news-actions {
    margin-top: 15px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.news-action {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    background: rgba(255,255,255,.04);
    color: #dbe2ee;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.news-action:hover {
    background: rgba(255,255,255,.10);
}

.news-action.active-like {
    color: #aab3ff;
    border-color: #6570ce;
}

.news-action.active-dislike {
    color: #ffb9bd;
    border-color: #b94b50;
}

.rail-button {
    position: absolute;
    top: 43%;
    z-index: 2;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    background: rgba(10,18,34,.86);
    font-size: 28px;
    cursor: pointer;
}

.rail-left {
    left: -19px;
}

.rail-right {
    right: -19px;
}

.membership-section {
    padding: 80px 0;
    background: #f7f8fa;
}

.membership-grid {
    display: grid;
    grid-template-columns: .75fr 1.6fr;
    gap: 50px;
    align-items: start;
}

.membership-copy h2 {
    margin: 0;
    font-size: 35px;
    line-height: 1.1;
    letter-spacing: -.04em;
}

.membership-copy p {
    color: var(--muted);
    line-height: 1.7;
}

.role-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.role-card {
    position: relative;
    min-height: 245px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}

.role-card.featured {
    border-color: #bbc1ee;
    box-shadow: 0 14px 40px rgba(51,62,148,.13);
}

.role-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef0f5;
    color: var(--navy);
    font-weight: 800;
}

.role-badge {
    position: absolute;
    right: 18px;
    top: 18px;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--blue);
    background: #f0f1ff;
    font-size: 10px;
    font-weight: 800;
}

.role-card h3 {
    margin: 25px 0 8px;
}

.role-card p {
    min-height: 69px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

.role-card a,
.role-card > span:last-child {
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}

/*
============================================================
STICKY FOOTER LAYOUT

Keeps the footer at the bottom of the WINDOW on a page too short
to fill it, and at the bottom of the CONTENT on a page that
scrolls. Without this, a short page -- a confirmation screen, an
empty search result -- leaves the footer floating in the middle
with a band of background below it.

Not position: fixed. A permanently pinned bar would take a slice
of every viewport on every page to solve a problem that only
exists on short ones, and would sit on top of content on a phone.

HOW IT WORKS
------------------------------------------------------------
body is a flex column at least as tall as the viewport, and the
element before the footer is told to grow into whatever space is
left. 100dvh rather than 100vh so mobile browsers' collapsing
address bars do not leave a gap; vh is kept first as the fallback
for anything that does not know dvh.

The grow rule deliberately names several selectors rather than
using a bare :not(footer). Pages here differ -- most wrap content
in <main>, a few use .civic-page or .admin-page directly -- and a
broad selector would also stretch the <header> nav, which must
keep its own height.

REQUIRES THE FOOTER TO BE LAST IN <body>
------------------------------------------------------------
Markup rendered after it will push it back up the page. Scripts
after it are fine; they generate no layout box.
============================================================
*/

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body > main,
body > .civic-page,
body > .admin-page,
body > .profile-page,
body > .edit-page,
body > .apply-page,
body > .sponsor-page,
body > .watch-page,
body > .auth-page,
/*
 * protests.php is the one page with no <main> -- its body holds
 * .pv-hero and .pv-content directly. The content section is the
 * one that should absorb the slack; growing the hero would
 * stretch a banner.
 */
body > .pv-content {
    flex: 1 0 auto;
}

.site-footer {
    /*
     * flex-shrink 0 so the footer keeps its full height when the
     * content above is tall enough to squeeze it.
     */
    flex: 0 0 auto;

    padding: 28px 5vw;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    background: #0b1425;
    color: #7f8ba1;
    font-size: 11px;
}

.site-footer > div:first-child {
    display: flex;
    gap: 14px;
}

.site-footer strong {
    color: #fff;
}

.footer-links {
    display: flex;
    gap: 18px;
}

.footer-links a {
    color: #7f8ba1;
    text-decoration: none;
}

.footer-links a:hover {
    color: #fff;
}

@media (max-width: 1000px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .role-cards {
        grid-template-columns: 1fr;
    }

    .trending-grid {
        grid-template-columns: 1fr;
    }

    .membership-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .site-header {
        padding: 0 18px;
    }

    .president-visual {
        width: 100%;
    }

    .president-visual img {
        height: auto;
        max-height: 280px;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }

    .brand-text small,
    .top-nav > a:not(.btn):not(.profile-link) {
        display: none;
    }

    .top-nav {
        gap: 11px;
    }

    .hero {
        padding: 58px 22px;
    }

    .stat-grid {
        margin-top: -40px;
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 16px 18px;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
    }

    .role-cards {
        grid-template-columns: 1fr;
    }

    .news-strip {
        grid-auto-columns: 86vw;
    }

    .rail-button {
        display: none;
    }

    .site-footer {
        flex-direction: column;
    }
}


.last-comment-text {
    margin-top: 12px;
    padding: 11px 12px;
    border-left: 3px solid #6570ce;
    border-radius: 5px;
    background: rgba(255, 255, 255, .04);
    color: #b9c3d4;
    font-size: 11px;
    line-height: 1.55;
}

.news-comment-count {
    margin-top: 9px;
    color: #7f8da5;
    font-size: 10px;
    font-weight: 600;
}



/* =========================================================
   PROTEST NAVIGATION DROPDOWN
   ========================================================= */

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown-button {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 10px 0;

    border: 0;
    background: transparent;

    color: #d7deeb;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: color 0.2s ease;
}

.nav-dropdown-button:hover,
.nav-dropdown-button.active {
    color: #ffffff;
}

.nav-dropdown-arrow {
    display: inline-block;

    font-size: 10px;

    transition: transform 0.2s ease;
}

.nav-dropdown-button[aria-expanded="true"]
.nav-dropdown-arrow {
    transform: rotate(180deg);
}


/* Dropdown panel */

.nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 14px);
    left: 50%;

    width: 285px;

    padding: 8px;

    border: 1px solid #e1e5eb;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 20px 50px
        rgba(10, 22, 45, 0.20);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, -8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 2000;
}


/* Open state */

.nav-dropdown-menu.open {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 0);
}


/* Dropdown links */

.nav-dropdown-menu a {
    display: grid;

    grid-template-columns:
        38px 1fr;

    align-items: center;

    gap: 12px;

    padding: 13px 12px;

    border-radius: 10px;

    color: #182032 !important;

    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.nav-dropdown-menu a:hover {
    background: #f4f6fb;

    transform:
        translateX(2px);
}


/* Icons */

.nav-dropdown-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #eef0ff;

    color: #333e94;

    font-size: 15px;
}


/* Text */

.nav-dropdown-menu strong {
    display: block;

    margin-bottom: 3px;

    color: #182032;

    font-size: 12px;
    font-weight: 700;
}

.nav-dropdown-menu small {
    display: block;

    color: #8a929f;

    font-size: 9px;
    font-weight: 500;
    line-height: 1.4;
}


/* Small accent line */

.nav-dropdown-menu::before {
    content: "";

    position: absolute;

    top: 0;
    left: 18px;
    right: 18px;

    height: 3px;

    border-radius:
        0 0 4px 4px;

    background: #333e94;
}


/* Mobile */

/*
============================================================
THE HEADER WRAPS ON A PHONE

At 760px the plain nav links already hide, leaving the
ChirpBlack dropdown, Sign In and Register. Those three plus the
wordmark measure 381px against 339px of usable width at 375 --
so the header overflowed by 24px and every page on the site
scrolled sideways on a phone.

Trimming gaps and button padding buys about 25px, which fits a
375px iPhone by a hair and still breaks a 360px Android. So the
nav takes its own row instead. Nothing is hidden: the wordmark
stays, both buttons stay, and the dropdown stays reachable.

The alternative was dropping the wordmark for the bird mark
below 480px, which would keep one row and save 100px. That is a
brand decision rather than a layout one, so it is not taken
here.

min-height goes to 0 because the 74px floor was sized for a
single row and would leave dead space above a wrapped one; the
padding now sets the height.
============================================================
*/
@media (max-width: 480px) {

    .site-header {
        flex-wrap: wrap;
        row-gap: 8px;
        min-height: 0;
        padding: 10px 14px;
    }

    .top-nav {
        width: 100%;
        justify-content: flex-end;
        gap: 9px;
    }

    /* Tighter, and never broken across two lines -- "Sign In"
       wrapping to "Sign / In" makes that button taller than the
       one beside it and the row stops reading as a row. */
    .top-nav .btn-small {
        padding: 0 12px;
        white-space: nowrap;
    }
}

@media (max-width: 850px) {

    .nav-dropdown {
        width: 100%;
        display: block;
    }

    .nav-dropdown-button {
        width: 100%;

        justify-content:
            space-between;
    }

    .nav-dropdown-menu {
        position: static;

        width: 100%;

        margin-top: 5px;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        box-shadow: none;

        border-color:
            rgba(255,255,255,.1);

        background:
            rgba(255,255,255,.05);
    }

    .nav-dropdown-menu.open {
        display: block;

        transform: none;
    }

    .nav-dropdown-menu a {
        color: #ffffff !important;
    }

    .nav-dropdown-menu strong {
        color: #ffffff;
    }

    .nav-dropdown-menu small {
        color: #aeb9ce;
    }

    .nav-dropdown-menu::before {
        display: none;
    }
}

.signin-modal {
    position: fixed;
    inset: 0;

    z-index: 5000;

    display: none;
}


.signin-modal.open {
    display: block;
}


.signin-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(5, 12, 24, 0.72);

    backdrop-filter: blur(4px);
}


.signin-dialog {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(440px, calc(100vw - 36px));

    transform: translate(-50%, -50%);

    padding: 32px;

    border: 1px solid #e0e5ec;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.28);

    z-index: 5001;
}


body.modal-open {
    overflow: hidden;
}
/* Discussion-count badge on each protest name in the dashboard table.
   .protest-title is a column flex container, so align-self keeps the
   pill hugging its own width instead of stretching the full cell. */
.protest-post-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef0ff;
    color: #333e94;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

/* Officer picker in the group management modal (groups/profileGroup.php).
   The popup is absolutely positioned inside .gm-picker, which is why that
   wrapper is relative. */
.gm-picker { position: relative; }
.gm-picker-input { width: 100%; padding: 9px 11px; border: 1px solid #dce1e9; border-radius: 9px; font: inherit; font-size: 13px; }
.gm-picker-input:focus { outline: 0; border-color: #333e94; }
.gm-picker-pop { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); padding: 10px; border: 1px solid #dce1e9; border-radius: 11px; background: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.18); }
.gm-picker-search { width: 100%; padding: 8px 10px; margin-bottom: 8px; border: 1px solid #dce1e9; border-radius: 8px; font: inherit; font-size: 12px; }
.gm-picker-search:focus { outline: 0; border-color: #333e94; }
.gm-picker-list { max-height: 210px; overflow-y: auto; }
.gm-picker-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: #182032; text-align: left; cursor: pointer; }
.gm-picker-item:hover { background: #eef0ff; }
.gm-picker-item img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.gm-picker-empty { margin: 0; padding: 8px; color: #8a929f; font-size: 12px; }
.gm-picked { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 9px 11px; border: 1px solid #dce1e9; border-radius: 10px; background: #fbfcfd; }
.gm-picked img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.gm-picked-name { flex: 1; font-size: 13px; font-weight: 700; color: #182032; }