/* =========================================================
   JW Assist Unified Low-Vision Theme (Flat, High-Contrast)
   Mobile-first, text-growth safe.
========================================================= */

/* ========== 1) Theme Tokens ========== */
:root{
  --brand:#DA291C;
  --brand-strong:#B82015;
  --bg:#F2A900;
  --ink:#000;
  --card: var(--bg);
  --focus:#1e40ff;
  --fs-base: clamp(20px, 2.6vw + 8px, 26px);

  /* Everything uses the same core size */
  --fs-body: var(--fs-base);
  --lh: 1.6;
--fs-h1: calc(var(--fs-base) * 1.3);
--fs-h2: calc(var(--fs-base) * 1.2);
--fs-h3: calc(var(--fs-base) * 1.1);
  --fs-h4: var(--fs-base);
  --fs-btn: var(--fs-base);
  --fs-small: var(--fs-base);
  --radius: calc(var(--fs-base) * 0.60);
  --border: max(2px, calc(var(--fs-base) * 0.18));
  --text-pad: clamp(10px, 3.5vw, 18px);
  --inset-gap-in-box: clamp(10px, 2.2vw, 22px);
  --inset-bg: color-mix(in srgb, var(--bg) 70%, #ffffff 30%);
  --inset-border: rgba(0,0,0,.65);
  --inset-inner: rgba(255,255,255,.45);
  --inset-shadow: rgba(0,0,0,.25);
  --inset-container-pad: clamp(12px, 4vw, 18px);
  --space-1: calc(var(--fs-base) * 0.40);
  --space-2: calc(var(--fs-base) * 0.80);
  --space-3: calc(var(--fs-base) * 1.20);
  --space-4: calc(var(--fs-base) * 1.60);
  --para-gap: 1em;
  --para-gap-span-mult: 0.6;
  --pad-inline: var(--space-2);
  --pad-block:  var(--space-2);
  --air-outer: calc(var(--space-2) * 1.25);
  --air-inner: calc(var(--space-2) * 1.15);
  --gutter: clamp(8px, 1.2vw, 16px);
  --container-w: 100vw;
  --actions-w: 100vw;
  --menu-equal: 100vw;
  --menu-fixed: 100vw;    
--safe-top: env(safe-area-inset-top, 0px);
--bar-height: calc(var(--fs-base) * 3);
--bar-space: calc(var(--bar-height) + env(safe-area-inset-top, 0px));
  --heading-bg: var(--brand);
  --heading-text: #fff;
  --btn-bg: var(--heading-bg);
  --btn-fg: var(--heading-text);
  --h2-offset-inline: clamp(8px, 2vw, 22px);
  --h2-unified-width: auto;
  --arrow-right: "→";
  --arrow-left:  "←";
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --safe-bot: env(safe-area-inset-bottom, 0px);
  --focus-ring: 3px;
  --focus-gap-block: clamp(6px, 0.6vw, 10px);
  --focus-gap-inline: clamp(6px, 0.6vw, 10px);
  --focus-radius: clamp(6px, 0.6vw, 12px);
  --error-bg: var(--brand-strong);
  --error-text: #fff;

  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;

  --jwa-text-align: left;
}

:root[data-all-uppercase="true"],
:root[data-all-uppercase="true"] body {
  text-transform: uppercase;
}

/* All normal text uppercased when the toggle is on */
:root[data-all-uppercase="true"] h1,
:root[data-all-uppercase="true"] h2,
:root[data-all-uppercase="true"] h3,
:root[data-all-uppercase="true"] h4,
:root[data-all-uppercase="true"] h5,
:root[data-all-uppercase="true"] h6,
:root[data-all-uppercase="true"] p,
:root[data-all-uppercase="true"] span,
:root[data-all-uppercase="true"] li,
:root[data-all-uppercase="true"] blockquote,
:root[data-all-uppercase="true"] a,
:root[data-all-uppercase="true"] button,
:root[data-all-uppercase="true"] label,
:root[data-all-uppercase="true"] .btn,
:root[data-all-uppercase="true"] .btn-primary,
:root[data-all-uppercase="true"] .atb-btn,
:root[data-all-uppercase="true"] .menu-item,
:root[data-all-uppercase="true"] .tile,
:root[data-all-uppercase="true"] .tile-quick,
:root[data-all-uppercase="true"] .page-title,
:root[data-all-uppercase="true"] .menu-heading,
:root[data-all-uppercase="true"] .page-actions .page-nav-buttons a,
:root[data-all-uppercase="true"] .page-actions .page-nav-buttons button {
  text-transform: uppercase !important;
}

/* Opt-out list: keep original case even when uppercase mode is on */
:root[data-all-uppercase="true"] code,
:root[data-all-uppercase="true"] pre,
:root[data-all-uppercase="true"] kbd,
:root[data-all-uppercase="true"] samp,
:root[data-all-uppercase="true"] input,
:root[data-all-uppercase="true"] textarea,
:root[data-all-uppercase="true"] select,
:root[data-all-uppercase="true"] .sr-only,
:root[data-all-uppercase="true"] [data-keep-case],
:root[data-all-uppercase="true"] [contenteditable="true"] {
  text-transform: none !important;
}

:root[data-all-bold="true"] {
  font-synthesis: none;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-family:
    "Atkinson Hyperlegible",
    "OpenDyslexic",
    "Lexend Deca",
    "Segoe UI Variable Display",
    "Segoe UI Variable Text",
    "Segoe UI",
    "SF Pro Text",
    "SF Pro",
    "Inter var",
    "Inter",
    "Arial Black",
    "Arial",
    "Helvetica",
    sans-serif !important;
}

:root[data-all-bold="true"]
:where(
  h1,h2,h3,h4,h5,h6,
  p,small,span,em,strong,
  ul,ol,li,dl,dt,dd,
  blockquote,pre,code,kbd,samp,
  figure,figcaption,caption,
  address,summary,details,
  button,.btn,.btn-primary,.atb-btn,a,
  label,input,select,textarea,
  table,thead,tbody,tfoot,tr,th,td
){
  font-weight: 900 !important;
  font-variation-settings: "wght" 900 !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.08em !important;
}

:root[data-all-bold="true"] .box *,
:root[data-all-bold="true"] .inset-section *{
  font-weight: 900 !important;
  font-variation-settings: "wght" 900 !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.08em !important;
}

@supports (-webkit-text-stroke: .45px currentColor){
  :root[data-all-bold="true"]
  :where(
    h1,h2,h3,h4,h5,h6,
    p,small,span,em,strong,
    ul,ol,li,dl,dt,dd,
    blockquote,pre,code,kbd,samp,
    figure,figcaption,caption,
    address,summary,details,
    button,.btn,.btn-primary,.atb-btn,a,
    label,input,select,textarea,
    table,thead,tbody,tfoot,tr,th,td
  ){
    -webkit-text-stroke: .45px currentColor;
    -webkit-text-fill-color: currentColor; /* ensure solid fill */
  }

  :root[data-all-bold="true"] .box *,
  :root[data-all-bold="true"] .inset-section *{
    -webkit-text-stroke: .45px currentColor;
    -webkit-text-fill-color: currentColor;
  }
}
:root[data-all-bold="true"] :where(
  #btnHome,
  #btnAllVideos,
  .audio-controls-bar :is(button,a),
  .audio-controls-tray .btn-primary,
  .meeting-mode-tray .btn-primary
){
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: currentColor !important;
}
/* ========== 2) Base / Reset ========== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{
  margin:0; padding:0; width:100%; overflow-x:hidden;
  background:var(--bg); color:var(--ink);
  font:700 var(--fs-body, var(--fs-base))/var(--lh) Arial, sans-serif;
  touch-action: manipulation;
  -webkit-text-size-adjust:none !important;
  text-size-adjust:none !important;
}
button,input,select,textarea,a{ font:inherit; line-height:inherit; }
img,video,svg{ display:block; max-width:100%; height:auto; }
ul,ol{ list-style:none; margin:0; padding:0; }
p{ margin-block: var(--para-gap); }
.left-align{ text-align:left !important; }

:where(h1,h2,h3,.tile){
  word-break: keep-all; overflow-wrap: normal; hyphens: none;
}

.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,1px,1px);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

figcaption,
.caption,
.caption-text {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* ========== 3) Focus System (one outer ring) ========== */

/* 3.1 – Base outline reset so we control everything */
:where(
  a,button,[role="button"],input,select,textarea,summary,
  video,img,figure,[role="img"],
  h1,h2,h3,h4,h5,h6,
  p,span,small,em,strong,li
){
  outline: 2px solid transparent;
  outline-offset: 0;
  border-radius: var(--focus-radius);
  transition: box-shadow .06s ease;
}

/* 3.1b – Kill iOS / Safari native black–white focus ring
   (only when JS has added .ipad-focus to <html>) */
html.ipad-focus *:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* 3.1c – But keep a clear outline on form controls */
:where(input,select,textarea):focus{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* 3.2 – Remove browser’s own focus ring on our big interactive things */
:where(
  a,button,.btn,.btn-primary,
  .menu-item,.tile,.tile-quick,
  .pub-title-btn,.chapter-btn,
  h1,h2,h3,h4,h5,h6
):is(:focus-visible,:active,:hover){
  outline: none !important;
  box-shadow: none !important;
      
}
/* 3.3 – Any block that should *own* the blue ring */
:where(
  /* Text blocks */
  p,
  .qa-box,

  /* Headings / big bars */
  h1,h2,h3,h4,h5,h6,
  .menu-heading,
  h1.page-title,
  h1#pageTitleHome,
  #content > h1,

  /* Menus, tiles, chapters */
  .menu-item,
  .tile,
  .tile-quick,
  .pub-title-btn,
  .chapter-btn,

  /* Page Actions buttons/links */
  .page-actions .page-nav-buttons :is(a,button),

  /* Big media / explore buttons */
  button.JWA-Video,
  a.JWA-Video,
  .memorize-trigger,
  .explore,
  .video-open-btn,

  /* Audio controls and top buttons */
  .audio-controls-bar .btn-primary,
  .audio-controls-tray .btn-primary,
  .meeting-mode-tray .btn-primary,
  .btn-home,
  #btnHome,
  #btnAllVideos
){
  position: relative;
}

/* 3.4 – Kill inner outline/halo on those blocks when focused/autofocused */
:where(
  p,
  .qa-box,
  h1,h2,h3,h4,h5,h6,
  .menu-heading,
  h1.page-title,
  h1#pageTitleHome,
  #content > h1,
  .menu-item,
  .tile,
  .tile-quick,
  .pub-title-btn,
  .chapter-btn,
  .page-actions .page-nav-buttons :is(a,button),
  button.JWA-Video,
  a.JWA-Video,
  .memorize-trigger,
  .explore,
  .video-open-btn,
  .audio-controls-bar .btn-primary,
  .audio-controls-tray .btn-primary,
  .meeting-mode-tray .btn-primary,
  .btn-home,
  #btnHome,
  #btnAllVideos
):is(:focus,:focus-visible,:focus-within),
:where(
  p,
  .qa-box,
  h1,h2,h3,h4,h5,h6,
  .menu-heading,
  h1.page-title,
  h1#pageTitleHome,
  #content > h1,
  .menu-item,
  .tile,
  .tile-quick,
  .pub-title-btn,
  .chapter-btn,
  .page-actions .page-nav-buttons :is(a,button),
  button.JWA-Video,
  a.JWA-Video,
  .memorize-trigger,
  .explore,
  .video-open-btn,
  .audio-controls-bar .btn-primary,
  .audio-controls-tray .btn-primary,
  .meeting-mode-tray .btn-primary,
  .btn-home,
  #btnHome,
  #btnAllVideos
).autofocus{
  outline: none !important;
  box-shadow: none !important;
}

/* 3.5 – Single outer blue focus ring with a *gap* around the whole block */
:where(
  p,
  .qa-box,
  h1,h2,h3,h4,h5,h6,
  .menu-heading,
  h1.page-title,
  h1#pageTitleHome,
  #content > h1,
  .menu-item,
  .tile,
  .tile-quick,
  .pub-title-btn,
  .chapter-btn,
  .page-actions .page-nav-buttons :is(a,button),
  button.JWA-Video,
  a.JWA-Video,
  .memorize-trigger,
  .explore,
  .video-open-btn,
  .audio-controls-bar .btn-primary,
  .audio-controls-tray .btn-primary,
  .meeting-mode-tray .btn-primary,
  .btn-home,
  #btnHome,
  #btnAllVideos
):is(:focus-visible,:focus-within,.autofocus)::after{
  content: "";
  position: absolute;
  inset: calc(var(--focus-gap-block) * -1)
         calc(var(--focus-gap-inline) * -1);
  z-index: 1;
  pointer-events: none;
  border-radius: var(--focus-radius);
  box-shadow: 0 0 0 var(--focus-ring) var(--focus);
}

/* 3.6 – When a button lives *inside* a heading bar, only the bar gets the ring */
#menu .menu-heading > .menu-item::after{
  content: none !important;
}

/* 3.7 – Extra padding for focusable paragraphs so the ring doesn’t kiss the text */
:where(
  p[tabindex],
  p[data-audio-start],
  p[data-audio-src]
){
  padding-block: calc(var(--space-1) * 1.1);
  padding-inline: calc(var(--text-pad) * 1.1);
}

/* Make focusable text inside inset boxes extra roomy
   so the blue ring has lots of air but still tracks the whole paragraph */
.inset-section :where(
  p[tabindex],
  p[data-audio-start],
  p[data-audio-src],
  .autofocus
){
  padding-block: calc(var(--space-1) * 1.35);
  padding-inline: calc(var(--text-pad) * 2.1);
}
/* 3.8 – Retire old black/white ring-scope styling */
.ring-scope{
  position: relative;
}
.ring-scope::after{
  content: none !important;
}

/* ========== 4) Containers ========== */
.inset-section{
  display:block;
  width: calc(100vw - (var(--gutter) * 2));
  max-width: calc(100vw - (var(--gutter) * 2));
  margin: var(--air-outer) 0;
  margin-left:  calc(50% - 50vw + var(--gutter) + var(--safe-left));
  margin-right: calc(50% - 50vw + var(--gutter) + var(--safe-right));
  overflow-x: clip; contain: layout paint;
  backface-visibility: hidden; transform: translateZ(0);
  border-radius: var(--radius); color: var(--ink);
  background: rgba(255,255,255,0.06);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  padding-block: clamp(12px, 2.5vw, 20px);

  /* slightly tighter than before */
  padding-inline: clamp(8px, 1.8vw, 14px);

  border: none;
  box-shadow:
    0 2px 0 #000,
    0 6px 10px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

.inset-section.full-bleed{
  width:100vw; max-width:100vw;
  margin-left: calc(50% - 50vw + var(--safe-left));
  margin-right:calc(50% - 50vw + var(--safe-right));
}
.inset-section :is(p,ul,ol){ margin-left:0; padding-inline: 0; }

.box{
  width: calc(100vw - (var(--gutter) * 2));
  max-width: calc(100vw - (var(--gutter) * 2));
  margin: var(--air-outer) 0;
  margin-left:  calc(50% - 50vw + var(--gutter) + var(--safe-left));
  margin-right: calc(50% - 50vw + var(--gutter) + var(--safe-right));

  /* keep comfy top/bottom, tighten sides */
  padding-block: var(--air-inner);
  padding-inline: clamp(6px, 2vw, 14px);

  background: var(--card);
  border: var(--border) solid #000;
  border-radius: calc(var(--radius) * 0.8);
  box-shadow:
    0 2px 0 #000,
    0 6px 10px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.55);
  color: var(--ink);
  line-height: 1.6;
}
.box:focus-within,.box:hover{
  box-shadow:
    0 3px 0 #000,
    0 10px 16px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.6);
}
.box .inset-section{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;

  /* very tight frame when inset is inside a box */
  padding-inline: clamp(4px, 1.4vw, 10px);

  --inset-container-pad: 0;
}

