/* Alternative Topbar Layout - Logo and social/buttons on same row, nav centered below */

body.topbar-alt .topbar-container {
  display: grid;
  grid-template-areas: 
    "logo top-row"
    "nav nav";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px;
}

body.topbar-alt .topbar {
  padding-top:1rem;
}

/* Logo on left side of row 1 */
body.topbar-alt .topbar-container > .brand {
  grid-area: logo;
  align-self: center;
}

/* Social icons and buttons container on right side of row 1 */
body.topbar-alt .topbar-content {
  grid-area: top-row;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

body.topbar-alt .topbar-content .topbar-row--top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

/* Navigation on row 2, centered across full width */
body.topbar-alt .topbar-container > .topbar-row--bottom {
  grid-area: nav;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

body.topbar-alt .topbar-container .brand img {
  width: clamp(140px, 15vw, 220px);
}

/* Responsive adjustments */
@media (max-width: 1199px) {
  body.topbar-alt .topbar-container {
    gap: 12px;
  }
  body.topbar-alt .topbar-container > .topbar-row--bottom {
    gap: 8px;
  }
}

@media (min-width: 1400px) {
  body.topbar-alt .topbar-container {
    gap: 20px;
  }
  body.topbar-alt .topbar-container > .topbar-row--bottom {
    gap: 14px;
  }
}