/* ============================================================================
   JG-RD.CSS  -  JewishGen Research Division stylesheet
   ----------------------------------------------------------------------------
   Companion to jg-global.css. Loaded ONLY on Research Division pages.
   Stylesheet load order on RD pages:
       1. Bootstrap CDN
       2. /jg-global.css
       3. /RD/jg-rd.css   <-- this file
       4. (optional) inline page-specific styles for truly unique elements
   ----------------------------------------------------------------------------
   COVERAGE
       1. RD subpage layout (ecru wrap, sticky sidebar grid)
       2. RD sidebar component (nav + donate card)
       3. RD page-template patterns (section heading, intro,
          "currently working on" callout, donation block,
          external-site card, team card)
       4. RD shared filter/sort bar (used on databases and towns pages)
       5. RD shared dataset card (used on databases page; pattern available
          to any future RD page that lists discrete datasets)
       6. RD shared empty-state (used by databases and towns)
       7. RD Family Finder banner (top of every RD databases page)
       8. RD directory (index) page
       9. Volunteer strip override (RD index only)
      10. Responsive
   ----------------------------------------------------------------------------
   NAMING NOTE
       Existing classes use a mix of `rd-` prefixed and unprefixed
       (e.g. .section-heading, .green-accent-line). Names preserved
       as-is to avoid breaking existing per-RD pages. Future cleanup:
       normalize to .rd-* prefix and update consuming pages.
   ----------------------------------------------------------------------------
   TODO (post-launch)
       - .page-title-band light-mode rules currently live inline on
         every RD page (and elsewhere). Move them into jg-global.css.
       - Normalize unprefixed classnames (.section-heading,
         .green-accent-line) to .rd-* prefix.
============================================================================ */


/* ============================================================================
   1. RD SUBPAGE LAYOUT
   ----------------------------------------------------------------------------
   Two-column grid: 240px sticky sidebar + flexible main column.
   Used on per-RD About/Databases/Towns/Fundraising pages, plus any
   additional pages an RD chooses to add (Volunteer, Yizkor, Cemetery,
   etc.). The sidebar is sticky and includes its own donate card.
============================================================================ */

.rd-body-wrap {
    background-color: var(--ecru);
    flex: 1;
}

.rd-body-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* Narrower variant for prose-heavy pages (e.g. About) */
.rd-body-inner--narrow {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.rd-body-inner--full {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}


/* ============================================================================
   2. RD SIDEBAR COMPONENT
   ----------------------------------------------------------------------------
   Sidebar markup is fetched per-RD from /RD/{slug}/RD_Sidebar.html
   into <aside id="rd-sidebar" class="rd-sidebar"></aside>.
   Active link state is applied at runtime by /jg-rd-sidebar.js.

   The sidebar contains TWO cards stacked vertically:
       - Nav card (white, listing the RD's pages)
       - Donate card (navy band with sage CTA)

   Sticky positioning requires the placeholder element itself to be
   the grid child (not a wrapping <div>) - see Subcarpathia for
   reference markup.
============================================================================ */

.rd-sidebar {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* -- Nav card -- */
.rd-sidebar-card {
    background-color: var(--white);
    border-left: 3px solid var(--navy);
    border-radius: 0 6px 6px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    padding: 0 0 16px;
    overflow: hidden;
}

.rd-sidebar-label {
    display: block;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--navy);
    background-color: var(--cream);
    padding: 12px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 8px;
}

.rd-sidebar-card a {
    display: block;
    padding: 9px 18px 9px 15px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--charcoal);
    border-left: 3px solid transparent;
    transition: color 0.15s, background-color 0.15s;
    line-height: 1.4;
    text-decoration: none;
}

.rd-sidebar-card a:hover {
    color: var(--navy);
    background-color: var(--ecru);
}

.rd-sidebar-card a.active {
    color: var(--navy);
    border-left-color: var(--navy);
    background-color: var(--ecru);
}

/* -- Donate card (navy band w/ sage CTA) -- */
/* Navy fill is hardcoded because var(--navy) flips to light gray
   in dark mode, washing out the band. */
