/* ============================================================
   jg-blog.css - JewishGen Blog page styles
   Lives at /blog/jg-blog.css. Used only by /blog/index.html,
   which loads it after Bootstrap and /jg-global.css with a ?v=
   cache-buster - bump that number whenever this file changes.
   Filename is lowercase; the server path is case-sensitive.

   Every class here is namespaced .jg-blog-*. Do not use bare
   .dropdown / .dropbtn / .dropdown-content: jg-global.css uses
   those names for the main site nav, and rules here would
   restyle it.

   Colors come from the :root tokens in jg-global.css. Literal
   hex values appear only in dark-mode overrides.
   ============================================================ */


/* ============================================================
   1. FILTER BAR
   Sits under .page-title-band. The markup is
   <div role="navigation">, not <nav>, which would pick up the
   global nav styles.
   ============================================================ */
.jg-blog-filters {
    background-color: var(--white);
    border-bottom: 1px solid #d1caba;
    padding: 14px 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    /* Sticky so the filters survive a long feed. To unstick,
       delete the next three declarations. */
    position: sticky;
    top: 0;
    z-index: 20;
}
body.dark-mode .jg-blog-filters {
    background-color: #1a1a1a;
    border-bottom-color: #333;
}

.jg-blog-filters__inner {
    max-width: 980px;   /* matches .jg-band-content below it */
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.jg-blog-filters__label {
    font-size: 0.6875rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--charcoal);
    opacity: 0.6;
    margin-right: 2px;
}

/* Right-hand cluster: search trigger + reset. Grouped so the
   auto margin lands once, rather than two flex children each
   claiming a share of the free space. */
.jg-blog-filters__end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.jg-blog-filters__search {
    font-family: inherit;
    cursor: pointer;
}
.jg-blog-filters__search:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 2px;
}
.jg-blog-filters__search[hidden] { display: none; }

