/* Jasper Journeys — Premium Mockup-Inspired Redesign
   Based on the user-provided Jasper Bottle Depot business-page mockup:
   deep forest green, crisp white cards, gold accents, elegant local-business directory feel.
*/

:root {
  --jj-forest-dark: #003F32;
  --jj-forest: #064B3B;
  --jj-forest-2: #0B5A43;
  --jj-gold: #D99A2B;
  --jj-gold-soft: #F2C46D;
  --jj-cream: #FBF7EE;
  --jj-white: #FFFFFF;
  --jj-ink: #1C1D1B;
  --jj-muted: #5F6B65;
  --jj-line: #D8DDD6;
  --jj-blue: #6D97B8;
  --jj-shadow: 0 14px 40px rgba(16, 34, 27, .10);
  --jj-soft-shadow: 0 8px 24px rgba(16, 34, 27, .08);
  --jj-radius: 18px;
  --jj-radius-lg: 24px;
  --jj-serif: Georgia, "Times New Roman", serif;
  --jj-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  background: var(--jj-cream);
}

body {
  margin: 0;
  color: var(--jj-ink) !important;
  background:
    linear-gradient(180deg, rgba(251,247,238,.96), rgba(255,255,255,.98) 44%, rgba(251,247,238,.98)) !important;
  font-family: var(--jj-sans);
  line-height: 1.55;
}

body::selection {
  background: var(--jj-gold);
  color: var(--jj-forest-dark);
}

/* Header */
.jj-top-shell,
.site-header,
.main-header,
.header-pro,
.nav-pro {
  background: rgba(255,255,255,.96) !important;
  color: var(--jj-ink) !important;
  border-bottom: 1px solid rgba(0,63,50,.14) !important;
  box-shadow: 0 3px 18px rgba(16,34,27,.06) !important;
  backdrop-filter: blur(12px);
}

.jj-brand-text,
.logo-text,
.brand-text,
.site-title {
  color: var(--jj-forest-dark) !important;
  font-family: var(--jj-serif) !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.nav-pro a,
.site-nav a,
.main-nav a {
  color: var(--jj-ink) !important;
  font-weight: 800 !important;
  border-bottom: 3px solid transparent;
  padding-bottom: 8px;
}

.nav-pro a:hover,
.site-nav a:hover,
.main-nav a:hover,
.nav-pro a[aria-current="page"],
.site-nav a[aria-current="page"],
.main-nav a[aria-current="page"] {
  color: var(--jj-forest-dark) !important;
  border-bottom-color: var(--jj-gold) !important;
}

.search,
.search-box,
.site-search,
input[type="search"] {
  border-radius: 999px !important;
  border: 1px solid rgba(0,63,50,.18) !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(16,34,27,.05) !important;
}

button,
.btn,
.jc-btn,
.button,
.btn-nav-primary,
.jj-hero-actions a,
.hero-cta a,
.map-popup-link,
input[type="submit"] {
  background: var(--jj-forest-dark) !important;
  color: #fff !important;
  border: 1px solid var(--jj-forest-dark) !important;
  border-radius: 8px !important;
  box-shadow: var(--jj-soft-shadow) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  letter-spacing: .01em;
}

button:hover,
.btn:hover,
.jc-btn:hover,
.button:hover,
.btn-nav-primary:hover,
.jj-hero-actions a:hover,
.hero-cta a:hover {
  background: var(--jj-forest-2) !important;
  transform: translateY(-1px);
}

.btn-outline,
.jc-btn-outline,
.secondary,
.jj-hero-actions a:nth-child(2) {
  background: #fff !important;
  color: var(--jj-forest-dark) !important;
  border: 1px solid rgba(0,63,50,.32) !important;
}

/* Hero sections: mountain-wide image style cards */
.hero,
.jj-hero,
.home-hero,
.jc-hero,
.page-hero,
.jc-page-hero,
.jj-directory-hero {
  color: var(--jj-white) !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,63,50,.88), rgba(0,63,50,.52) 52%, rgba(0,63,50,.22)),
    linear-gradient(180deg, #6D97B8, #DDE8E8 48%, #345E42) !important;
  min-height: 290px;
  display: grid;
  align-items: end;
  padding: clamp(28px, 5vw, 64px) !important;
  position: relative;
}

.hero::after,
.jj-hero::after,
.home-hero::after,
.jc-hero::after,
.page-hero::after,
.jc-page-hero::after,
.jj-directory-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 78px;
  background:
    linear-gradient(180deg, transparent, rgba(0,63,50,.12)),
    radial-gradient(ellipse at 20% 100%, rgba(251,247,238,.88), transparent 45%),
    radial-gradient(ellipse at 60% 100%, rgba(251,247,238,.72), transparent 42%);
  pointer-events: none;
}

.hero h1,
.jj-hero h1,
.home-hero h1,
.jc-hero h1,
.page-hero h1,
.jc-page-hero h1,
.jj-directory-hero h1,
h1, h2, h3 {
  font-family: var(--jj-serif) !important;
}

.hero h1,
.jj-hero h1,
.home-hero h1,
.jc-hero h1,
.page-hero h1,
.jc-page-hero h1,
.jj-directory-hero h1 {
  color: #fff !important;
  font-size: clamp(2.35rem, 6vw, 4.8rem) !important;
  line-height: .97 !important;
  max-width: 780px;
  margin-bottom: 12px !important;
  letter-spacing: -.045em;
  text-shadow: 0 2px 14px rgba(0,0,0,.22);
}

