/* ============================================================
   JewishGen Communities Database - Town Page Stylesheet
   ------------------------------------------------------------
   Loaded once and cached across all ~6,500 community pages.
   Depends on jg-global.css for design tokens.
   ============================================================ */

/* Links in main: a link with a class (buttons, cards, tabs) takes its whole look from
   its own rule. A plain text link (no class) keeps an underline so it still reads as a
   link on any background. :where() keeps this at the same weight as main a, so any
   container rule such as .cf-foot a or .cdb-prose a still wins. */
main a { text-decoration: none; color: inherit; }
main a:where(:not([class])) { text-decoration: underline; }

/* -------- Loading / Error states -------- */
.page-state { max-width: 700px; margin: 80px auto; padding: 40px 30px; text-align: center; }
.page-state .state-icon { font-size: 48px; margin-bottom: 18px; opacity: 0.65; }
.page-state h2 { font-family: Georgia, serif; color: var(--navy); margin: 0 0 14px 0; font-size: 24px; }
.page-state p { color: var(--charcoal); font-size: 14px; line-height: 1.7; margin: 0 0 12px 0; }
.page-state a { color: var(--navy); font-weight: bold; text-decoration: underline dotted; }
.page-state a:hover { color: var(--sage); }

/* ==========================================================================
   TITLE BAND (Navy & Centered)
   ========================================================================== */
.jg-community-hero {
    background-color: #09497a;
    padding: 40px 30px 50px 30px;
    text-align: center;
}
.jg-community-hero__inner {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
}

/* Light Back Link for Navy Background */
.jg-back-link-light {
    display: inline-block;
    color: #a9c0d0;
    font-size: 0.8125rem;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
    transition: color 0.2s ease;
}
.jg-back-link-light:hover { color: var(--white); }

/* Typography */
.jg-community-hero h1 {
    color: var(--white);
    font-size: 2.8rem;
    margin: 0 0 10px 0;
    font-family: Georgia, serif;
    font-weight: normal;
}
.jg-community-hero .coords { color: var(--white); font-size: 0.9375rem; font-style: italic; color: #a9c0d0;
            margin: 0 auto;
            max-width: 580px;
            line-height: 1.6;
        }

@media (min-width: 900px) {
    .jg-back-link-light { position: absolute; top: 0; left: 0; margin-bottom: 0; }
}

