/* style.css */

/*
==================================================
1. Root Variables & Typography
==================================================
*/
:root {
  /* Brand Colors - Adjust these colors significantly to personalize the look! */
  --primary-color: #0077b6; /* Deep Blue - Changed from orange for a different mood */
  --secondary-color: #333333; /* Dark text color */
  --light-bg: #f8f9fa; /* Light background for sections */
  --card-hover-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

body {
  /* Add a subtle font change for a custom look (e.g., use a Google Font) */
  font-family: "Poppins", sans-serif;
  background-color: #ffffff;
}

h1,
h2,
h3 {
  color: var(--secondary-color);
  font-weight: 700; /* Bolder headings */
}

/*
==================================================
2. Section Styling
==================================================
*/
#hero-section {
  background-color: var(--light-bg);
  color: var(--secondary-color);
  /* Reduced min-height to 350px, feels less blocky */
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Optional: Add custom border/shadow for depth */
  border-bottom: 3px solid var(--primary-color);

  /* --- UPDATED HERO BACKGROUND IMAGE using the new address --- */
  background-image: url("https://encrypted-tbn0.gstatic.com/licensed-image?q=tbn:ANd9GcTX7sUjR6yorWuP8uOrKVJCN2XyJvvC97Z_UnjUI0tdtqL3ANNPl9--b0ht4sefIVWcz00Dh_5IDTMpJBc7xflkR8nN3ah_bsL3riMwWkCE5nV_bgU"); 
  background-size: cover; /* Ensures the image covers the entire section */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents image from repeating */
  position: relative; /* Needed for overlay */
  overflow: hidden; /* To keep image within bounds */
}

/* Optional: Add an overlay for better text readability */
#hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Dark overlay */
  z-index: 1; /* Place overlay above background image */
}

/* Ensure content is above the overlay */
#hero-section .row {
  position: relative;
  z-index: 2; /* Place content above the overlay */
}

/* Make text white for better contrast on a dark background */
#hero-section h1,
#hero-section p {
  color: white !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Subtle text shadow */
}

/* * NEW FIX: Style the "Learn More" button for contrast on the dark hero background.
* Changing it to a white outline with blue text.
*/
#hero-section .btn-outline-secondary {
    border-color: white; 
    color: white !important; /* Ensures the text is visible */
}

#hero-section .btn-outline-secondary:hover {
    background-color: var(--primary-color); /* Fill with primary color on hover */
    color: white !important;
}

/* Make features section background slightly different */
#features-section {
  background-color: #ffffff;
}

/*
==================================================
3. Custom Button & Interactive Element Styling
==================================================
*/
.btn-primary-custom {
  /* Set color using variables */
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white !important; /* Ensure text is visible */
  padding: 0.75rem 1.5rem; /* Increase padding for larger feel */
  font-weight: 600;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    transform 0.2s;
}

.btn-primary-custom:hover,
.btn-primary-custom:focus {
  /* Add a subtle hover effect */
  background-color: #005a8d; /* Slightly darker shade of the primary color */
  border-color: #005a8d;
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 4px 8px rgba(0, 119, 182, 0.3);
}

/* Styling for the three core feature blocks */
#features-section .p-4 {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

#features-section .p-4:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-hover-shadow);
}

/* Styling for the product category cards */
.card {
  border: none;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Style for the icons in the feature and category sections */
.text-primary,
.text-secondary {
  color: var(
    --primary-color
  ) !important; /* Force primary color on Bootstrap icons */
}

/* Interactive subscription form styling */
#interactive-section .bg-light {
  border: 1px solid #dee2e6;
}

/* ==================================================
4. Dark Mode Styling
==================================================
*/
body.dark-mode {
  background-color: #121212;
  color: #f0f0f0; /* Light gray text */
}

/* Dark mode for sections/cards that were light background */
body.dark-mode #hero-section,
body.dark-mode .bg-light,
body.dark-mode .card {
  background-color: #1e1e1e !important;
  color: #f0f0f0;
  border-color: #3a3a3a !important;
}

/* Ensure text and links are visible */
body.dark-mode p,
body.dark-mode .text-muted,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
  color: #f0f0f0 !important;
}

/* Adjust the navigation bar in dark mode */
body.dark-mode #main-nav .bg-dark {
  background-color: #0d0d0d !important;
}

/* Style the toggle button itself */
#theme-toggle .bi-sun-fill {
  color: orange; /* Sun is visible in light mode */
}

body.dark-mode #theme-toggle .bi-moon-fill {
  color: #f0f0f0; /* Moon is visible in dark mode */
}