/* ========== 5) Headings & Title Buttons ========== */
h1, :is(h2,h3){
  display:block; width:100%;
  margin: var(--air-outer) auto var(--space-1);
  padding: calc(var(--pad-block) * 1.15) calc(var(--pad-inline) * 1.15);
  color: var(--heading-text); background: var(--brand);
  border: var(--border) solid #000; border-radius: var(--radius);
  box-shadow:none;
}
h1{
  font-size: var(--fs-h1);
  width: calc(100vw - (var(--gutter) * 2));
  margin-left: calc(50% - 50vw + var(--gutter) + var(--safe-left));
  margin-right:calc(50% - 50vw + var(--gutter) + var(--safe-right));
  scroll-margin-top: calc(max(var(--bar-space, var(--bar-height)), var(--sticky-top-height, 0px)) + 16px);
}
/* H2 and H3 inherit the shared banner styling from
   h1, :is(h2,h3){ … } above; this keeps everything in sync. */
h2,
h3 {
  display: inline-block;
  width: calc(100vw - (var(--gutter) * 2) - var(--safe-left) - var(--safe-right));
  max-width: 100%;
  margin-top: var(--air-outer);
  margin-bottom: var(--space-1);
  margin-left: calc(50% - 50vw + var(--gutter) + var(--safe-left));
  margin-right: calc(50% - 50vw + var(--gutter) + var(--safe-right));
}

/* Only the font-size differs between levels */
h2 {
  font-size: var(--fs-h2);
}

.box h2, .box h3 {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: var(--pad-inline);
}

h3 {
  font-size: var(--fs-h3);
}
.page-title,#content>h1{
  display:block; font-size:var(--fs-h1);
  width: calc(100vw - (var(--gutter) * 2));
  margin: var(--air-outer) auto var(--space-1);
  margin-left: calc(50% - 50vw + var(--gutter) + var(--safe-left));
  margin-right:calc(50% - 50vw + var(--gutter) + var(--safe-right));
}

a.btn-primary.as-h2,button.btn-primary.as-h2,
a.video-link-h2,button.video-link-h2{
  display:inline-block; font-size:var(--fs-h2); line-height:1.3;
  padding: var(--pad-block) var(--pad-inline); color:var(--heading-text);
  background: var(--brand); border: var(--border) solid #000; border-radius: var(--radius);
  text-decoration:none; width:fit-content;
  min-width: min(50vw, calc(100% - (var(--gutter)*.5)));
  max-width: calc(100% - (var(--gutter)*.5));
  margin-top: var(--air-outer); margin-bottom: var(--space-1);
  margin-left: calc(50% - 50vw + var(--gutter) + var(--safe-left) + var(--h2-offset-inline));
  margin-right:auto;
}

a.btn-primary.as-h2:hover,button.btn-primary.as-h2:hover,
a.video-link-h2:hover,button.video-link-h2:hover{ background: var(--brand-strong); }

/* ========== 6) Buttons & Links ========== */
:where(button,.btn,.btn-primary,.btn-toggle,.atb-btn,
       .page-actions .page-nav-buttons :is(a,button)){
  font-size: var(--fs-btn);
}


.btn-primary,.btn,.atb-btn{
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--border) solid #000;
  border-radius: var(--radius);
}
.btn-toggle{
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--border) solid #000; border-radius: var(--radius);
}
.btn-toggle[aria-pressed="true"]{ background: var(--brand-strong); }
.btn-primary[disabled],.btn-primary[aria-disabled="true"],
.btn[disabled],.btn[aria-disabled="true"],
.atb-btn[disabled],.atb-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
.btn:hover,.atb-btn:hover{ background: var(--brand-strong); }
:is(a,button).btn-primary[data-arrow="right"]::after,
:is(a,button).tile[data-arrow="right"]::after{ content:var(--arrow-right); margin-left:.25em; }
:is(a,button).btn-primary[data-arrow="left"]::before,
:is(a,button).tile[data-arrow="left"]::before{ content:var(--arrow-left); margin-right:.25em; }
a:not(.btn):not(.btn-primary):not(.tile):not(.menu-item):not(.pub-title-btn):not(.chapter-btn){ text-decoration:none; }

