/**
 * Unione Partners
 */

/* ===== Navbar ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  background-color: hsla(0, 0%, 100%, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
  animation: navbarSlideDown 0.6s ease-out;
  width: 100%;
  max-width: 100vw;
  overflow: visible;
}

@keyframes navbarSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-height);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* ===== Logo ===== */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-img {
  height: 2rem;
  width: auto;
  transition: transform 0.2s ease;
}

.logo:hover .logo-img {
  transform: scale(1.05);
}

@media (min-width: 640px) {
  .logo-img { height: 2.25rem; }
}

/* ===== Footer Logo ===== */
.footer-logo-img {
  height: 2.5rem;
  width: auto;
}

@media (min-width: 640px) {
  .footer-logo-img { height: 3rem; }
}

/* ===== Navigation Tabs (Desktop) ===== */
.nav-tabs {
  display: none;
  align-items: center;
  gap: 0;
  background-color: hsla(0, 0%, 96%, 0.5);
  border-radius: var(--radius-full);
  padding: 0.25rem;
  position: relative;
}

@media (min-width: 1024px) { .nav-tabs { display: flex; } }

/* ===== Nav Tab - thinner ===== */

.nav-tab {
  position: relative;
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  border-radius: var(--radius-full);
  transition: color var(--transition-base);
  z-index: 1;
  white-space: nowrap;
}

.nav-tab:hover { color: var(--foreground); }
.nav-tab.active { color: var(--background); }

.nav-indicator {
  position: absolute;
  border-radius: var(--radius-full);
  z-index: 0;
  pointer-events: none;
  transition: 
    left 0.35s var(--easing-smooth),
    width 0.35s var(--easing-smooth),
    top 0.35s var(--easing-smooth),
    bottom 0.35s var(--easing-smooth),
    background-color 0.35s var(--easing-smooth),
    border 0.35s var(--easing-smooth);
  top: 0.25rem;
  bottom: 0.25rem;
  background-color: var(--foreground);
  border: 2px solid transparent;
}

.nav-indicator.frame-mode {
  top: 0;
  bottom: 0;
  left: 0 !important;
  right: 0;
  width: 100% !important;
  background-color: transparent;
  border: 2px solid var(--foreground);
}

/* ===== Dropdown Container ===== */
.nav-dropdown-container {
  display: none;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 1024px) { .nav-dropdown-container { display: flex; } }

.nav-dropdown-container.internal-page {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  justify-content: center;
}

/* ===== Page Indicator (Internal Pages) ===== */
.nav-page-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--foreground);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.5rem;
  box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.15);
}

.nav-page-indicator svg {
  width: 1rem;
  height: 1rem;
  color: var(--background);
}

.nav-page-indicator span {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--background);
}

/* ===== Dropdown Arrow ===== */
.nav-dropdown-arrow {
  position: absolute;
  bottom: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background-color: hsla(0, 0%, 8%, 0.8);
  box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.15);
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-base);
}

.nav-dropdown-arrow:hover {
  transform: translateX(-50%) scale(1.1);
  background-color: var(--foreground);
}

.nav-dropdown-arrow svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--background);
  transition: transform 0.3s var(--easing-smooth);
}

.nav-dropdown-container.dropdown-open .nav-dropdown-arrow {
  background-color: var(--foreground);
}

.nav-dropdown-container.dropdown-open .nav-dropdown-arrow svg {
  transform: rotate(180deg);
}

/* ===== Dropdown Menu ===== */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--foreground);
  border-radius: var(--radius);
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scaleY(0.8);
  transform-origin: top center;
  transition: opacity 0.25s var(--easing-smooth),
              transform 0.25s var(--easing-smooth),
              visibility 0.25s ease;
  z-index: var(--z-dropdown);
  overflow: hidden;
}

.nav-dropdown-container.dropdown-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scaleY(1);
}

.nav-dropdown-connector {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 0.75rem;
  background-color: var(--foreground);
}

.nav-dropdown-content {
  display: grid;
  grid-template-columns: 70px 78px 78px 78px 70px;
  align-items: start;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.375rem;
}

/* ===== Dropdown Items ===== */
.nav-dropdown-item-wrapper {
  display: flex;
  justify-content: center;
}

