/* =========================================================
   jg-support.css -- CHW
   Section stylesheet for the JewishGen Support Center (/support/).

   Load order (per JG40 standard):
     1. Bootstrap CDN
     2. /jg-global.css      <- design tokens live here
     3. /jg-support.css     <- this file

   Consumers:
     /support/index.html              (shell)
     /support/support-subnav.html     (fetched sidebar component)
     /support/support-content-*.html  (fetched language fragments)

   Notes:
   - jg-collapsible (accordion) is NOT defined in jg-global.css,
     so it is carried here. If it is ever promoted to global,
     delete the ACCORDION block below.
   - page-title-band base styles AND its dark-mode navy fill
     (#0d2a45) ARE in jg-global.css -- inherited, not redeclared.
   - Navy fills are hardcoded #09497a / #0d2a45, never var(--navy),
     which flips to light gray in dark mode.
   - Cloudflare edge-caches .css -- bump ?v=N in the <link> on
     every edit to this file.
   - Plain ASCII hyphens only in comments.
   ========================================================= */


/* =========================================================
   1. LAYOUT -- ecru wrap + 70/30 grid
   ========================================================= */
.support-ecru-wrap {
    background-color: var(--ecru);
    padding: 3rem 2rem;
}
.support-ecru-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.support-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 28px;
    align-items: start;
}


/* =========================================================
   2. SECTIONS -- headings, ledes, rules
   ========================================================= */
.support-section { margin-bottom: 2rem; }
.support-section:last-child { margin-bottom: 0; }

.support-section-heading {
    margin: 0 0 12px 0;
    font-size: 1.25rem;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--navy);
    position: relative;
    padding-bottom: 8px;
    font-weight: bold;
}
body.dark-mode .support-section-heading { color: #e0e0e0; }
.support-section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--sage);
    border-radius: 2px;
}

/* Section lede -- the intro under a section heading.
   Constrained measure + a step up in size so it reads as an
   intro, not body text, and does not run edge-to-edge of the
   wide content column. */
