/*
Theme Name: E-Cube Blog
Description: Custom theme for the E-Cube Energy blog, matching the header, footer and typography of the main e-cube.in site.
Author: E-Cube Energy
Version: 1.0.0
Text Domain: ecube-blog
*/

body.blog-body {
    font-family: 'Open Sans', sans-serif;
    color: #19191b;
    background: #ffffff;
}

.blog-wrap h1, .blog-wrap h2, .blog-wrap h3 {
    font-family: 'Sora', sans-serif;
    text-transform: none;
    color: #17252b;
}

/* Sticky footer: footer always sits at the bottom of the viewport on
   short pages, and flows normally after content on long ones — no
   trailing blank space either way. */
.blog-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.blog-wrap footer {
    margin-top: auto;
}

/* The main site's .footerSEc relies on a wave-image div (not used in this
   theme) for top breathing room, and a negative margin-bottom tuned to that
   specific page layout — both dropped here for a self-contained footer. */
.blog-wrap .footerSEc {
    margin-bottom: 0;
    padding-top: 72px;
}

/* The main site hides the Bootstrap hamburger at TWO separate breakpoints
   (768-991px "tablet" and <=767px "mobile") and swaps in a separate
   off-canvas "dlmenu" plugin (jquery.dlmenu.js + a second markup tree) that
   this theme doesn't load — pulling that whole plugin in for a 7-link blog
   nav isn't worth it. Bootstrap's own collapse already works once its toggle
   button is actually visible, so keep it visible across the full range
   where Bootstrap's own navbar-expand-lg switches to collapsed mode. */
@media (max-width: 991px) {
    .blog-wrap .newnavbar .navbar-toggler {
        display: block;
    }
}

/* Circuit-trace tile: a light PCB-style motif (traces + solder-point dots),
   the same idea for both hero types, tuned per background color so it reads
   as texture rather than noise, and never competes with the white heading.
   Two background layers each need their own size/repeat: a one-time gradient
   sheen (cover, no-repeat) under a tiled pattern (130px, repeat). */
.blog-hero {
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.5'%3E%3Cpath d='M12 12H65V65'/%3E%3Cpath d='M65 65H118V118'/%3E%3Cpath d='M12 65V118H65'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.16'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='65' cy='12' r='3'/%3E%3Ccircle cx='65' cy='65' r='3'/%3E%3Ccircle cx='118' cy='65' r='3'/%3E%3Ccircle cx='118' cy='118' r='3'/%3E%3Ccircle cx='12' cy='65' r='3'/%3E%3Ccircle cx='12' cy='118' r='3'/%3E%3Ccircle cx='65' cy='118' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-size: cover, 130px 130px;
}

/* --- listing (index/archive) --- */
.blog-hero {
    background-color: #e31d24;
    color: #fff;
    padding: 48px 0 40px;
}
.blog-hero .container h1 {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin: 0 0 8px;
}
.blog-hero .container p {
    color: rgba(255,255,255,0.9);
    font-size: 1.02rem;
    margin: 0;
    max-width: 640px;
}

