/* Docs portal rendering + mobile shell.
   Loaded after jil-site4 / jil-doc-standard. Fixes chrome collisions and
   phone-sized reading. Version: 20260812h */

/* ── Alisha owns docs concierge: hide marketing "Talk to us" CTAs ── */
body.docs-page header.s4-header a.nav-cta,
body.docs-page header.s4-header .s4-nav-cta-desktop,
body.docs-page .s4-mobile-panel a.nav-cta,
body.docs-page .s4-mobile-panel .s4-mobile-cta {
  display: none !important;
}

/* ── Site4 chrome: never flush logo/text to the viewport edge ── */
header.s4-header .wrap,
header.s4-header .wrap.nav {
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
  box-sizing: border-box !important;
}
/* jil-doc-standard sets .wrap { padding: 0 2rem 60px } — fine for content;
   header bar must not lose the left/right inset from a later .nav rule. */
header.s4-header .wrap.nav {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* ── Content headers must never pick up Site4 sticky navy nav ── */
body.site4-body header:not(.s4-header),
body.docs-page header:not(.s4-header) {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border-bottom: none !important;
  color: inherit !important;
}

/* Content footers (no institutional .foot-top grid) stay light */
body.site4-body footer:not(:has(.foot-top)):not(.s4-footer),
body.docs-page footer:not(:has(.foot-top)):not(.s4-footer) {
  background: transparent !important;
  color: inherit !important;
  padding: 2rem 0 4rem !important;
  font-size: inherit !important;
}
body.site4-body footer:not(:has(.foot-top)):not(.s4-footer) a {
  color: var(--accent, #0B6E7F) !important;
}

/* Session bar + conf banner + persona: full-bleed background, but text needs
   the same horizontal inset as the Site4 nav (never flush to the viewport edge).
   Earlier "padding-left: 0 !important" was wiping the chrome padding. */
body.site4-body > .docs-session-bar,
body.site4-body > .docs-conf-banner,
body.docs-page > .docs-session-bar,
body.docs-page > .docs-conf-banner {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
  box-sizing: border-box !important;
}
body.site4-body > .jil-persona-wrap,
body.docs-page > .jil-persona-wrap {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Room for sticky Alisha 1-liner at bottom of viewport on phone */
body.site4-body.docs-page,
body.docs-page.site4-body,
body.site4-body:has(.jil-persona-wrap) {
  padding-bottom: 4.5rem;
}

/* Tables and pre blocks: always scroll horizontally on narrow screens */
body.site4-body table,
body.docs-page table {
  max-width: 100%;
}
body.site4-body .tbl,
body.site4-body .table-wrap,
body.site4-body .doc-table-wrap,
body.docs-page .tbl,
body.docs-page .table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Wrap bare tables that sit in main without a scroll parent */
body.site4-body main,
body.docs-page main,
body.site4-body .wrap,
body.docs-page .wrap {
  overflow-x: clip;
}
body.site4-body main table,
body.docs-page main table,
body.site4-body section table,
body.docs-page section table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* SVGs / figures */
body.site4-body figure,
body.docs-page figure {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.site4-body figure svg,
body.docs-page figure svg,
body.site4-body main svg,
body.docs-page main svg {
  max-width: 100%;
  height: auto;
}

/* Images */
body.site4-body img,
body.docs-page img {
  max-width: 100%;
  height: auto;
}

/* Pre / code */
body.site4-body pre,
body.docs-page pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.82rem;
}

/* Persona chrome: full width, thumb-friendly; fixed to bottom on phone */
.jil-persona-wrap {
  z-index: 45;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e2e8f0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 640px) {
  body.docs-page .jil-persona-wrap,
  body.site4-body .jil-persona-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .jil-persona-wrap {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .jil-persona-label {
    font-size: 13px !important;
  }
  .jil-persona-input {
    font-size: 16px !important; /* iOS no-zoom on focus */
    min-height: 44px !important;
    max-height: 44px !important;
  }
  .jil-persona-send,
  .jil-persona-clear {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  /* Session bar stacks cleanly — keep horizontal inset */
  .docs-session-bar {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
  }
  .docs-session-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .docs-session-btn {
    flex: 1 1 auto;
    text-align: center;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .docs-conf-banner {
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
  }
  .jil-breadcrumb__inner {
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.78rem;
  }
  /* Content hero / facts chips */
  .facts {
    gap: 8px !important;
  }
  .fact {
    font-size: 12px !important;
  }
  /* Grids collapse */
  .grid2,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }
  h1 {
    font-size: clamp(1.45rem, 6.5vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  /* Site4 mobile nav already handles hamburger; ensure touch targets */
  .s4-nav-toggle {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Prevent horizontal page scroll from wide absolute layouts */
html, body.site4-body, body.docs-page {
  overflow-x: clip;
  max-width: 100vw;
}

/* ── RTL (ar / he / fa): unlock + docs chrome reading direction ── */
html[dir="rtl"] body.docs-page .docs-unlock-card,
html[dir="rtl"] body.docs-page .docs-unlock-wrap,
html[dir="rtl"] body.docs-page main {
  text-align: right;
}
html[dir="rtl"] body.docs-page .docs-session-bar {
  flex-direction: row-reverse;
}
html[dir="rtl"] body.docs-page .docs-session-bar .docs-session-left,
html[dir="rtl"] body.docs-page .docs-session-bar .docs-session-actions {
  flex-direction: row-reverse;
}
html[dir="rtl"] body.docs-page .docs-conf-banner {
  text-align: right;
}
html[dir="rtl"] body.docs-page .docs-unlock-card .row {
  direction: rtl;
}
html[dir="rtl"] body.docs-page .req-card .grp {
  direction: rtl;
}
/* Keep Site4 navy bar logo-left / controls-right in visual LTR for brand
   consistency; language control still works. Document content is RTL. */
html[dir="rtl"] header.s4-header {
  direction: ltr;
}
html[dir="rtl"] footer {
  direction: ltr;
}
/* Persona 1-liner stays readable in RTL */
html[dir="rtl"] .jil-persona-wrap {
  direction: rtl;
  text-align: right;
}