/* ============================================================
   jg-yizkor-tr.css  --  Shared DESCRIPTION-PAGE layout
   CHW / Project Shorashim
   ------------------------------------------------------------
   SCOPE (two page families load this file):
     1. Yizkor translation-fundraising pages
     2. JewishGen Press store detail pages (YBIP_*.html)

   SHARED components (either family may use):
     .page-title-band + .record-type-tag, .project-ecru-wrap/-inner,
     .dataset-layout/-main/-sidebar, .back-link,
     .meta-card family (.meta-row/.meta-label/.meta-value/.meta-link),
     .donate-card/.order-card sidebar-card base, .btn-donate-full/.btn-order
   FUNDRAISING-ONLY: .funding-amount, .donate-card content rules
   STORE-ONLY components (.book-hero, .order-card children,
     .index-note) live in /jg-press.css -- do NOT add them here.

   Load ORDER: Bootstrap CDN -> jg-global.css -> this file ->
     jg-press.css (store pages only) -> page-specific overrides.

   NOTE: .page-title-band / .record-type-tag are also defined in
   jg-global.css (as .page-title-band / .tagline / .jg-tag-sage).
   This file's values win by load order on pages that link it
   (band padding 40px here vs 44px there). Known duplication --
   do not resolve without a CHW ripple round.

   All color values use the CSS custom properties defined in the
   :root block below or in jg-global.css. Dark mode is toggled
   via body.dark-mode; dark rules sit ADJACENT to their base
   rules. DO NOT add hex codes outside :root without approval.
   ASCII-only file: verify with grep -nP '[^\x00-\x7F]'.
   ============================================================ */

/* == Local design tokens ===================================== */
/* Defined here (not jg-global.css) so deploying this cleanup
   touches only this file; promote to jg-global.css at the next
   global ripple round. --sage already flips to #a8b361 in dark
   mode via jg-global, so dark rules use var(--sage) directly. */
:root {
    --border-tan:   #d1caba;   /* light-mode card/hairline border   */
    --navy-deep:    #0d2a45;   /* dark-mode navy fill (bands/cards) */
    --dm-link:      #8ab0c9;   /* dark-mode link blue               */
    --dm-text:      #e0e0e0;   /* dark-mode primary text            */
    --dm-ink:       #121212;   /* dark-mode text on sage fills      */
    --dm-surface:   #1e1e1e;   /* dark-mode card surface            */
    --dm-surface-deep: #141414;/* dark-mode card header surface     */
    --dm-border:    #333333;   /* dark-mode card/hairline border    */
}

/* == Page title band ========================================= */
.page-title-band {
    background-color: var(--navy);
    padding: 40px 50px;
    text-align: center;
}
body.dark-mode .page-title-band { background-color: var(--navy-deep) !important; }

.record-type-tag {
    display: inline-block;
    background-color: var(--sage);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 14px;
}
body.dark-mode .record-type-tag { background-color: var(--sage) !important; color: var(--dm-ink) !important; }

.page-title-band h1 {
    margin: 0 0 10px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.25rem;
    font-weight: normal;
    line-height: 1.15;
    color: #ffffff;
}
.page-title-band p.hero-subtitle {
    margin: 0 auto;
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.85);
    max-width: 720px;
    line-height: 1.6;
    font-style: italic;
}
body.dark-mode .page-title-band p.hero-subtitle { color: rgba(255,255,255,0.85) !important; }

/* == Ecru content wrap ======================================= */
.project-ecru-wrap {
    background-color: var(--ecru);
    padding: 3rem 2rem;
}
.project-ecru-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* == 2-column content/sidebar layout ========================= */
.dataset-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
}
.dataset-sidebar {
    position: sticky;
    top: 20px;
}

/* == Main content ============================================ */
.dataset-main h2 {
    color: var(--navy);
    font-size: 20px;
    margin: 30px 0 14px 0;
    padding-bottom: 8px;
    position: relative;
    font-weight: bold;
}
body.dark-mode .dataset-main h2 { color: var(--dm-text) !important; }
.dataset-main h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--sage);
    border-radius: 2px;
}
.dataset-main h2:first-child { margin-top: 0; }
.dataset-main p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--charcoal);
    margin: 0 0 14px 0;
}
body.dark-mode .dataset-main p { color: #c8c8c8 !important; } /* one-off body grey */
.dataset-main p:last-child { margin-bottom: 0; }
.dataset-main a {
    color: var(--navy);
    font-weight: bold;
    text-decoration: underline dotted;
}
.dataset-main a:hover { color: var(--sage); }
body.dark-mode .dataset-main a { color: var(--dm-link) !important; }
body.dark-mode .dataset-main a:hover { color: var(--sage) !important; }
.dataset-main em { font-style: italic; }

/* == Back link (lives at bottom of main content) ============= */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
    font-size: 0.8125rem;
    font-weight: bold;
    text-decoration: underline dotted;
    margin-top: 36px;
}
.back-link:hover { color: var(--sage); }
body.dark-mode .back-link { color: var(--dm-link) !important; }
body.dark-mode .back-link:hover { color: var(--sage) !important; }

