@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700|Arima:400,500,700");

/* ==========================================================================
   Core Resets & Base Elements
   ========================================================================== */
html,
body {
  margin: 0;
  padding: 0;
  background-image: url('../img/wedding-paper.jpg'); 
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

html {
  box-sizing: border-box;
  font-size: 12.8px;
}

/* Global Border-Box Reset */
html *,
html *:before,
html *:after {
  box-sizing: inherit;
}

body {
  font-family: "Arima";
  font-weight: 300;
}

*:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

a {
  color: #000;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   Layout & Utility Classes
   ========================================================================== */
.hidden {
  display: none !important;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  box-sizing: content-box;
  max-width: 1060px;
  padding: 0 10px;
  margin: auto;
}

.container .inside {
  background-color: white;
  text-align: center;
}

/* Row & Columns */
.column {
  float: left;
  border-right: 2px solid lightgray;
  padding: 0 10px;
  display: flex;
  align-items: center;
  height: 100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.align-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.bottom-spacer {
  padding-bottom: 30px;
}

/* ==========================================================================
   Header & Navigation Components
   ========================================================================== */
#stickyHeader {
  position: sticky;
  top: 0;
  z-index: 3000;
}

header {
  position: relative;
  z-index: 99;
  padding: 0.5em 0;
}

header:after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.15);
}

header.container {
  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 2em;
}

header .logo {
  text-indent: 99999px;
  overflow: hidden;
  width: 10rem;
  height: 8rem;
  margin-left: 0px;
  margin-right: 50px;
  margin-bottom: .5rem;
  background: url("../img/logo.png") center no-repeat;
}

header h1 {
  text-align: right;
}

header h1 a {
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  font-weight: 400;
  color: #027CFF;
  font-size: 1.5rem;
  line-height: 2.75rem;
}

/* Subheader */
.subheader {
  background: #F6FBFF;
  background: rgba(246,251,255); 
  position: relative;
  text-align: center;
}

.subheader .container {
  flex-wrap: wrap;
  font-size: 1.75vw;  
  line-height: 2.25rem;
  font-weight: 600;
}

.subheader .subheadings {
  margin-right: 2rem;
}

.subheader .subheadings h2 {
  font-size: 1rem;
  line-height: 1.3125;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.375em;
}

.subheader .subheadings h3 {
  font-family: "Libre Baskerville", serif;
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 700;
}

/* ==========================================================================
   Lists & Dynamic Data Views
   ========================================================================== */
body.basic_index #select-prompt, 
body.basic_verse-selected #select-prompt, 
body.basic_section #select-prompt {
  display: none;
}

.list-heading {
  border-bottom: 1px solid lightgray;
  margin-bottom: 1em;
  font-weight: normal;
}

.list-heading span {
  display: inline-block;
  background: #31ACFF;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.875rem;
  font-weight: 700;
  padding: 0 1em;
  margin-bottom: -1px;
}

.list-container > ul,
.list-container > ol {
  margin-bottom: 3rem;   
}

.list-container li {
  font-size: 2rem;
  line-height: 1.5;
  padding: 0.25em 0;
}

.list-container li a:hover {
  color: #015d9b;
}

.list-container.bible-list li, 
.list-container.section-list li {
  font-size: 1.2rem;
  line-height: 1.5625rem;
  padding: 0.3em 0;
}

.list-container.bible-list li a, 
.list-container.section-list li a {
  display: flex;
  justify-content: left;
}

.list-container.bible-list li .bible-version-abbr, 
.list-container.bible-list li .section-id, 
.list-container.section-list li .bible-version-abbr, 
.list-container.section-list li .section-id {
  display: inline-block;
  white-space: nowrap;
  font-weight: 700;
  min-width: 5.3em;
  text-align: right;
  text-decoration: none;
  margin-right: 1.3em;
}

.list-container.bible-list li .bible-version-desc:before, 
.list-container.section-list li .bible-version-desc:before {
  content: "- ";
}

