/* Layout and component styles. Colors come from theme.css. */

h1, h2, h3 {
  font-weight: 700 !important;
}
h1 { font-size: 24px; margin: 10px 0; }
h2 { font-size: 20px; margin: 15px 0; display: inline-block; }
h3, .content h3 { font-size: 16px; padding-left: 0; margin-block: 0.5rem; }
h4 { font-size: 16px; font-style: italic; padding-left: 0; font-weight: 300; }

.esv h2, .esv h3, .esv h4 { padding: 0; }

#heading { display: inline-block; }

.officetext p {
  margin-top: 10px;
  font-family: garamond, georgia, serif;
  font-size: 16px;
}
.officetext r {
  font-weight: 600;
  margin-bottom: 10px;
}

.esv-text p { margin: 10px 0; }

.done-check {
  position: absolute;
  right: 10px;
  top: 10px;
}

.padded { padding: 5px 20px; }

.verse-num, .chapter-num {
  display: none;
  position: relative;
  font-weight: 300;
  top: -0.5em;
  font-size: 70%;
  color: var(--text-muted);
}

.hidden { display: none; }

.fade { opacity: 0.8; }

.line {
  display: inline-block;
  padding-left: 0;
  text-indent: -0.5em;
}

.indent {
  padding-left: 1em !important;
  display: block;
}
.indent.line {
  display: inline-block;
  padding-left: 1em !important;
  text-indent: -1em !important;
}

.indent2 {
  padding-left: 2em !important;
  display: block;
}

.surrounding-chapters { display: none; }

.officetext, .esv-text {
  font-size: 16px;
  /* Cap typographic measure on big screens, but allow shrinking on small ones. */
  max-width: 500px;
  width: 100%;
  /* Critical for flex parents: lets the box actually shrink instead of
   * being pushed to its content's max-content width. */
  min-width: 0;
  line-height: 1.5;
  /* Long unbroken strings (URLs, verse refs joined with no-break chars) must
   * wrap rather than push the column past the viewport. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Anything the office text or ESV HTML embeds — paragraphs, lists, the ESV
 * <sup> verse numbers, raw markdown blocks — stays inside the column. */
.officetext > *, .esv-text > * { max-width: 100%; }
.officetext p, .esv-text p { overflow-wrap: anywhere; }
.officetext pre, .officetext code,
.esv-text pre, .esv-text code {
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
}
.officetext table, .esv-text table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.extra_text { display: none; }

.right-button { position: absolute; top: 20px; right: 5px; }
.left-button  { position: absolute; top: 20px; left: 5px; }

#loader {
  position: fixed;
  top: 20vh;
  left: 45vw;
  height: 40px;
  width: 40px;
}

.tags { padding-top: 10px; }
.tag { margin: 2px !important; }
.delete { margin-left: 3px !important; }
.tag-buttons { max-width: 500px; }

/* Presence indicator */
.ring-container {
  position: relative;
  display: inline-block;
  width: 13px;
}
.circles {
  padding: 0;
  margin: 0;
  display: inline-block;
  position: absolute;
  right: 10px;
  top: 20px;
}
.circle {
  width: 11px;
  height: 11px;
  background-color: hsl(var(--season-epiphany));
  border-radius: 50%;
}
.ringring {
  border: 3px solid hsl(var(--season-epiphany));
  border-radius: 30px;
  height: 21px;
  width: 21px;
  position: absolute;
  left: -5px;
  top: -5px;
  animation: pulsate 3s ease-out infinite;
  opacity: 0;
}

#cache-status .progress { height: 3px; }

.modal-content {
  max-width: 90%;
  min-width: 50%;
  border-radius: 5px;
}

.alarm-input {
  display: block;
  padding: 5px;
  min-height: 40px;
  vertical-align: middle;
}
input[type="time"] { max-width: 120px; }
.alarm-label { min-width: 100px; }

.site-controls {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.flex {
  display: flex;
  gap: 1rem;
}

@keyframes pulsate {
  0% { transform: scale(0.1, 0.1); opacity: 0.0; }
  50% { opacity: 0.6; }
  100% { transform: scale(1.2, 1.2); opacity: 0.0; }
}