/* -------- BASE -------- */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

/* Global links */
a {
  color: #1e88e5;
  text-decoration: none;
}

a:hover {
  color: #1565c0;
  text-decoration: underline;
}

/* Keep navbar white */
.navbar a {
  color: #fff;
}

html{
font-size:16px;
}

body{
background:#f7f9f7;
color:#333;
line-height:1.75;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

body.nav-open{
overflow:hidden;
}

/* -------- HEADER -------- */

header{
background:#2e7d32;
padding:1rem 0;
position:relative;
z-index:1000;
}

header a{
color:#fff;
text-decoration:none;
font-size:1.4rem;
font-weight:700;
}

/* -------- NAVBAR -------- */

.nav-container{
max-width:1200px;
margin:auto;
padding:0 16px;
display:flex;
align-items:center;
justify-content:space-between;
min-height:64px;
}

.nav-logo{
color:#ffffff;
font-size:1.25rem;
font-weight:700;
text-decoration:none;
}

.nav-menu{
list-style:none;
display:flex;
gap:22px;
}

.nav-menu a{
color:#ffffff;
text-decoration:none;
font-size:0.95rem;
font-weight:500;
}

.nav-menu a:hover{
text-decoration:underline;
}

.nav-toggle{
display:none;
font-size:1.6rem;
background:none;
border:none;
color:#ffffff;
cursor:pointer;
}

/* -------- MOBILE NAV -------- */

@media (max-width:768px){

.nav-toggle{
display:block;
}

.nav-menu{
display:none;
flex-direction:column;
background:#2e7d32;
position:absolute;
top:64px;
left:0;
width:100%;
box-shadow:0 8px 16px rgba(0,0,0,0.15);
}

.nav-menu li{
padding:14px 16px;
border-bottom:1px solid rgba(255,255,255,0.15);
}

.nav-menu.show{
display:flex;
}

}

/* -------- LAYOUT -------- */

.container{
max-width:1200px;
margin:auto;
padding:2.5rem 1.2rem;
}

/* -------- ARTICLE -------- */

article{
background:#fff;
padding:2.5rem;
border-radius:10px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

article h1{
font-size:2.2rem;
color:#2e7d32;
margin-bottom:0.8rem;
}

article h2{
font-size:1.5rem;
margin-top:2.2rem;
color:#1b5e20;
}

.post-meta{
font-size:0.85rem;
color:#777;
margin-bottom:1.5rem;
}

article p{
margin-top:1rem;
font-size:1.05rem;
max-width:90ch;
}

article p.full-width{
max-width:100%;
}

/* -------- FEATURE IMAGE -------- */

.featured-img{
width:100%;
height:380px;
object-fit:contain;
border-radius:8px;
margin-bottom:1.4rem;
}

figcaption{
font-size:0.8rem;
text-align:center;
color:#666;
}

/* -------- INLINE CONTENT GRID -------- */

.inline-post-grid{
display:grid;
grid-template-columns:3fr 1.2fr;
gap:28px;
margin:2.5rem 0;
}

.inline-left{
display:flex;
flex-direction:column;
gap:22px;
}

.inline-box{
border:1px solid #e0e0e0;
border-radius:8px;
background:#fafafa;
overflow:hidden;
}

.inline-box-header{
background:#2e7d32;
color:#fff;
padding:12px 16px;
font-weight:600;
font-size:1.05rem;
}

.inline-box-content{
padding:16px;
font-size:1rem;
line-height:1.65;
}

.inline-sidebar{
border:1px solid #e0e0e0;
border-radius:8px;
background:#f1f8f2;
position:sticky;
top:20px;
}

.inline-sidebar .inline-box-header{
background:#558b2f;
}

/* -------- RELATED GUIDES -------- */

.related-guides ul{
list-style:none;
}

.related-guides li{
margin-bottom:8px;
}

.related-guides a{
color:#2e7d32;
font-size:0.95rem;
text-decoration:none;
font-weight:500;
}

.related-guides a:hover{
text-decoration:underline;
}

/* -------- FAQ -------- */

.faq-section{
margin-top:3rem;
}

.faq-item{
padding:1.1rem 1.3rem;
margin-bottom:1.1rem;
background:#fafafa;
border:1px solid #e0e0e0;
border-left:4px solid #2e7d32;
border-radius:6px;
}

.faq-question{
font-size:1.05rem;
font-weight:600;
color:#1b5e20;
margin-bottom:0.4rem;
}

.faq-answer{
font-size:1rem;
color:#444;
line-height:1.65;
}

/* -------- CATEGORY / BLOG GRID -------- */

.category-intro{
background:#fff;
padding:1.5rem;
margin-bottom:2rem;
border-radius:6px;
}

.posts-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:1.5rem;
}

.post-card{
background:#ffffff;
border-radius:12px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:transform .25s ease, box-shadow .25s ease;
}

.post-card:hover{
transform:translateY(-4px);
box-shadow:0 14px 28px rgba(0,0,0,0.12);
}

.post-link{
text-decoration:none;
color:inherit;
display:block;
}

.post-cover{
width:100%;
aspect-ratio:3/2;
overflow:hidden;
background:#f2f2f2;
}

.post-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.post-content{
padding:1rem 1.2rem 1.4rem;
}

.post-title{
font-size:1.15rem;
line-height:1.35;
margin:0 0 0.5rem;
}

.post-excerpt{
font-size:0.95rem;
color:#555;
margin-bottom:0.8rem;
}

/* Pagination */
.pagination{margin:40px 0;display:flex;justify-content:center;gap:10px;font-weight: bold}

/* Pagination links */
.pagination a,
.pagination span {
    padding: 8px 12px;
    border-radius: 6px;
    background: #1b5e20;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.pagination a:hover {
    background: #111;
    color: #fff;
}

.pagination .active {
    background: #111;
    color: #fff;
    font-weight: bold;
    cursor: default;
}

.pagination .ellipsis {
    background: transparent;
    box-shadow: none;
    padding: 8px 6px;
}

/* Responsive Pagination */
.pagination {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* Compact pagination on mobile */
@media (max-width: 480px) {
    .pagination a,
    .pagination span {
        padding: 6px 8px;
        font-size: 13px;
    }

    .pagination .nav-link {
        flex-basis: 100%;
        text-align: center;
    }
}

/* -------- FOOTER -------- */

footer{
background:#1b5e20;
color:#fff;
text-align:center;
padding:1rem;
margin-top:3rem;
font-size:0.9rem;
}

/* -------- RESPONSIVE -------- */

@media (max-width:992px){

article p{
max-width:100%;
}

}

@media (max-width:768px){

.container{
padding:1.8rem 1rem;
}

article{
padding:1.6rem;
}

article h1{
font-size:1.8rem;
}

article p{
font-size:1rem;
}

.featured-img{
height:260px;
}

.inline-post-grid{
grid-template-columns:1fr;
}

.inline-sidebar{
position:static;
}

}

/* -------- BREADCRUMB -------- */

.breadcrumb{
font-size:0.9rem;
margin-bottom:1.2rem;
color:#666;
line-height:1.4;
}

.breadcrumb a{
color:#2e7d32;
text-decoration:none;
font-weight:500;
}

.breadcrumb a:hover{
text-decoration:underline;
}

.breadcrumb span{
color:#333;
font-weight:500;
}

/* Mobile */
@media (max-width:768px){

.breadcrumb{
font-size:0.85rem;
margin-bottom:1rem;
}

}