/* ============================================================
   Panjia Outdoors — Blog theme
   Loaded only on /blog/ pages, on top of /css/style.css.
   Reuses the main site's CSS variables (var(--...)) — no hardcoded
   brand colors. Also re-adds the Bootstrap-style grid + utility
   classes the ezBLOG templates rely on (the main site isn't Bootstrap).
   ============================================================ */

/* ---- Grid scaffolding used by the blog templates ---- */
.row { display: block; }
.col-12 { width: 100%; }

/* ---- Utility classes the templates use (Bootstrap-style) ---- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.d-inline-block { display: inline-block; }
.m-0 { margin: 0 !important; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mr-3 { margin-right: 1rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.img-fluid,
.img-responsive { max-width: 100%; height: auto; }

/* ============================================================
   Shared page frame (single post + listing)
   ============================================================ */
#blog-details,
#blog-listing {
    width: 100%;
    padding: calc(var(--nav-height) + 3rem) 1.25rem var(--spacing-xxl);
    background: var(--color-bg-warm-soft);
    color: var(--color-text);
    font-family: var(--font-family);
    min-height: 60vh;
}

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

/* ============================================================
   Single post
   ============================================================ */
#blog-details .custom_blog_html h1 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-extrabold);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.12;
    color: var(--color-text);
    margin: 0.4rem 0 1.25rem;
}

#blog-details .sub_heading {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.5;
    color: var(--color-accent);
    margin: 0 0 1.5rem;
    letter-spacing: 0.2px;
}

#blog-details .img-thumbnail,
#blog-details .custom_blog_html img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 0 0 2rem;
    border: 1px solid var(--color-border);
}

#blog-details .custom_blog_html h2,
#blog-details .custom_blog_html h3 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1.25;
    margin: 2.25rem 0 0.75rem;
}
#blog-details .custom_blog_html h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
#blog-details .custom_blog_html h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

#blog-details .custom_blog_html p,
#blog-details .custom_blog_html li {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text-light);
    margin: 0 0 1.15rem;
}

#blog-details .custom_blog_html ul,
#blog-details .custom_blog_html ol {
    margin: 0 0 1.4rem;
    padding-left: 1.4rem;
}
#blog-details .custom_blog_html li { margin-bottom: 0.5rem; }

#blog-details .custom_blog_html a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#blog-details .custom_blog_html a:hover { color: var(--color-accent-hover); }

#blog-details .custom_blog_html strong { color: var(--color-text); font-weight: var(--font-weight-bold); }

#blog-details .custom_blog_html blockquote {
    margin: 1.75rem 0;
    padding: 0.5rem 0 0.5rem 1.4rem;
    border-left: 3px solid var(--color-accent);
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--color-text);
    font-style: italic;
}

/* ============================================================
   Listing (/blog/)
   ============================================================ */
.blog_page_heading {
    font-family: var(--font-display);
    font-weight: var(--font-weight-extrabold);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    color: var(--color-text);
    margin: 0 0 1.75rem;
    text-align: center;
}

#blog_list_front,
#blog_list_front tbody,
#blog_list_front tr,
#blog_list_front td {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
}

.blog_list {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.75rem;
    margin-bottom: 1.75rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.blog_list:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(28, 29, 29, 0.10);
}

.blog_list .main_heading {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: clamp(1.3rem, 2.4vw, 1.65rem);
    line-height: 1.2;
    margin: 0 0 0.5rem;
}
.blog_list .main_heading a { color: var(--color-text); text-decoration: none; }
.blog_list .main_heading a:hover { color: var(--color-accent); }

.blog_list .sub_heading {
    font-size: 1rem;
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
    margin: 0 0 1rem;
}

.blog_list .imgthumbnail_wr img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.blog_list p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0 0 1.25rem;
}

.listing-button {
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-bg-white);
    background: var(--color-accent);
    border: none;
    border-radius: 6px;
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.listing-button:hover { background: var(--color-accent-hover); }
.blog-list-button a { text-decoration: none; }

/* ---- Pagination controls ---- */
#blog-listing hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }

.btn-secondary {
    display: inline-block;
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: 0.9rem;
    color: var(--color-bg-white);
    background: var(--color-secondary);
    border: none;
    border-radius: 6px;
    padding: 0.55rem 1.2rem;
    text-decoration: none;
    cursor: pointer;
}
.btn-secondary:hover { background: var(--color-bg-dark); color: var(--color-bg-white); }

.input-group { display: inline-flex; align-items: center; vertical-align: middle; }
.input-group .form-control {
    font-family: var(--font-family);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    text-align: center;
}
.input-group-append,
.input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--color-text-light);
}
#blog-listing input[type="submit"] {
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    color: var(--color-bg-white);
    background: var(--color-accent);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
#blog-listing input[type="submit"]:hover { background: var(--color-accent-hover); }

@media (max-width: 640px) {
    #blog-details,
    #blog-listing { padding-top: calc(var(--nav-height) + 1.5rem); }
    .blog_list { padding: 1.25rem; }
}