/* ============================================================
   GLOBAL SKYWATCH - RESPONSIVE SITE HEADER
   Loaded on pages that include #gsw-site-header.
   ============================================================ */

#gsw-site-header {
  width: 100%;
}


/* ------------------------------------------------------------
   Full-width background bar
   ------------------------------------------------------------ */

#gsw-site-header #header {
  display: flex;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: auto;
  min-height: 50px;

  box-sizing: border-box;

  color: #CCC;

  background: linear-gradient(
    to bottom,
    #57616C 0%,
    #000 100%
  );
}


/* ------------------------------------------------------------
   Centered desktop content
   ------------------------------------------------------------ */

#gsw-site-header #header-core {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 16px;

  width: 100%;
  max-width: 930px;

  height: auto;
  min-height: 50px;

  margin: 0 auto;
  padding: 0 12px;

  box-sizing: border-box;
}


/* ------------------------------------------------------------
   Global Skywatch logo
   ------------------------------------------------------------ */

#gsw-site-header .header-brand {
  display: block;

  flex: 0 1 300px;

  min-width: 0;
  max-width: 300px;

  line-height: 0;
}

#gsw-site-header .header-brand img {
  display: block;

  width: 100%;
  max-width: 300px;
  height: auto;
}


/* ------------------------------------------------------------
   Social platform icons
   ------------------------------------------------------------ */

#gsw-site-header .header-platforms {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: flex-end;

  gap: 6px 8px;

  min-width: 0;

  margin: 0;
  padding: 0;
}

#gsw-site-header .header-platforms a {
  display: inline-flex;
  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  min-height: 32px;

  line-height: 0;
}

#gsw-site-header .header-platforms img {
  display: block;

  width: auto;
  height: 24px;

  max-width: none;
}


/* ------------------------------------------------------------
   Keyboard accessibility
   ------------------------------------------------------------ */

#gsw-site-header .header-platforms a:focus-visible,
#gsw-site-header .header-brand:focus-visible {
  outline: 2px solid #EAE8BF;
  outline-offset: 2px;
}


/* ============================================================
   MOBILE LAYOUT
   ============================================================ */

@media (max-width: 640px) {

  /* Stack the logo and social icons vertically */

  #gsw-site-header #header-core {
    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: 8px;

    min-height: 0;

    padding: 8px 12px 10px;
  }


  /* Center the logo */

  #gsw-site-header .header-brand {
    flex: none;

    width: 100%;
    max-width: 300px;
  }


  /* Center and wrap the social icons */

  #gsw-site-header .header-platforms {
    width: 100%;

    justify-content: center;

    gap: 6px 10px;
  }

}