/* ==========================================================================
   JAGRITI DHAM  —  SENIOR & ELDERLY CARE FAQ   ·   page 1516 only
   /senior-elderly-care-services-faq/  ·  page-templates/new-faq.php
   "THE DESK REGISTER"              css/faq-lux.css          FINAL  2026-09-12
   New file. Enqueued from functions.php on is_page(1516) with deps
   array('responsive'), so it prints after style.css and responsive.css. It
   restyles the GENERIC theme classes .sectiongap / .section-title /
   .section_separation / .nav-pills / .tab-pane / .accordion* and must never
   load anywhere else (L1). The fixed header above (header-lux.css, its
   .innerbanner spacer) and #contact below (contact-lux.css) are not touched
   by any rule here.
   ==========================================================================

   THE IDEA, IN ONE SENTENCE
   -------------------------
   One sheet of the house's grained cream paper, laid out as a reading desk:
   the head is "FAQ's" in Fraunces ranged left with the intro as the site's
   italic brass deck beside it and one brass-ink rule with the diamond
   punched in at the left under both; the three subjects are the register's
   THUMB-TABS — Karla 600 rows on hairlines, the open one pulled out in the
   house green with cream ink (the gallery page's own "current cell"),
   stacked full-width on phones, a row of tabs on a hairline on tablets, a
   sticky column under the header from 992 so the switch never leaves the
   reader through twenty questions; the questions are a REGISTER — a
   hairline above each, the folio numeral in Fraunces italic brass ink, the
   question in Fraunces roman 19/20px, a plus at the right margin that spins
   into a minus, the answer in Karla 17.5px/1.72 against a 3px brass-ink
   rule. No plates, no boxes. Spacing is padding, so Bootstrap's tween is
   honest in both directions.

   WHAT SHIPS FROM WHOM (the panel's four designs and two syntheses)
   ----------------------------------------------------------------
   The Register (design-register): the cascade, the entries, the numeral, the
   plus/minus and its forced-colours glyph, the 3px-rule answer with
   padding-only air, 1.72 leading, the stacked phone tabs.
   The Index (design-index): the two-column head with the deck and the
   punched diamond; the desk grid and the sticky index from 992; the `/ ""`
   numeral alt; text-align declared on children against .text-center.
   The Green Room: one keyframe (jfRise) replacing zoomIn/fadeInUp that ENDS
   ON transform:none; the print numbering that runs 01–33 straight through.
   The Correspondence: `.active` doubled with `[aria-selected="true"]`.
   Synthesis B (champion): the entry hairline drawn ON THE BUTTON so the
   open entry's top rule deepens with no :has(); the filled thumb-tab; the
   li that can shrink; the off-palette tab ink replaced by body ink.
   Synthesis A (graft): the desk, the sticky offset, the em-sized numeral so
   Android text scaling scales lines instead of overlapping them; the
   measure declared on the p's CONTENT box.
   Editor's repairs on top: the sticky offset no longer needs :has() (the
   index cannot pin before the header has condensed — L3); the 20px white
   strip under the header is painted paper from inside the section (L2);
   the section carries no overflow, no border-top, no border-bottom (the
   contact band has its own top rule); the plus/minus mark and the numeral
   are sized in em of the question; the tab label keeps one weight in both
   states so a switch moves nothing.

   ==========================================================================
   L-NOTES — read before touching anything. Each fails SILENTLY.
   ==========================================================================
   L1  SCOPE. Every selector is rooted at `.page-id-1516` (the WordPress body
       class); the custom properties (`--jf-*`) live on that body. Nothing
       here may move into style.css or responsive.css: .accordion-*,
       .nav-pills, .section_separation, .section-title, .sectiongap and
       .tab-pane are used by pricing's floor plans, jiva's FAQ and the
       long-stay page. No rule reaches the header, the body or #contact.

   L2  NO HEADER OFFSET. header-lux.css:949 sizes `.innerbanner` to the fixed
       header (`height:var(--jd-h-total) !important; margin-bottom:20px`), so
       `.new_faq_section` already starts at header-bottom + 20px (110 / 114 /
       166 at 375 / 768 / 1280). No margin-top, padding-top or scroll-margin
       is derived from the header anywhere here. The theme's 20px strip
       between the header's paper and this sheet is body-white; it is
       painted paper by ONE declaration on the section itself —
       `box-shadow:0 -20px 0 0 var(--jf-paper)` — a solid shadow the height
       of the spacer's margin, painted under the section's own background
       and above the body's white. The section's box does not move (the
       assertion "section top = header bottom + 20" holds), nothing is set
       on .innerbanner, the body or the header (the fixed header is
       z-index:9999 and paints over everything). Delete that one line and
       the white strip returns; nothing else changes. (The gallery page
       zeroed the spacer's margin instead — photo-gallery-lux.css:360 — this
       page was briefed to keep the +20 and does.)

   L3  THE STICKY INDEX. From 992 `#pills-tab` is `position:sticky` with
       `top:calc(56px + var(--jd-h-nav, 46px) + 18px)` = 120px — the
       CONDENSED header (ribbon 0 + bar 56 + nav 46, header-lux.css §6), the
       same recipe contact-lux.css:99 uses for its sticky column. It needs
       no :has(): the index's natural top is ≥ ~400px down the page at every
       width ≥ 992 (padding + head), so it cannot pin before ~280px of
       scroll, and header-lux.js condenses the header at 96px (and only
       expands it again under 44px, where the index is long un-pinned) — an
       overlap is impossible in either direction. Sticky needs three things
       kept: the desk grid is `align-items:start`; NO ancestor of the list
       (.new_faq_section, .container, .row, .col-lg-12) may ever get
       `overflow:hidden|auto|clip|scroll`; and the WOW keyframe on the list
       ends on `transform:none` (§9). If sticky ever stops, the index is a
       static column at the top of the desk — a degradation, not a fault.
       THE SWITCH FROM DEEP: Bootstrap swaps a pane in place and scrolls
       nothing, so a reader who clicked the pinned index from question 15
       of the General list landed below the shorter Medical pane — on a
       720px-tall laptop the viewport showed the booking form and no
       questions (refuted, major). CSS cannot scroll a page; the template
       (page-templates/new-faq.php, the <script> under the section) listens
       for Bootstrap's `shown.bs.tab` and, only when the ledger's top is
       above the header, scrolls it back to the index's sticky top (or to
       header-bottom + 18 where the index is static). Without that script
       the old behaviour returns; nothing here depends on it.

   L4  THE TAB LIST. Rooted at `.page-id-1516 #pills-tab` (1,2,0)+ so every
       style.css / responsive.css pill rule (786 / 798 / 807 / 3508 / 3513 /
       221 / 225 / 378) and Bootstrap's `.nav-pills .nav-link.active` lose on
       weight — including their :hover and padding-bottom. Bootstrap's
       `.justify-content-evenly` and responsive.css:370/868 flag
       `justify-content`; nothing fights them: under 768 and from 992 the
       list is `flex-direction:column` (nothing to distribute on the
       vertical axis); at 768–991 Bootstrap's own space-evenly places the
       three thumb-tabs along the hairline. The only flagged declaration
       outside reduced-motion/print is `margin-bottom:0 !important` against
       `.mb-3`; the space below the tabs is `.tab-content`'s padding-top.

   L5  THE THEME'S TRIANGLE. style.css:818 `.section_separation .nav-link
       ::before` draws a #4f6f52 triangle under the active pill: killed with
       `content:none` at (0,4,1), not display:none (a rendered pseudo would
       still take a flex slot). The Font Awesome `<i>` in each tab is
       display:none (the third carries fa-file-pdf for "Security and
       Eligibility", a content bug no stylesheet can correct).

   L6  THE MARK IS `::after` PAINTED WITH TWO GRADIENTS, NOT BOOTSTRAP'S
       SVG. 5.1.3's chevron is a data-URI with a hard-coded fill (#212529
       at rest, #0c63e4 open) on BOTH `.accordion-button::after` and
       `:not(.collapsed)::after`; the `background:` SHORTHAND here restates
       the whole background in both states, so neither colour can leak.
       Plus = a 16×2 bar and a 2×16 bar; open collapses the vertical bar to
       `2px 0` and rotates 180° — a plus that spins into a minus. Forced
       colours (§11) swap the gradients for `content:"+"` / `"\2212"`.
       No English is ever in `content` (counters and marks only).

   L7  EVERY ACCORDION RULE IS ROOTED AT `.accordion .accordion-item` so its
       weight ((0,5,0) with the body class and the section) beats
       Bootstrap's `:first-of-type .accordion-button` (0,3,0) and
       `:last-of-type .accordion-button.collapsed` (0,4,0) radii,
       `:not(:first-of-type){border-top:0}` (0,2,0), Bootstrap's and
       style.css:2998/3003's `.accordion-button:focus` (0,2,0 / 0,2,1) and
       style.css:3029's sand fill (0,2,0) — on weight, not on enqueue order.

   L8  THE COLLAPSE TWEEN. Nothing sets `height`, `display` or `overflow`
       on `.accordion-collapse` for screen. Bootstrap's `.collapsing
       {height:0; overflow:hidden; transition:height .35s}` reads
       scrollHeight, so the answer's air is PADDING on `.accordion-body`
       and on the `p` (a margin would live inside the collapsing box and
       escape at the class swap — a 24px hitch on every close). Print is
       the one place `display:block !important; height:auto !important`
       appears.

   L9  FOCUS. style.css:65 `:focus{outline:0; box-shadow:none}` and
       :2998/:3003 `.accordion-button:focus{box-shadow:none}` kill every
       ring sitewide. Rings here are drawn on `:focus-visible` at higher
       weight (2px heading ink; cream ink inside the green tab). Mouse
       focus draws nothing — that is the theme's rule and the right one.

   L10 THE ENTRY HAIRLINE IS ON THE BUTTON, NOT THE ITEM: `box-shadow:inset
       0 1px 0 var(--jf-top)`, where `--jf-top` is the hairline at rest, the
       3.51:1 rule on the first entry (the register's head) and on the OPEN
       entry (`:not(.collapsed)`). One variable, one shadow, no :has(), and
       no state can drop it (Bootstrap's blue `:focus` shadow is (0,2,0) and
       loses to the base rule). The item's own border-top is 0 (Bootstrap's
       `:not(:first-of-type){border-top:0}` is moot); the last item keeps a
       hairline border-bottom to close the register. Forced colours (§11)
       redraw it as a real border because shadows are dropped there.

   L11 `@media (prefers-reduced-motion:reduce)` sets BOTH `visibility:
       visible !important` AND `animation:none !important` on `.wow`.
       WOW.js writes `visibility:hidden` INLINE and animate.css gives
       `.animated` `animation-fill-mode:both`. The pair is repeated under
       print. WOW 1.2.1 caches the COMPUTED animation-name at init and
       writes it back inline when the box shows (js/wow.min.js
       cacheAnimationName / customStyle), so the `animation-name:jfRise`
       in §9 is what plays (verified live here and on dayat-lux).

   L12 `.text-center` is a flagged utility on every `.tab-pane` and on
       `.section-title`. It is not fought: a value DECLARED on a child
       beats an inherited one, so `text-align:left` is declared on the h2,
       the intro p, the accordion, the button, the body and the answer p.

   L13 `--bs-gutter-x` is never changed on `.container`. Widths come from
       the desk grid (`--jf-index-w` / `--jf-ledger-max`) and the p's
       max-width.

   L14 The question wrappers are PLAIN `<h2>` (no .accordion-header):
       style.css:78 gives them 36px 700 #4f6f52 and a 16px margin
       (responsive.css:54: 22px under 480). They are reset to
       font-size:1rem / line-height:1 / margin:0 so the button alone sets
       the entry's height.

   L15 THE MEASURE. The answer `p` is `box-sizing:content-box; max-width:
       48ch` of its own 17.5px Karla (1ch = 10.39px → 499px of text; the 3px
       rule and its 18/22px gap sit OUTSIDE the measure, so the border box
       reads 524px). `ch` is the width of a "0", and Karla's average
       character is narrower: the panel's 56ch measured 87 REAL characters
       a line by canvas average of the actual answers (refuted, minor);
       48ch is ~75, the top of the 45–75 comfort range for a 65-year-old.
       Below 768 the register is the column's full width (no indent — a
       phone's measure is not spent on indentation): 26–51ch at 320–767,
       the column being the measure. From 768 it is 48ch at every width
       (640px available at 768, 618 at 992, 760 at 1200 — all hold 524).

   L16 THE NUMERAL AND THE MARK ARE SIZED IN EM OF THE QUESTION. The numeral
       is `.79em` with `line-height:1.646em` (= 1.3 × the question's size,
       the question's own line box) and the 20px mark is centred on that
       line with `margin-top:calc((1.3em - 20px) / 2)`. Under Android text
       scaling all three scale together instead of the numeral or the mark
       drifting off the first line.

   ==========================================================================
   CONTRAST, COMPUTED (WCAG 2.x relative luminance; the paper's feTurbulence
   grain at .04 alpha darkens the cream at most to #f0ede5 — the grained
   figure is in brackets)
   ==========================================================================
     #2b3f2f heading ink  on #faf7ef paper  10.58:1 (9.68)  title, questions at
                                                            rest, focus rings
     #3a4238 body ink     on #faf7ef paper   9.73:1 (8.90)  inactive tabs, answers
     #6b5426 brass ink    on #faf7ef paper   6.71:1 (6.14)  the deck, folio
                                                            numerals, the open
                                                            question, hover, the
                                                            plus/minus mark, the
                                                            3px answer rule
                                                            (non-text open cue),
                                                            the diamond, links
     #f6edd8 cream ink    on #2b3f2f green   9.72:1         the active tab's label
                                                            and its focus ring
     #2b3f2f green fill   on #faf7ef paper  10.58:1 (9.68)  the active tab — a
                                                            fill, not colour alone
     #cbb279 brass        on #2b3f2f green   5.49:1         the active tab's 3px
                                                            left rule when stacked
                                                            (non-text, on green)
     rgba(107,84,38,.72) = #93825e on paper  3.51:1 (3.21)  MEANINGFUL rules: the
                                                            head rule, the index's
                                                            head, the register's
                                                            head, the open entry's
                                                            top rule
     rgba(203,178,121,.55) = #e0d1ae on paper 1.41:1        DECORATIVE hairlines
                                                            only: entry separators,
                                                            the stack's dividers,
                                                            the list's edges — never
                                                            a sole cue
     focus ring #2b3f2f 2px on paper        10.58:1         tabs (inset −5px),
                                                            questions (+3px), links
     forced-colors: CanvasText rules, Highlight/HighlightText tab, '+'/'−' glyph
   ========================================================================== */

