/* ============================================================
   balboa.birthdaywall.css
   Styles the Bobapalooza birthday wall page + presentation view.
   Loaded via REQUEST.pageCSS on birthday-wall (/birthday/).
   Brand: gold accent #f0c040 (matches the modal), brand green #0f4717.
============================================================ */

/* ---- Header ---- */
.bwall-header {
    text-align: center;
    padding: 10px 0 26px;
}
.bwall-photo {
    width: 130px; height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #f0c040;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    margin-bottom: 14px;
}
.bwall-photo-fallback {
    width: 130px; height: 130px;
    border-radius: 50%;
    background: #fff9e6;
    border: 5px solid #f0c040;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    margin-bottom: 14px;
}
.bwall-photo-fallback .fa { font-size: 64px; color: #f0c040; }
.bwall-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    margin: 0 0 6px;
}
.bwall-tagline {
    color: #999;
    max-width: 640px;
    margin: 0 auto 12px;
}
.bwall-stats {
    display: inline-block;
    background: #fff9e6;
    border: 1px solid #f0c040;
    border-radius: 20px;
    padding: 5px 16px;
    font-weight: 600;
    color: #8a6d1a;
}

/* ---- Your-message panel ---- */
.bwall-mine {
    background: #f7fbf7;
    border: 1px solid #cfe6cf;
    border-radius: 8px;
    padding: 16px 18px;
    margin: 0 auto 28px;
    max-width: 760px;
}
.bwall-mine h4 { margin-top: 0; }
.bwall-mine .bwall-mine-body {
    white-space: pre-wrap;
    color: #333;
    margin: 8px 0 12px;
}
.bwall-edit-wrap { display: none; margin-top: 10px; }
.bwall-edit-wrap textarea { resize: vertical; }
.bwall-edit-count { text-align: right; color: #999; font-size: 12px; }

/* ---- Wall grid (CSS columns -> simple masonry) ---- */
.bwall-grid {
    column-gap: 18px;
    column-count: 1;
	margin-bottom: 20px;
}
@media (min-width: 600px)  { .bwall-grid { column-count: 2; } }
@media (min-width: 992px)  { .bwall-grid { column-count: 3; } }
@media (min-width: 1400px) { .bwall-grid { column-count: 4; } }

.bwall-card, .bwall-login {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.bwall-card.featured {
    border-color: #f0c040;
    box-shadow: 0 2px 10px rgba(240,192,64,0.35);
}
.bwall-card.hidden {
    opacity: 0.55;
    border-style: dashed;
    background: #fafafa;
}
.bwall-card-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.bwall-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.bwall-avatar-fallback {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #eee;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.bwall-avatar-fallback .fa { color: #bbb; }
.bwall-signer { font-weight: 600; line-height: 1.2; }
.bwall-date { color: #999; font-size: 12px; }
.bwall-body { color: #333; white-space: pre-wrap; word-wrap: break-word; }
.bwall-pin {
    color: #d9a300; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
}

/* ---- Moderation bar (superadmin) ---- */
.bwall-mod {
    border-top: 1px dashed #ddd;
    margin-top: 12px; padding-top: 10px;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.bwall-mod .label-hidden { background: #777; }

/* ---- Empty / hidden-from-recipient states ---- */
.bwall-empty, .bwall-blocked {
    text-align: center; padding: 50px 20px; color: #777;
    max-width: 600px; margin: 0 auto;
}
.bwall-blocked .fa { font-size: 56px; color: #f0c040; margin-bottom: 16px; }

/* ---- Guest inline login (the QR / not-logged-in landing) ----
   .bwall-login already inherits the card chrome (white bg, border, radius,
   shadow) from the grouped rule above. These rules center it as a standalone
   card and match the polish of the event-page login. */
.bwall-login {
    max-width: 460px;
    margin: 48px auto 64px;
    padding: 6px 26px 22px;
}
/* The shared _inc_inline_login.cfm wraps its form in an inline-styled div
   (max-width:440px; margin:30px auto; padding:20px 0). Those inline styles win
   over the stylesheet, so !important is required to let the card own the
   spacing and keep the form flush inside it. */
.bwall-login > div {
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
}

/* Present-mode (QR) guest login: navbar is hidden, so kill the global
   navbar-offset gap the same way .bwall-present does. */
body:has(.bwall-login-present) { padding-top: 0 !important; }


/* ============================================================
   Presentation / kiosk mode (.bwall-present, navbar hidden)
============================================================ */
/* ARCH: navbar is suppressed in present mode (showNavbar=false), so the global
   body navbar-offset (padding-top ~80px) leaves a gap above the dark canvas.
   Target the body that CONTAINS the present wrapper and zero it. :has() is
   supported in current Chrome/Edge/Safari (the presentation browser). */
body:has(.bwall-present) { padding-top: 0 !important; }
.bwall-present { min-height: 100vh; background: #333638; padding: 24px 18px; }
.bwall-present .bwall-title { color: #fff; }
.bwall-present .bwall-tagline { color: #cfcfcf; }
.bwall-present .bwall-photo,
.bwall-present .bwall-photo-fallback { width: 150px; height: 150px; }
.bwall-present .bwall-card {
    font-size: 18px;
    padding: 22px 26px;
}
.bwall-present .bwall-grid { column-count: 1; column-gap: 24px; }
@media (min-width: 720px) { .bwall-present .bwall-grid { column-count: 2; } }
@media (min-width: 1400px) { .bwall-present .bwall-grid { column-count: 3; } }
.bwall-present .bwall-card.hidden { display: none; }