/* Define CSS Variables for your color palette */
:root {
  --primary-color: #002949;
  --secondary-color: #00677D;
  --tertiary-color: #4DB8CC;
  --light-gray: #B3B3B3;
  --lighter-gray: #E6E6E6;
  --accent-color: #D1AD4F;
}

/* Import Custom Fonts */
@font-face {
  font-family: 'Versailles';
  src: url('fonts/Versailles Roman.otf') format('opentype');
}
@font-face {
  font-family: 'Macklin Sans Light';
  src: url('fonts/MacklinSans-Light.otf') format('opentype');
}
@font-face {
  font-family: 'Macklin Sans Bold';
  src: url('fonts/MacklinSans-Bold.otf') format('opentype');
}

/* Global Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Macklin Sans Light', sans-serif;
  background-color: var(--lighter-gray);
  color: #333;
  line-height: 1.6;
  font-size: 18px; /* Increased body text size */
}

/* ------------------------ */
/* Header & Navigation      */
/* ------------------------ */

/* Full-width White Header for Logo */
.site-header {
  width: 100%;
  background-color: #fff;
  padding: 20px 0;
}

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

.header-container .logo img {
  height: 190px; /* 25% bigger than 150px (~190px) */
}

/* Full-width Blue Navigation Bar */
.site-nav {
  width: 100%;
  background-color: var(--primary-color);
}

.nav-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
}

.nav-container ul {
  list-style: none;
  display: flex;
}

.nav-container ul li {
  margin-left: 30px;  /* Increased from 20px to 30px */
}

.nav-container ul li a {
  color: #fff;
  text-decoration: none;
  font-family: 'Macklin Sans Bold', sans-serif;
  text-transform: uppercase;
}

/* ------------------------ */
/* Hero Section           */
/* ------------------------ */
.hero {
  position: relative;
  background: url('images/lighthouse.png') center/cover no-repeat;
  height: 400px;
  /* No overlay needed now */
}

/* ------------------------ */
/* Main Content Container */
/* ------------------------ */
.content {
  padding: 40px 20px;
  max-width: 800px;
  margin: 40px auto;
  background-color: #fff;
}

/* About and Contact Sections */
.about, .contact-info {
  margin-bottom: 40px;
}

/* H2 headers using Versailles font */
h2 {
  font-family: 'Versailles', serif;
  color: var(--primary-color); /* H2 text now uses secondary color */
  margin-bottom: 20px;
  border-bottom: 2px solid var(--tertiary-color); /* Border line now uses accent color */
  padding-bottom: 10px;
}

/* h3 headers in all caps using Macklin Sans Bold */
h3 {
  text-transform: uppercase;
  font-family: 'Macklin Sans Bold', sans-serif;
  color: var(--light-gray);
  margin-top: 30px;      /* Default top margin */
  margin-bottom: 10px;
}

/* Add even more space when an h3 immediately follows a paragraph */
p + h3 {
  margin-top: 60px;
}

/* Extra bottom margin for paragraphs */
p {
  margin-bottom: 20px;
}

/* ------------------------ */
/* Our Team Page Styles     */
/* ------------------------ */
.team-member {
  display: flex;
  margin-bottom: 40px;
  align-items: flex-start;
}

.team-member img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-right: 20px;
  border-radius: 5px;
}

.team-info h2 {
  margin-top: 0;
}

.team-info ul {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 10px;
}

/* Override responsive centering for team page */
@media (max-width: 768px) {
  .header-container, .nav-container, .content {
    padding: 0 10px;
  }
  .site-header, .site-nav {
    text-align: center;
  }
  .nav-container {
    justify-content: center;
  }
  .nav-container ul {
    flex-direction: column;
  }
  .nav-container ul li {
    margin: 10px 0;
  }
  /* For team page: keep team-member left aligned */
  .content.team .team-member {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .content.team .team-member img {
    margin-bottom: 20px;
    margin-right: 0;
  }
}

/* ------------------------ */
/* Footer Styles            */
/* ------------------------ */
footer {
  background-color: var(--primary-color);
  color: var(--light-gray);
  text-align: center;
  padding: 20px;
}