.page-id-1516{
  --jf-paper:#faf7ef;
  --jf-night:#2b3f2f;
  --jf-strong:#2b3f2f;
  --jf-ink:#3a4238;
  --jf-cream-ink:#f6edd8;
  --jf-brass-ink:#6b5426;
  --jf-brass:#cbb279;
  --jf-hair:rgba(203,178,121,.55);
  --jf-rule:rgba(107,84,38,.72);
  --jf-ease:cubic-bezier(.2,.7,.2,1);
  --jf-t:.26s;
  --jf-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --jf-sans:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  /* the diamond punched into a rule, the paper cut (contact-lux / home-lux:2198) */
  --jf-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9'%3E%3Crect width='17' height='9' fill='%23faf7ef'/%3E%3Cpath d='M8.5 1.2L11.8 4.5 8.5 7.8 5.2 4.5z' fill='%236b5426'/%3E%3C/svg%3E");
  /* geometry, PHONE values; the queries only change numbers */
  --jf-pad-top:36px;
  --jf-pad-bot:48px;
  --jf-head-gap:28px;
  --jf-index-w:230px;                        /* the index column, from 992 */
  --jf-gap:32px;                             /* index → ledger, from 992 */
  --jf-ledger-max:none;                      /* the ledger's cap, from 992 */
  --jf-num:32px;                             /* the folio column */
  --jf-gut:12px;                             /* numeral → question */
  --jf-q-size:19px;
  --jf-a-size:17.5px;
  --jf-a-lh:1.72;
  --jf-measure:48ch;                         /* L15 — ~75 characters a line */
}
@media (min-width:576px){
  .page-id-1516{
    --jf-pad-top:44px; --jf-pad-bot:56px;
    --jf-num:40px; --jf-gut:16px;
    --jf-q-size:20px;
  }
}
@media (min-width:768px){
  .page-id-1516{ --jf-head-gap:32px; }
}
@media (min-width:992px){
  .page-id-1516{
    --jf-pad-top:52px; --jf-pad-bot:64px; --jf-head-gap:40px;
    --jf-ledger-max:760px;
  }
}
@media (min-width:1200px){
  .page-id-1516{
    --jf-pad-top:60px; --jf-pad-bot:72px;
    --jf-index-w:300px; --jf-gap:64px;
  }
}

