/* ===============================
   Seeds of Hope – site styles
   =============================== */

/* ===== Home hero (leave behavior unchanged) ===== */
.hero{
    position:relative;
    min-height:min(90vh,1000px);
    display:grid;
    place-items:center;
    text-align:center;
    color:#f9f9f9;
    background-image:url("/static/media/sohm.png");
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    background-color:#000;
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(120% 90% at 50% 60%,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.75) 100%);
}
.hero-inner{position:relative; padding:2rem; max-width:980px; z-index:1;}
.hero-title{font-size:clamp(2rem,6vw,4rem); font-weight:800; letter-spacing:.03em; margin:0 0 .25rem; text-shadow:0 3px 16px rgba(0,0,0,.6);}
.hero-subtitle{font-size:clamp(1rem,2.8vw,1.5rem); opacity:.95; margin-bottom:1.25rem;}
.hero-aria{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.section{padding:3rem 1.25rem; max-width:1100px; margin:0 auto;}

/* ===== Utility to break out of .container to true full-bleed ===== */
.fullbleed{
    display:block;
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
}

/* ===== Blog listing hero (full width, bottom 50% of sun.jpg) ===== */
.blog-hero-banner{
    position:relative;
    min-height:clamp(260px,45vh,520px);
    background-image:url("/static/media/sun.jpg");
    background-repeat:no-repeat;
    /* Fill the entire width of the viewport */
    background-size:cover;
    /* Keep the crop anchored to the lower part of the image */
    background-position:center bottom;
}

.blog-hero-banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
}

.blog-hero-inner{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:2rem 0 2.5rem;
}

.blog-hero-title{
    color:#fff;
    text-shadow:0 2px 4px rgba(0,0,0,.45);
    margin-bottom:.5rem;
}

.blog-hero-subtitle{
    color:rgba(255,255,255,.88);
    text-shadow:0 1px 2px rgba(0,0,0,.35);
    margin:0;
}


/* ===== Cards on listing ===== */
.blog-card img{object-fit:cover; max-height:200px;}
.blog-card .card-img-top{border-top-left-radius:.5rem; border-top-right-radius:.5rem;}
.blog-card .card-body{padding-bottom:.75rem;}
.blog-card:hover{transform:translateY(-2px); transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 .5rem 1rem rgba(0,0,0,.08);}

/* ===== Post detail – persistent back bar ===== */
.post-backbar{
    position:sticky;
    top:0;
    z-index:1030;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(6px);
    border-bottom:1px solid #e5e7eb;
}
.post-backbar .container{display:flex; align-items:center; gap:.75rem; padding:.5rem 0;}
.post-backbar .btn{white-space:nowrap;}
@media (prefers-reduced-transparency: reduce){
    .post-backbar{background:#fff;}
}

/* ===== Post detail typography (unchanged) ===== */
.blog-article{max-width:900px;}
.blog-article .display-5{letter-spacing:-.01em;}
.content{line-height:1.85; font-size:1.125rem; color:#1f2937;}
@supports (font-variation-settings: normal){
    .content{font-family:ui-serif, Georgia, "Times New Roman", serif;}
}
.content h2,.content h3,.content h4{margin-top:1.6rem; margin-bottom:.6rem; font-weight:700;}
.content p{margin:0 0 1rem;}
.content blockquote{border-left:4px solid #df9600; padding:.5rem 1rem; margin:1.2rem 0; color:#4b5563; background:#fffaf0; border-radius:.25rem;}
.content code{background:#f3f4f6; padding:.15rem .35rem; border-radius:.25rem; font-size:.95em;}
.content pre{background:#0b1020; color:#e5e7eb; padding:1rem 1.2rem; border-radius:.5rem; overflow:auto; box-shadow:0 1px 2px rgba(0,0,0,.06);}
.content pre code{background:transparent; padding:0;}
/* ensure drop-cap never affects titles */
.blog-article h1,.blog-article .display-5{text-align:left; letter-spacing:normal; word-spacing:normal;}
.blog-article h1::first-letter,.blog-article .display-5::first-letter{float:none; font-size:inherit; line-height:inherit; padding:0; margin:0;}