/*
  Global stylesheet for the multi‑page Flip Flop Travel Co site.

  This CSS defines a modern, professional aesthetic using a variable‑based
  colour palette and simple grid layouts. The design is responsive and
  ensures consistent styling across all pages, including the home page,
  services, recent wins, young traveller advantage, pricing tiers, about
  section, quote request form and FAQ. A sticky header improves navigation
  by keeping the navigation bar visible at the top of the viewport.
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Colour and font variables for easy theme adjustments */
:root {
  --primary: #0c3c78;
  --accent: #0070f3;
  --background: #f5f5f5;
  --foreground: #ffffff;
  --text: #333333;
  --light: #e6f3ff;
  --shadow: rgba(0, 0, 0, 0.05);
  font-family: 'Poppins', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  line-height: 1.6;
  font-weight: 400;
}

/* Sticky header with logo and navigation */
header {
  background: var(--primary);
  color: var(--foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
}

header h1 a {
  color: var(--foreground);
  text-decoration: none;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

nav a {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

nav a:hover {
  color: var(--accent);
}

/* Generic section styling */
section {
  padding: 4rem 2rem;
}

/* Hero section for the home page */
.hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: var(--foreground);
  text-align: center;
  padding: 6rem 2rem;
}

.hero h2 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 600;
}

.hero p {
  margin-top: 1rem;
  font-size: 1.1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--foreground);
  color: var(--primary);
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease;
}

.btn:hover {
  background: #f1f1f1;
}

/*
 * Logo image sizing
 *
 * The flip‑flop icon displayed next to the company name in the header should
 * scale appropriately and align vertically with the text. The margin
 * provides a small gap between the icon and the wordmark.
 */
.logo-img {
  width: 32px;
  height: auto;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* Responsive grid helpers */
.grid {
  display: grid;
  gap: 2rem;
}

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

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Card component used for services, wins, advantage and pricing sections */
.card {
  background: var(--foreground);
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px var(--shadow);
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.card p {
  margin: 0.5rem 0 0;
}

/* Highlighted card for featured pricing tier */
.card.highlight {
  border: 2px solid var(--accent);
}

/* Photo grid for the about section */
.photo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.photo-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Mobile menu toggle button */
.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--foreground);
  cursor: pointer;
}

/* Responsive tweaks for smaller screens */
@media (max-width: 768px) {
  /* Stack header content vertically on narrow viewports */
  header {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Display the hamburger button and hide the nav list by default */
  .menu-toggle {
    display: block;
  }
  nav ul {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
  }
  /* When menu is open, show the nav list */
  nav ul.open {
    display: flex;
  }
  /* Centre align the hero text for smaller screens */
  .hero h2 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}

@media (max-width: 600px) {
  /* Ensure grids collapse into single columns on very small devices */
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  /* Reduce photo grid image height on small devices */
  .photo-grid img {
    height: 160px;
  }
}

/* Form styling for the quote page */
.form-container {
  max-width: 650px;
  margin: 0 auto;
  background: var(--foreground);
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px var(--shadow);
}

form label {
  display: block;
  margin-top: 1rem;
  font-weight: 500;
}

form input,
form textarea,
form select {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  border: 1px solid #cccccc;
  border-radius: 0.375rem;
  font-size: 1rem;
  resize: vertical;
}

form button {
  margin-top: 1.5rem;
  background: var(--primary);
  color: var(--foreground);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

form button:hover {
  background: var(--accent);
}

/* Footer styling */
footer {
  background: var(--primary);
  color: var(--foreground);
  text-align: center;
  padding: 1.5rem 2rem;
  margin-top: 2rem;
}