/* --------------------------------------------------------------------------
   1. THE SHEET — the house's grained cream (dayat-lux.css:271 verbatim). Its
      top edge is wherever the spacer puts it (L2); only the inside padding
      is ours. The 20px strip above it is painted paper by the box-shadow
      (L2). No border-top (the paper runs up to the header), no border-bottom
      (#contact draws its own top rule), NO overflow, ever (L3).
   -------------------------------------------------------------------------- */
.page-id-1516 .new_faq_section.sectiongap{
  position:relative;
  padding:var(--jf-pad-top) 0 var(--jf-pad-bot);   /* style.css:271 / responsive.css:132: 20px 0 */
  background-color:var(--jf-paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  box-shadow:0 -20px 0 0 var(--jf-paper);    /* L2 — the spacer's 20px margin, painted paper */
  font-family:var(--jf-sans);
  color:var(--jf-ink);
}

/* --------------------------------------------------------------------------
   2. THE HEAD — the title ranged left in Fraunces, the intro as the site's
      italic brass deck, and under both a rule to the right margin with the
      diamond punched in at the left. Stacked on phones; two columns from
      768 (title / deck, bottoms aligned); from 992 the head shares the
      desk's two columns: the title over the index, the deck over the ledger.
   -------------------------------------------------------------------------- */
.page-id-1516 .new_faq_section .section-title{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:14px;
  justify-items:start;
  margin:0 0 var(--jf-head-gap);             /* style.css:267: 20px */
  padding:0;
  text-align:left;
}
.page-id-1516 .new_faq_section .section-title h2{
  font-family:var(--jf-serif);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:38px;                            /* engines without clamp() */
  font-size:clamp(38px, 4.6vw, 54px);
  line-height:1.04;
  letter-spacing:-.016em;
  color:var(--jf-strong);                    /* 10.58:1 — style.css:78: 36px 700 #4f6f52 */
  text-align:left;                           /* L12 */
  margin:0;
  padding:0;
}
.page-id-1516 .new_faq_section .section-title p{
  font-family:var(--jf-serif);
  font-optical-sizing:auto;
  font-style:italic;
  font-weight:500;
  font-size:18.5px;
  line-height:1.5;
  letter-spacing:.004em;
  color:var(--jf-brass-ink);                 /* 6.71:1 — style.css:57: 15px/22 #151515 */
  text-align:left;                           /* L12 */
  text-wrap:pretty;
  max-width:44ch;
  margin:0;
}
/* the rule with the diamond, a row of its own under both */
.page-id-1516 .new_faq_section .section-title::after{
  content:"";
  display:block;
  grid-column:1 / -1;
  justify-self:stretch;
  width:100%;
  height:9px;
  margin-top:16px;
  background-image:var(--jf-diamond), linear-gradient(var(--jf-rule), var(--jf-rule));
  background-repeat:no-repeat, no-repeat;
  background-position:0 50%, 0 50%;
  background-size:17px 9px, 100% 1px;        /* the rule: 3.51:1 */
}
@media (min-width:768px){
  .page-id-1516 .new_faq_section .section-title{
    grid-template-columns:auto minmax(0,1fr);
    column-gap:44px;
    row-gap:0;
    align-items:end;
  }
  .page-id-1516 .new_faq_section .section-title h2{ grid-column:1; }
  .page-id-1516 .new_faq_section .section-title p{ grid-column:2; padding-bottom:5px; font-size:19px; }
  .page-id-1516 .new_faq_section .section-title::after{ margin-top:18px; }
}
@media (min-width:992px){
  .page-id-1516 .new_faq_section .section-title{
    grid-template-columns:var(--jf-index-w) minmax(0, var(--jf-ledger-max));
    column-gap:var(--jf-gap);
  }
  .page-id-1516 .new_faq_section .section-title p{ padding-bottom:6px; font-size:20px; }
  .page-id-1516 .new_faq_section .section-title::after{ margin-top:22px; }
}
@media (min-width:1200px){
  .page-id-1516 .new_faq_section .section-title p{ font-size:21px; }
}

/* --------------------------------------------------------------------------
   3. THE DESK — from 992 the column is a two-column grid: the index on the
      left (sticky, L3), the register on the right, both starting at the top.
   -------------------------------------------------------------------------- */
.page-id-1516 .new_faq_section .section_separation{ --bs-gutter-y:0; }
@media (min-width:992px){
  .page-id-1516 .new_faq_section .section_separation > .col-lg-12{
    display:grid;
    grid-template-columns:var(--jf-index-w) minmax(0, var(--jf-ledger-max));
    column-gap:var(--jf-gap);
    align-items:start;                       /* sticky needs an unstretched item */
  }
}

/* --------------------------------------------------------------------------
   4. THE INDEX — three thumb-tabs (L4, L5).
      PHONE (<768): a stack of three full-width 56px rows between hairlines,
      Karla 600; the open row is filled deep green with cream ink and a 3px
      brass rule at its left — a fill and an edge, never colour alone, and
      unmistakably a control beside the Fraunces entries.
      768–991: one row on a hairline, Bootstrap's space-evenly placing the
      three; the open tab is the same green fill sitting ON the hairline.
      992+: the stack again, in the desk's left column, sticky under the
      condensed header; its head rule (3.51:1) is level with the register's.
   -------------------------------------------------------------------------- */
.page-id-1516 #pills-tab{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  width:100%;
  margin:0;                                  /* style.css:42: margin-top 12px on every ul */
  margin-bottom:0 !important;                /* .mb-3 is flagged; the gap below is .tab-content's (L4) */
  padding:0;
  border-top:1px solid var(--jf-hair);
  border-bottom:1px solid var(--jf-hair);
  list-style:none;
}
.page-id-1516 #pills-tab .nav-item{
  display:flex;
  flex:0 0 auto;
  min-width:0;
  margin:0;                                  /* style.css:47: 8px below every li */
  padding:0;
  list-style:none;
  border-top:1px solid var(--jf-hair);       /* decorative divider */
}
.page-id-1516 #pills-tab .nav-item:first-child{ border-top:0; }
.page-id-1516 #pills-tab .nav-link{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  width:100%;
  min-height:56px;
  margin:0;                                  /* style.css:786 / :3508 / responsive.css:378 */
  padding:12px 18px 12px 20px;
  border:0;                                  /* style.css:798: 2px #4f6f52 under the active pill */
  border-left:3px solid transparent;         /* the rule's slot — always there, so nothing moves */
  border-radius:0;                           /* Bootstrap: .25rem */
  box-shadow:none;
  background:transparent;                    /* style.css:3513 / responsive.css:225: #4f6f52 */
  font-family:var(--jf-sans);
  font-size:17px;                            /* responsive.css:221: 13px under 480 */
  font-weight:600;
  line-height:1.3;
  letter-spacing:.01em;
  text-align:left;
  white-space:normal;
  color:var(--jf-ink);                       /* 9.73:1 */
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow var(--jf-t) var(--jf-ease);   /* the fill, the ink and the
                                                brass rule SNAP: a colour +
                                                background crossfade left both
                                                labels under 3:1 for ~45ms on
                                                every switch (sampled at 27/45/
                                                60ms); only the hover underline
                                                tweens */
}
.page-id-1516 #pills-tab .nav-link i{ display:none; }                              /* style.css:814 / 3504 — the pdf icon goes too (L5) */
.page-id-1516 .new_faq_section .section_separation .nav-link::before{ content:none; }   /* style.css:818 / 835 / 3518: the triangle (L5) */
.page-id-1516 #pills-tab .nav-link.active,
.page-id-1516 #pills-tab .nav-link[aria-selected="true"]{
  color:var(--jf-cream-ink);                 /* 9.72:1 on the green */
  background:var(--jf-night);                /* the fill — 10.58:1 against the paper */
  border-left-color:var(--jf-brass);         /* 5.49:1 on the green; brass is non-text on green only */
}
.page-id-1516 #pills-tab .nav-link:focus-visible{
  outline:2px solid var(--jf-night);         /* L9 — 10.58:1 on paper, inside the cell */
  outline-offset:-5px;
}
.page-id-1516 #pills-tab .nav-link.active:focus-visible,
.page-id-1516 #pills-tab .nav-link[aria-selected="true"]:focus-visible{
  outline-color:var(--jf-cream-ink);         /* 9.72:1 inside the green tab */
}