/* "All Posts" reset link */
.jg-blog-filters__reset {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.jg-blog-filters__reset:hover { color: var(--sage); }
.jg-blog-filters__reset:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 3px;
}
body.dark-mode .jg-blog-filters__reset { color: #e0e0e0; }
body.dark-mode .jg-blog-filters__reset:hover { color: #a8b361; }


/* ============================================================
   2. FILTER MENUS (button + panel)
   The button is the global .jg-btn .jg-btn--secondary, so its
   base and dark-mode styles live in jg-global.css. Only the
   positioning, caret and open state are here. The open state is
   toggled by the FILTER MENUS script in index.html via
   aria-expanded and .is-open.
   ============================================================ */
.jg-blog-filter {
    position: relative;
    display: inline-block;
}

.jg-blog-filter__btn {
    font-family: inherit;
    cursor: pointer;
    position: relative;
    padding-right: 2.1rem;   /* room for the caret */
}
.jg-blog-filter__btn:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 2px;
}

/* Caret is drawn with borders, not a glyph, so the file needs
   no special characters. */
.jg-blog-filter__btn::after {
    content: "";
    position: absolute;
    right: 0.85rem;
    top: 50%;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.15s ease;
}
.jg-blog-filter__btn[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Open state matches the secondary button's hover, so an open
   filter reads as pressed. */
.jg-blog-filter__btn[aria-expanded="true"] {
    background-color: #09497a;
    color: #ffffff;
    filter: none;
}
body.dark-mode .jg-blog-filter__btn[aria-expanded="true"] {
    background-color: #e0e0e0;
    color: #121212;
}

/* ---- Menu panel ---- */
.jg-blog-filter__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    background-color: var(--white);
    border-top: 3px solid var(--sage);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    min-width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 4px 0;
}
.jg-blog-filter__menu.is-open { display: block; }
body.dark-mode .jg-blog-filter__menu {
    background-color: #1e1e1e;
    border-top-color: #a8b361;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* Two-column Country/Region menu. CSS columns, not grid, on
   purpose: columns fill down then across, so the list reads
   alphabetically; a grid would fill across each row. */
.jg-blog-filter__menu--2col {
    display: none;
    min-width: 420px;
}
.jg-blog-filter__menu--2col.is-open {
    display: block;
    column-count: 2;
    column-gap: 4px;
}
.jg-blog-filter__menu--2col a {
    break-inside: avoid;
}

.jg-blog-filter__menu a {
    display: block;
    padding: 0.5625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: normal;
    color: var(--navy);
    text-decoration: none;
    line-height: 1.4;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.jg-blog-filter__menu a:hover {
    background-color: var(--cream);
    font-weight: bold;
    color: var(--navy);
    text-decoration: none;
}
.jg-blog-filter__menu a:focus-visible {
    outline: none;
    background-color: var(--cream);
    border-left-color: var(--sage);
    font-weight: bold;
}
body.dark-mode .jg-blog-filter__menu a { color: #e0e0e0; }
body.dark-mode .jg-blog-filter__menu a:hover,
body.dark-mode .jg-blog-filter__menu a:focus-visible {
    background-color: #2a2a2a;
    color: #a8b361;
}

/* Current category - aria-current is set by the ACTIVE CATEGORY
   script in index.html */
.jg-blog-filter__menu a[aria-current="true"] {
    font-weight: bold;
    border-left-color: var(--sage);
    background-color: var(--cream);
}
body.dark-mode .jg-blog-filter__menu a[aria-current="true"] {
    background-color: #2a2a2a;
    border-left-color: #a8b361;
    color: #a8b361;
}


/* ============================================================
   3. FEED
   Ecru band behind the white post cards. The inner width comes
   from the global .jg-band-content.

   flex:1 on both rules keeps the ecru reaching the footer on
   short pages: body is a flex column with min-height:100vh, and
   main must be a flex column too for the wrap to grow.

   Dark mode: --ecru becomes #1a1a1a on a #121212 body, with
   cards at #1e1e1e - the same three steps the RD pages use.
   ============================================================ */
.jg-blog-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.jg-blog-feed-wrap {
    background-color: var(--ecru);
    flex: 1;
}

.jg-blog-feed {
    min-height: 40vh;   /* stops the footer jumping while DIB loads */
}


/* ============================================================
   4. DROPINBLOG OVERRIDES
   Styles DIB's injected markup inside #dib-posts.

   DIB's own Custom CSS box (dashboard > Code & Layout) loads
   AFTER this file and wins over anything here. Check it first
   when a rule here seems to have no effect.
   ============================================================ */

/* ---- Baseline inside the injection target ---- */
#dib-posts img { max-width: 100%; height: auto; }
#dib-posts a { color: var(--navy); }
#dib-posts a:hover { color: var(--sage); }
body.dark-mode #dib-posts a { color: #a8b361; }

/* DIB prints its own <h1>; the page already has one in
   .page-title-band. Delete this rule if the title band is
   ever removed. */
#dib-posts .dib-heading { display: none; }

/* DIB's built-in category menu is replaced by the filter bar.
   Its search button lives inside this menu, so index.html has
   its own Search Posts button. */
.dib-cat-menu { display: none !important; }
#dib-posts .dib-scroll-arrow { display: none !important; }


/* ============================================================
   4a. POST LIST
   Root carries .dib-list and .dib-col-2 (two-column layout,
   set in the DIB dashboard). Each card is a single <a>.
   ============================================================ */
/* Two-column grid. The !important flags are needed: DIB's own
   sheet and the dashboard Custom CSS both load after this file.
   The child rule cancels DIB's widths, floats and margins, any
   of which collapse the grid to one column. min-width:0 stops a
   long title from widening its column. */
#dib-posts .dib-post-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.875rem !important;
    align-items: stretch;
    float: none !important;
}
#dib-posts .dib-post-wrap > .dib-post {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    float: none !important;
    margin: 0 !important;
}

#dib-posts .dib-post-wrap .dib-post {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#dib-posts .dib-post-wrap .dib-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    text-decoration: none;
    color: inherit;
}
#dib-posts .dib-post-wrap .dib-post:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 3px;
}
body.dark-mode #dib-posts .dib-post-wrap .dib-post {
    background-color: #1e1e1e;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Featured images come in very different sizes, so they are
   cropped to a fixed height with object-fit. The <img> carries
   width/height attributes, hence the overrides. */
