/* Default palette: "Navy & gold" (the original look). These are overridden at
   runtime by SiteThemeViewComponent when an admin selects another scheme — see
   Models/ThemePalette.cs for the catalog. Keep this block in sync with the
   navy-gold entry there so the site renders correctly even if the override is
   absent. */
:root {
    --bcc-primary: #1f3a5f;     /* deep navy — 30% brand color */
    --bcc-primary-dark: #16293f;
    --bcc-accent: #c9a227;      /* warm gold — 10% accent */
    --bcc-accent-dark: #b08e1f; /* accent hover */
    --bcc-accent-text: #16293f; /* legible text on the accent */
    --bcc-light: #f6f4ef;       /* 60% neutral background */
    /* Hero overlay: the color comes from the primary-dark RGB channels (themed per
       color scheme); the two alpha stops are the overlay "strength", overridable
       per-page by the admin's Hero setting. */
    --bcc-primary-dark-rgb: 22, 41, 63;
    --bcc-hero-overlay-from-alpha: .6;
    --bcc-hero-overlay-to-alpha: .78;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    /* The palette's 60% neutral. White surfaces (navbar, cards, hero body) sit on
       top of this for a gentle contrast. Changes with the selected color scheme. */
    background-color: var(--bcc-light);
    color: #222;
}

a {
    color: var(--bcc-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Placeholders should read as hints, not real values: lighter grey and italic
   so an empty field is clearly distinguishable from one holding actual text. */
.form-control::placeholder {
    color: #9aa0a6;
    opacity: 1; /* Firefox dims placeholders by default; normalize to our color. */
    font-style: italic;
}

/* ---- Header / nav ---- */
.bcc-navbar {
    background-color: var(--bcc-light);
    border-bottom: 4px solid var(--bcc-accent);
}

.bcc-logo {
    height: 52px;
    width: auto;
    /* The logo is a JPG with a white background (no real transparency). Multiplying
       it against the solid light navbar blends the white into the bar so it reads as
       transparent, while the dark artwork stays dark. */
    mix-blend-mode: multiply;
}

.bcc-navbar .nav-link {
    color: var(--bcc-primary);
    font-weight: 500;
}

.bcc-navbar .nav-link:hover,
.bcc-navbar .nav-link:focus {
    color: var(--bcc-accent);
}

.bcc-navbar .bcc-admin-link {
    color: var(--bcc-accent);
    font-weight: 600;
}

/* ---- Hero ---- */
.bcc-hero {
    position: relative;
    color: #fff;
    background: linear-gradient(
            rgba(var(--bcc-primary-dark-rgb), var(--bcc-hero-overlay-from-alpha)),
            rgba(var(--bcc-primary-dark-rgb), var(--bcc-hero-overlay-to-alpha))
        ), var(--bcc-hero-image, none);
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
}

.bcc-hero h1 {
    font-weight: 700;
}

/* Optional shadow behind the hero text, toggled from the Hero admin tab, to keep
   the white text legible over a light overlay or a bright photo. Layered (a tight
   dark halo plus a soft drop) so it reads even when the overlay is fairly dark. */
.bcc-hero-text-shadow h1,
.bcc-hero-text-shadow p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 3px 10px rgba(0, 0, 0, .65);
}

/* Live hero preview on the admin Hero tab. The inner element is a real .bcc-hero
   rendered at full viewport width and scaled down (via JS) into this frame, so the
   image crop, text, buttons, overlay, and shadow match the home page exactly. */
.hero-preview-frame {
    position: relative;
    overflow: hidden;
    border-radius: .375rem;
}

.hero-preview-frame > .bcc-hero {
    position: absolute;
    top: 0;
    left: 0;
}

/* ---- Buttons ---- */
.btn-bcc {
    background-color: var(--bcc-accent);
    border-color: var(--bcc-accent);
    color: var(--bcc-accent-text);
    font-weight: 600;
}

.btn-bcc:hover {
    background-color: var(--bcc-accent-dark);
    border-color: var(--bcc-accent-dark);
    color: var(--bcc-accent-text);
}

.btn-outline-bcc {
    border-color: #fff;
    color: #fff;
}

.btn-outline-bcc:hover {
    background-color: #fff;
    color: var(--bcc-primary);
}

/* ---- Section helpers ---- */
.section-title {
    color: var(--bcc-primary);
    font-weight: 700;
    border-bottom: 3px solid var(--bcc-accent);
    display: inline-block;
    padding-bottom: .25rem;
    margin-bottom: 1.5rem;
}

/* ---- Gallery ---- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

/* Any lightbox-triggering thumbnail (gallery + home welcome photos) is clickable. */
.photo-thumb {
    cursor: pointer;
}

.gallery-card .photo-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: .5rem;
    transition: transform .15s ease;
}

