/* Bible Outlines — web edition (based on GraceLife app outline styles) */

.bo-wrap {
    --bo-blue: #265ba2;
    --bo-gray: #827a7c;
    --bo-dark: #252122;
    --bo-green: #36a02b;
    --bo-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.1);
    font-size: 1.05rem;
    line-height: 1.65;
    text-align: justify;
}

.bo-breadcrumb {
    font-size: 0.85em;
    margin-bottom: 1.25em;
    text-align: left;
}

.bo-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
}

.bo-breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: 0.35em;
    color: #999;
}

.bo-breadcrumb a {
    color: var(--bo-blue);
    text-decoration: none;
}

.bo-breadcrumb a:hover {
    text-decoration: underline;
}

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

.bo-intro {
    margin-bottom: 1.5em;
}

.bo-intro h2 {
    text-align: center;
    font-size: 1.35em;
    margin-bottom: 0.25em;
}

.bo-intro .bo-byline {
    text-align: center;
    font-size: 0.95em;
    color: #666;
    margin-bottom: 1em;
}

.bo-actions {
    text-align: center;
    margin: 1.25em 0;
}

.bo-actions .button {
    margin: 0.25em 0.5em;
}

/* Testament tabs */
.bo-tabs {
    display: flex;
    gap: 0.5em;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 1.25em;
}

.bo-tabs button {
    border: 2px solid var(--bo-blue) !important;
    background: #fff !important;
    color: var(--bo-blue) !important;
    font-weight: 700;
    padding: 0.45em 1.1em;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.bo-tabs button:hover,
.bo-tabs button:focus-visible {
    background: #eef3fa !important;
    color: var(--bo-blue) !important;
}

.bo-tabs button.is-active {
    background: var(--bo-blue) !important;
    color: #fff !important;
}

.bo-tabs button.is-active:hover,
.bo-tabs button.is-active:focus-visible {
    background: #3c89e5 !important;
    color: #fff !important;
}

/* Book picker grid */
.bo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 0.85em;
    margin-bottom: 2em;
}

@media (min-width: 768px) {
    .bo-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1em;
    }
}

.bo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--bo-shadow);
    padding: 0.65em 0.45em 0.75em;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 2px solid transparent;
}

.bo-card:hover,
.bo-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
    border-color: var(--bo-blue);
}

.bo-card.is-current {
    border-color: var(--bo-green);
    background: #f4fbf3;
}

.bo-card img {
    width: 100%;
    max-width: 96px;
    height: auto;
    display: block;
    border-radius: 6px;
}

.bo-card span {
    margin-top: 0.45em;
    font-size: 0.78em;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    color: var(--bo-dark);
}

.bo-section-heading {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--bo-blue);
    margin: 1.5em 0 0.75em;
    text-align: center;
}

/* Reader */
.bo-reader {
    padding-bottom: 5.5em;
}

.bo-reader-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 1em;
    flex-wrap: wrap;
}

.bo-back {
    font-weight: 700;
    text-decoration: none;
    color: var(--bo-blue);
}

.bo-back:hover {
    text-decoration: underline;
}

.bo-banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    margin-bottom: 1em;
}

/* Collapsible sections — card-style (matches book picker) */
.bo-sections {
    display: flex;
    flex-direction: column;
}

.bo-sections .togCheck1,
.bo-sections .togCheck2,
.bo-sections .togCheck3,
.bo-sections .togCheck4,
.bo-sections .togCheck5,
.bo-sections .togCheck6,
.bo-sections .togCheck7 {
    display: none;
}

.bo-sections .togContent1,
.bo-sections .togContent2,
.bo-sections .togContent3,
.bo-sections .togContent4,
.bo-sections .togContent5,
.bo-sections .togContent6,
.bo-sections .togContent7 {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.35s ease;
    background: #fff;
    border: none;
    border-radius: 0 0 12px 12px;
    margin: -0.35em 0 0.75em;
    padding-top: 0;
}

.bo-sections .togCheck1:checked + .togContent1,
.bo-sections .togCheck2:checked + .togContent2,
.bo-sections .togCheck3:checked + .togContent3,
.bo-sections .togCheck4:checked + .togContent4,
.bo-sections .togCheck5:checked + .togContent5,
.bo-sections .togCheck6:checked + .togContent6,
.bo-sections .togCheck7:checked + .togContent7 {
    max-height: 50000px;
    opacity: 1;
    visibility: visible;
    border: 2px solid #e8e8e8;
    border-top: none;
    margin: -0.35em 0 0.75em;
    padding-top: 0.25em;
}

.bo-sections .togButton1,
.bo-sections .togButton2,
.bo-sections .togButton3,
.bo-sections .togButton4,
.bo-sections .togButton5,
.bo-sections .togButton6,
.bo-sections .togButton7 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    width: 100%;
    padding: 0.85em 1em;
    margin: 0 0 0.75em;
    color: var(--bo-dark) !important;
    background: #fff !important;
    border: 2px solid transparent;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--bo-shadow);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}

.bo-sections .togButton1:hover,
.bo-sections .togButton2:hover,
.bo-sections .togButton3:hover,
.bo-sections .togButton4:hover,
.bo-sections .togButton5:hover,
.bo-sections .togButton6:hover,
.bo-sections .togButton7:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    border-color: var(--bo-blue);
}

