/* ==========================================================================
   jlegal.pro — shared site stylesheet
   Single source of truth for the site shell: nav, footer, FB widget,
   back-to-top chrome, and print rules. Previously this CSS was duplicated
   inline in every one of ~72 pages. Edit here once; it applies site-wide.
   Page-specific styles remain inline in each page's own <style> block.
   ========================================================================== */

/* --- design tokens ------------------------------------------------------- */
:root{
  --navy:#1B2A4A;--navy-light:#243966;--red:#8B0000;--accent:#5B9BD5;
  --gold:#C4A97D;--color-gold-link:#C4A97D;--link:#5B9BD5;
  --bg-elevated:#131316;--text-dim:#C0BEB6;--line:rgba(232,230,226,.1)
}

/* --- top nav (jl-compact-nav) ------------------------------------------- */
.jl-nav__action-btn{font-size:12px;font-weight:500;letter-spacing:.02em;padding:5px 12px;border-radius:3px;color:rgba(232,230,226,.85);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;line-height:1}
.jl-nav__action-btn:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.32);text-decoration:none}
.jl-nav__action-btn:focus-visible{outline:2px solid #a8c8e8;outline-offset:2px}
.jl-compact-nav{position:sticky;top:0;z-index:10000;background:#1B2A4A;background-image:linear-gradient(180deg,#243966 0%,#1B2A4A 100%);color:#fff;border-bottom:3px solid #8B0000;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.jl-compact-nav__inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:6px 16px}
.jl-compact-nav__brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-decoration:none;color:#fff;padding-right:18px;border-right:1px solid rgba(255,255,255,.12);flex-shrink:0;line-height:1.2}
.jl-compact-nav__brand:hover{color:#fff;text-decoration:none}
.jl-compact-nav__brand-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.jl-compact-nav__name{font-weight:700;letter-spacing:.4px;font-size:17px;font-family:Georgia,"Times New Roman",serif;color:#fff}
.jl-compact-nav__se{font-style:italic;color:#C4A97D;opacity:.7;font-weight:400}
.jl-compact-nav__motto{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#C4A97D;opacity:.85;white-space:nowrap;padding:2px 6px;border:1px solid rgba(196,169,125,.28);border-radius:3px}
.jl-compact-nav__prompt{font-family:ui-monospace,monospace;font-size:10px;color:#9db8d4;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.jl-compact-nav__prompt-sig{color:#C4A97D;font-weight:600}
.jl-compact-nav__actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
/* Universal brand overflow guard — kills horizontal scroll on small screens across every nav system */
.jl-compact-nav__brand,.jl-nav__brand,.nav-brand,.jnav-brand{max-width:calc(100vw - 132px);overflow:hidden}
.jl-compact-nav__name,.jl-nav__brand-name,.nav-brand-main,.jnav-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Single collapse breakpoint (768px) for every nav system */
@media (max-width:768px){.jl-compact-nav__motto{display:none}.jl-compact-nav__prompt{white-space:normal;font-size:10px;line-height:1.3;overflow-wrap:anywhere}.jl-nav__action-btn{font-size:10px;padding:5px 8px}.jl-compact-nav__actions{gap:5px}.jl-compact-nav__brand{padding-right:0;border-right:none;flex:1 1 100%}.jl-nav__links{display:none}.nav-brand-motto,.jnav .nav-brand-motto{display:none}}
@media (max-width:480px){.jl-compact-nav__name,.jl-nav__brand-name,.nav-brand-main{font-size:14px}}
.jl-nav__hamburger,.jl-nav--mobile-open .jl-nav__hamburger{display:none!important}

/* --- footer (jl-footer) ------------------------------------------------- */
.jl-footer a{transition:color .15s ease,text-decoration-color .15s ease,opacity .15s ease}
.jl-footer a:hover{color:#fff!important;text-decoration:underline;text-decoration-color:rgba(168,200,232,.45);text-underline-offset:2px}
.jl-footer a:focus-visible{outline:2px solid #a8c8e8;outline-offset:2px;border-radius:2px}
.jl-footer a[href*="you-are-not-alone"]:hover{color:#e8d9ff!important}
.jl-footer a[href*="interactive-graph"]:hover{color:#ff8a82!important}
.jl-footer-notice{border-top:1px solid rgba(255,255,255,.05)}
.jl-nav__action-btn:focus-visible,.nav-menu-btn:focus-visible{outline:2px solid #C4A97D;outline-offset:2px}

/* --- back-to-top / go-to-bottom chrome ---------------------------------- */
.back-to-top,.go-to-bottom{position:fixed;bottom:24px;z-index:200;background:rgba(196,53,42,.92);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:50%;width:46px;height:46px;font-size:22px;line-height:46px;text-align:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s;box-shadow:0 4px 18px rgba(0,0,0,.55);text-decoration:none}
.back-to-top{right:24px}
.go-to-bottom{right:76px}
.back-to-top.visible,.go-to-bottom.visible{opacity:1;pointer-events:auto}
.back-to-top:hover,.go-to-bottom:hover{background:#a32820;border-color:rgba(255,255,255,.4)}
@media (max-width:600px){.back-to-top{right:16px}.go-to-bottom{right:64px}.back-to-top,.go-to-bottom{bottom:16px;width:40px;height:40px;font-size:18px;line-height:40px}}

/* --- print -------------------------------------------------------------- */
@media print{
  .jl-compact-nav{display:none!important}
  .jl-footer a{color:#000!important;text-decoration:underline}
  .jl-footer-notice{color:#333!important}
  .back-to-top,.go-to-bottom{display:none!important}
  .jl-fb-latest{display:none!important}
}

/* ==========================================================================
   Mobile hardening (site-wide). Additive rules — no page-specific overrides.
   These apply to every page through the shared shell, so one edit here
   improves mobile everywhere.
   ========================================================================== */

/* 1. Kill horizontal scroll: media and wide blocks never exceed the viewport.
      Wide code blocks scroll INSIDE their own box instead of the page. */
img,svg,video,iframe{max-width:100%;height:auto}
pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
body{overflow-x:hidden}
/* Wide tables scroll inside their own box on phones only — desktop layout
   is left exactly as each page authored it. */
@media (max-width:600px){
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* 2. Footer: tighten columns and enlarge tap targets on phones. */
@media (max-width:600px){
  .jl-footer > div[style*="grid"]{gap:18px 20px!important}
  /* every footer link gets a comfortable touch target */
  .jl-footer a{padding-top:3px;padding-bottom:3px;display:inline-block;min-height:24px}
}

/* 3. Nav action buttons: meet a comfortable touch height on phones. */
@media (max-width:768px){
  .jl-nav__action-btn{min-height:34px;display:inline-flex;align-items:center}
}

/* 4. Respect users who ask for reduced motion, site-wide. */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}