/* ==========================================================================
   Base / Reset
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: #143a3a;
  background: #0f7c7c; /* Teal page background */
}

img { max-width: 100%; display: block; }
a { color: #0b5c5c; text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* Spacing helpers */
.section { padding: 36px 0; }
.over-hero { margin-top: -60px; position: relative; z-index: 1; margin-bottom: 24px; }

/* Cards */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.12);
  padding: 18px;
}

/* Buttons */
.buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.button {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #0c6f6f;
  color: #fff;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.12);
}
.button:hover { filter: brightness(1.04); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button-outline {
  background: #fff;
  color: #0c6f6f;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
/* If your header markup uses .site-header */
.site-header{
  position: sticky; top: 0; z-index: 10;
  background: #0d6f6f; color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.12);
  width: 100%;
}
.site-header .inner{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  flex-wrap: nowrap;
  width: min(1100px, 92vw);
  margin: 0 auto;
}
.brand{
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: .2px; color: #fff;
}
.nav-list{
  list-style: none; display: flex; gap: 16px;
  padding: 0; margin: 0; flex-wrap: nowrap;
}
.nav-list a{
  display: inline-block; padding: 8px 10px; border-radius: 8px;
  color: #fff; background: transparent; border: 1px solid transparent;
  font-weight: 600;
}
.nav-list a.active,
.nav-list a:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* Mobile stack for .site-header */
@media (max-width: 720px){
  .site-header .inner{ flex-direction: column; align-items: stretch; }
  .brand{ justify-content: center; padding-bottom: 6px; }
  .nav-list{ justify-content: center; flex-wrap: wrap; }
}

/* If header/footer are injected into #header/#footer, make sure they look right */
#header > *{
  position: sticky; top: 0; z-index: 1000;
  width: 100%; background: #0d6f6f; color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
#header .container,
#header .inner,
#header > * > .container,
#header > * > div:first-child{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 16px; flex-wrap: nowrap;
}
#header nav ul,
.nav-list{
  list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: nowrap;
}
#header nav a,
.nav-list a{
  color: #fff; text-decoration: none; padding: 8px 10px; border-radius: 8px;
  border: 1px solid transparent; font-weight: 600;
}
#header nav a:hover,
.nav-list a:hover,
.nav-list a.active{ background: rgba(255,255,255,.12); }
@media (max-width: 720px){
  #header .container,
  #header .inner,
  #header > * > .container,
  #header > * > div:first-child{ flex-direction: column; align-items: stretch; }
  #header nav ul,
  .nav-list{ justify-content: center; flex-wrap: wrap; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 380px;
  display: grid;
  place-items: center;
  color: #fff;
  background: center / cover no-repeat var(--hero-img, url('images/hero.png'));
}
.hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.45));
}
.hero__content { position: relative; text-align: center; padding: 60px 0; }
.hero h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 44px); }
.hero p.lead { margin: 0; opacity: .96; }

/* ==========================================================================
   Grid helpers
   ========================================================================== */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(250px, 1fr)); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Home top tiles
   ========================================================================== */
.cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(300px,1fr));
  margin-bottom: 18px;  /* <-- add this */
}

/* ==========================================================================
   CTA (Home narrow; add-ons/About can use plain .card for full width)
   ========================================================================== */
.cta-card--narrow { max-width: 560px; margin-inline: auto; }

/* ==========================================================================
   Campers (Home two-up slim)
   ========================================================================== */
.campers-grid {
  display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 18px; align-items: start;
}
@media (max-width: 800px) { .campers-grid { grid-template-columns: 1fr; } }

.card--camper {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
}
.card--camper img {
  width: 128px; height: 96px; object-fit: cover;
  border-radius: 10px; flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.card--camper .specs { display:flex; gap: 12px; padding: 0; margin: 6px 0 10px; list-style: none; }

/* ==========================================================================
   Fleet page grid & cards
   ========================================================================== */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.card--camper .camper-name { margin: 0 0 4px; }
.card--camper .buttons { margin-top: 6px; }

/* ==========================================================================
   Lightbox (lb__*) — draws arrows with CSS so no duplicate glyphs
   ========================================================================== */
.lb[hidden] { display: none !important; }

.lb {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
}

.lb__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }

.lb__dialog {
  position: relative;             /* anchor for arrows */
  background: #000;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  padding: 14px 56px;             /* side gutters for arrows */
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
  /* let the page scroll vertically; we’ll handle horizontal swipes in JS */
  touch-action: pan-y;
}

.lb__img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

.lb__caption { display: none !important; }  /* hide descriptions */

.lb__close {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,.5);
  color: #fff; border: 0; width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
}

/* Arrow buttons (leave button text empty in HTML) */
.lb__prev,
.lb__next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,.75);
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 5;
  /* safety if any stray text is present */
  font-size: 0; color: transparent;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

.lb__prev{ left: 12px; }
.lb__next{ right: 12px; }

.lb__prev::before,
.lb__next::before{
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 14px solid #fff;      /* right-pointing by default */
}

.lb__prev::before{ transform: rotate(180deg); } /* make it left-pointing */

