/* Direction C theme (2026-10-31): all greens on white (jeep, sage, fresh
   and leaf), set in Bricolage Grotesque. The owner chose all-green over the
   first chilli red accent. Loaded after the page's own styles and
   styles-deferred.css, so it only overrides colour, type and layout; the
   markup, text and javas.js booking ids are unchanged.
   This file is served immutable for a year: every edit must come with a new
   ?v= value in the pages that link it. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Only the letters of the park's name, so each file is under 2 KB */
@font-face {
  font-family: "Noto Sans Sinhala";
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/noto-sans-sinhala-700-plate.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Sans Tamil";
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/noto-sans-tamil-700-plate.woff2) format("woff2");
}

:root {
  --jeep: #2f4a34;
  --jeep-dark: #23382a;
  --sage: #6b8f5e;      /* ".com", icons, bullets */
  --fresh: #a9c98f;     /* buttons on a jeep-green background */
  --fresh-dark: #95b97a;
  --fresh-soft: #cfe0c3;
  --leaf: #e8eee4;
  --leaf-line: #d6ddd2;
  --ink: #1f2420;
  --ink-soft: #4a524c;
  --white: #fff;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* the old tokens, pointed at the new palette */
  --primary-green: var(--jeep);
  --primary-dark: var(--jeep);
  --accent-gold: var(--jeep);
  --accent-orange: var(--jeep);
  --text-light: var(--ink);
  --text-dark: var(--ink);
  --bg-card: var(--white);
  --shadow: 0 1px 0 var(--leaf-line);
  --shadow-sm: none;
  --radius: 16px;
  --radius-sm: 10px;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
}
h1, h2, h3, h4,
.logo-text, .hero-image-title, .booking-header h2 {
  font-family: var(--font);
  text-wrap: balance;
}
h2 { font-stretch: 80%; font-weight: 800; letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }

/* Header */
.header {
  background: var(--white);
  backdrop-filter: none;
  border-bottom: 1px solid var(--leaf-line);
  padding: 0.9rem max(20px, env(safe-area-inset-left, 0px));
}
.header-content { max-width: 1140px; }
.logo-text { color: var(--jeep); font-weight: 800; font-stretch: 80%; font-size: 1.7rem; }
.logo-text span { color: var(--sage); }
.nav-menu { gap: 1.4rem; }
.nav-menu a { color: var(--ink); font-weight: 600; font-size: 1rem; }
.nav-menu a:hover { color: var(--jeep); }
.nav-menu a::after { display: none; }
.nav-menu li:first-child a {
  background: var(--jeep);
  color: var(--white);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
}
.nav-menu li:first-child a:hover { background: var(--jeep-dark); color: var(--white); }
@media (max-width: 768px) {
  .header-content { justify-content: space-between; text-align: left; flex-wrap: nowrap; }
  /* phones had no menu at all; keep the booking button */
  .nav-menu { display: flex; }
  .nav-menu li:not(:first-child) { display: none; }
}

/* Photo banner */
.hero-image-overlay {
  background: linear-gradient(180deg, rgba(31, 36, 32, 0) 45%, rgba(31, 36, 32, 0.7) 100%);
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: 2rem max(20px, calc((100% - 1100px) / 2));
}
.hero-image-title {
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  margin-bottom: 0.25rem;
}
.hero-image-subtitle { color: var(--white); }

/* Hero: park name plate, headline, card payment strip */
.hero {
  background: none;
  text-align: left;
  max-width: 1140px;
  margin: 0 auto;
  padding: 2.5rem max(20px, env(safe-area-inset-left, 0px)) 2rem;
}
.plate {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--jeep);
  color: var(--white);
  border-radius: 14px;
  padding: 14px 20px 12px;
  margin-bottom: 22px;
  box-shadow: inset 0 0 0 3px var(--jeep), inset 0 0 0 5px rgba(255, 255, 255, 0.55);
}
.plate .si { font: 700 clamp(26px, 3.4vw, 36px)/1.25 "Noto Sans Sinhala", "Iskoola Pota", sans-serif; }
.plate .ta { font: 700 clamp(19px, 2.4vw, 25px)/1.35 "Noto Sans Tamil", "Latha", sans-serif; }
.plate .en { font: 600 16px/1.3 var(--font); font-stretch: 85%; opacity: 0.92; margin-top: 2px; }
.hero h1 {
  color: var(--ink);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: none;
  max-width: 15em;
  margin-bottom: 1rem;
}
.hero-subtitle { color: var(--ink-soft); font-weight: 400; margin: 0 0 1.5rem; max-width: 36em; }
.hero-badges { justify-content: flex-start; gap: 0.6rem; }
.badge {
  background: var(--leaf);
  backdrop-filter: none;
  border: 0;
  color: var(--jeep);
  font-weight: 600;
  font-size: 0.95rem;
}
.badge-icon, .trust-icon { display: none; }
.trust-badges { justify-content: flex-start; gap: 0.6rem; }
.trust-badge {
  background: var(--white);
  border: 2px solid var(--leaf);
  box-shadow: none;
  color: var(--ink);
}
.trust-badge:hover { border-color: var(--jeep); box-shadow: none; transform: none; }
.trust-text strong { color: var(--jeep); }
.trust-text small { color: var(--ink-soft); }

