/* Header nav styles for the docs site. A static stylesheet in <head>
   (app.config.ts head.stylesheets), not part of the footer <style>: that one
   is parsed after the header, so the nav first painted unstyled (three rows
   of text links on a phone) and then jumped — a layout shift. */
/* Header nav: text links, then Search (pill), then GitHub, Discord and
   Theme as round icon buttons. Matched by href, not position, so the
   order in nav.ts can change. Icon-only links keep their text as the
   accessible name (font-size 0 hides it visually). */
.devora-nav a[href="#search-overlay"] {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--devora-border);
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  margin-left: 0.35rem;
}
.devora-nav a[href="#search-overlay"]:hover { border-color: var(--devora-accent-from); }
.devora-nav a[href="#search-overlay"]::before,
.devora-nav a:is([href^="https://github.com"], [href^="https://discord.gg"])::before,
.devora-nav a[href="#theme"]::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.devora-nav a[href="#search-overlay"]::before {
  width: 14px;
  height: 14px;
  -webkit-mask-image: var(--search-icon);
  mask-image: var(--search-icon);
}
.devora-nav a:is([href^="https://github.com"], [href^="https://discord.gg"]),
.devora-nav a[href="#theme"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--devora-border);
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  color: var(--devora-fg-muted);
  transition: border-color 0.15s, color 0.15s, transform 0.2s;
}
.devora-nav a:is([href^="https://github.com"], [href^="https://discord.gg"]):hover,
.devora-nav a[href="#theme"]:hover { border-color: var(--devora-accent-from); color: var(--devora-fg); }
.devora-nav a[href="#theme"]:active { transform: scale(0.92); }
.devora-nav a:is([href^="https://github.com"], [href^="https://discord.gg"])::before { width: 16px; height: 16px; }
.devora-nav a[href^="https://github.com"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%20.5a11.5%2011.5%200%200%200-3.64%2022.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7%201.16.08%201.77%201.19%201.77%201.19%201.03%201.77%202.7%201.26%203.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69%200-1.26.45-2.29%201.19-3.09-.12-.29-.52-1.46.11-3.05%200%200%20.97-.31%203.17%201.18a11%2011%200%200%201%205.77%200c2.2-1.49%203.17-1.18%203.17-1.18.63%201.59.23%202.76.11%203.05.74.8%201.19%201.83%201.19%203.09%200%204.42-2.7%205.39-5.26%205.68.41.36.78%201.06.78%202.14v3.17c0%20.31.21.67.8.56A11.5%2011.5%200%200%200%2012%20.5z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%20.5a11.5%2011.5%200%200%200-3.64%2022.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7%201.16.08%201.77%201.19%201.77%201.19%201.03%201.77%202.7%201.26%203.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69%200-1.26.45-2.29%201.19-3.09-.12-.29-.52-1.46.11-3.05%200%200%20.97-.31%203.17%201.18a11%2011%200%200%201%205.77%200c2.2-1.49%203.17-1.18%203.17-1.18.63%201.59.23%202.76.11%203.05.74.8%201.19%201.83%201.19%203.09%200%204.42-2.7%205.39-5.26%205.68.41.36.78%201.06.78%202.14v3.17c0%20.31.21.67.8.56A11.5%2011.5%200%200%200%2012%20.5z%22%2F%3E%3C%2Fsvg%3E"); }
.devora-nav a[href^="https://discord.gg"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.32%204.37A19.8%2019.8%200%200%200%2015.4%202.9l-.62%201.27a18.3%2018.3%200%200%200-5.56%200L8.6%202.9a19.7%2019.7%200%200%200-4.92%201.47C.57%209.05-.27%2013.6.15%2018.1a19.9%2019.9%200%200%200%206.03%203.05l1.3-2.13a12.9%2012.9%200%200%201-2.05-.98l.5-.39a14.2%2014.2%200%200%200%2012.14%200l.5.39c-.65.39-1.34.72-2.05.98l1.3%202.13a19.8%2019.8%200%200%200%206.03-3.05c.5-5.2-.84-9.72-3.53-13.73zM8.02%2015.33c-1.18%200-2.16-1.09-2.16-2.42s.95-2.42%202.16-2.42c1.2%200%202.18%201.09%202.16%202.42%200%201.33-.96%202.42-2.16%202.42zm7.97%200c-1.19%200-2.16-1.09-2.16-2.42s.95-2.42%202.16-2.42c1.2%200%202.17%201.09%202.16%202.42%200%201.33-.95%202.42-2.16%202.42z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.32%204.37A19.8%2019.8%200%200%200%2015.4%202.9l-.62%201.27a18.3%2018.3%200%200%200-5.56%200L8.6%202.9a19.7%2019.7%200%200%200-4.92%201.47C.57%209.05-.27%2013.6.15%2018.1a19.9%2019.9%200%200%200%206.03%203.05l1.3-2.13a12.9%2012.9%200%200%201-2.05-.98l.5-.39a14.2%2014.2%200%200%200%2012.14%200l.5.39c-.65.39-1.34.72-2.05.98l1.3%202.13a19.8%2019.8%200%200%200%206.03-3.05c.5-5.2-.84-9.72-3.53-13.73zM8.02%2015.33c-1.18%200-2.16-1.09-2.16-2.42s.95-2.42%202.16-2.42c1.2%200%202.18%201.09%202.16%202.42%200%201.33-.96%202.42-2.16%202.42zm7.97%200c-1.19%200-2.16-1.09-2.16-2.42s.95-2.42%202.16-2.42c1.2%200%202.17%201.09%202.16%202.42%200%201.33-.95%202.42-2.16%202.42z%22%2F%3E%3C%2Fsvg%3E"); }
.devora-nav a[href="#theme"]::before {
  width: 15px;
  height: 15px;
  -webkit-mask-image: var(--theme-icon);
  mask-image: var(--theme-icon);
}
.devora-header-left { width: 100%; }
.devora-nav { margin-left: auto; }

/* Narrow screens (the shared header stacks the nav under the logo at 640px):
   keep Search, GitHub, Discord and Theme as icon buttons on the logo's row,
   and let the text links take the row below and wrap tidily. The buttons are
   positioned inside .devora-header-inner (no markup change, nav stays a nav). */
@media (max-width: 640px) {
  .devora-header-inner { position: relative; }
  .devora-nav { gap: 0; }
  .devora-nav a { padding: 0.4rem 0.4rem; }
  .devora-nav a:is([href="#search-overlay"], [href="#theme"], [href^="https://github.com"], [href^="https://discord.gg"]) {
    position: absolute;
    top: 0.85rem;
    margin: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    font-size: 0;
    line-height: 0;
  }
  .devora-nav a[href="#theme"] { right: var(--devora-gutter); }
  .devora-nav a[href^="https://discord.gg"] { right: calc(var(--devora-gutter) + 2.5rem); }
  .devora-nav a[href^="https://github.com"] { right: calc(var(--devora-gutter) + 5rem); }
  .devora-nav a[href="#search-overlay"] { right: calc(var(--devora-gutter) + 7.5rem); }
}

/* Six text links (Home, Docs, Examples, Blog, Compare, Performance) have to fit one row on a
   phone, so the header stays as tall as it was with five. Tighter side padding from 460px down
   (the height of each link is unchanged) and a slightly smaller size on the narrowest phones. */
@media (max-width: 460px) {
  .devora-nav a:not([href="#search-overlay"], [href="#theme"], [href^="https://github.com"], [href^="https://discord.gg"]) {
    padding: 0.4rem 0.22rem;
  }
}
@media (max-width: 380px) {
  .devora-nav a:not([href="#search-overlay"], [href="#theme"], [href^="https://github.com"], [href^="https://discord.gg"]) {
    font-size: 0.78rem;
  }
}

/* ===== Phone and tablet header (up to 860px), with menu-toggle.js =====
   One 60px row: logo, then Search, Theme and a Menu (burger) button. The text links and GitHub/Discord
   move into a panel under the logo that the burger opens. Without the script (no "js-menu" class on
   <html>) none of this applies and the wrapped link row above stays. */
.devora-nav a[href="#menu"] { display: none; }
@media (max-width: 860px) {
  html.js-menu .devora-header-inner { position: relative; flex-wrap: wrap; row-gap: 0; align-content: flex-start; min-height: 60px; }
  html.js-menu .devora-brand { min-height: 44px; }
  html.js-menu .devora-nav {
    order: 3; width: 100%; margin: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.15rem;
    max-height: 0; overflow: hidden; visibility: hidden;
  }
  html.js-menu .devora-header[data-menu-open] .devora-nav {
    max-height: calc(100vh - 72px); overflow-y: auto; visibility: visible; padding: 0.5rem 0 0.9rem;
    border-top: 1px solid var(--devora-border);
  }
  /* Search, Theme and Menu stay on the logo's row, always visible */
  html.js-menu .devora-nav a:is([href="#search-overlay"], [href="#theme"], [href="#menu"]) {
    position: absolute; top: 14px; margin: 0; padding: 0; width: 2rem; height: 2rem; gap: 0;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    font-size: 0; line-height: 0; visibility: visible;
  }
  html.js-menu .devora-nav a[href="#menu"] { right: var(--devora-gutter); display: inline-flex; border: 1px solid var(--devora-border); color: var(--devora-fg-muted); }
  html.js-menu .devora-nav a[href="#theme"] { right: calc(var(--devora-gutter) + 2.5rem); }
  html.js-menu .devora-nav a[href="#search-overlay"] { right: calc(var(--devora-gutter) + 5rem); }
  html.js-menu .devora-nav a[href="#menu"]::before {
    content: ""; width: 16px; height: 16px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16M4%2012h16M4%2017h16%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16M4%2012h16M4%2017h16%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  }
  html.js-menu .devora-nav a[href="#menu"][aria-expanded="true"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206L6%2018%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206L6%2018%27%2F%3E%3C%2Fsvg%3E");
  }
  html.js-menu .devora-nav a[href="#menu"]:hover { border-color: var(--devora-accent-from); color: var(--devora-fg); }
  /* The links in the panel: full-width rows with a comfortable tap height */
  html.js-menu .devora-nav a:not([href="#search-overlay"], [href="#theme"], [href="#menu"]) {
    position: static; display: flex; align-items: center; width: auto; height: auto; min-height: 48px; padding: 0.7rem 0.75rem;
    border: 0; border-radius: 8px; font-size: 1rem; line-height: 1.3; gap: 0.7rem; justify-content: flex-start;
    color: var(--devora-fg-muted);
  }
  html.js-menu .devora-nav a:not([href="#search-overlay"], [href="#theme"], [href="#menu"]):hover { color: var(--devora-fg); background: var(--devora-hover); }
  html.js-menu .devora-nav a:is([href^="https://github.com"], [href^="https://discord.gg"])::before { width: 18px; height: 18px; }
}