/*! ==========================================================================
   updates.css — Layout overrides and component styles for the Gratitude Wall.
   This file loads AFTER the inline PHP theme-option styles, so rules here
   (especially with !important) take final precedence.
   Load order:  style.css  ▸  defaults.css  ▸  inline <style>  ▸  updates.css
   ========================================================================== */


/* ==================================================================
   1. DESKTOP NAV BUTTONS (Gratitude Wall / Staff Directory / etc.)
   ================================================================== */
div#desktopButtons, div#desktopButtons .row {
    display: table; width:100%;
}

div#desktopButtons .row .col-3 {
    vertical-align: middle;
    height: 100%;
    min-height: 100%!important;
    display: table-cell;
    float: none;
    width:25%;
}

div#desktopButtons.two-count .row .col-3 {
    width: 20%;
    max-width: 20%;
}
div#desktopButtons.zero-count .row .col-3 {
    width: 50%;
    max-width: 50%;
}


/* ==================================================================
   2. REPORT / FLAG BUTTON
   ================================================================== */
.report-wrap {
    color: #fff;
    bottom: 10px;
    left: 20px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 1px 1px 5px #000;
}

.report-wrap i { display: inline-block; }

/* Lightbox-specific report button */
.report-wrap.bp-report {
    display: none;
}

#bp_container > img:hover + div.bp-report, #bp_container div.bp-report:hover {
    display: block;
    top: 17%;
    left: 90%;
}


/* ==================================================================
   3. GIPHY INTEGRATION
   ================================================================== */
.basicLightbox #bp_container div#librarySelection img, div#giphySelection img {
    margin-bottom: 5%!important;
}

#bp_caption img.giphy-attribution {
    width: 125px!important;
    height: 16px!important;
    right: 9px;
    bottom: 100px;
    opacity: 100%;
    position: absolute;
    z-index: 9999;
}

img.giphy-attribution-lg {
    width: 200px!important;
    right: 9px;
    display: block;
    padding-top: 3%;
}

form#giphyForm input#query { width:100%; max-width:300px; padding: 10px 20px; margin-right:0.5rem; }

@media only screen and (max-width:767px){
    #bp_caption img.giphy-attribution {
        bottom: 0px!important;
    }
    form#giphyForm input#query { max-width:270px; }
}


/* ==================================================================
   4. TIPPING / DONATION PER-POST
   ================================================================== */
.tipping-wrap {
    transform: scale(0.75);
    left: 4px;
    top: 180px;
    z-index:9999;
}

.tipping-wrap button.btn {
    padding: 8px 10px;
}

.card.rounded.overflow-hidden:hover .report-wrap,
.card.rounded.overflow-hidden:hover .tipping-wrap { display:block!important; }
.card.rounded.overflow-hidden .tipping-wrap { border-radius: 4px; }
.card.rounded.overflow-hidden .tipping-wrap:hover { background-color:#fff; }


/* ==================================================================
   5. LIGHTBOX — Desktop & Mobile
   ================================================================== */

/* --- 5a. Desktop (≥992px) --- */
@media only screen and (min-width:992px){
    body.caption-open { overflow:hidden; }

    div#bp_caption { pointer-events: all; overflow:auto; max-height: 100%; }

    #bp_container>.bp-x {
        right: 20px!important;
        top: 20px!important;
        margin-right: 20px;
        z-index: 99;
    }

    .a2a_kit.a2a_kit_size_32.a2a_default_style {
        position: absolute!important;
        z-index: 99999!important;
        width: 36px!important;
        top: 76px!important;
        right: 42px!important;
    }

    .a2a_kit.a2a_kit_size_32.a2a_default_style > a {
        margin-bottom: 15px;
    }
}

/* --- 5b. Mobile (≤991px) --- */
@media only screen and (max-width:991px){
    div#bp_caption {
        max-height: 100%;
        pointer-events: all;
        overflow: auto;
    }

    .a2a_kit.a2a_kit_size_32.a2a_default_style {
        display:none;
    }
}

#bp_container>.bp-x { z-index:999; }