.bo-sections .togButton1 .icon,
.bo-sections .togButton2 .icon,
.bo-sections .togButton3 .icon,
.bo-sections .togButton4 .icon,
.bo-sections .togButton5 .icon,
.bo-sections .togButton6 .icon,
.bo-sections .togButton7 .icon {
    display: none;
}

.bo-sections .togButton1 span,
.bo-sections .togButton2 span,
.bo-sections .togButton3 span,
.bo-sections .togButton4 span,
.bo-sections .togButton5 span,
.bo-sections .togButton6 span,
.bo-sections .togButton7 span {
    flex: 1;
    color: var(--bo-blue);
}

.bo-sections .togButton1::after,
.bo-sections .togButton2::after,
.bo-sections .togButton3::after,
.bo-sections .togButton4::after,
.bo-sections .togButton5::after,
.bo-sections .togButton6::after,
.bo-sections .togButton7::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.85em;
    color: var(--bo-blue);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.bo-sections:has(.togCheck1:checked) .togButton1,
.bo-sections:has(.togCheck2:checked) .togButton2,
.bo-sections:has(.togCheck3:checked) .togButton3,
.bo-sections:has(.togCheck4:checked) .togButton4,
.bo-sections:has(.togCheck5:checked) .togButton5,
.bo-sections:has(.togCheck6:checked) .togButton6,
.bo-sections:has(.togCheck7:checked) .togButton7 {
    border-color: var(--bo-blue);
    background: #eef3fa !important;
}

.bo-sections:has(.togCheck7:checked) .togButton7 {
    border-color: var(--bo-green);
    background: #f4fbf3 !important;
}

.bo-sections:has(.togCheck1:checked) .togButton1::after,
.bo-sections:has(.togCheck2:checked) .togButton2::after,
.bo-sections:has(.togCheck3:checked) .togButton3::after,
.bo-sections:has(.togCheck4:checked) .togButton4::after,
.bo-sections:has(.togCheck5:checked) .togButton5::after,
.bo-sections:has(.togCheck6:checked) .togButton6::after,
.bo-sections:has(.togCheck7:checked) .togButton7::after {
    transform: rotate(180deg);
}

.bo-sections:has(.togCheck1:checked) .togButton1,
.bo-sections:has(.togCheck2:checked) .togButton2,
.bo-sections:has(.togCheck3:checked) .togButton3,
.bo-sections:has(.togCheck4:checked) .togButton4,
.bo-sections:has(.togCheck5:checked) .togButton5,
.bo-sections:has(.togCheck6:checked) .togButton6,
.bo-sections:has(.togCheck7:checked) .togButton7 {
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
}

.bo-sections .togContent1 p,
.bo-sections .togContent2 p,
.bo-sections .togContent3 p,
.bo-sections .togContent4 p,
.bo-sections .togContent5 p,
.bo-sections .togContent6 p,
.bo-sections .togContent7 p {
    padding: 0.5em 0.5em 0.5em 1.5em;
    margin: 0;
}

.bo-sections .oIndent {
    padding-left: 1.5em;
}

.bo-sections ol > li::marker {
    font-weight: bold;
    color: var(--bo-blue);
}

.bo-sections summary {
    color: var(--bo-blue);
    font-weight: bold;
    cursor: pointer;
}

.bo-sections details > summary {
    list-style: none;
}

.bo-sections details > summary::-webkit-details-marker {
    display: none;
}

.bo-credit {
    text-align: center;
    font-size: 0.85em;
    color: #666;
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #ddd;
}

/* Fixed book switcher bar */
.bo-switcher {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: #fff;
    border-top: 2px solid var(--bo-blue);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    display: none;
    align-items: stretch;
    min-height: 64px;
}

.bo-switcher.is-visible {
    display: flex;
}

.bo-switcher-btn {
    flex: 0 0 52px;
    border: none;
    background: #eef3fa;
    color: var(--bo-blue);
    font-size: 1.25em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bo-switcher-btn:hover:not(:disabled) {
    background: #dce8f7;
}

.bo-switcher-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.bo-switcher-current {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65em;
    border: none;
    background: #fff;
    cursor: pointer;
    padding: 0.4em 0.75em;
    font-weight: 700;
    color: var(--bo-dark);
    font-size: 0.95em;
}

.bo-switcher-current img {
    width: 40px;
    height: auto;
    border-radius: 4px;
}

.bo-switcher-current .fa-chevron-up {
    color: var(--bo-blue);
    font-size: 0.85em;
}

/* Book picker drawer */
.bo-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 950;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.bo-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.bo-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    z-index: 960;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
}

.bo-drawer.is-open {
    transform: translateY(0);
}

.bo-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85em 1em;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

.bo-drawer-header h3 {
    margin: 0;
    font-size: 1.05em;
    color: var(--bo-blue);
}

.bo-drawer-close {
    border: none;
    background: none;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0.2em 0.4em;
}

.bo-drawer-body {
    overflow-y: auto;
    padding: 0.75em 1em 1.5em;
    -webkit-overflow-scrolling: touch;
}

.bo-view-home .bo-reader,
.bo-view-home .bo-switcher {
    display: none !important;
}

.bo-view-book .bo-picker-panel {
    display: none;
}

.bo-view-book.bo-show-picker .bo-picker-panel {
    display: block;
}

.bo-loading {
    text-align: center;
    padding: 2em;
    color: #666;
}