/* ===========================================================================
   Avo Agency · shared navigation (every page: studio home, apps, blog, legal)
   Self-contained: prefixed .avn, no dependency on page stylesheets.
   Markup is written into each page by scripts/nav.py.
   =========================================================================== */
.avn {
  --avn-bg: rgba(21, 25, 27, 0.86);
  --avn-ink: #fff;
  --avn-dim: rgba(255, 255, 255, 0.72);
  --avn-line: rgba(255, 255, 255, 0.14);
  --avn-gold: #F2BE2E;
  --avn-sea: #8CCBE0;
  --avn-e: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  padding: 14px clamp(12px, 3vw, 28px) 0;
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  pointer-events: none;
  transition: padding .45s var(--avn-e), transform .45s var(--avn-e);
}
.avn * { box-sizing: border-box; }
.avn.is-scrolled { padding-top: 8px; }
.avn.is-hidden { transform: translateY(-120%); }
.avn-bar {
  pointer-events: auto;
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--avn-bg); color: var(--avn-ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 999px; padding: 7px 7px 7px 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 12px 34px rgba(10, 14, 16, 0.24);
}
.avn a { color: inherit; text-decoration: none; }
.avn :focus-visible { outline: 2px solid var(--avn-gold); outline-offset: 2px; border-radius: 999px; }

.avn-logo { display: flex; align-items: center; gap: 10px; padding-right: 6px; }
.avn-logo img { width: 32px; height: 32px; border-radius: 10px; display: block; }
.avn-logo b { display: block; font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; line-height: 1.1; }
.avn-logo small { display: block; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.5); line-height: 1.2; }

.avn-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.avn-links > a, .avn-drop > button {
  font: 500 15px/1 "Hanken Grotesk", system-ui, sans-serif; color: var(--avn-dim);
  padding: 10px 14px; border-radius: 999px; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: color .2s, background .2s;
}
.avn-links > a:hover, .avn-drop > button:hover, .avn-drop.is-open > button { color: #fff; background: rgba(255,255,255,.08); }
.avn-links > a[aria-current="page"] { color: #fff; }
.avn-drop { position: relative; }
.avn-drop > button svg { width: 12px; height: 12px; transition: transform .35s var(--avn-e); }
.avn-drop.is-open > button svg { transform: rotate(180deg); }
.avn-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; width: 340px;
  background: rgba(21, 25, 27, 0.96); border-radius: 22px; padding: 8px;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,.1) inset, 0 24px 60px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(.98); transform-origin: top center;
  transition: opacity .25s var(--avn-e), transform .35s var(--avn-e), visibility 0s .35s;
}
.avn-drop.is-open .avn-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.avn-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; transition: background .2s; }
.avn-menu a:hover { background: rgba(255,255,255,.07); }
.avn-menu img { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.avn-menu b { display: block; font-weight: 700; font-size: 15px; color: #fff; line-height: 1.2; }
.avn-menu i { display: block; font-style: normal; font-size: 13px; color: rgba(255,255,255,.55); }
.avn-menu .avn-all { justify-content: center; color: var(--avn-sea); font-weight: 600; font-size: 14px; margin-top: 4px; border-top: 1px solid var(--avn-line); border-radius: 0 0 14px 14px; padding-top: 13px; }

.avn-clock { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.6); padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.avn-clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: avn-pulse 2.6s infinite; }
@keyframes avn-pulse { 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.avn-lang { font-size: 14px; font-weight: 600; color: var(--avn-dim); padding: 9px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); white-space: nowrap; }
.avn-lang:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }
.avn-cta { font-weight: 700; font-size: 15px; background: var(--avn-gold); color: #15191B !important; padding: 11px 19px; border-radius: 999px; white-space: nowrap; transition: background .2s, transform .2s var(--avn-e); }
.avn-cta:hover { background: #ffd457; transform: translateY(-1px); }
.avn-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; place-items: center; }
.avn-burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: background .2s; }
.avn-burger span::before, .avn-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--avn-e); }
.avn-burger span::before { transform: translateY(-6px); }
.avn-burger span::after { transform: translateY(6px); }
.avn-burger[aria-expanded="true"] span { background: transparent; }
.avn-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.avn-burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

.avn-panel {
  pointer-events: auto;
  max-width: 1180px; margin: 8px auto 0; background: #15191B; color: #fff;
  border-radius: 24px; padding: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  display: none;
}
.avn-panel.is-open { display: grid; animation: avn-in .35s var(--avn-e); }
@keyframes avn-in { from { opacity: 0; transform: translateY(-8px); } }
.avn-panel a { padding: 14px 16px; border-radius: 16px; font-size: 18px; font-weight: 600; }
.avn-panel a:hover { background: rgba(255,255,255,.07); }
.avn-panel .avn-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 6px 4px; }
.avn-panel .avn-apps a { display: grid; justify-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 10px 4px; text-align: center; }
.avn-panel .avn-apps img { width: 44px; height: 44px; border-radius: 12px; }

@media (max-width: 1120px) { .avn-clock { display: none; } }
@media (max-width: 960px) {
  .avn-links, .avn-bar > .avn-lang { display: none; }
  .avn-burger { display: grid; }
  .avn-cta { margin-left: auto; padding: 10px 15px; font-size: 14px; }
}
@media (max-width: 420px) {
  .avn-logo small { display: none; }
  .avn-cta { padding: 10px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .avn, .avn * { transition: none !important; animation: none !important; }
}
/* pages whose content starts at the top of the document (blog, legal) */
body.avn-pad { padding-top: 88px; }