/* ==================================================================
   6. FAQ PLUGIN (Ultimate FAQs)
   ================================================================== */
div.ufaq-faq-title div.ewd-ufaq-post-margin-symbol span,
a.ufaq-back-to-top-link,
span.ewd-ufaq-expand-all,
div.ufaq-faq-title div.ewd-ufaq-post-margin-symbol {
    display: none;
}

.ewd-ufaq-post-margin.ufaq-faq-post {
    padding-left: 5px;
}
.ufaq-faq-body { padding:0; }

div.ufaq-faq-div {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

div.ufaq-faq-title h4 {
    font-size: 1.25em!important;
}

.ewd-ufaq-post-margin-symbol {
    position: absolute;
    top: -100px;
}

div.ufaq-faq-title h4 { color:#217947; }


/* ==================================================================
   7. HEADER / NAVIGATION OVERRIDES
   ================================================================== */
header#gratitude-header nav.navbar-dark.bg-dark.shadow-sm.p-2 a#searchBtn,
#donateBtnWrap #donateButton {
    color: #fff!important;
}

#userNameHead {
    color: #3f403f;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 1em;
    position: relative;
    top: -9px;
    right: -5px;
    margin-left: 20px;
}

#donateBtnWrap { padding:0 15px; }

/* --- 7a. Header responsive --- */
@media only screen and (max-width:1097px){
    #donationMeterWrap { display: none!important; }
}

@media only screen and (max-width:991px){
    #donateBtnWrap { transform:scale(0.75); }
    div#orgNameWrapper { transform:scale(0.85); }
    #gratitude-header > nav > div.container-fluid.d-flex { align-items: center; }
    #userNameHead { position:initial; }
}

@media only screen and (max-width:637px){
    #donateBtnWrap { padding: 0 0; margin-right:-25px; }
    div#orgNameWrapper { margin-left:-30px; transform: scale(0.75); }
    div.nav-right { margin-left:-15px; }
    div.user-menu { margin-left:5px; }
    div.nav-left > div { margin-right:-10px; }
}


/* ==================================================================
   8. GRATITUDE SUBMISSION FORM
   ================================================================== */
form.form-signin.mt-4.container {
    margin: 0 auto;
    padding: 30px;
    background: #eee;
    width: 100%;
    margin-top: 0!important;
    max-width: 100%;
}

form.form-signin.mt-4.container > div.row {
    max-width: 1140px;
    margin: 0 auto;
}

.btn-group legend {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* --- 8a. Grid / Feed toggle --- */
div#toggleContainer {
    padding:9px;
    margin: 10px auto;
    background: #eee;
    border-radius: 0 0 50px 50px;
    width: auto;
    top: -45px;
    position: relative;
    z-index: 0;
    transform: scale(0.65);
    border-top: 2px solid #ccc;
}

/* --- 8b. Mini icon containers --- */
div#miniIconsContainer .col-sm-4.col-md-3.col-xl-2 {
    width: auto;
    display: block;
    flex: 1 1 0%;
    max-width: 100%;
    padding: 0;
    border-radius: 0!important;
    margin-bottom: 0!important;
}

div#miniIconsContainer .col-sm-4.col-md-3.col-xl-2 > * > *,
.justify-content-md-center.align-items-md-center,
.justify-content-md-center.align-items-md-center > a.mini-pview-btn {
    border: none!important;
    border-radius: 0!important;
    width: 100%;
    left: auto;
    margin-left: 0!important;
}

.justify-content-md-center.align-items-md-center > a.mini-pview-btn {
    box-shadow: 0 -10px 50px rgba(0,0,0,0.25);
    border-left:1px dotted rgba(255,255,255,0.15)!important;
}

/* --- 8b2. Dividers between icon buttons --- */
div#miniIconsContainer .col-sm-4.col-md-3.col-xl-2 + .col-sm-4.col-md-3.col-xl-2 {
    border-left: none;
}
div#miniIconsContainer .col-sm-4.col-md-3.col-xl-2 + .col-sm-4.col-md-3.col-xl-2 .icon-wrapper {
    border-left: none!important;
    box-shadow: -1px 0 0 0 rgba(255,255,255,0.15);
}

