/*
 * Fantasticamos: John the Baptist Mission Adventure
 * Public styles are deliberately scoped beneath .b4a-jtb.
 */
.b4a-jtb {
    --jtb-river: #3e788d;
    --jtb-river-dark: #244c5d;
    --jtb-sand: #d4af76;
    --jtb-cream: #f4e7cf;
    --jtb-camel: #79543a;
    --jtb-reed: #667a4a;
    --jtb-gold: #d89a3d;
    --jtb-storm: #34536a;
    --jtb-burgundy: #743f48;
    --jtb-charcoal: #2d3032;
    --jtb-ivory: #fff9ed;
    --jtb-olive: #86816a;
    --jtb-rose: #c98b88;
    --jtb-shadow: 0 14px 34px rgba(45, 48, 50, .12);
    --jtb-radius: 22px;
    --jtb-focus: 3px solid #0b5fff;
    color: var(--jtb-charcoal);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    margin-inline: auto;
    max-width: 1180px;
    overflow-wrap: anywhere;
}

.b4a-jtb *,
.b4a-jtb *::before,
.b4a-jtb *::after {
    box-sizing: border-box;
}

.b4a-jtb h2,
.b4a-jtb h3,
.b4a-jtb h4 {
    color: var(--jtb-storm);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.2;
    margin-top: 0;
}

.b4a-jtb h2 { font-size: clamp(1.85rem, 4vw, 2.75rem); }
.b4a-jtb h3 { font-size: clamp(1.25rem, 2.8vw, 1.65rem); }
.b4a-jtb p { margin: 0 0 1em; }
.b4a-jtb a { color: var(--jtb-river-dark); text-decoration-thickness: .1em; text-underline-offset: .16em; }
.b4a-jtb a:hover { color: var(--jtb-burgundy); }
.b4a-jtb img { display: block; height: auto; max-width: 100%; }
.b4a-jtb button,
.b4a-jtb input,
.b4a-jtb select,
.b4a-jtb textarea { font: inherit; }
.b4a-jtb button,
.b4a-jtb select,
.b4a-jtb input[type="radio"],
.b4a-jtb input[type="checkbox"],
.b4a-jtb summary { cursor: pointer; }

.b4a-jtb :focus-visible {
    outline: var(--jtb-focus);
    outline-offset: 3px;
}

.b4a-jtb__skip {
    background: #fff;
    border: 2px solid var(--jtb-storm);
    border-radius: 8px;
    left: 1rem;
    padding: .75rem 1rem;
    position: fixed;
    top: -10rem;
    z-index: 99999;
}
.b4a-jtb__skip:focus { top: 1rem; }

.b4a-jtb__preview-banner {
    background: #fff3cd;
    border: 2px solid #997404;
    border-radius: 12px;
    color: #4d3c00;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    position: sticky;
    top: 34px;
    z-index: 100;
}
.b4a-jtb__preview-banner a { margin-left: .75rem; }

