/* =========================================================
   JB WATALII ADVENTURES — Design System
   Palette: dark blue, royal blue, light blue, gold accent, white/light
   gray (premium African travel/adventure palette — see :root below).
   Display face: Fraunces (warm, characterful serif — evokes dhow sails
   and carved coastal doorways rather than a generic travel-brand sans)
   Body face: Inter (clean, highly legible at small sizes)
   Signature element: a hand-drawn dhow-sail wave divider used between
   sections instead of a straight hairline — a Swahili-coast wayfinding
   motif that carries through the whole site.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand palette — JB Watalii Adventures (Dark Blue / Royal Blue / Light Blue / Gold).
     Variable NAMES kept from the original build (--teal-deep etc.) since they're
     referenced throughout style.css, admin.css, and inline in many PHP templates —
     only the VALUES changed, mapped role-for-role onto the new palette:
       --teal-deep   -> Dark Blue  #0B1F3A  (primary: header/nav, headings, key UI)
       --blue-green  -> Light Blue #2E6FA3  (accents, hover, links, icons, highlights)
       --turquoise   -> Gold       #D4A72C  (sparing premium accent only)
       --royal-blue  -> Royal Blue #123B6D  (new: secondary sections/cards/supporting UI) */
  --teal-deep: #0B1F3A;
  --teal-deep-dark: #081527;
  --royal-blue: #123B6D;
  --blue-green: #2E6FA3;
  --blue-green-light: #8FC5E8;
  --turquoise: #D4A72C;
  --text-dark: #0B1F3A;
  --text-muted: #52657A;
  --white: #FFFFFF;
  --bg-light: #F4F6F8;

  /* Derived */
  --border-soft: #DCE3EA;
  --shadow-soft: 0 8px 24px rgba(11, 31, 58, 0.10);
  --shadow-lift: 0 16px 40px rgba(11, 31, 58, 0.16);

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --container: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue-green); text-decoration: none; }
a:hover { color: var(--teal-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-dark);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; }
h3 { font-size: 1.3rem; font-weight: 600; }