#dib-posts .dib-post-wrap .dib-post-featured-image {
    width: 100% !important;
    max-width: none !important;
    height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--cream);
}
body.dark-mode #dib-posts .dib-post-wrap .dib-post-featured-image {
    background-color: #2a2a2a;
}

#dib-posts .dib-post-wrap .dib-post-text {
    padding: 1.25rem;
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    position: static;
}

/* Title stays in flow - see the .dib-meta-text note below. */
#dib-posts .dib-post-wrap .dib-post-title {
    position: static !important;
    float: none !important;
}

#dib-posts .dib-post-wrap .dib-post-title {
    color: var(--navy);
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 1.1875rem;
    line-height: 1.3;
    margin: 0 0 0.625rem 0;
}
body.dark-mode #dib-posts .dib-post-wrap .dib-post-title { color: #e0e0e0; }
#dib-posts .dib-post-wrap .dib-post:hover .dib-post-title { color: var(--sage); }
body.dark-mode #dib-posts .dib-post-wrap .dib-post:hover .dib-post-title { color: #a8b361; }

/* Byline row, pinned to the card bottom with margin-top:auto.
   DIB absolutely positions this line; inside the flex column
   that would drop it on top of the title, so position:static
   and float:none are required.
   .dib-no-author appears even when there is an author (it seems
   to mean "no author photo") - do not use it as a hook. */
#dib-posts .dib-post-wrap .dib-meta-text {
    position: static !important;
    float: none !important;
    clear: both;
    width: auto !important;
    margin: auto 0 0 0;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 0.75rem;
    color: var(--charcoal);
    opacity: 0.75;
}
body.dark-mode #dib-posts .dib-post-wrap .dib-meta-text {
    border-top-color: #333;
    color: #a0a0a0;
    opacity: 1;
}
#dib-posts .dib-meta-item { display: inline; }
#dib-posts .dib-meta-date time,
#dib-posts .dib-post-date time {
    font-style: normal;
    letter-spacing: 0.3px;
}

/* ---- Pagination ---- */
#dib-posts .dib-pagination {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
}
#dib-posts .dib-pagination a {
    display: inline-block;
    background-color: var(--sage);
    color: #ffffff;
    padding: 0.6875rem 1.5rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: filter 0.2s ease;
}
#dib-posts .dib-pagination a:hover { filter: brightness(1.1); color: #ffffff; }
#dib-posts .dib-pagination a:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
}
body.dark-mode #dib-posts .dib-pagination a {
    background-color: #a8b361;
    color: #121212;
}


/* ============================================================
   4b. SINGLE POST
   ============================================================ */
#dib-posts .dib-post-single {
    max-width: 720px;   /* reading measure - the band is wider */
    margin: 0 auto;
}

#dib-posts .dib-post-single .dib-post-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 2.25rem;
    line-height: 1.15;
    color: var(--navy);
    margin: 0 0 0.75rem 0;
}
body.dark-mode #dib-posts .dib-post-single .dib-post-title { color: #e0e0e0; }

#dib-posts .dib-post-single .dib-meta-text {
    opacity: 1;
    color: var(--charcoal);
    border-top: none;
    border-bottom: 2px solid var(--sage);
    padding: 0 0 0.875rem 0;
    margin: 0 0 1.75rem 0;
    font-size: 0.8125rem;
    line-height: 1.9;
}
#dib-posts .dib-meta-author-link { font-weight: bold; }

/* DIB prints author and categories with no separator between
   them; this adds the same " | " DIB uses between categories. */
#dib-posts .dib-meta-author + .dib-post-category-text::before {
    content: "| ";
    opacity: 0.5;
    font-weight: normal;
}

/* Byline category links stay plain links, not pills: DIB puts
   literal " | " text between them, which CSS cannot hide.
   Pills would need a script to strip those. */
#dib-posts .dib-post-category-text a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Post body ---- */
#dib-posts .dib-post-content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--charcoal);
}
body.dark-mode #dib-posts .dib-post-content { color: #c8c8c8; }
#dib-posts .dib-post-content p { margin: 0 0 1.25rem 0; }
#dib-posts .dib-post-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
#dib-posts .dib-post-content img {
    border-radius: 6px;
    margin: 1.25rem 0;
}
#dib-posts .dib-post-content blockquote {
    border-left: 4px solid var(--sage);
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    font-style: italic;
}
#dib-posts .dib-post-content sup { line-height: 0; }