/* Numeric Lists */
.list-container.numeric-list ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.list-container.numeric-list li {
  padding: 0;
  margin: 0 0.15em 0.3em;
}

.list-container.numeric-list li a {
  display: inline-block;
  padding: 0 0.25em;
  border: 1px solid lightgray;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 3.75rem;
  min-width: 3.75rem;
  text-align: center;
}

.list-container.numeric-list li a:hover {
  background: #31ACFF;
  color: #fff;
}

/* ==========================================================================
   Interactive Elements & Fixed Layouts
   ========================================================================== */
.right-button {
  position: fixed;
  top: 50%;
  right: 30px;
  width: 5vw;
  height: auto;
}

.left-button {
  position: fixed;
  top: 50%;
  left: 30px;
  width: 5vw;
  height: auto;
}

.leftcol {
  position: fixed;
  height: 100%;
  width: 200px;
  background-image: url('../img/scrollbarleft.png');
  background-repeat: no-repeat;
  background-size: 150px 97vh;
  top: 35px;
  left: 0;
}

.rightcol {
  position: fixed;
  height: 100%;
  width: 200px;
  background-image: url('../img/scrollbar.png');
  background-repeat: no-repeat;
  background-size: 150px 97vh;
  top: 35px;
  right: -50px;
}

@media only screen and (max-width: 1100px) {
  .leftcol,
  .rightcol,
  .left-button,
  .right-button {
    display: none !important;
  }
}


.saveButton {
  position: relative;
  top: -25px;
  left: 15px;
}

/* Tooltips */
.tooltip {
  position: relative;
  display: inline-block;
  color: #006080;
}

.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  width: 150px;
  background-color: #555;
  color: #fff;
  text-align: center;
  font-size: 11px;
  line-height: normal;
  padding: 5px;
  border-radius: 6px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip-bottom {
  top: 135%;
  left: 50%;  
  margin-left: -70px;
}

.tooltip-bottom::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

/* ==========================================================================
   Media Queries (Responsiveness)
   ========================================================================== */

/* Tablet & Desktop Settings (600px and up) */
@media only screen and (min-width: 600px) {
  html {
    font-size: 16px;
  }
  .container {
    width: calc(100% - 40px);
    max-width: 1180px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .list-container.numeric-list ol {
    justify-content: left;
  }
  .list-container.numeric-list li {
    margin: 0 0.3em 0.3em 0;
  }
}

/* Mobile Rules (600px and down) */
@media only screen and (max-width: 600px) {
  .left-button,
  .right-button,
  .leftcol,
  .rightcol {
    display: none;
  }
}


/* ==========================================================================
   Shared Clerk Login / Logout Buttons
   Keep this section at the end of bible-main.css.
   ========================================================================== */

.auth-button-container {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

button#login,
button#logout {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-width: 82px;
  height: 36px;
  padding: 0 14px;

  border: 1px solid #123f7c !important;
  border-radius: 6px !important;

  background-color: #072d61 !important;
  background-image: linear-gradient(
    180deg,
    #123f7c 0%,
    #072d61 100%
  ) !important;

  box-shadow:
    0 4px 10px rgba(7, 45, 97, 0.18);

  color: #fff !important;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
}

button#login i,
button#logout i {
  color: #fff !important;
  font-size: 0.9rem;
}

button#login:hover,
button#logout:hover {
  border-color: #185294 !important;

  background-color: #0a3976 !important;
  background-image: linear-gradient(
    180deg,
    #185294 0%,
    #0a3976 100%
  ) !important;

  box-shadow:
    0 6px 14px rgba(7, 45, 97, 0.24);

  transform: translateY(-1px);
}

button#login:active,
button#logout:active {
  box-shadow:
    0 2px 6px rgba(7, 45, 97, 0.18);

  transform: translateY(0);
}

button#login:focus-visible,
button#logout:focus-visible {
  outline: 2px solid #2f9ae0;
  outline-offset: 2px;
}

/* ==========================================================================
   Compact Clerk Buttons in the Verse Toolbar
   ========================================================================== */

