/*
  Masaba theme — platform-wide (nav, footer, auth)
  Tokens & base body live in design-tokens.css
*/

/* Platform nav: dark bar, gold/white links, dropdowns flush and styled */
.masaba-platform-nav {
  background: var(--ink) !important;
  box-shadow: 0 1px 0 var(--rule);
}
.masaba-platform-nav .text-gray-900,
.masaba-platform-nav .text-xl.font-bold {
  color: var(--white) !important;
}

/* Logo: match index (Fraunces, gold mark, white + gold text) */
.masaba-platform-nav .nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.masaba-platform-nav .nav-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold);
  border: 2.5px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.masaba-platform-nav .nav-logo-mark .nav-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.masaba-platform-nav .nav-logo:hover .nav-logo-mark {
  transform: rotate(-15deg) scale(1.1);
}
.masaba-platform-nav .nav-logo-name {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}
.masaba-platform-nav .nav-logo-minds {
  color: var(--gold) !important;
}
.masaba-platform-nav a[href].text-gray-700,
.masaba-platform-nav a[href].text-gray-600,
.masaba-platform-nav button.text-gray-700,
.masaba-platform-nav .text-gray-500 {
  color: rgba(255, 255, 255, 0.85) !important;
}
.masaba-platform-nav a[href]:hover,
.masaba-platform-nav button:hover {
  color: var(--gold) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
/* Dropdown: flush to trigger (no gap) so it stays open when moving mouse down */
.masaba-platform-nav .masaba-dd {
  top: 100%;
  margin-top: 0 !important;
  padding-top: 2px;
  background: var(--cream) !important;
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(26, 18, 8, 0.15);
}
/* Dropdown links must be dark on cream (nav link overrides make them white otherwise) */
.masaba-platform-nav .masaba-dd a,
.masaba-platform-nav .masaba-dd .py-1 a {
  color: var(--ink) !important;
}
.masaba-platform-nav .masaba-dd a:hover,
.masaba-platform-nav .masaba-dd a.bg-blue-50 {
  background: var(--cream-2) !important;
  color: var(--ink) !important;
}
.masaba-platform-nav .masaba-dd .text-blue-600 {
  color: var(--teal) !important;
}
.masaba-platform-nav .masaba-dd .border-t {
  border-color: var(--rule) !important;
}
/* Active teacher nav item (Content, Create, Students, Assign) */
.masaba-platform-nav a.text-blue-600.bg-blue-50 {
  color: var(--gold) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
/* Subscription badge on dark nav */
.masaba-platform-nav .bg-gray-100 { background: rgba(255,255,255,0.15) !important; color: var(--gold) !important; }
.masaba-platform-nav .bg-blue-100 { background: rgba(252,193,98,0.25) !important; color: var(--ink) !important; }
.masaba-platform-nav .bg-purple-100 { background: rgba(232,25,90,0.2) !important; color: var(--white) !important; }
.masaba-platform-nav .bg-green-100 { background: rgba(26,122,110,0.25) !important; color: var(--cream) !important; }
.masaba-platform-nav .bg-yellow-100 { background: rgba(252,193,98,0.3) !important; color: var(--ink) !important; }
.masaba-platform-nav .text-gray-700.hover\:bg-gray-200:hover { background: rgba(255,255,255,0.2) !important; }
/* CTA button (Get Started →) — match index nav-cta */
.masaba-platform-nav a.bg-blue-600,
.masaba-platform-nav a.bg-blue-600:hover,
.masaba-platform-nav a.nav-cta-platform,
.masaba-platform-nav a.nav-cta-platform:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-bottom: 3px solid rgba(0,0,0,0.25);
}
.masaba-platform-nav a.nav-cta-platform:hover {
  background: var(--gold-l) !important;
  transform: translateY(-1px);
}
/* Mobile menu */
.masaba-platform-nav #mobile-menu {
  background: var(--ink-2) !important;
  border-color: var(--rule) !important;
}
.masaba-platform-nav #mobile-menu a,
.masaba-platform-nav #mobile-menu button {
  color: rgba(255,255,255,0.9) !important;
}
.masaba-platform-nav #mobile-menu a:hover,
.masaba-platform-nav #mobile-menu button:hover {
  color: var(--gold) !important;
  background: rgba(255,255,255,0.08) !important;
}
.masaba-platform-nav #mobile-menu .border-t {
  border-color: var(--rule) !important;
}
.masaba-platform-nav #mobile-menu-toggle {
  color: rgba(255,255,255,0.8) !important;
}
.masaba-platform-nav #mobile-menu-toggle:hover {
  color: var(--gold) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* Platform footer */
.masaba-platform-footer {
  background: var(--ink);
  color: var(--cream);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--magenta), var(--gold), var(--teal)) 1;
}
.masaba-platform-footer .text-gray-600 {
  color: var(--cream) !important;
}
.masaba-platform-footer .text-gray-500 {
  color: var(--quiet) !important;
}
.masaba-platform-footer .footer-logo-minds {
  color: var(--gold) !important;
}

/* Auth pages (login, signup) — Masaba card and accents */
.auth-page .rounded-2xl {
  border: 1px solid var(--rule);
  box-shadow: 0 4px 20px rgba(26, 18, 8, 0.08);
}
.auth-page a[href].text-blue-600,
.auth-page a.font-bold.text-blue-600 {
  color: var(--teal) !important;
}
.auth-page a[href].text-blue-600:hover,
.auth-page a.font-bold.text-blue-600:hover {
  color: var(--teal-l) !important;
}
.auth-page button[type="submit"].from-blue-600,
.auth-page .bg-gradient-to-r.from-blue-600 {
  background: linear-gradient(to right, var(--teal), var(--teal-l)) !important;
  color: white !important;
  border: none;
}
.auth-page .bg-indigo-50 {
  background: var(--cream-2) !important;
  border-color: var(--gold) !important;
}
.auth-page .border-indigo-400 {
  border-color: var(--gold) !important;
}
.auth-page .text-indigo-800 {
  color: var(--ink) !important;
}
.auth-page .text-indigo-700 {
  color: var(--body) !important;
}
.auth-page .bg-gradient-to-br.from-blue-50 {
  background: linear-gradient(to bottom right, var(--cream-2), var(--cream)) !important;
  border-color: var(--rule) !important;
}
.auth-page .border-blue-200 {
  border-color: var(--rule) !important;
}
.auth-page .bg-blue-100 {
  background: rgba(26, 122, 110, 0.15) !important;
}
.auth-page input:focus,
.auth-page select:focus {
  --tw-ring-color: rgba(26, 122, 110, 0.4);
  border-color: var(--teal);
}
.auth-page label.border-gray-200:hover {
  border-color: var(--teal) !important;
}
.auth-page .hover\:border-blue-500:hover {
  border-color: var(--teal) !important;
}