/* ============================================================
   SAVANNA & TRAIL — MAIN STYLESHEET
   ------------------------------------------------------------
   This one file controls the look of EVERY page (Home, Tours,
   Gallery, About, Contact). If you change something here, it
   updates on all pages at once - you don't need to repeat it.

   HOW THIS FILE IS ORGANIZED (scroll down to find a section):
     1. Color variables      -> change your whole color scheme
     2. Reset & base styles  -> basic defaults for the page
     3. Header / navigation menu
     4. Hero section (the big banner at the top of each page)
     5. Buttons (with hover + "shake" click effect)
     6. Cards ("Three ways to experience the land" boxes)
     7. Service rows (Tours page long sections)
     8. Gallery grid + lightbox (photo popup)
     9. About page (story + team)
    10. Contact page (WhatsApp / Email / social cards + map)
    11. Footer
   ============================================================ */


/* ------------------------------------------------------------
   1. COLOR VARIABLES
------------------------------------------------------------- */
:root{
  --forest:#1e3a2f;
  --forest-dark:#122019;
  --sand:#f7f1e3;
  --earth:#3a2b1e;
  --gold:#c08a2e;
  --clay:#a3502f;
  --line:rgba(58,43,30,0.14);
  --img-placeholder:#e4dcc8;
}


/* ------------------------------------------------------------
   2. RESET & BASE STYLES
------------------------------------------------------------- */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;  /* stop mobile Safari auto-resizing text on rotate */
}

body{
  font-family: 'Work Sans', Arial, sans-serif;
  color: var(--earth);
  background: var(--sand);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* safety net: nothing on the page can force a sideways scrollbar */
}

