/* ==========================================================
   Go-Sip Blog — fully self-contained stylesheet
   (does NOT depend on style8.css — no conflicts, no overrides)
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
html{ scroll-behavior:smooth; }
body{ background:#ffffff; overflow-x:hidden; color:#222; }
a{ text-decoration:none; }
ul, ol{ list-style:none; }
img{ max-width:100%; display:block; }

:root{
    --green:#045B36;
    --green-dark:#06301f;
    --green-light:#0D7A4A;
    --yellow:#F6C20A;
    --white:#ffffff;
    --text:#222;
}

/* ==========================================================
   Navbar
========================================================== */
.navbar{
    position:fixed;
    top:0; left:0;
    width:100%;
    z-index:998;
    padding:16px 0;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(4,91,54,.08);
}

.nav-container{
    width:90%;
    max-width:1400px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo img{ height:58px; display:block; }

.nav-menu{
    display:flex;
    align-items:center;
    gap:40px;
}

.nav-menu a{
    color: var(--green);
    font-size:15px;
    font-weight:600;
    position:relative;
    transition:.3s;
}

.nav-menu a::after{
    content:'';
    position:absolute;
    left:0; bottom:-6px;
    width:0; height:3px;
    background: var(--yellow);
    transition:.4s;
    border-radius:20px;
}
.nav-menu a:hover::after,
.nav-menu a.active-link::after{ width:100%; }
.nav-menu a.active-link{ color: var(--green-dark); }

.nav-right{ display:flex; align-items:center; gap:22px; }

.nav-btn{
    background: var(--green);
    color:#fff;
    padding:13px 26px;
    border-radius:50px;
    font-size:13.5px;
    font-weight:600;
    transition:.4s;
}
.nav-btn:hover{ background: var(--yellow); color:#111; transform: translateY(-3px); }

.hamburger{
    display:none;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
}
.hamburger span{
    width:26px; height:3px;
    background: var(--green);
    border-radius:50px;
    transition:.4s;
}
.hamburger.active span:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform: rotate(-45deg) translate(6px, -6px); }

@media(max-width:992px){
    .nav-menu{
        position:fixed;
        top:0; right:-100%;
        width:300px; height:100vh;
        background:#fff;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:32px;
        padding-left: 40px;
        box-shadow: -10px 0 50px rgba(0,0,0,.08);
        transition:.5s;
    }
    .nav-menu.active{ right:0; }
    .hamburger{ display:flex; }
    .nav-btn{ display:none; }
    .logo img{ height:48px; }
}

/* ==========================================================
   Blog Hero
========================================================== */
.blog-hero{
    background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
    color:#fff;
    text-align:center;
    padding: 160px 20px 90px;
}
.blog-hero .section-tag{
    display:inline-block;
    color: var(--yellow);
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:13px;
    margin-bottom:16px;
}
.blog-hero h1{
    font-size:54px;
    line-height:1.1;
    margin:0 0 14px;
    font-weight:700;
}
.blog-hero p{
    font-size:16px;
    opacity:.85;
    margin:0 auto;
    max-width:520px;
}

/* ---------- Featured spotlight ---------- */
.featured-section { background: var(--gs-bg); padding: 40px 20px 0; }
.featured-wrap { max-width: 1180px; margin: 0 auto; }
.featured-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--gs-white);
  border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(15,61,46,0.10); color: inherit;
}
.featured-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-body { padding: 34px; display: flex; flex-direction: column; justify-content: center; }
.featured-body h2 { font-size: 24px; margin: 10px 0 12px; color: var(--gs-green); }
.featured-body p { color: var(--gs-muted); font-size: 14px; line-height: 1.7; margin-bottom: 16px; }

/* ---------- Category tabs ---------- */

.featured-card:hover{ transform:translateY(-6px); box-shadow:0 25px 70px rgba(0,0,0,.12); }
.featured-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#eee; }
.featured-img img{ width:100%; height:100%; object-fit:cover; }
.featured-body{ padding:45px; display:flex; flex-direction:column; justify-content:center; }
.featured-body h2{ font-size:30px; color:var(--green); margin:10px 0 14px; line-height:1.3; }
.featured-body p{ color:#555; font-size:15px; line-height:1.8; margin-bottom:18px; }

/* ==========================================================
   Category tabs + Grid
========================================================== */
.blog-listing{ max-width:1400px; margin:0 auto; padding:70px 8% 100px; }
.cat-tabs{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:45px; }
.cat-tab{
    padding:12px 26px;
    border-radius:50px;
    background:#fff;
    border:2px solid #eef2ef;
    font-size:13px;
    font-weight:600;
    color:var(--green);
    transition:.35s;
}
.cat-tab:hover{ border-color:var(--yellow); }
.cat-tab.active{ background:var(--green); color:#fff; border-color:var(--green); }

.blog-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }

.blog-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    color:inherit;
    box-shadow:0 12px 30px rgba(0,0,0,.06);
    transition:.4s;
    display:flex;
    flex-direction:column;
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:0 20px 45px rgba(0,0,0,.1); }

