/* Community sites. Each page sets --cm-primary / --cm-accent (+ the readable text colour on each) inline from the
   community's saved, validated #rrggbb colours; everything below just uses those variables. */

.cm-page {
    --cm-primary: #c8102e;
    --cm-on-primary: #ffffff;
    --cm-accent: #003893;
    --cm-on-accent: #ffffff;
}

.cm-hero {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cm-primary), var(--cm-accent));
    color: var(--cm-on-primary);
    margin-bottom: 1.25rem;
}
.cm-hero-banner {
    height: 190px;
    background-size: cover;
    background-position: center;
}
.cm-hero-nobanner { height: 110px; }
.cm-hero-bar {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 0 1.25rem 1rem;
    margin-top: -46px;
    position: relative;
    flex-wrap: wrap;
}
.cm-logo {
    width: 96px;
    height: 96px;
    border-radius: 1rem;
    background: #fff;
    border: 4px solid #fff;
    object-fit: contain;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.cm-logo-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--cm-primary);
}
.cm-hero-text { flex: 1; min-width: 220px; padding-top: 3rem; }
.cm-hero h1 { font-size: 1.7rem; margin: 0; color: var(--cm-on-primary); text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.cm-hero .cm-tagline { margin: .15rem 0 0; opacity: .95; }
.cm-hero .cm-meta { font-size: .85rem; opacity: .9; margin-top: .35rem; }
.cm-hero .btn-manage { background: rgba(255, 255, 255, .92); color: #222; border: 0; }

/* Community section nav: a burger menu on narrow screens (matches the site header's own
   navbar-toggler pattern - Bootstrap's collapse JS from the footer bundle drives it), a plain
   horizontal tab strip from the md breakpoint up. */
.cm-tabnav { margin: 0 0 1.5rem; }

.cm-tabnav-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .65rem 1rem;
    background: #fff;
    border: 1px solid var(--cm-primary);
    border-radius: .6rem;
    color: var(--cm-primary);
    font-weight: 600;
    cursor: pointer;
}
.cm-tabnav-toggle:hover { background: rgba(0, 0, 0, .03); }
.cm-tabnav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 18px;
    flex-shrink: 0;
}
.cm-tabnav-burger span {
    display: block;
    height: 2px;
    background: var(--cm-primary);
    border-radius: 1px;
    transition: transform .15s ease, opacity .15s ease;
}
.cm-tabnav-toggle[aria-expanded="true"] .cm-tabnav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cm-tabnav-toggle[aria-expanded="true"] .cm-tabnav-burger span:nth-child(2) { opacity: 0; }
.cm-tabnav-toggle[aria-expanded="true"] .cm-tabnav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.cm-tabnav-current {
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cm-tabnav-chevron { flex-shrink: 0; transition: transform .15s ease; }
.cm-tabnav-toggle[aria-expanded="true"] .cm-tabnav-chevron { transform: rotate(180deg); }

.cm-tabs {
    list-style: none;
    padding: .35rem;
    margin: .4rem 0 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}
.cm-tabs li + li { margin-top: 2px; }
.cm-tabs a {
    display: block;
    padding: .6rem .75rem;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    border-radius: .45rem;
}
.cm-tabs a:hover { background: rgba(0, 0, 0, .05); }
.cm-tabs a.active { background: var(--cm-primary); color: var(--cm-on-primary); }

/* md and up: no burger, the tab list is always shown as a horizontal strip */
@media (min-width: 768px) {
    .cm-tabnav-toggle { display: none; }
    .cm-tabs {
        display: flex !important;
        height: auto !important;
        overflow: visible !important;
        gap: .25rem;
        padding: 0;
        margin: 0;
        background: none;
        border: 0;
        border-bottom: 2px solid var(--cm-primary);
        border-radius: 0;
        box-shadow: none;
        white-space: nowrap;
    }
    .cm-tabs li + li { margin-top: 0; }
    .cm-tabs a {
        padding: .6rem 1rem;
        color: var(--cm-primary);
        border-radius: .5rem .5rem 0 0;
    }
}

.cm-page a.cm-link { color: var(--cm-accent); }
.cm-btn { background: var(--cm-primary); color: var(--cm-on-primary); border: 0; }
.cm-btn:hover { background: var(--cm-primary); color: var(--cm-on-primary); filter: brightness(.9); }
.cm-badge { background: var(--cm-accent); color: var(--cm-on-accent); }
.cm-card-accent { border-top: 4px solid var(--cm-accent); }
.cm-date {
    display: inline-block;
    min-width: 62px;
    text-align: center;
    border-radius: .6rem;
    background: var(--cm-primary);
    color: var(--cm-on-primary);
    padding: .35rem .5rem;
    line-height: 1.1;
}
.cm-date strong { display: block; font-size: 1.4rem; }
.cm-date span { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }

.cm-officer-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cm-accent);
    color: var(--cm-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 auto .75rem;
}
.cm-gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: .6rem; }
.cm-prose { line-height: 1.65; overflow-wrap: anywhere; }
.cm-tabbody { transition: opacity .12s ease; }

/* directory */
.cm-dir-logo { width: 56px; height: 56px; border-radius: .75rem; object-fit: contain; background: #fff; border: 1px solid #e5e7eb; }
.cm-dir-initials { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }

/* manage screen */
.cm-manage-nav .nav-link { border-radius: .5rem; }
.cm-swatch { width: 3rem; height: 2.4rem; padding: .15rem; }