/*
 * Custom styles for the Noticor Solutions website.
 *
 * The theme uses dark backgrounds with red and purple accents.  Variables at the
 * top define the primary colours so you can quickly adjust the palette.  The
 * rest of the file tweaks Bootstrap defaults to better suit a dark theme.
 */

/* Colour palette */
:root {
  /*
   * Colour palette
   *
   * The original design used very dark backgrounds that, while striking,
   * offered limited contrast for body copy.  To improve readability and
   * accessibility we lighten the palette slightly towards midnight blues and
   * soften the muted text.  The primary accent red remains unchanged to
   * preserve brand recognition.  Feel free to tweak these values further to
   * suit your brand guidelines.
   */
  --primary-colour: #c4161d; /* bright red for accents */
  --secondary-colour: #2e0146; /* dark purple for highlights */
  /* Base colours: adjust towards deeper blues for improved contrast */
  --background-colour: #1e2439; /* main page background */
  --card-background: #2b3353; /* cards stand out slightly from the page */
  --section-background: #30395d; /* sections have a subtle elevation */
  --footer-background: #1c2237; /* footer separated but readable */
  --nav-background: #1d2338; /* navigation bar slightly lighter */
  --text-light: #ffffff; /* primary body text */
  --text-muted: #c3c3d0; /* secondary/tertiary text */

  /* Distinct background for pricing plans */
  --plan-background: #3c4a72;
}

body {
  background-color: var(--background-colour);
  color: var(--text-light);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;

  /* Provide top padding to account for the fixed header (logo bar + nav bar).
     Without this, the hero section would sit underneath the header.  The
     combined height of the logo bar and navigation is approximately 8rem on
     desktop screens. */
  padding-top: 8rem;

  /* Enable smooth scrolling for internal anchor links */
  scroll-behavior: smooth;
}

/* Layout helpers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Navigation */
/* Site header wraps both the logo bar and the navigation.  It is fixed to the
   top of the viewport so the user can always access navigation while
   scrolling. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* A narrow bar above the navigation that houses the logo.  Placing the logo
   here separates it from the navigation links and gives it breathing room. */
.logo-bar {
  background: var(--nav-background);
  text-align: center;
  padding: 0.75rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.logo-bar img {
  height: 50px;
}

/* Navigation bar */
.navbar {
  position: relative;
  padding: 1rem 0;
  background: var(--nav-background);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* The inner container holds three groups: left links, centered logo and right links */
/* Use CSS grid to center the logo between left and right navigation groups. The container has three columns: left links, brand, right links. */
/* Arrange the navigation links in two columns: left and right.  The removal
   of the centred logo allows the left links to align to the start of the
   navigation bar and the right links to align to the end. */
.navbar > .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  position: relative;
}
/* Left and right nav lists */
.nav-left,
.nav-right {
  display: flex;
  list-style: none;
  /* Increase spacing between navigation items for improved readability */
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
/* Push left list to the left and right list to the right */
/* Align left links to the start of their grid cell and right links to the end */
.nav-left {
  justify-self: start;
}
.nav-right {
  justify-self: end;
}
/* Brand sits in its own grid cell */
.navbar-brand {
  justify-self: center;
}
.navbar-brand img {
  height: 40px;
}
/* Link styles */
.nav-left li a,
.nav-right li a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
  /* Prevent text in navigation links from wrapping onto multiple lines */
  white-space: nowrap;
}
.nav-left li a:hover,
.nav-right li a:hover,
.nav-left li a.active,
.nav-right li a.active {
  color: var(--primary-colour);
}
/* Responsive nav: stack items on small screens */
@media (max-width: 768px) {
  /* On small screens stack the navigation lists vertically.  Without the
     centred logo, we only need two rows: one for the left links and one
     for the right links. */
  .navbar > .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .nav-left,
  .nav-right {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    justify-self: center;
  }
  .nav-left {
    margin-bottom: 0.5rem;
  }
}

/* Hero section */
/* Hero Section */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* Remove the static background image; particles will provide dynamic background */
  background-image: none;
  overflow: hidden;
}

.hero-section {
  min-height: 100svh;          /* use small viewport unit for mobile URL bars */
  /* fallback */
  min-height: 100vh;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Further lighten overlay to reveal particles */
  background: linear-gradient(rgba(20, 20, 25, 0.2), rgba(30, 30, 35, 0.4));
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Canvas used for particle background */
#particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Simple animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-down {
  animation: fadeInDown 1s ease forwards;
}
.animate-fade-in-up {
  animation: fadeInUp 1s ease forwards;
}

