/*
 * ============================================================
 *  Ankur Gurukul — Shared Navbar Styles
 *  Link this on every page: <link rel="stylesheet" href="nav-styles.css">
 *  Must load AFTER Tailwind CDN so these classes win specificity.
 * ============================================================
 */

/* ── Wrapper ─────────────────────────────────────────────── */
.ag-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  background-color: rgba(248, 249, 247, 0.90); /* surface/90 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(194, 201, 195, 0.20); /* outline-variant/20 */
  transition: box-shadow 0.3s ease;
}
.ag-nav.scrolled {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.07);
}

.ag-nav__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 1rem 1.5rem;        /* py-4 px-6 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Logo block ──────────────────────────────────────────── */
.ag-nav__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;          /* gap-3 */
  text-decoration: none;
}

.ag-nav__logo-img {
  width: 3rem;           /* w-12 */
  height: 3rem;          /* h-12 */
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10);
  flex-shrink: 0;
}
.ag-nav__logo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ag-nav__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* School name — Playfair Display, 22px bold, always */
.ag-nav__school-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: #4A5D4E;           /* primary */
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Tagline — Montserrat/sans, 11px, muted */
.ag-nav__tagline {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(74, 93, 78, 0.65); /* primary/65 */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 3px;
}

/* ── Desktop links ───────────────────────────────────────── */
.ag-nav__links {
  display: none;
  align-items: center;
  gap: 2rem;             /* gap-8 */
}
@media (min-width: 768px) {       /* md */
  .ag-nav__links { display: flex; }
}

.ag-nav__link {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 15px;                /* consistent 15px across all pages */
  font-weight: 500;
  color: #444d46;                 /* on-surface-variant */
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  padding-bottom: 2px;
}
.ag-nav__link:hover {
  color: #4A5D4E;                 /* primary */
}

/* Active / current page link */
.ag-nav__link--active {
  color: #4A5D4E;
  font-weight: 700;
  border-bottom: 2px solid #4A5D4E;
}

/* ── Actions (CTA + hamburger) ───────────────────────────── */
.ag-nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* "Apply Now" pill button */
.ag-nav__cta {
  display: none;
  background-color: #4A5D4E;
  color: #ffffff;
  padding: 0.625rem 1.5rem;      /* py-2.5 px-6 */
  border-radius: 9999px;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
@media (min-width: 768px) {
  .ag-nav__cta { display: inline-flex; align-items: center; }
}
.ag-nav__cta:hover {
  background-color: #3d4d40;
}
.ag-nav__cta:active {
  transform: scale(0.97);
}

/* Hamburger (mobile only) */
.ag-nav__hamburger {
  display: flex;
  padding: 0.5rem;
  border-radius: 9999px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #2d342f;
  transition: background-color 0.2s ease;
}
.ag-nav__hamburger:hover {
  background-color: rgba(225, 229, 225, 0.80);
}
@media (min-width: 768px) {
  .ag-nav__hamburger { display: none; }
}