/* navbar.css — Glassmorphism sticky nav */

/* Base: non-sticky (index.html wraps the full hero inside header) */
.navbar {
  position: relative;
  top: 0;
  z-index: 100;
  background-color: transparent;
}

/* Sticky glass — only on pages that have a real .navbar-inner */
.navbar:has(.navbar-inner) {
  position: sticky;
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 32px rgba(0, 0, 0, 0.55);
}

/* ── Desktop layout ── */
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  gap: var(--space-16);
}

/* ── Brand ── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-12);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glow-gold-sm);
  object-fit: cover;
  background-color: var(--color-surface);
  display: block;
  transition:
    box-shadow var(--motion-med) var(--ease-out),
    transform  var(--motion-med) var(--ease-out);
}

.brand:hover .brand-mark {
  box-shadow: var(--glow-gold);
  transform: scale(1.04);
}

.brand-name {
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-family-ar);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-shadow: var(--glow-gold-sm);
  letter-spacing: 0.01em;
}

/* ── Nav links ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.nav-link {
  position: relative;
  color: var(--color-text-muted);
  font-family: var(--font-family-ar);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color var(--motion-fast) var(--ease-out);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 1.5px;
  background: var(--grad-cta);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--motion-med) var(--ease-out);
}

.nav-link:hover             { color: var(--color-accent); }
.nav-link:hover::after      { transform: scaleX(1); }

/* Active link highlight */
.nav-link[style*="color: var(--color-cta)"] {
  color: var(--color-accent) !important;
}

/* ── Nav actions ── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-shrink: 0;
}

/* ══════════════════════════════════
   MOBILE — 2-row compact layout
   Row 1: [brand]  [action button]
   Row 2: [nav links  ←  scroll →]
   ══════════════════════════════════ */
@media (max-width: 760px) {
  .navbar-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "brand actions"
      "links links";
    gap: 0;
    padding-top: var(--space-10);
    padding-bottom: 0;
  }

  /* Row 1 left — brand */
  .brand {
    grid-area: brand;
    width: auto;
    justify-content: flex-start;
    align-self: center;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-8);
  }

  .brand-name {
    font-size: var(--font-size-md);
  }

  /* Row 1 right — action buttons */
  .nav-actions {
    grid-area: actions;
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--space-8);
    align-self: center;
  }

  /* Compact pill buttons on mobile */
  .nav-actions .btn,
  .nav-actions a.btn {
    font-size: var(--font-size-sm);
    padding: 7px 14px;
    border-radius: var(--radius-full);
  }

  /* Row 2 — nav links, full width, scrollable */
  .nav-links {
    grid-area: links;
    width: 100%;
    justify-content: flex-start;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: var(--space-8);
    padding-bottom: var(--space-10);
    /* fade out at scroll edges */
    -webkit-mask-image: linear-gradient(
      to left, transparent 0%, black 8%, black 92%, transparent 100%
    );
    mask-image: linear-gradient(
      to left, transparent 0%, black 8%, black 92%, transparent 100%
    );
  }

  .nav-links::-webkit-scrollbar { display: none; }

  .nav-link {
    font-size: 14px;
    white-space: nowrap;
    padding: var(--space-6) var(--space-14);
    /* Remove underline animation on mobile — use bg highlight instead */
    border-radius: var(--radius-full);
    transition:
      color            var(--motion-fast) var(--ease-out),
      background-color var(--motion-fast) var(--ease-out);
  }

  .nav-link::after { display: none; }

  .nav-link:hover {
    background-color: rgba(201, 150, 58, 0.08);
  }

  /* Active state on mobile */
  .nav-link[style*="color: var(--color-cta)"] {
    background-color: rgba(201, 150, 58, 0.12) !important;
    color: var(--color-accent) !important;
  }
}