.verse-auth-buttons {
  padding: 0 8px;
}

.verse-auth-buttons button#login,
.verse-auth-buttons button#logout {
  min-width: 68px;
  height: 30px;
  padding: 0 9px;
  gap: 5px;

  border-radius: 4px !important;

  font-size: 0.72rem;
  line-height: 1;
}

.verse-auth-buttons button#login i,
.verse-auth-buttons button#logout i {
  font-size: 0.75rem;
}

/* ========================================================================== 
   Shared Preferences Modal
   ========================================================================== */

.preferences-modal {
  position: fixed;
  z-index: 7000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 22, 34, 0.58);
}

.preferences-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 30px;
  border: 1px solid rgba(75, 103, 132, 0.3);
  border-radius: 14px;
  background: #f8fbff;
  box-shadow: 0 24px 60px rgba(7, 25, 46, 0.3);
  color: #172033;
  text-align: left;
}

.preferences-dialog h2 {
  font-family: "Libre Baskerville", serif;
  font-size: 1.45rem;
}

.preferences-intro {
  margin: 8px 0 22px;
  color: #617184;
  line-height: 1.5;
}

.preferences-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4d5d70;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.preferences-close::before,
.preferences-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.preferences-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.preferences-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.preferences-close:hover,
.preferences-close:focus-visible {
  color: #e60000;
}

.preferences-close:hover::before,
.preferences-close:hover::after,
.preferences-close:focus-visible::before,
.preferences-close:focus-visible::after {
  height: 3px;
}