/* 768–991: the row of thumb-tabs on one hairline */
@media (min-width:768px){
  .page-id-1516 #pills-tab{
    flex-direction:row;
    align-items:stretch;                     /* a wrapped label stretches its siblings — equal cells */
    border-top:0;
    /* justify-content: Bootstrap's space-evenly, flagged, does the placing (L4) */
  }
  .page-id-1516 #pills-tab .nav-item{
    flex:0 1 auto;                           /* may shrink (text scaling), never clipped */
    border-top:0;
    margin-bottom:-1px;                      /* the tab sits ON the hairline */
  }
  .page-id-1516 #pills-tab .nav-link{
    justify-content:center;
    width:auto;
    min-height:54px;
    padding:13px 24px 14px;
    border-left:0;
    text-align:center;
  }
  .page-id-1516 #pills-tab .nav-link.active,
  .page-id-1516 #pills-tab .nav-link[aria-selected="true"]{ border-left:0; }
}

/* 992+: the stack in the desk's column, sticky (L3) */
@media (min-width:992px){
  .page-id-1516 #pills-tab{
    display:grid;                            /* three rows that share the
                                                tallest height: under 1.3x
                                                Android text scaling the third
                                                label wraps in the 230px
                                                column (230x58/58/86 as flex)
                                                and the rule says EQUAL */
    grid-template-columns:minmax(0,1fr);
    grid-auto-rows:1fr;
    position:-webkit-sticky;
    position:sticky;
    top:120px;                               /* engines without var() */
    top:calc(56px + var(--jd-h-nav, 46px) + 18px);   /* the condensed header + 18 (L3) */
    z-index:2;
    border-top:1px solid var(--jf-rule);     /* 3.51:1 — the index's head, level with the register's */
    border-bottom:1px solid var(--jf-hair);
  }
  .page-id-1516 #pills-tab .nav-item{
    flex:0 0 auto;
    margin-bottom:0;
    border-top:1px solid var(--jf-hair);
  }
  .page-id-1516 #pills-tab .nav-item:first-child{ border-top:1px solid transparent; }   /* the grid rows share one
                                                height; without its own 1px the first
                                                button stretched to 57 against 56 */
  .page-id-1516 #pills-tab .nav-link{
    justify-content:flex-start;
    width:100%;
    min-height:56px;
    padding:14px 12px 15px 18px;             /* 230 − 3 − 18 − 12 = 197px of line: the longest label
                                                ("Security and Eligibility", 186px at 17px) stays one line */
    border-left:3px solid transparent;
    font-size:17px;
    text-align:left;
  }
  .page-id-1516 #pills-tab .nav-link.active,
  .page-id-1516 #pills-tab .nav-link[aria-selected="true"]{ border-left:3px solid var(--jf-brass); }
}
@media (min-width:1200px){
  .page-id-1516 #pills-tab .nav-link{
    min-height:58px;
    padding:15px 16px 16px 22px;             /* 300 - 3 - 22 - 16 = 259px of line:
                                                the longest label is 197px at
                                                18px and 256px at 1.3x scaling
                                                (24/20 padding left 253 and it
                                                wrapped) */
    font-size:18px;
  }
}

