/* =============================================================
   RTS JAMAICA TRAVEL & TOURS LTD. — theme.css  (build rt1a)
   Colour + font skin for the Ezy Travels Pro static stack.
   base.css carries structure; this file carries the palette the
   shared tour cards / booking modal read from. rts.css carries the
   page design system on top.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  /* Brand — black / gold executive palette (gold from the logo sun) */
  --ink:          #0B0B0C;
  --ink-2:        #151517;
  --ink-3:        #212124;
  --gold:         #D9A52A;
  --gold-2:       #F0C24B;
  --gold-dark:    #9A6F10;
  --cream:        #F6F2EA;
  --cream-2:      #EFE8DA;

  /* Legacy names the shared JS/CSS still reference */
  --jet-blue:     #9A6F10;
  --jet-navy:     #111111;
  --jet-sky:      #D9A52A;
  --jet-gold:     #D9A52A;
  --jet-green:    #1E7A3C;
  --jet-orange:   #E06A1B;

  --accent:       #D9A52A;
  --accent-dark:  #9A6F10;
  --accent-text:  #111111;
  --accent-glow:  rgba(217,165,42,0.22);
  --accent-grad:  linear-gradient(135deg, #D9A52A 0%, #F0C24B 50%, #B88A1C 100%);
  --secondary:    #111111;
  --secondary-text: #ffffff;
  --shadow-accent: 0 4px 16px rgba(217,165,42,0.35);
  --shadow-accent-hover: 0 8px 24px rgba(217,165,42,0.5);

  --bg:           #FFFFFF;
  --card-bg:      #FFFFFF;
  --input-bg:     #F6F2EA;
  --border:       rgba(17,17,17,0.10);
  --card-border:  1px solid rgba(17,17,17,0.08);
  --card-shadow:  0 4px 24px rgba(17,17,17,0.06);
  --card-shadow-hover: 0 14px 40px rgba(17,17,17,0.14);
  --card-shadow-color: rgba(17,17,17,0.08);

  --text:         #141416;
  --text-mid:     #2B2B30;
  --text-soft:    #4E4E55;
  --text-muted:   #8A8A92;

  --nav-h:        76px;
  --nav-bg:       rgba(11,11,12,0.96);
  --nav-shadow:   0 2px 20px rgba(0,0,0,0.25);
  --nav-link:     #ffffff;
  --nav-link-active-bg: var(--gold);
  --nav-link-active:    #111111;

  --page-hero-bg: linear-gradient(135deg, #151517 0%, #0B0B0C 60%, #1C1A14 100%);

  --cta-bg:       #0B0B0C;
  --cta-text:     #ffffff;
  --cta-sub:      rgba(255,255,255,0.65);

  --footer-bg:    #0B0B0C;
  --footer-text:  rgba(255,255,255,0.78);
  --footer-muted: rgba(255,255,255,0.5);
  --footer-heading: #ffffff;
  --footer-border: rgba(255,255,255,0.1);
  --footer-badge-bg: rgba(255,255,255,0.08);
  --footer-social-bg: rgba(255,255,255,0.08);
  --footer-logo-filter: none;

  --skeleton-base:  #EFE8DA;
  --skeleton-shine: #E3DAC6;

  --radius:       8px;
  --radius-lg:    12px;
  --radius-xl:    18px;
  --radius-pill:  50px;
  --transition:   all 0.22s ease;
}

/* Shared component recolours */
.service-card::before { background: var(--accent-grad); }
.route-price { color: var(--gold-dark); }
.stars, .test-stars { color: var(--gold); }
.tour-card-rating { color: var(--text); }
.section-label { color: var(--gold-dark); }
.text-accent { color: var(--gold-dark); }
.section-title .text-accent { color: var(--gold-dark); }
.nav-phone { color: var(--text); }

/* Primary buttons: gold on black text */
.btn-primary {
  background: linear-gradient(135deg, #D9A52A 0%, #C6931F 100%);
  color: #111111;
  border: none;
  box-shadow: 0 4px 16px rgba(217,165,42,.30);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #F0C24B 0%, #D9A52A 100%);
  color: #111111;
  box-shadow: 0 8px 24px rgba(217,165,42,.45);
}
.btn-secondary { background: #111111; color: #fff; }
.btn-secondary:hover { background: #2a2a2e; color: #fff; }

/* Tour card: sharper corners, quieter tags */
.tour-card { border-radius: var(--radius-lg); }
.tag-accent { background: var(--gold); color: #111; }

/* ── TOUR CARD "Check Availability" button — responsive label ──── */
.tour-card-cta .tcc-long { display: inline; }
.tour-card-cta .tcc-short { display: none; }
@media (max-width: 1180px) {
  .tour-card-cta .tcc-long { display: none; }
  .tour-card-cta .tcc-short { display: inline; }
}
@media (max-width: 640px) {
  .tour-card-cta .tcc-long { display: none; }
  .tour-card-cta .tcc-short { display: inline; }
}

/* ══ EIM-DISCOVERABLE BACKGROUND SLOTS ═══════════════════════════
   <img class="hero-bg-img" src="/images/<slug>.jpg" onerror="this.style.display='none'">
   as the first child of a .eim-bgwrap. No photo uploaded = gradient stays.
   ───────────────────────────────────────────────────────────────── */
.eim-bgwrap { position: relative; overflow: hidden; }
.hero-bg-img, .sec-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: 0;
  transition: opacity .35s ease; pointer-events: none;
}
.hero-bg-img.eim-loaded { opacity: .55; }
.sec-bg-img.eim-loaded  { opacity: .28; }
.eim-bgwrap.eim-has-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,.45) 0%, rgba(11,11,12,.65) 100%);
  z-index: 0; pointer-events: none;
}
.eim-bgwrap > .container,
.eim-bgwrap > .wrap,
.eim-bgwrap > .in { position: relative; z-index: 1; }