/* --- 8b3. Different background on button text labels --- */
div#miniIconsContainer .icon-wrapper span,
form.form-signin.mt-4.container .icon-wrapper span {
    background-color: rgba(255,255,255,0.06)!important;
    border: none!important;
    margin-top: 0!important;
    padding-top: 4px;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.06);
}

/* --- 8c. Form icon wrappers --- */
form.form-signin.mt-4.container .icon-wrapper span {
    border: none!important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
}

form.form-signin.mt-4.container .form-group.col-6.offset-1.h-100 {
    margin-left: 0;
    margin: 0;
}

form.form-signin.mt-4.container > .row {
    border-radius: 100px;
    background-color: #f9f9f9;
    overflow: hidden;
}

form.form-signin.mt-4.container textarea#personalMessage {
    padding:29px 10px 10px 40px;
    margin: 0 -30px;
    position: absolute;
    left: 31px;
    right: 0;
    border: none;
    background: none;
    background-color: transparent;
    outline: none;
    box-shadow: none;
}

div#miniIconsContainer, .justify-content-md-center.align-items-md-center {
    width: 50%;
    position: relative;
    float: left;
    margin: 0!important;
    height: 100%;
}

a.mini-pview-btn {
    z-index:0;
    height: 100%;
    margin-left: -20px!important;
    position: relative;
    right:0;
    left:0!important;
    width: calc(100% + 15px)!important;
    display: flex;
    align-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.form-group.col > div {
    right: 0;
    display: block;
    position: relative;
}

form.form-signin.mt-4.container .form-group.col > * {
    font-size: 24px;
}

label.btn.btn-link.form-check-label {
    background: none;
    background-color: transparent!important;
    color: #333!important;
    border: none;
    text-align: left;
    border-left: 3px solid #333;
    margin-bottom: 15px;
}

form.form-signin.mt-4.container > div.row {
    max-width: 1140px;
    transform: scale(0.8);
    margin: -18px auto -16px auto;
}


/* ==================================================================
   9. GRATITUDE CARD NAME LABEL (h6 overlay)
   ================================================================== */
h6.text-uppercase.text-center.mt-1,
h6.text-uppercase.text-center.mt-1 > * {
    text-align: left!important;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding: 16px 0;
    font-size: 130%;
}

.gratitude-lightbox-wrapper h6.text-uppercase.text-center.mt-1 small {
    width:90%;
}

.gratitude-lightbox-wrapper h6.text-uppercase.text-center.mt-1 small span.caption-toggle {
    font-size: 70%!important;
    margin-top:-20px;
    padding-bottom:2.5rem;
}

h6.text-uppercase.text-center.mt-1 span {
    font-size: 0.9rem!important;
    display: block;
    margin-bottom: -30px!important;
}

@media only screen and (max-width:991px){
    .gratitude-lightbox-wrapper h6.text-uppercase.text-center.mt-1 small span.caption-toggle { padding-bottom:2.5rem; }
}


/* ==================================================================
   10. GRATITUDE WALL / STAFF DIRECTORY GRID LAYOUT
   ================================================================== */
div#gratitudeContainer, div#staff-directory {
    display:grid;
    grid-template-columns: 1fr 3fr 1fr!important;
    max-width: 1480px!important;
    padding: 25px 0!important;
    margin:auto;
}

div#leftSidebar { width:82%!important; }

form#filter {
    margin-top: -30px;
}

/* --- 10a. Feed-view card dimensions --- */
.feed .gratitude-lightbox-image-wrapper,
.feed .gratitude-lightbox-wrapper .card,
.feed .staffPhotoWrapper {
    min-height: 570px!important;
    border-radius: 0!important;
}

.feed .staff-headshot {
    min-height: 95%;
}

.feed h6.text-uppercase.text-center.mt-1 {
    left: 0!important;
    right: 0;
    top: -5px;
    position: relative!important;
}

/* --- 10b. Grid-view card overrides --- */
.gratitude-lightbox-wrapper .card.rounded.overflow-hidden {
    border-radius: 0.5rem 0.5rem 0 0!important;
    border: none;
    box-shadow: none;
    outline: none;
}