/* Search-result highlighting */
#dib-posts .dib-highlight mark,
#dib-posts mark {
    background-color: var(--light-green);
    color: var(--charcoal);
    padding: 0 2px;
}
body.dark-mode #dib-posts mark { color: #121212; }

/* ---- Author red -> sage ----
   Post authors use inline red for bullets and dividers. It is
   shown as sage in both modes. !important is required to beat
   inline styles. Only the spellings listed are caught; rgb()
   or other forms will still show red - add them here. */
#dib-posts .dib-post-content [style*="color:red"],
#dib-posts .dib-post-content [style*="color: red"],
#dib-posts .dib-post-content [style*="color:#FF0000"],
#dib-posts .dib-post-content [style*="color:#ff0000"],
#dib-posts .dib-post-content [style*="color: #FF0000"],
#dib-posts .dib-post-content [style*="color: #ff0000"],
#dib-posts .dib-post-content [style*="color:#F00"],
#dib-posts .dib-post-content [style*="color:#f00"],
#dib-posts .dib-post-content font[color="red"] {
    color: var(--sage) !important;
}

/* <hr> dividers in post bodies */
#dib-posts .dib-post-content hr {
    border: none;
    border-top: 1px solid var(--cream);
    margin: 1.75rem auto;
    width: 40%;
}

/* ---- Back link ---- */
#dib-posts .dib-post-back-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}
#dib-posts .dib-post-back-link:hover { text-decoration: underline; }


/* ============================================================
   4c. AUDIO PLAYER (Blog Voice AI)
   Sits between the byline and the post body on single posts.

   The control icons are inline <svg> with no fill, so every
   fill below is set explicitly - without it they are black and
   vanish in dark mode. DIB's script sets the visualizer bars'
   height and margin inline; do not set either here.

   The shell copies .rd-dir-card from jg-rd.css, which is not
   loaded on this page - keep the two in step. Dark mode uses
   #1e1e1e, not var(--white), which would match the page.
   ============================================================ */
#dib-posts #dib-audio,
#dib-audio {
    background-color: var(--white);
    border: 1px solid var(--cream);
    border-top: 3px solid var(--sage);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 1rem 1.25rem 0.875rem;
    margin: 0 0 2rem 0;
}
/* Keep both selectors: the light rule's #dib-posts #dib-audio
   outranks a lone body.dark-mode #dib-audio. */
body.dark-mode #dib-posts #dib-audio,
body.dark-mode #dib-audio {
    background-color: #1e1e1e;
    border-color: #333;
    border-top-color: #a8b361;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

#dib-audio .dib-audio-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Play / pause */
#dib-audio .dib-audio-play-pause {
    background-color: var(--sage);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: filter 0.2s ease;
}
#dib-audio .dib-audio-play-pause:hover { filter: brightness(1.1); }
#dib-audio .dib-audio-play-pause:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
}
#dib-audio .dib-audio-play-pause svg {
    height: 18px;
    width: auto;
    fill: #ffffff;          /* explicit - the markup sets none */
    pointer-events: none;
}
body.dark-mode #dib-audio .dib-audio-play-pause { background-color: #a8b361; }
body.dark-mode #dib-audio .dib-audio-play-pause svg { fill: #121212; }
body.dark-mode #dib-audio .dib-audio-play-pause:focus-visible {
    outline-color: #e0e0e0;
}

/* Generating spinner */
#dib-audio .dib-audio-generating {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #ffffff;
    animation: jgBlogSpin 0.9s linear infinite;
}
@keyframes jgBlogSpin { to { transform: rotate(360deg); } }

/* Visualizer - width and color only. Height/margins are inline. */
#dib-audio .dib-audio-visualizer {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 30px;
    flex-shrink: 0;
}
#dib-audio .dib-audio-visualizer i {
    display: block;
    width: 3px;
    border-radius: 2px;
    background-color: var(--sage);
    transition: height 0.15s ease;
}
body.dark-mode #dib-audio .dib-audio-visualizer i { background-color: #a8b361; }