.preferences-field {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.preferences-field span {
  font-size: 0.82rem;
  font-weight: 700;
}

.preferences-field select {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #aab8c8;
  border-radius: 7px;
  background: #fff;
  color: #172033;
  font-family: inherit;
  font-size: 0.9rem;
}

.preferences-field select:focus-visible {
  outline: 2px solid #2f9ae0;
  outline-offset: 2px;
}

.preferences-status {
  min-height: 22px;
  margin-top: 14px;
  color: #246b3d;
  font-size: 0.82rem;
}

.preferences-status.is-error {
  color: #a62727;
}

.preferences-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.preferences-button {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

.preferences-button-secondary {
  border: 1px solid #aab8c8;
  background: #fff;
  color: #304255;
}

.preferences-button-primary {
  border: 1px solid #123f7c;
  background: linear-gradient(180deg, #185294 0%, #0a3976 100%);
  color: #fff;
}

@media only screen and (max-width: 600px) {
  .preferences-modal {
    align-items: flex-end;
    padding: 0;
  }

  .preferences-dialog {
    width: 100%;
    max-height: 90vh;
    padding: 26px 20px;
    border-radius: 14px 14px 0 0;
  }

  .preferences-actions {
    flex-direction: column-reverse;
  }

  .preferences-button {
    width: 100%;
  }
}



/* ========================================================================== 
   Stage 2F - Navbar cleanup after removing visible zoom slider
   Uses a stable 3-zone grid so the save status stays truly centered.
   ========================================================================== */
.subheader .subheadings {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-right: 0;
}

.subheader .verse-toolbar-left {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.subheader .column {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  padding: 0;
  border-right: 0;
}

.subheader .menu-toggle-column {
  flex: 0 0 auto;
}

.subheader .passage-picker-column {
  flex: 0 1 auto;
  min-width: 0;
}

.subheader .passage-picker {
  max-width: min(42vw, 360px);
}

.subheader .passage-picker-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
}

.subheader #current-passage-label {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subheader .save-status-column {
  grid-column: 2;
  justify-self: center;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
  z-index: 2;
  pointer-events: none;
}

.subheader .save-status-column.save-status-column-visible {
  display: flex;
}

.subheader .verse-auth-buttons {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
  padding: 0;
}

@media only screen and (max-width: 700px) {
  .subheader .subheadings {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "left auth"
      "status status";
    justify-content: center;
    row-gap: 4px;
    min-height: 0;
    padding: 5px 0;
  }

  .subheader .verse-toolbar-left {
    grid-area: left;
    justify-self: start;
    max-width: 100%;
  }

  .subheader .column {
    min-height: 34px;
    padding: 0 4px;
  }

  .subheader .passage-picker {
    max-width: min(58vw, 300px);
  }

  .subheader .save-status-column {
    grid-area: status;
    justify-self: center;
    min-height: 0;
    padding: 0;
    pointer-events: auto;
  }

  .subheader .verse-auth-buttons {
    grid-area: auth;
    justify-self: end;
  }
}

/* ========================================================================== 
   Stage 2G - Centered verse navbar refinement
   Keeps the top controls visually centered as one compact control group.
   ========================================================================== */
.subheader {
  border-bottom: 1px solid rgba(19, 57, 93, 0.08);
  box-shadow: 0 1px 8px rgba(19, 57, 93, 0.08);
}

.subheader .container.flex {
  justify-content: center;
}

.subheader .subheadings {
  width: fit-content;
  max-width: calc(100vw - 28px);
  margin: 0 auto;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 18px;
  padding: 6px 0;
}

.subheader .verse-toolbar-left {
  min-width: 0;
  justify-self: center;
}

.subheader .verse-auth-buttons {
  justify-self: center;
}

.subheader .passage-picker {
  max-width: min(42vw, 340px);
}

.subheader .passage-picker-toggle {
  min-height: 30px;
  padding: 3px 8px;
}

.subheader .save-status-column:not(.save-status-column-visible),
.subheader .save-status-column .editor-save-status:not(.editor-save-status-visible) {
  display: none !important;
}

@media only screen and (max-width: 700px) {
  .subheader .subheadings {
    width: 100%;
    max-width: calc(100vw - 16px);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "left auth"
      "status status";
    justify-content: stretch;
    column-gap: 8px;
    row-gap: 4px;
    padding: 6px 8px;
  }

  .subheader .verse-toolbar-left {
    justify-self: start;
    max-width: 100%;
    gap: 8px;
  }

  .subheader .passage-picker {
    max-width: min(58vw, 300px);
  }

  .subheader .verse-auth-buttons {
    justify-self: end;
  }
}

/* ========================================================================== 
   Stage 2G navbar-only rollback / stabilization
   Purpose: keep the top navbar compact and prevent any header-height feedback.
   This intentionally does not change the mini-editor, Bible text width, notes editor,
   or the passage picker panel behavior.
   ========================================================================== */
#stickyHeader {
  position: sticky !important;
  top: 0 !important;
  z-index: 6000 !important;
}

body:not(.landing-page) .subheader {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  overflow: visible !important;
  background: #f6fbff !important;
  border-bottom: 1px solid rgba(19, 57, 93, 0.08) !important;
  box-shadow: 0 1px 7px rgba(19, 57, 93, 0.08) !important;
}

body:not(.landing-page) .subheader .container.flex {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  padding: 0 10px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

body:not(.landing-page) .subheader .subheadings {
  width: auto !important;
  max-width: calc(100vw - 20px) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  line-height: 1 !important;
  font-size: 1rem !important;
  box-sizing: border-box !important;
}

body:not(.landing-page) .subheader .column,
body:not(.landing-page) .subheader .verse-toolbar-left,
body:not(.landing-page) .subheader .menu-toggle-column,
body:not(.landing-page) .subheader .passage-picker-column,
body:not(.landing-page) .subheader .save-status-column,
body:not(.landing-page) .subheader .verse-auth-buttons {
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

body:not(.landing-page) .subheader .verse-toolbar-left {
  gap: 10px !important;
  min-width: 0 !important;
}

body:not(.landing-page) .subheader .hamburger {
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not(.landing-page) .subheader .main-nav-toggle {
  width: 30px !important;
  height: 24px !important;
}

body:not(.landing-page) .subheader .main-nav-toggle span {
  height: 4px !important;
}

body:not(.landing-page) .subheader .passage-picker {
  max-width: min(42vw, 340px) !important;
}

body:not(.landing-page) .subheader .passage-picker-toggle {
  min-height: 30px !important;
  height: 30px !important;
  max-width: 100% !important;
  padding: 3px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 0.94rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body:not(.landing-page) .subheader #current-passage-label {
  display: inline-block !important;
  max-width: min(34vw, 270px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:not(.landing-page) .subheader .save-status-column {
  display: none !important;
}

body:not(.landing-page) .subheader .save-status-column.save-status-column-visible {
  display: flex !important;
}

body:not(.landing-page) .verse-auth-buttons button#login,
body:not(.landing-page) .verse-auth-buttons button#logout {
  min-width: 68px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
}

body:not(.landing-page) .verse-auth-buttons button#login i,
body:not(.landing-page) .verse-auth-buttons button#logout i {
  margin-right: 5px !important;
}

@media only screen and (max-width: 639px) {
  body:not(.landing-page) .subheader {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  body:not(.landing-page) .subheader .subheadings {
    max-width: calc(100vw - 12px) !important;
    gap: 12px !important;
  }

  body:not(.landing-page) .subheader .passage-picker {
    max-width: min(48vw, 210px) !important;
  }

  body:not(.landing-page) .subheader #current-passage-label {
    max-width: min(38vw, 170px) !important;
  }

  body:not(.landing-page) .subheader .save-status-column.save-status-column-visible {
    position: fixed !important;
    top: 58px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 6002 !important;
  }

  body:not(.landing-page) .verse-auth-buttons button#login,
  body:not(.landing-page) .verse-auth-buttons button#logout {
    min-width: 68px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    font-size: 0.82rem !important;
  }
}

@media only screen and (max-width: 380px) {
  body:not(.landing-page) .subheader .subheadings {
    gap: 8px !important;
  }

  body:not(.landing-page) .subheader .passage-picker {
    max-width: min(46vw, 170px) !important;
  }

  body:not(.landing-page) .subheader #current-passage-label {
    max-width: min(36vw, 135px) !important;
  }

  body:not(.landing-page) .verse-auth-buttons button#login span,
  body:not(.landing-page) .verse-auth-buttons button#logout span {
    display: none !important;
  }

  body:not(.landing-page) .verse-auth-buttons button#login,
  body:not(.landing-page) .verse-auth-buttons button#logout {
    min-width: 38px !important;
    width: 38px !important;
    padding: 0 !important;
  }

  body:not(.landing-page) .verse-auth-buttons button#login i,
  body:not(.landing-page) .verse-auth-buttons button#logout i {
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   Navbar-only fine tune: give scroll artwork breathing room below top navbar.
   ========================================================================== */
@media only screen and (min-width: 1101px) {
  body:not(.landing-page) .leftcol,
  body:not(.landing-page) .rightcol {
    top: 58px !important;
    height: calc(100vh - 58px) !important;
    background-size: 150px calc(100vh - 66px) !important;
  }
}

/* ========================================================================== 
   Permanent responsive rule - compact passage picker access
   This matches the breakpoint where the side scroll artwork disappears.
   Below this width, the navbar button is hidden, but the passage picker panel
   remains available for the responsive menu's Open Passage action.
   ========================================================================== */

@media only screen and (max-width: 1100px) {
  body:not(.landing-page) .subheader .passage-picker-column {
    display: flex !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
  }

  body:not(.landing-page) .subheader .passage-picker {
    display: block !important;
    position: relative !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not(.landing-page) .subheader .passage-picker-toggle {
    display: none !important;
  }

  body:not(.landing-page) .subheader #passage-picker-panel {
    display: block;
  }

  body:not(.landing-page) .subheader #passage-picker-panel[hidden] {
    display: none !important;
  }

  body:not(.landing-page) .subheader .subheadings {
    gap: 28px !important;
  }
}

