/* Home page — "classic publisher" look: navy, gold, cream, serif headings */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@400;600&display=swap');

.bf-home {
    --bf-navy: #13294b;
    --bf-navy-deep: #0b1a31;
    --bf-gold: #d9a93b;
    --bf-gold-dark: #b98a22;
    --bf-cream: #f7f2e8;
    --bf-paper: #fbf8f2;
    --bf-ink: #1f2430;
    --bf-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --bf-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-family: var(--bf-sans);
    color: var(--bf-ink);
    background: var(--bf-paper);
}

.bf-home h1,
.bf-home h2,
.bf-home h3 {
    font-family: var(--bf-serif);
    font-weight: 700;
}

/* ---------- Buttons ---------- */
.bf-btn-gold {
    background: linear-gradient(180deg, #e6b94d, var(--bf-gold));
    border: 1px solid var(--bf-gold-dark);
    color: #1b1b1b;
    font-weight: 600;
    padding: 0.65rem 1.75rem;
    border-radius: 0.35rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.bf-btn-gold:hover,
.bf-btn-gold:focus {
    background: var(--bf-gold-dark);
    border-color: var(--bf-gold-dark);
    color: #111;
}

.bf-btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    font-weight: 500;
    padding: 0.65rem 1.5rem;
    border-radius: 0.35rem;
}
.bf-btn-outline:hover,
.bf-btn-outline:focus {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* ---------- Hero ---------- */
.bf-hero {
    position: relative;
    color: #fff;
    /* Drop a photo at /images/home-hero.jpg (library/bookshelf works well).
       Until then the gradient + navy carries it. */
    background:
            linear-gradient(90deg, rgba(11, 26, 49, 0.94) 0%, rgba(11, 26, 49, 0.75) 45%, rgba(11, 26, 49, 0.25) 100%),
            url('/images/home-hero.jpg') center right / cover no-repeat,
            radial-gradient(ellipse at 80% 40%, #3a4f73 0%, var(--bf-navy) 55%, var(--bf-navy-deep) 100%);
    /* top padding clears the half of the logo that hangs below the nav */
    padding: 7.5rem 0 4.5rem;
}

.bf-hero__eyebrow {
    font-family: var(--bf-serif);
    font-style: italic;
    font-size: 0.9rem;
    color: #e9d39c;
    margin-bottom: 1rem;
}

.bf-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.15;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.bf-rule {
    display: block;
    width: 4.5rem;
    height: 3px;
    background: var(--bf-gold);
    margin-bottom: 1.5rem;
}

.bf-hero__lead {
    font-size: 1.2rem;
    line-height: 1.55;
    color: #e8ecf3;
    max-width: 34rem;
    margin-bottom: 2rem;
}

/* ---------- Series band ---------- */
.bf-series {
    background: var(--bf-cream);
    border-bottom: 1px solid #e6dcc7;
    padding: 2rem 0 1.75rem;
    text-align: center;
}

.bf-series__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    font-family: var(--bf-serif);
    font-size: 1.35rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bf-navy);
}

.bf-series__line {
    flex: 0 1 9rem;
    height: 1px;
    background: var(--bf-gold);
}

.bf-series__tag {
    background: var(--bf-navy);
    color: #fff;
    padding: 0.35rem 1.25rem;
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}

.bf-series__sub {
    font-family: var(--bf-serif);
    font-style: italic;
    color: #3d3d3d;
    margin: 0.85rem 0 0;
}

/* ---------- Section heads ---------- */
.bf-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.bf-section-head h2 {
    font-size: 1.9rem;
    color: var(--bf-ink);
    margin: 0;
}

.bf-link-arrow {
    color: var(--bf-navy);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--bf-navy);
    padding-bottom: 2px;
}
.bf-link-arrow:hover {
    color: var(--bf-gold-dark);
    border-color: var(--bf-gold-dark);
}

/* ---------- Featured titles ---------- */
.bf-featured {
    padding: 3rem 0 3.5rem;
    background: var(--bf-paper);
}

/* BookList::Render markup is reused as-is; these just dress up its covers/titles */
.bf-featured__grid img {
    width: 100%;
    height: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bf-featured__grid a:hover img {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}
.bf-featured__grid a {
    color: var(--bf-ink);
    text-decoration: none;
}
.bf-featured__grid h3,
.bf-featured__grid h4,
.bf-featured__grid h5,
.bf-featured__grid .card-title {
    font-family: var(--bf-serif);
    font-size: 1rem;
    margin-top: 0.75rem;
}
.bf-featured__grid .card {
    border: 0;
    background: transparent;
}

/* ---------- Audience strip ---------- */
.bf-audience {
    background: #f1ebde;
    border-top: 1px solid #e6dcc7;
    border-bottom: 1px solid #e6dcc7;
    padding: 2rem 0;
}

.bf-audience__item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 0.5rem 2rem;
}
.bf-audience__item + .bf-audience__item {
    border-left: 1px solid #d8c69d;
}

.bf-audience__item > .bi {
    font-size: 2.75rem;
    line-height: 1;
    color: var(--bf-gold-dark);
}

.bf-audience__item h3 {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}
.bf-audience__item h3 a {
    color: var(--bf-ink);
    text-decoration: none;
}
.bf-audience__item h3 a:hover {
    color: var(--bf-gold-dark);
}
.bf-audience__item p {
    margin: 0;
    color: #444;
}

/* ---------- More (old tabs) ---------- */
.bf-more {
    padding: 3rem 0;
    background: var(--bf-paper);
}

.bf-tabs {
    gap: 0.5rem;
    border-bottom: 1px solid #e0d6c2;
}
.bf-tabs .nav-link {
    font-family: var(--bf-serif);
    color: var(--bf-navy);
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 0.6rem 1rem;
    background: none;
}
.bf-tabs .nav-link:hover {
    color: var(--bf-gold-dark);
}
.bf-tabs .nav-link.active {
    color: var(--bf-navy);
    border-bottom-color: var(--bf-gold);
    font-weight: 700;
}

.bf-site-banner {
    width: 100%;
    border-radius: 0.35rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.bf-more .accordion-button:not(.collapsed) {
    background: var(--bf-cream);
    color: var(--bf-navy);
    box-shadow: none;
}
.bf-more .accordion-button {
    font-family: var(--bf-serif);
}

/* ---------- Newsletter ---------- */
.bf-newsletter {
    background:
            linear-gradient(180deg, rgba(19, 41, 75, 0.96), rgba(11, 26, 49, 0.98)),
            var(--bf-navy);
    color: #fff;
    padding: 3.25rem 0 3.5rem;
}

.bf-newsletter h2 {
    font-weight: 400;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.bf-newsletter p {
    color: #d6deea;
    margin-bottom: 1.5rem;
}

.bf-newsletter__form {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    max-width: 36rem;
    margin: 0 auto;
}
.bf-newsletter__form .form-control {
    padding: 0.7rem 1rem;
    border-radius: 0.35rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    /* logo no longer hangs at this width (see top_menu.php) */
    .bf-hero {
        padding-top: 3.5rem;
    }
}

@media (max-width: 767.98px) {
    .bf-audience__item + .bf-audience__item {
        border-left: 0;
        border-top: 1px solid #d8c69d;
    }
    .bf-audience__item {
        padding: 1rem;
    }
    .bf-series__title {
        font-size: 1rem;
        letter-spacing: 0.1em;
        gap: 0.6rem;
    }
    .bf-series__line {
        display: none;
    }
    .bf-newsletter__form {
        flex-direction: column;
    }
}