/* ==========================================================================
   kine — modern reading theme
   Layered on top of the archived purity_iii / Bootstrap 3 template.
   Loaded last, so it only overrides presentation; no content is changed.
   ========================================================================== */

:root {
    --kine-green: #2e9e4f;
    --kine-green-dark: #1e7a3a;
    --kine-ink: #20281f;
    --kine-muted: #5b6b5d;
    --kine-card: rgba(255, 255, 255, .96);
    --kine-line: rgba(46, 158, 79, .22);
    --kine-radius: 16px;
    --kine-shadow: 0 14px 40px rgba(24, 60, 34, .13);
}

/* --- page background: soft renewable-energy imagery ---------------------- */
html {
    background-color: #eef3ea;
}

body {
    background-color: #eef3ea;
    background-image:
		url("images/kine-renewable-bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    color: var(--kine-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.7;
    /* keep long words, URLs and e-mail addresses inside their boxes */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- homepage masthead --------------------------------------------------- */
.page-masthead {
    background: transparent;
}

.page-masthead .row-feature > .container {
    background: transparent;
    border-radius: var(--kine-radius);
    padding: 28px 30px;
    margin-top: 26px;
    margin-bottom: 4px;
}

/* --- main content panel -------------------------------------------------- */
#t3-mainbody {
    margin-top: 26px;
    margin-bottom: 44px;
}

#t3-content {
    background: transparent;
    border-radius: var(--kine-radius);
    padding: 32px 36px;
}

/* --- article typography -------------------------------------------------- */
.article-header {
    border-bottom: 1px solid var(--kine-line);
    padding-bottom: 12px;
    margin-bottom: 22px;
}

.article-title {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.article-title a {
    color: var(--kine-ink);
    text-decoration: none;
    transition: color .15s ease;
}

.article-title a:hover,
.article-title a:focus {
    color: var(--kine-green);
    text-decoration: none;
}

.article-content,
.article-intro {
    font-size: 16px;
    color: var(--kine-ink);
}

.article-content p,
.article-intro p {
    line-height: 1.8;
    margin-bottom: 1.05em;
}

.article-content h2,
.article-content h3,
.article-content h4,
.article-intro h2,
.article-intro h3,
.article-intro h4 {
    color: var(--kine-green-dark);
    font-weight: 600;
    margin-top: 1.4em;
    margin-bottom: .6em;
}

.article-content a,
.article-intro a {
    color: var(--kine-green-dark);
}

.article-content a:hover,
.article-intro a:hover {
    color: var(--kine-green);
}

/* make oversized inline images behave inside the reading column */
.article-content img,
.article-intro img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px;
}

.article-content > p > img,
.article-intro > p > img,
.article-content figure img,
.article-intro figure img {
    box-shadow: 0 8px 24px rgba(24, 60, 34, .16);
}

.article-content blockquote {
    border-left: 4px solid var(--kine-green);
    background: rgba(46, 158, 79, .06);
    border-radius: 0 10px 10px 0;
    padding: 14px 20px;
    color: var(--kine-muted);
}

/* --- article cards in listings ------------------------------------------- */
.blog-featured .item,
.com-content-category-blog .leading,
.blog .item {
    background: rgba(255, 255, 255, .45);
    border: 1px solid rgba(46, 158, 79, .14);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(24, 60, 34, .08);
    padding: 20px 22px;
    margin-bottom: 24px;
    transition: transform .16s ease, box-shadow .16s ease;
}

.blog-featured .item:hover,
.com-content-category-blog .leading:hover,
.blog .item:hover {
    background: rgba(255, 255, 255, .62);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(24, 60, 34, .15);
}

.blog-featured .item-image img,
.com-content-category-blog .item-image img {
    border-radius: 10px;
}

/* --- start-page packing: fill the vertical white space -------------------- */
/* The archived Joomla layout groups cards into fixed "row" wrappers, so a
   short card leaves a gap until the tallest card of its row finishes. Flow
   every card in a single column stream instead, so each card starts right
   after the previous one. */
.blog-featured {
    column-count: 3;
    column-gap: 24px;
}

/* dissolve the fixed per-row wrappers so all cards share one stream */
.blog-featured .items-row {
    display: contents;
}

.blog-featured .items-row::before,
.blog-featured .items-row::after {
    display: none;
    content: none;
}

/* neutralise the Bootstrap float grid so the columns can pack the cards */
.blog-featured > .item,
.blog-featured .items-row > .item {
    float: none !important;
    width: auto !important;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

@media (max-width: 991px) {
    .blog-featured {
        column-count: 2;
    }
}

@media (max-width: 767px) {
    .blog-featured {
        column-count: 1;
    }
}

/* --- infinite scroll ----------------------------------------------------- */
/* Once the scroll script has taken over, the archived "load more" pagination
   bar is hidden; the older pages are appended automatically while scrolling. */
.kine-infinite .pagination-wrap {
    display: none;
}

/* --- footer -------------------------------------------------------------- */
#t3-footer {
    border-top: 1px solid var(--kine-line);
}

#t3-footer .t3-copyright {
    background: transparent;
    color: var(--kine-muted);
}

/* --- small screens ------------------------------------------------------- */
@media (max-width: 767px) {
    #t3-content {
        padding: 20px 18px;
        border-radius: 12px;
    }

    .page-masthead .row-feature > .container {
        padding: 20px 18px;
    }

    .blog-featured .item,
    .com-content-category-blog .leading,
    .blog .item {
        padding: 16px 16px;
    }
}