.rd-sidebar-donate {
    background-color: var(--navy);
    border-radius: 8px;
    padding: 18px 18px 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.rd-sidebar-donate p {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
    margin: 0 0 12px 0;
}

.rd-btn-donate-full {
    display: block;
    background-color: var(--sage);
    color: #ffffff;
    padding: 11px 18px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: filter 0.15s, transform 0.15s;
    text-decoration: none;
}

.rd-btn-donate-full:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

/* -- Sidebar dark mode -- */
body.dark-mode .rd-sidebar-card {
    background-color: #1e1e1e;
    border-left-color: #5a7a95;
}
body.dark-mode .rd-sidebar-label {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-bottom-color: #333;
}
body.dark-mode .rd-sidebar-card a {
    color: #c8c8c8;
}
body.dark-mode .rd-sidebar-card a:hover {
    color: #a8b361;
    background-color: #2a2a2a;
}
body.dark-mode .rd-sidebar-card a.active {
    color: #a8b361;
    border-left-color: #a8b361;
    background-color: #2a2a2a;
}
body.dark-mode .rd-sidebar-donate {
    background-color: #0d2a45;
}
body.dark-mode .rd-sidebar-donate p {
    color: rgba(255,255,255,0.85);
}
body.dark-mode .rd-btn-donate-full {
    background-color: #a8b361;
    color: #121212;
}
body.dark-mode .rd-btn-donate-full:hover {
    color: #121212;
}


/* ============================================================================
   3. PAGE-TEMPLATE PATTERNS
   ----------------------------------------------------------------------------
   General-purpose building blocks for any RD subpage.
   Compose these with the layout in section 1 to build new RD pages
   (About, Databases, Volunteer, Yizkor, Cemetery, etc.) without
   duplicating CSS.
============================================================================ */

/* -- Section heading + sage accent line -- */
.section-heading {
    display: block;
    font-size: 0.9375rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--navy);
    margin-bottom: 8px;
}

.green-accent-line {
    width: 40px;
    height: 3px;
    background-color: var(--sage);
    margin-bottom: 20px;
    border-radius: 1px;
}

/* -- Intro paragraph block -- */
.rd-intro p {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--charcoal);
    margin: 0 0 1.1rem 0;
}
.rd-intro p:last-child { margin-bottom: 0; }

.rd-intro a {
    color: var(--navy);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.rd-intro a:hover { color: var(--sage); }

/* -- "Currently Working On" callout -- */
.rd-current-card {
    background-color: var(--white);
    border-left: 3px solid var(--sage);
    border-radius: 0 6px 6px 0;
    padding: 1.125rem 1.375rem;
    margin: 1.75rem 0 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.rd-current-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--sage);
    margin-bottom: 6px;
}

.rd-current-text {
    font-size: 0.9rem;
    color: var(--charcoal);
    margin: 0;
    line-height: 1.6;
}
/* -- Section spacing utility -- */
.rd-section { margin-top: 2.5rem; }

