/* C concept: light full-width sheet. Desktop navigation stays unchanged. */

/* Decorative icons follow the existing server-selected navigation items. */
.mobile-navigation [data-mobile-item="recipes"] { --menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205c3-1%206-1%209%201v15c-3-2-6-2-9-1V5Zm9%201c3-2%206-2%209-1v15c-3-1-6-1-9%201%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-navigation [data-mobile-item="submission"] { --menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%208v8m-4-4h8%20M22%2012a10%2010%200%201%201-20%200%2010%2010%200%200%201%2020%200%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-navigation [data-mobile-item="dashboard"] { --menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h8l4%204v14H6V3Zm8%200v5h4M9%2012h6m-6%204h6%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-navigation [data-mobile-item="saved"] { --menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.7l-1.1-1.1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.6a5.5%205.5%200%200%200%200-7.8%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-navigation [data-mobile-item="rewards"] { --menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208h18v4H3V8Zm2%204v9h14v-9M12%208v13m0-13C3%208%205%200%209%203l3%205Zm0%200c9%200%207-8%203-5l-3%205%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-navigation [data-mobile-item="profile"] { --menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200ZM4%2021v-2a8%208%200%200%201%2016%200v2H4Z%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-navigation [data-mobile-item="staff"] { --menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2016-1%205%205-1L21%207l-6-6L4%2016Zm8-12%206%206%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-navigation [data-mobile-item="logout"] { --menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203H3v18h6m6-15%206%206-6%206m-8-6h14%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-navigation [data-mobile-item="login"] { --menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h6v18h-6M9%206l6%206-6%206M3%2012h12%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-navigation [data-mobile-item="registration"] { --menu-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200ZM2%2021v-2a7%207%200%200%201%2011-5m5-2v8m-4-4h8%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-navigation > .mobile-menu-backdrop { display: none; }

@media (width < 82rem) {
  .mobile-menu-open .site-header { position: relative; z-index: 120; }
  .mobile-navigation[open] > summary { position: relative; z-index: 123; color: var(--color-mint-500); }
  .mobile-navigation > summary::before {
    content: ""; width: 1.45rem; height: 1.45rem; margin: 0; background: currentcolor;
    --toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18M3 12h18M3 19h18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask: var(--toggle-icon) center / contain no-repeat;
    mask: var(--toggle-icon) center / contain no-repeat;
  }
  .mobile-navigation[open] > summary::before {
    content: ""; width: 1.25rem; height: 1.25rem;
    --toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 4 16 16M20 4 4 20' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .mobile-menu-enhanced .mobile-navigation[open] > .mobile-menu-backdrop {
    position: fixed; z-index: 121; inset: var(--menu-top, 5rem) 0 0;
    display: block; width: 100%; height: auto; padding: 0; border: 0; border-radius: 0;
    background: rgb(31 15 42 / 48%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    cursor: default;
  }
  .mobile-navigation > nav {
    position: fixed; z-index: 122; inset: var(--menu-top, 5rem) 0 auto;
    width: 100%; max-height: var(--menu-height, calc(100dvh - 5.5rem));
    display: grid; gap: .5rem; padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid #e7dfee; border-radius: 1.5rem;
    color: var(--color-purple-900); background: #f5f1f9;
    box-shadow: 0 16px 36px rgb(27 12 37 / 22%);
    scrollbar-width: thin;
  }
  .mobile-navigation > nav > a,
  .mobile-navigation .staff-navigation > summary,
  .mobile-navigation .navigation-logout button {
    display: flex; align-items: center; gap: .875rem; width: 100%; min-height: 3rem;
    padding: .65rem .875rem; border: 1px solid transparent; border-radius: .875rem;
    color: var(--color-purple-900); background: white;
    font-size: 1rem; font-weight: 750; line-height: 1.35;
    text-align: start; white-space: normal; overflow-wrap: anywhere;
    box-shadow: none;
  }
  .mobile-navigation [data-mobile-item]::before {
    content: ''; width: 1.35rem; height: 1.35rem; flex: 0 0 1.35rem;
    background: currentcolor;
    -webkit-mask: var(--menu-icon) center / contain no-repeat;
    mask: var(--menu-icon) center / contain no-repeat;
  }
  .mobile-navigation > nav > a::after,
  .mobile-navigation .staff-navigation > summary::after {
    content: ''; width: .45rem; height: .45rem; flex: 0 0 .45rem;
    margin-inline-start: auto; border: solid currentcolor; border-width: 0 1.5px 1.5px 0;
    transform: rotate(-45deg); opacity: .65;
  }
  .mobile-navigation .staff-navigation > summary::after { transform: rotate(45deg); }
  .mobile-navigation .staff-navigation[open] > summary::after { transform: rotate(225deg); }
  .mobile-navigation > nav > a[data-mobile-item="submission"] {
    background: var(--color-mint-500); color: var(--color-purple-900);
  }
  .mobile-navigation > nav > a.is-active,
  .mobile-navigation > nav > a[aria-current="page"] {
    border-color: #79caba; background: var(--color-mint-100); color: var(--color-purple-900); box-shadow: none;
  }
  .mobile-navigation > nav > a[data-mobile-item="submission"].is-active { background: var(--color-mint-500); }
  .mobile-navigation > nav > a:hover,
  .mobile-navigation .staff-navigation > summary:hover,
  .mobile-navigation .navigation-logout button:hover { color: var(--color-purple-900); background: #e3f5f0; }
  .mobile-navigation .staff-navigation,
  .mobile-navigation .navigation-logout {
    margin: .25rem 0 0; padding: .5rem 0 0; border: 0; border-top: 1px solid #dcd0e5; box-shadow: none;
  }
  .mobile-navigation .staff-navigation + .navigation-logout { margin: 0; padding: 0; border: 0; }
  .mobile-navigation .staff-navigation > summary,
  .mobile-navigation .navigation-logout button { background: transparent; }
  .mobile-navigation .staff-navigation__menu { margin-top: .25rem; padding: .25rem 0 .25rem 1rem; }
  .mobile-navigation .staff-navigation__menu a {
    min-height: 2.75rem; color: var(--color-purple-900); font-size: .9375rem;
    line-height: 1.4; white-space: normal; box-shadow: none;
  }
  .mobile-navigation .staff-navigation__menu a:hover,
  .mobile-navigation .staff-navigation__menu a[aria-current="page"] { color: var(--color-purple-900); background: var(--color-mint-100); }
  .mobile-navigation > nav:focus { outline: none; }
  .mobile-navigation > nav :focus-visible { outline: 2px solid var(--color-purple-700); outline-offset: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    .mobile-navigation[open] > nav { animation: mobile-menu-arrive 150ms ease-out; }
    @keyframes mobile-menu-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  }
}