a.btn-home,
button.btn-home,
a[data-home],
button[data-home],
#btnHome,
#btnAllVideos{
  margin-left:12px;
  color:var(--heading-text)!important;

  /* Force solid heading color (no see-through) */
  background: var(--heading-bg) !important;
  background-color: var(--heading-bg) !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;

  border:2px solid #000!important;
  box-shadow: inset 0 0 0 1.5px #fff !important;
  border-radius:var(--radius)!important;
  padding-block:.45em; padding-inline:.95em; min-height: calc(var(--fs-base) * 2.2);
  letter-spacing:.02em; text-decoration:none!important; position:relative; line-height:1.15;
}

.audio-controls-bar{
  --bar-pad-y: 2px;                   /* less top/bottom padding */
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  z-index: 9999;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 4px;                    /* buttons a bit closer */
  row-gap: 2px;                       /* rows closer */

  width: 100vw;
  margin: 0;
  padding-block: var(--bar-pad-y);
  padding-inline: calc(var(--gutter) + var(--safe-left))
                  calc(var(--gutter) + var(--safe-right));

  background: transparent;
  border: 0;
  box-shadow: none;

  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  overflow-x: hidden;
  overflow-y: visible;
}
body{ padding-top: var(--bar-space); }

.audio-controls-tray{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap: clamp(3px, 0.8vw, 8px);
  row-gap: 3px;
  padding: 0;
  margin: 0 2px 0 3px;
  min-width: 0;
  flex-wrap: wrap;
  overflow: visible;
}
.audio-controls-tray .btn-primary{
  flex: 0 0 auto;
  min-width: max-content;
  max-width: 100%;
  margin: 0;
  padding-block: 0.45em;      /* more height */
  padding-inline: 1.2em;      /* more width */
  font-size: inherit;         /* use the 20px from the rule above */
  line-height: 1.2;
  letter-spacing: 0.01em;
  border: 2px solid #000;
  border-radius: calc(var(--radius) * 0.8);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  box-shadow: none;
}
.audio-controls-tray .btn-primary.play-toggle{
  flex: 0 0 auto;            
  min-width: max-content;
  padding-block: .18em;
}
.audio-controls-tray .btn-primary.play-toggle .play-label,
.audio-controls-tray .btn-primary.play-toggle .play-num{
  display: inline;
  font-size: inherit;
  line-height: inherit;
}

.meeting-mode-tray{
  grid-area: mode; display:flex; align-items:center;
  gap: clamp(2px, .5vw, 6px); padding-inline:4px; min-width:0; overflow:hidden;
}
.meeting-mode-tray .btn-primary{
  flex:0 0 auto; padding:.16em .44em;
  font-size: clamp(0.66rem, 1.8vw, 0.84rem);
  line-height:1.05; white-space:nowrap;
}

#btnHome{
  grid-area: home;
  justify-self: start;
  margin-left: clamp(6px, 1vw, 12px);
  margin-right: clamp(4px, .8vw, 8px) !important;
  padding-block:.14em;
  padding-inline:.44em;
  min-height: 32px;
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  border-width:2px !important;
  border-radius: calc(var(--radius)*.8) !important;
}
/* ========== 8) Tiles & Quick Grids ========== */
.tile{
  display:block; width:auto;
  padding: calc(var(--pad-block)*1.05) calc(var(--pad-inline)*1.05);
  margin: var(--space-1) clamp(8px, 2vw, 24px);
  background:var(--brand); color:#fff;
  border: var(--border) solid #000; border-radius: var(--radius);
  font-size: calc(var(--fs-base) * 1.10); line-height:1.3;
  text-decoration:none; transition: background .15s ease, transform .06s ease;
}
.tile:hover{ background:var(--brand-strong); transform:translateY(-1px); }

.grid-quick{ --quick-ch:4; --quick-pad:.32em; --quick-gap: clamp(2px,.25vw,8px); --quick-edge: clamp(3px,.35vw,10px);
  --quick-size: calc((var(--quick-ch) * 1ch) + (var(--quick-pad) * 2));
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--quick-size), max-content));
  justify-content: flex-start;  
  justify-items: center;
  grid-auto-rows: var(--quick-size); gap: var(--quick-gap);
  padding: var(--quick-edge); margin:0;
}

.tile-quick{
  display:flex;
  align-items:center;
  justify-content:center;
  inline-size: auto;
  min-inline-size: var(--quick-size);
  block-size: auto;
  padding: var(--quick-pad);
  white-space: nowrap;
  font-size: var(--fs-base);
  line-height:1;
  background: var(--brand);
  color:#fff;
  border: var(--border) solid #000;
  border-radius: var(--radius);
  transition: background .15s ease, transform .06s ease;
}
.tile-quick:hover{ background:var(--brand-strong); transform:translateY(-1px); }
.tile-quick:focus{
  outline: none;
  box-shadow: none;
}
.quick-break{
  grid-column:1 / -1; height:0; margin: var(--space-3) 0 var(--space-2);
  border-top:2px solid #000; box-shadow: inset 0 0 0 1px #fff;
}

/* ========== 9) Media (Video, Audio, Figures) ========== */
.jwa-video{
  position: relative;
  display: block;
  width: 100%;
  max-width: calc(var(--container-w) - (var(--gutter) * 2));
  margin: var(--air-outer) auto;

  background: #000;
  border-radius: var(--radius);
  border: none;
  overflow: hidden;
}
.jwa-video::after{
  content:"▶"; position:absolute; inset:0; margin:auto; width:max-content; height:max-content;
  top:50%; left:50%; transform:translate(-50%,-50%);
  font-size: clamp(80px, 12vw, 160px); color:rgba(255,255,255,.8);
  text-shadow:0 0 20px rgba(0,0,0,.8); pointer-events:none;
}
.jwa-video.playing::after{ content:none; }
.jwa-video.video-full-bleed{
  width:100vw; max-width:100vw;
  margin-left: calc(50% - 50vw + var(--safe-left));
  margin-right:calc(50% - 50vw + var(--safe-right));
}
.box .jwa-video,
.inset-section .jwa-video{
  width: calc(100% - var(--gutter));
  max-width: calc(var(--container-w) - var(--gutter));
  margin: var(--air-outer) auto;
  border-radius: var(--radius);
}
@supports (height: 100dvh){
  .jwa-video.video-full-bleed{ max-height: calc(100dvh - var(--bar-space) - var(--safe-top) - var(--safe-bot)); }
}
@supports not (height: 100dvh){
  .jwa-video.video-full-bleed{ max-height: calc(100vh - var(--bar-space) - var(--safe-top) - var(--safe-bot)); }
}
audio{ display:block; width:100%; max-width:min(100%, calc(var(--container-w) - 2*var(--gutter))); margin: var(--air-outer) auto; }

/* Resource pages never show the play overlay */
body.resources-page .jwa-video::after {
  content: none !important;
}

.jwa-figure{
  display:grid; grid-template-rows:minmax(0,1fr) auto; align-items:stretch; justify-items:center;
  width:100vw; max-width:100vw;
  height: calc(100vh - var(--bar-space) - var(--safe-top) - var(--safe-bot));
  margin:0; margin-left:calc(50% - 50vw + var(--safe-left)); margin-right:calc(50% - 50vw + var(--safe-right));
  border:none; border-radius:var(--radius); overflow:hidden;
}
@supports (height: 100dvh){
  .jwa-figure{ height: calc(100dvh - var(--bar-space) - var(--safe-top) - var(--safe-bot)); }
}
.jwa-figure>img{
  grid-row:1; align-self:center; justify-self:center;
  width:100%; height:100%; object-fit:contain; object-position:center; border-radius:inherit;
}
.jwa-figure>figcaption{
  grid-row:2; width:100%; padding:.6em clamp(12px,3vw,22px); margin:0;
  font-size: inherit;          /* inherits --fs-body from body */
  line-height: inherit;
  color:rgba(0,0,0,.9); background:transparent;
}
.jwa-figure.figure-full-bleed{ border-radius:0; }
.box .jwa-figure{
  grid-template-rows:auto auto; width:100%; height:auto; margin: var(--space-2) 0 0 0;
  border-radius: calc(var(--radius) * .6);
}
.box .jwa-figure>img{ inline-size:100%; block-size:auto; object-fit:contain; object-position:center; }
.box .jwa-figure>figcaption{
  width:100%; padding:.6em var(--text-pad) 0 var(--text-pad); margin:0 0 var(--space-1) 0;
}

/* ========== 10) Page Actions ========== */
.page-actions{
  position:relative;
  margin-top:var(--space-1);
  padding-top:var(--space-2);
  border-top:none;
}
.page-actions .page-nav-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-content:start;
  gap: calc(var(--space-2) * .7);
  padding: 0 var(--gutter);
  max-width: var(--actions-w);
  margin: 0 auto var(--space-3);
  align-items:stretch;
}

@media (min-width:820px){
  .page-actions .page-nav-buttons{ grid-template-columns: repeat(2, 1fr); }
}
.page-actions .page-nav-buttons :is(a,button,span){
  color: var(--heading-text); background: var(--heading-bg);
  border: var(--border) solid #000; border-radius: var(--radius);
  text-decoration:none; display:inline-flex; justify-content:center; align-items:center;
  text-align:center; padding:.3em .9em; line-height:1.3;
  box-shadow:0 1px 1px rgba(0,0,0,.25); transition: background .2s ease, transform .06s ease;
}
.page-actions .page-nav-buttons :is(a,button):hover{ background: var(--brand-strong); }
.page-actions :is(h3,h4){
  display:block; margin: var(--air-outer) auto var(--space-2);
  width: calc(100% - (var(--gutter) * 2)); max-width: var(--actions-w);
  font-size: var(--fs-h3); color: var(--heading-text);
  background: var(--brand); border: var(--border) solid #000; border-radius: var(--radius);
  padding: var(--air-inner); line-height:1.3; text-align:center !important;
}
.page-actions h4 a{
  color: var(--heading-text);
  text-decoration:none;
  border:none;
  outline:none;
  background:transparent;
}

.page-actions h4 a:focus,
.page-actions h4 a:focus-visible{
  outline:none;
  box-shadow:none;
}


/* ========== 11) Menus (Home) — unified & equalized ========== */


#menu{
  width: 100%;
}