.support-section-intro {
    max-width: 62ch;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--charcoal);
    margin: 0 0 10px 0;
}
.support-section-intro:last-of-type { margin-bottom: 22px; }
body.dark-mode .support-section-intro { color: #c8c0b0; }

/* Half-width rule used inside some answers (legacy <HR WIDTH="50%">) */
.support-inner-rule {
    width: 50%;
    margin: 1rem auto;
    border: 0;
    border-top: 1px solid #d1caba;
}
body.dark-mode .support-inner-rule { border-top-color: #333; }

/* Note marking dropped legacy includes / version footer */
.support-placeholder-note {
    font-size: 0.8125rem;
    font-style: italic;
    color: #8a8275;
    margin: 0.75rem 0;
}
body.dark-mode .support-placeholder-note { color: #888; }

.support-section-intro a {
    color: #09497a;
    text-decoration: underline dotted;
    font-weight: 600;
}
.support-section-intro a:hover { color: var(--sage); }
body.dark-mode .support-section-intro a { color: #a8b361; }


/* =========================================================
   3. ACCORDION (jg-collapsible)
   Not in jg-global.css -- carried here.
   ========================================================= */
/* Wrapper -- carries the id (#q1.6) that deep links target. */
.jg-collapsible { margin-bottom: 8px; }
.jg-collapsible:last-child { margin-bottom: 0; }
/* Offset so a deep-linked question does not land flush against
   the top of the viewport when scrolled to. */
.jg-collapsible[id],
.support-section[id] { scroll-margin-top: 20px; }

.jg-collapsible-trigger {
    width: 100%;
    background-color: var(--white);
    border: none;
    text-align: left;
    padding: 16px 20px;
    font-size: 0.9375rem;
    font-weight: bold;
    color: var(--navy);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.jg-chevron {
    font-size: 10px;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.jg-collapsible-trigger.open .jg-chevron { transform: rotate(180deg); }

.jg-collapsible-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: #f8f9fa;
}
body.dark-mode .jg-collapsible-body { background-color: #121212; }
.jg-collapsible-body.open { max-height: 4000px; }

.jg-collapsible-inner {
    padding: 20px;
    font-size: 0.9375rem;
    color: var(--navy);
    line-height: 1.6;
    overflow-wrap: anywhere; /* long URLs in answers wrap on phones */
}
body.dark-mode .jg-collapsible-inner { color: #c8c0b0; }
.jg-collapsible-inner a { color: var(--navy); font-weight: bold; }
body.dark-mode .jg-collapsible-inner a { color: #a8b361; }

.jg-collapsible-inner blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--sage);
    background-color: var(--ecru);
    font-size: 0.875rem;
    border-radius: 0 4px 4px 0;
}


/* =========================================================
   4. SIDEBAR shell + loading state
   ========================================================= */
/* The <aside> is the DIRECT grid child so position:sticky holds. */
.support-sidebar {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.support-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--charcoal);
    font-style: italic;
    opacity: 0.6;
}


/* =========================================================
   5. SUBNAV COMPONENT (support-subnav.html)
   Fetched into the sidebar. Styles consolidated here rather
   than living inline in the component.
   ========================================================= */
.support-subnav-box {
    background-color: var(--white);
    border: 1px solid #d1caba;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
body.dark-mode .support-subnav-box {
    background-color: #1e1e1e;
    border-color: #333;
}
.support-subnav-box:last-child { margin-bottom: 0; }

/* -- Box heading ------------------------------------------- */
.support-subnav-heading {
    font-size: 1rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: bold;
    color: var(--navy);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    position: relative;
}
body.dark-mode .support-subnav-heading { color: #e0e0e0; }
.support-subnav-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 34px;
    height: 3px;
    background-color: var(--sage);
    border-radius: 2px;
}

/* -- Jump list (section anchors) --------------------------- */
.support-subnav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: jump;
}
.support-subnav-list li { border-bottom: 1px dotted #d1caba; }
.support-subnav-list li:last-child { border-bottom: none; }
body.dark-mode .support-subnav-list li { border-bottom-color: #333; }

.support-subnav-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    color: var(--navy);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.15s, padding-left 0.15s;
    border-radius: 4px;
}
body.dark-mode .support-subnav-list a { color: #e0e0e0; }
.support-subnav-list a::before {
    counter-increment: jump;
    content: counter(jump);
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #09497a;
    border-radius: 50%;
}
body.dark-mode .support-subnav-list a::before { background-color: #0d2a45; }
.support-subnav-list a:hover,
.support-subnav-list a:focus {
    background-color: rgba(147,155,81,0.10);
    padding-left: 8px;
    outline: none;
}

/* -- Section switcher (Support Center <-> Our Team) --------
   Same look as the jump list but without the numbered badge; the
   active page gets .support-active (set by the host shell). CHW */
.support-subnav-pages { list-style: none; padding: 0; margin: 0; }
.support-subnav-pages li { border-bottom: 1px dotted #d1caba; }
.support-subnav-pages li:last-child { border-bottom: none; }
body.dark-mode .support-subnav-pages li { border-bottom-color: #333; }
.support-subnav-pages a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    color: var(--navy);
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s, padding-left 0.15s;
}
body.dark-mode .support-subnav-pages a { color: #e0e0e0; }
.support-subnav-pages a:hover,
.support-subnav-pages a:focus {
    background-color: rgba(147,155,81,0.10);
    padding-left: 8px;
    outline: none;
}
.support-subnav-pages a.support-active {
    font-weight: bold;
    background-color: rgba(147,155,81,0.10);
}
body.dark-mode .support-subnav-pages a.support-active { color: #e0e0e0; }

/* -- Language list ----------------------------------------- */
.support-subnav-lang-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.support-subnav-lang-list li { border-bottom: 1px dotted #d1caba; }
.support-subnav-lang-list li:last-child { border-bottom: none; }
body.dark-mode .support-subnav-lang-list li { border-bottom-color: #333; }

.support-subnav-lang-list .lang-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 4px;
    color: var(--navy);
    font-size: 0.875rem;
    line-height: 1.4;
    background: transparent;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s, padding-left 0.15s;
    border-radius: 4px;
}
body.dark-mode .support-subnav-lang-list .lang-toggle { color: #e0e0e0; }
.support-subnav-lang-list .lang-toggle:hover,
.support-subnav-lang-list .lang-toggle:focus {
    background-color: rgba(147,155,81,0.10);
    padding-left: 10px;
    outline: none;
}
.support-subnav-lang-list .lang-toggle.active {
    font-weight: bold;
    background-color: rgba(147,155,81,0.10);
    padding-left: 10px;
}

/* -- Language tag pill ------------------------------------- */
.support-subnav-lang-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: var(--cream);
    color: var(--charcoal);
    border: 1px solid #c5bca8;
    border-radius: 3px;
    padding: 1px 5px;
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}


/* =========================================================
   6. RTL (Hebrew)
   Applied when the shell sets dir="rtl" on the content area.
   ========================================================= */
[dir="rtl"] .jg-collapsible-inner blockquote {
    border-left: none;
    border-right: 4px solid var(--sage);
    border-radius: 4px 0 0 4px;
}
[dir="rtl"] .jg-collapsible-trigger { text-align: right; }
[dir="rtl"] .support-section-heading::after { left: auto; right: 0; }


/* =========================================================
   7. UTILITY
   ========================================================= */
/* Hides inactive title-band language strings */
.hidden { display: none !important; }


/* =========================================================
   8. RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .support-grid { grid-template-columns: minmax(0, 1fr); }
    .support-sidebar { position: static; }
    .page-title-band { padding: 32px 24px; }
    .page-title-band h1 { font-size: 1.75rem; }
    .support-ecru-wrap { padding: 2rem 1rem; }
}