/* =========================================================
   NATIVE WORDPRESS NAVIGATION
   ========================================================= */

.minimal-header-inner {
  grid-template-columns:
    minmax(220px, 325px)
    minmax(0, 1fr);
}

.minimal-main-nav {
  justify-self: end;
  color: var(--minimal-ink);
}

.minimal-menu {
  display: flex;
  align-items: center;

  gap: clamp(18px, 2vw, 34px);

  margin: 0;
  padding: 0;

  list-style: none;
}

.minimal-menu li {
  position: relative;
}


/* =========================================================
   MAIN LINKS
   ========================================================= */

.minimal-menu a,
.minimal-menu button {
  color: inherit;

  font: inherit;
  font-weight: 600;

  text-decoration: none;
}

.minimal-menu > li > a {
  display: block;

  padding: 12px 0;

  white-space: nowrap;
}

.minimal-menu > li > a:hover,
.minimal-menu .current-menu-item > a,
.minimal-menu .current-menu-ancestor > a {
  color: var(--minimal-accent);
}


/* =========================================================
   ITEMS WITH CHILDREN
   ========================================================= */

.minimal-menu
> .menu-item-has-children {
  display: flex;
  align-items: center;
}


/*
 * Keep the parent page clickable.
 */
.minimal-menu
> .menu-item-has-children
> a {
  padding-right: 4px;
}


/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

.minimal-submenu-toggle {
  width: 28px;
  height: 38px;

  margin: 0;
  padding: 0;

  display: inline-grid;
  place-items: center;

  border: 0;

  color: var(--minimal-ink);
  background: transparent;

  cursor: pointer;

  border-radius: 999px;

  transition:
    color .18s ease,
    background-color .18s ease;
}

.minimal-submenu-toggle:hover,
.menu-item-has-children.is-open
> .minimal-submenu-toggle {
  color: var(--minimal-accent);

  background:
    rgba(17, 67, 121, .055);
}

.minimal-submenu-toggle span {
  display: block;

  font-size: .72rem;
  line-height: 1;

  transition:
    transform .18s ease;
}

.menu-item-has-children.is-open
> .minimal-submenu-toggle
> span {
  transform: rotate(180deg);
}


/* =========================================================
   GENERIC DROPDOWN
   ========================================================= */

.minimal-menu .sub-menu {
  display: none;

  position: absolute;

  top: calc(100% + 8px);
  left: 0;

  z-index: 500;

  min-width: 220px;

  margin: 0;
  padding: 7px;

  list-style: none;

  border:
    1px solid rgba(17, 67, 121, .15);

  border-radius: 12px;

  background: #fff;

  box-shadow:
    0 18px 45px
    rgba(17, 67, 121, .14);
}


/*
 * IMPORTANT:
 * dropdowns only open through JS.
 */
.minimal-menu
.menu-item-has-children.is-open
> .sub-menu {
  display: block;
}


/* Small top pointer */

.minimal-menu
> .menu-item-has-children
> .sub-menu::before {
  content: "";

  position: absolute;

  top: -5px;
  left: 24px;

  width: 9px;
  height: 9px;

  border-top:
    1px solid rgba(17, 67, 121, .15);

  border-left:
    1px solid rgba(17, 67, 121, .15);

  background: #fff;

  transform: rotate(45deg);
}


/* =========================================================
   DROPDOWN LINKS
   ========================================================= */

.minimal-menu .sub-menu li {
  display: block;
}

.minimal-menu .sub-menu a {
  display: block;

  padding: 10px 12px;

  border-radius: 7px;

  color: var(--minimal-ink);

  font-size: .86rem;
  font-weight: 550;

  white-space: nowrap;

  transition:
    color .15s ease,
    background-color .15s ease;
}

.minimal-menu .sub-menu a:hover,
.minimal-menu .sub-menu .current-menu-item > a {
  color: var(--minimal-ink);

  background:
    rgba(17, 67, 121, .07);
}


/* =========================================================
   LOGIN - LOGGED OUT
   ========================================================= */