/* --------------------------------------------------------------------------
   5. THE PANES — Bootstrap's fade kept; the flagged centring answered by
      declared values on the children (L12).
   -------------------------------------------------------------------------- */
.page-id-1516 .new_faq_section .tab-content{
  width:100%;
  max-width:var(--jf-ledger-max);
  min-width:0;
  padding-top:22px;
}
@media (min-width:768px){
  .page-id-1516 .new_faq_section .tab-content{ padding-top:34px; }
}
@media (min-width:992px){
  .page-id-1516 .new_faq_section .tab-content{ padding-top:0; }
}
.page-id-1516 .new_faq_section .tab-pane .accordion{
  counter-reset:jf-q;                        /* each pane's register counts from 01 */
  padding:0;
  margin:0;
  text-align:left;                           /* L12 */
}

/* --------------------------------------------------------------------------
   6. THE ENTRIES — a hairline above each (on the button, L10), the numeral,
      the question, the mark. No boxes.
   -------------------------------------------------------------------------- */
.page-id-1516 .new_faq_section .accordion .accordion-item{
  counter-increment:jf-q;
  background:transparent;                    /* Bootstrap: #fff and a rgba(0,0,0,.125) box */
  border:0;
  border-radius:0;
  margin:0;                                  /* style.css:3011: 12px below each */
  padding:0;
}
.page-id-1516 .new_faq_section .accordion .accordion-item:first-of-type{ border-radius:0; }
.page-id-1516 .new_faq_section .accordion .accordion-item:last-of-type{
  border-bottom:1px solid var(--jf-hair);    /* closes the register */
  border-radius:0;
}
.page-id-1516 .new_faq_section .accordion .accordion-item h2{       /* L14 */
  margin:0;                                  /* style.css:78 / 3014; responsive.css:54 */
  padding:0;
  font-size:1rem;
  line-height:1;
  font-weight:500;
  color:var(--jf-strong);
  text-align:left;
}
.page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button{
  --jf-top:var(--jf-hair);                   /* the entry's top line (L10) */
  display:flex;
  align-items:flex-start;
  width:100%;
  min-height:56px;
  margin:0;
  padding:16px 0 17px;
  gap:var(--jf-gut);
  background:transparent;                    /* Bootstrap #fff */
  border:0;                                  /* style.css:3007: 1px #dcc692 */
  border-radius:0;
  box-shadow:inset 0 1px 0 var(--jf-top);
  font-family:var(--jf-serif);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:var(--jf-q-size);
  line-height:1.3;                           /* unitless — scales with UA text scaling (L16) */
  letter-spacing:-.004em;
  text-align:left;                           /* L12 */
  text-wrap:pretty;
  color:var(--jf-strong);                    /* 10.58:1 — Bootstrap #212529 */
  cursor:pointer;
  overflow-anchor:none;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--jf-t) var(--jf-ease), box-shadow var(--jf-t) var(--jf-ease);
}
.page-id-1516 .new_faq_section .accordion .accordion-item:first-of-type .accordion-button{
  --jf-top:var(--jf-rule);                   /* 3.51:1 — the register's head */
  border-radius:0;                           /* Bootstrap's corner radii (L7) */
}
.page-id-1516 .new_faq_section .accordion .accordion-item:last-of-type .accordion-button.collapsed{ border-radius:0; }
/* the folio numeral, 01–20 / 01–10 / 01–03: Fraunces italic in brass ink, on
   the question's own line box (L16); the `/ ""` alt keeps a screen reader
   from saying "zero one" before every question */
