/* =========================================================================
   Bon Voyage — website.css (FOOTER + TOURS REVISED)
   Updated: 2025-09-20

   Key changes:
   - Footer recolored to brand palette (deep green base, yellow/orange highlights)
   - Tours (cards, meta) tuned to brand greens/yellow
   - Headings stay on Raleway for consistency
   ========================================================================= */

/* Tokens already defined earlier */
:root{
  --brand:        #396111;
  --brand-2:      #2d4e0e;
  --logo-accent:  #f9bb06;
  --accent:       #F1781E;
}

/* Tours section adjustments */
.tour-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  text-align:center;
  padding:14px;
  transition:.2s transform, .2s box-shadow;
}
.tour-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(57,97,17,.25);
}
.tour-meta{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-weight:700;
  color:var(--brand);
}

/* Footer recolor to brand palette */
footer{
  background:var(--brand);
  color:#fff;
  text-align:center;
  padding:25px 15px;
  margin-top:40px;
}
.footer-modal{
  background:var(--brand-2);
  color:#fff;
  padding:40px 20px 20px;
}
.footer-container{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:space-between;
  align-items:flex-start;
  max-width:1200px;
  margin:auto;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.footer-column{ flex:1; min-width:220px; text-align:left; }
.footer-column h4{ margin-bottom:12px; color:var(--logo-accent); font-family:'Raleway', sans-serif; }
.footer-bottom{ margin-top:18px; font-size:.9rem; color:#eee; }
.footer-column a{ color:var(--logo-accent); transition:color .15s ease; }
.footer-column a:hover,.footer-column a:focus-visible{ color:#fff; }
.footer-column ul{ list-style:none; padding-left:0; margin:0; }
.footer-column li{ margin:6px 0; }

/* Contact rows */
.contact-list i{ color:var(--logo-accent); }
.contact-list a{ color:var(--logo-accent); }
.contact-list a:hover{ color:#fff; }

/* Social icons recolored */
.social-links a{
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
}
.social-links a:hover{
  background:var(--brand-2);
  border-color:var(--logo-accent);
  color:var(--logo-accent);
}


/* =========================================================
   PALETTE ALIGNMENT OVERRIDES — 2025-09-20
   (Footer + Tours updated to match brand palette & Raleway)
   ========================================================= */

/* --- Footer (switch from brown to deep green palette) --- */
footer,
.footer-modal{
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color:#fff;
}
.footer-column h4{ color: var(--logo-accent); }
.footer-bottom{ color: color-mix(in srgb, #fff 72%, var(--brand) 28%); }
.footer-column a{ color: var(--logo-accent); }
.footer-column a:hover, .footer-column a:focus-visible{ color:#fff; }
.contact-list i, .contact-list a{ color: var(--logo-accent); }
.contact-list a:hover{ color:#fff; }
.social-links a{ border-color: rgba(255,255,255,.28); }
.social-links a:hover{ background: rgba(255,255,255,.12); border-color:#fff; }

/* Optional: footer typography strengthen */
footer h4, footer .brand-head{ font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* --- Tours section refinements to brand --- */
.tour-card h3{ font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--brand); }
.tour-card{ border-color: color-mix(in srgb, var(--brand) 12%, var(--line) 88%); }
.tour-card .btn{ --bg: var(--brand); --bg2: var(--brand-2); }
.tour-meta{ color: color-mix(in srgb, var(--text) 72%, var(--brand) 28%); }

/* Stars keep golden but hover accents use brand */
.qr-stars button.active, .qr-stars button:hover{ color: var(--star-on); }
.qr-thumb[aria-pressed="true"]{
  background: color-mix(in oklab, var(--brand) 18%, #fff 82%);
  border-color: var(--brand); color: var(--brand);
}

/* Thumbs active border uses brand (was #00a870) */
.thumbs img.active{ border-color: var(--brand); }