.lb__prev:hover,
.lb__next:hover{ background: rgba(0,0,0,.85); }
.lb__prev:focus-visible,
.lb__next:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px){
  .lb__dialog{ padding: 14px 44px; }
  .lb__img{ max-height: 64vh; }
  .lb__prev, .lb__next{ width: 42px; height: 42px; }
  .lb__prev::before, .lb__next::before{
    border-top-width: 9px; border-bottom-width: 9px; border-left-width: 12px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding: 36px 0 28px;
  color: #eaffff;
  background: transparent;
}
.footer-wrap {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.footer-wrap p { margin: 0; opacity: .9; }

/* Footer logo size */
.footer-logo,
#footer .footer-logo {
  width: clamp(110px, 16vw, 200px); /* min, fluid, max */
  height: auto;
}

/* If footer injected into #footer, keep scaling */
#footer { text-align: center; padding: 28px 0; }
#footer img.footer-logo,
#footer .footer-logo {
  width: clamp(80px, 12vw, 140px);
  height: auto;
  display: block;
  margin: 8px auto 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}

@media (max-width: 480px) {
  .footer-wrap { flex-direction: column; gap: 10px; }
  .footer-logo { margin-bottom: 6px; }
}

/* --- Lightbox: lock frame size so it doesn't jump between photos --- */
.lb__dialog { padding: 16px 56px; }  /* keeps arrow gutters */

.lb__stage {
  display: grid;
  place-items: center;
  /* fixed frame tied to the viewport */
  width: min(92vw, 1000px);
  height: min(82vh, 740px);
}

.lb__img {
  /* fill the frame; don't dictate its size */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

/* mobile tweak: slightly tighter frame & gutters */
@media (max-width: 640px) {
  .lb__dialog { padding: 12px 42px; }
  .lb__stage {
    width: calc(100vw - 84px);   /* 42px gutters on both sides */
    height: calc(100vh - 140px); /* room for top/bottom chrome */
  }
}

/* Space between the top tiles (.cards) and the "Featured campers" heading */
.cards { margin-bottom: 14px; }

/* If an H2 comes right after the cards, bump it down a touch */
.cards + h2,
.cards + .section-title { margin-top: 6px; }

/* Space after the two top tiles on the Home page */
.cards { 
  margin-bottom: 24px;          /* push the next section down */
}

/* Extra safety: if a heading immediately follows the tiles, keep it clear */
.cards + h2 {
  margin-top: 20px;
  clear: both;
}

/* Generic section spacing */
.section { 
  padding: 24px 0;           /* vertical breathing room */
}

/* The block that lives right under the hero */
.over-hero { 
  padding-top: 12px; 
  margin-bottom: 40px;        /* <-- this makes space before "Featured campers" */
}

/* Tidy the section heading spacing */
.section > h2 {
  margin: 0 0 12px;
}

/* Footer logo size – final override */
.footer-logo,
#footer img.footer-logo,
#footer .footer-logo {
  width: clamp(140px, 18vw, 550px); /* make it bigger: adjust max to taste */
  height: auto;
}

/* === Mobile header order fix (nav first, brand second) === */
@media (max-width: 720px){
  #header .inner{
    display: flex;
    flex-direction: column !important;
    align-items: stretch;
  }
  #header .nav-list{
    order: 1 !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  #header .brand{
    order: 2 !important;
    justify-content: center;
    padding-bottom: 6px;
  }
}

/* Mobile header: put NAV above brand */
@media (max-width: 720px){
  .site-header .inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .site-header nav{
    order: 1 !important;                 /* move the NAV block itself */
  }
  .site-header .brand{
    order: 2 !important;                 /* brand below nav */
    justify-content: center !important;
    padding-bottom: 6px;
  }
  .site-header nav ul{
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* Mobile header: force NAV above brand, no matter the markup order */
@media (max-width: 720px){
  .site-header .inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }
  /* default: everything after nav */
  .site-header .inner > *{ order: 2 !important; }

  /* nav goes first */
  .site-header nav{ order: 1 !important; width: 100%; }

  /* brand comes last and is centered */
  .site-header .brand{
    order: 3 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .site-header nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
  }
}

/* Mobile: put the NAV above the brand, no guessing about class names */
@media (max-width: 720px){
  .site-header .inner{
    display: flex !important;
    flex-direction: column-reverse !important;  /* ← this flips brand/nav */
    align-items: stretch !important;
    gap: 10px;
  }

  /* make the menu look nice when wrapped */
  .site-header .nav-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 720px){
  .site-header .inner{
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 10px;
  }
  .site-header .nav-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
  }
}

/* Home-only spacing: the section that immediately follows the hero */
.hero + .over-hero { padding-top: 40px; }         /* adjust to taste */
@media (max-width: 600px){
  .hero + .over-hero { padding-top: 56px; }       /* extra space on phones */
}

/* --- HOME: force the two intro tiles to stack on phones --- */
@media (max-width: 900px) {
  .cards {                     /* the two tiles under the hero */
    grid-template-columns: 1fr !important;   /* one column only */
  }
  .cards > * {                 /* let the children shrink inside the grid */
    min-width: 0;              /* prevents overflow from long content */
  }
}

/* Optional guard: if anything else tries to make the page wider on phones */
html, body {
  overflow-x: hidden;          /* remove horizontal scroll (safe) */
}