.page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button::before{
  content:counter(jf-q, decimal-leading-zero);
  content:counter(jf-q, decimal-leading-zero) / "";
  flex:0 0 var(--jf-num);
  font-family:var(--jf-serif);
  font-optical-sizing:auto;
  font-style:italic;
  font-weight:500;
  font-size:.79em;
  line-height:1.646em;
  letter-spacing:.04em;
  color:var(--jf-brass-ink);                 /* 6.71:1 */
}
/* the mark (L6): a plus drawn with two bars, 20px square, centred on the
   question's first line; margin-left:auto keeps it at the right margin */
.page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button::after{
  content:"";
  flex:0 0 20px;
  width:20px;
  height:20px;
  margin:calc((1.3em - 20px) / 2) 0 0 auto;
  background:
    linear-gradient(var(--jf-brass-ink), var(--jf-brass-ink)) center / 16px 2px no-repeat,
    linear-gradient(var(--jf-brass-ink), var(--jf-brass-ink)) center / 2px 16px no-repeat;
  transform:rotate(0deg);
  transition:transform .4s var(--jf-ease), background-size .4s var(--jf-ease);
}
/* the open entry: the question turns to brass ink, its top line deepens to
   the 3.51:1 rule, the plus is a minus (style.css:3029's black on sand and
   Bootstrap's blue on #e7f1ff are undone) */
