/* ============================================================
   Wrinkly Nomads -- site stylesheet
   Warm, adventurous travel palette on top of Bootstrap 5.
   ============================================================ */

:root {
  --wn-terracotta: #C1613A;
  --wn-terracotta-dark: #A04E2C;
  --wn-teal: #1F5F63;
  --wn-teal-dark: #164447;
  --wn-cream: #FBF3E7;
  --wn-sand: #F1E2CB;
  --wn-brown: #3E2C24;
  --wn-gold: #D9A441;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--wn-brown);
  background-color: var(--wn-cream);
}

h1, h2, h3, h4, .wn-brand, .wn-display {
  font-family: var(--font-display);
}

a { color: var(--wn-terracotta-dark); }
a:hover { color: var(--wn-terracotta); }

/* Navbar */
.wn-navbar {
  background-color: var(--wn-teal);
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.wn-navbar .wn-brand {
  color: var(--wn-cream);
  font-weight: 700;
  font-size: 1.3rem;
}
.wn-navbar .nav-link {
  color: rgba(251,243,231,.85);
  font-weight: 500;
  margin-left: .5rem;
}
.wn-navbar .nav-link:hover,
.wn-navbar .nav-link.active {
  color: var(--wn-gold);
}

/* Hero */
.wn-hero {
  background: linear-gradient(160deg, var(--wn-teal) 0%, var(--wn-teal-dark) 100%);
  color: var(--wn-cream);
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.wn-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 700;
}
.wn-hero .wn-motto {
  color: var(--wn-gold);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.wn-hero p.lead {
  color: rgba(251,243,231,.9);
  max-width: 620px;
}

/* Parallax photo hero (used on the home page) */
.wn-hero-parallax {
  background-image:
    linear-gradient(160deg, rgba(31,95,99,.80) 0%, rgba(22,68,71,.88) 100%),
    url('../img/hero-jane-alan.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 768px) {
  /* background-attachment: fixed is jittery/unsupported on many mobile browsers */
  .wn-hero-parallax {
    background-attachment: scroll;
  }
}

/* Buttons */
.btn-wn-primary {
  background-color: var(--wn-terracotta);
  border-color: var(--wn-terracotta);
  color: #fff;
  font-weight: 600;
}
.btn-wn-primary:hover {
  background-color: var(--wn-terracotta-dark);
  border-color: var(--wn-terracotta-dark);
  color: #fff;
}
.btn-wn-outline {
  border: 2px solid var(--wn-cream);
  color: var(--wn-cream);
  font-weight: 600;
  background: transparent;
}
.btn-wn-outline:hover {
  background: var(--wn-cream);
  color: var(--wn-teal-dark);
}

/* Stats strip (home page) */
.wn-stats-strip {
  background-color: var(--wn-sand);
}
.wn-stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--wn-teal);
  line-height: 1.1;
}
.wn-stat-label {
  color: var(--wn-brown);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  opacity: .8;
}

/* Tag badges */
.wn-tag-badge {
  background-color: var(--wn-teal);
  color: var(--wn-cream);
  font-weight: 500;
  font-size: .75rem;
  margin-right: .35rem;
  margin-bottom: .25rem;
}
a.wn-tag-badge:hover {
  background-color: var(--wn-terracotta);
  color: #fff;
}

/* Cards */
.wn-card {
  background: #fff;
  border: 1px solid var(--wn-sand);
  border-radius: .9rem;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.wn-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(62,44,36,.12);
}
.wn-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  background-color: var(--wn-sand);
}
.wn-card-body { padding: 1.25rem; }
.wn-card .wn-country {
  color: var(--wn-terracotta-dark);
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wn-card h3 { font-size: 1.25rem; margin: .35rem 0; }
.wn-card .wn-dates { color: #7a6a60; font-size: .85rem; }

/* Section headings */
.wn-section-title {
  font-size: 2rem;
  margin-bottom: .25rem;
}
.wn-section-sub { color: #7a6a60; margin-bottom: 2rem; }

/* Trip detail */
.wn-trip-hero {
  height: 360px;
  object-fit: cover;
  border-radius: 1rem;
  width: 100%;
  background-color: var(--wn-sand);
}
.wn-gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: .6rem;
  cursor: pointer;
}

/* Leaflet point-of-interest maps (trip page + world map) */
.wn-poi-map {
  height: 420px;
  border-radius: .75rem;
  border: 1px solid var(--wn-sand);
  margin-top: .75rem;
}
.wn-poi-map.wn-poi-map-tall { height: 560px; }
.leaflet-popup-content strong { color: var(--wn-teal-dark); }
.wn-story { font-size: 1.08rem; line-height: 1.8; white-space: pre-line; }

/* Category-colored map pins (custom divIcon, no image assets needed) */
.wn-map-pin span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Map legend */
.wn-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  font-size: .85rem;
  color: var(--wn-brown);
}
.wn-map-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.wn-map-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  flex-shrink: 0;
}

