/**
 * @file
 * Site header component.
 */

.c--site-header {
  --sh_pill-h: 4rem;
  --sh_pill-max-w: 88.125rem;
  --sh_gutter: 2.625rem;
  --sh_offset-block: 0.5625rem;
  --sh_pad-inline-start: 1.5rem;
  --sh_pad-inline-end: 1.5rem;
  --sh_b-w: 1px;
  --sh_b-c: #f3f3ed;
  --sh_bg: #fff;
  --sh_c: #222;
  --sh_c_h: #407906;
  --sh_c_bg_h: transparent;
  --sh_f-f: var(--f-f_s);
  --sh_f-s: 0.9375rem;
  --sh_f-w: 500;
  --sh_nav-gap: 3.34375rem;
  --sh_nav-pad-inline: 0.75rem;
  --sh_nav-pad-block: 0.375rem;
  --sh_actions-gap: 1.25rem;
  --sh_optical-shift: 1px;

  position: sticky;
  z-index: 200;
  inset-block-start: 0;
  padding-block: var(--sh_offset-block);
  padding-inline: var(--sh_gutter);
}

.site-header_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  max-width: var(--sh_pill-max-w);
  min-height: var(--sh_pill-h);
  margin-inline: auto;
  padding-inline: var(--sh_pad-inline-start) var(--sh_pad-inline-end);
  border: var(--sh_b-w) solid var(--sh_b-c);
  border-radius: var(--b-r_pill, 100rem);
  background: var(--sh_bg);
  color: var(--sh_c);
}

/* Branding -------------------------------------------------------------- */

.site-header_logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.site-header_logo img {
  display: block;
  width: 9.125rem;
  height: 1.875rem;
}

/* Main menu ------------------------------------------------------------- */

.site-header_nav {
  --nav_c-gap: calc(var(--sh_nav-gap) - 2 * var(--sh_nav-pad-inline));
  --nav_r-gap: 0px;
  --nav_link_f-s: var(--sh_f-s);
  --nav_link_f-w: var(--sh_f-w);
  --nav_link_p-b: var(--sh_nav-pad-block);
  --nav_link_p-i: var(--sh_nav-pad-inline);
  --nav_link_c: var(--sh_c);
  --nav_link_c_a: var(--sh_c_h);
  --nav_link_c_h: var(--sh_c_h);

  display: flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
}

.site-header_nav ul {
  position: relative;
  align-items: center;
  inset-block-start: var(--sh_optical-shift);
}

.site-header_nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header_nav a {
  display: block;
  border-radius: var(--b-r_pill, 100rem);
  line-height: 1.2;
  white-space: nowrap;
  transition:
    color var(--t-t, 0.25s) ease-in-out,
    background-color var(--t-t, 0.25s) ease-in-out;
}

.site-header_nav a:hover,
.site-header_nav a:focus-visible {
  background-color: var(--sh_c_bg_h);
}

/* Actions --------------------------------------------------------------- */

.site-header_actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  -moz-column-gap: var(--sh_actions-gap);
  column-gap: var(--sh_actions-gap);
}

.site-header_action {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: color var(--t-t, 0.25s) ease-in-out;
}

.site-header_action:hover,
.site-header_action:focus-visible {
  color: var(--sh_c_h);
}

.site-header_icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

/* Language switcher ----------------------------------------------------- */

.site-header_lang {
  position: relative;
  flex: 0 0 auto;
}

.site-header_lang-code {
  position: relative;
  inset-block-start: var(--sh_optical-shift);
}

.site-header_lang-toggle {
  position: relative;
  display: flex;
  align-items: center;
  -moz-column-gap: 0.375rem;
  column-gap: 0.375rem;
  inset-block-start: var(--sh_optical-shift);
  margin: 0;
  padding-block: 0;
  padding-inline: 0.25rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--sh_f-s);
  font-weight: var(--sh_f-w);
  line-height: 1.2;
  cursor: pointer;
  transition: color var(--t-t, 0.25s) ease-in-out;
}

.site-header_lang-toggle:hover,
.site-header_lang-toggle:focus-visible {
  color: var(--sh_c_h);
}

.site-header_chevron {
  display: block;
  width: 0.5rem;
  height: 0.375rem;
  transition: transform var(--t-t, 0.25s) ease-in-out;
}

.site-header_lang-toggle[aria-expanded="true"] .site-header_chevron {
  transform: rotate(180deg);
}

.site-header_lang-list {
  position: absolute;
  z-index: 10;
  inset-block-start: calc(100% + 0.875rem);
  inset-inline-end: 0;
  min-width: 8.75rem;
  padding: 0.5rem;
  border: var(--sh_b-w) solid var(--sh_b-c);
  border-radius: var(--b-r_lg, 0.5rem);
  background: var(--sh_bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.site-header_lang-list[hidden] {
  display: none;
}

.site-header_lang-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header_lang-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header_lang-list a {
  display: block;
  padding: 0.375rem 0.5rem;
  border-radius: var(--b-r_sm, 0.25rem);
  color: var(--sh_c);
  font-size: var(--sh_f-s);
  font-weight: var(--sh_f-w);
  line-height: 1.2;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.site-header_lang-list a:hover,
.site-header_lang-list a:focus-visible,
.site-header_lang-list a.is-active {
  background: #f6f7f0;
  color: var(--sh_c_h);
}

/* Responsive ------------------------------------------------------------ */

.site-header_menu-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color var(--t-t, 0.25s) ease-in-out;
}

.site-header_menu-toggle:hover,
.site-header_menu-toggle:focus-visible {
  color: var(--sh_c_h);
}

@media (max-width: 93.3125rem) {
  .c--site-header {
    --sh_gutter: max(1rem, min(2.81vw, 2.625rem));
    --sh_nav-gap: max(1.5rem, min(3.58vw, 3.34375rem));
  }
}

@media (max-width: 63.9375rem) {
  .c--site-header {
    --sh_pad-inline-start: 1rem;
    --sh_pad-inline-end: 1rem;
    --sh_actions-gap: 1rem;
  }

  .site-header_bar {
    position: relative;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding-block: 0.75rem;
    border-radius: var(--b-r_xl, 1rem);
  }

  .site-header_menu-toggle {
    display: flex;
    order: -1;
  }

  .site-header_nav {
    --nav_f-d: column;
    --nav_r-gap: 0.25rem;
    --nav_c-gap: 0px;

    flex: 1 0 100%;
    order: 1;
  }

  .c--site-header:has(.site-header_menu-toggle[aria-expanded="false"])
    .site-header_nav {
    display: none;
  }

  .site-header_nav ul {
    align-items: flex-start;
    inset-block-start: 0;
    width: calc(100% + 2 * var(--sh_nav-pad-inline));
    margin-inline: calc(var(--sh_nav-pad-inline) * -1);
    padding-block: 0.5rem;
    border-block-start: var(--sh_b-w) solid var(--sh_b-c);
  }
}