.page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:not(.collapsed){
  --jf-top:var(--jf-rule);
  color:var(--jf-brass-ink);                 /* 6.71:1 */
  background:transparent;
  border:0;
  box-shadow:inset 0 1px 0 var(--jf-top);
}
.page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:not(.collapsed)::after{
  background:
    linear-gradient(var(--jf-brass-ink), var(--jf-brass-ink)) center / 16px 2px no-repeat,
    linear-gradient(var(--jf-brass-ink), var(--jf-brass-ink)) center / 2px 0 no-repeat;
  transform:rotate(180deg);
}
/* focus: the ring on :focus-visible only (L9); the line is restated so no
   :focus rule anywhere can take it away */
.page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:focus{
  border:0;
  box-shadow:inset 0 1px 0 var(--jf-top);    /* Bootstrap's blue ring / style.css:2998 out-weighed */
}
.page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:focus-visible{
  outline:2px solid var(--jf-night);         /* L9 — 10.58:1 */
  outline-offset:3px;
  border-radius:2px;
}
@media (min-width:576px){
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button{ padding:18px 0 19px; }
}
@media (min-width:992px){
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button{ padding:20px 0 21px; }
}

/* --------------------------------------------------------------------------
   7. THE ANSWER — Karla 17.5px/1.72 on a 48ch measure (L15), a 3px brass-ink
      rule at its left. Spacing is padding, never margin (L8). On phones the
      rule sits at the register's left edge, under the numeral, so the
      measure is not spent on indentation; from 768 it is indented under the
      question's first letter.
   -------------------------------------------------------------------------- */
.page-id-1516 .new_faq_section .accordion .accordion-collapse{ border:0; border-radius:0; }
.page-id-1516 .new_faq_section .accordion .accordion-item .accordion-body{
  border:0;                                  /* style.css:3017: 1px #dcc692 */
  background:transparent;
  padding:2px 0 26px 0;
  text-align:left;                           /* L12 */
}
.page-id-1516 .new_faq_section .accordion .accordion-body p{
  box-sizing:content-box;                    /* the measure is the TEXT (L15) */
  max-width:var(--jf-measure);
  margin:0;                                  /* style.css:57: 0 0 15px */
  padding:2px 0 2px 18px;
  border-left:3px solid var(--jf-brass-ink); /* 6.71:1 — the open cue's non-text half */
  font-family:var(--jf-sans);
  font-size:var(--jf-a-size);
  line-height:var(--jf-a-lh);
  letter-spacing:.002em;
  color:var(--jf-ink);                       /* 9.73:1 — style.css:57: #151515 */
  text-align:left;                           /* L12 */
  text-wrap:pretty;
  overflow-wrap:break-word;
}
.page-id-1516 .new_faq_section .accordion .accordion-body p + p{ padding-top:14px; }   /* one <p> today; a second would share the rule */
.page-id-1516 .new_faq_section .accordion .accordion-body p a{
  color:var(--jf-brass-ink);                 /* 6.71:1 — style.css:3021: #c2a050 */
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.16em;
  overflow-wrap:anywhere;
  transition:color var(--jf-t) var(--jf-ease);
}
.page-id-1516 .new_faq_section .accordion .accordion-body p a:focus-visible{
  outline:2px solid var(--jf-night);
  outline-offset:2px;
  border-radius:2px;
}
@media (min-width:576px){
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-body{ padding-bottom:30px; }
}
@media (min-width:768px){
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-body{
    padding-left:calc(var(--jf-num) + var(--jf-gut));   /* the rule under the question's first letter */
  }
  .page-id-1516 .new_faq_section .accordion .accordion-body p{ padding-left:22px; }
}
@media (min-width:992px){
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-body{ padding-bottom:34px; }
}

/* --------------------------------------------------------------------------
   8. HOVER — pointer devices only.
   -------------------------------------------------------------------------- */
@media (hover:hover){
  .page-id-1516 #pills-tab .nav-link:hover{
    color:var(--jf-brass-ink);               /* 6.71:1 — style.css:794: #4f6f52 */
    box-shadow:inset 0 -2px 0 var(--jf-brass-ink);
  }
  .page-id-1516 #pills-tab .nav-link.active:hover,
  .page-id-1516 #pills-tab .nav-link[aria-selected="true"]:hover{
    color:var(--jf-cream-ink);
    box-shadow:none;
  }
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:hover{ color:var(--jf-brass-ink); }
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:not(.collapsed):hover{ color:var(--jf-strong); }
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button.collapsed:hover::after{ transform:rotate(90deg); }
  .page-id-1516 .new_faq_section .accordion .accordion-body p a:hover{ color:var(--jf-strong); }   /* 10.58:1 */
}

/* --------------------------------------------------------------------------
   9. WOW — the theme's zoomIn (head, index) and fadeInUp (register) replaced
      by one 16px rise that ENDS ON transform:none (L3, L11). WOW 1.2.1
      caches the computed animation-name and writes it back inline.
   -------------------------------------------------------------------------- */
