/* 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;
}

/* --- NEW RV ADVENTURE OVERRIDES --- */

/* 3. Header & Masthead - RV Layout */
.masthead {
  display: flex;           /* Aligns items side-by-side */
  align-items: center;     /* Centers them vertically */
  justify-content: center; /* Keeps everything grouped in the middle */
  gap: 30px;               /* Space between the photo and the text */
  padding: 40px 20px;
  background-color: #2d4739; 
  position: relative;
  overflow: hidden;
}

/* The specific RV Photo in the header */
.header-rv-photo {
  width: 180px;            /* Size of the "avatar" photo */
  height: 120px;
  object-fit: cover;
  border: 3px solid #f4f1ea; /* "Polaroid" style white border */
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 20;             /* Ensures it stays above the background */
}

.masthead-content {
  text-align: left;        /* Changed from center to align with photo */
  z-index: 20;
}

.company {
  font-size: 3.5rem;       /* Slightly larger for impact */
  color: #f4f1ea;
  margin: 0;
  line-height: 1;
}

.slogan {
  display: block;           /* Puts it on its own line below the title */
  font-size: 1.2rem;
  color: #a68a56;           /* Warm tan/gold color to match your accents */
  font-weight: 600;         /* Makes it thick enough to read */
  margin-top: 5px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Adds a little "lift" from the background */
}

/* Optional: This makes the "em" tag (italics) look cleaner */
.slogan em {
  font-style: italic;
  opacity: 0.9;
}

/* Background image handling (The "Ghost" image) */
.masthead-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;            /* Very faint so it doesn't distract */
  z-index: 1;
}

.masthead-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 4. Navigation - Horizontal & Readable */
.main-nav {
  background: #3e3e3e; /* Slate Gray (Tire/Road color) */
  border-top: 4px solid #a68a56; /* Wood/Tan Accent */
  border-bottom: 2px solid #2d4739; /* Forest Green bottom edge */
}

.main-nav ul {
  list-style: none;
  display: flex;          /* THIS MAKES IT HORIZONTAL */
  justify-content: center; /* Centers the links */
  flex-wrap: wrap;        /* Allows wrapping on small screens */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.main-nav li {
  /* No extra styling needed, flexbox handles the layout */
}

.main-nav a {
  display: block;
  padding: 15px 20px;
  color: #ffffff;         /* CRISP WHITE - Very easy to read */
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.main-nav a:hover {
  background: #a68a56;    /* Warm Tan on hover */
  color: #ffffff;         /* Keeps text white */
}

/* 5. Grids & Cards - Replacing the "Blue Spine" */
.country-card, .article-card {
  border-left: 6px solid #2d4739; /* Forest Green Spine */
}

.country-card:hover, .article-card:hover {
  border-left-color: #a68a56; /* Wood tone on hover */
}

/* 7. Footer - Replacing Navy with Forest Green */
.site-footer {
    background-color: #2d5a27; /* Your green color */
    color: white !important;
    text-align: center;
}

.footer-bottom p {
    color: #ffffff; /* This will make the text white */
    margin: 0;
    padding: 20px 0;
}

/* Adjusting the Home Page Image Border */
.img-left {
  border: 6px solid #fff; /* Classic photo border */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #333; /* Matches a classic nautical/RV trim */
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    display: none; /* Hidden by default */
    z-index: 1000;
    transition: background-color 0.3s;
}

.back-to-top:hover {
    background-color: #555;
}

.back-to-top .arrow {
    font-size: 1.2em;
    display: block;
    text-align: center;
}

.back-to-top .text {
    font-size: 0.7em;
    display: block;
}