/*
 * Ariol Auto — desktop menu of the site header: the shortcode [ariol_nav] (ARIOL_SITE_HEADER_V2 in
 * functions.php), behaviour in ariol-header-v2.js. Same look as the language switcher in ariol-site.css (one style
 * for the menu and the language switcher); every value is a design-system token.
 *   .ariol-menu-nav > ul.ariol-menu > li.ariol-menu__item[.ariol-menu__item--parent][.is-current][.is-open]
 *     > a.ariol-menu__link > span.ariol-menu__inner > [span.ariol-menu__icon > svg] span.ariol-menu__label
 *     > ul.ariol-menu__sub > li > a.ariol-menu__sublink
 */

/* ---------- Row of top-level items (right-aligned, as the header layout expects) ---------- */

#ariol-site-header .ariol-menu-nav { position: relative; width: 100%; }
#ariol-site-header .ariol-menu {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: stretch;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#ariol-site-header .ariol-menu > li { display: flex; position: relative; margin: 0; padding: 0; list-style: none; }

/* ---------- Top-level items (same as the language toggle in ariol-site.css) ---------- */

#ariol-site-header .ariol-menu > li > a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 11px var(--aa-menu-pad-x);
  color: var(--aa-white);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: var(--aa-menu-font);
  letter-spacing: 0;
  text-decoration: none;
  transition: color var(--aa-duration) ease;
}
#ariol-site-header .ariol-menu__inner { display: flex; flex-wrap: wrap; align-items: center; }
#ariol-site-header .ariol-menu__label { display: block; margin: 0; padding: 0; font: inherit; color: inherit; }
/* Hover/open, and the current page — not in-page anchors (#services on the home page). */
#ariol-site-header :is(.ariol-menu > li:hover > a, .ariol-menu > li.is-open > a, .ariol-menu > li.is-current > a:not([href*="#"])) {
  color: var(--aa-accent);
}

/* Home item: a house icon; the label stays for screen readers (visually hidden). */
#ariol-site-header .ariol-menu__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin: 0;
  color: inherit;
  font-size: 16px;
  line-height: 22px;
}
#ariol-site-header .ariol-menu__icon svg { display: block; width: 18px; height: 16px; fill: currentColor; }
#ariol-site-header .ariol-menu > li.ariol-menu-home .ariol-menu__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* One dropdown chevron; it turns while its panel is open. */
#ariol-site-header .ariol-menu > li.ariol-menu__item--parent > a .ariol-menu__label::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--aa-duration) var(--aa-ease);
}
#ariol-site-header .ariol-menu > li.is-open > a .ariol-menu__label::after { transform: translateY(3px) rotate(225deg); }

/* ---------- Dropdown panel (same as the language list in ariol-site.css) ---------- */

#ariol-site-header .ariol-menu__sub {
  position: absolute;
  z-index: 999;
  top: 100%;
  left: 0;
  right: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: max-content;
  min-width: 72px;
  max-width: 340px;
  margin: var(--aa-panel-offset) 0 0;
  /* Item text sits exactly under the trigger's label. */
  margin-left: calc(var(--aa-menu-pad-x) - var(--aa-panel-pad) - var(--aa-panel-item-pad-x));
  padding: var(--aa-panel-pad);
  list-style: none;
  background: var(--aa-dark);
  border: 0;
  border-radius: var(--aa-radius-menu);
  box-shadow: var(--aa-shadow-menu);
  text-align: left;
  line-height: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--aa-duration) var(--aa-ease), visibility var(--aa-duration);
}
/* Opening: visible at once (fades in), so the keyboard can focus the first item immediately;
 * closing keeps the fade-out delay above. */
#ariol-site-header .ariol-menu > li.is-open > .ariol-menu__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--aa-duration) var(--aa-ease), visibility 0s;
}
/* Invisible bridge over the gap, so moving the pointer from the item to its panel keeps it open. */
#ariol-site-header .ariol-menu__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--aa-panel-offset);
}
#ariol-site-header .ariol-menu__sub > li { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
#ariol-site-header .ariol-menu__sublink {
  display: block;
  margin: 0;
  padding: 11px var(--aa-panel-item-pad-x);
  color: var(--aa-white);
  background: transparent;
  border-radius: var(--aa-radius-control);
  font: var(--aa-menu-item-font);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--aa-duration) ease, color var(--aa-duration) ease;
}
@media (hover: hover) {
  #ariol-site-header .ariol-menu__sublink:hover {
    background: var(--aa-hover-dark);
    color: var(--aa-accent);
  }
}