.minimal-menu
li.minimal-menu-login
> a {
  padding: 12px 22px;

  border:
    1px solid var(--minimal-ink);

  border-radius: 999px;

  color:
    var(--minimal-white, #fff);

  background:
    var(--minimal-ink);

  transition:
    border-color .18s ease,
    background-color .18s ease;
}

.minimal-menu
li.minimal-menu-login
> a:hover,
.minimal-menu
li.minimal-menu-login
> a:focus-visible {
  border-color:
    var(--minimal-accent);

  color: #fff;

  background:
    var(--minimal-accent);
}


/* =========================================================
   ACCOUNT - LOGGED IN
   ========================================================= */

.minimal-menu
.minimal-account-switcher {
  display: flex;
  align-items: center;
}

.minimal-menu
.minimal-account-switcher
> .minimal-account-trigger {
  width: 52px;
  height: 44px;

  padding: 0;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  border:
    1px solid rgba(17, 67, 121, .22);

  border-radius: 999px;

  color: var(--minimal-ink);

  background: #fff;

  cursor: pointer;

  transition:
    border-color .18s ease,
    color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.minimal-menu
.minimal-account-switcher
> .minimal-account-trigger:hover,
.minimal-menu
.minimal-account-switcher.is-open
> .minimal-account-trigger {
  border-color:
    var(--minimal-accent);

  color:
    var(--minimal-accent);

  background:
    rgba(16, 155, 197, .06);

  box-shadow:
    0 5px 16px
    rgba(17, 67, 121, .08);
}


.minimal-profile-icon {
  flex: none;

  width: 21px;
  height: 21px;
}


.minimal-account-label {
  display: none;
}


.minimal-account-chevron {
  position: relative;

  top: -1px;

  font-size: .72rem;
  line-height: 1;

  transition:
    transform .18s ease;
}


.minimal-account-switcher.is-open
.minimal-account-chevron {
  transform: rotate(180deg);
}


/* =========================================================
   ACCOUNT DROPDOWN
   ========================================================= */

.minimal-menu
.minimal-account-submenu {
  right: 0;
  left: auto;

  min-width: 205px;
}


/*
 * Account pointer belongs on the right.
 */
.minimal-menu
.minimal-account-switcher
> .minimal-account-submenu::before {
  right: 20px;
  left: auto;
}


.minimal-menu
.minimal-account-submenu
.minimal-account-submenu__link {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 12px;
}


.minimal-account-submenu__icon {
  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  color:
    rgba(17, 67, 121, .75);
}


.minimal-account-submenu__logout {
  margin-top: 5px;

  padding-top: 5px;

  border-top:
    1px solid rgba(17, 67, 121, .12);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.minimal-menu :focus-visible {
  outline:
    2px solid var(--minimal-accent);

  outline-offset: 3px;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 1050px) {

  .minimal-header-inner {
    grid-template-columns:
      1fr auto;
  }


  .minimal-menu {
    flex-direction: column;

    align-items: stretch;

    gap: 3px;
  }


  /*
   * Parent rows:
   *
   * [ Parent link        ][ v ]
   */
  .minimal-menu
  > .menu-item-has-children {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items: center;
  }


  .minimal-menu
  > li
  > a {
    padding: 11px 10px;
  }


  .minimal-submenu-toggle {
    width: 44px;
    height: 44px;

    margin-right: 3px;
  }


  /* Submenus become part of document flow */

  .minimal-menu .sub-menu {
    position: static;

    grid-column:
      1 / -1;

    min-width: 0;

    margin:
      2px 0 8px 10px;

    padding:
      4px 0 4px 14px;

    border: 0;

    border-left:
      1px solid
      var(--minimal-line);

    border-radius: 0;

    background: transparent;

    box-shadow: none;
  }


  .minimal-menu
  .sub-menu::before {
    display: none;
  }


  /* Logged-in account */

  .minimal-menu
  .minimal-account-switcher {
    display: grid;

    grid-template-columns: 1fr;
  }


  .minimal-menu
  .minimal-account-switcher
  > .minimal-account-trigger {
    width: 100%;
    height: auto;

    padding: 11px 10px;

    justify-content: flex-start;

    border: 0;

    border-radius: 7px;

    background: transparent;
  }


  .minimal-account-label {
    display: inline;
  }


  .minimal-account-chevron {
    margin-left: auto;
  }


  .minimal-menu
  .minimal-account-switcher
  > .minimal-account-submenu {
    grid-column: 1;
  }


  /* Logged-out Login */

  .minimal-menu
  li.minimal-menu-login
  > a {
    margin-top: 4px;

    text-align: center;
  }

}

/* =========================================================
   FULL DROPDOWN BUTTON
   ========================================================= */

.minimal-parent-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin: 0;
  padding: 12px 0;

  border: 0;

  border-radius: 7px;

  color: var(--minimal-ink);
  background: transparent;

  font: inherit;
  font-weight: 600;

  white-space: nowrap;

  cursor: pointer;

  transition:
    color .18s ease,
    background-color .18s ease;
}


.minimal-parent-dropdown-toggle:hover,
.menu-item-has-children.is-open
> .minimal-parent-dropdown-toggle {

  color: var(--minimal-accent);

}


.minimal-parent-dropdown-toggle__label {
  display: inline-flex;
  align-items: center;

  gap: 6px;
}


/* Polylang flag */

.minimal-parent-dropdown-toggle__label img {
  flex: 0 0 auto;
}


/* Chevron */

.minimal-parent-dropdown-toggle__chevron {
  display: inline-block;

  font-size: .72rem;
  line-height: 1;

  transition:
    transform .18s ease;
}


.menu-item-has-children.is-open
> .minimal-parent-dropdown-toggle
> .minimal-parent-dropdown-toggle__chevron {

  transform: rotate(180deg);

}