/* ==== PBX — Scripture Styles (consolidated) ==== */

/* Scope everything to the Scripture shell */
.pb2-wrap { --pb-space: 1rem; --pb-space-lg: 2rem; --pb-radius: .5rem; }

/* Hero */
.pbx-hero-banner { padding: var(--pb-space-lg) var(--pb-space); text-align: center; }
.pbx-hero-banner .pb2-heading { font-size: clamp(1.4rem, 3vw, 2.25rem); margin: 0 0 var(--pb-space); }
.pbx-hero-banner .pb2-search { display: inline-flex; gap: .5rem; align-items: center; }
.pbx-hero-banner .pb2-search input[type="search"] { padding: .6rem .8rem; min-width: clamp(12rem, 40vw, 28rem); }
.pbx-hero-banner .pb2-search button { padding: .6rem .9rem; }

/* Verse chips */
.pb2-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: var(--pb-space); justify-content: center; }
.pb2-chip { border: 1px solid #ddd; background: #fff; border-radius: 999px; padding: .35rem .7rem; cursor: pointer; }
.pb2-verselist { max-width: 70ch; margin: var(--pb-space) auto; padding: 0 var(--pb-space); }
.pb2-verselist li { margin: .25rem 0; scroll-margin-top: 6rem; }
.pb2-verselist li.is-active { background: #fff9d9; }

/* Feature bubble */
.pb2-feature { max-width: 70ch; margin: var(--pb-space) auto; padding: 0 var(--pb-space); }
.pb2-feature__card { border: 1px solid #eee; border-radius: var(--pb-radius); padding: var(--pb-space); background: #fafafa; }
.pb2-feature__ref { font-weight: 600; margin-bottom: .5rem; }

/* Prev/Next + Back */
.pb2-actions { display: flex; gap: 1rem; justify-content: center; align-items: center; padding: var(--pb-space); flex-wrap: wrap; }
.pb2-nextprev a[disabled] { pointer-events: none; opacity: .5; }

/* QuickNav modal */
.pb2-qn[hidden], .pb2-searchpanel[hidden] { display: none; }
.pb2-qn, .pb2-searchpanel { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; display: grid; place-items: center; }
.pb2-qn__panel, .pb2-searchpanel__panel { background: #fff; width: min(100% - 2rem, 900px); border-radius: var(--pb-radius); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.pb2-qn__header, .pb2-searchpanel__header { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid #eee; }
.pb2-qn__content { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; }
.pb2-qn__booklist { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.pb2-qn__booklist li { margin: 0; }
.pb2-qn__booklist button { width: 100%; text-align: left; padding: .5rem .6rem; border: 0; background: transparent; border-radius: .25rem; }
.pb2-qn__booklist button:hover { background: #f5f5f5; }
.pb2-qn__chapters__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px,1fr)); gap: .4rem; align-items: center; }
.pb2-qn__chapters__list button { padding: .45rem 0; border: 1px solid #ddd; background: #fff; border-radius: .25rem; }

/* Search panel */
.pb2-searchpanel__body { max-height: 60vh; overflow: auto; padding: 1rem; }
.pb2-searchresult { padding: .5rem 0; border-bottom: 1px solid #f0f0f0; }
.pb2-searchresult a { display: grid; gap: .2rem; text-decoration: none; }
.pb2-searchresult strong { color: #111; }
.pb2-searchresult span { color: #555; }

/* Page-1 grids */
.rl-books-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.rl-book { border: 1px solid #eee; border-radius: var(--pb-radius); padding: var(--pb-space); background: #fff; }
.rl-book__name { margin: 0 0 .5rem; font-size: 1.05rem; }
.rl-book__chapters { display: flex; flex-wrap: wrap; gap: .35rem; }
.rl-book__chapters .rl-chapter { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 1px solid #ddd; }

/* Responsive */
@media (max-width: 720px) {
  .pb2-qn__content { grid-template-columns: 1fr; }
  .pb2-qn__booklist { max-height: 30vh; }
}

/* PBX — Astra mobile header: hide branding, keep hamburger */
@media (max-width: 767px){
  .ast-mobile-header-wrap .site-branding,
  .ast-mobile-header-wrap .ast-site-identity,
  .ast-mobile-header-wrap .ast-site-title-wrap,
  .ast-mobile-header-wrap .site-title,
  .ast-mobile-header-wrap .site-logo-img {
    display: none !important;
  }

  /* Optional: center or align the hamburger if needed */
  .ast-mobile-header-wrap .ast-builder-menu-1,
  .ast-mobile-header-wrap .ast-mobile-menu-trigger {
    justify-content: center; /* change to flex-start or flex-end if you prefer */
  }
}

/* Hide site title/logo on mobile header but keep the menu */
@media (max-width: 768px) {
  .ast-mobile-header-wrap .site-branding {
    display: none !important;
  }
}

/* PBX — My Bible (page 214958): make CHAPTERS exactly 2 columns and fit the sidebar */

/* 1) Defeat the global width/centering that comes from the open-book layout */
body.page-id-214958 .rl-selected-book-name,
body.page-id-214958 .rl-selected-book,
body.page-id-214958 .rl-chapter-links{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) Force the chapter grid to TWO columns.
   Double the class (.rl-chapter-links.rl-chapter-links) to raise specificity,
   and use !important to override the sitewide rule. */
body.page-id-214958 .rl-chapter-links.rl-chapter-links{
  display: grid; /* safe: it's already grid */
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: .5rem !important;
  row-gap: .5rem !important;
  list-style: none;
  padding: 0;
}

/* 3) Ensure each tile fills its grid cell and wraps nicely */
body.page-id-214958 .rl-chapter-links > li > a,
body.page-id-214958 .rl-chapter-links > li > button{
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

/* (Optional) Keep books two columns on this page as well, for visual parity */
body.page-id-214958 .rl-books-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .5rem !important;
}

/* ===== PBX — My Bible (page 214958): clean 2-col grids + sane button sizes ===== */

/* Make both lists render in exactly 2 columns, but never shrink below 140px per tile */
body.page-id-214958 .rl-books-grid{
  /* books list might not have a global width rule; still ensure it's not centered wide */
  width: 100%;
  margin-left: 0;
  margin-right: 0;

  display: grid; /* safe */
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: .5rem;
  list-style: none;
  padding: 0;
}

/* Chapters: keep the width fixes we already needed, and also enforce min tile width */
body.page-id-214958 .rl-selected-book-name,
body.page-id-214958 .rl-selected-book,
body.page-id-214958 .rl-chapter-links{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.page-id-214958 .rl-chapter-links.rl-chapter-links{
  display: grid; /* already grid in your theme; reiterate */
  grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  gap: .5rem !important;
  list-style: none;
  padding: 0;
}

/* Tiles: same sizing for books & chapters; readable inside a narrow sidebar */
body.page-id-214958 .rl-books-grid .rl-book a,
body.page-id-214958 .rl-books-grid .rl-book button,
body.page-id-214958 .rl-chapter-links > li > a,
body.page-id-214958 .rl-chapter-links > li > button{
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;      /* allow wrapping to 2 lines instead of single-letter */
  line-height: 1.25;
  font-size: .95rem;
  padding: .4rem .6rem;
}

/* If your sidebar ever gets too narrow, drop to 1 column to avoid squished tiles */
@media (max-width: 520px){
  body.page-id-214958 .rl-books-grid{ grid-template-columns: 1fr; }
  body.page-id-214958 .rl-chapter-links.rl-chapter-links{ grid-template-columns: 1fr !important; }
}

/* PBX — My Bible (page 214958): keep the right container aligned to the top */

/* 1) If the row is a flex layout (Gutenberg columns / groups), top-align items */
body.page-id-214958 .wp-block-columns,
body.page-id-214958 .wp-block-group.is-layout-flex,
body.page-id-214958 .is-layout-flex {
  align-items: flex-start !important;
}

/* 2) Also force each column/panel to align itself to the top in case a theme sets center */
body.page-id-214958 .wp-block-column,
body.page-id-214958 .wp-block-group.is-layout-flex > *,
body.page-id-214958 .is-layout-flex > * {
  align-self: flex-start !important;
}

/* 3) UAGB/stacked wrappers sometimes manage vertical alignment too — cover those */
body.page-id-214958 .uagb-columns__wrap,
body.page-id-214958 .uagb-container__wrap,
body.page-id-214958 .uagb-section__wrap,
body.page-id-214958 .uagb-inner-section__wrap {
  align-items: flex-start !important;
}
body.page-id-214958 .uagb-columns__wrap > *,
body.page-id-214958 .uagb-container__wrap > *,
body.page-id-214958 .uagb-section__wrap > *,
body.page-id-214958 .uagb-inner-section__wrap > * {
  align-self: flex-start !important;
}

/* 4) If your row uses grid, ensure grid items start at the top */
body.page-id-214958 .wp-block-columns.is-layout-grid,
body.page-id-214958 .wp-block-group.is-layout-grid {
  align-items: start !important;
  justify-items: start !important;
}

/* 5) Safety: remove any vertical centering utility classes Gutenberg can add */
body.page-id-214958 .wp-block-column.is-vertically-aligned-center,
body.page-id-214958 .wp-block-column.is-vertically-aligned-bottom {
  align-self: flex-start !important;
}

/* ===== Spectra (UAG) Tabs: keep real tabs on mobile ===== */
/* Scope to “My Bible” page so we don’t affect other pages */
body.page-id-214958 .uagb-tabs__nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: .5rem !important;
  white-space: nowrap !important;
}

body.page-id-214958 .uagb-tabs__panel {
  display: none !important;               /* hide all panels */
}

/* Show only the active/visible panel (Spectra sets aria-hidden) */
body.page-id-214958 .uagb-tabs__panel[aria-hidden="false"],
body.page-id-214958 .uagb-tabs__panel.is-active {
  display: block !important;
}

/* If Spectra injects accordion titles on mobile, hide them */
body.page-id-214958 .uagb-tabs__panel-title,
body.page-id-214958 .uagb-tabs__accordion-icon {
  display: none !important;
}

/* Fallback: if your Spectra build uses ARIA roles, cover that too */
body.page-id-214958 [role="tablist"] {
  display: flex !important;
  overflow-x: auto !important;
  gap: .5rem !important;
}
body.page-id-214958 [role="tabpanel"] {
  display: none !important;
}
body.page-id-214958 [role="tabpanel"][aria-hidden="false"],
body.page-id-214958 [role="tabpanel"].is-active {
  display: block !important;
}

/* ===== Feature Verse: click-to-magnify (presentation mode) ===== */

/* If you still have older 'pbx-present' styles from a previous attempt, neutralize them */
body.pbx-present #pb2-app .pb2-feature { position: static !important; transform: none !important; width: auto !important; z-index: auto !important; }
body.pbx-present #pb2-app .pb2-feature__inner { cursor: zoom-in !important; }
#pbx-present-scrim { display: none !important; }

/* Lock page scroll while the verse is zoomed */
body.pbx-lock-scroll { overflow: hidden !important; }

/* Zoomed state: the wrapper becomes a full-screen overlay with centered card */
#pb2-app .pb2-feature.is-zoomed{
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: grid !important;
  place-items: center !important;
  padding: min(4vw, 28px) !important;
  background: rgba(0,0,0,.55) !important; /* dark scrim */
  transform: none !important;             /* override any earlier translateY drops */
}

/* The actual card */
#pb2-app .pb2-feature.is-zoomed .pb2-feature__inner{
  max-width: min(1100px, 96vw) !important;
  width: auto !important;
  background: #fff !important;
  border-width: 2px !important;
  border-radius: 14px !important;
  box-shadow: 0 26px 60px rgba(0,0,0,.28) !important;
}

/* Bigger, easier-to-read text when zoomed */
#pb2-app .pb2-feature.is-zoomed .pb2-feature__line{
  font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem) !important;
  line-height: 1.75 !important;
}

/* Verse number badge inside the card */
#pb2-app .pb2-feature.is-zoomed .pb2-feature__num{
  font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem) !important;
  padding: .35rem .75rem !important;
}

/* On phones, keep it comfortable */
@media (max-width: 767px){
  #pb2-app .pb2-feature.is-zoomed .pb2-feature__line{
    font-size: clamp(1.3rem, 6.5vw, 2rem) !important;
  }
}

/* Gentle pop on enter (respects reduced motion) */
@media (prefers-reduced-motion: no-preference){
  #pb2-app .pb2-feature.is-zoomed .pb2-feature__inner{
    transition: transform .18s ease-out;
    transform: scale(1.02);
  }
}

/* Click affordance: zoom-in by default, zoom-out when opened */
#pb2-app .pb2-feature__inner { cursor: zoom-in; }
#pb2-app .pb2-feature.is-zoomed .pb2-feature__inner { cursor: zoom-out; }

/* Make Home & My Bible banners match Scripture height and go full-bleed */

/* Scope to Home and My Bible (id 214958) only */
.home .pbx-hero-wide,
.page-id-214958 .pbx-hero-wide{
  /* full-bleed rail */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  /* kill any spacing that fights width/height */
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  height: auto !important;

  /* IMAGE: keep full image visible, centered (no crop) */
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: contain !important;

  /* Prefer exact Scripture ratio (1536×524) */
  aspect-ratio: 1536 / 524 !important;

  /* Some builders enforce height via vars—neutralize them */
  --uagb-container-padding-top: 0 !important;
  --uagb-container-padding-bottom: 0 !important;
}

/* Fallback for browsers/layouts that ignore aspect-ratio or use padding hacks */
.home .pbx-hero-wide::before,
.page-id-214958 .pbx-hero-wide::before{
  content: "";
  display: block;
  /* 524 / 1536 = 34.115% → ensures same visual height as Scripture hero */
  padding-top: 34.115%;
}

/* Remove inner-wrapper padding if Spectra/UAG adds it */
.home .pbx-hero-wide > .uagb-container-inner-blocks-wrap,
.page-id-214958 .pbx-hero-wide > .uagb-container-inner-blocks-wrap{
  padding: 0 !important;
}

/* Astra sometimes re-centers .alignfull; keep true edge-to-edge */
@media (min-width: 921px){
  .home .ast-plain-container .entry-content > .alignfull.pbx-hero-wide,
  .page-id-214958 .ast-plain-container .entry-content > .alignfull.pbx-hero-wide{
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* Also strip side paddings on those pages’ content rail so the banner can breathe */
.home .site-main .entry-content,
.page-id-214958 .site-main .entry-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove page rails only on Home and My Bible */
.home .site-content .ast-container,
.page-id-214958 .site-content .ast-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Article wrapper sometimes adds its own padding */
.home .ast-plain-container .site-main > .ast-article-single,
.page-id-214958 .ast-plain-container .site-main > .ast-article-single{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Stretch any alignfull block to the real viewport width */
.home .entry-content > .alignfull,
.page-id-214958 .entry-content > .alignfull{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* (Optional) If your banner sits inside a group that is alignfull,
   stretch its direct children too. */
.home .entry-content .wp-block-group.alignfull > *:first-child,
.page-id-214958 .entry-content .wp-block-group.alignfull > *:first-child{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Full-bleed hero image with balanced crop (centered) */
body.home .pbx-hero,
body.page-id-214958 .pbx-hero{
  background-size: cover !important;          /* Fill area, crop if needed */
  background-position: 45% 30% !important;    /* Center center (crop top & bottom) */
  background-repeat: no-repeat !important;

  /* Force true full-width edge to edge */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* HOME ONLY — force the hero to true full-bleed and keep balanced crop */
body.home .pbx-hero,
body.home .pbx-hero-banner,
body.home .pbx-banner,
body.home .pbx-scripture-hero,
body.home .pix-hero-p1.alignfull{
  background-size: cover !important;
  background-position: 45% 30% !important; /* same crop balance you liked */
  background-repeat: no-repeat !important;

  /* break out of Astra's content width */
  position: relative !important;
  width: 100lvw !important;     /* best on iOS */
  max-width: none !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fallbacks if lvw isn't supported */
@supports not (width: 100lvw){
  body.home .pbx-hero,
  body.home .pbx-hero-banner,
  body.home .pbx-banner,
  body.home .pbx-scripture-hero,
  body.home .pix-hero-p1.alignfull{
    width: 100dvw !important;
  }
}
@supports not (width: 100dvw){
  body.home .pbx-hero,
  body.home .pbx-hero-banner,
  body.home .pbx-banner,
  body.home .pbx-scripture-hero,
  body.home .pix-hero-p1.alignfull{
    width: 100vw !important;
    left: auto !important;
    transform: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* Safety: don't let parent wrappers clip the breakout */
body.home .site-content,
body.home .entry-content,
body.home .ast-container{
  overflow: visible !important;
}

/* PBX — force cover + full-bleed on Home + My Bible (wins over old 'contain') */
body.home .pbx-hero,
body.page-id-214958 .pbx-hero{
  background-size: cover !important;
  background-position: 45% 30% !important;
  background-repeat: no-repeat !important;

  /* Full-bleed breakout */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* iPad/tablet landscape safeguard — some Safari builds only apply at this range */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
  body.home .pbx-hero,
  body.page-id-214958 .pbx-hero{
    background-size: cover !important;   /* reassert 'cover' against old helpers */
  }
}

/* My Bible (page 214958) — make the hero match Home (edge-to-edge, same height) */
body.page-id-214958 .pbx-hero,
body.page-id-214958 .banner-wrap.header-banner,                    /* the visible container */
body.page-id-214958 .pbx-hero > .uagb-container-inner-blocks-wrap, /* inner wrap */
body.page-id-214958 .uagb-container__wrap {
  /* Same crop as Home */
  background-position: 45% 30% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;

  /* Force the shallow hero height */
  aspect-ratio: 1536 / 524 !important;     /* ~34% of width */
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;

  /* Ensure full-bleed rail */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Kill any inline min-height/padding Spectra may inject on this hero */
body.page-id-214958 .pbx-hero[style*="min-height"],
body.page-id-214958 .banner-wrap.header-banner[style*="min-height"] {
  min-height: 0 !important;
  height: auto !important;
}
body.page-id-214958 .pbx-hero[style*="padding"],
body.page-id-214958 .banner-wrap.header-banner[style*="padding"] {
  padding: 0 !important;
}

/* If Spectra uses CSS vars for container padding, neutralize them here */
body.page-id-214958 .pbx-hero,
body.page-id-214958 .banner-wrap.header-banner {
  --uagb-container-padding-top: 0 !important;
  --uagb-container-padding-bottom: 0 !important;
}

/* === Mobile: force Scripture/Bible banner to be full-bleed edge to edge === */
@media (max-width: 767px) {
  .pbx-banner--bible,
  .pbx-banner--scripture {
    /* break out of theme container limits */
    width: 100vw;           /* span full viewport width */
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%); /* recenters even if parent is constrained */
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* If that banner has an inner wrapper that’s getting padding,
     nuke that padding too so the image can truly touch the edges. */
  .pbx-banner--bible > *,
  .pbx-banner--scripture > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Make sure the image itself can scale full width */
  .pbx-banner--bible img,
  .pbx-banner--scripture img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* === Hero banners for Bible / Scripture / Journal (all users) === */

/* 1) Base banner container styling */
.pbx-banner--bible,
.pbx-banner--scripture,
.pbx-banner--journal {
  position: relative;
  overflow: hidden;
}

/* My Bible + Journal: comfortable height */
.pbx-banner--bible,
.pbx-banner--journal {
  min-height: 320px;
}

/* Scripture: match the same visual height so it doesn't look zoomed */
.pbx-banner--scripture {
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
}

/* 2) Background images (different for Scripture vs others) */

/* Scripture page banner uses header-photo-2.webp */
.pbx-banner--scripture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("https://pb4i.com/wp-content/uploads/2025/10/header-photo-2.webp");
  background-size: cover;
  background-position: 45% 30%;
  background-repeat: no-repeat;
}

/* My Bible + Journal banners use header-photo.webp */
.pbx-banner--bible::before,
.pbx-banner--journal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("https://pb4i.com/wp-content/uploads/2025/10/header-photo.webp");
  background-size: cover;
  background-position: 45% 30%;
  background-repeat: no-repeat;
}