.gallery-card .photo-thumb:hover {
    transform: scale(1.02);
}

/* ---- Photo lightbox prev/next carets ---- */
.photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    transition: background .15s ease;
}

.photo-nav:hover {
    background: rgba(0, 0, 0, .7);
}

.photo-nav-prev {
    left: .5rem;
}

.photo-nav-next {
    right: .5rem;
}

/* ---- Album grid (gallery landing) ---- */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.album-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}

.album-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    color: inherit;
}

.album-cover {
    height: 200px;
    background: var(--bcc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-cover-empty {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, .85);
    line-height: 1;
}

.album-meta {
    padding: .6rem .75rem .75rem;
}

.album-name {
    font-weight: 600;
}

/* ---- Event list ---- */
.event-date-badge {
    background: var(--bcc-accent);
    color: var(--bcc-accent-text);
    border-radius: .5rem;
    text-align: center;
    padding: .5rem;
    min-width: 64px;
}

.event-date-badge .day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.event-date-badge .month {
    font-size: .75rem;
    text-transform: uppercase;
}

/* Calendar events are clickable (open a details modal); hint that with the cursor. */
.fc-event,
.fc-event .fc-event-main {
    cursor: pointer;
}

/* Uncolored events get a light "default" look with a stripe in the calendar's dark button
   color, so they read as distinct from an event the admin deliberately colored blue.
   Tagged by the feed (see Calendar/Index.cshtml.cs). */
.fc .fc-daygrid-event.bcc-event-plain {
    background-color: var(--bcc-light);
    border-color: var(--fc-button-bg-color);
    border-left: 4px solid var(--fc-button-bg-color);
    color: var(--fc-button-bg-color);
}

.fc .fc-daygrid-event.bcc-event-plain .fc-event-time,
.fc .fc-daygrid-event.bcc-event-plain .fc-event-title {
    color: var(--fc-button-bg-color);
    font-weight: 600;
}

/* In list view, draw the uncolored event's dot as an open (hollow) circle rather than a
   filled disc. The default dot is all border, so give it real size, a thin border, and a
   transparent center; total diameter stays 10px to match the colored dots. */
.fc .fc-list-event.bcc-event-plain .fc-list-event-dot {
    box-sizing: content-box;
    width: 6px;
    height: 6px;
    border-width: 2px;
    border-color: var(--fc-button-bg-color);
    background-color: transparent;
}

/* Thumbnail of an event photo in the Upcoming list. */
.event-thumb {
    display: block;
    max-width: 100%;
    max-height: 120px;
    object-fit: cover;
}

/* Larger preview of an event photo on the admin edit form. */
.event-thumb-lg {
    display: block;
    max-width: 240px;
    max-height: 180px;
    object-fit: cover;
}

/* Color picker swatches on the event form. */
.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.color-swatch {
    cursor: pointer;
    margin: 0;
    line-height: 0;
}

/* Hide the native radio; the dot is the visible, selectable control. */
.color-swatch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.color-swatch-dot {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .15);
    box-sizing: border-box;
}

/* Small color indicator for the admin events list. Base is an open (hollow) circle for an
   uncolored event, matching the calendar list view; colored events fill it via an inline style. */
.bcc-event-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #2c3e50;
    background-color: transparent;
    box-sizing: border-box;
    vertical-align: middle;
    margin-right: .45rem;
}

