/*
  styles.css

  This stylesheet provides responsive styles for the business landing page.
  It follows modern best practices by using CSS variables for colors, fluid
  typography with clamp(), flexbox layouts, and generous white space for
  readability. The hero section uses a background image (generated with the
  imagegen tool) to set the tone of the page. Colors and fonts can be
  customized by editing the variables defined under :root.
*/

:root {
    /*
      Primary and secondary colors updated to match Havoc IT Consulting's logo.
      The primary red is sampled from the logo (#CB1B0E) and used for buttons and
      highlights. The secondary color is a slightly lighter red for hover states.
    */
    --primary: #cb1b0e;
    --secondary: #e8472e;
    --bg-light: #f9f9f9;
    --bg-medium: #ffffff;
    --text-dark: #1f2937;
    --text-light: #ffffff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
    scroll-behavior: smooth;
}

/* Navigation bar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: relative;
    z-index: 2;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

.nav-links {
    list-style: none;
    display: flex;
    /* We'll manage spacing using margin on list items for better cross-browser support */
    margin-left: 2rem;
}

/* Apply margin to each navigation item except the first */
.nav-links li + li {
    margin-left: 1.5rem;
}

/* Language selector */
.lang-selector {
    margin-left: 2rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.lang-selector a {
    color: var(--text-light);
    text-decoration: none;
    margin: 0 0.25rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.lang-selector a.active {
    color: var(--primary);
}

.lang-selector a:hover {
    color: var(--secondary);
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--primary);
}

/* Hero section */
.hero {
    position: relative;
    height: 100vh;
    color: var(--text-light);
    /* Background image for the hero. Placed in the images folder within the
       landing_page directory. */
    background-image: url("images/hero.png");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* Dark overlay for readability */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 0 1rem;
}

.hero-content h1 {
    font-size: clamp(2rem, 6vw, 4rem);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.hero-content p {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    margin-bottom: 1.5rem;
}

.cta-btn {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
}

.cta-btn:hover {
    background: var(--secondary);
    transform: translateY(-2px);
}

/* Section basics */
section {
    padding: 4rem 2rem;
    position: relative;
}

section h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-dark);
}

/* Features section */
.features {
    background-color: var(--bg-medium);
}

.feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.feature {
    background-color: var(--bg-light);
    border-radius: 0.75rem;
    padding: 2rem;
    width: 280px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.feature:hover {
    transform: translateY(-4px);
}

.icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

/* About section */
.about {
    background-color: var(--bg-light);
    color: var(--text-dark);
    text-align: center;
}

.about p {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Testimonials section */
.testimonials {
    background-color: var(--bg-medium);
    color: var(--text-dark);
}

.testimonial-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.testimonial {
    background-color: var(--bg-light);
    border-radius: 0.75rem;
    padding: 2rem;
    width: 320px;
    font-style: italic;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.testimonial span {
    display: block;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--primary);
}

/* Contact section */
.contact {
    background-color: var(--bg-light);
    text-align: center;
}

.contact form {
    margin: 0 auto;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact input,
.contact textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
}

.contact textarea {
    resize: vertical;
}

.contact button {
    background-color: var(--primary);
    color: white;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
}

.contact button:hover {
    background-color: var(--secondary);
    transform: translateY(-2px);
}

/* Footer */
footer {
    background-color: #1f2937;
    color: var(--text-light);
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Hide navigation links on small screens for simplicity */
    }
    .feature {
        width: 100%;
    }
    .testimonial {
        width: 100%;
    }
    .hero-content h1 {
        font-size: clamp(1.5rem, 7vw, 3rem);
    }
    .hero-content p {
        font-size: clamp(0.875rem, 3vw, 1.25rem);
    }
}