.b4a-jtb__hero {
    align-items: flex-end;
    background-color: var(--jtb-storm);
    background-image: var(--b4a-hero);
    background-position: center;
    background-size: cover;
    border-radius: var(--jtb-radius);
    box-shadow: var(--jtb-shadow);
    display: flex;
    min-height: min(620px, 72vh);
    overflow: hidden;
    position: relative;
}
.b4a-jtb__hero-shade {
    background: linear-gradient(90deg, rgba(19,31,39,.88) 0%, rgba(19,31,39,.62) 43%, rgba(19,31,39,.05) 75%);
    inset: 0;
    position: absolute;
}
.b4a-jtb__hero-copy {
    color: #fff;
    max-width: 660px;
    padding: clamp(1.4rem, 5vw, 4rem);
    position: relative;
    z-index: 1;
}
.b4a-jtb__hero h2 {
    color: #fff;
    font-size: clamp(2.25rem, 6vw, 4.4rem);
    margin-bottom: .35em;
    text-shadow: 0 3px 16px rgba(0,0,0,.4);
}
.b4a-jtb__subtitle { font-size: clamp(1.05rem, 2.2vw, 1.35rem); max-width: 54ch; }
.b4a-jtb__audience { font-size: .95rem; font-weight: 700; letter-spacing: .02em; }
.b4a-jtb__eyebrow {
    color: inherit;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .13em;
    margin-bottom: .55rem;
    text-transform: uppercase;
}
.b4a-jtb__hero-actions,
.b4a-jtb__mission-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.b4a-jtb__button,
.b4a-jtb button[type="submit"],
.b4a-jtb__complete-button,
.b4a-jtb [data-complete-activity] {
    align-items: center;
    background: var(--jtb-storm);
    border: 2px solid var(--jtb-storm);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 48px;
    padding: .7rem 1.15rem;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.b4a-jtb__button:hover,
.b4a-jtb button[type="submit"]:hover,
.b4a-jtb__complete-button:hover,
.b4a-jtb [data-complete-activity]:hover {
    background: var(--jtb-river-dark);
    box-shadow: 0 7px 18px rgba(45,48,50,.18);
    color: #fff;
    transform: translateY(-1px);
}
.b4a-jtb__button--secondary {
    background: rgba(255,255,255,.12);
    border-color: #fff;
}

.b4a-jtb__central-truth {
    background: var(--jtb-gold);
    border-radius: 0 0 18px 18px;
    box-shadow: var(--jtb-shadow);
    color: #232323;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    margin: 0 clamp(.5rem, 3vw, 2.5rem) 2rem;
    padding: 1rem 1.4rem;
    text-align: center;
}

.b4a-jtb__card,
.b4a-jtb__chapter,
.b4a-jtb__mission-control,
.b4a-jtb__activity {
    background: var(--jtb-ivory);
    border: 1px solid rgba(52,83,106,.18);
    border-radius: var(--jtb-radius);
    box-shadow: var(--jtb-shadow);
    margin: 1.5rem 0;
    padding: clamp(1.1rem, 3vw, 2rem);
}

.b4a-jtb__intro { border-left: 8px solid var(--jtb-gold); }
.b4a-jtb__gospel { background: linear-gradient(135deg, #fff9ed, #f7ead2); border-top: 6px solid var(--jtb-burgundy); }

.b4a-jtb__truth-grid,
.b4a-jtb__use-grid,
.b4a-jtb__paths,
.b4a-jtb__study-grid,
.b4a-jtb__print-grid,
.b4a-jtb__related,
.b4a-jtb__badges {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.b4a-jtb__truth-grid > div,
.b4a-jtb__use-grid > div,
.b4a-jtb__paths > section,
.b4a-jtb__study-grid > section {
    background: #fff;
    border: 1px solid rgba(52,83,106,.18);
    border-radius: 14px;
    padding: 1rem;
}
.b4a-jtb__use-grid span { display: block; margin-top: .3rem; }

.b4a-jtb__mission-control {
    background: linear-gradient(135deg, var(--jtb-storm), var(--jtb-river-dark));
    color: #fff;
}
.b4a-jtb__mission-control h2,
.b4a-jtb__mission-control a { color: #fff; }
.b4a-jtb__mission-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}
.b4a-jtb__mission-actions a,
.b4a-jtb__mission-actions button {
    background: #fff;
    border: 2px solid #fff;
    border-radius: 999px;
    color: var(--jtb-storm);
    font-weight: 800;
    min-height: 46px;
    padding: .65rem 1rem;
    text-decoration: none;
}
.b4a-jtb__chapter-map {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}
.b4a-jtb__chapter-map a {
    align-items: center;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 14px;
    display: flex;
    gap: .75rem;
    min-height: 62px;
    padding: .7rem;
    text-decoration: none;
}
.b4a-jtb__chapter-map a span {
    align-items: center;
    background: var(--jtb-gold);
    border-radius: 50%;
    color: #222;
    display: inline-flex;
    flex: 0 0 38px;
    font-weight: 900;
    height: 38px;
    justify-content: center;
}
.b4a-jtb__chapter-map a.is-complete {
    background: rgba(255,255,255,.2);
    box-shadow: inset 0 0 0 2px var(--jtb-gold);
}
.b4a-jtb__chapter-map a.is-complete::after {
    content: "✓";
    margin-left: auto;
}
.b4a-jtb__reset-confirm {
    background: #fff;
    border-radius: 14px;
    color: var(--jtb-charcoal);
    margin-top: 1rem;
    padding: 1rem;
}
.b4a-jtb__reset-confirm button {
    border: 1px solid var(--jtb-storm);
    border-radius: 9px;
    min-height: 44px;
    padding: .55rem .8rem;
}

.b4a-jtb__chapter {
    background: #fffdf8;
    scroll-margin-top: 2rem;
}
.b4a-jtb__chapter-header {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
}
.b4a-jtb__readings {
    background: var(--jtb-cream);
    border-radius: 14px;
    padding: 1rem;
}
.b4a-jtb__readings ul { margin-bottom: 0; }
.b4a-jtb__chapter-image {
    border-radius: 18px;
    margin: 1.25rem 0;
    overflow: hidden;
}
.b4a-jtb__chapter-image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}
.b4a-jtb__answer-first {
    background: #eef7fa;
    border-left: 7px solid var(--jtb-river);
    border-radius: 12px;
    margin: 1.2rem 0;
    padding: 1rem 1.15rem;
}
.b4a-jtb__answer-first p { margin: .35rem 0 0; }
.b4a-jtb__chapter-body {
    column-gap: 2rem;
    columns: 2 340px;
}
.b4a-jtb__chapter-body section {
    break-inside: avoid;
    margin-bottom: 1.1rem;
}

.b4a-jtb__truth-compass {
    background: var(--jtb-cream);
    border-radius: 18px;
    margin: 1.5rem 0;
    padding: 1.2rem;
}
.b4a-jtb__truth-compass > div {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.b4a-jtb__truth-compass article {
    background: #fff;
    border-top: 5px solid var(--jtb-gold);
    border-radius: 12px;
    padding: .85rem;
}
.b4a-jtb__truth-compass p { margin-bottom: 0; }

.b4a-jtb__vocabulary {
    background: #f5f7f0;
    border: 1px solid rgba(102,122,74,.35);
    border-radius: 16px;
    margin: 1.25rem 0;
    padding: 1rem;
}
.b4a-jtb__vocabulary dl {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    margin: 0;
}
.b4a-jtb__vocabulary dl div {
    background: #fff;
    border-radius: 10px;
    padding: .75rem;
}
.b4a-jtb__vocabulary dt { color: var(--jtb-reed); font-weight: 900; }
.b4a-jtb__vocabulary dd { margin: .25rem 0 0; }

.b4a-jtb__activity {
    background: linear-gradient(145deg, #f7fbfc, #eef4e8);
    border: 2px solid rgba(62,120,141,.35);
    box-shadow: none;
}
.b4a-jtb__activity-form fieldset,
.b4a-jtb__assessment fieldset {
    background: #fff;
    border: 1px solid rgba(52,83,106,.24);
    border-radius: 12px;
    margin: 1rem 0;
    padding: 1rem;
}
.b4a-jtb__activity-form legend,
.b4a-jtb__assessment legend {
    color: var(--jtb-storm);
    font-weight: 900;
    padding: 0 .35rem;
}
.b4a-jtb__activity-form fieldset label,
.b4a-jtb__assessment fieldset label {
    align-items: flex-start;
    border-radius: 8px;
    display: flex;
    gap: .6rem;
    margin: .35rem 0;
    min-height: 38px;
    padding: .25rem;
}
.b4a-jtb__activity-form input[type="radio"],
.b4a-jtb__activity-form input[type="checkbox"],
.b4a-jtb__assessment input[type="radio"] {
    flex: 0 0 auto;
    height: 22px;
    margin-top: .1rem;
    width: 22px;
}
.b4a-jtb__select-row,
.b4a-jtb__order-row,
.b4a-jtb__planner label {
    background: #fff;
    border: 1px solid rgba(52,83,106,.22);
    border-radius: 12px;
    display: grid;
    gap: .5rem;
    margin: .8rem 0;
    padding: .9rem;
}
.b4a-jtb__select-row span,
.b4a-jtb__order-row span { font-weight: 800; }
.b4a-jtb__select-row select,
.b4a-jtb__order-row select,
.b4a-jtb__planner textarea {
    border: 2px solid #9aa8af;
    border-radius: 8px;
    max-width: 100%;
    min-height: 46px;
    padding: .55rem;
    width: 100%;
}
.b4a-jtb__feedback {
    background: #fff;
    border-radius: 10px;
    font-weight: 800;
    margin: .75rem 0 0;
    min-height: 2.2rem;
    padding: .45rem .7rem;
}
.b4a-jtb__feedback.is-success { border-left: 6px solid #397548; }
.b4a-jtb__feedback.is-review { border-left: 6px solid #ad6d00; }
.b4a-jtb__privacy-note { font-weight: 800; }
.b4a-jtb__memory-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.b4a-jtb__memory-grid article {
    background: #fff;
    border: 1px solid rgba(52,83,106,.2);
    border-radius: 12px;
    padding: 1rem;
}
.b4a-jtb__memory-grid [data-memory-text].is-hidden {
    filter: blur(7px);
    user-select: none;
}

.b4a-jtb__parent-note,
.b4a-jtb__quiz details,
.b4a-jtb__faqs details,
.b4a-jtb__browser-diagnostics {
    background: var(--jtb-cream);
    border-radius: 12px;
    margin: 1rem 0;
    padding: .7rem 1rem;
}
.b4a-jtb summary { color: var(--jtb-storm); font-weight: 900; min-height: 44px; padding-top: .45rem; }

.b4a-jtb__complete-button.is-complete,
.b4a-jtb [data-complete-activity].is-complete {
    background: var(--jtb-reed);
    border-color: var(--jtb-reed);
}

.b4a-jtb__finale {
    background-color: var(--jtb-storm);
    background-image: linear-gradient(90deg, rgba(31,46,55,.9), rgba(31,46,55,.25)), var(--b4a-finale);
    background-position: center;
    background-size: cover;
    border-radius: var(--jtb-radius);
    color: #fff;
    margin: 2rem 0;
    min-height: 430px;
    padding: clamp(1.4rem, 5vw, 4rem);
}
.b4a-jtb__finale > div { max-width: 650px; }
.b4a-jtb__finale h2 { color: #fff; }
.b4a-jtb__finale blockquote {
    border-left: 6px solid var(--jtb-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.25rem, 3vw, 1.8rem);
    margin: 1.5rem 0 0;
    padding-left: 1rem;
}

.b4a-jtb__print-grid article,
.b4a-jtb__related article {
    background: #fff;
    border: 1px solid rgba(52,83,106,.18);
    border-radius: 14px;
    padding: 1rem;
}
.b4a-jtb__print-grid article { display: flex; flex-direction: column; }
.b4a-jtb__print-grid .b4a-jtb__button { margin-top: auto; }

.b4a-jtb__badges article {
    align-items: center;
    background: #f2f2f2;
    border: 2px dashed #a5a5a5;
    border-radius: 16px;
    display: grid;
    gap: .25rem;
    min-height: 150px;
    padding: 1rem;
    text-align: center;
}
.b4a-jtb__badges article > span { font-size: 2.3rem; }
.b4a-jtb__badges article.is-earned {
    background: #fff7d9;
    border-color: var(--jtb-gold);
    border-style: solid;
    box-shadow: 0 8px 20px rgba(216,154,61,.22);
}
.b4a-jtb__badges article.is-earned small { color: #397548; font-weight: 900; }

.b4a-jtb__print-list {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.b4a-jtb__print-list a {
    background: #fff;
    border: 1px solid rgba(52,83,106,.22);
    border-radius: 10px;
    min-height: 46px;
    padding: .7rem;
}

.b4a-jtb__admin-note {
    background: #fff3cd;
    border: 1px solid #997404;
    padding: .75rem;
}

@media (max-width: 760px) {
    .b4a-jtb { font-size: 16px; }
    .b4a-jtb__hero {
        align-items: flex-end;
        background-position: 62% center;
        min-height: 560px;
    }
    .b4a-jtb__hero-shade {
        background: linear-gradient(0deg, rgba(19,31,39,.92), rgba(19,31,39,.2) 78%);
    }
    .b4a-jtb__hero-copy { padding: 1.25rem; }
    .b4a-jtb__mission-head,
    .b4a-jtb__chapter-header {
        display: block;
    }
    .b4a-jtb__mission-actions { margin-top: .8rem; }
    .b4a-jtb__readings { margin-top: 1rem; }
    .b4a-jtb__chapter-body { columns: auto; }
    .b4a-jtb__preview-banner { top: 0; }
}

@media (max-width: 420px) {
    .b4a-jtb__hero-actions,
    .b4a-jtb__mission-actions { display: grid; }
    .b4a-jtb__hero-actions > *,
    .b4a-jtb__mission-actions > * { width: 100%; }
    .b4a-jtb__card,
    .b4a-jtb__chapter,
    .b4a-jtb__mission-control,
    .b4a-jtb__activity { border-radius: 14px; padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .b4a-jtb *,
    .b4a-jtb *::before,
    .b4a-jtb *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}
.b4a-jtb[data-reduced-motion="1"] *,
.b4a-jtb[data-reduced-motion="1"] *::before,
.b4a-jtb[data-reduced-motion="1"] *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
}

/*
 * v1.0.2 — Blocksy/theme link-color hardening.
 * Some theme link rules can override anchor-based button labels. Keep all
 * adventure buttons readable in every link state without affecting normal links.
 */
.b4a-jtb a.b4a-jtb__button,
.b4a-jtb a.b4a-jtb__button:link,
.b4a-jtb a.b4a-jtb__button:visited,
.b4a-jtb a.b4a-jtb__button:hover,
.b4a-jtb a.b4a-jtb__button:focus,
.b4a-jtb a.b4a-jtb__button:focus-visible,
.b4a-jtb a.b4a-jtb__button:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    text-decoration: none !important;
}

.b4a-jtb .b4a-jtb__button--secondary,
.b4a-jtb .b4a-jtb__button--secondary:link,
.b4a-jtb .b4a-jtb__button--secondary:visited,
.b4a-jtb .b4a-jtb__button--secondary:hover,
.b4a-jtb .b4a-jtb__button--secondary:focus,
.b4a-jtb .b4a-jtb__button--secondary:focus-visible,
.b4a-jtb .b4a-jtb__button--secondary:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}