/* === Mobile menu button (hidden on desktop) === */
.menu-toggle{
  display:none;
  height:38px; min-width:38px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
}

.container form {
    margin-block-end: 0 !important;
}

.thumb img {
    height: 75% !important;
}

/* We’ll collapse/expand the nav on mobile using .open */
@media (max-width: 880px){
  /* show hamburger */
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* header grid: brand + menu on first row, search/nav go full width */
  .header-inner{ grid-template-columns:auto auto 1fr; }
  .search{ grid-column:1/-1; order:3; } /* search drops below */
  .nav{ grid-column:1/-1; }

  /* turn nav into a slide-down panel */
  .nav{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px 0;
    /* collapsed state */
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:max-height .25s ease, opacity .2s ease, visibility .2s step-end;
    border-top:1px solid transparent; /* prevents layout jump */
  }
  .nav a{ padding:12px; border-radius:12px; }
  .toggle{ padding:6px 0; }

  /* expanded */
  .nav.open{
    max-height:320px; /* adjust if more links */
    opacity:1;
    visibility:visible;
    border-top:1px solid var(--line);
    transition:max-height .3s ease, opacity .25s ease, visibility 0s;
  }
}

@media (max-width: 1200px){
.container, .header, .footer {
    padding: 0 20px;
}
}

@media (max-width: 881px){
.brand {
    padding-right: 75vw;
}

.search {
    max-width: 100% !important;
}
}

@media (max-width: 730px){
.brand {
    padding-right: 70vw;
}
}

@media (max-width: 620px){
.brand {
    padding-right: 65vw;
}

.nav{
    padding: 0 !important;
}
}

@media (max-width: 530px){
.brand {
    padding-right: 60vw;
}
}

@media (max-width: 430px){
.brand {
    padding-right: 52vw;
}
}

@media (max-width: 380px){
.brand {
    padding-right: 45vw;
}
}