.nav-dropdown-item-wrapper.secondary {
  margin-top: 1rem;
}

.nav-dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 0.75rem;
  transition: all var(--transition-smooth);
  opacity: 0;
  transform: translateY(-5px);
  text-decoration: none;
}

/* PRIMARY items */
.nav-dropdown-item.primary {
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  min-width: 75px;
  color: var(--background);
}

.nav-dropdown-item.primary:hover {
  background-color: hsla(0, 0%, 100%, 0.15);
}

.nav-dropdown-item.primary.active {
  background-color: hsla(0, 0%, 100%, 0.15);
}

.nav-dropdown-item.primary svg {
  width: 1.375rem;
  height: 1.375rem;
  transition: transform var(--transition-smooth);
}

.nav-dropdown-item.primary:hover svg { transform: scale(1.1); }
.nav-dropdown-item.primary.active svg { transform: none; }

.nav-dropdown-item.primary span {
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.2;
}

/* SECONDARY items */
.nav-dropdown-item.secondary {
  gap: 0.25rem;
  padding: 0.5rem;
  width: 70px;
  color: hsla(0, 0%, 100%, 0.4);
}

.nav-dropdown-item.secondary:hover {
  color: hsla(0, 0%, 100%, 0.7);
  background-color: hsla(0, 0%, 100%, 0.1);
}

.nav-dropdown-item.secondary.active {
  color: hsla(0, 0%, 100%, 0.6);
  background-color: hsla(0, 0%, 100%, 0.1);
}

.nav-dropdown-item.secondary svg {
  width: 0.875rem;
  height: 0.875rem;
  color: hsla(0, 0%, 100%, 0.3);
  transition: color var(--transition-smooth);
}

.nav-dropdown-item.secondary:hover svg { color: hsla(0, 0%, 100%, 0.6); }
.nav-dropdown-item.secondary.active svg { color: hsla(0, 0%, 100%, 0.5); }

.nav-dropdown-item.secondary span {
  font-size: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* Dropdown animations */
.nav-dropdown-container.dropdown-open .nav-dropdown-item {
  animation: dropdownItemIn 0.2s ease forwards;
}

.nav-dropdown-container.dropdown-open .nav-dropdown-item-wrapper:nth-child(1) .nav-dropdown-item { animation-delay: 0.1s; }
.nav-dropdown-container.dropdown-open .nav-dropdown-item-wrapper:nth-child(2) .nav-dropdown-item { animation-delay: 0.03s; }
.nav-dropdown-container.dropdown-open .nav-dropdown-item-wrapper:nth-child(3) .nav-dropdown-item { animation-delay: 0.06s; }
.nav-dropdown-container.dropdown-open .nav-dropdown-item-wrapper:nth-child(4) .nav-dropdown-item { animation-delay: 0.09s; }
.nav-dropdown-container.dropdown-open .nav-dropdown-item-wrapper:nth-child(5) .nav-dropdown-item { animation-delay: 0.12s; }

@keyframes dropdownItemIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Right CTA ===== */
.nav-actions {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 1024px) { .nav-actions { display: flex; } }

.nav-login {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color var(--transition-base);
}

.nav-login:hover { color: var(--foreground); }

/* ===== Mobile Menu Button ===== */
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  min-height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  transition: background-color var(--transition-base), transform 0.1s ease;
}

.mobile-menu-btn:hover { background-color: hsla(0, 0%, 0%, 0.05); }
.mobile-menu-btn:active { transform: scale(0.95); }

@media (min-width: 1024px) { .mobile-menu-btn { display: none; } }

.mobile-menu-btn svg { width: 1.25rem; height: 1.25rem; }
.mobile-menu-btn .close-icon { display: none; }
.mobile-menu-btn.active .menu-icon { display: none; }
.mobile-menu-btn.active .close-icon { display: block; }

/* ===== Mobile Menu ===== */
.mobile-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: hsla(0, 0%, 0%, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}

.mobile-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 1024px) { .mobile-menu-backdrop { display: none !important; } }

.mobile-menu {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  top: calc(var(--navbar-height) + 0.5rem);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 0.25s var(--easing-smooth),
              transform 0.25s var(--easing-smooth),
              visibility 0.25s ease;
  pointer-events: none;
}

