/* 1. Base Reset & Typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #F4F4F2; /* Soft Sail White */
  color: #333;
  font-family: 'Georgia', serif;
  line-height: 1.6;
}

/* 2. Layout Containers */
.content {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.content p {
  margin-bottom: 25px;
  font-size: 1.1rem;
}

/* Fixes the layout for floated images */
.content::after {
  content: "";
  display: table;
  clear: both;
}

/* 3. Image Alignment & Floats */
.img-left {
  float: left;
  margin: 10px 20px 15px 0; /* Space on the right and bottom */
  max-width: 300px;
  width: 100%;
  height: auto;
  border: 4px solid #C19A6B;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.img-right {
  float: right;
  margin: 10px 0 15px 20px; /* Space on the left and bottom */
  max-width: 300px;
  width: 100%;
  height: auto;
  border: 4px solid #C19A6B;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Clearfix for Mobile - makes sure images don't overlap onto next sections */
@media (max-width: 600px) {
  .img-left, .img-right {
    float: none;
    display: block;
    margin: 20px auto;
    max-width: 100%;
  }
}

/* 3. Header & Masthead */
.site-header {
  background-color: #002B5B; /* Deep Navy */
}

.masthead {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.masthead-images img {
  width: 100%;
  height: 142px;
  object-fit: cover;
  display: block;
  opacity: 0.6;
}

.masthead-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  width: 100%;
  pointer-events: none;
}

.company {
  font-size: 3rem;
  color: #ef1010; /* Nautical Red */
  text-shadow: 2px 2px 10px rgba(0,0,0,1);
  margin: 0;
}

.slogan {
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 1px 1px 5px rgba(0,0,0,1);
}

/* 4. Navigation */
.main-nav {
  background: #1A5F7A; /* Ocean Blue */
  border-top: 4px solid #C19A6B; /* Brass Accent */
  border-bottom: 1px solid #002B5B;
}

.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  padding: 0;
}

.main-nav a {
  display: block;
  padding: 1rem 1.5rem;
  color: white;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.main-nav a:hover {
  background: #002B5B;
  color: #C19A6B; /* Brass on hover */
}

/* 5. Grids (Photos, Reports, Articles) */
.photo-grid, .article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

/* Common Card Styling */
.country-card, .article-card {
  background-color: #ffffff;
  border: 1px solid #d1d1d1;
  border-left: 6px solid #1A5F7A; /* Blue spine */
  border-radius: 4px;
  padding: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.country-card:hover, .article-card:hover {
  transform: translateY(-3px);
  border-left-color: #C19A6B; /* Turns brass */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.country-card a, .article-card a {
  text-decoration: none;
  display: block;
  color: inherit;
}

/* 6. Specific Icons for different sections */
/* Reports get a Logbook */
.country-card h3::before, .country-card h5::before {
  content: "\1F4D6"; 
  margin-right: 10px;
}

/* Articles get a Compass */
.article-grid .article-card h3::before {
  content: "\1F9ED";
}

/* 7. Footer */
.site-footer {
  margin-top: 50px;
  border-top: 4px solid #C19A6B; /* Brass */
}

.footer-bottom {
  background-color: #002B5B;
  color: #ffffff;
  text-align: center;
  padding: 40px 10px;
}

/* 8. Mobile Adjustments */
@media (max-width: 768px) {
  .company { font-size: 2rem; }
  .main-nav ul { flex-direction: column; text-align: center; }
  .content { margin: 10px auto; }
}

/* Mobile Table Fix */
@media (max-width: 600px) {
  .content table, 
  .content tbody, 
  .content tr, 
  .content td {
    display: block;
    width: 100%;
  }
  
  .content td {
    padding: 0;
    margin-bottom: 0;
  }
  
  .content ul {
    padding-left: 20px;
  }
}