/* Base typography and layout */
/*
  Global styles

  The original design used the system default sans‑serif font and a light
  background.  To create a more tactical and modern feel, we import a pair
  of robust typefaces from Google Fonts and establish a darker palette
  inspired by other leading AI/automation websites.  The dark header
  contrasts with crisp, light text while the muted background keeps the
  focus on the content.  Colour variables are defined via CSS custom
  properties for easier customisation.
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap');

:root {
    --primary-color: #05668d; /* deep teal reminiscent of gator scales */
    --secondary-color: #f6ae2d; /* warm gold accent */
    --dark-bg: #0a192f; /* dark blue/black background for hero and footer */
    --light-bg: #f5f5f5; /* light gray background for sections */
    --text-dark: #1f2933; /* dark text for light backgrounds */
    --text-light: #ffffff; /* light text for dark backgrounds */
}

body {
    margin: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--light-bg);
}

/* Navigation bar */
/*
   The navigation bar is fixed at the top of the viewport and displays
   the logo and menu items.  On larger screens the menu items sit
   inline next to the logo.  On smaller screens the list collapses
   into a hamburger button that toggles a vertical menu.
*/
/*
  Navigation bar displayed within the hero section.  It is not fixed
  to the viewport; instead it sits naturally at the top of the header.
*/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    position: relative;
    z-index: 100;
}

/* Logo */
.nav-logo img {
    max-height: 90px;
    width: auto;
}

/* The menu list.  By default it is displayed as a horizontal flex row. */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-menu li a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: color 0.3s;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
}

.nav-menu li a:hover {
    color: var(--secondary-color);
}

/* Hamburger menu toggle – hidden by default on large screens */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 24px;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-light);
    border-radius: 2px;
}

/* Mobile styles */
/*
  Collapse the navigation menu to a hamburger at larger screen sizes.
  Some users may view the site at widths around 1200–1300px where the
  inline menu runs off the right side.  Increasing the breakpoint ensures
  that the menu collapses to a toggle earlier, avoiding overflow.
*/
@media (max-width: 1280px) {
    /* Show the toggle button and hide the inline menu */
    .nav-toggle {
        display: flex;
    }
    .nav-menu {
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: var(--dark-bg);
        padding: 12px 20px;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        gap: 12px;
        display: none;
        width: max-content;
    }
    .nav-menu.active {
        display: flex;
    }
    .nav-menu li a {
        font-size: 0.9rem;
    }
}

/* Hero section */
header.hero {
    background: linear-gradient(135deg, var(--dark-bg) 0%, #0f3057 100%);
    color: var(--text-light);
    padding: 120px 20px 140px; /* reduced top padding since nav is now within the hero */
    position: relative;
    overflow: hidden;
}

.hero-content {
    text-align: center;
    margin-top: 60px;
}

.hero-content h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5em;
    margin: 0 0 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.hero-content .tagline {
    font-size: 1.4em;
    margin-bottom: 40px;
    font-style: italic;
    color: var(--text-light);
    font-family: 'Open Sans', sans-serif;
}

.cta-button {
    display: inline-block;
    padding: 16px 32px;
    background-color: var(--primary-color);
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Provide a fallback hover colour since CSS variables can't be darkened by native functions */
.cta-button:hover {
    background-color: #044e75;
}

/* Section wrapper styles */
.section {
    padding: 60px 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Section headings */
.section h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary-color);
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Service cards */
/*.service cards */
.service {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-top: 4px solid var(--primary-color);
}

.service:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.service h3 {
    margin-top: 0;
    color: var(--primary-color);
    font-size: 1.3em;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.contact p {
    text-align: center;
}

footer {
    background-color: var(--dark-bg);
    color: var(--text-light);
    text-align: center;
    padding: 24px 0;
    margin-top: 60px;
    font-size: 0.9rem;
}

/* Contact form styles */
#contact form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    margin: 20px auto 0;
}

#contact input,
#contact textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
}

#contact textarea {
    min-height: 120px;
    resize: vertical;
}

#contact button {
    background-color: #009688;
    color: #ffffff;
    border: none;
    padding: 12px;
    font-size: 1em;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#contact button:hover {
    background-color: #00796b;
}

/*
  Additional mobile adjustments
  At narrow widths we reduce font sizes, stack service cards into a single column
  and ensure the contact form and navigation menu fill the available width.
*/
@media (max-width: 768px) {
    header.hero {
        padding: 100px 16px 120px;
    }
    .hero-content h1 {
        font-size: 2.2em;
    }
    .hero-content .tagline {
        font-size: 1.1em;
        margin-bottom: 24px;
    }
    .section {
        padding: 40px 16px;
    }
    .service-grid {
        grid-template-columns: 1fr;
    }
    #contact form {
        max-width: 100%;
        padding: 0 10px;
    }
    /* override nav menu width for mobile */
    .nav-menu {
        width: 100%;
        right: 0;
    }
}