/* ============================================================
   Addlivetag – UI Components
   Depends on: site-theme.css (tokens must be loaded first)
   ============================================================ */

/* --- Navbar ------------------------------------------------ */
.navbar-glass {
  background: var(--glass-bg) !important;
  backdrop-filter: saturate(150%) var(--glass-blur);
  -webkit-backdrop-filter: saturate(150%) var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-navbar);
  transition: transform var(--transition), box-shadow var(--transition);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
@supports not (backdrop-filter: blur(1px)) {
  .navbar-glass { background: rgba(8,13,24,.97) !important; }
}
.navbar-glass .navbar-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.navbar-glass .nav-link {
  font-size: .875rem;
  font-weight: 500;
  padding: .55rem .75rem;
  transition: color var(--transition-fast);
}
.navbar-glass .nav-link:hover { color: var(--color-accent) !important; }

.navbar-toggler {
  border-color: var(--glass-border) !important;
  padding: .4rem .65rem;
  min-width: 44px;
  min-height: 44px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 2px var(--color-accent-dim); outline: none; }
.navbar-hidden { transform: translateY(-100%); }

.site-version {
  color: var(--color-success);
  font-size: 10px;
  font-weight: 700;
  vertical-align: super;
  text-decoration: none;
  letter-spacing: .03em;
}
.site-version:hover { color: #4ade80; text-decoration: none; }

/* --- Mega menu --------------------------------------------- */
.dropdown-menu-mega {
  background: rgba(7,10,20,.98);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  min-width: min(700px, 96vw);
  padding: 1rem;
}
.mega-col-title {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: .4rem;
  margin-bottom: .6rem;
}
.dropdown-menu-mega .dropdown-item {
  color: var(--color-warning);
  font-size: .875rem;
  padding: .38rem .75rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dropdown-menu-mega .dropdown-item:hover {
  background: rgba(245,158,11,.1);
  color: #fbbf24;
}

/* --- Community dropdown ------------------------------------ */
.dropdown-menu-dark {
  background: rgba(7,10,20,.98);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}
.dropdown-menu-dark .dropdown-item {
  color: var(--color-text);
  font-size: .875rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.dropdown-menu-dark .dropdown-item:hover {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

/* --- Cards ------------------------------------------------- */
.tool-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  height: 100%;
  padding: 1rem;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-glow-hover);
  border-color: rgba(14,165,233,.22);
}

/* --- Buttons ---------------------------------------------- */
.btn-cta {
  background: var(--color-cta);
  border: none;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn-cta:hover  { background: var(--color-cta-hover); color: #fff; transform: translateY(-1px); }
.btn-cta:active { transform: translateY(0); }

/* --- Form inputs ------------------------------------------ */
body.page-dark .form-control {
  background: rgba(255,255,255,.05);
  border-color: var(--glass-border);
  color: var(--color-text);
  font-size: 16px; /* prevents iOS auto-zoom */
  border-radius: var(--radius-sm);
}
body.page-dark .form-control:focus {
  background: rgba(255,255,255,.08);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-dim);
  color: var(--color-text);
}
body.page-dark .form-control::placeholder { color: var(--color-muted); }
body.page-dark .input-group-text {
  background: rgba(255,255,255,.05);
  border-color: var(--glass-border);
  color: var(--color-muted);
}

/* --- Footer ----------------------------------------------- */
footer.site-footer {
  background: rgba(5,7,14,.98);
  border-top: 1px solid var(--glass-border);
}
.footer-col-title {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 1rem;
}
.footer-link {
  display: block;
  color: var(--color-muted);
  font-size: .85rem;
  text-decoration: none;
  margin-bottom: .45rem;
  transition: color var(--transition-fast);
}
.footer-link:hover { color: var(--color-warning); text-decoration: none; }
.footer-divider    { border-color: var(--color-border); margin: 1.5rem 0 1rem; }

/* --- Entrance animation ----------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tool-item { animation: fade-up .35s ease both; }
.tool-item:nth-child(n+4)  { animation-delay: .05s; }
.tool-item:nth-child(n+7)  { animation-delay: .1s; }
.tool-item:nth-child(n+10) { animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .tool-item { animation: none; }
}

/* --- Mobile ----------------------------------------------- */
@media (max-width: 991px) {
  .dropdown-menu-mega {
    min-width: unset;
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    max-height: 70vh;
    overflow-y: auto;
  }
  .navbar-collapse .nav-link { padding: .65rem 0; }
  .navbar-collapse .dropdown-menu {
    background: rgba(7,10,20,.97) !important;
    border: none !important;
    border-top: 1px solid var(--glass-border) !important;
    box-shadow: none;
  }
}

@media (max-width: 575px) {
  body.page-dark { font-size: 14px; }
}