/* header.css */

:root {
  --weblite-header-background-color: #add8e6;
  --weblite-header-text-color: #000000;
  --weblite-header-font-size: 1em;
  --weblite-header-font-weight: light;
  --weblite-header-logo-max-width: 120px;
  --weblite-header-cart-size: 38px;
  --weblite-header-content-padding-block: 0.5em;
  --weblite-header-content-padding-inline: 1em;
}

#header {
  position: relative;
  display: flex;
  align-items: center;
  top: 0;
  z-index: 1000;
  min-height: 50px;

  font-size: var(--weblite-header-font-size);
  background-color: var(--weblite-header-background-color);
  color: var(--weblite-header-text-color);
  font-weight: var(--weblite-header-font-weight);
}

#header.sticky-header {
 position: sticky;
}

#header.shadow-light {
 box-shadow: 0 0 0.8em 0.1em #00000033;
}

#header.shadow-dark {
 box-shadow: 0 0 0.8em 0.1em #00000066;
}

#header .weblite-site-title span {
  font-size: 1.25em;
  font-weight: bolder;

  color: black;
  text-transform: capitalize;
}

#header .weblite-custom-logo img {
  display: block;
  height: auto;
  width: min(40vw, var(--weblite-header-logo-max-width));;
}

#header .header-content {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--weblite-header-content-padding-block);
  padding-inline: var(--weblite-header-content-padding-inline);

  margin-inline: max(
    calc(100vw - var(--content-max-width-desktop)) / 6,
    var(--weblite-layout-gutter)
  );
}

#header .site-logo {
  max-width: 180px;
}

.header-cart-area {
  margin-left: auto;
  max-width: var(--weblite-header-cart-size);
  margin-right: 1em;
}

#header .header-navbar-area {
  width: 100%;
}

#header.align-links-left .header-navbar-area {
  justify-content: flex-end;
}

#header .header-navbar-menu {
  display: flex;
  gap: 1em;
  list-style: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#header.align-links-evenly .header-navbar-menu {
  justify-content: space-around;
}

#header.align-links-left .header-navbar-menu{
  justify-content: flex-start;
}

#header .header-navbar-menu li {
  display: inline-block;
}

#header .header-navbar-menu a {
  color: inherit;
  text-decoration: none;
}

#header.has-responsive-menu .header-navbar-area{
  display: none;
}

#header .wp-block-button__link {
  font-size: 0.5em;
}

/* Styles for laptops */
@media (min-width: 576px) {
  #header[data-header-breakpoint='mobile'] .header-navbar-area {
    display: block;
  }
  #header[data-header-breakpoint='mobile'] .header-widget-area {
    display: none;
  }
}

/* Styles for tablets */
@media (min-width: 768px) {
  #header[data-header-breakpoint='tablet'] .header-navbar-area {
    display: block;
  }
  #header[data-header-breakpoint='tablet'] .header-widget-area {
    display: none;
  }

  [data-layout-breakpoint='tablet'].has-sidebar #header {
    padding-inline: max(
      calc(100vw - var(--content-max-width-tablet)) / 6,
      var(--weblite-layout-gutter)
      );
    }
}

/* Styles for small laptops */
@media (min-width: 992px) {
  #header[data-header-breakpoint='laptop'] .header-navbar-area {
    display: block;
  }
  #header[data-header-breakpoint='laptop'] .header-widget-area {
    display: none;
  }

  [data-layout-breakpoint='laptop'].has-sidebar #header {
    padding-inline: max(
      calc(100vw - var(--content-max-width-laptop)) / 6,
      var(--weblite-layout-gutter)
      );
    }
}

/* Styles for desktops */
@media (min-width: 1280px) {
  #header[data-header-breakpoint='desktop'] .header-navbar-area {
    display: block;
  }
  #header[data-header-breakpoint='desktop'] .header-widget-area {
    display: none;
  }

  [data-layout-breakpoint='desktop'].has-sidebar #header {
    padding-inline: max(
      calc(100vw - var(--content-max-width-desktop)) / 6,
      var(--weblite-layout-gutter)
      );
    }
}