#menu ul{
  /* Single column whose width is the widest heading (max-content),
     but never larger than the viewport. Center the whole stack. */
  display: inline-grid;
  grid-auto-rows: auto;
  gap: calc(var(--space-2) * 1.2);
  inline-size: min(100%, max-content);
  margin: 0 auto;
  padding: 1rem 0;
  justify-items: stretch;
}

#menu ul > li{
  margin: 0;
  inline-size: 100%;   /* each <li> fills that single column */
}

/* The red buttons */
#menu li > a.menu-item,
#menu li > a.tile{
  display: block;
  margin: 0;
  text-align: center;
  white-space: normal;
  inline-size: var(--menu-fixed);      
  max-inline-size: 100%;
}

/* Inside .box keep the same centering */
.box #menu{ max-width: 100%; margin: 0; }
.box #menu ul{ width: 100%; padding-inline: 0; }

@media (max-width: 1024px){

  /* Home screen menu: use full viewport width for large text */
  #menu{
    width: 100vw;
    padding-inline: 0;
    margin-left: calc(50% - 50vw + var(--safe-left));
    margin-right: calc(50% - 50vw + var(--safe-right));
  }

  #menu ul{
    display: block;
    width: 100%;
    max-width: 100%;
    inline-size: 100%;
    padding: 0 var(--text-pad);
    margin: 0;
  }

  #menu ul > li{
    width: 100%;
    inline-size: 100%;
  }

  #menu li > a.menu-item,
  #menu li > a.tile{
    display: block;
    width: 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    margin-inline: 0;
  }
}

@media (min-width: 768px){
  #menu li > a.menu-item,
  #menu li > a.tile{
    inline-size: var(--menu-equal);   
  }
}

@media (max-width: 720px){
  :root{
    --bar-space: calc((var(--bar-height) * 2) + env(safe-area-inset-top, 0px));
  }

    
  .audio-controls-bar{
    --bar-pad-y: 2px;
    display: flex;
    flex-wrap: wrap;               
    row-gap: 2px;                
    column-gap: 4px;             
    justify-content: flex-start;
    align-items: center;

    overflow: visible;        
    padding-inline: calc(var(--gutter) + var(--safe-left))
                    calc(var(--gutter) + var(--safe-right));
  }




  .audio-controls-tray .btn-primary{
    flex: 0 1 auto;             
    white-space: nowrap;
    padding-block: .14em;
    padding-inline: .55em;
    font-size: 0.9rem !important;
    line-height: 1.15;
  }

  #btnHome{
    flex: 0 1 auto;
    white-space: nowrap;
    padding-block: .16em;
    padding-inline: .58em;
    font-size: 0.85rem !important;
    line-height: 1.15;
    margin-right: 6px !important;
  }
}

.menu-item{
  display:block;
  margin-block: var(--space-1);
  margin-inline: clamp(8px, 2vw, 24px);
  padding: var(--pad-block) var(--pad-inline);
  font-size: var(--fs-h2);
  line-height:1.3;
  color: var(--heading-text);
  background: var(--brand);
  border: var(--border) solid #000;
  border-radius: var(--radius);
  text-decoration:none;
  transition: background .15s ease, transform .06s ease;
}
.menu-item:hover{ background: var(--brand-strong); }
.menu-item:is(:focus,:focus-visible), .menu-item.autofocus{ outline:none !important; box-shadow:none !important; }

#pubList.long-menu{
  padding:0 var(--gutter);
  margin: var(--space-2) 0;
  text-align:center;
}
#pubList.long-menu .menu-heading{
  background:var(--brand); color:var(--heading-text);
  border: var(--border) solid #000; border-radius: var(--radius);
  padding: var(--pad-block) var(--pad-inline);
  margin: var(--space-2) auto var(--space-1);
  font-size: var(--fs-h2);
  max-width: calc(var(--container-w) - (var(--gutter) * 2));
  box-shadow:none; text-align:left;
}
#pubList.long-menu .chapters{ margin:0 0 var(--space-2); padding:0; }
#pubList.long-menu .chapters li{
  border-top:1px solid #000;
  padding:.35em 0;
  display:flex;
  justify-content:center;
}
#pubList.long-menu .chapters li a,
#pubList.long-menu .chapters li button{
  margin-left:auto;
  margin-right:auto;
}
#pubList.long-menu .chapters li:first-child{ border-top:0; }

.chapter-btn{
  display:block; width:100%;
  padding: calc(var(--fs-base) * .9) calc(var(--fs-base) * 1.1);
  min-height: calc(var(--fs-base) * 3.0);
  font-size: var(--fs-btn); line-height:1.3;
  background: var(--bg); color: var(--ink);
  border: var(--border) solid #000; border-radius: var(--radius);
  text-decoration:none; cursor:pointer; text-align:center;
}
.chapters li.playing .chapter-btn, .chapter-btn[aria-current="true"]{
  outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-gap);
}

.pub-title-btn{
  display:block; width:100%;
  padding: calc(var(--fs-base) * .9) calc(var(--fs-base) * 1.1);
  min-height: calc(var(--fs-base) * 3.0);
  font-size: var(--fs-btn); font-weight:700; line-height:1.3;
  background: var(--brand); color:#fff;
  border: var(--border) solid #000; border-radius: var(--radius);
  text-align:center; cursor:pointer;
}

.pub-block{
  margin: var(--space-2) clamp(8px, 2vw, 24px);
}

/* Home main menu – make sure it wraps on phones with large text */
@media (max-width: 720px){

  /* Use full width, no wasted side gap */
  #menu{
    padding-inline: 0;
  }

  #menu ul{
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  #menu li > a.menu-item,
  #menu li > a.tile,
  #menu .menu-item,
  #menu .tile{
    inline-size: 100%;
    max-inline-size: 100%;
    margin-inline: 0;
    padding-inline: var(--text-pad);

    /* **Key bit**: allow wrapping and breaking long labels */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Bible long menu – mobile: full-width, wrapping labels */
@media (max-width: 720px){

  /* Outer container full-width and centered */
  #pubList.long-menu{
    padding-inline: var(--gutter);
    text-align: center;
  }

  /* Book heading bar and book buttons */
  #pubList.long-menu .menu-heading,
  #pubList.long-menu .pub-title-btn{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Chapter list: one per line, wrapping text */
  #pubList.long-menu .chapters{
    width: 100%;
  }

  #pubList.long-menu .chapters li{
    display: block;
    width: 100%;
    justify-content: stretch;
  }

  #pubList.long-menu .chapter-btn{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ========== 12) Forms ========== */
.contact-form{
  max-width: var(--actions-w); width:100%;
  margin: var(--air-outer) auto; padding:0; border:0; background:transparent;
}
.contact-form label{ display:block; margin:.5rem 0 .25rem; }
.contact-form input,
.contact-form textarea{
  width:100%;
  line-height:1.5;
  padding:14px 16px;
  font:inherit;
  border: var(--border) solid currentColor;
  border-radius: var(--radius);
  background-color: inherit;
  color: inherit;
}
.contact-form textarea{ resize:vertical; min-height:120px; }
.contact-form button[type="submit"]{
  display:block;
  width:100%;
  padding:18px 24px;
  border: var(--border) solid #000;
  border-radius: var(--radius);
  background: var(--btn-bg);   
  color: var(--btn-fg);      
  font-size: var(--fs-btn);
  cursor:pointer;
}
.contact-form button[type="submit"]:hover{ background: var(--brand-strong); }
.form-success{
  margin:var(--space-2) 0 var(--space-4);
  padding:var(--space-2) calc(var(--space-2) * 1.25);
  border: var(--border) solid #000; border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
}

/* Checkbox/Radio */
.contact-form .checkbox-row{
  display:flex; align-items:flex-start; gap: clamp(12px, 1.5vw, 20px);
  margin-top: var(--space-2); margin-bottom: var(--space-1);
}
.contact-form input[type="checkbox"],
.contact-form input[type="radio"]{
  flex:0 0 auto;
  width: clamp(28px, 2.8vw, 36px);
  height: clamp(28px, 2.8vw, 36px);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-color: inherit;
  border: var(--border) solid #000;
  border-radius:6px;
  position:relative;
}
.contact-form input[type="checkbox"]:checked::after,
.contact-form input[type="radio"]:checked::after{
  content:"✓"; position:absolute; top:45%; left:50%; transform:translate(-50%,-50%);
  font-size: clamp(20px, 2vw, 28px); color: var(--brand); font-weight:900;
}
#contactForm{ display:grid; grid-template-columns:1fr; gap: var(--space-2); }
@media (min-width:720px){
  #contactForm{ grid-template-columns: repeat(2, minmax(260px, 1fr)); column-gap: clamp(12px, 1.8vw, 24px); }
  #contactForm .checkbox-row, #contactForm .form-actions, #formStatus{ grid-column:1/-1; }
}
#contactForm textarea{ min-height: clamp(140px, 24vh, 360px); }
#contactForm .form-actions button{ width:100%; }

