/* styles.css */

/* Define CSS variables for theming (light and dark modes) */
:root {
    --bg-color: #ffffff; /* Background color for the entire page in light mode */
    --text-color: #333333; /* Primary text color in light mode */
    --muted-color: #6c757d; /* Muted text color (e.g., for secondary text) in light mode */
    --section-bg: #f8f9fa; /* Background color for alternating sections in light mode */
    --navbar-bg: #f8f9fa; /* Background color for the navbar in light mode */
    --btn-bg: #212529; /* Background color for buttons in light mode */
    --btn-text: #ffffff; /* Text color for buttons in light mode */
    --badge-bg: #f8f9fa; /* Background color for badges in light mode */
    --badge-text: #000000; /* Text color for badges in light mode */
    --modal-bg: #ffffff; /* Background color for modals in light mode */
    --modal-text: #333333; /* Text color for modals in light mode */
    --logo-url: url('light-logo.svg'); /* Logo for the light mode */
}

/* Define CSS variables for dark mode */
body.dark-mode {
    --bg-color: #121212; /* Darker background color for the sections in dark mode */
    --text-color: #e0e0e0; /* Lighter text color for readability in dark mode */
    --muted-color: #a0a0a0; /* Lighter muted text color in dark mode */
    --section-bg: #1e1e1e; /* Darker background for the whole page in dark mode */
    --navbar-bg: #1e1e1e; /* Darker background for the navbar in dark mode */
    --btn-bg: #e0e0e0; /* Lighter button background in dark mode for contrast */
    --btn-text: #121212; /* Darker button text in dark mode for readability */
    --badge-bg: #2a2a2a; /* Darker badge background in dark mode */
    --badge-text: #e0e0e0; /* Lighter badge text in dark mode for readability */
    --modal-bg: #1e1e1e; /* Darker modal background in dark mode */
    --modal-text: #e0e0e0; /* Lighter modal text in dark mode for readability */
    --logo-url: url('dark-logo.svg'); /* Logo for the dark mode */
}

/* Base styles for the body element */
body {
    font-family: 'Roboto', sans-serif; /* Set the font family to Roboto for consistent typography */
    line-height: 1.6; /* Set line height for better readability */
    background-color: var(--bg-color); /* Use the background color variable for theming */
    color: var(--text-color); /* Use the text color variable for theming */
    transition: all 0.3s ease; /* Smooth transition for theme changes (e.g., colors) */
    font-size: 1.25rem;
    padding-top: 56px; /* Add padding to the top to account for the fixed navbar height */
}

/* Styles for the navbar */
.navbar {
    background-color: var(--navbar-bg); /* Use the navbar background color variable for theming */
    padding-right: 0 !important; /* Remove any right padding from the navbar */
}

/* Adjust the container inside the navbar with higher specificity */
.navbar.navbar-expand-lg .container {
    padding-right: 0 !important; /* Remove right padding from the container */
}

/* Ensure navbar styles on all screen sizes */
@media (max-width: 576px) {
    .navbar {
        flex-wrap: nowrap; /* Prevent wrapping */
        align-items: center; /* Center items vertically */
    }
}

/* Styles for the navbar brand (logo or text) */
.navbar-brand {
    font-weight: 700; /* Make the navbar brand text bold */
    color: var(--text-color) !important; /* Use the text color variable and override Bootstrap defaults */
    content: var(--logo-url);
    height: 50px; /* Adjust size as needed */
}

/* Media query for mobile devices to fix logo alignment */
@media (max-width: 576px) {
    .navbar-brand {
        max-width: 150px; /* Reduce logo width for mobile */
        height: auto; /* Maintain aspect ratio */
        padding: 0; /* Remove extra padding */
        margin-left: -0.5rem; /* Move the logo slightly to the left */
    }
}

/* Media query for desktop screens to adjust logo size */
@media (min-width: 577px) {
    .navbar-brand {
        max-width: 200px; /* Set a reasonable width for desktop */
        height: auto; /* Maintain aspect ratio */
    }
}

/* Styles for the Privacy and Terms links in the navbar */
.navbar a {
    font-size: 1.1rem !important; /* Force smaller font size for all links in navbar */
    color: var(--muted-color) !important; /* Use muted color for consistency */
    padding: 0.3rem 0.3rem !important; /* Keep padding for balanced spacing */
    margin: 0 !important; /* Remove any default margins */
    text-decoration: underline; /* Match the underline style from the image */
    position: relative; /* For positioning the separator */
}

/* Remove extra space from the right of the Terms link */
.navbar.navbar-expand-lg .container .navbar-links a:last-child {
    padding-right: 0.5rem !important; /* Minimal padding to avoid touching the edge */
    margin-right: 0 !important; /* Remove extra margin from the right */
}

/* Remove extra space from the navbar-links container */
.navbar-links {
    margin-right: 0 !important; /* Remove any right margin */
    padding-right: 0 !important; /* Remove any right padding */
}

/* Styles for the floating dark/light mode toggle button */
#mode-toggle {
    position: fixed; /* Fix the button to the viewport */
    bottom: 20px; /* Distance from the bottom */
    right: 20px; /* Distance from the right */
    border: 1px solid var(--muted-color); /* Add a border to the toggle button using the muted color */
    width: 40px; /* Fixed width to prevent shifting */
    height: 40px; /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Remove default padding to center the icon */
    border-radius: 50%; /* Make the button circular */
    z-index: 1000; /* Ensure it stays above other elements */
}

/* Ensure the icon inside the mode toggle button is centered */
#mode-toggle i {
    font-size: 1.2rem; /* Adjust icon size if needed */
}

/* Styles for muted text (e.g., secondary text) */
.text-muted {
    color: var(--muted-color) !important; /* Use the muted color variable and override Bootstrap defaults */
}

/* Styles for headings (h1, h2, h3) */
h1, h2, h3 {
    font-weight: 700; /* Make headings bold for emphasis */
}

/* Styles for primary text (e.g., highlighted text) */
.text-primary {
    color: #ff6200 !important; /* Set a specific orange color for primary text and override Bootstrap defaults */
}

/* Styles for the dark button (e.g., "Get Notified" button) */
.btn-dark {
    background-color: var(--btn-bg); /* Use the button background color variable for theming */
    color: var(--btn-text); /* Use the button text color variable for theming */
    font-weight: 700; /* Make the button text bold */
    padding: 0.75rem 2rem; /* Add padding to the button for better appearance */
}

/* Styles for odd-numbered sections (e.g., Main, About) */
section:nth-child(odd) {
    background-color: var(--bg-color); /* Use the main background color for odd sections */
}

/* Styles for even-numbered sections (e.g., Features) */
section:nth-child(even) {
    background-color: var(--section-bg); /* Use the section background color for even sections */
}

/* Styles for badges (e.g., "COMING SOON" badge) */
.badge {
    background-color: var(--badge-bg); /* Use the badge background color variable for theming */
    color: var(--badge-text); /* Use the badge text color variable for theming */
}

/* Styles for footer links (e.g., social media icons) */
footer a {
    text-decoration: none; /* Remove underlines from footer links */
}

/* Styles for modal content (e.g., Privacy and Terms modals) */
.modal-content {
    background-color: var(--modal-bg); /* Use the modal background color variable for theming */
    color: var(--modal-text); /* Use the modal text color variable for theming */
}

/* Styles for the About section heading and text */
#about h2 {
    font-size: 1.5rem; /* Set the font size of the "About Us" heading */
}

#about p {
    font-size: 1.25rem; /* Set the font size of the "About Us" paragraph text */
    font-weight: 200;
}