/* -- Our Team card -- */
.rd-team-card {
    background-color: var(--white);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1.5rem;
    align-items: start;

}
.rd-team-card + .rd-team-card {
    margin-top: 1.25rem;
}
.rd-photo {
    width: 130px;
    height: 155px;
    object-fit: cover;
    border-radius: 4px;
    background-color: #f0f0f0;
    display: block;
}
.rd-team-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem;
    font-weight: bold;
    color: var(--navy);
    margin: 0 0 2px 0;
    line-height: 1.25;
}
.rd-team-role {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sage);
    margin-bottom: 12px;
}
.rd-team-bio {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--charcoal);
    margin: 0;
}
.rd-team-bio a {
    color: var(--navy);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.rd-team-bio a:hover { color: var(--sage); }
.rd-team-bio em { font-style: italic; }

/* -- Our Team card dark mode -- */
body.dark-mode .rd-team-card   { background-color: #1e1e1e; }
body.dark-mode .rd-team-name   { color: #e0e0e0; }
body.dark-mode .rd-team-role   { color: #a8b361; }
body.dark-mode .rd-team-bio    { color: #c8c8c8; }
body.dark-mode .rd-team-bio a  { color: #8ab0c9; }
body.dark-mode .rd-photo       { background-color: #2a2a2a; }

/* -- Bio tile grid (clickable tiles, expand inline) -- */
.bio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    justify-content: center;
}
/* When only 1 member, center the tile in the column */
.bio-grid.bio-grid--single {
    grid-template-columns: minmax(220px, 280px);
    justify-content: center;
}

.bio-tile {
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    padding: 1.25rem 1rem 1rem;
    text-align: center;
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
    width: 100%;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

/* The expand toggle inside the card (photo/name/role/chevron). Transparent so
   the card is the visual box; the Contact link is a sibling below it. */
.bio-tile__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}
.bio-tile__toggle[aria-disabled="true"] { cursor: default; }
.bio-tile__toggle:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
/* Contact button shown on the collapsed tile, centered under the toggle */
.bio-tile__contact { align-self: center; }
.bio-tile:hover {
    background-color: #fafaf7;
    box-shadow: 0 4px 14px rgba(0,0,0,0.09);
}
.bio-tile__toggle:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}
.bio-tile.is-open {
    background-color: #fafaf7;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
body.dark-mode .bio-tile { background-color: #1e1e1e !important; border-color: #333 !important; }
body.dark-mode .bio-tile:hover,
body.dark-mode .bio-tile.is-open { background-color: #252525 !important; }

.bio-photo-tile {
    width: 110px;
    height: 130px;
    object-fit: cover;
    border-radius: 4px;
    background-color: #f0f0f0;
    display: block;
}
body.dark-mode .bio-photo-tile { background-color: #2a2a2a; }
.bio-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-weight: bold;
    color: var(--navy);
    margin: 0;
    line-height: 1.25;
}
body.dark-mode .bio-name { color: #e0e0e0 !important; }
.bio-role {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sage);
    margin: 0;
}
body.dark-mode .bio-role { color: #a8b361 !important; }
.chevron {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: #999;
    transition: transform 0.2s, color 0.15s;
}
.bio-tile.is-open .chevron {
    transform: rotate(180deg);
    color: var(--sage);
}
body.dark-mode .chevron { color: #888; }
body.dark-mode .bio-tile.is-open .chevron { color: #a8b361; }

/* Bio panel (full-row span when open) */
.bio-panel {
    grid-column: 1 / -1;
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    border-left: 3px solid var(--sage);
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    padding: 1.5rem 1.75rem;
    display: none;
}
.bio-panel.is-open { display: block; }
.bio-panel-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem;
    font-weight: bold;
    color: var(--navy);
    margin: 0 0 4px 0;
    line-height: 1.25;
}
.bio-panel-role {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sage);
    margin-bottom: 12px;
}
.bio-panel p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--charcoal);
    margin: 0;
}
.bio-panel a {
    color: var(--navy);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.bio-panel a:hover { color: var(--sage); }
.bio-panel em { font-style: italic; }
body.dark-mode .bio-panel { background-color: #1e1e1e !important; border-color: #333 !important; }
body.dark-mode .bio-panel-name { color: #e0e0e0 !important; }
body.dark-mode .bio-panel-role { color: #a8b361 !important; }
body.dark-mode .bio-panel p { color: #c8c8c8 !important; }
body.dark-mode .bio-panel a { color: #8ab0c9 !important; }


/* -- Centered donation block -- */
.rd-donation-block {
    background-color: #dfe3cd;
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: 6px;
    margin-top: 0;
}

.rd-donation-block p {
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0 auto 1.25rem;
    max-width: 540px;
    color: var(--charcoal);
}

.rd-btn-donate-solid {
    background-color: var(--sage);
    color: #ffffff;
    padding: 12px 30px;
    font-weight: bold;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-block;
    border-radius: 4px;
    text-decoration: none;
    transition: filter 0.15s, transform 0.1s;
}

.rd-btn-donate-solid:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

/* -- Page-template dark mode -- */
body.dark-mode .rd-intro p          { color: #c8c8c8; }
body.dark-mode .rd-current-card     { background-color: #1e1e1e; border-left-color: #a8b361; }
body.dark-mode .rd-current-label    { color: #a8b361; }
body.dark-mode .rd-current-text     { color: #c8c8c8; }
body.dark-mode .rd-donation-block   { background-color: #2a2d1e; }
body.dark-mode .rd-donation-block p { color: #d8d8c8; }
body.dark-mode .rd-btn-donate-solid       { background-color: #a8b361; color: #121212; }
body.dark-mode .rd-btn-donate-solid:hover { color: #121212; }

/* -- External-site card (links out to a division's existing standalone
      website, e.g. jewishgen.org/Sub-Carpathia/) -- */
.rd-external-card {
    background-color: var(--white);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.rd-external-card h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-weight: bold;
    color: var(--navy);
    margin: 0 0 4px 0;
}
.rd-external-card p {
    font-size: 0.8125rem;
    color: var(--charcoal);
    line-height: 1.5;
    margin: 0;
}

.rd-external-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    color: var(--navy);
    border: 1.5px solid var(--navy);
    font-weight: bold;
    font-size: 0.8125rem;
    padding: 9px 18px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.rd-external-btn:hover {
    background-color: var(--navy);
    color: #ffffff;
    text-decoration: none;
}
.rd-external-btn .ext-icon { font-size: 0.875rem; }

body.dark-mode .rd-external-card    { background-color: #1e1e1e; }
body.dark-mode .rd-external-card h3 { color: #e0e0e0; }
body.dark-mode .rd-external-card p  { color: #c8c8c8; }
body.dark-mode .rd-external-btn {
    color: #8ab0c9;
    border-color: #5a7a95;
}
body.dark-mode .rd-external-btn:hover {
    background-color: #5a7a95;
    color: #ffffff;
}



/* ============================================================================
   4. SHARED FILTER / SORT BAR
   ----------------------------------------------------------------------------
   Used on Databases and Towns pages. Pill chips for multi-select filters,
   compact select for sort. Both pages compose this with their own
   page-unique content above (e.g. Towns adds a search input above the
   filter row).
============================================================================ */

.filter-bar {
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.filter-row + .filter-row {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.filter-label {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #666;
    flex-shrink: 0;
    margin-right: 4px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    background-color: var(--white);
    color: var(--charcoal);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
    font-family: inherit;
}
.filter-chip:hover {
    background-color: var(--ecru);
    border-color: var(--navy);
}
.filter-chip.active {
    background-color: var(--navy);
    color: #ffffff;
    border-color: var(--navy);
}
.filter-chip:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

.sort-select {
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--charcoal);
    cursor: pointer;
}
.sort-select:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

.results-count {
    font-size: 0.8125rem;
    color: #666;
    margin-left: auto;
}

/* -- Filter bar dark mode -- */
body.dark-mode .filter-bar           { background-color: #1e1e1e; border-color: #333; }
body.dark-mode .filter-label         { color: #999; }
body.dark-mode .filter-chip          { background-color: #2a2a2a; color: #c8c8c8; border-color: #444; }
body.dark-mode .filter-chip:hover    { background-color: #333; color: #fff; }
body.dark-mode .filter-chip.active   { background-color: var(--navy); color: #fff; border-color: var(--navy); }
body.dark-mode .sort-select          { background-color: #2a2a2a; color: #e0e0e0; border-color: #444; }
body.dark-mode .results-count        { color: #999; }


/* ============================================================================
   5. SHARED DATASET CARD
   ----------------------------------------------------------------------------
   Used on every RD's Databases page. Click-to-expand card with summary
   metadata (years, record count, language, last updated) and an expanded
   panel with full description, fact boxes, and CTAs.

   Markup contract (built by per-page JS):
     <article class="ds-card" aria-expanded="false">
       <button class="ds-summary" ...>
         <div>
           <h3 class="ds-card-name">...</h3>
           <div class="ds-meta-row">
             <span class="ds-meta-item">
               <span class="ds-meta-icon">...</span>
               <span class="ds-meta-label">Years:</span>
               <span class="ds-meta-value">...</span>
             </span>
             ... (records, language, updated)
           </div>
           <div class="ds-chips">
             <span class="ds-chip chip-record">...</span>
           </div>
         </div>
         <span class="chevron-toggle">&#9662;</span>
       </button>
       <div class="ds-expand">
         <div class="ds-expand-grid">
           <div>
             <p class="ds-description">...</p>
             <div class="ds-facts">
               <div class="ds-fact">
                 <span class="ds-fact-label">...</span>
                 <span class="ds-fact-value">...</span>
               </div>
             </div>
           </div>
           <div class="ds-cta-col">
             <a class="ds-btn ds-btn-navy">View Description</a>
             <a class="ds-btn ds-btn-sage">Search Records</a>
           </div>
         </div>
       </div>
     </article>
============================================================================ */

.ds-card {
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    margin-bottom: 0.875rem;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.ds-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.ds-card[aria-expanded="true"] { box-shadow: 0 4px 18px rgba(0,0,0,0.10); }

.ds-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    cursor: pointer;
    align-items: center;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
}
.ds-summary:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }

.ds-card-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem;
    font-weight: bold;
    color: var(--navy);
    line-height: 1.3;
    margin: 0 0 8px 0;
}

.ds-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.5rem;
    margin-bottom: 10px;
    font-size: 0.8125rem;
}
.ds-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ds-meta-icon { 
	width: 15px; 
	height: 15px; 
	flex-shrink: 0; 
	color: #09497a; 
	display: inline-block; 
	vertical-align: middle; 
	font-size: 0; 
	opacity: 1; 
}


.ds-meta-label {
    font-weight: 600;
    color: var(--charcoal);
}
.ds-meta-value {
    color: var(--charcoal);
    opacity: 0.9;
}

/* -- Dataset chip row -- */
.ds-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ds-chip {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 11px;
    border-radius: 999px;
    font-weight: 500;
    line-height: 1.5;
}
.chip-record   { background-color: var(--sage); color: #ffffff; }
.chip-region   { background-color: transparent; border: 1px solid var(--navy); color: var(--navy); }
.chip-language { background-color: var(--cream); color: var(--charcoal); border: 1px solid rgba(0,0,0,0.12); }

/* -- Chevron toggle (circle button at right of summary) -- */
.chevron-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: transform 0.2s, color 0.15s, border-color 0.15s;
    background: var(--white);
}
.ds-card[aria-expanded="true"] .chevron-toggle {
    transform: rotate(180deg);
    color: var(--sage);
    border-color: var(--sage);
}

/* -- Expanded panel -- */
.ds-expand {
    display: none;
    padding: 1.5rem 1.75rem 1.625rem;
    background-color: var(--ecru);
    border-top: 1px solid rgba(0,0,0,0.08);
}
.ds-card.is-open .ds-expand { display: block; }

.ds-expand-grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 1.75rem;
    align-items: start;
}

.ds-description {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--charcoal);
    margin: 0 0 1.25rem 0;
}
.ds-description:empty { display: none; }

/* -- Fact boxes -- */
.ds-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.ds-fact {
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
}
.ds-fact-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--sage);
    margin-bottom: 4px;
}
.ds-fact-value {
    font-size: 0.875rem;
    color: var(--charcoal);
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}

/* -- CTA column -- */
.ds-cta-col {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.ds-btn {
    display: inline-block;
    text-align: center;
    padding: 11px 18px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: filter 0.15s, transform 0.1s;
    text-decoration: none;
}
.ds-btn-navy {
    background-color: var(--navy);
    color: #ffffff;
    border: 1px solid var(--navy);
}
.ds-btn-navy:hover {
    filter: brightness(1.1);
    color: #ffffff;
    transform: translateY(-1px);
    text-decoration: none;
}
.ds-btn-sage {
    background-color: var(--sage);
    color: #ffffff;
}
.ds-btn-sage:hover {
    filter: brightness(1.08);
    color: #ffffff;
    transform: translateY(-1px);
    text-decoration: none;
}

/* -- Dataset card dark mode -- */
body.dark-mode .ds-card                 { background-color: #1e1e1e; border-color: #333; }
body.dark-mode .ds-card:hover           { background-color: #252525; }
body.dark-mode .ds-card-name            { color: #e0e0e0; }
body.dark-mode .ds-meta-label           { color: #999; }
body.dark-mode .ds-meta-value           { color: #c8c8c8; }
body.dark-mode .ds-meta-icon 		{ color: #8ab0c9; opacity: 1; }
body.dark-mode .chip-record             { background-color: #6e7945; color: #fff; }
body.dark-mode .chip-region             { background-color: transparent; border-color: #5a7a95; color: #8ab0c9; }
body.dark-mode .chip-language           { background-color: #2a2a2a; border-color: #444; color: #c8c8c8; }
body.dark-mode .chevron-toggle          { color: #888; border-color: #333; }
body.dark-mode .ds-card[aria-expanded="true"] .chevron-toggle { color: #a8b361; }
body.dark-mode .ds-expand               { background-color: #181818; border-top-color: #333; }
body.dark-mode .ds-description          { color: #c8c8c8; }
body.dark-mode .ds-fact                 { background-color: #1e1e1e; border-color: #333; }
body.dark-mode .ds-fact-label           { color: #a8b361; }
body.dark-mode .ds-fact-value           { color: #e0e0e0; }
body.dark-mode .ds-btn-navy             { background-color: #5a7a95; border-color: #5a7a95; }
body.dark-mode .ds-btn-sage             { background-color: #a8b361; color: #1a1a1a; }
body.dark-mode .ds-btn-sage:hover       { color: #1a1a1a; }


/* ============================================================================
   6. SHARED EMPTY STATE
   ----------------------------------------------------------------------------
   Used by Databases and Towns pages when filters/search return no results.
============================================================================ */

.rd-empty {
    background-color: var(--white);
    border: 1px dashed rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}
body.dark-mode .rd-empty { background-color: #1e1e1e; border-color: #444; color: #999; }


/* ============================================================================
   7. FAMILY FINDER BANNER  (TOP OF EVERY RD DATABASES PAGE)
   ----------------------------------------------------------------------------
   Sits above the "Database Catalog" section heading on every RD's
   Databases page. Promotes JewishGen Family Finder (JGFF) and links to
   the existing JGFF system. Designed to be enhanced post-launch with
   live surname-match counts per region (currently placeholder prose
   in the navy strip).

   Visual structure adapted from the JGFF block on community profile
   pages (e.g. usbgn2620337.html "Connect & Share" tab). Same white-
   card-with-navy-accent + navy strip with CTA pattern.

   Per-RD usage: copy the markup pattern into each RD's databases page,
   substituting the region name in .rd-jgff-card__desc and
   .rd-jgff-card__strip-line1.
============================================================================ */

.rd-jgff-card {
    background-color: var(--white);
    border: 1px solid #d1caba;
    border-top: 4px solid var(--navy);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* -- Header strip (icon + JGFF title) -- */
.rd-jgff-card__header {
    background-color: rgba(0,0,0,0.03);
    border-bottom: 1px solid #d1caba;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.rd-jgff-card__icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
}
.rd-jgff-card__icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}
/* Light/dark icon swap (scoped to beat any global .light-icon /
   .dark-icon rules). Light shown by default; dark mode flips. */
.rd-jgff-card__icon .dark-icon { display: none; }
body.dark-mode .rd-jgff-card__icon .light-icon { display: none; }
body.dark-mode .rd-jgff-card__icon .dark-icon  { display: block; }
.rd-jgff-card__title {
    font-size: 0.8125rem;
    font-weight: bold;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* -- Body (description + navy CTA strip) -- */
.rd-jgff-card__body {
    padding: 1.125rem 1.375rem 1.25rem;
}
.rd-jgff-card__desc {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--charcoal);
    margin: 0 0 1rem 0;
}

/* -- Navy CTA strip -- */
/* Navy is hardcoded (#09497a / #0d2a45) because var(--navy) flips to
   light gray in dark mode, washing out the band. */
.rd-jgff-card__strip {
    background-color: #09497a;
    border-radius: 6px;
    padding: 1.125rem 1.375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.rd-jgff-card__strip-text {
    color: #ffffff;
    margin: 0;
    flex: 1;
    min-width: 220px;
}
.rd-jgff-card__strip-line1 {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 4px;
}
.rd-jgff-card__strip-line2 {
    display: block;
    font-size: 0.6875rem;
    color: #a9c0d0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.rd-jgff-card__cta {
    background-color: var(--sage);
    color: #ffffff;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: filter 0.15s, transform 0.1s;
    flex-shrink: 0;
    text-decoration: none;
}
.rd-jgff-card__cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

/* -- Family Finder banner dark mode -- */
body.dark-mode .rd-jgff-card             { background-color: #1e1e1e; border-color: #333; }
body.dark-mode .rd-jgff-card__header     { background-color: rgba(255,255,255,0.04); border-bottom-color: #333; }
body.dark-mode .rd-jgff-card__title      { color: #e0e0e0; }
body.dark-mode .rd-jgff-card__desc       { color: #c8c8c8; }
body.dark-mode .rd-jgff-card__strip      { background-color: #0d2a45; }
body.dark-mode .rd-jgff-card__cta        { background-color: #a8b361; color: #121212; }
body.dark-mode .rd-jgff-card__cta:hover  { color: #121212; }


/* ============================================================================
   8. RD DIRECTORY (INDEX) PAGE
   ----------------------------------------------------------------------------
   Single page at /RD/index.html. No sidebar - full-width
   ecru body with two stacked sections (JewishGen Research Divisions
   and External Regional Partners) separated by the volunteer strip.
   Cards are typography-forward with a sage ribbon trim along the top.
============================================================================ */

/* -- Page wrapper -- */
.rd-dir-wrap {
    background-color: var(--ecru);
    flex: 1;
}

.rd-dir-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 2rem 3.5rem;
}

/* When .rd-dir-main is the second ecru block (i.e. partners section,
   sitting after the volunteer strip), tighten its top padding so the
   section label doesn't float too far below the strip. */
.volunteer-strip + .rd-dir-wrap .rd-dir-main {
    padding-top: 2.5rem;
}

/* -- Intro paragraph -- */
.rd-dir-intro {
    max-width: 700px;
    margin: 0 auto 3rem auto;
    text-align: center;
}
.rd-dir-intro p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--charcoal);
}

/* -- Section grouping -- */
.rd-dir-group { margin-bottom: 2.75rem; }
.rd-dir-group:last-of-type { margin-bottom: 0; }

.rd-dir-section-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    color: var(--navy);
    margin: 0 0 8px 0;
}
.rd-dir-section-label + .green-accent-line {
    width: 40px;
    height: 3px;
    background-color: var(--sage);
    margin-bottom: 1.5rem;
    border-radius: 1px;
}

/* -- Card grid (fixed 3 columns at desktop so single-card groups
      sit naturally at the left of their row instead of stretching) -- */
.rd-dir-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* -- Directory entry card (typography-forward, sage ribbon trim) -- */
.rd-dir-card {
    background-color: var(--white);
    border: 1px solid var(--cream);
    border-top: 3px solid var(--sage);
    border-radius: 0 0 4px 4px;
    padding: 1.5rem 1.625rem 1.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.15s;
}
.rd-dir-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.rd-dir-card:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 3px;
}

/* -- Card typography -- */
.rd-dir-card__name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.375rem;
    font-weight: normal;
    color: var(--navy);
    margin: 0;
    line-height: 1.2;
}
.rd-dir-card__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--charcoal);
    margin: 0;
    opacity: 0.85;
}

/* -- External-affiliate indicator (inline with title) -- */
.rd-dir-card__ext-icon {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.85rem;
    color: var(--sage);
    vertical-align: middle;
    transition: transform 0.2s;
}
.rd-dir-card:hover .rd-dir-card__ext-icon { transform: translate(2px, -2px); }

/* -- RD directory dark mode -- */
body.dark-mode .rd-dir-intro p          { color: #c8c8c8; }
body.dark-mode .rd-dir-section-label    { color: #e0e0e0; }
body.dark-mode .rd-dir-card             {
    background-color: #1e1e1e;
    border-color: #333;
    border-top-color: #a8b361;
}
body.dark-mode .rd-dir-card:hover       { box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
body.dark-mode .rd-dir-card__name       { color: #e0e0e0; }
body.dark-mode .rd-dir-card__desc       { color: #c8c8c8; opacity: 1; }
body.dark-mode .rd-dir-card__ext-icon   { color: #a8b361; }


/* ============================================================================
   9. VOLUNTEER STRIP OVERRIDE  (RD INDEX ONLY)
   ----------------------------------------------------------------------------
   The global .volunteer-strip (in jg-global.css) is a thin light-blue
   band used on per-RD subpages. On the RD index it sits between two
   ecru blocks; we override it as a warm margin note - italic charcoal
   on ecru, sage hairlines top and bottom.

   Selector targets only volunteer-strips that immediately follow an
   .rd-dir-wrap (i.e. only on the RD index page), so per-RD subpages
   keep the standard global treatment.
============================================================================ */

.rd-dir-wrap + .volunteer-strip {
    background-color: var(--ecru) !important;
    color: var(--charcoal) !important;
    border-top: 1px solid var(--sage) !important;
    border-bottom: 1px solid var(--sage) !important;
    padding: 1.375rem 2rem !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.65;
    text-align: center;
    margin: 0 !important;
}

body.dark-mode .rd-dir-wrap + .volunteer-strip {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-top-color: #a8b361 !important;
    border-bottom-color: #a8b361 !important;
}


/* ============================================================================
   10. RESPONSIVE
   ----------------------------------------------------------------------------
   - Under 900px: directory grid drops to 2 columns
   - Under 800px: subpage layout collapses sidebar to a horizontal pill
                  row above the main content
   - Under 640px: directory grid drops to 1 column, padding shrinks
============================================================================ */

@media (max-width: 900px) {
    .rd-dir-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
    /* Subpage layout: collapse sidebar into a horizontal pill row */
    .rd-body-inner,
    .rd-body-inner--narrow {
        grid-template-columns: 1fr;
        padding: 1.5rem 1rem;
        gap: 1.5rem;
    }
    .rd-sidebar { position: static; }
    .rd-sidebar-card {
        display: flex;
        flex-wrap: wrap;
        border-left: none;
        border-top: 3px solid var(--navy);
        border-radius: 6px;
        padding: 0;
    }
    .rd-sidebar-label {
        width: 100%;
        flex: 1 0 100%;
        margin-bottom: 0;
    }
    .rd-sidebar-card a {
        padding: 8px 14px;
        flex: 1 0 auto;
        text-align: center;
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    .rd-sidebar-card a.active {
        border-left: none;
        border-bottom-color: var(--navy);
    }

    /* Page-template patterns: tighten padding, stack external card,
       collapse team card to one column. */
    .rd-donation-block { padding: 2rem 1.25rem; }
    .rd-external-card  { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .rd-team-card      { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem; }
    .rd-photo          { width: 110px; height: 130px; }
    .bio-grid          { grid-template-columns: repeat(2, 1fr); }
    .bio-grid.bio-grid--single { grid-template-columns: 1fr; }
    .page-title-band   { padding: 36px 24px; }

    /* Dataset card: tighten and stack expanded panel */
    .ds-summary        { grid-template-columns: 1fr 36px; padding: 1rem 1.125rem; }
    .ds-meta-row       { gap: 0.875rem 1rem; }
    .ds-expand         { padding: 1.25rem 1.125rem 1.375rem; }
    .ds-expand-grid    { grid-template-columns: 1fr; gap: 1.25rem; }
    .ds-facts          { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .rd-dir-grid    { grid-template-columns: 1fr; }
    .rd-dir-main    { padding: 2rem 1.25rem 2.5rem; }
    .rd-dir-card    { padding: 1.25rem 1.375rem 1.125rem; }
    .rd-dir-card__name { font-size: 1.25rem; }

    /* Family Finder banner: stack strip text above CTA */
    .rd-jgff-card__strip { flex-direction: column; align-items: stretch; text-align: center; }
    .rd-jgff-card__cta   { text-align: center; }
}

/* ==========================================================================
   RD TOOLBAR - centered tab strip (matches JOWBR sub-nav)
   White band, cream underline; links are tabs with a navy active border.
   Active state uses .is-active (set by setActiveToolbarLink on the host page).
   ========================================================================== */
.rd-toolbar {
    background-color: var(--white);          /* flips to #121212 in dark mode */
    border-bottom: 2px solid var(--cream);
}
.rd-toolbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rd-toolbar-links {
    display: flex;
    align-items: center;
    justify-content: center;
}
.rd-toolbar-links a {
    display: inline-block;
    padding: 13px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--charcoal);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.rd-toolbar-links a:hover {
    color: var(--navy);
    border-bottom-color: var(--sage);
}
.rd-toolbar-links a:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: -2px;
}
.rd-toolbar-links a.is-active {
    color: var(--navy);
    border-bottom-color: var(--navy);
}

/* Dark mode - mirrors the JOWBR sub-nav treatment */
body.dark-mode .rd-toolbar {
    background-color: #121212;
    border-bottom-color: #333;
}
body.dark-mode .rd-toolbar-links a { color: #a0a0a0; }
body.dark-mode .rd-toolbar-links a:hover,
body.dark-mode .rd-toolbar-links a.is-active {
    color: #e0e0e0;
    border-bottom-color: #a8b361;
}

/* Mobile - label stacks above links, gap tightens */
@media (max-width: 768px) {
    .rd-toolbar-inner {
        padding: 10px 16px;
        gap: 8px;
    }
    .rd-toolbar-label {
        padding-right: 0;
        border-right: none;
        width: 100%;
        margin-bottom: 2px;
    }
    .rd-toolbar-links {
        flex-wrap: wrap;
    }
}



/* ============================================================================
   END jg-rd.css
============================================================================ */


/* ============================================================================
   TEAM CONTACT BUTTON
   Used by jg-people-loader.js (tiles expand panel + cards). Ported from
   jg-team.css so RD pages - which load jg-rd.css, not jg-team.css - style it.
   Tokens only. CHW 2026-08-28
============================================================================ */
/* Cards-layout photo column: stacks the photo and contact button with a gap
   between them (ported from jg-team.css, which RD pages don't load). */
.rd-photo-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
@media (max-width: 640px) {
    .rd-photo-wrap { align-items: flex-start; width: 110px; }
    .jg-contact-btn { width: 100%; }
}

.jg-contact-btn {
    display: block;
    text-align: center;
    background-color: var(--sage);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--sage);
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.jg-contact-btn:hover,
.jg-contact-btn:focus {
    background-color: transparent;
    color: var(--sage);
    text-decoration: none;
}
.jg-contact-btn:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}
body.dark-mode .jg-contact-btn:hover,
body.dark-mode .jg-contact-btn:focus { color: #a8b361; }
body.dark-mode .jg-contact-btn:focus-visible { outline-color: #e0e0e0; }

/* In the tiles expand panel, jg-rd.css styles ".bio-panel a" as a blue
   underlined link, which out-specifies .jg-contact-btn. Re-assert the button
   with a.jg-contact-btn (higher specificity) so it matches the cards button
   exactly: sage fill, white text, no underline, hover invert. Dark mode too. */
.bio-panel a.jg-contact-btn {
    display: inline-block;
    margin-top: 0.25rem;
    background-color: var(--sage);
    color: #ffffff;
    text-decoration: none;
}
.bio-panel a.jg-contact-btn:hover,
.bio-panel a.jg-contact-btn:focus {
    background-color: transparent;
    color: var(--sage);
    text-decoration: none;
}
body.dark-mode .bio-panel a.jg-contact-btn { color: #ffffff !important; }
body.dark-mode .bio-panel a.jg-contact-btn:hover,
body.dark-mode .bio-panel a.jg-contact-btn:focus { color: #a8b361 !important; }

/* Screen-reader-only helper for the button's hidden name label */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}