/* ========== 13) Error Banner ========== */
.error-banner,.alert-error,.error,.missing-page-error{
  max-width: min(900px, calc(var(--container-w) - (var(--gutter) * 4)));
  width: calc(100% - (var(--gutter) * 4));
  margin: var(--air-outer) auto;
  padding: clamp(14px, 1.1em, 28px) clamp(16px, 2.2vw, 28px);
  min-height: calc(var(--fs-base) * 3.4);
  line-height: 1.35;
  font-size: clamp(var(--fs-h4), 1rem + 0.6vw, var(--fs-h3));
  color: var(--error-text); background: var(--error-bg);
  border: calc(var(--border) * 1.6) solid #000;
  border-radius: calc(var(--radius) * 0.95);
  box-shadow:none; text-align:left;
}
.error-banner::before,.alert-error::before,.error::before,.missing-page-error::before{
  content:"⚠"; display:inline-block; margin-right:.5em; font-size:1.2em; line-height:1; vertical-align:-5%;
}
.error-banner a,.alert-error a,.error a,.missing-page-error a{ color:#fff; text-decoration:underline; }

/* ========== 14) Dividers & Footnotes ========== */
.footnotes-hidden .footnote{ display:none !important; }
.divider-contrast{
  position:relative; display:block; border:0; height:1px;
  --divider-gap: calc(var(--space-2) * 1.2);
  margin-block: var(--divider-gap); margin-inline: var(--gutter); background:transparent;
}
.divider-contrast::before,.divider-contrast::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  transform:scaleY(.5); transform-origin:center;
}
.divider-contrast::before{ top:calc(50% - .5px); background:#000; }
.divider-contrast::after { top:50%; background:#fff; }

/* ========== 15) Q&A Editable Box ========== */
.qa-label{
  display:block; max-width: calc(100% - (var(--gutter) * 2));
  margin: var(--space-2) auto var(--space-1);
  font-size: var(--fs-base); line-height:1.4; color:var(--ink);
}
.qa-box{
  display:block; width:100vw; max-width:100vw; min-height:3.5em;
  margin: var(--space-2) 0; padding:.9em 1.2em;
  border:1px solid #000 !important; border-radius: var(--radius);
  font:inherit; line-height:1.5; resize:vertical; color:var(--ink);
  background:transparent; box-shadow: inset 0 0 0 1px #fff;
  margin-left: calc(50% - 50vw + var(--safe-left));
  margin-right:calc(50% - 50vw + var(--safe-right));
}
:where(input, textarea)::placeholder{
  color: currentColor;
  opacity:.65;
  font: inherit;        
}

.qa-box::placeholder{
  color: currentColor;
  opacity:.65;
  font: inherit;          
}

/* ========== 16) Alignment Overrides ========== */
:where(h1,h2,h3,h4,h5,h6,
       p,small,span,em,strong,
       ul,ol,li,dl,dt,dd,
       blockquote,pre,code,kbd,samp,
       figure,figcaption,caption,
       address,summary,details,
       button,.btn,.btn-primary,.atb-btn,a,
       label,input,select,textarea,
       table,thead,tbody,tfoot,tr,th,td){
  text-align: var(--jwa-text-align) !important;
}

.page-actions :is(h3,h4){ --jwa-text-align:center; }

/* ========== 17) Utilities & Misc ========== */
svg,.icon,.icon *{ fill: currentColor !important; stroke: currentColor !important; }
.now-playing-box{ margin: var(--space-2) var(--gutter); }
.btn-primary{ background: var(--btn-bg, var(--heading-bg)); color: var(--btn-fg, var(--heading-text)); }
/* Only keep unbroken headings on wider screens */
@media (min-width: 721px){
  .meeting-page h1,
  body.type-mwb h1,
  body.type-wt h1{
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }
}
[data-audio-src], .is-active-verse{ scroll-margin-top: calc(var(--bar-space) + 24px); }
:where(p, span[tabindex], [data-audio-start], [data-audio-src]){
  -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; touch-action:manipulation;
}

body.meeting-page{
  --btn-bg: var(--heading-bg);
  --btn-fg: var(--heading-text);
}

.top-actions.sticky-actions{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: var(--panel, #5c2a8d); padding:6px 10px; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.top-actions .page-nav-buttons.compact{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px; align-items:stretch;
}
.top-actions .btn-primary{
  padding:.35em .6em; font-size: clamp(12px,1.6vw,14px); line-height:1.15;
  min-height:32px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sticky-spacer{ height:48px; }

body.has-sticky-actions{
  padding-top: calc(var(--bar-space) + 48px) !important;
}

body.has-sticky-actions h1:first-of-type{ margin-top: var(--space-1); }

footer{
  background: var(--brand); color:#fff; text-align:left;
  font-size: var(--fs-small); line-height:1.2;
  padding:2px 6px; margin-top: var(--space-1); border-top:1px solid #000;
}
.footer-images{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(80px, 1fr));
  gap:12px; justify-items:center; align-items:center; margin: var(--space-2) 0;
}
.footer-images img{
  width:96px; height:96px; object-fit:contain;
  border:3px solid #000; border-radius:10px; background:#fff; padding:6px;
  image-rendering: -webkit-optimize-contrast;
}

#meetingWeekHeader .page-mode-row{
  display:flex;
  align-items:center;
  justify-content:center;                       
  gap: clamp(12px, 2vw, 24px);               
  flex-wrap: nowrap;
}
#meetingWeekHeader .page-title{
  margin:0; flex:1 1 auto; text-align:center;
  display:flex; align-items:center; justify-content:center; min-height:2.5rem;
}
#meetingWeekHeader .btn-primary{ white-space:nowrap; }
@media (max-width:520px){
  #meetingWeekHeader .page-mode-row{ flex-wrap:wrap; }
  #meetingWeekHeader #btnGoCLM{ order:1; }
  #meetingWeekHeader .page-title{ order:2; flex-basis:100%; }
  #meetingWeekHeader #btnGoWT{ order:3; }
}
@media (max-width: 720px){
  /* Meeting week title (Life and Ministry / Watchtower) can wrap */
  #meetingWeekHeader .page-title{
    flex: 1 1 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    padding-inline: var(--text-pad);
    text-align: center;
  }

  #meetingWeekHeader .page-mode-row{
    flex-wrap: wrap;
  }
}
/* Mobile layout for expandable headings:
   arrow on its own line, text full-width underneath */
@media (max-width: 720px){

  h2[data-ref-section] .ref-toggle-btn,
  h1[data-global-ref-toggle="1"] .ref-toggle-btn,
  .wt-issue-heading .ref-toggle-btn{
    flex-direction: column;      /* stack arrow above text */
    align-items: flex-start;
    gap: 0.35em;
  }

  .expander-icon{
    width: auto;                 /* let it size naturally */
    text-align: left;
    margin-bottom: 0.05em;
  }

  .wt-issue-label,
  h2[data-ref-section] .ref-toggle-btn span:not(.expander-icon){
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}
/* ========== 18) Large Text Layout / Narrow Viewports (≤1024px) ========== */
@media (max-width:1024px){

  /* Kill side gutters so text can use full width */
  :root{
    --gutter: 0px;
  }

  /* Headings: full viewport width, force wrapping */
  h1{
    display:block;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw + var(--safe-left));
    margin-right: calc(50% - 50vw + var(--safe-right));
    padding-inline: var(--text-pad);
    margin-top: calc(var(--air-outer) * 0.9);
    margin-bottom: calc(var(--air-outer) * 1.0);
    font-size: var(--fs-h1);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  h2,
  h3{
    display:block;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw + var(--safe-left));
    margin-right: calc(50% - 50vw + var(--safe-right));
    padding-inline: var(--text-pad);
    margin-top: calc(var(--air-outer) * 0.9);
    margin-bottom: calc(var(--air-outer) * 1.0);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .box{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw + var(--safe-left));
    margin-right: calc(50% - 50vw + var(--safe-right));

    /* tighter side padding so the inset is not floating in a huge band */
    padding-inline: clamp(4px, 1.6vw, 10px);
  }

  .inset-section{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw + var(--safe-left));
    margin-right: calc(50% - 50vw + var(--safe-right));

    /* keep comfy padding for standalone insets */
    padding-inline: var(--text-pad);
  }

  /* insets *inside* a box: keep their own inner padding for the text */
  .box .inset-section{
    padding-inline: clamp(6px, 2vw, 12px);
  }
    
  /* Home + meeting menus: always wrap the text */
  #menu li > a.menu-item,
  #menu li > a.tile,
  .menu-item,
  .menu-heading{
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Keep autofocus scroll margin neutral on these screens */
  .autofocus,
  :where(p)[tabindex],
  :where(span)[tabindex]{
    scroll-margin:0 !important;
    scroll-margin-top:0 !important;
  }

  /* Enjoy Life quick titles */
  #lffQuickMenu .h2-stack{
    display:block !important;
    inline-size: 100vw !important;
    max-inline-size: 100vw !important;
    margin-left: calc(50% - 50vw + var(--safe-left)) !important;
    margin-right: calc(50% - 50vw + var(--safe-right)) !important;
  }

  #lffQuickMenu .h2-stack > *,
  #lffQuickMenu .btn-primary.as-h2,
  #lffQuickMenu .menu-item,
  #lffQuickMenu .tile{
    display:block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top:  calc(var(--space-1) * 0.75);
    margin-bottom: calc(var(--space-1) * 0.75);
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width:380px){
  .audio-controls-tray .btn-primary{ padding-block:.14em; padding-inline:.36em; font-size: clamp(0.68rem, 2vw, 0.82rem); }
  #btnHome{ padding-block:.14em; padding-inline:.44em; font-size: clamp(0.68rem, 2vw, 0.82rem); }
}

/* ========== 19) H2 Stacks (same width as longest) ========== */
.h2-stack{
  display:grid; grid-template-columns:1fr; justify-content:start;
  inline-size: min(94vw, max-content); gap: var(--space-1);
  margin-left: calc(50% - 50vw + var(--gutter) + var(--safe-left) + var(--h2-offset-inline));
  margin-right:auto;
}
.h2-stack>h2{ width:100%; }

.page-actions .page-nav-buttons :is(a,button){
  white-space:normal; word-break:keep-all; overflow-wrap:normal; hyphens:none;
  text-align:center; align-items:center; padding:.45em .95em; line-height:1.35;
}
.inset-section>span[aria-hidden="true"],
.box>span[aria-hidden="true"]{
  display:block; width:100%; padding-inline: var(--text-pad); margin-block: var(--para-gap);
}

button#reset-settings,button[data-reset="true"],button[id*="reset"]{
  color:#fff !important; background:#B71C1C !important;
  border:3px solid #000 !important; box-shadow: inset 0 0 0 3px #fff !important;
}
button#reset-settings:hover,button[data-reset="true"]:hover,button[id*="reset"]:hover{
  color:#fff !important; background:#a41414 !important;
}

.inset-section > p:first-of-type{
  margin-block: var(--space-1);  
}

.lowvision-intro{ --text-pad: clamp(16px, 4.6vw, 28px); }
.lowvision-intro p{ letter-spacing:.012em; line-height:1.65; text-shadow:0 0 .35px currentColor; }

#bibleQuickGrid.grid-quick{ display:grid; }
#chapterQuickMenu .quick-break,
#songQuickMenu .quick-break,
#lffQuickMenu .quick-break{ grid-column:1/-1; height:0; margin: var(--space-2) 0; border-top:2px solid #000; box-shadow: inset 0 0 0 1px #fff; }


