/* Minimal, theme-preserving responsive system & burger */
:root { --container: 1200px; }
.container { max-width: var(--container); margin-inline: auto; padding: 0 16px; }

/* Burger */
.burger{display:none; background:none; border:0; padding:8px; cursor:pointer;}
.burger span{display:block; width:24px; height:2px; margin:5px 0; background:currentColor; transition:transform .3s, opacity .3s;}
.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile nav */
@media (max-width: 980px){
  .burger{display:inline-block}
  .main-nav ul{list-style:none; margin:0; padding:0;}
  .main-nav{position:fixed; inset:60px 0 auto 0; transform:translateY(-120%); transition:transform .3s; background:inherit; box-shadow:0 10px 30px rgba(0,0,0,.08);}
  .nav-open .main-nav{transform:translateY(0)}
  .main-nav li{border-top:1px solid rgba(0,0,0,.06)}
  .main-nav a{display:block; padding:14px 20px}
}

/* Grid images & blog cards */
img{max-width:100%; height:auto;}
.grid{display:grid; gap:16px;}
@media (min-width: 640px){ .grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (min-width: 980px){ .grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr));} }

/* Helpers */
.section{padding:32px 0;}
.align-center{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.text-center{text-align:center;}






















/* === Mobile Styling for Blog Content === */
@media only screen and (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 20px 15px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .container h1, 
  .container h2, 
  .container h3, 
  .container p,
  .container ul {
    text-align: center;
  }

  .container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
  }

  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  nav ul {
    flex-direction: column;
    padding: 0;
    text-align: center;
  }

  nav ul li {
    margin: 10px 0;
  }
}















/* Center yellow button on all devices */
.button-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  text-align: center;
}












/* Show mobile menu only on small screens */
.mobile-nav {
  display: none;
}

@media screen and (max-width: 768px) {
  .mobile-nav {
    display: block;
}