/* Shared URAAN AI shell for secondary PHP pages. */
:root {
  --shell-bg: #1e1e1e;
  --shell-surface: rgba(37, 37, 38, 0.92);
  --shell-border: #3e3e42;
  --shell-text: #f0f8ff;
  --shell-muted: #8b9ca3;
  --shell-green: #05c68e;
  --shell-green-dim: rgba(5, 198, 142, 0.15);
  --shell-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] {
  --shell-bg: #f0f5f5;
  --shell-surface: rgba(255, 255, 255, 0.92);
  --shell-border: rgba(0, 0, 0, 0.08);
  --shell-text: #0d2e32;
  --shell-muted: #3a6b70;
  --shell-green-dim: rgba(5, 198, 142, 0.15);
}

body {
  background: var(--shell-bg) !important;
  color: var(--shell-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 15% 50%, var(--shell-green-dim), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(4, 69, 84, 0.14), transparent 26%);
}

#mainHeader,
#nav {
  background: transparent !important;
  height: auto !important;
  min-height: 76px;
  padding: 1rem 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  transition: var(--shell-transition) !important;
}

#mainHeader.scrolled,
#nav.scrolled {
  background: rgba(1, 10, 12, 0.82) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--shell-border) !important;
}

html[data-theme="light"] #mainHeader.scrolled,
html[data-theme="light"] #nav.scrolled {
  background: rgba(255, 255, 255, 0.86) !important;
}

#mainHeader .nav-inner,
#mainHeader .container-fluid,
#nav .container,
#nav .nav-glass {
  background: var(--shell-surface) !important;
  border: 1px solid var(--shell-border) !important;
  border-radius: 100px;
}

#mainHeader > .container-fluid,
#mainHeader > .nav-inner {
  width: min(1140px, calc(100% - 2rem));
  margin: 0 auto !important;
}

#mainHeader .navbar-collapse,
#mainHeader .nav-links-wrap {
  align-items: center;
}

#mainHeader .nav-inner,
#mainHeader .container-fluid {
  min-height: 56px;
  padding: 8px 16px 8px 24px !important;
}

#nav .nav-glass { padding: 8px 12px 8px 24px; }

#mainHeader .navbar-brand img,
#mainHeader .nav-brand img,
#nav .nav-logo img {
  height: 40px !important;
  width: auto;
}

#mainHeader .nav-link,
#mainHeader .nav-links a,
#nav .nav-link {
  color: var(--shell-muted) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: var(--shell-transition) !important;
}

#mainHeader .nav-link:hover,
#mainHeader .nav-links a:hover,
#nav .nav-link:hover {
  color: var(--shell-text) !important;
  transform: translateY(-1px);
}

#mainHeader .navbar-nav,
#mainHeader .nav-links {
  gap: 0.4rem;
}

#mainHeader .reg-button,
#mainHeader .btn-register,
#nav .btn-cyber {
  background: var(--shell-green) !important;
  color: #001b18 !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  transition: var(--shell-transition) !important;
}

#mainHeader .reg-button:hover,
#mainHeader .btn-register:hover,
#nav .btn-cyber:hover {
  background: var(--shell-green) !important;
  color: #001b18 !important;
  transform: translateY(-2px);
  box-shadow: 0 0 24px var(--shell-green-dim);
}

#mainHeader .navbar-toggler,
#mainHeader .nav-toggler {
  border-color: var(--shell-border) !important;
}

footer,
.footer {
  background: var(--shell-surface) !important;
  color: var(--shell-text) !important;
  border-top: 1px solid var(--shell-border) !important;
}

footer .footer-title,
footer .footer-heading,
.footer .footer-title,
.footer .footer-heading {
  color: var(--shell-text) !important;
  font-family: 'Space Grotesk', sans-serif;
}

footer p,
footer .footer-desc,
.footer p,
.footer .footer-desc {
  color: var(--shell-muted) !important;
}

footer a,
.footer a,
footer .footer-link,
.footer .footer-link {
  color: var(--shell-muted) !important;
  transition: var(--shell-transition) !important;
}

footer a:hover,
.footer a:hover,
footer .footer-link:hover,
.footer .footer-link:hover {
  color: var(--shell-green) !important;
  transform: translateX(4px);
}

footer .social-icon,
.footer .social-icon {
  background: var(--shell-green-dim) !important;
  border: 1px solid rgba(5, 198, 142, 0.4);
  color: var(--shell-green) !important;
}

footer .social-icon:hover,
.footer .social-icon:hover {
  background: var(--shell-green) !important;
  color: #001b18 !important;
  transform: translateY(-3px);
}

.shell-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 0.75rem;
  border: 1px solid var(--shell-border);
  border-radius: 50%;
  background: var(--shell-surface);
  color: var(--shell-text);
  cursor: pointer;
  transition: var(--shell-transition);
}

.shell-theme-toggle:hover {
  color: var(--shell-green);
  transform: translateY(-2px);
}

/* Legacy page content: use the same readable surfaces as index.php. */
.theme-header,
.registration-hero,
.page-hero {
  border-bottom: 1px solid var(--shell-border);
}

.faq-category,
.faq-item,
.registration-alert,
.registration-card,
.registration-page .card,
.content-wrapper .policy-card,
.info-callout {
  background: var(--shell-surface) !important;
  color: var(--shell-text) !important;
  border-color: var(--shell-border) !important;
}

.faq-question,
.faq-answer .card-body,
.registration-page,
.registration-page p,
.registration-page li,
.content-wrapper,
.content-wrapper li {
  color: var(--shell-text) !important;
}

.faq-question,
.faq-answer .card-body {
  background: transparent !important;
  border-color: var(--shell-border) !important;
}

.faq-question:hover,
.faq-question[aria-expanded="true"] {
  background: var(--shell-green-dim) !important;
  color: var(--shell-green) !important;
}

.faq-answer a,
.section-title,
.category-title,
.page-section-title,
.policy-heading,
.info-callout a {
  color: var(--shell-green) !important;
}

.section-title::after,
.category-title {
  border-color: var(--shell-green) !important;
}

.registration-page .form-control,
.registration-page .form-select,
.registration-page textarea,
.registration-page input {
  background: var(--shell-surface) !important;
  color: var(--shell-text) !important;
  border-color: var(--shell-border) !important;
}

.registration-page .form-control::placeholder,
.registration-page textarea::placeholder {
  color: var(--shell-muted) !important;
}

.registration-page label,
.registration-page .form-label,
.content-wrapper strong {
  color: var(--shell-text) !important;
}

html[data-theme="light"] .theme-header,
html[data-theme="light"] .registration-hero,
html[data-theme="light"] .page-hero {
  color: var(--shell-text) !important;
}

html[data-theme="light"] .faq-question,
html[data-theme="light"] .faq-answer .card-body,
html[data-theme="light"] .registration-page,
html[data-theme="light"] .content-wrapper {
  color: var(--shell-text) !important;
}

@media (max-width: 991px) {
  #mainHeader .navbar-collapse,
  #mainHeader .nav-links-wrap {
    margin-top: 0.75rem;
    padding: 0.8rem;
    border: 1px solid var(--shell-border);
    border-radius: 16px;
    background: var(--shell-surface) !important;
  }
}

@media (max-width: 991px) {
  #mainHeader .nav-inner,
  #mainHeader .container-fluid,
  #nav .nav-glass {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