/* The "Default" (no color) swatch reads as an empty/neutral chip. */
.color-swatch-dot.is-default {
    background:
        linear-gradient(45deg, transparent 45%, #dc3545 45%, #dc3545 55%, transparent 55%),
        #fff;
}

/* Highlight the chosen swatch with a ring. */
.color-swatch input:checked + .color-swatch-dot {
    outline: 2px solid var(--bcc-accent, #0d6efd);
    outline-offset: 2px;
    border-color: #fff;
}

.color-swatch input:focus-visible + .color-swatch-dot {
    outline: 2px solid var(--bcc-accent, #0d6efd);
    outline-offset: 2px;
}

/* Upcoming-events lists (home page + calendar sidebar): cap the height so a long
   run of events scrolls within the panel instead of stretching the whole page.
   The two pages use slightly different caps to suit their layouts. */
.bcc-upcoming-list {
    overflow-y: auto;
}

.bcc-upcoming-list--home {
    max-height: 15.75rem;
}

.bcc-upcoming-list--calendar {
    max-height: 35.2rem;
}

/* Calendar's Upcoming entries open the event-details modal; hint that with the cursor. */
.bcc-upcoming-list--calendar .js-upcoming-item {
    cursor: pointer;
}

/* ---- Footer ---- */
.bcc-footer {
    background-color: var(--bcc-primary-dark);
    color: rgba(255,255,255,.8);
}

.bcc-footer a {
    color: var(--bcc-accent);
    text-decoration: none;
}

.bcc-footer a:hover {
    text-decoration: underline;
}

/* About/Privacy/sign-in links match the muted copyright text, not the accent */
.bcc-footer-meta a {
    color: inherit;
}

/* Photo attached to a forum/announcement post (img-fluid caps width to 100%) */
.bcc-post-photo {
    max-height: 480px;
    width: auto;
}

/* Rich-text page content (About, Privacy) rendered from the editor */
.bcc-rich-content h2 {
    font-size: 1.5rem;
    margin-top: 1.75rem;
}

.bcc-rich-content h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
}

/* Footer social/brand links */
.bcc-footer-links {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .9rem;
}

.bcc-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* Monochrome icons matching the copyright text — best practice on a dark bg */
    color: inherit;
}

.bcc-footer-links a:hover {
    text-decoration: none;
    opacity: .8;
}

.bcc-social-icon {
    width: 2rem;
    height: 2rem;
    display: block;
}

/* Musical Staff page: role bar with photo floated and bio flowing around it */
.staff-member {
    margin-bottom: 2.5rem;
}

.staff-role {
    background: var(--bcc-primary);
    color: #fff;
    font-weight: 700;
    padding: .4rem .9rem;
    border: 1px solid var(--bcc-primary-dark);
}

.staff-body {
    padding-top: 1rem;
}

/* Clearfix so the next member's role bar starts below a tall photo */
.staff-body::after {
    content: "";
    display: table;
    clear: both;
}

.staff-photo {
    float: left;
    width: 190px;
    max-width: 42%;
    margin: .25rem 1.25rem .5rem 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

@media (max-width: 575.98px) {
    .staff-photo {
        float: none;
        display: block;
        width: 65%;
        margin: .5rem auto 1rem;
    }
}

/* Drag-and-drop file upload zone (progressive enhancement over <input type=file>) */
.bcc-dropzone {
    position: relative;
    border: 2px dashed #b9c2cc;
    border-radius: 8px;
    background: #fafbfc;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.bcc-dropzone:hover {
    border-color: var(--bcc-primary);
}

.bcc-dropzone.dragover {
    border-color: var(--bcc-primary);
    background: #eef3f8;
}

/* Native input kept in the DOM (so the form still posts it) but visually hidden */
.bcc-dropzone-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.bcc-dropzone-prompt {
    color: #6c757d;
}

.bcc-dropzone-icon {
    font-size: 1.15rem;
}

.bcc-dropzone-browse {
    color: var(--bcc-primary);
    text-decoration: underline;
}

.bcc-dropzone-preview {
    display: none;
    max-width: 160px;
    max-height: 160px;
    margin: 0 auto .6rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.bcc-dropzone-filename {
    font-size: .85rem;
    color: #495057;
    margin-top: .4rem;
    word-break: break-all;
}

/* FullCalendar renders day numbers and weekday headers as links — don't underline them */
.fc a,
.fc a:hover {
    text-decoration: none;
}

/* Drag-to-reorder (gallery table rows + staff list items) */
#gallery-rows tr.dragging,
#staff-rows .list-group-item.dragging {
    opacity: .5;
    background: #eef3f8;
}

.gallery-grip,
.drag-grip {
    width: 1.5rem;
    text-align: center;
    letter-spacing: -2px;
    user-select: none;
}

/* Handle-based drag — only the grip starts a drag, so rows stay clickable
   and any text in them stays selectable. */
.gallery-grip,
.drag-grip {
    cursor: grab;
}

#photo-rows .list-group-item.dragging,
#link-rows .js-link-form.dragging {
    opacity: .5;
    background: #eef3f8;
}