/* ========================================================================
   Menu Mobile
   Consolidated responsive and mobile-only layout rules.
   ======================================================================== */

/* ===== Mobile Responsive ===== */
@media (max-width: 900px) {
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: var(--route-header-mobile-align-items);
    top: var(--route-header-mobile-top);
    width: calc(100% - var(--size-16) - var(--safe-left) - var(--safe-right));
    max-width: none;
    height: var(--route-header-mobile-height);
    padding: var(--route-header-mobile-padding-top) var(--size-12) 0 var(--size-16);
    border-radius: var(--size-20);
    min-width: 0;
  }

  .site-header.search-mode {
    padding-inline: var(--size-8);
    justify-content: center;
  }
}

@container sitemenu (max-width: 900px) {
  .site-header.search-mode .site-menu {
    display: none !important;
  }

  .site-header.search-mode .site-menu__toggle {
    display: block !important;
    position: absolute;
    right: calc(var(--size-8) + var(--safe-right));
    top: 50%;
    margin-left: 0;
    --menu-toggle-transform-rest: translateY(-50%);
    --menu-toggle-transform-hover: translateY(-50%);
    --menu-toggle-transform-active: translateY(-50%);
  }

  .site-header.search-mode .menu-search {
    display: flex;
    flex: 0 1 min(var(--size-360), calc(100% - var(--size-72)));
    width: min(var(--size-360), calc(100% - var(--size-72)));
    max-width: min(var(--size-360), calc(100% - var(--size-72)));
    margin-inline: auto;
  }

  .site-logo__container {
    position: relative;
    left: 0;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: var(--size-8);
  }

  .site-menu__toggle {
    display: block;
    position: relative;
    right: 0;
    top: 0;
    margin-left: var(--size-8);
    --menu-toggle-transform-rest: none;
    --menu-toggle-transform-hover: none;
    --menu-toggle-transform-active: none;
    --menu-toggle-transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  }

  .site-menu {
    position: fixed;
    top: calc(var(--size-60) + var(--safe-top));
    right: calc(var(--size-8) + var(--safe-right));
    width: min(82vw, var(--size-260));
    max-height: calc(
      var(--viewport-height) - var(--size-76) - var(--safe-top) - var(--safe-bottom)
    );
    overflow-y: auto;
    padding: 0;
    left: auto;
    background: var(--route-header-bg, var(--component-header-bg));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: var(--size-1) solid var(--route-header-border, var(--component-separator));
    border-radius: var(--size-20);
    box-shadow: var(
      --component-shadow-depth-3,
      0 var(--size-12) var(--size-48) color-mix(in srgb, var(--clr-black) 50%, transparent)
    );
    transform: translateY(calc(var(--size-10) * -1)) scale(0.95);
    transform-origin: top right;
    transition:
      transform 0.4s var(--component-spring-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)),
      opacity 0.3s ease,
      visibility 0.3s,
      background 0.24s ease,
      border-color 0.24s ease,
      box-shadow 0.24s ease,
      backdrop-filter 0.24s ease,
      -webkit-backdrop-filter 0.24s ease;
    flex-direction: column;
    gap: 0;
    z-index: calc(var(--z-overlay) - var(--z-base));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .site-menu.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: linear-gradient(
      145deg,
      color-mix(
          in srgb,
          var(--route-header-bg, var(--component-header-bg)) 88%,
          rgb(255 255 255 / 14%)
        )
        0%,
      color-mix(
          in srgb,
          var(--route-header-bg, var(--component-header-bg)) 94%,
          rgb(140 184 255 / 10%)
        )
        55%,
      color-mix(in srgb, var(--route-header-bg, var(--component-header-bg)) 96%, rgb(0 0 0 / 14%))
        100%
    );
    border-color: color-mix(
      in srgb,
      var(--route-header-border, var(--component-separator)) 78%,
      rgb(193 222 255 / 46%)
    );
    box-shadow:
      0 var(--size-14) var(--size-42) color-mix(in srgb, var(--clr-black) 46%, transparent),
      inset 0 var(--size-1) 0 color-mix(in srgb, var(--clr-white) 24%, transparent);
    backdrop-filter: blur(var(--size-18)) saturate(125%) brightness(1.04);
    -webkit-backdrop-filter: blur(var(--size-18)) saturate(125%) brightness(1.04);
  }

  .site-menu__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--size-48);
    grid-auto-rows: minmax(var(--size-48), auto);
    align-items: start;
    width: 100%;
    padding: var(--size-10) var(--size-10) var(--size-12);
    column-gap: var(--size-10);
    row-gap: var(--size-6);
  }

  .site-menu__list li {
    width: auto;
    min-width: 0;
    opacity: 0;
    transform: translateX(var(--size-10));
    transition-delay: 0s;
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  .site-menu__list li.menu-nav-item {
    grid-column: 1;
    width: 100%;
    justify-self: start;
  }

  .site-menu__list li.menu-nav-item a {
    width: 100%;
    max-width: none;
    padding-inline: var(--size-10) var(--size-14);
  }

  .site-menu__list li.menu-nav-item .nav-icon-wrapper {
    margin-right: var(--size-8);
  }

  .site-menu__list li.menu-utility-item {
    grid-column: 2;
    width: var(--size-48);
    justify-self: center;
    margin-right: 0;
  }

  .site-menu__list li.menu-utility-item--search {
    grid-row: 1;
  }

  .site-menu__list li.menu-utility-item--contact {
    grid-row: 2;
  }

  .site-menu__list li.menu-utility-item--theme {
    grid-row: 3;
  }

  .site-menu__list li.menu-utility-item--lang {
    grid-row: 4;
  }

  .site-menu.open .site-menu__list li {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(var(--menu-item-index, 0) * 0.05s);
  }

  .site-menu__list li a,
  .site-menu__list button.search-trigger,
  .site-menu__list button.contact-trigger,
  .site-menu__list button.lang-toggle,
  .site-menu__list button.theme-toggle {
    min-height: var(--size-48);
    font-size: var(--size-15);
    font-weight: 500;
    padding: 0 var(--size-12);
    border-radius: var(--size-14);
    background: transparent;
    border: none;
    color: var(--component-label-primary);
    justify-content: flex-start;
  }

  .site-menu__list li a:hover,
  .site-menu__list li a:active,
  .site-menu__list button:hover,
  .site-menu__list button:active {
    background: var(--component-fill-primary);
    transform: scale(1.02);
  }

  .site-menu__list li a.active {
    background: var(--component-fill-secondary);
    border-color: transparent;
  }

  .site-menu__list li.menu-utility-item button.search-trigger,
  .site-menu__list li.menu-utility-item button.contact-trigger,
  .site-menu__list li.menu-utility-item button.lang-toggle,
  .site-menu__list li.menu-utility-item button.theme-toggle {
    width: var(--size-48);
    min-width: var(--size-48);
    height: var(--size-48);
    min-height: var(--size-48);
    padding: 0;
    justify-content: center;
    border-radius: var(--size-14);
  }

  .site-menu__list li.menu-utility-item .lang-text {
    display: none;
  }

  .site-menu__list li.menu-utility-item--lang button.lang-toggle {
    flex-direction: column;
    gap: var(--size-3);
    height: var(--size-52);
    min-height: var(--size-52);
    padding-block: var(--size-6);
  }

  .site-menu__list li.menu-utility-item--lang .lang-text {
    display: block;
    margin-left: 0;
    font-size: var(--size-9);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    opacity: 0.9;
  }

  .site-menu__list li.menu-utility-item .icon-container {
    margin-right: 0;
  }

  .site-menu__list li.menu-utility-separator {
    display: flex;
    grid-column: 2;
    grid-row: 1 / span 4;
    justify-self: start;
    align-self: stretch;
    width: var(--size-1);
    min-width: var(--size-1);
    padding: 0;
    transform: translateX(calc(var(--size-6) * -1));
    pointer-events: none;
  }

  .site-menu__list li.menu-utility-separator .menu-utility-separator__line {
    height: 100%;
    opacity: 0.3;
  }

  .menu-search__bar {
    min-height: var(--size-40);
    gap: var(--size-8);
    padding: var(--size-5) var(--size-6) var(--size-5) var(--size-10);
  }

  .menu-search__count-hint {
    display: none;
  }

  .menu-search__results {
    max-height: min(56vh, var(--size-380));
    padding: var(--size-8);
  }
}

