/**
 * The logo band and the social row inside the theme's off-canvas menu.
 *
 * Everything here hangs off our own classes. The drawer's own selectors are a
 * merchant setting and differ per theme, so nothing in this file may depend on
 * them — the two blocks have to look right wherever they are dropped.
 */

/* ---- The logo, above the menu ------------------------------------------- */

.gms-dwlogo {
  display: flex;
  align-items: center;
  /* Clear of the close button, which every theme parks in the top right. */
  padding: 18px 56px 16px 20px;
  border-bottom: 1px solid rgba(20, 22, 26, .08);
}

.gms-dwlogo__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* A logo that is also a link should not pick up the menu's link colour. */
  color: inherit;
}

.gms-dwlogo__img {
  display: block;
  width: auto;
  /* The height is a setting and arrives inline; this is the floor under it
     so a wide wordmark cannot push the drawer sideways. */
  max-width: 100%;
  object-fit: contain;
}

/* ---- The social row, at the bottom -------------------------------------- */

.gms-dwsocial {
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(20, 22, 26, .08);
}

.gms-dwsocial__list {
  display: flex;
  /* Six icons fit a 384px drawer; more wrap rather than shrink, because an
     icon small enough to fit ten in a row is too small to hit. */
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gms-dwsocial__list > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gms-dwsocial__a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 40px is the smallest comfortable touch target. */
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(20, 22, 26, .06);
  color: #14161a;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.gms-dwsocial__a svg {
  width: 18px;
  height: 18px;
}

.gms-dwsocial__a:hover,
.gms-dwsocial__a:focus-visible {
  background: var(--gms-accent, #14161a);
  color: var(--gms-accent-ink, #fff);
}

.gms-dwsocial__a:focus-visible {
  outline: 2px solid var(--gms-accent, #14161a);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gms-dwsocial__a { transition: none; }
}