@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mobile-menu-panel {
  background-color: hsla(0, 0%, 96%, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsla(0, 0%, 0%, 0.08);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-dropdown);
  padding: 0.75rem;
  overflow: hidden;
}

.mobile-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.375rem;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: hsla(0, 0%, 8%, 0.7);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  opacity: 0;
  transform: translateY(-10px);
}

.mobile-menu.active .mobile-nav-item {
  animation: mobileNavItemIn 0.25s ease forwards;
  animation-delay: calc(var(--item-index, 0) * 0.04s);
}

@keyframes mobileNavItemIn {
  to { opacity: 1; transform: translateY(0); }
}

.mobile-nav-item svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--muted-foreground);
  transition: color var(--transition-base);
  flex-shrink: 0;
}

.mobile-nav-item:hover {
  background-color: hsla(0, 0%, 0%, 0.04);
  color: var(--foreground);
}

.mobile-nav-item:hover svg { color: var(--foreground); }

.mobile-nav-item.active {
  background-color: var(--foreground);
  color: var(--background);
}

.mobile-nav-item.active svg { color: var(--background); }

.mobile-menu-divider {
  height: 1px;
  background-color: hsla(0, 0%, 0%, 0.08);
  margin: 0.75rem 0;
}

.mobile-actions-row {
  display: flex;
  gap: 0.5rem;
  opacity: 0;
}

.mobile-menu.active .mobile-actions-row {
  animation: mobileActionsIn 0.3s ease 0.15s forwards;
}

@keyframes mobileActionsIn { to { opacity: 1; } }

.mobile-login-btn {
  flex: 1;
  text-align: center;
  padding: 0.625rem;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--muted-foreground);
  border: 1px solid hsla(0, 0%, 0%, 0.08);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.mobile-login-btn:hover {
  background-color: hsla(0, 0%, 0%, 0.03);
  color: var(--foreground);
}

/* ===== Mobile Page Indicator ===== */
.mobile-page-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background-color: var(--foreground);
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.15);
}

.mobile-page-indicator svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--background);
}

.mobile-page-indicator span {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--background);
}

/* ===== Mobile Internal Pages Panel ===== */
.mobile-internal-pages {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  top: 21.25rem;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 0.35s var(--easing-smooth) 0.05s,
              transform 0.35s var(--easing-smooth) 0.05s,
              visibility 0.35s ease 0.05s;
  pointer-events: none;
}

@media (min-width: 640px) { .mobile-internal-pages { top: 22.5rem; } }
@media (min-width: 1024px) { .mobile-internal-pages { display: none !important; } }

.mobile-internal-pages.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mobile-internal-pages-content {
  background-color: var(--foreground);
  border-radius: var(--radius);
  box-shadow: var(--shadow-dropdown);
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.mobile-internal-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  color: hsla(0, 0%, 100%, 0.6);
  transition: all var(--transition-smooth);
  opacity: 0;
  transform: translateY(-5px);
}

.mobile-internal-pages.active .mobile-internal-item {
  animation: mobileInternalItemIn 0.2s ease forwards;
  animation-delay: calc(0.1s + var(--item-index, 0) * 0.03s);
}

@keyframes mobileInternalItemIn {
  to { opacity: 1; transform: translateY(0); }
}

.mobile-internal-item:hover {
  color: var(--background);
  background-color: hsla(0, 0%, 100%, 0.1);
}

.mobile-internal-item.active {
  color: var(--background);
  background-color: hsla(0, 0%, 100%, 0.2);
}

.mobile-internal-item svg {
  width: 0.875rem;
  height: 0.875rem;
  color: hsla(0, 0%, 100%, 0.5);
  transition: color var(--transition-smooth);
  flex-shrink: 0;
}

.mobile-internal-item:hover svg,
.mobile-internal-item.active svg { color: var(--background); }

.mobile-internal-item span {
  font-size: 0.6875rem;
  font-weight: 500;
}

/* Hierarchy for mobile items */
.mobile-internal-item.primary span { font-weight: 600; font-size: 0.75rem; }
.mobile-internal-item.secondary { opacity: 0.8; }
.mobile-internal-item.secondary span { font-size: 0.625rem; }