/* Feature cards */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.feature-card {
  background-color: var(--card-background);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 calc(25% - 1.5rem);
  box-sizing: border-box;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.feature-card svg {
  width: 48px;
  height: 48px;
  fill: var(--primary-colour);
  margin-bottom: 1rem;
}
.feature-card h5 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.feature-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

@media (max-width: 992px) {
  .feature-card {
    flex: 1 1 calc(50% - 1.5rem);
  }
}
@media (max-width: 576px) {
  .feature-card {
    flex: 1 1 100%;
  }
}

/* Section headings */
.section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary-colour);
}
.section-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
}

/* Call‑to‑action block */
.cta-block {
  background-color: var(--section-background);
  border-radius: 8px;
  padding: 2.5rem;
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 3rem;   /* tweak to taste: 2rem–4rem */
}
.cta-block .btn-primary {
  background-color: var(--primary-colour);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s;
}
.cta-block .btn-primary:hover {
  background-color: #a50e15;
}


/* Footer */
footer {
  background-color: var(--footer-background);
  color: var(--text-muted);
  padding: 3rem 0 2rem;
  font-size: 0.9rem;
}

/* Layout wrapper for footer columns */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

/* Each column inside the footer */
.footer-col {
  flex: 1 1 200px;
}
.footer-col h4 {
  color: var(--primary-colour);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}
.footer-col p {
  margin: 0.3rem 0;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col ul li {
  margin-bottom: 0.5rem;
}
.footer-col ul li a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-col ul li a:hover {
  color: var(--primary-colour);
}

/* Ensure links within footer paragraphs adopt the same colour scheme */
.footer-col a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-col a:hover {
  color: var(--primary-colour);
}

/* Bottom section of footer */
.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  color: var(--text-muted);
}
.footer-bottom a {
  color: var(--primary-colour);
  text-decoration: none;
}
.footer-bottom a:hover {
  text-decoration: underline;
}

/* Utility classes */
.btn-primary {
  background-color: var(--primary-colour);
  border-color: var(--primary-colour);
}

/* Disabled navigation or button links */
.disabled-link {
  color: var(--text-muted);
  cursor: default;
  text-decoration: none;
  pointer-events: none;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: none;
  background-color: var(--primary-colour);
  color: #fff;
  padding: 0.6rem 0.9rem;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 50;
}
.back-to-top:hover {
  background-color: #a50e15;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #a50e15;
  border-color: #a50e15;
}

/* Navigation CTA buttons
   Buttons placed in the navigation bar for actions like opening a ticket or
   accessing the client area.  These reuse the primary colour palette but
   reduce the padding slightly so they integrate neatly into the nav bar. */
.nav-button {
  background-color: var(--primary-colour);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.nav-button:hover,
.nav-button:focus {
  background-color: #a50e15;
  color: #fff;
}

/* Buttons */
.btn-primary {
  background-color: var(--primary-colour);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  transition: background 0.3s;
}

/* Pricing Plans */
.plans {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}
.plan-card {
  /* Use the distinct plan background colour defined in the root variables.  This
     slightly lighter shade helps pricing plans stand out from the darker
     feature cards. */
  background-color: var(--plan-background);
  border-radius: 8px;
  padding: 2rem;
  flex: 1 1 calc(33.333% - 1.5rem);
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Add a red accent bar at the top of each plan card to visually separate
   pricing plans from feature cards.  The bar spans the full width of the
   card and inherits the primary colour. */
.plan-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary-colour);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.plan-card h3 {
  font-size: 1.5rem;
  color: var(--primary-colour);
  margin-bottom: 0.5rem;
}
.plan-card .price {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem 0 1rem;
  color: var(--text-light);
}
.plan-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.plan-card ul li {
  margin: 0.5rem 0;
}
.plan-card .btn-primary {
  margin-top: 1rem;
  display: inline-block;
}
@media (max-width: 992px) {
  .plan-card {
    flex: 1 1 calc(50% - 1.5rem);
  }
}
@media (max-width: 576px) {
  .plan-card {
    flex: 1 1 100%;
  }
}
.btn-primary:hover {
  background-color: #a50e15;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .hero-section h1 {
    font-size: 2rem;
  }
  .hero-section p.lead {
    font-size: 1rem;
  }
}

/* Particles container for hero backgrounds */
#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* temporary debug background to verify container visibility */
  background-color: rgba(255, 0, 0, 0.3);
}