.pay {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding: 14px 18px;
  border: 2px solid var(--leaf);
  border-radius: 14px;
  max-width: 640px;
}
.pay img { height: 34px; width: auto; }
.pay p { margin: 0; font-weight: 700; color: var(--ink); flex: 1 1 260px; min-width: 0; }
.pay small { display: block; font-weight: 400; font-size: 0.95rem; color: var(--ink-soft); }

/* Main column */
.main-container { max-width: 1140px; padding: 0 max(20px, env(safe-area-inset-left, 0px)) 3rem; }

/* Booking card and the quote javas.js writes into it */
.booking-card {
  background: var(--white);
  border: 2px solid var(--jeep);
  box-shadow: none;
  max-width: 640px;
}
.booking-header { border-bottom: 1px solid var(--leaf-line); }
.booking-header h2 { color: var(--jeep); font-weight: 800; font-stretch: 80%; font-size: 2.2rem; }
.booking-header p, .form-input::placeholder { color: var(--ink-soft); }
.form-label { color: var(--ink); font-weight: 700; font-size: 0.95rem; }
.form-input, .form-select,
input[type="date"], input[type="time"] {
  border: 2px solid var(--leaf-line);
  color: var(--ink);
}
.form-input:focus, .form-select:focus,
input[type="date"]:focus, input[type="time"]:focus {
  border-color: var(--jeep);
  box-shadow: 0 0 0 3px rgba(47, 74, 52, 0.15);
}
.btn { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.05rem; border-radius: 999px; }
.btn-primary, .btn.success, .price-display, .price-box, .booking-form-results {
  background: var(--jeep);
  color: var(--white);
}
.btn-primary:hover, .btn.success:hover { background: var(--jeep-dark); box-shadow: none; transform: none; }
.btn-success, .btn-book, .conta {
  background: var(--fresh);
  color: var(--ink);
}
.btn-success:hover, .btn-book:hover { background: var(--fresh-dark); box-shadow: none; transform: none; }
.result-card, .conta1 { background: var(--leaf); border: 0; color: var(--ink); }
.result-item, .result-card .result-item, .detail-item { background: var(--white); box-shadow: none; }
.result-label, .result-card .result-label, .detail-label, .result-guarantee, .result-book a { color: var(--jeep); }
.result-value, .result-card .result-value, .detail-value, .result-book { color: var(--ink); }
.result-includes { background: var(--white); border-left-color: var(--jeep); color: var(--ink); }
.booking-form .form-label,
.booking-form-results p, .booking-summary p, .booking-summary-text { color: var(--white); }
.booking-form .form-input, .booking-form .form-select { background: var(--white); color: var(--ink); }

/* Safari times, what's included, features */
.info-card {
  background: var(--leaf);
  backdrop-filter: none;
  border: 0;
  color: var(--ink);
}
.info-card:hover { background: var(--leaf); transform: none; }
.info-card h3 { color: var(--jeep); font-weight: 800; font-stretch: 85%; }
.info-table td { border-bottom: 1px solid var(--leaf-line); color: var(--ink); }
.info-table td:last-child { color: var(--jeep); font-weight: 700; }
.feature-item {
  background: var(--white);
  border: 2px solid var(--leaf);
  color: var(--ink);
}
.feature-item:hover { background: var(--white); border-color: var(--jeep); transform: none; }
.feature-icon { background: var(--leaf); }
.feature-text h4 { color: var(--jeep); }
.feature-text p { color: var(--ink-soft); }

/* Lunch and photo sections */
.home-photos { max-width: 1140px; padding: 0; }
.home-photos h2 { color: var(--jeep); font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05; }
.home-photos p { max-width: 46em; }
.photo-grid img { border-radius: 14px; }
.photo-grid figcaption { color: var(--ink-soft); opacity: 1; text-align: left; font-size: 0.95rem; }
.home-photos .btn-row a { background: var(--jeep); color: var(--white); border-radius: 999px; }
.home-photos .btn-row a:hover { background: var(--jeep-dark); }
.home-photos .btn-row a.alt { background: transparent; color: var(--jeep); border: 0; box-shadow: inset 0 0 0 2px var(--jeep); }
.lunch-box { background: var(--leaf); border: 0; }

/* About */
.about-section h2, .faq-section h2, .contact-section h2 {
  color: var(--jeep);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1;
  text-align: left;
}
.about-content { background: var(--leaf); backdrop-filter: none; border: 0; }
.about-text p, .about-list li { color: var(--ink); }
.about-text h3 { color: var(--jeep); }
.about-list li::before { color: var(--sage); }
.about-stats { border-top: 1px solid var(--leaf-line); }
.stat-number { color: var(--jeep); font-stretch: 75%; font-weight: 800; }
.stat-label { color: var(--ink-soft); }
.about-text a, .contact-section a { text-decoration-color: rgba(47, 74, 52, 0.45); }
.about-text a:hover, .about-text a:focus,
.contact-section a:hover, .contact-section a:focus {
  color: var(--jeep);
  text-decoration-color: var(--jeep);
}

