/* Skip Link */
[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;
}

/* Header Root */
[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;
    padding: 0px;
  }
  :where(li) {
    margin: 0px;
  }
}

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

/* Shared row layout between the banner row and the main row */
[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-header="message-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;
  margin-inline-start: auto;
  font-size: var(--header--banner--font-size);

  :is(a, p, span, [data-header="quick-links-link"], [data-header="banner-link"]) {
    font-size: var(--header--banner--font-size);
  }

  [data-header="quick-links-link"],
  [data-header="banner-link"] {
    padding-inline: 0em;
  }

  /* Component Restyling Variable Reassignments */
  [data-header="quick-links-dropdown"] {
    margin-inline-end: 1em;
    --dropdown--font-size: var(--header--banner--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: oklch(from var(--_site-theme---header--banner--background) calc(l * 0.95) c h);
  }
}

[data-header="quick-links-dropdown-list"] {
  display: contents;
}

/* Main Region */
[data-header="main-wrap"] {
  background-color: var(--_site-theme---header--main--background);
  color: var(--_site-theme---header--main--text);
  width: 100%;
}

[data-header="logo"] {
  width: min(100%, 300px);
  position: relative;
  overflow: hidden;
  & > * {
    display: flex;
    position: absolute;
    width: 100%;
    height: calc(100% - (var(--header--main--vertical-padding) / 2 ));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Nav */
[data-header="nav-dropdown"] [data-component="row"] {
  margin-inline: 0;
}

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

  /* Component Restyling Variable Reassignments */
  [data-header="nav-dropdown"] {
    --dropdown--font-size: var(--header--main--font-size);

    --_site-theme---dropdown--background: var(--_site-theme---header--main--background);
    --_site-theme---dropdown--border: transparent;
    --_site-theme---dropdown--text: var(--_site-theme---header--main--dropdown-text, inherit);
    --_site-theme---dropdown--active-background: oklch(from var(--_site-theme---header--main--background) calc(l * 0.975) c h);
  }
}

[data-header="nav-link"]:hover {
  background-color: oklch(from var(--_site-theme---header--main--background) calc(l * 0.975) c h);
}

[data-header="nav-list"] {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;

  [data-header="cta-button"] {
    padding-block: calc(var(--header--main--vertical-padding) / 2);
    margin-inline-start: var(--button--horizontal-padding);
  }

  [data-header="nav-link"],
  [data-header="nav-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-header="nav-link"],
  [data-header="cta-button"],
  [data-dropdown="toggle"] {
    font-size: var(--header--main--font-size);
    line-height: 1;
  }

  [data-header="nav-link"],
  [data-header="nav-dropdown"] [data-dropdown="toggle"] {
    font-weight: var(--header--main--font-weight);
  }
}

[data-header="nav-menu"] {
  display: block;
  width: 100%;
  overflow-y: visible;
}

[data-header="nav-mobile-toggle"] {
  display: none;
  background-color: transparent;
  color: var(--_site-theme---nav--mobile-toggle);
  margin-inline-start: auto;
  position: sticky;
  top: 0;
  padding-block: var(--header--main--vertical-padding);

  [data-header="nav-mobile-trigger-icon"] {
    display: grid;
    aspect-ratio: 1;
  }
}

/* Shared / Cross-Component */
[data-header="nav-dropdown-list"],
[data-header="nav-mega-list"] {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
}

[data-header="nav-link"],
[data-header="quick-links-link"] {
  justify-content: start;
  transition: opacity var(--global-transition-duration) ease;
  &:hover ~ &, &:has(~ &:hover) {
    opacity: 0.65;
  }
}

[data-header="nav-dropdown"] [data-dropdown="menu"] {
  [data-header="nav-link"],
  [data-header="nav-dropdown"] [data-dropdown="toggle"] {
    padding-block: calc(var(--header--main--vertical-padding) / 2);
    --dropdown--vertical-padding: calc(var(--header--main--vertical-padding) / 2);
  }
}

[data-header="nav-dropdown"] [data-dropdown="list"] {
    padding-block: calc(var(--header--main--vertical-padding) / 2);
}

body:has([data-header="nav"][data-nav-open]),
html.wf-design-mode body:has([data-header="nav"][data-wf-preview]) {
  overflow: hidden;
}

/* Media Query (max-width: 991px) */
@media (max-width: 991px) {
  [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="banner-wrap"] {
    z-index: 1;
  }

  /* Pre-configured Mobile Nav Styles */
  [data-header="nav-mobile-toggle"] {
    display: block;
  }

  [data-header="nav-list"] {
    flex-direction: column;
    padding-block-start: calc(var(--header--main--vertical-padding) + 1em);
    padding-block-end: var(--header--main--vertical-padding);
    max-width: min((100% - var(--container--gutter) * 2), var(--container--max-width));
    margin-inline: auto;
    align-items: stretch;

    & > * {
      visibility: hidden;
      opacity: 0;
      transition: opacity var(--global-transition-duration) ease;
    }

    & [data-header="cta-button"] {
      align-self: flex-start;
      margin-inline: 0px;
      margin-block-start: 1em;
    }

    & [data-header="nav-link"],
    [data-header="nav-dropdown"] [data-dropdown="toggle"] {
      padding-block: 1em;
    }
    & [data-dropdown="menu"], [data-dropdown-width="full"] [data-dropdown="menu"] {
      position: relative;
    }
  }

  [data-header="nav-menu"] {
    position: fixed;
    top: 0;
    left: 0;
    padding-block-start: 8em;
    height: 100dvh;
    overflow-y: auto;
    pointer-events: none;
    z-index: -1;
    clip-path: inset(0 0% 100% 0);
    transition: clip-path var(--global-transition-duration) ease;
    background-color: var(--_site-theme---header--main--background);
  }

  /* Essential Mobile Open State */
  [data-header="nav"][data-nav-open],
  html.wf-design-mode [data-header="nav"][data-wf-preview] {

    [data-header="nav-menu"] {
      pointer-events: auto;
      clip-path: inset(0 0% 0% 0);
    }

    [data-header="nav-list"] > * {
      visibility: visible;
      opacity: 1;
    }
  }
}