/* =====================================================================
   Premium Medication Refills — Blog content styles
   The site shell (header, footer, fonts, colors, base typography) comes
   from /css/style.css. This file only styles the blog-specific body:
   the post listing, the single-post layout, pagination and share row.
   It reuses the main site's CSS variables so everything stays on-brand.
   ===================================================================== */

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

/* Match the main site's content width */
#blog-listing.container,
#blog-details.container {
    max-width: var(--maxw, 1200px);
}

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

/* ---------- Single post ---------- */
#blog-details .custom_blog_html h1 {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.15;
    color: var(--ink, #0e2329);
    margin-bottom: .4em;
}

#blog-details .custom_blog_html h2.sub_heading {
    font-family: var(--font-body, sans-serif);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--slate, #4d626c);
    margin: 0 0 1.4rem;
}

/* Clinical reviewer byline (E-E-A-T trust line) */
#blog-details .custom_blog_html .blog-reviewed {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-body, sans-serif);
    font-size: .9rem;
    line-height: 1.3;
    color: var(--slate, #4d626c);
    margin: 0 0 1.6rem;
    padding: .6rem .9rem;
    background: var(--teal-50, #eef7f8);
    border: 1px solid var(--line, #e2e0d6);
    border-radius: var(--radius-sm, 8px);
}

#blog-details .custom_blog_html .blog-reviewed strong {
    color: var(--ink, #0e2329);
    font-weight: 700;
}

#blog-details .custom_blog_html .blog-reviewed svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--teal-600, #1c7681);
}

#blog-details .custom_blog_html img,
.custom_blog_html img.img-thumbnail {
    width: 100%;
    height: auto;
    border-radius: var(--radius, 16px);
    border: 1px solid var(--line, #e2e0d6);
    box-shadow: var(--shadow-sm);
    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 {
    font-family: var(--font-display, sans-serif);
    color: var(--ink, #0e2329);
    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(--teal-700, #14525f);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#blog-details .custom_blog_html a:hover { color: var(--gold-600, #9a6512); }

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

/* ---------- Breadcrumb (optional, off by default in settings) ---------- */
.breadcrumb {
    background: transparent;
    max-width: var(--maxw, 1200px);
    margin: 0 auto;
    padding: 1rem var(--gutter, 1.5rem) 0;
    color: var(--slate, #4d626c);
    font-size: .9rem;
    font-weight: 600;
}
.breadcrumb a { color: var(--teal-700, #14525f); }

/* ---------- Listing page ---------- */
.blog_page_heading {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--ink, #0e2329);
    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: var(--paper, #fff);
    border: 1px solid var(--line, #e2e0d6);
    border-radius: var(--radius, 16px);
    box-shadow: var(--shadow-sm);
    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);
    transform: translateY(-2px);
}

#blog_list_front .blog_list h3.main_heading {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    margin: 0 0 .25rem;
}

#blog_list_front .blog_list h3.main_heading a {
    color: var(--teal-900, #0c2a33);
}
#blog_list_front .blog_list h3.main_heading a:hover {
    color: var(--gold-600, #9a6512);
}

#blog_list_front .blog_list h4.sub_heading {
    font-family: var(--font-body, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate, #4d626c);
    margin: 0 0 1rem;
}

#blog_list_front .blog_list .imgthumbnail_wr {
    max-height: 320px;
    overflow: hidden;
    border-radius: var(--radius-sm, 8px);
    margin-bottom: 1.1rem;
}

#blog_list_front .blog_list .imgthumbnail_wr img {
    width: 100%;
    height: auto;
}

#blog_list_front .blog_list p {
    color: var(--slate, #4d626c);
    margin: 0 0 1.1rem;
}

/* ---------- Buttons (reuse site button language) ---------- */
.listing-button {
    display: inline-block;
    background: var(--teal-600, #1c7681);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .6rem 1.4rem;
    font-family: var(--font-body, sans-serif);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: background .2s ease;
}
.listing-button:hover { background: var(--teal-700, #14525f); }
.blog-list-button a:hover { text-decoration: none; }

/* ---------- Pagination ----------
   index.php uses Bootstrap 4 utility class names, but the blog now loads
   Bootstrap 5 (to match the main site). Re-add the few utilities the
   markup relies on, and theme the controls to the site palette. */
#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 var(--line, #e2e0d6); }

#blog-listing .btn-secondary {
    background: var(--teal-600, #1c7681);
    border-color: var(--teal-600, #1c7681);
    color: #fff;
    border-radius: 999px;
    padding: .55rem 1.3rem;
    font-weight: 700;
}
#blog-listing .btn-secondary:hover {
    background: var(--teal-700, #14525f);
    border-color: var(--teal-700, #14525f);
    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 var(--line, #e2e0d6); }
#blog-listing .input-group input[type="submit"] {
    background: var(--teal-600, #1c7681); color: #fff; border: 0;
    border-radius: 999px; padding: .4rem 1rem; font-weight: 700; margin-left: .5rem;
}