/* Ported from components/Nav/index.tsx's Tailwind utility classes into
   plain hand-written CSS (this theme has no Tailwind build step). */

.p3-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color .5s, backdrop-filter .5s, border-color .5s;
  background: transparent;
}
.p3-nav--scrolled {
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.p3-nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; height: 68px; gap: 32px;
}
@media (min-width: 768px) { .p3-nav-inner { height: 80px; padding: 0 40px; } }

.p3-nav-logo { display: flex; align-items: center; margin-right: auto; }
.p3-nav-logo img { height: 28px; width: auto; transition: transform .3s ease, filter .3s ease; }
.p3-nav-logo:hover img { transform: scale(1.03); filter: drop-shadow(0 0 10px rgba(255,255,255,.3)); }
@media (min-width: 768px) { .p3-nav-logo img { height: 36px; } margin-right:0; }

.p3-nav-links { display: none; align-items: center; gap: 4px; background: rgba(255,255,255,.07); border-radius: 999px; padding: 6px; }
.p3-nav-links a { padding: 8px 16px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s, background-color .2s; }
.p3-nav-links a:hover { color: #fff; background: rgba(255,255,255,.09); }

.p3-lang-switch { display: none; align-items: center; gap: 4px; }
.p3-lang-switch a { padding: 6px 10px; border-radius: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.35); text-decoration: none; transition: color .2s, background-color .2s; }
.p3-lang-switch a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.1); }
.p3-lang-switch a:hover { color: #fff; }
.p3-lang-switch--compact { margin-top: 16px; justify-content: center; }

.p3-nav-cta { display: none; align-items: center; gap: 12px; background: rgba(255,255,255,.07); border-radius: 999px; padding: 6px 6px 6px 20px; text-decoration: none; transition: background-color .2s; }
.p3-nav-cta:hover { background: rgba(255,255,255,.11); }
.p3-nav-cta span.label { font-size: .8rem; font-weight: 700; color: #fff; letter-spacing: .01em; }
.p3-nav-cta .icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; background: #45454a; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.p3-nav-cta:hover .icon { transform: scale(1.1); }

.p3-nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; }
.p3-nav-burger span { display: block; height: 1px; background: #fff; transition: all .3s; width: 20px; }
.p3-nav-burger span:nth-child(2) { width: 16px; }
.p3-nav-burger--open span:nth-child(1) { width: 20px; transform: rotate(45deg) translateY(6px); }
.p3-nav-burger--open span:nth-child(2) { opacity: 0; width: 0; }
.p3-nav-burger--open span:nth-child(3) { width: 20px; transform: rotate(-45deg) translateY(-6px); }

.p3-nav-mobile { display: none; overflow: hidden; max-height: 0; transition: max-height .4s ease-in-out; }
.p3-nav-mobile--open { max-height: 500px; }
.p3-nav-mobile-inner { background: rgba(0,0,0,.95); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,.06); padding: 28px 24px; display: flex; flex-direction: column; gap: 4px; }
.p3-nav-mobile-inner a { color: rgba(255,255,255,.65); text-decoration: none; font-size: 1rem; font-weight: 700; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.p3-nav-mobile-inner a:last-of-type { border-bottom: 0; }
.p3-nav-mobile-inner a:hover { color: #fff; }
.p3-nav-mobile-cta { margin-top: 16px; background: #45454a; color: #fff !important; text-align: center; font-size: .9rem; font-weight: 700; padding: 12px 24px; border-radius: 999px; border-bottom: none !important; }

@media (min-width: 768px) {
  .p3-nav-links, .p3-lang-switch, .p3-nav-cta { display: flex; }
  .p3-nav-burger, .p3-nav-mobile { display: none !important; }
}
@media (max-width: 767px) {
  .p3-nav-mobile { display: block; }
}
