/*
 * Guardian360 Site Styles
 *
 * This stylesheet defines the typography, layout and colour palette
 * used across all pages of the Guardian360 website. The design takes
 * inspiration from the original flyer provided by the user: dark
 * blues and fresh greens convey trust and growth. Sections are
 * separated by generous padding and centred within a max‑width
 * container to maintain readability on large screens. The button
 * styles create clear calls to action and adapt gracefully on
 * hover.
 */

body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', 'Arial', sans-serif;
  color: #333;
  background-color: #f7f7f7;
}

header {
  /* Use a white header to better showcase the dark blue text in the new logo
     imported from the user. A subtle border on the bottom helps separate
     the navigation from the rest of the page. */
  background-color: #ffffff;
  color: #003366;
  padding: 20px 0;
  text-align: center;
  border-bottom: 4px solid #003366;
}

header h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 1px;
}

/* When using the flyer logo image in the header, style it to align
   neatly with the navigation menu. The width can be adjusted to
   accommodate different screen sizes while preserving the aspect ratio. */
.logo {
  max-width: 240px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

nav ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

nav a {
  color: #003366;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease-in-out;
}

nav a:hover {
  color: #00a651; /* highlight on hover using the fresh green accent */
  text-decoration: underline;
}

/* Hero section on the home page */
/*
 * Hero section
 *
 * To ensure the headline and call‑to‑action don’t float over the rest of
 * the page, the hero is a flex container with a defined height. An
 * overlay pseudo‑element darkens the background image for better
 * contrast. All child elements are positioned relative so they stack
 * above the overlay and remain contained within the hero.
 */
.hero {
  position: relative;
  /* Use the uploaded hero image for version 5. The image still contains
     a green “Request a Demo” box, but we will overlay a clickable
     anchor over the box to provide functionality. */
  background: url('images/hero.png') center/cover no-repeat;
  color: #ffffff;
  height: 60vh;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  /* Clear any floats from external frameworks that might cause
     the hero to overlap subsequent content. */
  clear: both;
  width: 100%;
}

/* Dark overlay to improve text legibility over the hero image */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Removed dark tint; leaving fully transparent to preserve original graphic colours */
  background: rgba(0, 0, 0, 0);
  z-index: 0;
}

.hero h2,
.hero p,
.hero .btn {
  position: relative;
  z-index: 1;
}

.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.hero p {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

section {
  padding: 40px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

section h2 {
  color: #003366;
  margin-top: 0;
}

section h3 {
  color: #003366;
  margin-top: 30px;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
  line-height: 1.4;
}

.btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 25px;
  background-color: #00a651; /* fresh green accent */
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out;
}

.btn:hover {
  background-color: #008c45;
}

footer {
  background-color: #003366;
  color: #ffffff;
  text-align: center;
  padding: 20px 0;
  font-size: 0.9rem;
  margin-top: 40px;
}

/*
 * Call‑to‑action section immediately after the hero. Separating the
 * headline and button from the hero image prevents them from
 * overlapping other content on the page. The padding and centred
 * alignment give it prominence without using absolute positioning.
 */
.hero-content-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #f7f7f7;
}
.hero-content-section h2 {
  font-size: 2.5rem;
  color: #003366;
  margin-top: 0;
}
.hero-content-section p {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto;
  color: #333333;
}

/*
 * Prevent floating hero content from overlaying later content.
 * Some parent frameworks apply positioning rules globally. By
 * explicitly setting sections to position: relative and a z-index,
 * we ensure each section stays in its own stacking context.
 */
.hero,
section {
  position: relative;
  z-index: 0;
}