#dib-audio .dib-audio-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy);
    flex: 1;
    min-width: 0;
}
body.dark-mode #dib-audio .dib-audio-text { color: #e0e0e0; }

/* Right-hand control cluster */
#dib-audio .dib-audio-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
#dib-audio .dib-audio-group button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--navy);
    line-height: 1;
    transition: background-color 0.15s ease;
}
#dib-audio .dib-audio-group button:hover {
    background-color: rgba(9,73,122,0.1);
}
#dib-audio .dib-audio-group button:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 1px;
}
#dib-audio .dib-audio-group svg {
    height: 20px;
    width: auto;
    fill: var(--navy);       /* explicit - the markup sets none */
    display: block;
}
body.dark-mode #dib-audio .dib-audio-group button { color: #e0e0e0; }
body.dark-mode #dib-audio .dib-audio-group button:hover {
    background-color: rgba(255,255,255,0.1);
}
body.dark-mode #dib-audio .dib-audio-group svg { fill: #e0e0e0; }

/* Progress bar */
#dib-audio .dib-audio-progress-container {
    position: relative;
    height: 6px;
    background-color: rgba(9,73,122,0.15);
    border-radius: 3px;
    margin-top: 0.875rem;
    cursor: pointer;
}
body.dark-mode #dib-audio .dib-audio-progress-container {
    background-color: rgba(255,255,255,0.15);
}
#dib-audio .dib-audio-progress {
    position: relative;
    height: 100%;
    width: 0;
    background-color: var(--sage);
    border-radius: 3px;
}
body.dark-mode #dib-audio .dib-audio-progress { background-color: #a8b361; }

#dib-audio .dib-audio-drag-handle {
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--sage);
    border: 2px solid var(--white);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    cursor: grab;
}
body.dark-mode #dib-audio .dib-audio-drag-handle {
    background-color: #a8b361;
    border-color: #2a2a2a;
}
#dib-audio .dib-audio-dragging .dib-audio-drag-handle,
#dib-audio .dib-drag-touching { cursor: grabbing; }

/* States DIB toggles at runtime */
#dib-audio .dib-audio-progress-container.dib-audio-buffering {
    opacity: 0.55;
}
#dib-audio .dib-audio-progress-container.dib-audio-progress-disabled {
    opacity: 0.4;
    cursor: default;
}

/* Third-party disclaimer line */
#dib-audio .dib-audio-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--charcoal);
    opacity: 0.7;
}
#dib-audio .dib-audio-disclaimer svg {
    fill: var(--charcoal);   /* explicit - the markup sets none */
    flex-shrink: 0;
    margin-top: 3px;
}
#dib-audio .dib-audio-disclaimer a {
    color: var(--navy);
    text-decoration: underline;
}
body.dark-mode #dib-audio .dib-audio-disclaimer { color: #a0a0a0; opacity: 1; }
body.dark-mode #dib-audio .dib-audio-disclaimer svg { fill: #a0a0a0; }


/* ============================================================
   4d. RELATED ARTICLES
   Cards copy .rd-dir-card and the grid copies .rd-dir-grid from
   jg-rd.css (not loaded here) - keep them in step. 3 columns,
   then 2 at 900px, then 1 at 640px.

   These class names have not been checked against DIB's real
   related-posts markup. Several likely names are listed; once
   the real ones are known, the unused selectors can go.
   ============================================================ */

/* ---- Section wrapper ---- */
#dib-posts .dib-related-posts,
#dib-posts .dib-related,
#dib-posts .dib-post-related {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--cream);
}
body.dark-mode #dib-posts .dib-related-posts,
body.dark-mode #dib-posts .dib-related,
body.dark-mode #dib-posts .dib-post-related {
    border-top-color: #333;
}

/* ---- "Related Articles" heading: .rd-dir-section-label treatment,
        with the 40px sage accent line drawn as ::after ---- */
