/* Workshop 77 — mobile header and spacing; loaded last to override legacy CSS */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .site-header .header__inner {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; flex-wrap: nowrap; gap: 14px;
    padding: 18px 0 20px;
    width: calc(100% - 32px); max-width: 100%; margin: 0 auto;
    box-sizing: border-box;
  }
  .site-header .logo { display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 100%; }
  .site-header .logo img, header.site-header .logo img {
    display: block; width: min(310px, 85vw); max-width: 100%;
    height: auto; max-height: 105px; object-fit: contain; margin: 0 auto;
  }
  .site-header .main-nav {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px 16px; width: 100%; margin: 0; padding: 0; text-align: center;
  }
  .site-header .main-nav > a:not(.btn) {
    margin: 0; padding: 5px 0; font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.45; white-space: nowrap;
  }
  .site-header .main-nav > a.btn[href*="admin/"] {
    display: block; flex: 0 0 auto; margin: 8px auto 0;
    padding: 10px 20px; text-align: center;
  }
  main > .container, .site-footer .container, .site-footer--dark .container,
  .w77-footer-v43 .container {
    width: calc(100% - 32px); max-width: 100%; margin-inline: auto;
    box-sizing: border-box;
  }
  .w77-section .container, .w77-hero .container, .site-header + main .container {
    width: calc(100% - 32px); max-width: 100%; margin-inline: auto;
    box-sizing: border-box;
  }
  .w77-footer-v43 .w77-footer-details { padding-inline: 0; }
}
@media (max-width: 380px) {
  .site-header .main-nav { gap: 6px 12px; }
  .site-header .main-nav > a:not(.btn) { font-size: 13px; }
}