/* FAQ: open rows with a hairline, like a list rather than cards */
.faq-intro { color: var(--ink-soft); text-align: left; }
.faq-category-title { color: var(--jeep); border-bottom: 0; font-weight: 800; font-stretch: 85%; }
.faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--leaf-line);
  border-radius: 0;
}
.faq-item:hover { background: transparent; border-color: var(--leaf-line); }
.faq-question { color: var(--ink); font-weight: 700; font-family: var(--font); font-size: 1.05rem; }
.faq-question:hover { color: var(--jeep); }
.faq-icon { color: var(--sage); }
.faq-answer p { color: var(--ink); }
.faq-answer strong { color: var(--jeep); }

/* Contact: book first, then WhatsApp, then email */
.contact-intro, .contact-cta { color: var(--ink); text-align: left; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 2rem; }
.contact-actions a.btn-c {
  display: inline-block;
  padding: 15px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  background: var(--jeep);
  color: var(--white);
}
.contact-actions a.btn-c:hover, .contact-actions a.btn-c:focus { background: var(--jeep-dark); color: var(--white); }
.contact-actions a.btn-c.outline { background: transparent; color: var(--jeep); box-shadow: inset 0 0 0 2px var(--jeep); }
.contact-actions a.btn-c.outline:hover, .contact-actions a.btn-c.outline:focus { background: var(--leaf); color: var(--jeep); }
.contact-actions .mail { color: var(--ink); }
.contact-card {
  background: var(--leaf);
  backdrop-filter: none;
  border: 0;
}
.contact-card h3 { color: var(--jeep); }
.contact-card p, .contact-card address { color: var(--ink); }
.contact-note { color: var(--ink-soft); }

/* Footer with the park name in Sinhala, Tamil and English */
.footer {
  background: var(--leaf);
  backdrop-filter: none;
  border-top: 0;
  color: var(--ink);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.footer-content { max-width: 1140px; }
.footer-section h4 { color: var(--jeep); font-weight: 800; }
.footer-section p, .footer-section a { color: var(--ink); }
.footer-section a:hover { color: var(--jeep); }
.footer-bottom { border-top: 1px solid var(--leaf-line); color: var(--ink-soft); }
.foot-plate { font: 700 18px/1.4 "Noto Sans Sinhala", "Iskoola Pota", sans-serif; color: var(--jeep); margin: 0 0 0.75rem; }
.foot-plate .ta { font-family: "Noto Sans Tamil", "Latha", sans-serif; font-size: 15px; margin-left: 10px; }
.foot-plate .en { display: block; margin: 2px 0 0; font: 600 15px/1.4 var(--font); }
@media (max-width: 768px) {
  .footer-content { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Quote flow (v2): after "Get Price" the customer sees where they are going,
   the price, and then straight away the Instant Booking form as the next
   step. The inclusions and trip details follow the form. The quote markup
   comes from javas.js, so this is done by flattening #dvDistance and
   .result-card into the card's own column and reordering with flex. */
.booking-card { display: flex; flex-direction: column; }
#dvDistance, #dvDistance .result-card { display: contents; }
#dvDistance .result-grid, #dvDistance .price-box { margin-top: 1.25rem; }
#dvDistance .result-item { background: var(--leaf); }
#dvDistance1 { order: 1; margin-top: 1.25rem; }
#dvDistance .result-includes,
#dvDistance .result-details,
#dvDistance .result-guarantee { order: 2; margin-top: 1rem; }
#dvDistance .result-includes { background: var(--leaf); }
.result-vehicle, .result-book { display: none; }
.price-box .price-amount, .price-amount {
  font-family: var(--font);
  font-weight: 800;
  font-stretch: 80%;
}
.booking-form-results { border: 0; box-shadow: none; }
.booking-form-title {
  font-family: var(--font);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--white);
  text-align: center;
}
.booking-form-title::before {
  content: "Next step: book this safari";
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 0.6rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--fresh-soft);
  color: var(--jeep);
  font-size: 0.95rem;
  font-weight: 700;
  font-stretch: 100%;
}
.btn-book { font-size: 1.15rem; padding: 1.1rem 2rem; }

/* v3: these headings had "Playfair Display" set on a more specific selector */
.hero h1, .booking-header h2, .price-amount, .price-box .price-amount,
.booking-form-title, .info-card h3, .footer-section h4, .about-section h2,
.about-text h3, .faq-section h2, .faq-category, .faq-category-title,
.contact-section h2, .contact-card h3, .logo-text, .hero-image-title {
  font-family: var(--font);
}

/* v4: iOS gives date and time inputs a fixed inner width, so in the
   two-column row they pushed past the form edge. Let them shrink. */
.booking-form .form-row > .form-group { min-width: 0; }
input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  min-height: 3.3rem;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; }