/* == Meta-card (B1 with navy accents) ======================== */
.meta-card {
    background-color: var(--white);
    border: 1px solid var(--border-tan);
    border-top: 4px solid var(--navy);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}
body.dark-mode .meta-card { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; border-top-color: var(--sage) !important; }
.meta-card__header {
    background-color: var(--cream);
    padding: 12px 20px;
    font-size: 0.6875rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--navy);
    border-bottom: 1px solid var(--border-tan);
}
body.dark-mode .meta-card__header { background-color: var(--dm-surface-deep) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; }
.meta-card__body {
    padding: 18px 20px 20px 20px;
}
.meta-row {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dotted rgba(9,73,122,0.15);
}
.meta-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
body.dark-mode .meta-row { border-bottom-color: rgba(168,179,97,0.2) !important; }

.meta-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--charcoal);
    opacity: 0.65;
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}
body.dark-mode .meta-label { color: #999 !important; } /* one-off label grey */
.meta-value {
    font-weight: bold;
    color: var(--navy);
    font-size: 0.875rem;
    line-height: 1.5;
    display: block;
}
body.dark-mode .meta-value { color: var(--dm-text) !important; }
.meta-value.citation {
    font-weight: normal;
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--charcoal);
    line-height: 1.6;
}
body.dark-mode .meta-value.citation { color: #c0c0c0 !important; } /* one-off citation grey */
.meta-value.citation strong {
    font-style: normal;
    color: var(--navy);
}
body.dark-mode .meta-value.citation strong { color: var(--dm-text) !important; }
.meta-link {
    color: var(--navy);
    font-weight: bold;
    text-decoration: underline dotted;
    font-size: 0.875rem;
}
.meta-link:hover { color: var(--sage); }
body.dark-mode .meta-link { color: var(--dm-link) !important; }
body.dark-mode .meta-link:hover { color: var(--sage) !important; }

/* == Funding amount (FUNDRAISING pages only) ================= */
.funding-amount {
    font-size: 1.875rem;
    font-weight: bold;
    color: var(--navy);
    line-height: 1;
    margin-top: 4px;
    letter-spacing: -0.5px;
    display: block;
}
body.dark-mode .funding-amount { color: var(--sage) !important; }

/* == Navy sidebar card base ==================================
   .donate-card (fundraising) and .order-card (store) share this
   base; .order-card's children + margins live in jg-press.css. */
.donate-card,
.order-card {
    background-color: var(--navy);
    border-radius: 8px;
    padding: 22px;
}
body.dark-mode .donate-card,
body.dark-mode .order-card { background-color: var(--navy-deep) !important; }
.donate-card p {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin: 0 0 16px 0;
}
body.dark-mode .donate-card p { color: rgba(255,255,255,0.8) !important; }

/* == Sidebar CTA button base =================================
   .btn-donate-full is an <a> (fundraising); .btn-order is a
   <button> (store) -- its border/width/cursor deltas live in
   jg-press.css. */
.btn-donate-full,
.btn-order {
    display: block;
    background-color: var(--sage);
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: filter 0.15s, transform 0.15s;
}
.btn-donate-full:hover,
.btn-order:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #ffffff;
}
body.dark-mode .btn-donate-full,
body.dark-mode .btn-order { background-color: var(--sage); color: var(--dm-ink); }
body.dark-mode .btn-donate-full:hover,
body.dark-mode .btn-order:hover { color: var(--dm-ink); }

/* == Responsive ============================================== */
@media (max-width: 900px) {
    .page-title-band { padding: 30px 20px; }
    .page-title-band h1 { font-size: 1.75rem; }
    .project-ecru-wrap { padding: 2rem 1.25rem; }
    .dataset-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .dataset-sidebar { position: static; }
}