@keyframes jfRise{
  from{ opacity:0; transform:translate3d(0, 16px, 0); }
  to{   opacity:1; transform:none; }
}
.page-id-1516 .new_faq_section .section-title.wow.zoomIn,
.page-id-1516 .new_faq_section .nav-pills.wow.zoomIn,
.page-id-1516 .new_faq_section .tab-content.wow.fadeInUp{
  -webkit-animation-name:jfRise;
          animation-name:jfRise;
}
.page-id-1516 .new_faq_section .section-title.wow.animated,
.page-id-1516 .new_faq_section .nav-pills.wow.animated,
.page-id-1516 .new_faq_section .tab-content.wow.animated{
  animation-duration:.8s;
  animation-timing-function:var(--jf-ease);
}
.page-id-1516 .new_faq_section .nav-pills.wow.animated{ animation-delay:.1s; }
.page-id-1516 .new_faq_section .tab-content.wow.animated{ animation-delay:.18s; }

/* --------------------------------------------------------------------------
   10. REDUCED MOTION (L11)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .page-id-1516{ --jf-t:0s; }
  .page-id-1516 .new_faq_section .wow,
  .page-id-1516 .new_faq_section .wow.animated{
    visibility:visible !important;
    animation:none !important;
    opacity:1;
    transform:none;
  }
  .page-id-1516 #pills-tab .nav-link,
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button,
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button::after,
  .page-id-1516 .new_faq_section .accordion .accordion-body p a,
  .page-id-1516 .new_faq_section .tab-pane.fade,
  .page-id-1516 .new_faq_section .collapsing{ transition:none !important; }
}

/* --------------------------------------------------------------------------
   11. FORCED COLOURS — rules as real borders in CanvasText (shadows are
       dropped there), the active tab in Highlight, the mark as a glyph (L6).
   -------------------------------------------------------------------------- */
@media (forced-colors:active){
  .page-id-1516 .new_faq_section .section-title::after{ background-image:none; height:1px; border-top:1px solid CanvasText; }
  .page-id-1516 #pills-tab,
  .page-id-1516 #pills-tab .nav-item{ border-color:CanvasText; }
  .page-id-1516 #pills-tab .nav-link{ border:1px solid CanvasText; }
  .page-id-1516 #pills-tab .nav-link.active,
  .page-id-1516 #pills-tab .nav-link[aria-selected="true"]{
    forced-color-adjust:none;
    background:Highlight;
    color:HighlightText;
    border-color:Highlight;
  }
  .page-id-1516 #pills-tab .nav-link.active:focus-visible,
  .page-id-1516 #pills-tab .nav-link[aria-selected="true"]:focus-visible{ outline-color:HighlightText; }
  .page-id-1516 .new_faq_section .accordion .accordion-item{ border-color:CanvasText; }
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button,
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:focus{ border-top:1px solid CanvasText; box-shadow:none; }
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:not(.collapsed),
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:not(.collapsed):focus{ border-top:2px solid CanvasText; box-shadow:none; }
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button::after{
    background:none;
    content:"+";
    font-family:var(--jf-sans);
    font-size:24px;
    line-height:20px;
    text-align:center;
    color:CanvasText;
    transform:none;
  }
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:not(.collapsed)::after{
    content:"\2212";
    transform:none;
  }
  .page-id-1516 .new_faq_section .accordion .accordion-body p{ border-left-color:CanvasText; }
}

/* --------------------------------------------------------------------------
   12. PRINT — every pane shown, every answer open, no marks, the index a
       plain static row, the desk back to one column, the entries numbered
       straight through 01–33 (L8, L11).
   -------------------------------------------------------------------------- */
@media print{
  .page-id-1516 .new_faq_section .wow{ visibility:visible !important; animation:none !important; }
  .page-id-1516 .new_faq_section.sectiongap{ background:#fff !important; box-shadow:none; padding:16px 0; }
  .page-id-1516 .new_faq_section .section-title{ display:block; }
  .page-id-1516 .new_faq_section .section-title p{ max-width:none; margin-top:10px; }
  .page-id-1516 .new_faq_section .section_separation > .col-lg-12{ display:block; }
  .page-id-1516 #pills-tab{ display:flex; position:static; flex-direction:row; border:0; border-bottom:1px solid #6b5426; margin:0 0 20px !important; }   /* display restated: the 992+ index is a grid */
  .page-id-1516 #pills-tab .nav-item{ flex:1 1 0; border:0; margin:0; }
  .page-id-1516 #pills-tab .nav-link,
  .page-id-1516 #pills-tab .nav-link.active,
  .page-id-1516 #pills-tab .nav-link[aria-selected="true"]{ background:transparent; color:#2b3f2f; border:0; box-shadow:none; }
  .page-id-1516 .new_faq_section .tab-content{ max-width:none; padding-top:0; counter-reset:jf-q; }
  .page-id-1516 .new_faq_section .tab-pane .accordion{ counter-reset:none; }
  .page-id-1516 .new_faq_section .tab-content > .tab-pane{ display:block !important; opacity:1 !important; }
  .page-id-1516 .new_faq_section .tab-content > .tab-pane + .tab-pane{ margin-top:28px; }
  .page-id-1516 .new_faq_section .accordion .accordion-collapse{ display:block !important; height:auto !important; }
  .page-id-1516 .new_faq_section .accordion .accordion-item{ break-inside:avoid; border-color:#6b5426; }
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button::after{ display:none; }
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button,
  .page-id-1516 .new_faq_section .accordion .accordion-item .accordion-button:not(.collapsed){ color:#2b3f2f; box-shadow:none; border-top:1px solid #cbb279; }
  .page-id-1516 .new_faq_section .accordion .accordion-body p{ border-left-color:#6b5426; color:#000; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}