/* ========================================================================== 
   Mobile save status navbar refinement
   Keep the save status inside the navbar when the mini-editor switches to
   compact mode, instead of letting it drop onto the mini-editor.
   ========================================================================== */

@media only screen and (max-width: 639px) {
  body:not(.landing-page) .subheader .save-status-column.save-status-column-visible {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    display: flex !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 128px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  body:not(.landing-page) .subheader .editor-save-status {
    max-width: 128px !important;
    min-height: 28px !important;
    padding: 4px 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.landing-page) .subheader .subheadings {
    gap: 18px !important;
  }
}

@media only screen and (max-width: 380px) {
  body:not(.landing-page) .subheader .save-status-column.save-status-column-visible {
    max-width: 112px !important;
  }

  body:not(.landing-page) .subheader .editor-save-status {
    max-width: 112px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body:not(.landing-page) .subheader .subheadings {
    gap: 12px !important;
  }
}


/* ========================================================================== 
   Stage 3A - Preferences checkbox field
   Used for editor behavior preferences such as the freehand warning.
   ========================================================================== */

.preferences-checkbox-field {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(75, 103, 132, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
}

.preferences-checkbox-field input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
}

.preferences-checkbox-field span {
  font-size: 0.9rem;
  font-weight: 700;
  color: #172033;
}


/* ========================================================================== 
   Navbar passage visibility and current passage chip
   Keep the full passage button until the navbar truly runs out of room.
   Then show a compact current passage chip so the user still knows where they are.
   ========================================================================== */

body:not(.landing-page) .subheader .mobile-current-passage-column {
  display: none !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

body:not(.landing-page) .subheader .mobile-current-passage-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 132px;
  height: 30px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(19, 57, 93, 0.34);
  border-radius: 6px;
  background: #ffffff;
  color: #172033;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

body:not(.landing-page) .subheader .mobile-current-passage-button span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-current-passage {
  display: none;
}

/*
  Privacy footer
*/
.landing-footer {
  text-align: center;
  padding: 24px 16px;
}

.landing-footer .privacy-link {
  color: #000;
  text-decoration: none;
}

.landing-footer .privacy-link:hover {
  font-weight: bold;
}

/*
  The old rule hid the full passage picker below 1100px.
  Restore it from 561px to 1100px because there is still enough room there.
*/
@media only screen and (min-width: 561px) and (max-width: 1100px) {
  body:not(.landing-page) .subheader .passage-picker-column {
    display: flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(42vw, 260px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not(.landing-page) .subheader .passage-picker {
    display: block !important;
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(42vw, 260px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not(.landing-page) .subheader .passage-picker-toggle {
    display: inline-flex !important;
    max-width: min(42vw, 260px) !important;
  }

  body:not(.landing-page) .subheader #current-passage-label {
    max-width: min(34vw, 210px) !important;
  }

  body:not(.landing-page) .subheader .mobile-current-passage-column {
    display: none !important;
  }

  body:not(.landing-page) .subheader .subheadings {
    gap: 14px !important;
  }
}

/*
  Below 560px, the full BSB • Book Chapter button usually becomes too wide.
  Hide it and show the compact Book Chapter chip instead.
*/
@media only screen and (max-width: 560px) {
  body:not(.landing-page) .subheader .passage-picker-column {
    display: flex !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
  }

  body:not(.landing-page) .subheader .passage-picker {
    display: block !important;
    position: relative !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not(.landing-page) .subheader .passage-picker-toggle {
    display: none !important;
  }

  body:not(.landing-page) .subheader .mobile-current-passage-column {
    display: flex !important;
  }

  body:not(.landing-page) .subheader .mobile-current-passage-button {
    max-width: clamp(76px, 34vw, 132px);
  }

  body:not(.landing-page) .subheader .subheadings {
    gap: clamp(6px, 2.6vw, 12px) !important;
  }

  .menu-current-passage {
    display: block;
    margin: 0 0 10px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(19, 57, 93, 0.18);
    color: #1d2d44;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .menu-current-passage span {
    color: #174a8b;
  }
}

@media only screen and (max-width: 380px) {
  body:not(.landing-page) .subheader .mobile-current-passage-button {
    max-width: clamp(66px, 31vw, 112px);
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.8rem;
  }
}