.card-img-box{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#f2f2f2; }
.card-img-box img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.blog-card:hover .card-img-box img{ transform:scale(1.08); }

.card-badge{
    position:absolute; top:12px; left:12px;
    padding:5px 14px; border-radius:50px;
    font-size:10.5px; font-weight:700; letter-spacing:.3px;
    z-index:2;
}
.pin-badge{ background:var(--yellow); color:#1a1a1a; }
.feat-badge{ background:var(--green); color:#fff; }

.card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.card-cat{
    display:inline-block;
    font-size:10.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:1px;
    color: var(--green-light);
    margin-bottom:10px;
}
.card-body h3{
    font-size:16px; margin:0 0 10px; color:#1c1c1c; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-body p{
    font-size:13px; color:#777; line-height:1.6; margin:0 0 16px; flex:1;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-meta{ display:flex; gap:16px; font-size:12px; color:#888; margin-top:auto; }
.card-meta span{ display:flex; align-items:center; gap:6px; }
.card-meta i{ color:var(--yellow); }

.no-posts{ text-align:center; color:#888; padding:80px 0; font-size:15px; }

.see-more-wrap{ text-align:center; margin-top:55px; }
.see-more-btn{
    background:var(--green); color:#fff; border:none;
    padding:16px 42px; border-radius:50px;
    font-weight:600; font-size:14px; cursor:pointer; transition:.4s;
}
.see-more-btn:hover{ background:var(--yellow); color:#111; transform:translateY(-3px); }
.see-more-btn.loading{ opacity:.6; pointer-events:none; }

/* ==========================================================
   Single blog page
========================================================== */
.single-blog{ max-width:820px; margin:0 auto; padding:150px 20px 40px; }

.back-link{
    display:inline-flex; align-items:center; gap:9px;
    font-size:13px; font-weight:600;
    color:var(--green); background:#f2f8f4;
    padding:11px 22px; border-radius:50px;
    margin-bottom:30px; transition:.3s;
}
.back-link:hover{ background:var(--green); color:#fff; transform:translateX(-3px); }

.single-blog .card-cat{
    background: var(--yellow);
    color:var(--green);
    padding:6px 16px;
    border-radius:50px;
    font-size:11px;
}
.single-blog h1{
    font-size:36px; colsingleor:#1c1c1c; margin:16px 0 16px;
    line-height:1.3; font-weight:700;
}
.single-meta{ margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid #eee; }
.single-img{ border-radius:28px; overflow:hidden; margin-bottom:32px; max-height:460px; }
.single-img img{ width:100%; height:100%; object-fit:cover; }

.single-content{ font-size:16px; line-height:1.95; color:#333; }
.single-content h2{ font-size:26px; color:var(--green); margin:34px 0 16px; }
.single-content h3{ font-size:20px; color:var(--green); margin:26px 0 14px; }
.single-content p{ margin:0 0 18px; }
.single-content ul, .single-content ol{ margin:0 0 18px 22px; list-style:revert; }
.single-content img{ max-width:100%; border-radius:16px; margin:18px 0; }
.single-content strong{ color:#111; }

/* ==========================================================
   Related posts
========================================================== */
.related-section{ background:#f7fff6; padding:60px 20px 100px; }
.related-wrap{ max-width:820px; margin:0 auto; }
.related-wrap h3{ font-size:20px; color:var(--green); margin-bottom:24px; font-weight:700; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related-card{ background:#fff; border-radius:20px; overflow:hidden; color:inherit; box-shadow:0 10px 26px rgba(0,0,0,.06); transition:.3s; }
.related-card:hover{ transform:translateY(-4px); }
.related-card .card-img-box{ aspect-ratio:4/3; }
.related-card .card-body{ padding:14px 16px; }
.related-card h4{ font-size:13.5px; margin:0 0 10px; line-height:1.4; color:#1c1c1c; }
.related-card .card-meta{ font-size:11px; }

/* ==========================================================
   Footer (matches main site footer)
========================================================== */
.footer{
    background: var(--green);
    color:#fff;
    padding: 80px 8% 30px;
}
.footer-container{
    display:flex;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;
}
.footer-box{ flex:1; min-width:250px; }
.footer-logo{ height:80px; margin-bottom:20px; }
.footer-text{ color:rgba(255,255,255,.8); line-height:1.8; margin-bottom:20px; }
.footer-tagline{ font-size:20px; font-weight:600; }
.footer-box h3{ margin-bottom:25px; font-size:24px; }
.footer-box a{
    display:block;
    color:rgba(255,255,255,.85);
    margin-bottom:15px;
    transition:.3s;
}
.contact_FA{ margin-right:10px; }
.footer-box a:hover{ color:#fff; transform:translateX(5px); }

.social-links{ display:flex; gap:15px; }
.social-links a{
    width:45px; height:45px;
    background:rgba(255,255,255,.15);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; transition:.3s;
}
.social-links a:hover{ background:#fff; color:var(--green); transform:translateY(-5px); }

.footer-bottom{
    margin-top:60px; padding-top:25px;
    border-top:1px solid rgba(255,255,255,.2);
    text-align:center;
    color:rgba(255,255,255,.7);
    font-size:13px;
}

@media(max-width:768px){
    .footer{ text-align:center; }
    .footer-container{ flex-direction:column; gap:50px; }
    .social-links{ justify-content:center; }
}

/* ==========================================================
   Responsive — blog sections
========================================================== */
@media (max-width:1100px){
    .blog-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:992px){
    .blog-hero h1{ font-size:38px; }
    .blog-hero{ padding:140px 20px 70px; }
    .featured-card{ grid-template-columns:1fr; }
    .featured-body{ padding:30px; }
    .single-blog{ padding-top:120px; }
}
@media (max-width:760px){
    .blog-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
    .related-grid{ grid-template-columns:1fr; }
    .card-body h3{ font-size:13.5px; }
    .card-body p{ display:none; }
    .card-body{ padding:14px 16px 18px; }
    .single-blog h1{ font-size:24px; }
    .blog-listing{ padding:50px 6% 80px; }
}
@media (max-width:420px){
    .featured-body{ padding:24px; }
    .featured-body h2{ font-size:22px; }
}