/* Marker cluster bubbles (world map) themed to match the site palette */
.marker-cluster-small { background-color: rgba(31, 95, 99, .45); }
.marker-cluster-small div { background-color: rgba(31, 95, 99, .85); color: #fff; }
.marker-cluster-medium { background-color: rgba(193, 97, 58, .4); }
.marker-cluster-medium div { background-color: rgba(193, 97, 58, .85); color: #fff; }
.marker-cluster-large { background-color: rgba(217, 164, 65, .45); }
.marker-cluster-large div { background-color: rgba(217, 164, 65, .9); color: var(--wn-brown); }
.marker-cluster span { font-weight: 600; }

/* Footer */
.wn-footer {
  background-color: var(--wn-teal-dark);
  color: rgba(251,243,231,.85);
}
.wn-footer .wn-brand { color: var(--wn-cream); }
.wn-footer .wn-motto { color: var(--wn-gold); font-weight: 600; }
.wn-footer-links li { margin-bottom: .4rem; }
.wn-footer-links a, .wn-social a {
  color: rgba(251,243,231,.75);
  text-decoration: none;
}
.wn-footer-links a:hover, .wn-social a:hover { color: var(--wn-gold); }
.wn-footer-rule { border-color: rgba(251,243,231,.15); }

/* Forms */
.wn-form-card {
  background: #fff;
  border: 1px solid var(--wn-sand);
  border-radius: 1rem;
  padding: 2rem;
}

/* Drag-and-drop photo reordering (admin) */
.wn-photo-card {
  cursor: grab;
  transition: opacity .15s ease;
}
.wn-photo-card.wn-dragging {
  opacity: .4;
  cursor: grabbing;
}
.wn-drag-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  color: #9a8a7e;
  text-transform: uppercase;
  letter-spacing: .03em;
  user-select: none;
}
.wn-order-badge {
  background: var(--wn-sand);
  color: var(--wn-brown);
  border-radius: 1rem;
  padding: .1rem .55rem;
  font-weight: 600;
}

/* Filters bar */
.wn-filters {
  background: #fff;
  border: 1px solid var(--wn-sand);
  border-radius: .75rem;
  padding: 1.25rem;
}

/* Badges */
.badge-draft { background-color: #a0522d; }
.badge-published { background-color: var(--wn-teal); }

/* Admin */
.wn-admin-sidebar {
  background: var(--wn-teal-dark);
  min-height: 100vh;
  color: var(--wn-cream);
}
.wn-admin-sidebar a {
  color: rgba(251,243,231,.8);
  display: block;
  padding: .6rem 1.25rem;
  text-decoration: none;
  border-radius: .4rem;
}
.wn-admin-sidebar a:hover,
.wn-admin-sidebar a.active {
  background: rgba(251,243,231,.12);
  color: #fff;
}
.wn-stat-card {
  background: #fff;
  border: 1px solid var(--wn-sand);
  border-radius: .75rem;
  padding: 1.25rem;
}
.wn-stat-card .num { font-size: 2rem; font-weight: 700; color: var(--wn-teal); }