/*
 * Atomik theme — accent colors and cabolabs-style masthead/footer recolor.
 * Accent: #D32F2F (atomik red) / #FFF176 (atomik yellow)
 */

:root {
  --atomik-red: #D32F2F;
  --atomik-yellow: #FFF176;
}

.text-atomik {
  color: var(--atomik-red);
}
.text-yellow-atomik, a.text-yellow-atomik {
  color: var(--atomik-yellow);
}
.bg-atomik {
  background-color: var(--atomik-red);
}
.bg-yellow-atomik {
  background-color: var(--atomik-yellow);
}

.btn-atomik {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--atomik-red);
  --bs-btn-border-color: var(--atomik-red);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--atomik-red);
  --bs-btn-focus-shadow-rgb: var(--atomik-red);
  --bs-btn-active-color: var(--atomik-red);
}

#features, #cta {
  background-color: var(--atomik-yellow);
  padding: 1rem
}
.governance-highlight {
  background: linear-gradient(135deg,rgb(249, 242, 176) 0%, var(--atomik-yellow) 100%);
  border-radius: 15px;
  padding: 40px;
  margin: 40px 0;
}
.feature-icon {
  background: linear-gradient(135deg,rgb(221, 91, 91), var(--atomik-red));
}
.use-case-badge {
  background: linear-gradient(135deg, rgb(221, 91, 91), var(--atomik-red));
}

/* ── MASTHEAD (cabolabs-style accent treatment, recolored) ── */
.topbar {
  border-top: 3px solid var(--atomik-red);
}
.topbar-center .nav-link {
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4em 1em;
  transition: background 0.18s, color 0.18s;
}
.topbar-center .nav-link:hover {
  background: #fdeaea;
  color: var(--atomik-red);
}
.topbar-center .nav-link.active {
  background: var(--atomik-red);
  color: #fff;
  font-weight: 600;
}

/* Mobile dropdown: full-width rows read better as a flat rounded
   rectangle than the desktop pill shape. */
@media (max-width: 992px) {
  .topbar-menu.open .nav-link {
    border-radius: 8px;
  }
}

/* ── FOOTER (cabolabs-style column titles + social icons, recolored) ── */
/* Footer sits right below the (now red) contact section, so it needs
   its own dark neutral background instead of atomik red for contrast */
.bg-footer-dark {
  background-color: #2b2b2b;
  border-top: 3px solid var(--atomik-yellow);
}
.footer-col-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--atomik-yellow);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}
.footer-social li {
  margin-left: 0.75rem;
}
.footer-social a {
  transition: opacity 0.18s;
}
.footer-social a:hover {
  opacity: 0.8;
}
footer a:hover {
  color: var(--atomik-yellow) !important;
  font-weight: bold;
  transition: font-weight 0.2s ease-in-out;
}
footer a:active {
  color: var(--atomik-yellow) !important;
}

/* ── CONTACT SECTION ── */
.contact-section {
  background: var(--atomik-red);
}
.contact-info h2,
.contact-detail strong {
  color: #fff;
}
.contact-info .contact-sub,
.contact-detail {
  color: #ffdcdc;
}
.contact-detail i {
  color: var(--atomik-yellow);
}
.contact-detail a {
  color: #ffdcdc;
  text-decoration: none;
}
.contact-detail a:hover {
  color: #fff;
  text-decoration: underline;
}
.contact-form-wrap .form-control:focus {
  border-color: var(--atomik-red);
  box-shadow: 0 0 0 0.2rem rgba(211,47,47,0.15);
}