.blog--homebanner { background-color: #000; color: #FFF; padding: 30px 0; }
.blog--homebanner h1 { color: #83C12E; font-size: 2.5rem !important; margin-top: unset; margin-bottom: 10px; }
.blog--homebanner > div { font-size: 1.5rem; }

.blog-body .section {display: flex; flex-wrap: wrap; }

@media screen and (max-width: 599px) {
.blog--homebanner > div { font-size: 1rem; }
}

/* ============================================================
   Home banner (blog index H1 + intro text)
   Not present in the legacy blog — styled to match the theme
   (black band from main.css, centred content, white text).
   ============================================================ */
.scrollsection.header { padding: 45px 0 !important; text-align: center; }
.scrollsection.header .blog-banner { max-width: 820px; margin: 0 auto; padding: 0 15px; }
.scrollsection.header h1 { color: #fff; font-size: 2.6em !important; line-height: 1.15; font-weight: 700; margin: 0; }
.scrollsection.header .blog-banner__intro { color: #fff; font-size: 1.15em; line-height: 1.5; margin: 14px auto 0; max-width: 720px; opacity: 0.95; }

@media screen and (max-width: 767px) {
    .scrollsection.header { padding: 32px 0 !important; }
    .scrollsection.header h1 { font-size: 1.9em !important; }
    .scrollsection.header .blog-banner__intro { font-size: 1.05em; }
}

.post .post-info {
    font-size: 13px;
    color: #000;
}



/* --- Blog filter panel (slidefilter style) --- */
.bl-filter-panel { background-color: #fff; height: 100%; border-left: 1px solid #d9d9d9; }
.bl-filter-panel .filter-body.main { padding: 45px 15px 30px 40px; display: flex; flex-direction: column; }

/* Widget order matches live: Search, Category, Posts by Month, then Home/Login.
   Recent posts and pages are not shown on live. */
.bl-filter-panel .widget.search { order: 1; }
.bl-filter-panel .widget.categorylist { order: 2; }
.bl-filter-panel .widget.monthlist { order: 3; }
.bl-filter-panel .widget.administration { order: 4; }
.bl-filter-panel .widget.postlist,
.bl-filter-panel .widget.pagelist { display: none; }

.bl-filter-panel .widget { padding: 0; margin-bottom: 0; }
.bl-filter-panel .widget:last-child { border-bottom: none; }

.bl-filter-panel .widget-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 3px 16px 0px; margin: 0; font-weight: 600; font-size: 16px; line-height: 1.2; cursor: pointer; user-select: none; }
.bl-filter-panel .widget-header::after { content: ""; display: inline-block; width: 8px; height: 8px; border-left: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: rotate(-45deg); transition: transform 200ms ease; flex-shrink: 0; margin-left: 0.75rem; }
.bl-filter-panel .widget.open > .widget-header::after { transform: rotate(135deg); }

.bl-filter-panel .widget-content { display: none; flex-direction: column; gap: 4px; padding-bottom: 16px; }
.bl-filter-panel .widget.open > .widget-content { display: flex; }

.bl-filter-panel .widget-content ul { list-style: none; display: flex; flex-direction: column; gap: 0px; }
.bl-filter-panel .widget-content ul li { padding: 4px 0; }
.bl-filter-panel .widget-content ul li a { font-weight: 500; font-size: 1rem; line-height: 1.4; color: #000 !important; opacity: 0.69; transition: opacity 150ms ease; text-decoration: none !important; }
.bl-filter-panel .widget-content ul li a:hover { opacity: 1; }

.sidebar-wrapper ul li a { font-size: 1em !important; }



.widget {
    padding: 3% 0;
    margin-bottom: 0px;
}

.sidebar-wrapper ul li a{    font-size: 1rem !important;
    color: #4a4a4a !important;
    text-decoration: none !important;
    font-weight: bold;}
.sidebar-wrapper ul li a:hover { color: #83C12E !important; }

a.blogbutton { clear: both; margin: 15px 0 0 0; padding: 0 15px;    text-decoration: none;
    color: #fff !important;
min-height: 55px;
background-color: #000;
width: fit-content;
   display: inline-flex; align-items: center; justify-content: center; 
    border: 0;  text-decoration: none !important; border-radius: 3px; }
a.blogbutton:hover {background-color:#83C12E; color: #fff;}

.post .post-body a:hover, .post .post-tags a:hover { color: #666; }

/* Sidebar search — full-width field with a magnifier icon inside on the right (matches live) */
#searchbox { position: relative; }
#searchbox form { position: relative; margin: 0; }
.widget.search #searchbox input[type=text] { width: 100%; height: 42px; padding: 0 46px 0 14px; border: 1px solid #d7d7d7; border-radius: 3px; background-color: #fff; outline: none; font-size: 14px; box-sizing: border-box; }
.widget.search #searchbox input[type=text]:focus { border-color: #83C12E; }
.widget.search #searchbox #searchbutton { position: absolute; top: 0; right: 0; height: 100%; width: 44px; padding: 0; background: transparent; border: none; cursor: pointer; font-size: 1.2em; line-height: 46px; color: #83C12E; }
.widget.search #searchbox #searchbutton:hover { color: #000; }

.search-page .search-page-searchbox form input[type=submit] { border: none; padding: 0; height: 40px; width: 150px; background-color: #83C12E; color: #fff; border-radius: 25px !important; border: 1px solid #83C12E; font-weight: 700; cursor: pointer; }
.search-page .searchresult a {color: #83C12E; font-weight: 700; text-decoration: none; font-size: 1.2rem;}
.search-page .searchresult a:hover {color: #000;}

.widget ul { list-style: none; }

.search-page .searchpage ul.paging li.active {background-color: #000;}

/* Category / Month filters render as <select> dropdowns (matches live) */
.bl-filter-panel .widget-content select,
.sidebar-wrapper .widget-content select {
    width: 100%; height: 42px; padding: 0 12px; margin-top: 0px;
    border: 1px solid #c3c3c3; border-radius: 3px; background-color: #fff;
    font-size: 14px; color: #333; outline: none; cursor: pointer;
}
.bl-filter-panel .widget-content select:focus,
.sidebar-wrapper .widget-content select:focus { border-color: #83C12E; }

/* Widget titles above each control, in the brand green */
.bl-filter-panel .widget .widget-header { font-size: 1.1em; font-weight: 700; color: #83C12E; }

/* Home / Login as black buttons, side-by-side (row, not the inherited column) */
.bl-filter-panel .widget.administration .widget-content ul { display: flex; flex-direction: row; gap: 10px; list-style: none; margin: 0; padding: 0; }
.bl-filter-panel .widget.administration .widget-content ul li { flex: 1; padding: 0; text-align: center; }
.bl-filter-panel .widget.administration .btn-2 { display: block; background: #000; color: #fff !important; opacity: 1; font-weight: 700; line-height: 46px; border-radius: 3px; text-decoration: none; transition: background 200ms ease; }
.bl-filter-panel .widget.administration .btn-2:hover { background: #83C12E; color: #fff; }

/* --- Desktop: content full-width, widgets in a light-grey band below the posts (matches live) --- */
@media screen and (min-width: 992px) {
    .blog-body .content-wrapper { width: 100% !important; }
    .sidebar-wrapper { width: 100% !important; }
    .bl-filter-togg, .bl-filter-head, .bl-filter-overlay { display: none; }
    /* Full-screen-width grey band (breaks out of the centred .container, like live .blog__search) */
    .bl-filter-panel {
        position: static; border-left: none;
        width: 100vw; margin-left: calc(50% - 50vw); margin-top: 40px;
        background-color: #F7F7F7;
    }
    /* ...with the widgets centred inside, matching the responsive core.css .container widths */
    .bl-filter-panel .filter-body.main {
        position: static; max-height: none; overflow: visible;
        flex-direction: row; flex-wrap: wrap; align-items: end; gap: 30px;
        max-width: 970px; margin: 0 auto; padding: 30px 15px;
    }
    .bl-filter-panel .widget { flex: 1 1 200px; min-width: 180px; padding: 0; margin: 0; }
    .bl-filter-panel .widget > .widget-content { display: block !important; }
    .bl-filter-panel .widget > .widget-header { cursor: default; padding: 0 0 12px; margin: 0; }
    .bl-filter-panel .widget > .widget-header::after { display: none; }
}
/* Band inner content tracks the core.css .container widths at wider breakpoints */
@media screen and (min-width: 1230px) { .bl-filter-panel .filter-body.main { max-width: 1230px; } }
@media screen and (min-width: 1400px) { .bl-filter-panel .filter-body.main { max-width: 1400px; } }

/* --- Mobile sidebar (slide-up bottom sheet) --- */
@media screen and (max-width: 991px) {

    .bl-filter-togg { display: flex;justify-content: space-between; align-items: center; gap: 6px; padding: 0px; height: 50px;  font-size: 16px; font-weight: 600; color: #262121; cursor: pointer; user-select: none; white-space: nowrap; }
    .bl-filter-togg:after { content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    transform: rotate(-45deg);
    transition: transform 200ms ease;
    flex-shrink: 0;
    margin-left: 0.75rem; }
    .bl-filter-togg:hover { background-color: #ebebeb; }

    .sidebar-wrapper { position: static; background-color: #FFF;}
    .bl-filter-panel { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 21; background-color: #fff; border-radius: 15px 15px 0 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease; border-left: none; display: flex; flex-direction: column; }
    .bl-filter-panel.open { max-height: calc(100vh - 90px); opacity: 1; border-bottom: 1px solid #dbdbdb; }

    .bl-filter-head { background-color: #fafafa; padding: 20px 15px 15px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
    .bl-filter-head span { color: #1b1b1b; font-size: 20px; font-weight: 700; }
    .bl-filter-head .close { width: 25px; height: 25px; position: relative; transform: rotate(45deg); cursor: pointer; }
    .bl-filter-head .close::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); width: 2px; height: 100%; border-radius: 10px; background-color: #000; }
    .bl-filter-head .close::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 100%; border-radius: 10px; background-color: #000; }

    .bl-filter-panel .filter-body.main { flex: 1; min-height: 0; overflow-y: auto; padding: 0 15px 30px; }

    
    .bl-filter-panel .widget { border-bottom: 1px solid #000; }
    /* Show every widget expanded in the panel (no accordion) so the search field, dropdowns
       and admin buttons are always visible; keep separators between them but not after the last. */
    .bl-filter-panel .widget > .widget-content { display: block !important; padding: 6px 0 18px; }
    .bl-filter-panel .widget > .widget-header { cursor: default; }
    .bl-filter-panel .widget > .widget-header::after { display: none; }
    /* Search is DOM :last-child (so the base rule strips its border) but is visually first — restore it */
    .bl-filter-panel .widget.search { border-bottom: 1px solid #000; }
    /* Admin (Home/Login) is visually last — no trailing separator; it has no header, so pad its buttons */
    .bl-filter-panel .widget.administration { border-bottom: none; }
    .bl-filter-panel .widget.administration .widget-content { padding-top: 6px; }

    .bl-filter-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; z-index: 20; cursor: pointer; transition: opacity 0.2s ease; }
    .bl-filter-overlay.active { display: block; opacity: 0.5; }

    .blog-body .main-section {display: flex; flex-direction: column; gap: 0px;}
}


/* ============================================================
   My Garment Factory re-skin — header & footer
   Brand palette: green #83C12E, black #000, light grey #f1f1f1
   Utility classes (.txt-c-1/.bg-c-1/.head-style-4 etc.) are ported
   from the live Standard-2015 theme's site.master inline styles.
   ============================================================ */

/* Brand utility classes */
.txt-c-1 { color: #83C12E; }
.txt-c-4, a.txt-c-4 { color: #000000; }
.bg-c-1 { background-color: #83C12E; }
.head-style-4 { border-top: 6px solid #83C12E; }

/* Header */
.bloghead { margin-bottom: 15px; background-color: #fff; }
.bloghead .flex { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; flex-wrap: wrap; gap: 15px; }
.bloghead .logo img { display: block; height: auto; max-width: 240px; }
.bloghead .top-search { display: flex; align-items: center; flex: 1 1 320px; max-width: 655px; }
/* Search box — matches the live site's core.css: single bordered/rounded field with the
   magnifier as a transparent icon-button positioned inside on the right. */
.bloghead .top-search .search--form { position: relative; width: 100%; margin: 7px 0; }
.bloghead .top-search .search--form form { position: relative; margin: 0; }
.bloghead .top-search .field { width: 100%; height: 46px; line-height: 46px; padding: 0 50px 0 15px; border: 1px solid #c3c3c3; border-radius: 3px; outline: none; font-size: 15px; box-sizing: border-box; }
.bloghead .top-search .field:focus { border-color: #83C12E; }
.bloghead .top-search .submit { position: absolute; top: 0; right: 0; height: 100%; width: 45px; display: block; padding: 0; background-color: transparent; border: none; cursor: pointer; font-size: 1.4em; line-height: 46px; text-align: center; }
.bloghead .top-search .submit .txt-c-1 { color: #83C12E; }
.bloghead .top-search .submit:hover .txt-c-1 { color: #000; }

@media screen and (max-width: 767px) {
    .bloghead .flex { display: block; }
    .bloghead .logo { text-align: center; margin-bottom: 12px; }
    .bloghead .logo img { margin: 0 auto; }
    .bloghead .top-search { max-width: none; }
}

/* Footer */
.blogfoot { margin-top: 30px; }
.bg-c-1.padd-15 { padding: 15px; }
.blogfoot .max-w-1200 { max-width: 1200px; margin: 0 auto; }
.blogfoot .flx-bx { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.blogfoot a.txt-c-4 { text-decoration: none; }
.blogfoot a.txt-c-4:hover { text-decoration: underline; }

@media screen and (max-width: 599px) {
    .blogfoot .flx-bx { flex-direction: column; text-align: center; }
}



/* ============================================================
   Post listing — drop-shadow cards in a grid, featured first post
   (adapts the live theme's card design to this template's markup)
   ============================================================ */
/* Grid: 1 col mobile, 2 col tablet, 3 col desktop (matches live repeat(3, minmax(225px,1fr))) */
.posts { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media screen and (min-width: 768px) and (max-width: 991px) {
    .posts { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media screen and (min-width: 992px) {
    .posts { grid-template-columns: repeat(3, minmax(225px, 1fr)); }
}

.post.post-home {
    /* Pin the card base to 16px so the em-based text below resolves the same as the live
       site (browser-default 16px base), regardless of what the external home.css sets.
       This is what keeps the listing font sizes from scaling up beyond live. */
    font-size: 16px;
    background: #fff; border-radius: 6px; box-shadow: 0 12px 25px rgba(0,0,0,0.10);
    overflow: hidden; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    transition: box-shadow 300ms ease, transform 300ms ease;
height:100%;
} 
.post.post-home:hover { box-shadow: 0 18px 34px rgba(0,0,0,0.16); transform: translateY(-3px); }

.post.post-home .post-image { display: block; overflow: hidden; }
.post.post-home .post-image img { width: 100% !important; height: 190px; object-fit: cover; margin: 0 !important; display: block; }

.post.post-home .post-inner { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post.post-home .post-header { margin: 0; padding: 0; border: none; }

/* Title — green link (txt-lk-c-1), bold, hover black (matches live) */
.post.post-home .title { font-weight: 700; font-size: 1.3em; line-height: 1.3; margin: 0 0 15px; min-height: 55px;}
.post.post-home .title a { color: #83C12E; text-decoration: none; }
.post.post-home .title a:hover { color: #000; }

/* Date — grey, normal weight (matches live .post-date color #ababab) */
.post.post-home .post-date-line { color: #ababab; font-size: 13px; font-weight: 400; margin: 0 0 10px; }

/* Snippet — black, bold, larger (matches live .desc txt-c-2) */
.post.post-home .post-snip { margin: 0 0 14px; }
.post.post-home .post-snip p { margin: 0; color: #000; font-weight: 700; font-size: 1.15em; line-height: 1.45; }

/* Author — bold, black name, green icon (matches live .post-user) */
.post.post-home .post-user { font-weight: 700; font-size: 14px; color: #000; margin: 0 0 14px; }
.post.post-home .post-user i { color: #83C12E; margin-right: 5px; }
.post.post-home .post-user a { color: #000; text-decoration: none; }
.post.post-home .post-user a:hover { color: #83C12E; }

/* READ ARTICLE — 169px black block button, normal weight (matches live .blog__continue btn-2) */
.post.post-home .blog__continue {
    display: block; max-width: 169px; margin: 15px 0 0; line-height: 50px;
    text-align: center; background: #000; color: #fff; font-weight: 400; font-size: 15px;
    border-radius: 3px; text-decoration: none; transition: background 200ms ease;
}
.post.post-home .blog__continue:hover { background: #83C12E; color: #fff; }
.post.post-home .post-edit-link { display: inline-block; margin-top: 10px; font-size: 12px; }

/* Featured (first) post — full width; on desktop text on the LEFT, image on the RIGHT */
.post.post-home.featured { grid-column: 1 / -1; }
.post.post-home.featured .title { font-size: 1.8em; }
@media screen and (min-width: 768px) {
    .post.post-home.featured { flex-direction: row-reverse; align-items: stretch; }
    .post.post-home.featured .post-image { flex: 0 0 48%; }
    .post.post-home.featured .post-image img { height: 100%; min-height: 320px; }
    .post.post-home.featured .post-inner { flex: 1; justify-content: center; padding: 34px 40px; }
}


/* ============================================================
   Single blog post page — ported from the live layout
   (title, sub-line, 1000px content width, grey .blog__post-blocks)
   ============================================================ */
.post .post--content { padding: 0; height: auto; position: static; }
.post .post--content .post-header { margin: 0; padding: 0; border: none; }

/* Title — large, centred, brand green (beats the global h1 !important) */
.post .post--content .title h1 {
    font-size: 3.5em !important; text-align: center; max-width: 800px;
    margin: 40px auto 12px; color: #83C12E !important; line-height: 1.15; font-weight: 700;
}

/* Date / author sub-line — centred, grey, with green calendar/user icons */
.post .sub-h1 { text-align: center; margin-bottom: 15px; }
/* One inline centred line; override the listing date-circle rules from main.css */
.post .sub-h1 .post-date {
    display: inline-block !important; margin: 10px 0 0;
    background: none !important; width: auto !important; height: auto !important;
    border-radius: 0 !important; float: none !important; padding: 0 !important; line-height: normal !important; color: #888;
    /* reset the generic date-circle's 1.8em so the .8em spans below land at ~12.8px like live */
    font-size: 1rem !important; font-family: inherit;
}
.post .sub-h1 .post-date span {
    display: inline !important; height: auto !important; float: none !important;
    color: #888; font-weight: normal; text-transform: none; margin: 0; line-height: normal; font-size: .8em;
}
.post .sub-h1 .post-date span a { color: #888; text-decoration: none; font-size: 1em; }
.post .sub-h1 .post-date span a:hover { color: #83C12E; }
.post .sub-h1 .post-date .txt-c-1 { color: #83C12E; margin-right: 5px; }
.post .sub-h1 .post-date .fa-user-circle { margin-left: 14px; }

/* Multi-block content — content constrained to 1000px, grey full-width bands */
.post .blog__post-blocks { margin-top: 30px; }
.post .post--container { max-width: 1000px; margin: 0 auto; }
.post .blue--block { background-color: #f1f1f1; padding: 80px 40px 40px; position: relative; }
.post .blue--block::before,
.post .bottom__block::before {
    content: ""; display: block; position: absolute; top: 0; left: 50%;
    width: 100vw; height: 100%; background-color: #f1f1f1; transform: translateX(-50%); z-index: -1;
}
.post .blue--block img { background-color: #fff; }
.post .white--block { padding: 40px 0 80px; }
.post .white--block h2 { margin: 30px 0; }
.post .bottom__block { background-color: #f1f1f1; position: relative; padding: 40px 0; }

/* Base 12.8px (= live's .post-body.text 0.8em of 16) so 1.4em paragraphs land at ~17.9px like live */
.post .block__content { font-size: 12.8px; }
.post .block__content h2 { font-size: 2.2em !important; padding-top: 15px; }
.post .block__content p { font-size: 1.4em !important; margin: 15px 0 !important; }
.post .block__content ul li, .post .block__content ol li { font-size: 1.4em; }
.post .block__content img { max-width: 100%; height: auto; }
/* Featured first image overlaps up out of the grey band into the header gap (live effect) */
.post .block__content > p:first-of-type > img:first-of-type { margin-top: -245px; }

/* Tags footer */
.post .post-footer { margin-top: 30px; border: none; }
.post .post-tags { font-size: 1.2em; }
.post .post-tags a { color: #83C12E; }
.post .post-tags a:hover { color: #000; }

@media screen and (max-width: 767px) {
    .post .post--content .title h1 { font-size: 2.3em !important; }
    .post .blog__post-blocks { margin-top: 150px; }
    .post .blue--block { padding: 40px 15px; }
    .post .blue--block img { margin-top: -210px; }
}