/* =============================================
   TEST HEADER STYLES
   New navigation: Products | Resources | Pricing
============================================= */

/* Navbar - transparent at top */
.site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

/* Navbar - glass effect when scrolled */
.site-header.header-scrolled {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* Header inner - comfortable height */
.header-inner {
  padding: 0.75rem 0;
}

/* Scale down logo and brand text */
.brand {
  transform: scale(1);
  transform-origin: left center;
  text-decoration: none;
  color: inherit;
}

.brand:visited,
.brand:hover,
.brand:active {
  text-decoration: none;
  color: inherit;
}

.brand .brand-text {
  color: var(--text-main);
}

/* Center the navigation menu with login on right */
.site-nav {
  display: flex;
  align-items: center;
  flex: 1;
}

.site-nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
  gap: 2rem;
}

/* Nav item */
.site-nav-list .nav-item {
  position: relative;
}

/* Chevron arrow for dropdowns */
.nav-link-chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  position: relative;
}

.nav-link-chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.nav-item.nav-has-panel.is-open .nav-link-chevron::before {
  transform: translate(-50%, -30%) rotate(-135deg);
}

.site-nav-list .nav-link {
  font-size: 0.9rem;
  color: var(--text-main, #0f172a);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Auth buttons container */
.nav-auth-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

/* Login button - text only, no background, black text */
.nav-auth-buttons .login-btn {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-main, #0f172a);
  background: none;
  border: none;
  box-shadow: none;
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  transition: opacity 0.15s ease;
  transform: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-auth-buttons .login-btn:hover {
  opacity: 0.7;
  background: none;
  box-shadow: none;
  transform: none;
}

/* Get Started button - brown square */
.nav-auth-buttons .get-started-btn {
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent-strong, #b47b68);
  text-decoration: none;
  padding: 0.5rem 1.1rem;
  border-radius: 0.4rem;
  transition: background 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-auth-buttons .get-started-btn:hover {
  background: #9a6858;
}

/* Adjust dropdown position for new header height */
.nav-panel {
  top: 58px;
}

/* Products Panel - full-width like Resources (desktop only) */
@media (min-width: 769px) {
  .nav-panel-products {
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(-10px);
    border-radius: 0 0 1.3rem 1.3rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 35px 70px rgba(15, 23, 42, 0.14);
    padding: 1.75rem 0 1.5rem 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.2s ease 0.04s,
      transform 0.2s ease 0.04s,
      visibility 0.18s ease;
    z-index: 1000;
  }

  #products-nav-item.is-open .nav-panel-products {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.nav-panel-products .nav-panel-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* Add divider between columns */
.nav-panel-products .nav-panel-column:first-child {
  padding-right: 2rem;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}

/* Products footer - separated from columns */
.nav-panel-products-footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 2rem 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  gap: 3.5rem;
}

.nav-panel-products-footer .nav-panel-footer-link {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-main, #0f172a);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-panel-products-footer .nav-panel-footer-link:hover {
  background: rgba(180, 123, 104, 0.15);
  color: var(--accent-strong, #b47b68);
}

/* Metallic rose gold shine for founder link */
.nav-panel-founder-link {
  background: linear-gradient(
    90deg,
    #0f172a 0%,
    #8b5a4a 20%,
    #d4a896 40%,
    #f5d4c8 50%,
    #d4a896 60%,
    #8b5a4a 80%,
    #0f172a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  background-size: 200% 100%;
  animation: metallic-shine 4s linear infinite;
}

.nav-panel-founder-link:hover {
  background: rgba(180, 123, 104, 0.15);
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--text-main, #0f172a) !important;
  background-size: unset;
}

@keyframes metallic-shine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* Products toggle button styling - uses same chevron as Resources from styles.css */
.nav-link-products {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Resources Panel - 2 columns with demo below */
#resources-nav-item .nav-panel-resources .nav-panel-inner {
  max-width: 800px;
  grid-template-columns: 1fr 1fr;
}

/* Remove the promo section styling for resources */
#resources-nav-item .nav-panel-promo {
  display: none;
}

/* Adjust column widths for the new Resources panel */
#resources-nav-item .nav-panel-column {
  padding-right: 0;
  border-right: none;
  margin-right: 0;
}

#resources-nav-item .nav-panel-column:first-child {
  padding-right: 2rem;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}

/* Demo form section - full width below columns */
.nav-panel-demo {
  grid-column: span 2;
  padding-top: 0;
  padding-bottom: 1.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.nav-panel-demo-text {
  font-size: 0.875rem;
  color: var(--text-muted, #64748b);
  margin-bottom: 0.75rem;
}

.nav-panel-demo-form {
  display: flex;
  gap: 0.5rem;
}

.nav-panel-demo-input {
  flex: 1;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 0.4rem;
  font-size: 0.875rem;
  outline: none;
}

.nav-panel-demo-input:focus {
  border-color: var(--accent-strong, #b47b68);
}

.nav-panel-demo-btn {
  padding: 0.6rem 1rem;
  background: var(--text-main, #0f172a);
  color: #fff;
  border: none;
  border-radius: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.nav-panel-demo-btn:hover {
  background: #1e293b;
}

/* =============================================
   RESPONSIVE - Tablet
============================================= */
@media (max-width: 1024px) {
  .nav-panel-products .nav-panel-inner {
    padding: 0 1.5rem;
    gap: 1.5rem;
  }

  .nav-panel-products-footer {
    padding: 1rem 1.5rem 0;
  }
}

/* =============================================
   RESPONSIVE - Mobile
   Note: Main mobile nav styles are in mobile.css
   These are just supplementary overrides
============================================= */
@media (max-width: 768px) {
  /* Metallic effect enabled for founder link in products footer on mobile */
  .nav-panel-products-footer .nav-panel-founder-link {
    background: linear-gradient(
      90deg,
      #2a2623 0%,
      #8b5a4a 20%,
      #d4a896 40%,
      #f5d4c8 50%,
      #d4a896 60%,
      #8b5a4a 80%,
      #2a2623 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    background-size: 200% 100% !important;
    animation: metallic-shine 4s linear infinite !important;
  }
}