/* -------- Main Tab Navigation Strip -------- */
.community-tabs-band { background-color: var(--cream); padding: 20px 50px; border-bottom: 1px solid #d1caba; }
.community-tabs-inner { max-width: 1180px; margin: 0 auto; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.main-tab-pill { background: var(--white); 
color: var(--navy); 
border: 1px solid #d1caba;
padding: 12px 20px; 
border-radius: 22px; 
font-size: 0.75rem; 
font-weight: bold; 
text-transform: uppercase; 
letter-spacing: 0.5px; 
cursor: pointer; 
transition: all 0.2s; 
box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
font-family: inherit; }

.main-tab-pill:hover { background: #fdfdfd; box-shadow: 0 4px 8px rgba(0,0,0,0.08); }
.main-tab-pill.active { background: #09497a; color: #ffffff; }

/* -------- Tab Panels Base Layout -------- */
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: jgFadeIn 0.2s ease-in; }
@keyframes jgFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* -------- Tab 1 Layout Components -------- */
.jg-town-card { 
    background: var(--white); 
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    margin-bottom: 30px; 
    overflow: hidden; 
    border: 1px solid rgba(0,0,0,0.05); 
}
.jg-town-card-title { 
    color: var(--navy); 
    font-size: 0.9375rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: bold; 
    margin: 0; 
    padding: 20px 30px; 
    border-bottom: 1px solid #d1caba; 
}
.jg-town-card-body { padding: 30px; }

/* Metadata Labels */
.meta-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--charcoal); opacity: 0.6; font-weight: bold; display: block; margin-bottom: 6px; }
.meta-value { font-size: 0.9375rem; color: var(--navy); font-weight: bold; line-height: 1.5; }

/* Bordered Jurisdiction Glance Cards */
.jurisdiction-card { border: 1px solid #d1caba; border-radius: 6px; padding: 15px; background: #fafafa; border-top-width: 3px; }
.jurisdiction-card.era-prewwi { border-top-color: var(--navy); }
.jurisdiction-card.era-interwar { border-top-color: #5a7a9a; }
.jurisdiction-card.era-postwar { border-top-color: var(--sage); }
.jurisdiction-card.era-present { border-top-color: #a0a0a0; }
.j-era { font-size: 0.625rem; text-transform: uppercase; font-weight: bold; color: var(--charcoal); opacity: 0.6; display: block; margin-bottom: 6px; letter-spacing: 0.5px;}
.j-town { font-size: 0.9375rem; font-weight: bold; color: var(--navy); display: block; margin-bottom: 2px; }
.j-dist { font-size: 0.8125rem; color: var(--charcoal); opacity: 0.8; line-height: 1.4; display: block; }

/* Notes Window */
.notes-box { background-color: var(--light-blue); border-left: 4px solid var(--sage); padding: 15px 20px; font-size: 0.875rem; color: var(--charcoal); line-height: 1.5; border-radius: 4px; margin-top: 10px; }

/* Map & Segmented Era Header Panel */
.era-tabs-header { background-color: transparent; padding: 15px; display: flex; gap: 10px; }
.era-pill { flex: 1; 
background: var(--white); 
color: var(--charcoal); 
border: 1px solid #d1caba; 
padding: 12px; 
border-radius: 22px; 
font-size: 0.9375rem; 
cursor: pointer; 
transition: all 0.2s; 
font-family: inherit; 
box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.era-pill:hover { border-color: var(--sage); color: var(--navy); box-shadow: 0 3px 7px rgba(0,0,0,0.10); }
.era-pill.active { background: #09497a; color: #ffffff; border-color: #09497a; font-weight: bold; }

.map-card { border-top: 4px solid var(--sage); 

}

.nearby-card { display: flex; flex-direction: column; }
.nearby-scroll-area { flex: 1; max-height: none; }

/* Historical Matrix Table */
.jg-era-table { width: 100%; border-collapse: collapse; text-align: left; }
.jg-era-table th { background: var(--navy); color: var(--white); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 1px; padding: 12px 15px; border-bottom: none; }
.jg-era-table td { padding: 15px; border-bottom: 1px solid var(--ecru); color: var(--navy); font-size: 0.875rem; font-weight: bold;}
.jg-era-table td:first-child { font-size: 0.75rem; color: var(--charcoal); text-transform: uppercase; opacity: 0.7; }
.jg-era-table td a { color: var(--navy); text-decoration: none; border-bottom: 1px dotted var(--navy); }
.jg-era-table td a:hover { color: var(--sage); border-bottom-color: var(--sage); }

/* Interactive Mapping System Frame */
.map-container iframe { width: 100%; height: 100%; border: none; display: block; }
.map-container { position: relative; background-color: var(--ecru); overflow: hidden; }
.map-era-badge { position: absolute; top: 12px; left: 12px; background-color: #09497a; color: white; font-size: 0.6875rem; font-weight: bold; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; z-index: 10; }
.map-coords-badge { position: absolute; bottom: 12px; left: 12px; background-color: rgba(255,255,255,0.9); color: var(--charcoal); font-size: 0.6875rem; padding: 4px 8px; border-radius: 4px; z-index: 10; }
.map-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--navy); opacity:0.5; text-align:center; padding:0 20px; }

/* Nearby Side Panel */
.nearby-card { border-top: 4px solid var(--sage); }
.nearby-heading { color: var(--navy); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; margin: 0; padding: 20px; border-bottom: 1px solid var(--ecru); }
.nearby-scroll-area { max-height: 400px; overflow-y: auto; padding: 0 20px 20px; }
.nearby-scroll-area::-webkit-scrollbar { width: 8px; }
.nearby-scroll-area::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.nearby-scroll-area::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.nearby-list { list-style: none; padding: 0; margin: 0; }
.nearby-list { display: flex; flex-direction: column; min-height: 100%; }
.nearby-list li { flex: 1 0 auto; }
.nearby-list li { padding: 12px 0; border-bottom: 1px dashed #d1caba; display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; }
.nearby-list li:last-child { border-bottom: none; }
.nearby-list li a { color: var(--navy); font-weight: bold; text-decoration: none; border-bottom: 1px dotted var(--navy); }
.nearby-list li a:hover { color: var(--sage); border-bottom-color: var(--sage); }
.nearby-dist { opacity: 0.6; font-size: 0.75rem; color: var(--charcoal); }

/* -------- Tab 2 -------- */
.resources-layout { max-width: 1180px; margin: 0 auto; padding: 35px 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.resource-card {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    border-top: 4px solid var(--navy);          
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);    
}.resource-card.sage-accent { border-top-color: var(--sage); }
.resource-card.muted-accent { border-top-color: #d1caba; }
.resource-card-header {
    padding: 16px 20px;
    background-color: transparent;              
    border-bottom: 1px solid var(--ecru);       
    display: flex; align-items: center; gap: 10px;
}
.resource-card-header h3 { margin: 0; font-size: 14px; font-weight: bold; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; }
.res-count { margin-left: auto; background-color: var(--navy); color: white; font-size: 11px; font-weight: bold; padding: 3px 9px; border-radius: 20px; }
.resource-card-body { padding: 16px 20px; }
.card-intro { font-size: 12px; color: var(--charcoal); opacity: 0.7; margin: 0 0 10px 0; line-height: 1.5; font-style: italic; }
.yizkor-item { padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 13px; line-height: 1.5; }
.yizkor-item:last-of-type { border-bottom: none; padding-bottom: 0; }
.yizkor-item a { color: var(--navy); text-decoration: underline; font-weight: bold; }
.yizkor-item a:hover { color: var(--sage); }
.yizkor-meta { font-size: 11px; color: var(--charcoal); opacity: 0.65; margin-top: 3px; }
.yizkor-more { display: inline-block; margin-top: 14px; padding: 6px 12px; font-size: 12px; font-weight: bold; color: var(--navy); border: 1px solid var(--navy); border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.yizkor-more:hover { background-color: var(--navy); color: var(--white); }
.kehila-item { padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 13px; }
.kehila-item:last-child { border-bottom: none; padding-bottom: 0; }
.kehila-item a { color: var(--navy); font-weight: bold; text-decoration: underline; }
.kehila-item a:hover { color: var(--sage); }
.jowbr-item { padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 13px; }
.jowbr-item:last-child { border-bottom: none; padding-bottom: 0; }
.jowbr-item a { color: var(--navy); font-weight: bold; text-decoration: underline; }
.jowbr-item a:hover { color: var(--sage); }
.landsmanshaft-item { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 13px; line-height: 1.5; }
.landsmanshaft-item:last-of-type { border-bottom: none; padding-bottom: 0; }
.landsmanshaft-item a { color: var(--navy); font-weight: bold; text-decoration: underline; }
.landsmanshaft-item a:hover { color: var(--sage); }
.empty-state { font-size: 13px; color: var(--charcoal); opacity: 0.6; font-style: italic; line-height: 1.6; margin: 0; }
.empty-state a { color: var(--navy); font-weight: bold; text-decoration: underline; font-style: normal; }
.empty-state a:hover { color: var(--sage); }
.records-layout { max-width: 1180px; margin: 0 auto; padding: 35px 50px; }
.records-coming-soon { background-color: var(--white); border-radius: 8px; border: 2px dashed #d1caba; }
.records-coming-soon h3 { color: var(--navy); margin: 0 0 12px 0; font-size: 22px; font-family: Georgia, serif; }
.records-coming-soon p { font-size: 14px; color: var(--charcoal); opacity: 0.7; max-width: 520px; margin: 0 auto; line-height: 1.7; }
.records-coming-soon a { color: var(--navy); font-weight: bold; text-decoration: underline; }
.records-coming-soon a:hover { color: var(--sage); }
.search-layout { max-width: 1180px; margin: 0 auto; padding: 35px 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
/* Search cards are navy in both modes (dark: #0d2a45, in the dark-mode block below), so
   their text is pinned to #ffffff; var(--white) would turn near-black in dark mode. */
.search-option-card { background-color: #09497a; border-radius: 10px; padding: 30px; color: #ffffff; border: none; }
.search-option-card h3 { margin: 0 0 10px 0; font-size: 17px; font-weight: bold; color: #ffffff; }
.search-option-card {
    background-color: #09497a;  
    border-radius: 8px;
    padding: 30px;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}.search-name-tag { background-color: rgba(255,255,255,0.14); color: #ffffff; font-size: 12px; padding: 4px 11px; border-radius: 20px; font-weight: bold; }
.btn-search-db { display: inline-block; background-color: var(--sage); color: var(--white); padding: 11px 22px; border-radius: 5px; font-weight: bold; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; border: none; cursor: pointer; font-family: inherit; text-decoration: none; }
.btn-search-db:hover { filter: brightness(1.12); color: var(--white); }
.connect-layout { max-width: 1180px; margin: 0 auto; padding: 35px 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.full-width { grid-column: 1 / -1; }
.connect-card {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    border-top: 4px solid var(--sage);        
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.connect-card.navy-accent { border-top-color: var(--navy); }
.connect-card-header {
    padding: 16px 20px;
    background-color: transparent;
    border-bottom: 1px solid var(--ecru);
    display: flex; align-items: center; gap: 10px;
}
.connect-card-header h3 { margin: 0; font-size: 13px; font-weight: bold; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; }

body.dark-mode .connect-card-header { background-color: transparent; border-bottom-color: #333; }.connect-card-body { padding: 16px 20px; }
/* JGFF block: navy in both modes (dark: #0d2a45 below); community.php writes white text
   into it, so the number is pinned to #ffffff too. */
.jgff-block { background-color: #09497a; border-radius: 8px; padding: 20px 25px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 10px; }
.jgff-label { font-size: 11px; color: #a9c0d0; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; }
.jgff-number { font-size: 42px; font-weight: bold; color: #ffffff; line-height: 1; font-family: Georgia, serif; }
.partner-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 14px; }
.partner-item a { color: var(--navy); font-weight: bold; text-decoration: underline; }
.partner-item a:hover { color: var(--sage); }
.bib-item { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 13px; line-height: 1.55; color: var(--charcoal); }
.bib-item a { color: var(--navy); text-decoration: underline dotted; }
.bib-item a:hover { color: var(--sage); }

/* Empty Slots Guard */
.tab-icon:empty, .res-icon:empty, .era-icon:empty, .con-icon:empty,
.partner-icon:empty, .map-ph-icon:empty, .cs-icon:empty, .state-icon:empty { display: none; }

/* == Dark Mode Structural Overrides == */
body.dark-mode .jg-overview-section,
body.dark-mode .map-communities-layout section,
body.dark-mode .nearby-panel,
body.dark-mode .jg-town-card { background-color: #1e1e1e !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; border-color: #333; }
body.dark-mode .jurisdiction-card { background-color: #121212 !important; border-color: #333; }
body.dark-mode .jg-community-hero { background-color: #0d2a45; }
body.dark-mode .community-tabs-band,
body.dark-mode .era-tabs-header { background-color: #121212 !important; border-color: #333; }
body.dark-mode .main-tab-pill { background-color: #1e1e1e; color: #a0a0a0; box-shadow: none; }
body.dark-mode .main-tab-pill.active { background: #0d2a45; color: #ffffff; }
body.dark-mode .era-pill { background-color: #1e1e1e; color: #a0a0a0; box-shadow: none; border-color: #333; }
body.dark-mode .era-pill:hover { background-color: #2a2a2a; color: #e0e0e0; border-color: #444; }
body.dark-mode .era-pill.active { background-color: var(--navy); color: var(--white); border-color: #000; }
body.dark-mode .jg-era-table th { background-color: #2a3d4f !important; color: #c8bca8 !important; }
body.dark-mode .jg-era-table td, body.dark-mode .nearby-list li { border-bottom-color: #2a2a2a !important; color: #e0e0e0 !important; }
body.dark-mode .jg-era-table td a, body.dark-mode .nearby-list li a { color: #e0e0e0 !important; }
body.dark-mode .notes-box { background-color: #2a2a2a !important; color: #c8c0b0 !important; border-left-color: #a8b361; }
body.dark-mode .notes-box strong { color: #a8b361 !important; }
body.dark-mode .map-source-note { background-color: #1e1e1e !important; border-top-color: #333 !important; color: #a0a0a0 !important; }
body.dark-mode .map-coords-badge { background-color: rgba(30,30,30,0.9); color: #c8c0b0; }
body.dark-mode .map-era-badge { background-color: #0d2a45; }
body.dark-mode .jg-community-hero h1 { color: #ffffff; }
body.dark-mode .res-count { background-color: #262626; }
body.dark-mode .resource-card-header { background-color: transparent; border-bottom-color: #333; }
body.dark-mode .search-option-card,
body.dark-mode .jgff-block { background-color: #0d2a45; }


/* -------- Responsive -------- */
@media (max-width: 900px) {
    .community-tabs-inner { justify-content: flex-start; }
    .era-tabs-header { flex-wrap: wrap; }
    .era-pill { flex: 1 0 45%; }
    .geo-layout, .resources-layout, .records-layout,
    .search-layout, .connect-layout { padding: 25px 20px; }
    .map-communities-layout { grid-template-columns: 1fr; }
    .overview-grid { grid-template-columns: 1fr; }
    .temporal-summary-grid { grid-template-columns: repeat(2, 1fr); }
.resources-layout, .search-layout, .connect-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SEARCH FORM (search.php)
   ========================================================================== */
.cf-layout { max-width: 920px; margin: 0 auto; padding: 35px 25px 50px; }
.cf-intro { font-size: 0.9375rem; color: var(--charcoal); line-height: 1.7; margin: 0 0 24px; }
.cf-section { margin-bottom: 28px; }
.cf-section:last-of-type { margin-bottom: 8px; }
.cf-section-title { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--charcoal); opacity: 0.6; font-weight: bold; margin-bottom: 12px; }
.cf-label { display: block; font-size: 0.8125rem; font-weight: bold; color: var(--navy); margin-bottom: 6px; }
.cf-input, .cf-select { font-family: inherit; font-size: 0.9375rem; padding: 10px 12px; border: 1px solid #d1caba; border-radius: 6px; background: var(--white); color: var(--charcoal); }
.cf-input:focus, .cf-select:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(147,155,81,0.15); }
.cf-town-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cf-town-row .cf-input { flex: 1 1 240px; }
.cf-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cf-grid3 .cf-select { width: 100%; }
.cf-note { font-size: 0.6875rem; color: var(--charcoal); opacity: 0.6; margin: 10px 0 0; }
.cf-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cf-select-sm { padding: 7px 10px; font-size: 0.875rem; }
.cf-help { font-size: 0.8125rem; color: var(--charcoal); opacity: 0.7; }
.cf-radio-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 0.875rem; color: var(--charcoal); }
.cf-coord { margin: 4px 0 14px 26px; font-size: 0.8125rem; color: var(--charcoal); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cf-coord-in { width: 44px; text-align: center; font-family: inherit; padding: 6px; border: 1px solid #d1caba; border-radius: 5px; }
.cf-coord select { padding: 6px 8px; border: 1px solid #d1caba; border-radius: 5px; font-family: inherit; }
.cf-coord input:disabled, .cf-coord select:disabled { opacity: 0.45; cursor: not-allowed; }
.cf-submit { margin-top: 8px; font-size: 0.9375rem; }
.cf-foot { text-align: center; font-size: 0.8125rem; margin-top: 22px; }
.cf-foot a { color: var(--navy); text-decoration: none; border-bottom: 1px dotted var(--navy); }
.cf-foot a:hover { color: var(--sage); border-bottom-color: var(--sage); }

body.dark-mode .cf-input, body.dark-mode .cf-select, body.dark-mode .cf-coord-in, body.dark-mode .cf-coord select { background: #1e1e1e; color: #e0e0e0; border-color: #333; }
body.dark-mode .cf-intro, body.dark-mode .cf-help, body.dark-mode .cf-radio-row, body.dark-mode .cf-coord { color: #a0a0a0; }
body.dark-mode .cf-foot a { color: #e0e0e0; border-bottom-color: #555; }

@media (max-width: 700px) { .cf-grid3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   SEARCH RESULTS (jgcd.php -> searchresults.html)
   ========================================================================== */
.sr-layout { max-width: 1180px; margin: 0 auto; padding: 35px 50px; }
.sr-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.sr-count { font-size: 0.875rem; color: var(--charcoal); }
.sr-count strong { color: var(--navy); font-size: 1.05rem; }

.sr-table-wrap { overflow-x: auto; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05); }
.sr-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 0.8125rem; }
.sr-table thead th { background: #09497a; color: #ffffff; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; padding: 12px 14px; white-space: nowrap; cursor: pointer; user-select: none; vertical-align: top; }
.sr-table thead th:hover { background: #0a528a; }
.sr-th-sub { display: block; font-weight: normal; opacity: 0.7; letter-spacing: 0; text-transform: none; font-size: 0.625rem; margin-top: 2px; }
/* CHW 2026-08: field-order key under each era header - tells the reader which
   stacked line in the cell is Town / District / Province / Country. Restores
   the labelling the legacy results table carried. */
.sr-th-cols { display: block; font-weight: normal; opacity: 0.85; letter-spacing: 0; text-transform: none; font-size: 0.625rem; white-space: normal; line-height: 1.35; margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.25); }
.sr-table thead th.sr-sort-asc::after,
.sr-table thead th.sr-sort-desc::after { content: ''; display: inline-block; margin-left: 6px; vertical-align: middle; border: 4px solid transparent; }
.sr-table thead th.sr-sort-asc::after  { border-bottom-color: #ffffff; }
.sr-table thead th.sr-sort-desc::after { border-top-color: #ffffff; }

.sr-table td { padding: 12px 14px; border-bottom: 1px solid var(--ecru); color: var(--navy); vertical-align: top; line-height: 1.5; }
.sr-table tr.sr-row:last-child td { border-bottom: none; }
.sr-table a { color: var(--navy); text-decoration: none; border-bottom: 1px dotted var(--navy); }
.sr-table a:hover { color: var(--sage); border-bottom-color: var(--sage); }
/* ---- whole-row link (CHW 2026-08, replaces the .sr-more logo icon) ---- */
.sr-table tr.sr-row--link { cursor: pointer; }
.sr-table tr.sr-row--link:hover td,
.sr-table tr.sr-row--link:focus-within td { background: var(--light-blue); }
.sr-table tr.sr-row--link:hover .sr-rowlink { color: var(--sage); border-bottom-color: var(--sage); }
.sr-rowlink:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 2px; }
.sr-coords { display: block; font-size: 0.6875rem; color: var(--charcoal); opacity: 0.7; margin-top: 4px; }
.sr-num { text-align: right; font-weight: bold; white-space: nowrap; }
.sr-empty td { text-align: center; color: var(--charcoal); opacity: 0.7; padding: 40px 20px; font-style: italic; }

.sr-pager { display: flex; align-items: center; justify-content: center; gap: 14px; }
#sr-pager-bottom { margin-top: 18px; }
.sr-page-btn { background: var(--white); color: var(--navy); border: 1px solid #d1caba; border-radius: 22px; padding: 7px 16px; font-size: 0.75rem; font-weight: bold; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.sr-page-btn:hover:not([disabled]) { border-color: var(--sage); }
.sr-page-btn[disabled] { opacity: 0.4; cursor: default; }
.sr-page-info { font-size: 0.8125rem; color: var(--charcoal); }

body.dark-mode .sr-table { background-color: #1e1e1e; }
body.dark-mode .sr-table-wrap { box-shadow: 0 4px 20px rgba(0,0,0,0.4); border-color: #333; }
body.dark-mode .sr-table thead th { background: #0d2a45; }
body.dark-mode .sr-table td { border-bottom-color: #2a2a2a; color: #e0e0e0; }
body.dark-mode .sr-table a { color: #e0e0e0; border-bottom-color: #555; }
/* --light-blue does not flip, so pin the row hover to the dark navy (CHW 2026-08) */
body.dark-mode .sr-table tr.sr-row--link:hover td,
body.dark-mode .sr-table tr.sr-row--link:focus-within td { background: #0d2a45; color: #ffffff; }
body.dark-mode .sr-table tr.sr-row--link:hover .sr-rowlink { color: #a8b361; border-bottom-color: #a8b361; }
body.dark-mode .sr-table tr.sr-row--link:hover .sr-coords { color: var(--light-blue); }
body.dark-mode .sr-coords { color: #a0a0a0; }
body.dark-mode .sr-page-btn { background: #1e1e1e; color: #e0e0e0; border-color: #333; }
body.dark-mode .sr-page-info, body.dark-mode .sr-count { color: #a0a0a0; }
body.dark-mode .sr-count strong { color: #e0e0e0; }

@media (max-width: 900px) { .sr-layout { padding: 25px 20px; } }

/* Language-code chips + spellings in the Alternate Names block. CHW */
.lang-tag {
    display: inline-block;
    background: var(--cream);
    color: var(--navy);
    border: 1px solid #d1caba;
    font-size: 0.625rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 11px;
    vertical-align: middle;
    margin-right: 2px;
}
.alt-names-extra { display: inline-block; font-size: 0.8125rem; color: var(--charcoal); opacity: 0.75; margin-top: 6px; }

body.dark-mode .lang-tag { background: #2a2a2a; color: #e0e0e0; border-color: #333; }
body.dark-mode .alt-names-extra { color: #a0a0a0; }

/* ============================================================================
   ADD TO jg-community.css  (append after the existing Tab 1 rules).
   These extend/override the current .jurisdiction-card and map styles for the
   rearranged Geography & Context tab: cards-as-toggle + Leaflet hero map.
   Bump the stylesheet cache version where it is linked (?v=8).
============================================================================ */

/* ---- cards-as-toggle header (label + sage call-out) ---- */
.era-card-strip-head { display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:10px; padding:18px 20px 6px; }
.era-card-strip-head .instr {
    font-family:inherit; font-size:0.8125rem; font-weight:bold; color:var(--white);
    background:var(--sage); padding:6px 14px; border-radius:20px;
    box-shadow:0 2px 6px rgba(0,0,0,0.12);
}

/* ---- the four jurisdiction cards, now interactive ---- */
.era-card-strip { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; padding:8px 20px 18px; }
.jurisdiction-card {                 /* base look already defined above; add behaviour */
    cursor:pointer; text-align:left; font:inherit; width:100%;
    transition:transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.jurisdiction-card:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,0.12); border-color:var(--sage); }
.jurisdiction-card:focus-visible { outline:2px solid var(--sage); outline-offset:2px; }

/* selected state (navy fill, hardcoded hex so dark mode keeps contrast) */
.jurisdiction-card.is-selected { background:#09497a; border-color:#09497a; box-shadow:0 4px 12px rgba(9,73,122,0.30); }
.jurisdiction-card.is-selected .j-era { color:#bcd3e6; opacity:1; }
.jurisdiction-card.is-selected .j-town,
.jurisdiction-card.is-selected .j-dist { color:#ffffff; opacity:1; }
.jurisdiction-card.is-selected .j-dist strong { color:#ffffff; }

/* ---- map hero shell ---- */
.map-card .era-tabs-header { display:none; }          /* old pill row retired */
.map-shell { position:relative; }
#map-container { height:430px; background:#efe7d6; position:relative; overflow:hidden; }
.leaflet-container { background:#efe7d6; font:inherit; }

/* country name + timeframe badge, stacked top-right */
.country-label { position:absolute; top:12px; right:12px; left:auto; z-index:600;
    font-family:Georgia, serif; font-size:1.15rem; font-weight:bold; color:var(--navy);
    text-align:right; text-shadow:0 1px 2px rgba(255,255,255,0.85); }
.map-era-badge { top:44px; right:12px; left:auto; }   /* override existing top-left position */

/* overlay-today control, lower-left */
.today-toggle { position:absolute; bottom:12px; left:12px; z-index:600; cursor:pointer;
    display:flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.92); border:1px solid #d1caba; border-radius:4px;
    padding:5px 9px; font-size:0.75rem; color:var(--navy); }

/* Map Country Labels */

.leaflet-tooltip.country-tt { background:transparent; border:none; box-shadow:none; padding:0;
    font-family:inherit; font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
    color:#6b5b47; text-shadow:0 1px 2px rgba(255,255,255,0.7); white-space:nowrap; pointer-events:none; }
.leaflet-tooltip.country-tt::before { display:none; }
.leaflet-tooltip.country-tt.is-hl { color:#7a2f17; font-size:12px; }
body.dark-mode .leaflet-tooltip.country-tt { color:#b9a98f; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
body.dark-mode .leaflet-tooltip.country-tt.is-hl { color:#e08a5f; }


/* present-day Google iframe overlay (covers the leaflet map; map stays alive underneath) */
#google-note { position:absolute; inset:0; height:430px; display:none; z-index:500; background:var(--ecru); }
#google-note iframe { width:100%; height:100%; border:none; display:block; }

/* leaflet tooltips: anchors (faint) + subject town (navy) */
.leaflet-tooltip.anchor-tt { background:transparent; border:none; box-shadow:none; padding:0; margin-left:3px;
    font-family:inherit; font-size:10px; font-weight:600; color:#46535f; }
.leaflet-tooltip.anchor-tt::before { display:none; }
.leaflet-tooltip.town-tt { background:transparent; border:none; box-shadow:none; padding:0;
    font-family:inherit; font-size:13px; font-weight:bold; color:var(--navy); }
.leaflet-tooltip.town-tt::before { display:none; }

/* ---- responsive: cards drop to 2x2 ---- */
@media (max-width: 900px) {
    .era-card-strip { grid-template-columns:repeat(2, 1fr); }
}

/* ---- dark mode ---- */
body.dark-mode #map-container,
body.dark-mode .leaflet-container { background:#15212b; }
body.dark-mode #google-note { background:#1e1e1e; }
body.dark-mode .country-label { color:#cfe0ee; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
body.dark-mode .leaflet-tooltip.anchor-tt { color:#c3ccd2; }
body.dark-mode .leaflet-tooltip.town-tt { color:#cfe0ee; }
body.dark-mode .today-toggle { background:rgba(30,30,30,0.92); color:#e0e0e0; border-color:#333; 
}

/* ============================================================================
   APPEND TO /Communities/jg-community.css
   ----------------------------------------------------------------------------
   For Prose Pages
============================================================================ */


/* ---------------------------------------------------------------------------
   1. PROSE COLUMN
   Sits in the 1fr side of .rd-body-inner--narrow, so it does NOT set its own
   width or background - the global wrapper does that. Long-form text wants a
   measure of roughly 70-75 characters, which the grid column already gives.
--------------------------------------------------------------------------- */

.cdb-prose p {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--charcoal);
    margin: 0 0 1.125rem;
    max-width: 68ch;              /* keeps the measure sane on wide screens */
}
.cdb-prose a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px dotted var(--navy);
}
.cdb-prose a:hover { color: var(--sage); border-bottom-color: var(--sage); }
.cdb-prose a:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
body.dark-mode .cdb-prose a { color: #8ab0c9; border-bottom-color: #55707f; }
body.dark-mode .cdb-prose a:hover { color: #a8b361; border-bottom-color: #a8b361; }

/* Lead paragraph - the one-sentence summary under the title band */
.cdb-lead {
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
    color: var(--navy) !important;
    margin-bottom: 2rem !important;
}
body.dark-mode .cdb-lead { color: #e0e0e0 !important; }


/* ---------------------------------------------------------------------------
   2. SIDEBAR - IN-PAGE CONTENTS
   ----------------------------------------------------------------------------
   The sidebar reuses .rd-sidebar-card wholesale. These are the only additions:
   this sidebar links to ANCHORS on the current page, not to sibling pages, so
   the .active state cannot come from jg-rd-sidebar.js path matching. A small
   scrollspy in About.html sets it instead, and .is-current is used rather than
   .active so the two mechanisms never fight each other.
--------------------------------------------------------------------------- */

.cdb-toc-card a.is-current {
    color: var(--navy);
    border-left-color: var(--navy);
    background-color: var(--ecru);
}
body.dark-mode .cdb-toc-card a.is-current {
    color: #e0e0e0;
    border-left-color: #a8b361;
    background-color: #262626;
}

/* Hidden below the grid breakpoint - a sticky in-page nav is of no use once
   the sidebar has stacked above the content it points into. */
@media (max-width: 900px) {
    .cdb-toc-card { display: none; }
}


/* ---------------------------------------------------------------------------
   3. HEADINGS
--------------------------------------------------------------------------- */

.cdb-heading {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--navy);
    margin: 2.75rem 0 1rem;
    padding-bottom: 0.5rem;
    position: relative;
    scroll-margin-top: 1.5rem;      /* anchors do not land flush against the top */
}
.cdb-heading:first-child { margin-top: 0; }
.cdb-heading::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 44px; height: 3px;
    background-color: var(--sage);
    border-radius: 2px;
}
body.dark-mode .cdb-heading { color: #e0e0e0; }

.cdb-subheading {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1875rem;
    font-weight: normal;
    color: var(--navy);
    margin: 2rem 0 0.75rem;
    scroll-margin-top: 1.5rem;
}
body.dark-mode .cdb-subheading { color: #e0e0e0; }

/* Feature heading inside the numbered Locality Page list */
.cdb-feature {
    font-size: 0.9375rem;
    font-weight: bold;
    color: var(--navy);
    margin: 0 0 0.5rem;
    text-transform: none;
}
body.dark-mode .cdb-feature { color: #a8b361; }


/* ---------------------------------------------------------------------------
   4. CALLOUT BOXES
   The two grey floated sidebars from the 2012 source, now inline and
   full-width per CHW.
--------------------------------------------------------------------------- */

.cdb-callout {
    background-color: var(--white);
    border: 1px solid #d1caba;
    border-left: 5px solid var(--sage);
    border-radius: 0 8px 8px 0;
    padding: 1.5rem 1.75rem 1.25rem;
    margin: 2rem 0;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
body.dark-mode .cdb-callout {
    background-color: #1e1e1e;
    border-color: #333;
    border-left-color: #a8b361;
    box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}
/* Question variant - navy rule, for the "why isn't my town" FAQ */
.cdb-callout--question { border-left-color: #09497a; }
body.dark-mode .cdb-callout--question { border-left-color: #8ab0c9; }

.cdb-callout__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem;
    font-weight: normal;
    color: var(--navy);
    margin: 0 0 0.875rem;
    line-height: 1.35;
}
body.dark-mode .cdb-callout__title { color: #e0e0e0; }
.cdb-callout p { max-width: none; }
.cdb-callout p:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
   5. LISTS
--------------------------------------------------------------------------- */

.cdb-list {
    margin: 0 0 1.125rem;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--charcoal);
    max-width: 68ch;
}
.cdb-list li { margin-bottom: 0.5rem; }
.cdb-list li::marker { color: var(--sage); }

/* Numbered Locality Page features */
.cdb-numbered {
    margin: 1.5rem 0 0;
    padding-left: 1.5rem;
}
.cdb-numbered > li {
    margin-bottom: 1.75rem;
    padding-left: 0.25rem;
}
.cdb-numbered > li::marker {
    color: var(--sage);
    font-weight: bold;
}


/* ---------------------------------------------------------------------------
   6. COMPARISON TABLE
   Navy header hardcoded - var(--navy) as a background flips to light gray in
   dark mode and would wash out. Stacks to labelled blocks below 720px using
   the data-label attributes in the markup, so it stays readable on a phone
   instead of forcing a horizontal scroll.
--------------------------------------------------------------------------- */

.cdb-table-wrap {
    margin: 1.5rem 0 2rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0,0,0,0.06);
    border: 1px solid #d1caba;
}
body.dark-mode .cdb-table-wrap { border-color: #333; box-shadow: 0 3px 14px rgba(0,0,0,0.35); }

.cdb-compare {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    font-size: 0.8125rem;
}
body.dark-mode .cdb-compare { background-color: #1e1e1e; }

.cdb-compare__caption {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.cdb-compare thead th {
    background-color: #09497a;
    color: #ffffff;
    text-align: left;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 0.875rem;
    vertical-align: bottom;
}
body.dark-mode .cdb-compare thead th { background-color: #0d2a45; }

.cdb-compare tbody th {
    text-align: left;
    background-color: var(--cream);
    color: var(--navy);
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.875rem;
    vertical-align: top;
    width: 22%;
}
body.dark-mode .cdb-compare tbody th { background-color: #262626; color: #e0e0e0; }

.cdb-compare td {
    padding: 0.875rem;
    border-bottom: 1px solid var(--ecru);
    color: var(--charcoal);
    vertical-align: top;
    line-height: 1.6;
}
body.dark-mode .cdb-compare td { border-bottom-color: #2a2a2a; }
.cdb-compare tbody tr:last-child td,
.cdb-compare tbody tr:last-child th { border-bottom: none; }

.cdb-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ---------------------------------------------------------------------------
   7. LAST UPDATED
--------------------------------------------------------------------------- */

.cdb-lastupdate {
    margin-top: 3rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid #d1caba;
    font-size: 0.75rem !important;
    font-style: italic;
    color: #5b6161 !important;
}
body.dark-mode .cdb-lastupdate { border-top-color: #333; color: #a8a8a8 !important; }


/* ---------------------------------------------------------------------------
   8. RESPONSIVE
   The 900px breakpoint that collapses .rd-body-inner--narrow to one column
   already exists in jg-global.css - not repeated here.
--------------------------------------------------------------------------- */

@media (max-width: 720px) {
    .cdb-callout { padding: 1.25rem 1.25rem 1rem; }
    .cdb-heading { font-size: 1.3125rem; }

    /* Table stacks into labelled blocks rather than scrolling sideways */
    .cdb-table-wrap { border: none; box-shadow: none; overflow: visible; }
    .cdb-compare, .cdb-compare tbody, .cdb-compare tr,
    .cdb-compare td, .cdb-compare tbody th { display: block; width: auto; }
    .cdb-compare thead { display: none; }
    .cdb-compare tbody tr {
        border: 1px solid #d1caba;
        border-radius: 8px;
        margin-bottom: 1rem;
        overflow: hidden;
    }
    body.dark-mode .cdb-compare tbody tr { border-color: #333; }
    .cdb-compare tbody th { width: auto; border-bottom: 1px solid #d1caba; }
    body.dark-mode .cdb-compare tbody th { border-bottom-color: #333; }
    .cdb-compare td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.625rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--navy);
        margin-bottom: 0.25rem;
    }
    body.dark-mode .cdb-compare td::before { color: #a8b361; }
    .cdb-compare tbody tr:last-child td { border-bottom: 1px solid var(--ecru); }
    .cdb-compare tbody tr td:last-child { border-bottom: none; }
}

/* ============================================================================
   TAB 3 - RECORDS & CATALOGUE, and the Yizkor translations card
   Markup is built by community.php (records_body, yb_translations_body) from
   /Communities/links.json; class names here must match that code. Reuses
   .jg-town-card / .res-count / .card-intro and .jg-tag-sage (jg-global.css).
   Tag colours follow the metadata system: sage = record type, charcoal =
   years, cream + navy border = topic (the encyclopedia chip).
   If the catalogue pages get a charcoal "years" tag of their own, move it to
   jg-global.css and delete .records-tag--years here.
   ============================================================================ */
.records-card .jg-town-card-title { display: flex; align-items: center; gap: 10px; }
.records-card .jg-town-card-title .res-count { margin-left: 0; }
.records-list { margin-top: 4px; }
.records-item { padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 13px; line-height: 1.5; }
.records-item:last-child { border-bottom: none; padding-bottom: 0; }
.records-item > a { color: var(--navy); font-weight: bold; text-decoration: underline; }
.records-item > a:hover { color: var(--sage); }
.records-count { margin-left: 10px; font-size: 11px; color: var(--charcoal); opacity: 0.65; white-space: nowrap; }
.records-tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }
.records-tag { font-size: 0.625rem; padding: 2px 8px; letter-spacing: 1px; }
.records-tag--years { display: inline-block; background-color: var(--charcoal); color: #ffffff; font-weight: bold; text-transform: uppercase; border-radius: 3px; }
.records-generated { margin: 14px 0 0 0; font-size: 11px; color: var(--charcoal); opacity: 0.55; font-style: italic; }
.records-empty { padding: 40px 20px; text-align: center; }

/* Yizkor card: encyclopedia chip (topic tag), YBIP link, native disclosure */
.yizkor-group { display: inline-block; background-color: var(--cream); color: var(--navy); border: 1px solid var(--navy); border-radius: 3px; font-size: 0.625rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; padding: 1px 6px; margin-right: 4px; vertical-align: middle; }
.yizkor-ybip { font-size: 11px; font-weight: normal; }
.yizkor-more-list > summary { cursor: pointer; list-style: none; margin: 10px 0 2px 0; font-size: 12px; font-weight: bold; color: var(--navy); }
.yizkor-more-list > summary::-webkit-details-marker { display: none; }
.yizkor-more-list > summary::before { content: "+ "; }
.yizkor-more-list[open] > summary::before { content: "- "; }
.yizkor-more-list > summary:hover { color: var(--sage); }
.yizkor-more-list > summary:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* Dark mode: --charcoal flips to #a0a0a0, which fails as a tag background */
body.dark-mode .records-item { border-bottom-color: #2a2a2a; }
body.dark-mode .records-tag--years { background-color: #2a2a2a; color: #e0e0e0; }
body.dark-mode .records-count, body.dark-mode .records-generated { color: #a0a0a0; }
body.dark-mode .yizkor-group { background-color: #2a2a2a; color: #e0e0e0; border-color: #555; }
/* Bibliography button hover: the light rule fills with var(--navy), which is light grey in dark mode */
body.dark-mode .yizkor-more:hover { background-color: #262626; color: #e0e0e0; }