/* =====================================================================
   TruTop Roof — Blog content styles
   The site shell (utility bar, navbar, footer, fonts, base typography)
   comes from /css/styles.css. This file only styles the blog body:
   the post listing, single-post layout, pagination and share row,
   reusing the main site's CSS variables to stay on-brand.
   ===================================================================== */

/* ---------- Layout wrappers ---------- */
#blog-listing,
#blog-details {
    padding-top: clamp(2.2rem, 5vw, 3.6rem);
    padding-bottom: clamp(2.6rem, 6vw, 4.5rem);
}

.custom_blog_html {
    max-width: 820px;
    margin: 0 auto;
}

/* ---------- Single post ---------- */
#blog-details .custom_blog_html h1 {
    color: var(--navy, #213d4f);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    margin-bottom: .5em;
}

#blog-details .custom_blog_html h2.sub_heading {
    font-family: var(--bs-body-font-family, sans-serif);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--muted, #5c6b74);
    margin: 0 0 1.4rem;
}

#blog-details .custom_blog_html img,
.custom_blog_html img.img-thumbnail {
    width: 100%;
    height: auto;
    border-radius: var(--radius, 16px);
    border: 1px solid rgba(20, 40, 55, .10);
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(20,40,55,.08));
    margin: 0 0 1.8rem;
    padding: 0;
}

#blog-details .custom_blog_html h2,
#blog-details .custom_blog_html h3,
#blog-details .custom_blog_html h4 {
    color: var(--navy, #213d4f);
    margin-top: 1.6em;
}

#blog-details .custom_blog_html ul,
#blog-details .custom_blog_html ol { padding-left: 1.4rem; margin: 0 0 1.2rem; }
#blog-details .custom_blog_html li { margin-bottom: .45rem; }
#blog-details .custom_blog_html a { color: var(--g2-ink, #b83380); }

/* ---------- Share row ---------- */
.social_share_option { margin-bottom: 1.8rem !important; }

/* ---------- Breadcrumb (optional, off by default in settings) ---------- */
.breadcrumb {
    background: transparent;
    max-width: 1140px;
    margin: 0 auto;
    padding: 1rem 0 0;
    color: var(--muted, #5c6b74);
    font-size: .9rem;
}
.breadcrumb a { color: var(--navy, #213d4f); }

/* ---------- Listing page ---------- */
.blog_page_heading {
    color: var(--navy, #213d4f);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin-bottom: 1.6rem;
}

.blog_listing_front #blog_list_front { width: 100%; border-collapse: collapse; }
.blog_listing_front #blog_list_front td { padding: 0 0 1.6rem; border: 0; }

#blog_list_front .blog_list {
    background: #fff;
    border: 1px solid rgba(20, 40, 55, .10);
    border-radius: var(--radius, 16px);
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(20,40,55,.08));
    padding: clamp(1.2rem, 3vw, 1.8rem);
    transition: box-shadow .25s ease, transform .25s ease;
}
#blog_list_front .blog_list:hover {
    box-shadow: var(--shadow-md, 0 12px 30px rgba(20,40,55,.12));
    transform: translateY(-2px);
}
#blog_list_front .blog_list h3.main_heading { font-size: clamp(1.3rem, 2.5vw, 1.6rem); margin: 0 0 .25rem; }
#blog_list_front .blog_list h3.main_heading a { color: var(--navy, #213d4f); }
#blog_list_front .blog_list h3.main_heading a:hover { color: var(--g2-ink, #b83380); }
#blog_list_front .blog_list h4.sub_heading {
    font-family: var(--bs-body-font-family, sans-serif);
    font-size: 1rem; font-weight: 500; color: var(--muted, #5c6b74); margin: 0 0 1rem;
}
#blog_list_front .blog_list .imgthumbnail_wr {
    max-height: 320px; overflow: hidden; border-radius: var(--radius-sm, 10px); margin-bottom: 1.1rem;
}
#blog_list_front .blog_list .imgthumbnail_wr img { width: 100%; height: auto; }
#blog_list_front .blog_list p { color: var(--muted, #5c6b74); margin: 0 0 1.1rem; }

/* ---------- Buttons (reuse the site's gradient brand button) ---------- */
.listing-button {
    display: inline-block;
    background: var(--brand-gradient, linear-gradient(100deg,#f5973f,#c83f8e 52%,#6a3fa0));
    color: #fff; border: 0; border-radius: 999px;
    padding: .6rem 1.5rem; font-weight: 600; font-size: .95rem; cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.listing-button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(200,63,142,.32); color: #fff; }
.blog-list-button a:hover { text-decoration: none; }

/* ---------- Pagination ----------
   index.php uses Bootstrap 4 utility names; the site is on Bootstrap 5,
   so re-add the few utilities the markup needs and theme the controls. */
#blog-listing .text-right { text-align: right; }
#blog-listing .d-inline-block { display: inline-block; }
#blog-listing .mr-3 { margin-right: 1rem; }
#blog-listing .ml-3 { margin-left: 1rem; }
#blog-listing .ml-2 { margin-left: .5rem; }
#blog-listing hr { margin: 2.2rem 0 1.4rem; border: 0; border-top: 1px solid rgba(20,40,55,.12); }

#blog-listing .btn-secondary {
    background: var(--navy, #213d4f); border-color: var(--navy, #213d4f);
    color: #fff; border-radius: 999px; padding: .55rem 1.3rem; font-weight: 600;
}
#blog-listing .btn-secondary:hover { background: var(--navy-soft, #2f536a); border-color: var(--navy-soft, #2f536a); color: #fff; }
#blog-listing .input-group { max-width: 240px; margin-left: auto; margin-top: .8rem; }
#blog-listing .input-group .form-control,
#blog-listing .input-group .input-group-text { border: 1px solid rgba(20,40,55,.18); }
#blog-listing .input-group input[type="submit"] {
    background: var(--navy, #213d4f); color: #fff; border: 0;
    border-radius: 999px; padding: .4rem 1rem; font-weight: 600; margin-left: .5rem;
}