/* Workshop 77 V4.5.2.1 - restore desktop left logo and right navigation.
   Mobile rules remain controlled by w77-mobile-header-v445.css and v452 rules. */
@media (min-width: 768px) {
  .site-header .header__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(18px, 2vw, 34px) !important;
    width: calc(100% - 40px) !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 18px 0 !important;
    box-sizing: border-box;
  }
  .site-header .logo {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .site-header .logo img {
    display: block !important;
    width: clamp(210px, 22vw, 350px) !important;
    max-width: 350px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
  .site-header .main-nav {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px clamp(10px, 1.15vw, 19px) !important;
    text-align: right !important;
  }
  .site-header .main-nav > a {
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1.45 !important;
    font-size: clamp(12px, 0.93vw, 14px) !important;
    text-decoration: none;
  }
  .site-header .main-nav > a.btn { padding: 10px 14px !important; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .site-header .logo img { width: clamp(185px, 24vw, 265px) !important; }
  .site-header .main-nav { gap: 8px 13px !important; }
}
@media (max-width: 767px) {
  .site-header .header__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding: 18px 0 22px !important;
    gap: 15px !important;
  }
  .site-header .logo { width: 100% !important; display: flex !important; justify-content: center !important; margin: 0 auto !important; }
  .site-header .logo img { width: auto !important; max-width: min(310px, 85vw) !important; height: auto !important; max-height: 105px !important; margin: 0 auto !important; }
  .site-header .main-nav { display: flex !important; width: 100% !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 7px 15px !important; text-align: center !important; margin: 0 !important; }
  .site-header .main-nav > a:not(.btn) { margin: 0 !important; font-size: clamp(12px, 3.6vw, 15px) !important; padding: 5px 0 !important; }
  .site-header .main-nav > a.btn { display: block !important; flex: 0 0 auto !important; margin: 9px auto 0 !important; }
}