/*
Theme Name: Asafina Safaris
Theme URI: https://asafinasafaris.com
Template: BookYourTravel
Author: Asafina Safaris
Description: Brown/green/gold reskin child theme of Book Your Travel. Modern typography, warm earthy palette, softened cards and buttons.
Version: 1.0.1
License: GNU General Public License v2 or later
Text Domain: asafina
*/

/* =========================================================
   1. Design tokens
   ========================================================= */
:root {
  --as-brown: #3E2C1C;        /* espresso - headings, footer */
  --as-brown-deep: #2A1D12;   /* darkest brown - header/footer bg */
  --as-brown-soft: #6B5138;   /* muted brown - secondary text */
  --as-green: #33502F;        /* safari green - links, secondary buttons */
  --as-green-deep: #263D23;   /* hover green */
  --as-gold: #C9A227;         /* gold - primary CTA, accents */
  --as-gold-deep: #A9871D;    /* hover gold */
  --as-sand: #F7F2E9;         /* warm page background */
  --as-cream: #FDFBF6;        /* card background */
  --as-ink: #241A12;          /* body text */
  --as-radius: 12px;
  --as-shadow: 0 6px 22px rgba(62, 44, 28, 0.10);
  --as-font-display: "Fraunces", Georgia, serif;
  --as-font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =========================================================
   2. Base
   ========================================================= */
body {
  background-color: var(--as-sand);
  color: var(--as-ink);
  font-family: var(--as-font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--as-font-display);
  color: var(--as-brown);
  font-weight: 600;
  line-height: 1.25;
}

::selection { background: var(--as-gold); color: var(--as-brown-deep); }

a { color: var(--as-green); transition: color 0.15s ease; }
a:hover, a:focus { color: var(--as-gold-deep); }

hr { border-color: rgba(62, 44, 28, 0.15); }

/* =========================================================
   3. Buttons & forms
   ========================================================= */
button,
input[type="submit"],
input[type="button"],
.button,
.btn,
a.button,
.rev-btn,
.gradient_button,
.book_now a,
a.book-now {
  background: var(--as-gold) !important;
  background-image: none !important;
  color: var(--as-brown-deep) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--as-font-body);
  font-weight: 700;
  letter-spacing: 0.2px;
  text-shadow: none !important;
  transition: background 0.15s ease, transform 0.1s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.btn:hover,
a.button:hover,
.rev-btn:hover,
.gradient_button:hover,
.book_now a:hover,
a.book-now:hover {
  background: var(--as-gold-deep) !important;
  color: #fff !important;
}

/* Secondary / outline style hook */
.as-btn-secondary,
.button.secondary {
  background: var(--as-green) !important;
  color: #fff !important;
}
.as-btn-secondary:hover,
.button.secondary:hover { background: var(--as-green-deep) !important; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
  background: #fff;
  border: 1px solid rgba(62, 44, 28, 0.25);
  border-radius: 8px;
  color: var(--as-ink);
  font-family: var(--as-font-body);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--as-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

/* =========================================================
   4. Header & navigation
   ========================================================= */
#header,
#masthead,
.site-header,
.header-wrapper,
.main-header,
.header_holder,
header.header {
  background-color: var(--as-brown-deep) !important;
  background-image: none !important;
  border-bottom: 3px solid var(--as-gold);
}

#header a,
#masthead a,
.site-header a,
.header-wrapper a,
.main-header a,
.header_holder a,
header.header a {
  color: #F3EBDD;
}

#header a:hover,
#masthead a:hover,
.site-header a:hover,
.header-wrapper a:hover,
.main-header a:hover,
.header_holder a:hover,
header.header a:hover {
  color: var(--as-gold);
}

/* dropdown menus */
#header ul ul,
.site-header ul ul,
.main-header ul ul,
.header_holder ul ul {
  background: var(--as-brown) !important;
  border-radius: 0 0 10px 10px;
  box-shadow: var(--as-shadow);
}

/* top utility bar (Talk to Timothy) */
.top-bar, .topbar, .header-top, .header_top {
  background: var(--as-green) !important;
  color: #fff !important;
}
.top-bar a, .topbar a, .header-top a, .header_top a { color: #fff !important; }
.top-bar a:hover, .topbar a:hover, .header-top a:hover, .header_top a:hover { color: var(--as-gold) !important; }

/* =========================================================
   5. Content, cards & tour listings
   ========================================================= */
article.tour,
article.accommodation,
article.cruise,
article.car_rental,
.results article,
.tour-item,
.package,
.listing-item {
  background: var(--as-cream);
  border: 1px solid rgba(62, 44, 28, 0.08);
  border-radius: var(--as-radius);
  overflow: hidden;
  box-shadow: var(--as-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

article.tour:hover,
.results article:hover,
.tour-item:hover,
.package:hover,
.listing-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(62, 44, 28, 0.18);
}

/* prices, ratings, badges */
.price, .price span, .from-price {
  color: var(--as-green) !important;
  font-weight: 700;
}
.rating, .score, .user-rating { color: var(--as-gold) !important; }
.badge, .ribbon, .special-offer, .sale {
  background: var(--as-gold) !important;
  color: var(--as-brown-deep) !important;
}

/* section headings accent */
.section-title:after,
h2.entry-title:after {
  background: var(--as-gold);
}

/* =========================================================
   6. Footer
   ========================================================= */
#footer,
.site-footer,
footer.footer,
.footer-wrapper,
.footer_holder {
  background-color: var(--as-brown-deep) !important;
  background-image: none !important;
  color: #D9CDBB;
  border-top: 3px solid var(--as-gold);
}

#footer a, .site-footer a, footer.footer a, .footer-wrapper a, .footer_holder a { color: #D9CDBB; }
#footer a:hover, .site-footer a:hover, footer.footer a:hover, .footer-wrapper a:hover, .footer_holder a:hover { color: var(--as-gold); }

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 {
  color: #fff;
}

/* =========================================================
   7. Tables (itineraries, price tables)
   ========================================================= */
table { border-collapse: collapse; }
table th {
  background: var(--as-brown);
  color: #fff;
}
table th, table td {
  border: 1px solid rgba(62, 44, 28, 0.15);
  padding: 10px 14px;
}
table tr:nth-child(even) td { background: rgba(201, 162, 39, 0.06); }

/* =========================================================
   8. Mobile polish
   ========================================================= */
@media (max-width: 768px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  body { font-size: 15px; }

  button, input[type="submit"], .button, a.button {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* =========================================================
   9. Small identity touches
   ========================================================= */
/* =========================================================
   10. Footer layout fixes
   ========================================================= */
#footer img,
.site-footer img,
footer.footer img,
.footer_holder img,
.footer-wrapper img {
  max-width: 150px !important;
  width: auto;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}

/* keep any element from overflowing its column */
#footer *, .site-footer *, footer.footer * { max-width: 100%; }
img { height: auto; }

/* social icons row */
#footer .social a, .site-footer .social a, footer .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px 10px 0;
}

@media (max-width: 768px) {
  #footer, .site-footer, footer.footer, .footer_holder {
    text-align: center;
  }
  #footer .social, .site-footer .social { justify-content: center; }
}

/* gold scrollbar accent (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--as-sand); }
::-webkit-scrollbar-thumb { background: var(--as-brown-soft); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--as-gold); }

/* image treatment: subtle warm rounding on content images */
.entry-content img, article img { border-radius: 10px; }