:root { --sccbr-column: 65rem; --sccbr-controls-inset: 1.5rem; }

.sccbr {
  --sccbr-accent: #1f2937;
  --sccbr-muted: #6b7280;
  --sccbr-line: #e5e7eb;
  --sccbr-surface: #f9fafb;
  --sccbr-text-size: 1.0625rem;
  max-width: var(--sccbr-column);
  margin: 0 auto;
  color: inherit;
}
.sccbr[data-font="0"] { --sccbr-text-size: 0.9375rem; }
.sccbr[data-font="2"] { --sccbr-text-size: 1.25rem; }

.sccbr-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.sccbr-controls__right { padding-inline-end: var(--sccbr-controls-inset); display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
/* Split mode has no tab list, so the controls row carries the separator the tab list draws elsewhere. */
.sccbr[data-split] .sccbr-controls { border-bottom: 2px solid var(--sccbr-line); padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.sccbr-datenav { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.sccbr-datenav__current { font-weight: 700; padding: 0.5rem 0.875rem; background: var(--sccbr-accent); color: #fff; border-radius: 0.5rem; }
.sccbr-btn, .sccbr-pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.375rem 0.75rem;
  border: 1px solid var(--sccbr-line); border-radius: 0.5rem; background: #fff; color: inherit; text-decoration: none; cursor: pointer; font: inherit;
}
.sccbr-btn:disabled { opacity: 0.4; cursor: default; }
.sccbr-pills { display: inline-flex; background: var(--sccbr-surface); border-radius: 0.5rem; padding: 0.25rem; gap: 0.25rem; }
.sccbr-pill { border-color: transparent; background: transparent; }
.sccbr-pill[aria-pressed="true"] { background: var(--sccbr-accent); color: #fff; }
/* The theme colours every button on hover/focus/active, so pill states are restated at higher specificity. */
.sccbr .sccbr-pill, .sccbr .sccbr-pill:hover, .sccbr .sccbr-pill:focus, .sccbr .sccbr-pill:active { background: transparent; color: inherit; box-shadow: none; text-shadow: none; }
.sccbr .sccbr-pill[aria-pressed="true"], .sccbr .sccbr-pill[aria-pressed="true"]:hover,
.sccbr .sccbr-pill[aria-pressed="true"]:focus, .sccbr .sccbr-pill[aria-pressed="true"]:active { background: var(--sccbr-accent); color: #fff; }
.sccbr-font { display: inline-flex; gap: 0.25rem; }
.sccbr-font__size { min-width: 2.5rem; line-height: 1; font-weight: 700; }
.sccbr-font__size[aria-pressed="true"] { background: var(--sccbr-accent); color: #fff; border-color: var(--sccbr-accent); }
.sccbr-font__size[data-size="0"] { font-size: 0.875rem; }
.sccbr-font__size[data-size="1"] { font-size: 1.125rem; }
.sccbr-font__size[data-size="2"] { font-size: 1.5rem; }

.sccbr-tabs__explore { display: none; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.sccbr-tabs__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; border-bottom: 2px solid var(--sccbr-line); margin-bottom: 1.25rem; }
.sccbr-tabs__tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 0.625rem 0; font: inherit; color: var(--sccbr-muted); cursor: pointer; }
.sccbr-tabs__tab[aria-selected="true"] { color: inherit; border-bottom-color: var(--sccbr-accent); font-weight: 700; }

.sccbr :focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

.sccbr-reading { margin-bottom: 2.5rem; }
.sccbr-reading__title { display: flex; flex-direction: column; gap: 0.125rem; font-size: 1.5rem; margin: 0 0 1rem; }
.sccbr-reading__label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sccbr-muted); }
.sccbr-reading__text { font-size: var(--sccbr-text-size); line-height: 1.75; }
.sccbr-reading__text h2, .sccbr-reading__text h3, .sccbr-reading__text h4, .sccbr-reading__text h5,
.sccbr-reading__text .s1, .sccbr-reading__text .s, .sccbr-reading__text .ms, .sccbr-reading__text .cl { font-weight: 700; font-size: 1.05em; line-height: 1.4; margin: 1.5em 0 0.5em; }
.sccbr-reading__text .v { font-size: 0.7em; vertical-align: super; color: var(--sccbr-muted); padding-right: 0.15em; }
.sccbr-reading__text .tl { font-style: italic; }
.sccbr-reading__text .q1, .sccbr-reading__text .q { padding-left: 1.5em; margin: 0; }
.sccbr-reading__text .q2 { padding-left: 3em; margin: 0; }
.sccbr-reading__text .copyright { font-size: 0.8125rem; line-height: 1.4; color: var(--sccbr-muted); margin: 0.5rem 0; }
.sccbr-reading__text .copyright sup { line-height: 0; }
.sccbr-reading__footer { margin-top: 1rem; font-size: 0.8125rem; color: var(--sccbr-muted); }
.sccbr-reading__fallback, .sccbr-catchup, .sccbr-error { padding: 1rem; background: var(--sccbr-surface); border-left: 4px solid var(--sccbr-accent); border-radius: 0.25rem; }

.sccbr-skeleton__line { height: 1rem; background: var(--sccbr-line); border-radius: 0.25rem; margin: 0.75rem 0; animation: sccbr-pulse 1.4s ease-in-out infinite; }
.sccbr-skeleton__line--short { width: 60%; }
@keyframes sccbr-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .sccbr-skeleton__line { animation: none; } }

.sccbr-archive__month { margin-bottom: 1rem; min-height: 2.5rem; }
.sccbr-archive__list { list-style: none; padding: 0; margin: 0; }
.sccbr-archive__day a { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--sccbr-line); color: inherit; text-decoration: none; }
.sccbr-archive__day[aria-current="date"] a { background: var(--sccbr-surface); font-weight: 700; }

/* [scc_bible_references]: the day's references as a stacked column, placed by the page builder (no
   background or width here). Selected one is bold and underlined, not distinguished by colour alone. */
.sccbr-refs { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.sccbr-refs__list { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
/* The theme styles every button (pink fill and text on hover/focus/active), so each state is restated here at higher specificity. */
.sccbr-refs .sccbr-ref,
.sccbr-refs .sccbr-ref:hover,
.sccbr-refs .sccbr-ref:focus,
.sccbr-refs .sccbr-ref:active { background: none; color: #000; box-shadow: none; text-shadow: none; }
.sccbr-refs .sccbr-ref { border: 0; border-radius: 0; padding: 0.2rem; font: inherit; font-size: 1.5rem; line-height: 1.3; text-align: inherit; cursor: pointer; text-decoration: none; }
.sccbr-refs .sccbr-ref:hover { font-weight: 700; text-decoration: none; }
.sccbr-refs .sccbr-ref[aria-pressed="true"], .sccbr-refs .sccbr-ref[aria-expanded="true"],
.sccbr-refs .sccbr-ref[aria-pressed="true"]:hover, .sccbr-refs .sccbr-ref[aria-expanded="true"]:hover { font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; }
.sccbr-refs :focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

/* Theme page title (Hello Elementor .page-header) sits outside the plugin. The header keeps the theme's own
   box (same as .page-content); the title inside takes the plugin column so left edges coincide at any width. */
.page-header:has(+ .page-content .sccbr) .entry-title,
main:has(.sccbr) .page-header .entry-title {
  box-sizing: border-box;
  max-width: var(--sccbr-column);
  margin-inline: auto;
  padding-inline: var(--sccbr-pad-left, 0) var(--sccbr-pad-right, 0);
  text-align: var(--sccbr-title-align, left);
}

@media (max-width: 576px) {
  .sccbr-tabs__explore { display: flex; }
  .sccbr-tabs__list { display: none; }
  .sccbr-controls { flex-direction: column; align-items: stretch; }
  .sccbr-datenav, .sccbr-controls__right, .sccbr-tabs__explore { justify-content: center; }
  .sccbr-pills { justify-content: center; flex-wrap: wrap; }
  .sccbr-controls__right { padding-inline-end: 0; gap: 1rem; }
  :root { --sccbr-title-align: center; }
  .sccbr-refs, .sccbr-refs__list { align-items: center; text-align: center; }
}

/* App mode: shown inside the church app's in-app browser. */
body.sccbr-app-mode header, body.sccbr-app-mode footer:not(.sccbr-reading__footer),
body.sccbr-app-mode .elementor-location-header, body.sccbr-app-mode .elementor-location-footer,
body.sccbr-app-mode #site-header, body.sccbr-app-mode #site-footer, body.sccbr-app-mode #wpadminbar { display: none !important; }
body.sccbr-app-mode {
  --sccbr-pad-left: max(1rem, env(safe-area-inset-left));
  --sccbr-pad-right: max(1rem, env(safe-area-inset-right));
}
body.sccbr-app-mode .sccbr {
  padding: max(1rem, env(safe-area-inset-top)) var(--sccbr-pad-right) max(1.5rem, env(safe-area-inset-bottom)) var(--sccbr-pad-left);
}
body.sccbr-app-mode .sccbr-btn, body.sccbr-app-mode .sccbr-pill, body.sccbr-app-mode .sccbr-tabs__select, body.sccbr-app-mode .sccbr-ref { min-height: 2.75rem; min-width: 2.75rem; }

@media print {
  .sccbr-controls, .sccbr-tabs, .sccbr-refs, .sccbr-reading__gateway, .sccbr-reading__more { display: none !important; }
  .sccbr-reading { break-inside: avoid-page; }
}

/* Without scripting the loading note is pointless; the <noscript> list is shown instead. */
@media (scripting: none) { .sccbr-loading { display: none; } }