.hero p,
.jj-hero p,
.home-hero p,
.jc-hero p,
.page-hero p,
.jc-page-hero p,
.jj-directory-hero p {
  color: rgba(255,255,255,.94) !important;
  max-width: 720px;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

/* Content shell */
main,
.main-content,
.page-content {
  background: transparent !important;
}

section:not(.hero):not(.jj-hero):not(.home-hero):not(.jc-hero):not(.page-hero):not(.jc-page-hero):not(.jj-directory-hero) {
  scroll-margin-top: 92px;
}

.card,
.jc-card,
.guide-card,
.jj-service-card,
.jj-listing-card,
.jj-route-card,
.jj-stop-card,
.feature-card,
.article-card,
.pricing-card,
.business-card,
.panel,
.tool-card,
.info-card,
.jj-ad-slot,
.adsense-slot {
  background: var(--jj-white) !important;
  border: 1px solid var(--jj-line) !important;
  border-radius: var(--jj-radius) !important;
  box-shadow: var(--jj-shadow) !important;
}

.card:hover,
.jc-card:hover,
.guide-card:hover,
.jj-service-card:hover,
.jj-listing-card:hover,
.jj-route-card:hover,
.jj-stop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(16,34,27,.13) !important;
}

.card h2,
.card h3,
.jc-card h2,
.jc-card h3,
.guide-card h3,
.jj-service-card h3,
.jj-listing-card h3,
h2,
h3 {
  color: var(--jj-ink) !important;
}

h2::after,
.section-title::after,
.jj-section-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--jj-gold);
  border-radius: 999px;
  margin-top: 8px;
}

.kicker,
.eyebrow,
.badge,
.label,
.pill,
.category-pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: var(--jj-forest-dark) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-size: .72rem !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  text-transform: uppercase;
}

/* Business-page style utility blocks */
.jj-premium-info-card {
  background: #fff;
  border: 1px solid var(--jj-line);
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
  overflow: hidden;
}

.jj-premium-info-card__head {
  background: var(--jj-forest-dark);
  color: #fff;
  padding: 14px 18px;
  font-family: var(--jj-serif);
  font-size: 1.2rem;
  font-weight: 800;
}

.jj-premium-info-card__body {
  padding: 18px;
}

.jj-premium-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
  gap: 28px;
  max-width: 1180px;
  margin: 32px auto;
  padding: 0 18px;
}

.jj-icon-row,
.jj-feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.jj-mini-feature {
  background: #fff;
  border: 1px solid var(--jj-line);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(16,34,27,.06);
}

.jj-mini-feature strong {
  display: block;
  color: var(--jj-forest-dark);
}

.icon img,
.jc-card img[src*="icons"],
.card img[src*="icons"] {
  background: #fff;
  border: 1px solid rgba(0,63,50,.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(16,34,27,.08) !important;
}

/* Tables/forms */
table,
.schedule-table {
  background: #fff !important;
  border: 1px solid var(--jj-line) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

thead,
th {
  background: var(--jj-forest-dark) !important;
  color: #fff !important;
}

input,
select,
textarea {
  background: #fff !important;
  border: 1px solid rgba(0,63,50,.24) !important;
  border-radius: 10px !important;
}

/* Map */
.leaflet-container,
#discoverMap,
#jjMap,
#map,
.jj-map-canvas {
  border: 1px solid var(--jj-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--jj-shadow) !important;
}

/* Footer like mockup */
.footer-pro,
.site-footer,
footer {
  background:
    linear-gradient(180deg, rgba(0,63,50,.98), rgba(0,55,44,1)) !important;
  color: rgba(255,255,255,.9) !important;
  border-top: 0 !important;
  position: relative;
}

.footer-pro::after,
.site-footer::after,
footer::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 78px;
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,.06)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 42px);
  opacity: .55;
  pointer-events: none;
}

.footer-pro a,
.site-footer a,
footer a {
  color: #fff !important;
  text-decoration-color: rgba(217,154,43,.72);
  text-underline-offset: 4px;
}

/* Ads */
.adsense-slot,
.jj-ad-slot {
  background: #fff !important;
  border: 1px dashed rgba(0,63,50,.24) !important;
  min-height: 92px;
}

/* Mobile-first polish */
@media (max-width: 860px) {
  .hero,
  .jj-hero,
  .home-hero,
  .jc-hero,
  .page-hero,
  .jc-page-hero,
  .jj-directory-hero {
    min-height: 330px;
    padding: 32px 18px !important;
  }

  .jj-premium-grid {
    display: block;
    margin: 20px auto;
    padding: 0 12px;
  }

  .jj-premium-grid > * + * {
    margin-top: 18px;
  }

  .card,
  .jc-card,
  .guide-card,
  .jj-service-card,
  .jj-listing-card,
  .jj-route-card,
  .jj-stop-card {
    border-radius: 16px !important;
  }

  .btn,
  .jc-btn,
  .button,
  .btn-nav-primary,
  .jj-hero-actions a {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .jj-icon-row,
  .jj-feature-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .jj-icon-row,
  .jj-feature-row {
    grid-template-columns: 1fr;
  }
}