p { margin: 0 0 1em; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-green);
  margin-bottom: 0.6em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Focus states — accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------
   Accessibility: skip-to-content link (visible on keyboard focus only)
   --------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal-deep);
  color: var(--white);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------
   Subtle entrance animation — hero copy and card grids ease in
   on load rather than popping in instantly. Respects the
   prefers-reduced-motion override above.
   --------------------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.hero-content, .section-head {
  animation: fadeInUp 0.6s ease both;
}
.grid > * {
  animation: fadeInUp 0.5s ease both;
}
.grid > *:nth-child(2) { animation-delay: 0.06s; }
.grid > *:nth-child(3) { animation-delay: 0.12s; }
.grid > *:nth-child(4) { animation-delay: 0.18s; }
.grid > *:nth-child(5) { animation-delay: 0.24s; }
.grid > *:nth-child(6) { animation-delay: 0.3s; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--teal-deep); color: var(--white); }
.btn-primary:hover { background: var(--teal-deep-dark); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn-outline { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.btn-secondary { background: var(--white); color: var(--royal-blue); border-color: var(--royal-blue); }
.btn-secondary:hover { background: var(--bg-light); color: var(--royal-blue); }
.btn-whatsapp { background: #1EBE5D; color: var(--white); }
.btn-whatsapp:hover { background: #17a34e; color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }

/* ---------------------------------------------------------
   Header / Navbar
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border-soft);
}
/* Only top/bottom padding here on purpose — .navbar shares this element
   with .container (see header.php: class="container navbar"), and a
   padding SHORTHAND here would silently override .container's left/right
   24px entirely (equal specificity, later rule wins the whole property).
   Longhand top/bottom keeps that horizontal padding intact at every
   screen size, so the logo and nav actions never sit flush against the
   viewport edge on desktop or tablet. */
.navbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--teal-deep); min-width: 0; flex-shrink: 1; }
.brand-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--teal-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-mark svg { width: 17px; height: 17px; }
.brand-logo-img { max-height: 36px; width: auto; display: block; flex-shrink: 0; }

/* The visible company name beside the logo/mark. clamp() scales it
   smoothly with the viewport instead of jumping between fixed sizes, so
   it keeps shrinking gracefully all the way down to small phones without
   ever forcing the navbar to wrap or overflow. white-space + ellipsis is
   a last-resort safety net only — at normal company-name lengths the
   clamp() sizing keeps the full name visible and readable. */
.brand-name {
  font-size: clamp(0.8rem, 2.6vw, 1.1rem);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Scale the logo/brand mark down further as the viewport shrinks, so it
   never crowds the language switcher and nav toggle on small screens. */
@media (max-width: 880px) {
  .brand { gap: 8px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-mark svg { width: 15px; height: 15px; }
  .brand-logo-img { max-height: 30px; }
}
@media (max-width: 480px) {
  .brand { gap: 6px; }
  .brand-mark { width: 24px; height: 24px; }
  .brand-mark svg { width: 13px; height: 13px; }
  .brand-logo-img { max-height: 26px; }

  /* Mobile-only: use a smaller left padding (12px) than the 24px that
     .container now correctly provides at every other size (see the
     .navbar padding fix above — it previously zeroed out .container's
     horizontal padding entirely, flushing the logo against the edge at
     ALL screen sizes, not just mobile; that's fixed at the source now).
     This override just keeps phone screens a bit tighter than desktop/
     tablet, which is why it's still here as its own explicit value. */
  .navbar { padding-left: 12px; }
}

.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-weight: 500; color: var(--text-dark); font-size: 0.95rem; }
.nav-links a:hover, .nav-links a.active { color: var(--teal-deep); }

.nav-actions { display: flex; align-items: center; gap: 14px; }

/* ---- Language switcher (native <details>/<summary> — no JS required to open/close) ---- */
.lang-switcher { position: relative; }
.lang-switcher-toggle {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-light); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 8px 12px; cursor: pointer;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--text-dark);
  list-style: none; /* hide default marker on browsers that don't support ::marker below */
  user-select: none;
}
.lang-switcher-toggle::-webkit-details-marker { display: none; }
.lang-switcher-toggle::marker { content: ''; }
.lang-switcher-toggle:hover { border-color: var(--blue-green); }
#langDetails[open] .lang-switcher-toggle { border-color: var(--teal-deep); }
.lang-switcher-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift); list-style: none; margin: 0; padding: 6px; min-width: 160px; z-index: 150;
}
.lang-switcher-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 6px; font-size: 0.9rem; color: var(--text-dark); font-weight: 500;
}
.lang-switcher-menu a:hover { background: var(--bg-light); }
.lang-switcher-menu a.active { color: var(--teal-deep); font-weight: 700; }

@media (max-width: 880px) {
  .lang-switcher-toggle .lang-code { display: none; }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text-dark); margin: 5px 0; transition: 0.2s; }

@media (max-width: 880px) {
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 24px 20px;
    border-bottom: 1px solid var(--border-soft);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 10px 0; width: 100%; }
  .nav-toggle { display: block; }
  .nav-actions .btn-primary { padding: 10px 18px; font-size: 0.85rem; }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(0,44,48,0.55), rgba(0,44,48,0.72)), var(--teal-deep);
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.hero-content { max-width: 640px; }

/* Tour banner date badge — bold, high-contrast pill sitting on the dark
   hero overlay, with a thin gold border for the "premium touch" the
   palette calls for on small accents. */