.grid .gratitude-lightbox-wrapper h6.text-uppercase.text-center.mt-1 small {
    font-size: 0.8rem!important;
    padding: 0;
    margin: 0 auto;
    float: none;
    display: block;
}

.grid h6.text-uppercase.text-center.mt-1 span {
    font-size: 0.7rem!important;
}

.col-sm-6.col-md-4.gratitude-lightbox-wrapper.rounded.mb-4.grid-toggle.col-lg-3,
.col-sm-6.col-md-4.gratitude-lightbox-wrapper.rounded.mb-4.grid-toggle.col-lg-3 > a {
    border-radius: 20px!important;
    overflow: hidden!important;
}

/* --- 10c. Banner visibility in feed/grid --- */
.feed main .banner-heading.row.py-3,
main .banner-heading.row.py-3 {
    display:none;
}

.grid main .banner-heading.row.py-3 {
    display:none;
}

/* --- 10d. Grid / sidebar responsive --- */
@media only screen and (max-width:767px){
    .feed .gratitude-lightbox-image-wrapper,
    .feed .gratitude-lightbox-wrapper .card,
    .feed .staffPhotoWrapper { min-height: 320px!important; }
}

@media only screen and (max-width:860px){
    div#desktopButtons, div#desktopButtons .row { display: none!important; }
}

@media only screen and (max-width:991px){
    div#leftSidebar { display:none!important; }
    div#rightSidebar { display:none!important; }
    div#gratitudeContainer { display: grid; grid-template-columns: 1fr!important; }
}


/* ==================================================================
   11. MINI GRATITUDE SUBMISSION BAR
   ================================================================== */
div#miniGratSubmission { margin-top:-1px; position:fixed; z-index:10000; }
div#gratitudeContainer { padding-top:131px!important; }

div#iconsContainer div.icon-wrapper i {
    font-size: 1.75em!important;
}

@media only screen and (max-width:991px){
    div#miniGratSubmission {
        transition: all 0.3s ease 0.1s;
        position: sticky;
        top: 11px;
    }
    div#gratitudeContainer { padding-top:10px!important; }
    form.form-signin.mt-4.container { padding-left:0; padding-right:0; }
    form.form-signin.mt-4.container > div.row { transform: scale(0.9); }
    form.form-signin.mt-4.container textarea#personalMessage { padding: 32px 0px 10px 20px; font-size: 0.7rem; }
}


/* ==================================================================
   12. MEDIA CAPTURE (Camera / Audio / Video / Upload)
   ================================================================== */
.hide {
    display: none!important;
}

#captureMedia {
    display: block;
    position: fixed;
    z-index: 2;
    left: 5%;
    top: 5%;
    width: 95%;
    min-height: 100%;
    overflow: auto;
    background-color: black;
    margin-left: 0!important;
}

#stop-camera {
    position: absolute;
    top: 50px;
    right: 100px;
}

button#uploadVideo, button#captureVideo, button#uploadAudio, button#captureAudio {
    color: #fff;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    width: 50%;
    height: 50%;
    margin: 2%;
}

#media-player {
    color: #fff;
    display: block;
    flex-direction: column;
    position: relative;
    align-items: center;
    width: 95%;
    margin:auto;
}
#media-player video, #media-player audio, #media-player img, #media-player canvas { max-width: 100%; height:auto; max-height: 100%; width: auto; }

#main-buttons {
    color: #fff;
    min-height: 75px;
    width: 100%;
    padding: 2%;
    display: flex;
    justify-content: space-around;
    position:relative;
    border: none;
}
#main-buttons .btn, #main-buttons button { border:none; background-color:#333; }

canvas {
    position:absolute; left:0;
}

button#start-record, button#stop-record, button#capture-image {
    position: absolute;
    padding: 2%;
    color: #fff;
    border-radius: 5%;
}

#after-btns {
    color: #fff;
    display: flex;
    position: relative;
    min-height: 55px;
    padding: 2% 5%;
    justify-content: center;
    border: none;
    background-color:transparent;
    margin-bottom: 20px;
}
#after-btns .btn, #after-btns button { border:none; background-color:#333; }

