/* ======================================================
   APP HOME — widget feed
====================================================== */

.home-widgets {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 20px;
}

/* ======================================================
   VERSE OF THE DAY
====================================================== */

.votd-card {
    border-radius: var(--radius-lg, 20px);
    padding: 44px 32px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.10));
    transition: background .4s ease;
}

.votd-bg-1 { background: linear-gradient(135deg, #0F1218 0%, #2A1008 55%, #E8A020 145%); }
.votd-bg-2 { background: linear-gradient(135deg, #0F1218 0%, #1A2A4A 55%, #1A4A8A 145%); }
.votd-bg-3 { background: linear-gradient(135deg, #0F1218 0%, #3A1414 55%, #C93030 145%); }
.votd-bg-4 { background: linear-gradient(135deg, #0F1218 0%, #163A22 55%, #1E7A3C 145%); }
.votd-bg-5 { background: linear-gradient(135deg, #1A4A8A 0%, #0F1218 60%, #E8A020 145%); }
.votd-bg-6 { background: linear-gradient(135deg, #E8A020 0%, #7A1E1E 55%, #0F1218 130%); }

/* Photo background mode (preset or user-uploaded) — the actual
   photo is applied as an inline background-image style by votd.js;
   this just adds a dark overlay so the white verse text stays
   readable over an arbitrary photo. Content needs position:relative
   + z-index to paint above the overlay pseudo-element, which is why
   .votd-eyebrow/.votd-text/.votd-ref/.votd-actions get it below,
   unconditionally (harmless — doesn't affect normal-flow position). */
.votd-card.votd-bg-photo::before,
.votd-share-template.votd-bg-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,18,24,.55), rgba(15,18,24,.78));
    z-index: 0;
}

.votd-eyebrow {
    position: relative;
    z-index: 1;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-gold, #E8A020);
    margin-bottom: 4px;
}

.votd-date {
    position: relative;
    z-index: 1;
    font-size: .72rem;
    color: rgba(255,255,255,.65);
    margin-bottom: 16px;
}

.votd-text {
    position: relative;
    z-index: 1;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.1rem, 2.4vw, 1.55rem);
    line-height: 1.65;
    max-width: 680px;
    margin: 0 auto 18px;
}

.votd-text .embedded-paragraph {
    margin: 6px auto;
}

.votd-text .small-caps {
    font-variant: small-caps;
}

.votd-ref {
    position: relative;
    z-index: 1;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--brand-gold, #E8A020);
    margin-bottom: 28px;
}

.votd-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.votd-action-btn {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}

.votd-action-btn:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
}

.votd-action-btn.active {
    background: var(--brand-gold, #E8A020);
    color: var(--brand-dark, #0F1218);
    border-color: var(--brand-gold, #E8A020);
}

.votd-comments {
    margin-top: -6px;
    background: #fff;
    border: 1px solid #EDE7D9;
    border-top: none;
    border-radius: 0 0 var(--radius-lg, 20px) var(--radius-lg, 20px);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.08));
}

.votd-comment-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.votd-comment {
    font-size: .9rem;
}

.votd-comment strong {
    margin-right: 6px;
    color: var(--brand-blue, #1A4A8A);
}

.votd-comment-form {
    display: flex;
    gap: 8px;
}

.votd-comment-form input {
    flex: 1;
    border: 1px solid var(--border, #E4DDD0);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: .88rem;
}

body.dark-mode .votd-comments {
    background: #1d1f23;
    border-color: #2c2f33;
    color: #e4e4e4;
}

body.dark-mode .votd-comment-form input {
    background: #2a2d31;
    border-color: #3a3d41;
    color: #e4e4e4;
}

/* ======================================================
   VERSE OF THE DAY — hidden fixed-size share image template
   1080x1350 (4:5 portrait) — a proper mobile/social-media
   aspect ratio, independent of the responsive on-screen
   card's actual width.

   Positioned off-screen (not display:none, which html2canvas
   can't capture). A previous version of this used position:fixed;
   top:0;left:0 pinned to the viewport corner with z-index:-1 to
   hide it via stacking order instead — that leaked this element's
   background (1080x1350px, viewport-pinned so it stayed put while
   scrolling) through as the whole page's background once a photo
   was applied. This element only ever needs to affect the VOTD
   share image, never the page itself, so a large negative offset
   — genuinely outside the visible area regardless of any stacking
   quirks — is the safer choice here.
====================================================== */

.votd-share-template {
    position: absolute;
    top: 0;
    left: -9999px;
    pointer-events: none;
    width: 1080px;
    height: 1350px;
    box-sizing: border-box;
    padding: 110px 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
}

.votd-share-template-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.votd-share-template-eyebrow {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--brand-gold, #E8A020);
    margin-bottom: 14px;
}

.votd-share-template-date {
    font-size: 24px;
    color: rgba(255,255,255,.65);
    margin-bottom: 64px;
}

.votd-share-template-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 56px;
    line-height: 1.55;
    margin: 0 0 56px;
}

.votd-share-template-text .embedded-paragraph {
    margin: 20px auto;
}

.votd-share-template-text .small-caps {
    font-variant: small-caps;
}

.votd-share-template-ref {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--brand-gold, #E8A020);
    margin: 0;
}

.votd-share-template-brand {
    position: absolute;
    z-index: 1;
    bottom: 70px;
    left: 0;
    right: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 2px;
    color: rgba(255,255,255,.55);
}

/* ======================================================
   VERSE OF THE DAY — share-as-image fallback panel
====================================================== */

.votd-share-panel {
    margin-top: 16px;
    background: #fff;
    border: 1px solid #EDE7D9;
    border-radius: var(--radius-lg, 20px);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.08));
}

.votd-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 14px;
}

.votd-share-preview {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.votd-share-preview img {
    max-width: 100%;
    max-height: 320px;
    border-radius: 12px;
    box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.10));
}

.votd-share-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.votd-share-platforms {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.votd-platform-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sidebar-bg, #FEFCF8);
    border: 1px solid #EDE7D9;
    color: var(--text, #1C1C1E);
    font-size: 1.1rem;
    transition: all .2s;
}

.votd-platform-btn:hover {
    border-color: var(--brand-gold, #E8A020);
    color: var(--brand-gold, #E8A020);
    transform: translateY(-2px);
}

.votd-share-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: #1E7A3C;
    background: rgba(30,122,60,.10);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    text-align: center;
}

.votd-share-note {
    font-size: .78rem;
    color: var(--text-muted, #6B6B6B);
    text-align: center;
    margin: 0;
}

body.dark-mode .votd-share-panel {
    background: #1d1f23;
    border-color: #2c2f33;
    color: #e4e4e4;
}

body.dark-mode .votd-platform-btn {
    background: #2a2d31;
    border-color: #3a3d41;
    color: #e4e4e4;
}

/* ======================================================
   VERSE OF THE DAY — background picker panel
====================================================== */

.votd-bg-swatches {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.votd-bg-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}

.votd-bg-swatch:hover,
.votd-bg-swatch.active {
    transform: scale(1.12);
    border-color: var(--brand-gold, #E8A020);
}

.votd-bg-photos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.votd-bg-photo-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: 2px solid transparent;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}

.votd-bg-photo-thumb:hover,
.votd-bg-photo-thumb.active {
    transform: scale(1.06);
    border-color: var(--brand-gold, #E8A020);
}

.votd-bg-upload-row {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* ======================================================
   WHERE TO FIND — preview widget (app home)
====================================================== */

.wtf-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.wtf-preview-card {
    background: var(--sidebar-bg, #FEFCF8);
    border: 1px solid #EDE7D9;
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    text-decoration: none;
    color: var(--text, #1C1C1E);
    transition: all .2s;
}

.wtf-preview-card:hover {
    border-color: var(--brand-gold, #E8A020);
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,.08));
    color: var(--text, #1C1C1E);
}

.wtf-preview-card i {
    font-size: 1.6rem;
    color: var(--brand-gold, #E8A020);
    margin-bottom: 8px;
    display: block;
}

.wtf-preview-name {
    font-weight: 700;
    margin-bottom: 4px;
}

.wtf-preview-topics {
    font-size: .78rem;
    color: var(--text-muted, #6B6B6B);
}

body.dark-mode .wtf-preview-card {
    background: #1d1f23;
    border-color: #2c2f33;
    color: #e4e4e4;
}

/* ======================================================
   WHERE TO FIND — full browser page
====================================================== */

/* Keeps a category clear of the sticky navbar when JS scrolls to it
   after arriving via a #wtf-category-N link (see
   initWhereToFindCategoryFocus in bibliapp.js). */
#wtfAccordion .accordion-item {
    scroll-margin-top: calc(var(--navbar-height, 64px) + 16px);
}

.wtf-topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.wtf-topic-card {
    background: #fff;
    border: 1px solid #EDE7D9;
    border-radius: 12px;
    padding: 16px;
}

.wtf-topic-card h6 {
    font-weight: 700;
    margin-bottom: 10px;
}

.wtf-ref-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wtf-ref-chip {
    background: rgba(232,160,32,.10);
    color: var(--brand-gold, #E8A020);
    border: 1px solid rgba(232,160,32,.30);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}

.wtf-ref-chip:hover {
    background: var(--brand-gold, #E8A020);
    color: #fff;
}

body.dark-mode .wtf-topic-card {
    background: #1d1f23;
    border-color: #2c2f33;
    color: #e4e4e4;
}