/* WN_Mobile_Header – theme switch as an icon dropdown on phones, burger menu as a dropdown panel
   with a dimmed page behind it. Desktop keeps the inline pill switch.
   Icon buttons use flex, not grid: their hidden label text would form a second grid row and push the icon up. */
.wn-theme-switch {
  --wn-ico-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --wn-ico-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  --wn-ico-system: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
  --wn-ico-mode: var(--wn-ico-system);
  position: relative;
}
.wn-theme-switch[data-mode="light"] { --wn-ico-mode: var(--wn-ico-sun); }
.wn-theme-switch[data-mode="dark"] { --wn-ico-mode: var(--wn-ico-moon); }
.wn-theme-trigger { display: none; }
.wn-theme-menu { display: contents; }

@media (max-width: 760px) {
  .landingpage .wn-theme-switch { padding: 0; border: 0; background: none; }
  .landingpage .wn-theme-trigger {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0;
    border: 1px solid var(--wn-line); border-radius: 999px;
    background: color-mix(in srgb, var(--wn-surface) 82%, transparent);
    color: transparent !important; font-size: 0 !important; line-height: 0; cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
  }
  .landingpage .wn-theme-trigger::before {
    content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: var(--wn-ink);
    -webkit-mask: var(--wn-ico-mode) center / contain no-repeat; mask: var(--wn-ico-mode) center / contain no-repeat;
  }
  .landingpage .wn-theme-switch.is-open .wn-theme-trigger { border-color: var(--wn-green); background: var(--wn-mint); }
  .landingpage .wn-theme-switch.is-open .wn-theme-trigger::before { background: var(--wn-green); }

  .landingpage .wn-theme-menu {
    position: absolute; top: calc(100% + 10px); right: -46px; z-index: 30;
    min-width: 172px; display: grid; gap: 2px; padding: 6px;
    border: 1px solid var(--wn-line); border-radius: 14px;
    background: var(--wn-surface);
    box-shadow: 0 18px 44px rgba(0, 30, 25, .22);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }
  html[data-aorta-theme="dark"] .landingpage .wn-theme-menu { background: #05362f; box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
  .landingpage .wn-theme-switch.is-open .wn-theme-menu {
    opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease;
  }
  .landingpage .wn-theme-menu .wn-theme-toggle {
    width: 100%; height: 40px; display: flex; align-items: center; justify-content: flex-start; gap: 11px;
    padding: 0 12px; border-radius: 9px; overflow: visible;
    color: var(--wn-ink) !important; font-size: .86rem !important; font-weight: 600; text-align: left;
  }
  .landingpage .wn-theme-menu .wn-theme-toggle::before {
    content: ""; width: 17px; height: 17px; flex: 0 0 17px; transform: none; background: var(--wn-ink-soft);
    -webkit-mask: var(--wn-ico) center / contain no-repeat; mask: var(--wn-ico) center / contain no-repeat;
  }
  .landingpage .wn-theme-menu .wn-theme-light { --wn-ico: var(--wn-ico-sun); }
  .landingpage .wn-theme-menu .wn-theme-dark { --wn-ico: var(--wn-ico-moon); }
  .landingpage .wn-theme-menu .wn-theme-system { --wn-ico: var(--wn-ico-system); }
  .landingpage .wn-theme-menu .wn-theme-toggle:hover { background: color-mix(in srgb, var(--wn-mint) 70%, transparent); }
  .landingpage .wn-theme-menu .wn-theme-toggle[aria-pressed="true"] { background: var(--wn-mint); color: var(--wn-green) !important; box-shadow: none; }
  .landingpage .wn-theme-menu .wn-theme-toggle[aria-pressed="true"]::before { background: var(--wn-green); }
  .landingpage .wn-theme-menu .wn-theme-toggle[aria-pressed="true"]::after {
    content: ""; margin-left: auto; width: 14px; height: 14px; background: var(--wn-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .landingpage .wn-nav { gap: 10px; }
}

/* Burger menu (shown up to 1080px) */
@media (max-width: 1080px) {
  .landingpage .wn-nav-toggle {
    width: 40px; height: 40px; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--wn-line); border-radius: 12px;
    background: color-mix(in srgb, var(--wn-surface) 82%, transparent);
    color: transparent !important; font-size: 0 !important; line-height: 0;
    transition: border-color .18s ease, background-color .18s ease;
  }
  .landingpage .wn-nav-toggle::before {
    content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: var(--wn-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .landingpage .wn-nav-toggle[aria-expanded="true"] { border-color: var(--wn-green); background: var(--wn-mint); }
  .landingpage .wn-nav-toggle[aria-expanded="true"]::before {
    background: var(--wn-green);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  }

  .landingpage .wn-mobile-panel {
    position: absolute; left: 10px; right: 10px; top: calc(100% + 8px); z-index: 20;
    max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--wn-line); border-radius: 18px;
    background: var(--wn-surface);
    box-shadow: 0 24px 60px rgba(0, 30, 25, .28);
  }
  html[data-aorta-theme="dark"] .landingpage .wn-mobile-panel { background: #05362f; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
  .landingpage .wn-mobile-panel.is-open { animation: wnMenuIn .2s ease both; }
  .landingpage .wn-mobile-inner { width: auto; padding: 8px 10px 10px; }
  .landingpage .wn-mobile-panel a, .landingpage .wn-mobile-panel summary {
    padding: 13px 12px; border-radius: 10px; font-size: .98rem; font-weight: 600; text-decoration: none;
  }
  .landingpage .wn-mobile-panel a:hover, .landingpage .wn-mobile-panel summary:hover { background: color-mix(in srgb, var(--wn-mint) 70%, transparent); }
  .landingpage .wn-mobile-panel summary { list-style: none; display: flex; align-items: center; justify-content: space-between; }
  .landingpage .wn-mobile-panel summary::-webkit-details-marker { display: none; }
  .landingpage .wn-mobile-panel summary::after {
    content: ""; width: 16px; height: 16px; background: var(--wn-ink-soft); transition: transform .18s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .landingpage .wn-mobile-panel details[open] > summary::after { transform: rotate(180deg); }
  .landingpage .wn-mobile-panel .wn-mobile-sub { padding: 10px 12px 10px 24px !important; font-size: .9rem; font-weight: 500; }
  .landingpage .wn-mobile-panel a.wn-mobile-account { margin-top: 6px; padding-top: 14px; border-radius: 0 0 10px 10px; }

  /* dimmed page behind the open menu; a tap on it closes the menu (WN_Theme_Switch_Cursor) */
  .landingpage:has(.wn-mobile-panel.is-open)::after {
    content: ""; position: fixed; inset: 0; z-index: 9;
    background: rgba(0, 25, 21, .48);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: wnFadeIn .2s ease both;
  }
  html:has(.wn-mobile-panel.is-open) { overflow: hidden; }
}
@keyframes wnMenuIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes wnFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .landingpage .wn-mobile-panel.is-open, .landingpage:has(.wn-mobile-panel.is-open)::after { animation: none; }
}