[data-header="skip-link"] {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  background: var(--_site-theme---button--background);
  color: var(--_site-theme---button--text);
  font-weight: var(--button--font-weight);
  padding: var(--button--vertical-padding) var(--button--horizontal-padding);
  text-decoration: none;
  transition: top var(--global-transition-duration) ease;
}
[data-header="skip-link"]:focus {
  top: 0;
}

[data-component="header"] {
  position: sticky;
  top: 0;
  container-type: inline-size;
  display: flex;
  flex-flow: column;
  width: 100%;
  z-index: 99;

  :where(ul, ol) {
	list-style-type: none;
  margin: 0px;
 }
  :where(li) {
    margin: 0px;
  }
}

[data-header="banner-wrap"] {
  background-color: var(--_site-theme---header--banner--background);
  color: var(--_site-theme---header--banner--text);
  width: 100%;
}

[data-header="main-wrap"] {
  background-color: var(--_site-theme---header--main--background);
  color: var(--_site-theme---header--main-text);
  padding-inline: var(--header--horizontal-padding);
  width: 100%;
}

[data-header="main"] {
  position: relative;
}

[data-header="main"],
[data-header="banner"] {
  margin-inline: auto;
  width: 100%;
  max-width: min((100% - var(--container--gutter) * 2), var(--container--max-width));
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

[data-header="banner"] {
  padding-block: 0.5em;
  font-size: var(--header--banner--font-size);
}

[data-header="message"] {
  overflow: clip;
  width: 50%;
}
[data-header="message"] [data-component="marquee"] {
  width: 100%;
}
[data-header="message"] [data-header] > * {
  width: max-content;
}
[data-header="message"] p {
  margin-block-end: 0px;
}

[data-header="quick-links"] {
  display: flex;
  align-items: end;
  [data-component="button"][data-variant="link"] {
    padding-inline: 1em;
  }
}

[data-header="nav"] {
  width: 100%;
  display: flex;
  align-items: end;
}

[data-header="main"]:has([data-component="nav"][data-nav-open], [data-component="nav"][data-wf-preview]) [data-header="logo"] {
  z-index: 999;
}


@media (max-width: 991px) {
  [data-header="banner-wrap"] {
    order: 1;
  }

  [data-header="banner"] {
    display: flex;
    flex-direction: column;
    padding-block-end: 0px;
  }

  [data-header="message"] {
    width: 100%;
  }

  [data-header="quick-links"] {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
}


[data-header="quick-links"] [data-component="dropdown"] {
  --dropdown--vertical-padding: var(--header--banner--dropdown-vertical-padding);
  --dropdown--horizontal-padding: var(--header--banner--dropdown-horizontal-padding);
  --dropdown--font-size: var(--header--banner--dropdown-font-size);

  --_site-theme---dropdown--background: var(--_site-theme---header--banner--dropdown-background);
  --_site-theme---dropdown--border: var(--_site-theme---header--banner--dropdown-border);
  --_site-theme---dropdown--text: var(--_site-theme---header--banner--dropdown-text);
  --_site-theme---dropdown--active-background: var(--_site-theme---header--banner--dropdown-active-background);
}


[data-header="nav"] [data-component="dropdown"] {
  --dropdown--vertical-padding: var(--header--main--dropdown-vertical-padding);
  --dropdown--horizontal-padding: var(--header--main--dropdown-horizontal-padding);
  --dropdown--font-size: var(--header--main--font-size);

  --_site-theme---dropdown--background: var(--_site-theme---header--main--dropdown-background);
  --_site-theme---dropdown--border: var(--_site-theme---header--main--dropdown-border);
  --_site-theme---dropdown--text: var(--_site-theme---header--main--dropdown-text);
  --_site-theme---dropdown--active-background: var(--_site-theme---header--main--dropdown-active-background);
}

/* NAV */

[data-component="nav"] {
  --is-open: 0;
  --toggle-display: none;
  --menu-display: flex;
  --list-direction: row;
  width: 100%;
}
[data-nav="list"] {
  display: var(--menu-display);
  flex-direction: var(--list-direction);
  justify-content: end;
  align-items: stretch;
  [data-component="button"]:not([data-variant="link"]) {
    --button--vertical-padding: calc(var(--header--main--vertical-padding) / 2);
    align-self: center;
    margin-inline-start: var(--button--horizontal-padding);
  }
  [data-component="button"][data-variant="link"], [data-component="dropdown"] [data-dropdown="toggle"] {
    padding-block: var(--header--main--vertical-padding);
    padding-inline: var(--button--vertical-padding);
    --dropdown--vertical-padding: var(--header--main--vertical-padding);
  }
  [data-component="button"], [data-dropdown="toggle"] {font-size: var(--header--main--font-size);}
  [data-component="button"][data-variant="link"], [data-component="dropdown"] [data-dropdown="toggle"] {
    font-weight: var(--header--main--font-weight);
  }
}

[data-header="logo"] {
  width: min(100%, 300px);
  position: relative;
  overflow: hidden;
  align-self: stretch;
  padding-block: calc(var(--header--main--vertical-padding)/2);
}

[data-nav="menu"] {
  display: block;
  width: 100%;
  overflow-y: visible;
}
[data-nav="mobile-toggle"] {
  background-color: transparent;
  color: var(--_site-theme---nav--mobile-toggle);
  margin-inline-start: auto;
  display: var(--toggle-display);
  z-index: calc(var(--is-open) * 99 + 1);
  position: sticky; 
  top: 0;
}
[data-component="nav"]:before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: oklch(from var(--_site-theme---header--main--background) l c h / var(--is-open));
  z-index: -1;
  pointer-events: none;
}


@media (max-width: 991px) {
  [data-component="nav"] {
    --toggle-display: grid;
    --menu-display: none;
    --mobile-clip-path: inset(0 0 100% 0);
  }
}

[data-component="nav"]:is([data-nav-open], [data-wf-preview]) {
  --is-open: 1;
  --menu-display: flex;
  --toggle-display: block;
  --list-direction: column;
  position: fixed;
  overflow-y: auto;
  inset: 0;
  height: 100dvh;
  flex-direction: column;
  padding-inline: var(--container--gutter);
  z-index: 1;
  & [data-component="button"] {align-self: start; margin-inline: 0px;}
  [data-component="button"][data-variant="link"], [data-dropdown="toggle"] {
    padding-inline: 0px;
    padding-block-start: 0px;
    padding-block-end: var(--button--vertical-padding);
  }
}
[data-component="nav"]:is([data-nav-open], [data-wf-preview]) [data-nav="menu"] {
  position: static;
}
[data-component="nav"]:is([data-nav-open], [data-wf-preview]) [data-nav="list"] {
  padding-block-start: calc(var(--header--main--vertical-padding) + 1em);
  padding-block-end: var(--header--main--vertical-padding);
}

[data-component="nav"]:is([data-nav-open], [data-wf-preview]) [data-nav="list"] [data-dropdown="menu"] {
      position: relative;
}

body:has([data-component="nav"][data-nav-open], [data-component="nav"][data-wf-preview]) {
  overflow: hidden;
}

  [data-nav="mobile-toggle"] {
    padding-block: var(--header--main--vertical-padding);
    [data-nav="mobile-trigger-icon"] {
      display: grid;
      aspect-ratio: 1;
    }
  }