.blog-list {
    padding: 48px 0 64px;
}
.blog-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}
.blog-card {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.blog-card .cat {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #e31d24;
    font-weight: 700;
}
.blog-card h2 {
    font-size: 1.22rem;
    line-height: 1.35;
    margin: 4px 0 2px;
}
.blog-card h2 a { color: #17252b; text-decoration: none; }
.blog-card h2 a:hover { color: #e31d24; }
.blog-card .meta {
    font-size: 0.82rem;
    color: #7c8087;
}
.blog-card p.excerpt { color: #4a4a4a; font-size: 0.95rem; margin: 4px 0 6px; }
.blog-card .readmore { color: #e31d24; font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.blog-card .readmore:hover { text-decoration: underline; }

.blog-pagination { margin-top: 44px; display: flex; gap: 10px; justify-content: center; }
.blog-pagination a, .blog-pagination span {
    padding: 8px 14px;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    color: #17252b;
    text-decoration: none;
    font-size: 0.9rem;
}
.blog-pagination .current { background: #e31d24; color: #fff; border-color: #e31d24; }

/* --- single post --- */
.post-hero {
    background-color: #17252b;
    background-image:
        radial-gradient(ellipse 60% 100% at 100% 0%, rgba(227,29,36,0.25), transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.5'%3E%3Cpath d='M12 12H65V65'/%3E%3Cpath d='M65 65H118V118'/%3E%3Cpath d='M12 65V118H65'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='65' cy='12' r='3'/%3E%3Ccircle cx='65' cy='65' r='3'/%3E%3Ccircle cx='118' cy='65' r='3'/%3E%3Ccircle cx='118' cy='118' r='3'/%3E%3Ccircle cx='12' cy='65' r='3'/%3E%3Ccircle cx='12' cy='118' r='3'/%3E%3Ccircle cx='65' cy='118' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-size: cover, 130px 130px;
    color: #fff;
    padding: 44px 0 34px;
}
.post-hero .container { max-width: 760px; }
.post-hero .cat {
    display: inline-block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ff9d92;
    font-weight: 700;
    margin-bottom: 10px;
}
.post-hero h1 {
    color: #fff;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    line-height: 1.25;
    margin: 0 0 14px;
}
.post-hero .meta { color: rgba(255,255,255,0.7); font-size: 0.9rem; }

.post-body-wrap { padding: 48px 0 72px; }
.post-body {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #2c2c2c;
}
.post-body h2 { font-size: 1.4rem; margin: 34px 0 14px; }
.post-body h3 { font-size: 1.15rem; margin: 26px 0 10px; }
.post-body p { margin: 0 0 18px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body a { color: #e31d24; }
.post-body a:hover { color: #a92127; }

.post-body blockquote {
    border-left: 3px solid #e31d24;
    background: #f7f7f7;
    margin: 0 0 18px;
    padding: 14px 20px;
    color: #17252b;
    font-style: normal;
}
.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px;
    font-size: 0.96rem;
}
.post-body table th {
    background: #17252b;
    color: #fff;
    text-align: left;
    padding: 10px 14px;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
}
.post-body table td {
    padding: 10px 14px;
    border-bottom: 1px solid #e7e7e7;
}
.post-body table tr:nth-child(even) td { background: #f7f7f7; }

.post-cta {
    max-width: 720px;
    margin: 8px auto 0;
    background: #fbe9e9;
    padding: 18px 22px;
    border-radius: 4px;
    font-size: 0.98rem;
}
.post-cta .eyebrow {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a92127;
    font-weight: 700;
    margin-bottom: 6px;
}
.post-cta strong { color: #17252b; }

.post-nav-back { max-width: 720px; margin: 24px auto 0; }
.post-nav-back a { color: #e31d24; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.post-nav-back a:hover { text-decoration: underline; }

/* --- inline article image (floated within the body text) --- */
.post-body::after { content: ""; display: table; clear: both; }
.post-inline-image {
    float: right;
    width: 300px;
    max-width: 40%;
    margin: 4px 0 16px 26px;
}
.post-inline-image img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}
.post-inline-image figcaption {
    font-size: 0.78rem;
    color: #7c8087;
    margin-top: 6px;
    line-height: 1.4;
}

/* --- previous/next article widget --- */
.post-adjacent-nav {
    max-width: 720px;
    margin: 48px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-top: 1px solid #e7e7e7;
    padding-top: 32px;
}
.adjacent-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.adjacent-link:hover {
    border-color: #e31d24;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.adjacent-link.next { text-align: right; align-items: flex-end; }
.adjacent-link .dir {
    font-family: 'Sora', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #e31d24;
    font-weight: 600;
}
.adjacent-link .title {
    font-size: 0.98rem;
    line-height: 1.4;
    color: #17252b;
    font-weight: 600;
}
.adjacent-link.placeholder { visibility: hidden; }

/* --- listing thumbnails --- */
.blog-card .thumb {
    margin: -26px -24px 4px;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    height: 130px;
    background: #f4f1f1;
}
.blog-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .blog-card-grid { grid-template-columns: 1fr; }
    .post-adjacent-nav { grid-template-columns: 1fr; }
    .adjacent-link.next { text-align: left; align-items: flex-start; }
    .post-inline-image { float: none; width: 100%; max-width: 100%; margin: 0 0 20px; }
}