.inset-section {
  border-radius: var(--radius);
}

.box textarea,
.box input[type="text"],
.box input[type="search"],
.inset-section textarea,
.inset-section input[type="text"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;   
  margin: 0 auto;
  display: block;
  border-radius: var(--radius);
  padding: clamp(10px, 2vw, 16px);
}

textarea,
input[type="text"],
input[type="search"] {
  background-color: inherit;
  color: inherit;
  border: 2px solid currentColor; 

  -webkit-appearance: none;
  appearance: none;

  border-radius: var(--radius);
}
input::placeholder,
textarea::placeholder {
  color: currentColor;
  opacity: 1;
}

input[type="color"] {
  inline-size: clamp(80px, 10vw, 120px);  
  block-size: clamp(80px, 10vw, 120px);
  border-radius: calc(var(--radius) * 0.8);
  border: 3px solid #000;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  padding: 4px;
  cursor: pointer;
  vertical-align: middle;
  background: #fff;
  display: inline-block;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

input[type="color"]:hover,
input[type="color"]:focus {
  transform: scale(1.08);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

#fontControls,
.font-size-controls,
.settings-font-size {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 1.6vw, 22px) !important;
  margin-block: var(--space-2) !important;
}

#fontControls > button,
.font-size-controls > button,
.settings-font-size > button,
button#fontDec, button#fontInc,
button[id*="fontDec"], button[id*="fontInc"],
button[data-font-dec], button[data-font-inc]{
  font-size: calc(var(--fs-base) * 2.2) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  width: clamp(72px, 12vw, 122px) !important;
  height: clamp(72px, 12vw, 122px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ccc !important;
  color: #000 !important;
  border: var(--border) solid #000 !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.25) !important;
  cursor: pointer !important;
}

#fontControls > input[type="number"],
.font-size-controls > input[type="number"],
.settings-font-size > input[type="number"],
input[type="number"]#fontSize,
input[type="number"][id*="font"],
input[type="number"][name*="font"]{
  text-align: center !important;
  font-size: calc(var(--fs-base) * 1.6) !important;
  font-weight: 800 !important;
  width: clamp(110px, 20vw, 180px) !important;
  height: clamp(72px, 12vw, 122px) !important;
  background: #fff !important;
  color: #000 !important;
  border: var(--border) solid #000 !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.25) !important;
  -moz-appearance: textfield; /* Firefox */
}


input[type="number"]#fontSize::-webkit-outer-spin-button,
input[type="number"]#fontSize::-webkit-inner-spin-button,
#fontControls input[type="number"]::-webkit-outer-spin-button,
#fontControls input[type="number"]::-webkit-inner-spin-button,
.font-size-controls input[type="number"]::-webkit-outer-spin-button,
.font-size-controls input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.font-size-btn{
  inline-size: clamp(56px, 20vw, 96px);
  block-size: clamp(56px, 20vw, 96px);
  flex: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  line-height: 1;
  white-space: nowrap;
  background: var(--btn-bg, var(--heading-bg));
  color: var(--btn-fg, var(--heading-text));
  border: var(--border) solid #000;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 900;
  font-size: clamp(1.8rem, 7vw, 3.2rem);
}

.font-size-btn:hover{ filter: brightness(0.92); }

.box .font-size-box{
  inline-size: clamp(140px, 40vw, 300px) !important;  
  block-size: clamp(56px, 20vw, 96px);
  display: flex; align-items: center; justify-content: center;
  padding-inline: clamp(8px, 2vw, 16px);
  font-weight: 900;
  font-size: clamp(1.4rem, 5.5vw, 3rem);
  line-height: 1.1;
  border: var(--border) solid #000; border-radius: var(--radius);
  background: #fff;
  appearance: textfield; -moz-appearance: textfield;
}
.box .font-size-box::-webkit-outer-spin-button,
.box .font-size-box::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.font-size-box::-webkit-outer-spin-button,
.font-size-box::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.box{ overflow-x: clip; } 

.box .font-size-large-controls{
  display: grid !important;
  grid-template-columns: max-content minmax(clamp(120px, 14vw, 220px), max-content) max-content !important;
  column-gap: clamp(6px, 0.8vw, 12px) !important;

  inline-size: fit-content !important;
  max-inline-size: 100% !important;

  box-sizing: border-box !important;
  padding-inline: 0 !important;
  margin: 0 !important;

  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
}

.color-inputs {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 20px;
}


.color-picker {
  display: grid;
  grid-template-columns: 260px auto; 
  align-items: center;
  gap: 20px;
  font-weight: bold;
  font-size: 1.2rem;
}

.color-picker input[type="color"] {
  inline-size: clamp(100px, 12vw, 140px);
  block-size: clamp(100px, 12vw, 140px);
  border: 3px solid #000;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  background: #fff;
  cursor: pointer;
  justify-self: start;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.color-picker input[type="color"]:hover,
.color-picker input[type="color"]:focus {
  transform: scale(1.08);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
}

#goButton{
  margin-top: clamp(8px, 1.2vw, 14px);
}
input::placeholder{
  color: inherit;
  opacity: 0.8; 
}

.audio-controls-left{
  display: flex;                
  align-items: center;
  gap: clamp(4px, .8vw, 10px);  
}

#btnMuteMeetingsBar{ margin-left: 0 !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,1px,1px);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; }
.skip-link--visible { left: 8px; }
.sr-live { /* intentionally empty */ }
.superscriptions-hidden .superscription-block { display: none; }
.video-open-wrap .video-open-btn {
  margin-left: 30px;
}

.soft-gap-break {
  display: block;
  margin-top: 0.35em;
}

.stanza-break {
  display: block;
  margin-top: 1.4em; 
}

#adSearchBoxWrap{
  width: calc(100vw - (var(--gutter) * 6));
  max-width: calc(100vw - (var(--gutter) * 6));
  margin-left: calc(var(--gutter) * 2);
  margin-right: calc(var(--gutter) * 2);
  margin-top: var(--space-2); 
}

#adSearchBoxWrap form{
  display: flex;
  flex-direction: column;    
  align-items: stretch;       
  gap: var(--space-1);       
}

#adSearchInput{
  width: 100%;               
  flex: none;                 
}

#adSearchBoxWrap form button{
  width: auto;
  align-self: flex-start; 
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}


.no-overlay-video::after {
  content: none !important;
  display: none !important;
}


.box .video-slot {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}

.box .video-slot button,
.box .video-slot .video-button,
.box .video-slot .video-open-btn {
  display: inline-block;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: var(--space-2) auto;
  padding: var(--pad-block) var(--pad-inline);
  border-radius: var(--radius);
  text-align: center;
}

.box .video-slot .video-open-btn {
  margin-left: 0 !important;
}

button.JWA-Video,
a.JWA-Video {
  display: block;
  font-size: var(--fs-h2);
  line-height: 1.3;
  padding: calc(var(--pad-block) * 1.1) calc(var(--pad-inline) * 1.1);
  width: auto;
  max-width: min(40rem, calc(var(--container-w) - (var(--gutter) * 2)));
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
  margin-left: calc(50% - 50vw + var(--gutter) + var(--safe-left) + var(--h2-offset-inline));
  margin-right: auto;
  box-sizing: border-box;
  border: var(--border) solid #000;  
}

.inset-section button.JWA-Video,
.inset-section a.JWA-Video,
.box button.JWA-Video,
.box a.JWA-Video {
  width: auto;
  max-width: 100%;
  margin: var(--space-2) 0;
}

@media (max-width: 720px) {

  #lffQuickMenu {
    padding-inline: var(--gutter);
  }

  #lffQuickMenu .h2-stack {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin: 0 auto !important;
  }

  #lffQuickMenu .h2-stack > *,
  #lffQuickMenu .btn-primary.as-h2,
  #lffQuickMenu .tile,
  #lffQuickMenu h2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: var(--space-1) !important;
    white-space: normal !important;
    text-align: center !important;
  }
}


@media (max-width: 640px) {

  #lffQuickMenu .grid-quick[aria-label="Top quick row"] {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }

  #lffQuickMenu .grid-quick[aria-label="Top quick row"] .tile-quick {
    width: 100%;
    min-inline-size: 0;
  }

  #lffQuickMenu .grid-quick[aria-label="Additional material row"] {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }

  #lffQuickMenu .grid-quick[aria-label="Additional material row"] .tile-quick {
    width: 100%;
    min-inline-size: 0;
  }
}
.memorize-trigger,
.explore,
.video-open-btn,
button.JWA-Video,
a.JWA-Video{
  display:block;
  width:100%;
  max-width: calc(100% - (var(--gutter) * 2));

  margin: calc(var(--space-2) * 1.2) auto;   
  padding: calc(var(--pad-block) * 1.6)     
           calc(var(--pad-inline) * 2.2);   

  background: var(--brand);
  color: var(--heading-text);
  border: var(--border) solid #000;
  border-radius: var(--radius);
  box-shadow: 0 2px 0 #000, 0 4px 8px rgba(0,0,0,.22);

  position: relative;
  text-align: left;
  line-height: 1.4;
}

.memorize-trigger::before,
.explore::before{
  content: "▶";
  position: absolute;
  left: calc(var(--pad-inline) * 0.2); 
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35em;
}

body[data-page-type="wt"] p.article[data-wt-issue-audio-bound]{
  /* inherit the theme’s current button colors */
  background: var(--btn-bg);
  color: var(--btn-fg);
}

body[data-page-type="wt"] p.article[data-wt-issue-audio-bound]::before{
  /* keep the PLAY label in the same inherited text color */
  color: inherit;
}

.memorize-trigger span,
.explore span,
.video-open-btn span,
button.JWA-Video span,
a.JWA-Video span{
  display:block;
  padding-left: calc(var(--pad-inline) * 3.4);
}

.wt-issue-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.55em;
}

.wt-issue-toggle-btn::before {
  content: none !important;
}

.wt-issue-toggle-btn .expander-icon,
.wt-issue-toggle-btn .wt-issue-label {
  padding-left: 0;
}

.memorize-trigger:is(:hover, :focus-visible),
.explore:is(:hover, :focus-visible){
  background: var(--brand-strong);
  box-shadow: 0 3px 0 #000, 0 6px 10px rgba(0,0,0,.26);
}