#dib-posts .dib-related-posts > h2,
#dib-posts .dib-related-posts > h3,
#dib-posts .dib-related > h2,
#dib-posts .dib-related > h3,
#dib-posts .dib-related-posts-title,
#dib-posts .dib-related-title {
    display: block;
    font-family: 'Arial', sans-serif;
    font-size: 0.8125rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    color: var(--navy);
    margin: 0 0 8px 0;
}
body.dark-mode #dib-posts .dib-related-posts > h2,
body.dark-mode #dib-posts .dib-related-posts > h3,
body.dark-mode #dib-posts .dib-related > h2,
body.dark-mode #dib-posts .dib-related > h3,
body.dark-mode #dib-posts .dib-related-posts-title,
body.dark-mode #dib-posts .dib-related-title {
    color: #e0e0e0;
}

#dib-posts .dib-related-posts > h2::after,
#dib-posts .dib-related-posts > h3::after,
#dib-posts .dib-related > h2::after,
#dib-posts .dib-related > h3::after,
#dib-posts .dib-related-posts-title::after,
#dib-posts .dib-related-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--sage);
    border-radius: 1px;
    margin: 8px 0 1.5rem 0;
}
body.dark-mode #dib-posts .dib-related-posts > h2::after,
body.dark-mode #dib-posts .dib-related-posts > h3::after,
body.dark-mode #dib-posts .dib-related > h2::after,
body.dark-mode #dib-posts .dib-related > h3::after,
body.dark-mode #dib-posts .dib-related-posts-title::after,
body.dark-mode #dib-posts .dib-related-title::after {
    background-color: #a8b361;
}

/* ---- Grid: mirrors .rd-dir-grid ---- */
#dib-posts .dib-related-posts-wrap,
#dib-posts .dib-related-wrap,
#dib-posts .dib-related-posts-list,
#dib-posts .dib-related-posts > ul,
#dib-posts .dib-related > ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- Card: mirrors .rd-dir-card ---- */
#dib-posts .dib-related-post,
#dib-posts .dib-related-posts .dib-post,
#dib-posts .dib-related .dib-post {
    background-color: var(--white) !important;
    border: 1px solid var(--cream) !important;
    border-top: 3px solid var(--sage) !important;
    border-radius: 0 0 4px 4px !important;
    padding: 1.5rem 1.625rem 1.375rem !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    text-align: left;
    box-shadow: none;
    transition: box-shadow 0.2s, transform 0.15s;
}
#dib-posts .dib-related-post:hover,
#dib-posts .dib-related-posts .dib-post:hover,
#dib-posts .dib-related .dib-post:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
#dib-posts .dib-related-post:focus-visible,
#dib-posts .dib-related-posts .dib-post:focus-visible,
#dib-posts .dib-related .dib-post:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 3px;
}
body.dark-mode #dib-posts .dib-related-post,
body.dark-mode #dib-posts .dib-related-posts .dib-post,
body.dark-mode #dib-posts .dib-related .dib-post {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    border-top-color: #a8b361 !important;
}

/* ---- Card typography: mirrors .rd-dir-card__name ----
   Title is 1.125rem, smaller than jg-rd.css's 1.375rem, because
   these cards are narrower; it keeps titles to about two lines. */
#dib-posts .dib-related-post .dib-post-title,
#dib-posts .dib-related-posts .dib-post-title,
#dib-posts .dib-related .dib-post-title,
#dib-posts .dib-related-post-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.125rem;
    font-weight: normal;
    color: var(--navy);
    margin: 0;
    line-height: 1.25;
}
body.dark-mode #dib-posts .dib-related-post .dib-post-title,
body.dark-mode #dib-posts .dib-related-posts .dib-post-title,
body.dark-mode #dib-posts .dib-related .dib-post-title,
body.dark-mode #dib-posts .dib-related-post-title {
    color: #e0e0e0;
}

#dib-posts .dib-related-post .dib-meta-text,
#dib-posts .dib-related-posts .dib-meta-text,
#dib-posts .dib-related .dib-meta-text {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.75rem;
    color: var(--charcoal);
    opacity: 0.7;
}
body.dark-mode #dib-posts .dib-related-post .dib-meta-text,
body.dark-mode #dib-posts .dib-related-posts .dib-meta-text,
body.dark-mode #dib-posts .dib-related .dib-meta-text {
    color: #a0a0a0;
    opacity: 1;
}