h1, h2, h3{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

a{
  color: inherit;
  text-decoration: none;
}

img, svg{
  display: block;
  max-width: 100%;
}

button, input, textarea{
  font-family: inherit;
}

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

img.ph{
  background: var(--img-placeholder);
  object-fit: cover;
}

.eyebrow{
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}


/* ------------------------------------------------------------
   3. HEADER / NAVIGATION MENU
------------------------------------------------------------- */

/* TOP BAR: a slim strip above the main header with a short
   message + small social icons. JavaScript (script.js) adds
   the "hide" class to this when the user scrolls DOWN, and
   removes it when they scroll back UP or reach the very top.
   The main header below it never hides - only this thin strip. */
.top-bar{
  background: var(--forest-dark);
  color: rgba(247,241,227,0.85);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 24px;
  max-height: 44px;   /* normal, visible height */
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
}
.top-bar.hide{
  max-height: 0;      /* collapses to nothing when scrolling down */
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.top-bar-message{
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.02em;
}
.top-bar-social{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.top-bar-social a{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(247,241,227,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.top-bar-social a:hover{
  background: var(--gold);
}
.top-bar-social svg{
  width: 13px;
  height: 13px;
}
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}

.nav-wrap{
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
}

.brand{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark{
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  object-fit: contain;
}

nav.links{
  display: flex;
  gap: 32px;
}

nav.links a{
  font-size: 0.92rem;
  padding: 4px 0;
  transition: color 0.2s ease;
}

nav.links a:hover,
nav.links a.active{
  color: var(--clay);
}

.menu-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;         /* brings the tap target close to the 44px accessibility guideline */
  margin: -10px;         /* ...without visually shifting the icon inside nav-wrap */
}

.menu-toggle svg{
  width: 24px;
  height: 24px;
}


/* ------------------------------------------------------------
   4. HERO SECTION (big banner at the top of every page)
   TO ADD YOUR OWN PHOTO: put "hero.jpg" inside images/
   Recommended size: 1600 x 900 pixels.
------------------------------------------------------------- */
.hero{
  position: relative;
  overflow: hidden;
  color: var(--sand);
  padding: 90px 24px 70px;
  /* Lighter, uneven overlay: darker at the bottom (behind the text/button)
     for readability, lighter at the top so the photo itself stays visible
     instead of being covered by a flat dark tint. */
  background-image:
    linear-gradient(180deg, rgba(18,32,25,0.28) 0%, rgba(18,32,25,0.5) 100%),
    url("../images/bigogwe.jpg");
  background-size: cover;
  background-position: center;
  background-color: var(--forest);
}

.hero.inner{
  padding: 60px 24px 50px;
}

/* HOME PAGE HERO ONLY: a shorter, fixed height so the whole
   background photo is visible right away without the section
   feeling taller than the screen (previously you had to scroll
   a bit just to get past the image before reaching the content). */
.hero.hero-home{
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 24px;
}

.hero-inner{
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* FIX: the wavy "contour-bg" decoration lives inside .hero, which is
   display:flex on the home page. Without this rule the SVG was being
   treated as a real flex item sitting next to the text, which pushed
   the "Welcome / heading / button" block off to the right instead of
   centering it. Taking it out of the flex flow with position:absolute
   turns it back into a pure background decoration behind the text. */
.contour-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* HOME PAGE HERO: everything (the "Welcome" tag, the big heading,
   the paragraph and the "Plan Your Trip" button) is centered instead
   of left-aligned. The paragraph also gets its own auto side-margins
   so it stays centered as a block, not just its text. */
.hero-home .hero-inner{
  text-align: center;
}
.hero-home .hero p{
  margin-left: auto;
  margin-right: auto;
}

/* "Welcome" tag above the headline: same gold tone as other eyebrows,
   but semi see-through so it sits more softly above the big heading
   instead of competing with it. Letter-spacing is bumped slightly so
   it still reads clearly even at lower opacity. */
.eyebrow-welcome{
  color: #d59f45;
  opacity: 0.55;
  letter-spacing: 0.18em;
}

.hero h1{
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--sand);
  margin: 14px 0 20px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.hero p{
  font-size: 1.05rem;
  color: rgba(247,241,227,0.85);
  max-width: 480px;
  margin-bottom: 26px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.hero .cta-button{
  background: var(--gold);
  color: var(--forest-dark);
}
.hero .cta-button:hover{
  background: #d59f45;
}

.contour-divider{
  width: 100%;
  display: block;
}
.contour-divider svg{
  width: 100%;
  height: 64px;
  display: block;
}


/* ------------------------------------------------------------
   5. BUTTONS (with hover lift + "shake" click effect)
------------------------------------------------------------- */
.cta-button{
  background: var(--forest);
  color: var(--sand);
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: inline-block;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover{
  background: var(--forest-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(30,58,47,0.3);
}

@keyframes button-shake{
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px) rotate(-2deg); }
  40%  { transform: translateX(4px) rotate(2deg); }
  60%  { transform: translateX(-3px) rotate(-1deg); }
  80%  { transform: translateX(3px) rotate(1deg); }
  100% { transform: translateX(0); }
}
.shake{
  animation: button-shake 0.4s ease;
}


/* ------------------------------------------------------------
   6. CARDS ("Three ways to experience the land" boxes on Home)
------------------------------------------------------------- */
.card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(58,43,30,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: block; /* lets the whole card work as a clickable <a> link */
  cursor: pointer;
}

.card:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 30px rgba(58,43,30,0.16);
}

.card img{
  width: 100%;
  height: 200px;
  border-radius: 18px 18px 0 0;
  object-fit: cover;
}

/* Small "Plan your trip ->" text at the bottom of each card,
   styled the same way as the "Read our story ->" link so the
   whole site feels consistent. The card ITSELF is the clickable
   link (see the <a class="card"> in the HTML) - this is just
   the visual hint showing where clicking will take you. */
.card-link-hint{
  display: inline-block;
  margin-top: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--clay);
  border-bottom: 1px solid var(--clay);
  padding-bottom: 2px;
}

.card-body{
  padding: 22px;
}

.card-body h3{
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.card-body p{
  font-size: 0.92rem;
  color: #5c463a;
}




/* ------------------------------------------------------------
   7. SERVICE ROWS (long photo + text sections, used on Tours page)
------------------------------------------------------------- */
.section{
  max-width: 1180px;
  margin: 0 auto;
  padding: 60px 24px;
}

.section-intro{
  max-width: 560px;
  margin: 0 0 40px;
}
.section-intro h2{
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-top: 8px;
}

.service-row{
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.service-row:nth-of-type(even){
  flex-direction: row-reverse;
}

.service-media{ flex: 1 1 0; }
.service-media img{
  width: 100%;
  height: 280px;
  border-radius: 16px;
  object-fit: cover; /* photo fills the box neatly, never stretched */
}

.service-text{ flex: 1 1 0; }
.service-text h3{
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  margin: 12px 0 12px;
}
.service-text p{
  color: #5c463a;
  margin-bottom: 18px;
  max-width: 440px;
}

.service-link{
  font-family: 'Space Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--earth);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.service-link:hover{
  color: var(--clay);
  border-color: var(--clay);
}




/* ------------------------------------------------------------
   8. GALLERY GRID + LIGHTBOX (photo popup)
------------------------------------------------------------- */
/* Filter tabs: All / Photos / Videos - styled like the
   filter tabs seen on Instagram profile grids */
.gallery-filter{
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
}
.gallery-filter-btn{
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 0.86rem;
  color: var(--earth);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gallery-filter-btn svg{
  width: 16px;
  height: 16px;
}
.gallery-filter-btn:hover{
  border-color: var(--gold);
}
.gallery-filter-btn.active{
  background: var(--forest);
  border-color: var(--forest);
  color: var(--sand);
}

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* A gallery item hidden by the filter (e.g. viewing "Photos"
   hides every item with data-type="video") - toggled by script.js */
.gallery-item.gallery-hidden{
  display: none;
}

.gallery-grid button{
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  aspect-ratio: 1 / 1;
  overflow: visible;
  border-radius: 12px;
  position: relative;  /* needed so the video play icon can center on top */
}

.gallery-grid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-grid button:hover img{
  transform: scale(1.08);
}

/* The little round play button shown on top of video thumbnails */
.video-play-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(18,32,25,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* clicks pass through to the button underneath */
}
.video-play-icon svg{
  width: 20px;
  height: 20px;
  margin-left: 2px;
}



/* The full-screen popup that appears when a gallery item is clicked.
   It can show EITHER a photo OR a video - script.js decides which
   one to reveal and keeps the other hidden. */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(18,32,25,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 10px;
}
.lightbox.open{
  display: flex;
}
.lightbox img,
.lightbox video{
  max-width: 98vw;
  max-height: 96vh;
  border-radius: 10px;
}
.lightbox img{
  /* Pinch-to-zoom / double-tap zoom is handled in js/script.js */
  transform-origin: center center;
  touch-action: none;
}

/* TRUE FULLSCREEN FOR PHOTOS: when a photo is clicked, script.js asks
   the browser to make ".lightbox" an actual fullscreen element (the
   same Fullscreen API the video uses) - this hides the browser's own
   address bar/tabs too, not just fills the page. While that's active,
   drop the small edge padding and rounded corners so the photo truly
   goes edge-to-edge instead of sitting in a smaller centered box.
   NOTE: iPhone/iPad (Safari) doesn't allow fullscreen on anything
   except a <video>, so on iOS the photo simply shows at the large
   (but not edge-to-edge) size above instead - it still looks big,
   just not literally edge-to-edge behind the iOS status bar. */
.lightbox:fullscreen{
  padding: 0;
  background: #000;
}
.lightbox:fullscreen img{
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
}
.lightbox:-webkit-full-screen{
  padding: 0;
  background: #000;
}
.lightbox:-webkit-full-screen img{
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
}

/* ------------------------------------------------------------
   FULLSCREEN VIDEO AD WRAPPER
   See the long comment in gallery.html above ".video-ad-wrap"
   for the full explanation of how/why this exists. Short version:
   this box is what actually goes fullscreen (not the bare video),
   so the ad image set as its background shows through in the
   empty bars around the video once fullscreen is active.
------------------------------------------------------------- */
.video-ad-wrap{
  position: relative;
  display: none;             /* shown only for video items, via JS (same as the old .lightbox video rule) */
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 85vh;
  background: #000;
  border-radius: 10px;
  overflow: visible;
}
.video-ad-wrap video{
  position: relative;
  z-index: 2;               /* video sits ABOVE the ad image */
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  background: #000;
}

/* While NOT fullscreen there's no empty space to fill, so the ad
   layer stays invisible and out of the way. */
.video-ad-bg,
.video-ad-click,
.video-ad-badge{
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Once the wrapper becomes the fullscreen element (see script.js),
   it fills the whole screen and corners are no longer rounded -
   and THIS is when the ad layer is allowed to become visible. */
.video-ad-wrap:fullscreen{
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
}
.video-ad-wrap:-webkit-full-screen{  /* Safari desktop naming */
  width: 100vw;
  height: 100vh;
}

/* The ad photo itself - fills the wrapper, sits BEHIND the video.
   background-size:cover means it fills every corner of the screen,
   so whatever isn't covered by the (smaller, centered) video is
   exactly where the ad photo shows through. Its image and click
   link are both set from VIDEO_AD_CONFIG in js/script.js. */
.video-ad-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
}
.video-ad-click{
  position: absolute;
  inset: 0;
  z-index: 3;               /* above the video too, but only where the video ISN'T, see note below */
}
/* The video itself sits on top (z-index:2) and already captures
   clicks/taps for play/pause controls, so in practice this link
   is only reachable in the leftover ad space around the video -
   exactly where we want it. */
.video-ad-badge{
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  background: rgba(18,32,25,0.55);
  color: var(--sand);
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 20px;
}

/* Ad-fullscreen button: a small extra icon (top-right of the video)
   that fullscreens the AD-AWARE wrapper. Hidden by default - only
   revealed by script.js once VIDEO_AD_CONFIG.enabled is true, so the
   video's own native fullscreen icon remains the only option until
   an ad is actually configured. */
.video-ad-fullscreen-btn{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: none;              /* turned to "flex" by script.js when an ad is configured */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(18,32,25,0.55);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.video-ad-fullscreen-btn:hover{
  background: rgba(18,32,25,0.8);
}
.video-ad-fullscreen-btn svg{
  width: 18px;
  height: 18px;
}

/* When our script marks fullscreen as active AND an ad is
   configured, fade the ad layer in. */
.video-ad-wrap.show-ad .video-ad-bg,
.video-ad-wrap.show-ad .video-ad-click,
.video-ad-wrap.show-ad .video-ad-badge{
  opacity: 1;
  pointer-events: auto;
}
.lightbox-close{
  position: absolute;
  top: 24px;
  right: 28px;
  background: none;
  border: none;
  color: var(--sand);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
}

/* Prev/Next arrows - one on each side of the lightbox, always on
   top of the photo/video (z-index above it) so they stay clickable
   at any zoom level. */
.lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(18,32,25,0.55);
  color: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}
.lightbox-nav:hover{
  background: rgba(18,32,25,0.85);
}
.lightbox-nav svg{
  width: 22px;
  height: 22px;
}
.lightbox-prev{ left: 14px; }
.lightbox-next{ right: 14px; }



/* ------------------------------------------------------------
   9. ABOUT PAGE (story section + team member cards)
------------------------------------------------------------- */
.story-row{
  display: flex;
  gap: 56px;
  align-items: center;
}
.story-row img{
  flex: 1 1 0;
  width: 100%;
  height: 340px;
  border-radius: 18px;
  object-fit: cover; /* photo fills the box neatly, never stretched */
}
.story-row .story-text{ flex: 1 1 0; }
.story-text p{
  color: #5c463a;
  margin-top: 14px;
  max-width: 460px;
}


.team-name{
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  margin-top: 4px;
}
.team-role{
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ------------------------------------------------------------
   10. CONTACT PAGE (WhatsApp / Email / social cards + map)
------------------------------------------------------------- */
.contact-cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}

.contact-card{
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover{
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(58,43,30,0.12);
}

.contact-card-icon{
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.contact-card:hover .contact-card-icon{
  background: #f0e6cf;
}
.contact-card-icon svg{
  width: 22px;
  height: 22px;
}

.contact-card h4{
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.contact-card p{
  font-size: 0.86rem;
  color: #5c463a;
}

.map-block{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.map-block iframe{
  border-radius: 10px;
}
.map-directions-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  background: #1e3a2f;
  color: #fff;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 30px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.map-directions-btn:hover{
  background: var(--gold);
  transform: translateY(-2px);
}
.map-directions-btn svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}



/* ------------------------------------------------------------
   CONTACT FORM (Netlify Forms)
------------------------------------------------------------- */
.contact-form{
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 8px;
}
.visually-hidden-field{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.form-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-row label{
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c463a;
}
.form-row input,
.form-row textarea{
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;    /* 16px: below this, iOS Safari zooms the whole page in on focus */
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #1e3a2f;
  resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--gold);
}
.contact-form .cta-button{
  align-self: flex-start;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.contact-form .cta-button:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}
.form-status{
  font-size: 0.9rem;
  min-height: 1.2em;
}
.form-status-success{ color: #1e3a2f; }
.form-status-error{ color: #a5432c; }


/* ------------------------------------------------------------
   11. FOOTER
------------------------------------------------------------- */
footer{
  background: var(--forest-dark);
  color: rgba(247,241,227,0.75);
  padding: 60px 24px 30px;
  position: relative;
  overflow: hidden;
}

.footer-inner{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.footer-brand{
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  color: var(--sand);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-brand svg,
.footer-brand img{
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.footer-about{
  font-size: 0.9rem;
  max-width: 280px;
  color: rgba(247,241,227,0.6);
}

/* Row of round social media icons shown under the footer's
   business description, on every page. Colors are light (sand)
   since the footer background is dark green. */
.footer-social-row{
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.footer-social-row a{
  width: 38px;
  height: 38px;
  border-radius: 50%; /* perfectly round icon buttons */
  background: rgba(247,241,227,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.footer-social-row a:hover{
  background: var(--gold);
  transform: translateY(-3px);
}
.footer-social-row svg{
  width: 18px;
  height: 18px;
}

/* Thin vertical line between the "Explore" and "Company" columns -
   the vertical twin of the horizontal line above the copyright row
   at the very bottom of the footer (.footer-bottom), same color.
   The grid has a 40px gap between columns; the negative margin pulls
   the line back by half of that (20px) so it sits in the MIDDLE of
   the gap rather than pressed right up against "Company" - the
   matching padding then puts the "Company" text back where it'd
   normally start, so only the line itself moves. */
.footer-col + .footer-col{
  border-left: 1px solid rgba(247,241,227,0.12);
  margin-left: -20px;
  padding-left: 20px;
}
.footer-col h4{
  font-family: 'Space Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer-col a{
  display: block;
  font-size: 0.92rem;
  margin-bottom: 10px;
  color: rgba(247,241,227,0.78);
  transition: color 0.2s ease;
}
.footer-col a:hover{
  color: var(--sand);
}

.footer-bottom{
  max-width: 1180px;
  margin: 46px auto 0;
  border-top: 1px solid rgba(247,241,227,0.12);
  padding-top: 22px;
  font-size: 0.8rem;
  color: rgba(247,241,227,0.45);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}


/* ------------------------------------------------------------
   12. ADVERTISEMENT BANNER (paid ad slot)
   ------------------------------------------------------------
   This is a small, non-intrusive ad card that appears in the
   bottom-right corner of the screen. It is CONTROLLED FROM
   js/script.js - look for the "AD_CONFIG" section near the top
   of that file.

   - If you have no advertiser yet: leave AD_CONFIG.enabled as
     false, and this never appears to visitors at all.
   - If you have an advertiser: set AD_CONFIG.enabled to true
     and fill in their image/link - the banner will then appear
     automatically, on a timer, without you touching this CSS.
------------------------------------------------------------- */
.ad-banner{
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: 300px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(58,43,30,0.22);
  padding: 14px;
  z-index: 200;
  display: none; /* hidden by default - JS reveals it only when enabled */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ad-banner.show{
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.ad-banner-label{
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a8f7a;
  margin-bottom: 8px;
  display: block;
}
.ad-banner-close{
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: #9a8f7a;
  cursor: pointer;
}
.ad-banner-close:hover{
  color: var(--earth);
}
.ad-banner a{
  display: block;
}
.ad-banner img{
  width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
  object-fit: cover;
}
.ad-banner-text{
  font-size: 0.85rem;
  color: var(--earth);
}



/* ================================================================
   13. RESPONSIVE BREAKPOINTS
   ----------------------------------------------------------------
   On purpose, the WHOLE site only changes at exactly TWO screen
   widths, so there are only 3 "looks" total:

     - COMPUTER  (the default styles above, no media query needed)
     - TABLET    (@media max-width: 1024px)
     - MOBILE PHONE (@media max-width: 640px)

   The Tablet block runs first and covers "1024px and narrower",
   so it also reaches phones. The Mobile block runs second and
   only narrows things further for phones. Keeping every
   responsive rule here in ONE place (instead of scattered next
   to each component higher up) makes it much easier to see and
   adjust exactly what changes at each size.
================================================================= */

/* ---------------------------------------------------------------
   TABLET (1024px and narrower - also applies to phones, since a
   phone is narrower than 1024px too; the MOBILE block below then
   fine-tunes things further just for phones)
------------------------------------------------------------------ */
@media (max-width: 1024px){

  /* --- HEADER: switch to the hamburger menu. The header row now
     reads [hamburger] --- [logo + name] --- [Plan Your Trip],
     with the logo/name sitting between the other two. --- */
  .menu-toggle{
    display: block;
    order: 1;
  }
  .brand{
    order: 2;
    flex-direction: column;   /* logo sits above the "visit bigogwe_Now" text */
    align-items: center;
    text-align: center;
    gap: 4px;
  }
  .cta-desktop{
    display: inline-block;   /* was hidden before - now shown on tablet + phone too */
    order: 3;
    padding: 9px 16px;
    font-size: 0.82rem;
  }

  nav.links{
    position: fixed;
    top: var(--header-h, 76px);
    left: 0;
    right: 0;
    background: var(--sand);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    z-index: 60;                 /* sits above everything, including the Plan Your Trip button */
  }
  nav.links.open{
    max-height: 340px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
  }
  nav.links a{
    padding: 14px 24px;
    border-top: 1px solid var(--line);
  }

  /* Backdrop shown behind the open mobile menu (added by script.js).
     It sits UNDER the menu but OVER the rest of the page, so a tap
     meant for a menu link can never "leak through" and also hit the
     Plan Your Trip button (or anything else) underneath. Tapping the
     backdrop itself just closes the menu. */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    top: var(--header-h, 76px);
    background: rgba(20, 30, 24, 0.35);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .nav-backdrop.show{
    opacity: 1;
    pointer-events: auto;
  }
  body.menu-open{
    overflow: hidden;   /* stop background scrolling while the menu is open */
  }

  /* --- Hero: a little shorter than the full desktop banner --- */
  .hero.hero-home{ min-height: 68vh; }

  /* --- Cards: 3 columns -> 2 columns --- */
  .card-grid{ grid-template-columns: 1fr 1fr; }

  /* --- Tours page long rows + About page story row: stack instead
     of sitting side-by-side, since there isn't enough width left --- */
  .service-row,
  .service-row:nth-of-type(even){
    flex-direction: column;
    gap: 24px;
    text-align: left;
  }
  .service-row{ padding: 36px 0; }

  .story-row{ flex-direction: column; }
  .story-row img{ height: 240px; }

  /* --- Gallery: 4 columns -> 3 columns --- */
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }

  /* --- Contact page cards: 2 columns -> 1 column --- */
  .contact-cards{ grid-template-columns: 1fr; }
  .map-directions-btn{ align-self: stretch; }

  /* --- Footer: 3 columns -> 2 columns --- */
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------
   MOBILE PHONE (640px and narrower)
   Everything here runs ON TOP OF the Tablet block above (a phone
   matches both), fine-tuning things down to phone size.
------------------------------------------------------------------ */
@media (max-width: 640px){

  /* --- HEADER: make the logo + business name noticeably smaller
     and neater, and shrink the Plan Your Trip button's padding so
     it sits comfortably next to the hamburger icon on a narrow
     screen. --- */
  .brand{
    font-size: 0.78rem;
    gap: 2px;
  }
  .brand-mark{
    width: 30px;
    height: 30px;
  }
  .cta-desktop{
    padding: 7px 12px;
    font-size: 0.72rem;
  }

  /* --- Top bar: message + social icons stacked instead of
     squeezed onto one row --- */
  .top-bar{
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    max-height: 78px;
  }
  .top-bar-message{
    font-size: 0.7rem;
    text-align: center;
  }
  .top-bar-social{
    justify-content: center;
  }
  .top-bar-social a{
    width: 30px;
    height: 30px;
  }

  /* --- Hero: shorter still on a phone screen --- */
  .hero.hero-home{ min-height: 62vh; }

  /* --- Cards: 2 columns -> 1 column --- */
  .card-grid{ grid-template-columns: 1fr; }

  /* --- Gallery: 3 columns -> 2 columns, smaller filter tabs --- */
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-filter-btn{ font-size: 0.8rem; padding: 7px 12px; }

  /* --- Lightbox prev/next arrows: smaller, closer to the edge --- */
  .lightbox-nav{ width: 38px; height: 38px; }
  .lightbox-prev{ left: 6px; }
  .lightbox-next{ right: 6px; }

  /* --- Footer: 2 columns -> 1 column, remove the now-pointless
     vertical divider line between "Explore" and "Company" --- */
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-col + .footer-col{
    border-left: none;
    margin-left: 0;
    padding-left: 0;
  }

  /* --- Ad banner: full-width instead of a floating card --- */
  .ad-banner{
    left: 14px;
    right: 14px;
    max-width: none;
    bottom: 14px;
  }
}