.jwa-video > video{
  display: block;
  width: 100%;
  height: auto;      
}

#lffLongMenu.long-menu,
#menu.long-menu,
.long-menu {
  padding-right: 1rem !important;  
  box-sizing: border-box;
}

h3.explore {
  position: relative;
  padding-left: 3rem;        
}

h3.explore::before {
  content: "▶";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: #192ae6; 
  pointer-events: none;
}

h3.explore.playing::before {
  content: "⏸"; 
}


#btnJukeboxTranscriptToggle {
  display: inline-block !important;
  margin-left: 2rem;           
  margin-bottom: 0.75rem;    
  position: static !important; 
}

@media (max-width: 640px) {
  .long-menu,
  #menu.long-menu,
  #lffLongMenu.long-menu {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-inline: var(--gutter) !important;
  }

  .long-menu .menu-item,
  #menu.long-menu .menu-item,
  #lffLongMenu.long-menu .menu-item {
    width: 100% !important;
    max-width: 420px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

body.lff .audio-controls-bar {
  display: flex;
  flex-wrap: wrap;         
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}

body.lff .audio-controls-tray {
  display: flex;
  flex-wrap: wrap;      
  gap: 0.5rem;
  flex: 1 1 auto;
}

@media (max-width: 600px) {
  body.lff #btnLessonsTop {
    flex: 1 1 100%;         
    text-align: center;
  }

  .intro-transcript-body {
    color: var(--font-color, #222);
    font-family: inherit !important;
  }
  
  body.lff .audio-controls-tray button {
    flex: 1 1 calc(33% - 0.5rem);  
  }
}
/* =========================================
   H2 per-section Reference Toggles
   ========================================= */
h2[data-ref-section]{
  cursor: pointer;
  position: relative;           
}

/* Make arrow + text a flex row, but allow text to wrap under the arrow */
h2[data-ref-section] .ref-toggle-btn,
h1[data-global-ref-toggle="1"] .ref-toggle-btn,
.wt-issue-heading .ref-toggle-btn{
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;      /* arrow stays at top, text can wrap */
  gap: 0.45em;
  width: 100%;
  text-align: left;

  font: inherit;
  color: inherit;
  cursor: pointer;
}

.expander-icon{
  display: inline-block;
  width: 1.6em;
  text-align: center;
  flex: 0 0 auto;
  font-size: 1.6em;
  line-height: 1;
}

/* Make the label text wrap under the arrow */
.wt-issue-label,
h2[data-ref-section] .ref-toggle-btn span:not(.expander-icon){
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

h2[data-ref-section] .ref-toggle-btn:focus,
h2[data-ref-section] .ref-toggle-btn:focus-visible,
h1[data-global-ref-toggle="1"] .ref-toggle-btn:focus,
h1[data-global-ref-toggle="1"] .ref-toggle-btn:focus-visible,
.wt-issue-heading .ref-toggle-btn:focus,
.wt-issue-heading .ref-toggle-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

h2 .ref-sr-state{
  font-weight: inherit;
}

#menu .menu-heading > .menu-item{
  display: block;
  margin: 0;
  inline-size: 100%;
  padding: 0;            
  border: none;
  box-shadow: none;
  background: transparent; 
  color: inherit;
  text-align: center;
  cursor: pointer;
}

#menu .menu-heading{
  margin: var(--space-1) 0;
  padding: var(--pad-block) var(--pad-inline);
  inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
  background: var(--brand);
  color: var(--heading-text);
  border: var(--border) solid #000;
  border-radius: var(--radius);
  box-shadow: none;
}

/* ======================================================
   iPad Black–White Legacy Focus Ring (two padding sizes)
   ====================================================== */

html.ipad-focus :focus {
  outline: none !important;
  box-shadow: none !important;
}

/* -------------------------------------------
   GROUP A — Headings / Large Blocks
   Extra padding (same look you want)
-------------------------------------------- */
html.ipad-focus :where(
  h1,h2,h3,h4,h5,h6,
  .menu-heading,
  .tile,
  .menu-item,
  .pub-title-btn,
  .chapter-btn,
  .page-actions .page-nav-buttons :is(a,button),
  button.JWA-Video,
  a.JWA-Video,
  .memorize-trigger,
  .explore,
  .video-open-btn
):focus::before {
  content: "";
  position: absolute;
  inset: calc((var(--focus-gap-block) + 6px) * -1)
         calc((var(--focus-gap-inline) + 6px) * -1);
  border-radius: calc(var(--focus-radius) * 1.25);
  border: 3px solid #fff;
  box-shadow: 0 0 0 5px #000;
  pointer-events: none;
  z-index: 4;
}

/* -------------------------------------------
   GROUP B — Paragraphs / Text Blocks
   SMALL padding so it doesn’t look oversized
-------------------------------------------- */
html.ipad-focus :where(
  p,
  span[tabindex],
  p[tabindex],
  p[data-audio-start],
  p[data-audio-src],
  .qa-box
):focus::before {
  content: "";
  position: absolute;
  inset: calc((var(--focus-gap-block) + 2px) * -1)
         calc((var(--focus-gap-inline) + 2px) * -1);
  border-radius: calc(var(--focus-radius) * 0.85);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px #000;
  pointer-events: none;
  z-index: 4;
}

.expander-icon{
  display: inline-block;
  width: 1.6em;       
  text-align: center;
  flex: 0 0 auto;
  font-size: 1.6em;  
  line-height: 1;     
}


.expander-icon.icon-collapsed::before{
  content: "▸";
}


.expander-icon.icon-expanded::before{
  content: "▾";
}


#menu {
  display: flex;
  justify-content: center;
  width: 100%;
}

#menu .box {
  width: 100%;
  max-width: 650px;       
  margin-inline: auto;    
}

#menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu .menu-heading {
  margin: var(--space-1) 0;
  padding: var(--pad-block) var(--pad-inline);
  width: 100%;
  box-sizing: border-box;
}

#menu .menu-heading > .menu-item {
  display: block;
  margin: 0;
  width: 100%;
  padding: 0;            
  border: none;
  box-shadow: none;
  background: transparent; 
  color: inherit;
  text-align: center;
  cursor: pointer;
}

#menu .box {
  display: flex;
  flex-direction: column;
  align-items: center;   
}

#menu .menu-heading {
  width: 100%;           
  max-width: 800px;      
  margin: var(--space-1) auto;
}

h3.article-section-heading {
  all: unset;                   
  display: block;
  width: inherit;
  max-width: inherit;

  font-size: var(--fs-h3);
  line-height: inherit;
  color: var(--heading-text);
  background: var(--heading-bg);
  border: var(--border) solid #000;
  border-radius: var(--radius);
  padding: calc(var(--pad-block) * 1.1) calc(var(--pad-inline) * 1.1);
  margin: var(--air-outer) auto var(--space-1);
  box-sizing: border-box;
  cursor: pointer;
}

h3.explore {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

h3[tabindex="0"] .ref-toggle-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
button .play-icon,
.play-icon {
  display: inline-block;
  margin-right: 0.65em !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto;
  height: auto;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: var(--heading-text);
}
button::before {
  margin-right: 0.65em !important;
}

.h1-audio-toggle {
  display: block;
  white-space: normal; 
}

.h1-audio-toggle .h1-title-text {
  display: inline; 
}



.chapter-play-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0 0.65em 0 0;
  padding: calc(var(--pad-block) * 0.65)
           calc(var(--pad-inline) * 0.9);

  width: auto;
  height: auto;

  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}

.chapter-play-button::-moz-focus-inner{
  border: 0;
}
.chapter-play-button::-moz-focus-inner{
  border: 0;
}

#bibleSearchInput {
  background-color: inherit !important;
  color: var(--ink) !important;         
  border: 6px solid currentColor !important;
}

/* Keep exactly the same when focused */
#bibleSearchInput:focus {
  background-color: inherit !important;
  color: var(--ink) !important;          
  border-color: currentColor !important;
  outline: none !important;
}


.long-menu .video-slot {
  background: var(--accent);    
  color: #fff;
  border-radius: 8px;
}

#menuList li .video-slot {
  border: none !important;
}

#menuList li .video-slot {
}
.custom-video-controls {
  display: flex;
  justify-content: flex-start;
  margin: var(--space-1) auto var(--space-2);
  padding: 0;
}

.custom-video-controls .audio-controls-tray {
  display: flex;
  gap: 1.25rem;  
  justify-content: flex-start;
  width: 100%;
}

.video-bar,
.jwa-accessible-video-bar {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;   
}


.custom-video-controls .btn-primary,
.video-bar .btn-primary,
.jwa-accessible-video-bar .btn-primary,
.audio-controls-tray .btn-primary {
    margin: 0 !important;
}
/* Bible long menu – iPad: slightly smaller buttons */
@media (min-width: 721px) and (max-width: 1024px){

  #pubList.long-menu .menu-heading{
    font-size: calc(var(--fs-h2) * 0.9);
    padding-block: calc(var(--pad-block) * 0.8);
    padding-inline: calc(var(--pad-inline) * 0.9);
  }

  #pubList.long-menu .pub-title-btn,
  #pubList.long-menu .chapter-btn{
    font-size: calc(var(--fs-btn) * 0.9);
    padding-block: calc(var(--pad-block) * 0.7);
    padding-inline: calc(var(--pad-inline) * 0.9);
    min-height: calc(var(--fs-base) * 2.2);
  }
}
.sr-only.sr-compat-toggle {
  position: absolute;
  left: -9999px;
}

