/* My Eloah - site refinement layer. Additive; corrects defects and tightens
   typography, tables and focus states. Loaded after each page's own styles. */

/* 1. SAFETY NET - scroll-reveal must never leave content permanently invisible.
      Elements scrolled past before the observer fired were staying at opacity 0
      forever. Resting state is now visible; the animation is opt-in via JS. */
.reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
html.elc-anim .reveal:not(.visible):not(.elc-shown) { opacity: 0; transform: translateY(18px); }
html.elc-anim .reveal-left:not(.visible):not(.elc-shown) { opacity: 0; transform: translateX(-18px); }
html.elc-anim .reveal-right:not(.visible):not(.elc-shown) { opacity: 0; transform: translateX(18px); }

/* 2. MOTION - honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  html.elc-anim .reveal, html.elc-anim .reveal-left, html.elc-anim .reveal-right,
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 3. ANCHORS - CTAs jump to #ids that were landing under the sticky header. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 104px; }
@media (max-width: 760px) { [id] { scroll-margin-top: 78px; } }

/* 4. FOCUS - there was no visible keyboard focus anywhere on the site. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #B08D57; outline-offset: 2px; border-radius: 3px;
}
.elc-skip { position: absolute; left: 12px; top: -60px; z-index: 9999; padding: 12px 18px;
  border-radius: 0 0 8px 8px; background: #3D0D0D; color: #fff;
  font: 700 .9rem/1 system-ui, sans-serif; text-decoration: none; transition: top .18s ease; }
.elc-skip:focus { top: 0; }

/* 5. TABLES - fee tables are the commercial heart of these pages. */
.elc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 4px; max-width: 100%; }
.elc-tablewrap table { margin: 0; min-width: 0; width: 100%; }
/* Force a scrollable minimum only once the layout is single-column; at desktop
   widths it pushes side-by-side flex boxes past the viewport. */
@media (max-width: 760px) { .elc-tablewrap table { min-width: 420px; } }
.inc-box, .inc-row > * { min-width: 0; }
table.data-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
table.data-table th { text-align: left; font: 700 .74rem/1.3 system-ui, sans-serif;
  letter-spacing: .09em; text-transform: uppercase; padding: 13px 14px; border-bottom: 2px solid currentColor; }
table.data-table td { padding: 13px 14px; vertical-align: top; line-height: 1.5; }
table.data-table tbody tr + tr td { border-top: 1px solid rgba(128,110,90,.24); }
table.data-table tbody tr:hover td { background: rgba(176,141,87,.10); }
table.data-table td.highlight, table.data-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data-table td.highlight { font-weight: 700; }

/* 6. FAQ - clearer affordance; the marker turns rather than swapping glyph. */
.faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 14px; text-align: left; cursor: pointer; min-height: 52px; }
.faq-icon { flex: 0 0 auto; display: inline-block; transition: transform .22s ease; }
.faq-item.active .faq-icon, .faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a { line-height: 1.72; }
.faq-a a { text-decoration: underline; text-underline-offset: 2px; }

/* 7. TYPOGRAPHY - headings hold their shape, body copy keeps a readable measure. */
h1, h2, h3, .sec-headline, .cta-headline, .elc-h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.sec-intro, .hero-sub, .elc-lede, .cta-sub { max-width: 68ch; line-height: 1.72; }
.inc-row-item { line-height: 1.68; }
.hero-stat-num, .ec-big { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* 8. TOUCH - controls reach a 44px target on small screens. */
@media (max-width: 760px) {
  .mobile-menu a, .faq-q, .btn-white, .btn-ghost, .ec-wa, .ec-ask { min-height: 44px; }
  .mobile-menu a { display: flex; align-items: center; }
  body { -webkit-text-size-adjust: 100%; }
}

/* 9. NAV - the hamburger only appeared below 1024px, but the full desktop nav
      needs about 1220px. In between it wrapped onto three lines and collided
      with the CTA. Use the mobile menu through that band instead of cramming. */
@media (min-width: 1025px) and (max-width: 1220px) {
  .nav-links { display: none !important; }
  .nav-hamburger { display: flex !important; }
}
.nav-links a { white-space: nowrap; }

/* 10. Selection and print. */
::selection { background: #B08D57; color: #241a15; }
@media print { .elc-skip, .mobile-menu, .cta-section, .elc-calcsec { display: none !important; } }

/* 11. REVEAL CORRECTION
      The page fades sections in with .reveal / .visible and a 0.75s transition.
      Two problems were observed live:
        a) elements scrolled past before the observer fired never got .visible,
           so section headlines stayed at opacity 0 permanently;
        b) the transition could be left running and stuck at opacity 0.
      .elc-shown is applied by the refinement script to any element that must be
      shown outright - already scrolled past, present on first paint, or caught
      by the backstop. It sets the end state with no transition, so it cannot
      stick. Elements entering the viewport normally still fade in via .visible. */
html.elc-anim .reveal.elc-shown,
html.elc-anim .reveal-left.elc-shown,
html.elc-anim .reveal-right.elc-shown,
html.elc-anim .reveal-scale.elc-shown {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
html.elc-anim .reveal-scale:not(.visible):not(.elc-shown) { opacity: 0; transform: scale(.94); }