/* ===== Extra Small Screens ===== */
@media (max-width: 480px) {
  .site-header {
    width: calc(100% - var(--size-12) - var(--safe-left) - var(--safe-right));
    padding: 0 var(--size-12);
  }
}

@container sitemenu (max-width: 480px) {
  .site-menu__toggle {
    right: var(--size-12);
    width: var(--size-44);
    height: var(--size-44);
  }

  .site-menu {
    left: auto;
    right: calc(var(--size-6) + var(--safe-right));
    width: min(84vw, var(--size-236));
    max-width: calc(100vw - var(--size-12) - var(--safe-right));
    top: calc(var(--size-60) + var(--safe-top));
  }

  .menu-search__bar {
    min-height: var(--size-38);
    gap: var(--size-6);
    border-radius: var(--size-14);
  }

  .menu-search__input {
    font-size: var(--size-16);
  }

  .menu-search__results {
    left: calc(var(--size-2) * -1);
    right: calc(var(--size-2) * -1);
  }

  .menu-search__ai-chat {
    margin-bottom: var(--size-4);
    padding: var(--size-10);
  }

  .menu-search__result {
    padding: var(--size-10);
    border-radius: var(--size-12);
  }

  .menu-search__title {
    font-size: var(--size-13);
  }

  .menu-search__url {
    font-size: var(--size-10);
  }

  .menu-search__desc {
    font-size: var(--size-11);
  }
}