/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

:root {  
  --footer-background: light-dark(var(--dark-neutral800),var(--dark-neutral100));
  --footer-color: var(--light-neutral200);
  --footer-color-dark: var(--light-neutral900);
  --footer-font-size: var(--text-md-regular);
  --footer-font-headline: var(--text-lg-regular);
  --footer-font-small: var(--text-sm-regular);
  --footer-dropdown: var(--light-neutral100);  
  --footer-dropdown-highlight: var(--light-neutral200);
  --footer-border-color: #7e858d;
  --footer-flag-border: #b2b2b2;
}

/* main settings and spacings */
.footerWrapper {
  background: var(--footer-background);
  color: var(--footer-color);
}
.footerRow {  /* All Footer */
  margin: 0px 96px 0px;
  @media (width < 720px) { margin: 0px 30px 0px;}
}
.footerFirstRow {  /* Full Footer */
  padding-top: 96px;
  @media (width < 720px) { padding-top: 30px;}
}

.footerFirstRow ~.footerSecRow {  /* Full Footer */
  margin-top: 96px;
  @media (width < 720px) { margin-top: 56px;}  
}


/* Linklist First Row */
#footer ul, 
#footer li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li.hs-menu-depth-1 > a {
  display: none
}
#footer ul.maincolumns {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 5vw;
  margin-bottom: 4rem;
  @media (width < 1100px) {
    justify-content: space-between;
    gap: 4rem;
  }
}
ul.maincolumns li {
  min-width: 220px;
}
ul.maincolumns li a {
  color: var(--footer-color);
  font-size: var(--footer-font-size);
  font-weight: 400;
  line-height: 34px;
  text-decoration: none;
}
ul.maincolumns li a:hover {
  text-decoration: underline;
}

ul.maincolumns li.hs-item-has-children > a {
  font-size: var(--footer-font-headline);
  font-weight: 600;
  line-height: 40px;
  pointer-events: none;
}
  


/* linklist tags */
/* list item should look like this: "Jobs <span class="tags yellow">We are hiring</span>" */
ul.maincolumns span.tags {
  background-color: var(--bg-brand-primary);
  border-radius: 15px;
  color: var(--pineapple-900);
  font-size: var(--footer-font-small);
  padding: 4px 8px;
  &.yellow {
    background-color: var(--bg-brand-primary);
    color: var(--pineapple-900);
  }
  &.purple {
    background-color: var(--bg-accent-solid);
    color: var(--text-white-primary);
  }
}

}