.sr-compat-toggle:focus {
  left: 0;
  top: 0;
  padding: 0.5rem 1rem;
  z-index: 9999;
  background: #000;
  color: #fff;
  border-radius: 0 0.5rem 0.5rem 0;
}
/* Top audio bar buttons – larger, manual size */
.audio-controls-bar :is(.btn-primary, .btn, a, button),
.audio-controls-tray .btn-primary,
.meeting-mode-tray .btn-primary,
#btnHome,
#btnAllVideos{
  font-size: 20px !important;   /* adjust this number to taste */
  line-height: 1.2 !important;
}
/* GLOBAL FORCE-WRAP FIX — prevents ANY cutoff on large text */
*:where(button, a, .btn, .btn-primary, .menu-item, .chapter-btn, .pub-title-btn){
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Ensure buttons shrink instead of overflowing horizontally */
*:where(button, a, .btn, .btn-primary){
  max-width: 100% !important;
}
/* ============================================================
   UNIVERSAL WRAP FIX FOR BOX + INSET
   Ensures headings, paragraphs, and buttons wrap correctly
   even with extreme font sizes.
============================================================ */

.box,
.inset-section {
  /* allow full wrapping for large dynamic text */
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;

}

.box * ,
.inset-section *{
  white-space: normal !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important;
}

.box :where(h1,h2,h3,h4,h5,h6),
.inset-section :where(h1,h2,h3,h4,h5,h6){
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
/* Home page title – centered and inset from the sides */
body.home > h1.autofocus,
body[data-page="home"] > h1.autofocus{
  /* override global full-width h1 */
  width: auto !important;
  max-width: min(1100px, calc(100vw - 40px)); /* sides come in a bit */

  /* center it */
  margin: var(--air-outer) auto !important;

  /* keep your comfy padding */
  padding: calc(var(--pad-block) * 1.15) calc(var(--pad-inline) * 1.15);

  text-align: center;
}

body{ padding-top: var(--bar-space); }

body:not(:has(.audio-controls-bar)){
  padding-top: 0 !important;
}


.ref-toggle-btn {
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  line-height: 1.3;
  padding: 0.6em 1em;
  margin: 0.5em 0;
  border-radius: 6px;
  cursor: pointer;

  /* Inherit theme colors */
  background: var(--btn-bg, #0055aa);
  color: var(--btn-text, #ffffff);
  border: none;
  outline: none;
}


.ref-toggle-btn + .ref-toggle-btn {
  margin-left: 0.5em;
}

#toggle-references,
#toggle-references-top {
  margin-left: 2rem !important;
}

/* On phones, center the buttons horizontally */
@media (max-width: 720px){
  #toggle-references,
  #toggle-references-top {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================
   UPPERCASE PLACEHOLDER TEXT WHEN ENABLED
   ========================================= */
:root[data-all-uppercase="true"] input::placeholder,
:root[data-all-uppercase="true"] textarea::placeholder {
  text-transform: uppercase !important;
}

/* =========================================
   GLOBAL H1 LAYOUT FIX — Match h2 width
   ========================================= */
@media (min-width: 1025px){
  h1:not(.page-title):not(#pageTitleHome) {
    /* Match h2/h3 banner width & alignment */
    width: calc(100vw - (var(--gutter) * 2) - var(--safe-left) - var(--safe-right));
    max-width: 100%;
    margin-left: calc(50% - 50vw + var(--gutter) + var(--safe-left));
    margin-right: calc(50% - 50vw + var(--gutter) + var(--safe-right));
    padding-left: var(--pad-inline);
    padding-right: var(--pad-inline);
    box-sizing: border-box;
  }
}
/* =========================================
   CONTACT TERMS (DETAILS / SUMMARY)
   ========================================= */

/* Container spacing */
.contact-terms {
  margin: var(--space-2) 0 var(--space-3);
}

/* Summary styled like a button, but inherits ALL text styling */
.contact-terms summary {
  display: block;
  width: 100%;
  cursor: pointer;
  padding: calc(var(--pad-block) * 0.9) calc(var(--pad-inline) * 1.2);
  border-radius: var(--radius);
  color: inherit !important;
  background: inherit;
  font: inherit;
  text-transform: inherit;
  border: var(--border) solid currentColor;
  box-shadow: 0 2px 0 currentColor, 0 4px 8px rgba(0,0,0,.22);
  list-style: none;
}

/* Remove browser default arrow */
.contact-terms summary::-webkit-details-marker,
.contact-terms summary::marker {
  display: none;
}

/* Custom collapsing arrow */
.contact-terms summary::before {
  content: "▸";
  margin-right: 0.65em;
  font-weight: bold;
  color: inherit;
  font-size: 1em;
  line-height: 1;
}

.contact-terms[open] summary::before {
  content: "▾";
}

/* Inner expanded content */
.contact-terms .terms-content {
  margin-top: var(--space-1);
  padding: var(--text-pad);
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-transform: inherit;
  line-height: inherit;
  background: var(--box-bg, rgba(255,255,255,0.06));
  box-shadow:
    0 2px 0 currentColor,
    0 6px 10px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

.chapter-quick-box {
  font-size: var(--fs-body);     
  line-height: var(--lh);
}

.chapter-quick-box p {
  font-size: 1em;               
}


#btnFootnoteToggleTop {
  display: inline-block !important;
  margin-left: clamp(1rem, 2vw, 1rem) !important;  
  margin-right: auto !important;
}

body.superscriptions-hidden [data-superscription] {
  display: none;
}
/* Week nav row only = the FIRST .page-nav-buttons inside the header */
#meetingWeekHeader .page-actions > .page-nav-buttons:first-of-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* Make the 3 week buttons fit content */
#meetingWeekHeader .page-actions > .page-nav-buttons:first-of-type .btn-primary {
  display: inline-flex;
  width: auto !important;
  flex: 0 0 auto;
  padding: 0.25rem 0.6rem;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Prevent global full-width buttons from leaking in */
#meetingWeekHeader .page-nav-buttons .btn-primary {
  width: auto !important;
}

/* Small screens: stack week buttons vertically */
@media (max-width: 560px) {
  #meetingWeekHeader .page-actions > .page-nav-buttons:first-of-type {
    flex-wrap: wrap;
  }

  #meetingWeekHeader .page-actions > .page-nav-buttons:first-of-type .btn-primary {
    flex: 1 1 100%;
    width: 100% !important;
    white-space: normal;
    line-height: 1.2;
  }
}

#dailyH1PlayWrap {
  padding-left: var(--content-padding-left, 1rem);
}

#btnToggleAllRefs {
  margin-left: 1rem;
  align-self: flex-start;
}

.page-nav-buttons .btn-primary {
  margin: 6px 8px;
}

/* WT: Top Play Watchtower button — align like play buttons inside .box */
#watchtowerContent > .btn-primary:first-child{
  display: inline-flex;
  align-items: center;
  vertical-align: middle;

  /* match .box horizontal inset */
  margin-left:  calc(50% - 50vw + var(--gutter) + var(--safe-left));
  margin-right: calc(50% - 50vw + var(--gutter) + var(--safe-right));

  /* keep it from going full-width */
  width: auto;
  max-width: calc(100vw - (var(--gutter) * 2) - var(--safe-left) - var(--safe-right));
}

[hidden] { display: none !important; }

#resourcesSearchInput {
  width: 100%;
  min-width: 22rem;       
  max-width: 100%;
}


/* =========================================================
   TABLES — LOW VISION, NO SHIFT, KEYBOARD SAFE
========================================================= */


.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


table {
  width: 100%;
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
  line-height: 1.6;

  border-collapse: collapse;
  border: 2px solid currentColor;
  color: inherit;
}


th,
td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  border: 1px solid currentColor;
  box-sizing: border-box;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  position: relative;
}


.country-table td:not(:first-child),
.summary-table td {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


.country-table th[scope="row"] {
  white-space: normal;
}


@media (max-width: 600px) {
  th, td {
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
  }
}


thead th {
  font-weight: 700;
  text-align: left;
}


tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, currentColor 6%, transparent);
}


.summary-table th,
.summary-table td {
  padding: 0.9rem 1.2rem;
}


.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* prevent “table slides” when a cell receives focus */
  scroll-behavior: auto;

  /* optional, helps prevent rubber-band + focus nudges on mobile */
  overscroll-behavior-x: contain;
}
.table-scroll table {
  min-width: 900px;
}

/* =========================================================
   FOCUS RING — NO SHIFT (overlay ring, not outline)
========================================================= */


th:focus,
td:focus,
th:focus-visible,
td:focus-visible {
  outline: none !important;
}


.country-table :is(th, td):hover::after,
.summary-table :is(th, td):hover::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 0 4px currentColor;
}

.country-table :is(th, td):is(:focus, :focus-visible)::after,
.summary-table :is(th, td):is(:focus, :focus-visible)::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 3;
  box-shadow: inset 0 0 0 5px var(--focus, #1e40ff);
}

.country-table :is(th, td):is(:focus, :focus-visible),
.summary-table :is(th, td):is(:focus, :focus-visible) {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}


@media (forced-colors: active) {
  table, th, td {
    border-color: CanvasText;
  }

  .country-table :is(th, td):is(:focus, :focus-visible)::after,
  .summary-table :is(th, td):is(:focus, :focus-visible)::after {
    box-shadow: 0 0 0 4px Highlight;
  }
      }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges; 
}

.country-table thead th {
  white-space: normal;         
  word-break: normal;        
  overflow-wrap: break-word;   
  hyphens: none;                
}

.country-table th,
.country-table td {
  word-break: normal;
  overflow-wrap: normal;
}

.table-search{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 1rem 0;
  width: 100%;
  max-width: 520px;
  position: static;
}

.table-search input[type="search"]{
  flex: 1 1 260px;
  min-width: 200px;
}

.table-search button{
  flex: 0 0 auto;
}      


.inline-citation-toggle{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
}

.inline-citation-toggle:focus,
.inline-citation-toggle:hover{
  text-decoration-thickness: 2px;
}

.inline-citation-panel{
  display:block;
  margin:.4em 0 1em 1.25em;
  padding:.65em .8em;
  border-left:4px solid currentColor;
  background:rgba(0,0,0,.06);
}

.inline-citation-panel[hidden]{
  display:none;
}

#aaPageActions {
  overflow: visible;
}

#aaPageActions .page-nav-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.aa-language-select-wrap {
  display: inline-flex;
  align-items: center;
  overflow: visible;
}

.aa-language-select-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.aa-language-select {
  min-height: 48px;
  min-width: 190px;
  max-width: 240px;
  width: auto;
  font: inherit;
  padding: 0 44px 0 14px;
  border-radius: 12px;
  overflow: visible;
}

.aa-language-select option {
  color: #000000;
  background: #ffffff;
}
}