.tour-date-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(11, 31, 58, 0.55);
  border: 1px solid rgba(212, 167, 44, 0.6);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
}
@media (max-width: 480px) {
  .tour-date-hero-badge { font-size: 0.78rem; padding: 6px 12px; gap: 5px; }
}
.hero h1 { color: var(--white); }
.hero p { color: rgba(255,255,255,0.9); font-size: 1.1rem; max-width: 520px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* Signature wave divider — dhow-sail motif between sections */
.wave-divider {
  width: 100%;
  height: 48px;
  display: block;
}
.wave-divider path { fill: var(--bg-light); }
.wave-divider.flip path { fill: var(--white); }

/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */
.section { padding: 72px 0; }
.section-alt { background: var(--bg-light); }
.section-head { max-width: 640px; margin: 0 0 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------------------------------
   Cards — tours / destinations / blog
   --------------------------------------------------------- */
.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.card-media { position: relative; aspect-ratio: 4/3; background: var(--border-soft); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--turquoise); color: var(--white);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 5px 10px; border-radius: 999px; text-transform: uppercase;
}
.card-badge-date {
  position: absolute; top: 12px; right: 12px;
  background: var(--teal-deep); color: var(--white);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: 999px;
}
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-meta { font-size: 0.82rem; color: var(--blue-green); font-weight: 600; }
.card-title { font-size: 1.15rem; margin: 0; }
.card-desc { font-size: 0.92rem; color: var(--text-muted); flex: 1; }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.card-price { font-family: var(--font-display); font-weight: 600; color: var(--teal-deep); font-size: 1.05rem; }
.card-actions { display: flex; gap: 8px; }

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--white);
  color: var(--text-dark);
}
.form-control:focus { border-color: var(--blue-green); outline: none; box-shadow: 0 0 0 3px rgba(10,147,150,0.15); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.form-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: 0.8rem; color: #B3261E; margin-top: 4px; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer { background: var(--text-dark); color: rgba(255,255,255,0.85); padding: 60px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--white); font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer a { color: rgba(255,255,255,0.75); }
.site-footer a:hover { color: var(--turquoise); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 40px; padding-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------
   WhatsApp floating button
   --------------------------------------------------------- */
.wa-float {
  position: fixed;
  bottom: 22px; right: 22px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #1EBE5D;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  z-index: 200;
}
.wa-float svg { width: 28px; height: 28px; fill: var(--white); }
.wa-float:hover { transform: scale(1.06); }

/* ---------------------------------------------------------
   Empty states
   --------------------------------------------------------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state h3 { color: var(--text-dark); }

/* ---------------------------------------------------------
   Utility
   --------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-pending { background: #FFF3CD; color: #8A6D1D; }
.badge-contacted { background: #DCEEFF; color: #1B5C9C; }
.badge-confirmed { background: #DFF5E1; color: #1E7A31; }
.badge-completed { background: #E4E4E4; color: #444; }
.badge-cancelled { background: #FBDEDC; color: #A32E24; }

/* ---------------------------------------------------------
   Responsive split layouts — replaces one-off inline
   grid-template-columns so every two-column section (detail
   pages, dashboard panels, contact, filters+results) collapses
   to a single column on mobile instead of squeezing sideways.
   --------------------------------------------------------- */
.split-half { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.split-detail { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.split-sidebar { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.split-contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: start; }
.split-featured { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 280px; }

@media (max-width: 860px) {
  .split-half, .split-detail, .split-sidebar, .split-contact, .split-featured {
    grid-template-columns: 1fr;
  }
  .split-sidebar aside { position: static !important; }
  .split-detail aside { position: static !important; }
}

/* ---------------------------------------------------------
   Gallery lightbox (tour details page) — vanilla JS, no library.
   Image uses object-fit: contain so it's never cropped, only
   scaled down to fit the viewport at its original proportions.
   --------------------------------------------------------- */
.gallery-thumb:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 15, 17, 0.94);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}
.lightbox.open { display: flex; }

.lightbox-image {
  max-width: 90vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: var(--white);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); }

.lightbox-close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 1.7rem;
  line-height: 1;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 2rem;
  line-height: 1;
}
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.lightbox-caption {
  display: none;
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80vw;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  text-align: center;
}

@media (max-width: 700px) {
  .lightbox-image { max-width: 94vw; max-height: 78vh; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { width: 38px; height: 38px; top: 12px; right: 12px; font-size: 1.4rem; }
  .lightbox-counter { bottom: 14px; font-size: 0.78rem; }
  .lightbox-caption { bottom: 40px; font-size: 0.85rem; }
}