/* Keeps a related-post thumbnail, if DIB shows one, from taking
   the 200px list crop. */
#dib-posts .dib-related-post .dib-post-featured-image,
#dib-posts .dib-related-posts .dib-post-featured-image,
#dib-posts .dib-related .dib-post-featured-image {
    height: auto !important;
    border-radius: 3px;
    margin-bottom: 0.5rem !important;
}


/* ============================================================
   4e. SEARCH DIALOG
   DIB's search <dialog>, opened by the Search Posts button in
   index.html. It renders outside the hidden .dib-cat-menu.
   ============================================================ */
#dib-search-dialog {
    border: none;
    border-top: 4px solid var(--sage);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 640px;
    width: 92%;
    background-color: var(--white);
    color: var(--charcoal);
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
#dib-search-dialog::backdrop { background: rgba(0,0,0,0.55); }
body.dark-mode #dib-search-dialog {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-top-color: #a8b361;
}

#dib-search-dialog .ais-SearchBox-form { display: flex; align-items: center; }
#dib-search-dialog .dib-search-box-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #c4d0d6;
    border-radius: 4px;
    background-color: var(--light-blue);
    color: var(--charcoal);
    font-family: inherit;
    font-size: 1rem;
}
#dib-search-dialog .dib-search-box-input:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 2px rgba(9,73,122,0.12);
}
body.dark-mode #dib-search-dialog .dib-search-box-input {
    background-color: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

#dib-search-close {
    float: right;
    margin: -2.25rem 0 0 0;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--charcoal);
    text-decoration: none;
    padding: 6px;
}
#dib-search-close:hover { color: var(--sage); }

#dib-search-hits { margin-top: 1.25rem; font-size: 0.875rem; }
#dib-search-hits .ais-Hits--empty {
    color: var(--charcoal);
    opacity: 0.7;
    font-style: italic;
}


/* ============================================================
   5. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .jg-blog-filters { padding: 12px 25px; }
    .jg-blog-filter__menu--2col { min-width: 320px; }
}

@media (max-width: 900px) {
    /* Mirrors .rd-dir-grid: 3 up -> 2 up */
    #dib-posts .dib-related-posts-wrap,
    #dib-posts .dib-related-wrap,
    #dib-posts .dib-related-posts-list,
    #dib-posts .dib-related-posts > ul,
    #dib-posts .dib-related > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    /* One column on phones */
    #dib-posts .dib-post-wrap { grid-template-columns: 1fr; }
    #dib-posts .dib-post-wrap .dib-post-featured-image { height: 180px !important; }
    #dib-posts .dib-post-single .dib-post-title { font-size: 1.625rem; }

    #dib-audio .dib-audio-controls { flex-wrap: wrap; }
    #dib-audio .dib-audio-visualizer { display: none; }
    #dib-audio .dib-audio-text { flex: 1 0 auto; }
}

@media (max-width: 640px) {
    /* Mirrors .rd-dir-grid: 2 up -> 1 up */
    #dib-posts .dib-related-posts-wrap,
    #dib-posts .dib-related-wrap,
    #dib-posts .dib-related-posts-list,
    #dib-posts .dib-related-posts > ul,
    #dib-posts .dib-related > ul {
        grid-template-columns: 1fr !important;
    }

    .jg-blog-filters {
        padding: 12px 20px;
        position: static;   /* sticky bar eats too much of a small viewport */
    }
    .jg-blog-filters__inner { gap: 8px; }
    .jg-blog-filter { display: block; width: 100%; }
    .jg-blog-filter__btn { display: block; width: 100%; text-align: left; }
    .jg-blog-filters__end { margin-left: 0; width: 100%; justify-content: space-between; }

    .jg-blog-filter__menu {
        position: static;
        min-width: 0;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        max-height: 320px;
    }
    .jg-blog-filter__menu--2col {
        min-width: 0;
    }
    .jg-blog-filter__menu--2col.is-open {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   6. MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .jg-blog-filter__btn::after,
    .jg-blog-filter__menu a {
        transition: none;
    }
}