button#redo-media, button#confirm-media {
    position: relative;
    padding: 2% 4%;
    color: #fff;
    border-radius: 5%;
    margin: 0 2%;
}

div#captureImage, div#uploadImage,
div#captureVideo, div#uploadVideo,
div#captureAudio, div#uploadAudio,
div#captureMedia,
button#captureVideo, button#uploadVideo,
button#captureMedia,
button#uploadAudio, button#captureAudio {
    width: 400px;
    max-width: 100%;
    margin: 30px auto;
    line-height: 16px;
    padding:15px 5px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.15rem;
    height: auto;
}

/* Responsive override */
div#captureMedia {
    background-color: transparent;
    width: auto;
    height: auto;
    max-width: 100%;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}


/* ==================================================================
   13. RECORD BUTTON PULSE ANIMATION
   ================================================================== */
#pulseBtnContainer {
    width: 100%;
    height: 100%;
    margin: 20px auto 40px;
    text-align: center;
    display:flex;
    float: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}

#pulseBtnContainer > div {
    cursor: pointer;
    padding: 5% 0;
    display: block;
    width: 150px;
    height: 150px;
    font-size: 0.8em;
    font-family: 'Trebuchet MS', sans-serif;
    text-transform: uppercase;
    text-align: center;
    line-height: 100px;
    color: white;
    border: none;
    border-radius: 50%;
    background: #dc3545;
    box-shadow: 0 0 0 0 rgb(90 153 212 / 50%);
}
#pulseBtnContainer > div i { font-size:1.7em; }

#audioTimer {
    padding: 5%;
    top: 50%;
    position: absolute;
    z-index: 99999;
    left: 0;
    width: 100%;
    font-size: 0.8em;
}

.pulse {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0px #ff7c4185;
    }
    100% {
        box-shadow: 0 0 0 20px #ff7c4136;
    }
}

/* ============================================================
   14. GW APP SHELL OVERRIDES
   Scoped under body.gw-app-shell to neutralize old layout rules
   when the new app shell is active. Added in Phase 1.
   ============================================================ */
body.gw-app-shell div#gratitudeContainer,
body.gw-app-shell div#staff-directory {
    display: block !important;
    grid-template-columns: none !important;
    padding-top: 0 !important;
    max-width: none !important;
}

body.gw-app-shell #miniGratSubmission {
    position: relative !important;
    z-index: auto !important;
}

body.gw-app-shell #gratitudeContainer > #leftSidebar,
body.gw-app-shell #gratitudeContainer > #rightSidebar,
body.gw-app-shell #gratitude-header,
body.gw-app-shell #mainFooter,
body.gw-app-shell #mobile-menu,
body.gw-app-shell .jumbotron,
body.gw-app-shell .banner-heading {
    display: none !important;
}

body.gw-app-shell #feedContainer {
    max-width: 100% !important;
}

@media (max-width: 991px) {
    body.gw-app-shell #mobile-menu {
        display: none !important;
    }
    body.gw-app-shell main {
        margin-top: 0 !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
   11. DIRECTORY + PER-TERM ARCHIVE CARD SIZING
   The .feed body class is set globally based on the gwViewMode cookie
   (see header.php), which causes the 570px tall feed cards from
   section 10a to leak onto per-term taxonomy archives and directory
   landing pages. Those pages need smaller thumbnail-style cards
   instead. Selectors here are more specific than '.feed X' so they
   win even though both rules use !important.
   ────────────────────────────────────────────────────────────────── */
body.archive .gratitude-lightbox-image-wrapper,
body.archive .gratitude-lightbox-wrapper .card,
body.archive .staffPhotoWrapper,
body.archive .staff-headshot,
body[class*="-directory"] .staffPhotoWrapper,
body[class*="-directory"] .staff-headshot,
body[class*="-directory"] .gratitude-lightbox-image-wrapper,
body[class*="-directory"] .gratitude-lightbox-wrapper .card {
    min-height: 0 !important;
}