/* =============================================================
   YASHODHAN TRAVELS — MODERN THEME (2026)
   Premium/Luxury + Warm Traditional-Modern

   Design grounded in the subject: sacred yatras (Chardham, Amarnath,
   Narmada Parikrama) and the visual world around them - temple gold,
   sindoor/saffron offerings, deep maroon, river-teal, warm marble.

   Signature element: the "torana" card - a top-arched silhouette
   echoing a temple gateway, used for tour cards and feature panels.

   This file loads LAST and overrides the old theme. All PHP logic,
   forms and JS-dependent class names are untouched - only the visual
   layer changes.
   ============================================================= */

:root {
    /* ---- Color tokens ---- */
    --ink:        #2A1810;   /* deep warm espresso-maroon: body text, dark sections */
    --maroon:     #6B1E23;   /* primary brand: sindoor maroon */
    --maroon-dark:#4A1418;
    --gold:       #B08D3E;   /* antique temple gold: accents, CTAs, dividers */
    --gold-light: #D4B968;
    --saffron:    #C0521F;   /* burnt saffron/vermillion: secondary accent */
    --teal:       #1B4B43;   /* river-teal: sparing contrast accent */
    --cream:      #F6EFE2;   /* warm ivory/temple-marble: page background */
    --cream-deep: #EFE4CE;
    --white:      #FFFDF9;
    --line:       #E4D8BE;   /* hairline borders on cream */

    /* ---- Type ---- */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;

    /* ---- Shape ---- */
    --arch: 120px 120px 10px 10px;   /* temple-gateway silhouette */
    --radius-sm: 8px;

    /* ---- Shadow ---- */
    --shadow-soft: 0 10px 30px -12px rgba(42, 24, 16, 0.25);
    --shadow-card: 0 14px 40px -16px rgba(42, 24, 16, 0.30);
}

/* =============================================================
   BASE
   ============================================================= */
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
a { color: var(--maroon); }
a:hover, a:focus { color: var(--saffron); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
::selection { background: var(--gold-light); color: var(--ink); }

/* =============================================================
   SECTION HEADINGS — signature divider (diamond ornament, not
   generic numbered markers - there's no sequence here to number)
   ============================================================= */
.section-heading {
    text-align: center;
    margin-bottom: 4.5rem;
}
.section-heading::before {
    /* diamond ornament - a quiet nod to rangoli/temple motifs, sits above the title */
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background: var(--gold);
    transform: rotate(45deg);
    margin: 0 auto 1.8rem;
}
.section-heading h2 {
    font-size: 3.6rem;
    line-height: 1.15;
    margin-bottom: 1.4rem;
    color: var(--ink);
}
.section-heading p {
    font-family: var(--font-body);
    font-size: 1.6rem;
    color: #6B5A48;
    max-width: 560px;
    margin: 0 auto;
}
.section-heading::after {
    /* hairline rule under the intro copy */
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    background: var(--line);
    margin: 2rem auto 0;
}

/* =============================================================
   TOP BAR
   ============================================================= */
.top-bar {
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-body);
    padding: 0.9rem 0;
    font-size: 1.3rem;
}
.top-bar .welcome-note,
.top-bar .header-email {
    margin: 0;
    color: #D9C6AE;
}
.top-bar a { color: var(--gold-light); text-decoration: none; }
.top-bar a:hover { color: var(--white); }
.top-bar i { color: var(--gold); margin-right: 0.6rem; }
.top-bar .smart-social { display: inline-flex; gap: 1rem; margin: 0 0 0 1.6rem; padding: 0; }
.top-bar .smart-social a {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(246,239,226,0.25);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.top-bar .smart-social a:hover { border-color: var(--gold); background: var(--gold); color: var(--ink); }

/* =============================================================
   MAIN HEADER
   ============================================================= */
.header {
    background: var(--white) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    transition: box-shadow 0.25s ease;
}
.header header { padding: 1.8rem 0; background: transparent; }
.header .custom-logo { max-height: 52px; width: auto; }
.header-phone-wrap { float: right; margin-left: 3rem; }
.header-phone {
    display: flex; align-items: center; gap: 1rem;
    font-family: var(--font-display);
    font-weight: 600; font-size: 1.9rem; color: var(--maroon) !important;
    text-decoration: none;
}
.header-phone svg { width: 34px; height: 34px; }
.header-phone svg path, .header-phone svg circle { fill: var(--gold) !important; }

nav.main-menu-wrap { float: right; margin-top: 0.6rem; }
.main-menu { display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.main-menu > li > a {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.45rem;
    color: var(--ink);
    text-decoration: none;
    padding: 1rem 1.5rem;
    display: inline-block;
    position: relative;
    letter-spacing: 0.01em;
}
.main-menu > li > a::after {
    content: '';
    position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0.5rem;
    height: 2px; background: var(--gold);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.2s ease;
}
.main-menu > li:hover > a, .main-menu > li.current-menu-item > a { color: var(--maroon); }
.main-menu > li:hover > a::after, .main-menu > li.current-menu-item > a::after { transform: scaleX(1); }
.main-menu .sub-menu {
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-sm);
    padding: 0.8rem 0;
    min-width: 220px;
}
.main-menu .sub-menu a { font-size: 1.35rem !important; padding: 0.9rem 1.8rem !important; color: var(--ink) !important; }
.main-menu .sub-menu a:hover { background: var(--cream); color: var(--maroon) !important; }

/* Mobile hamburger (meanmenu) */
.mean-container .meanmenu-reveal { color: var(--maroon) !important; }
.mean-container .meanmenu-reveal span { background: var(--maroon) !important; }
.mean-container .mean-nav { background: var(--white); border-top: 3px solid var(--gold); }
.mean-container .mean-nav ul li a { color: var(--ink); font-family: var(--font-body); font-weight: 600; border-color: var(--line) !important; }
.mean-container .mean-nav ul li a:hover { color: var(--maroon); }
.mean-container .mean-nav ul li li a { background: var(--cream); }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn, .tcw-btn, .read-more, button[type="submit"], input[type="submit"] {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}
.btn-primary, .tcw-btn, .btn-inspiry-download,
button[type="submit"], input[type="submit"],
#tours-search input[type="submit"] {
    background: var(--maroon) !important;
    border-color: var(--maroon) !important;
    color: var(--white) !important;
    box-shadow: 0 6px 18px -8px rgba(107,30,35,0.55);
}
.btn-primary:hover, .tcw-btn:hover, .btn-inspiry-download:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
    background: var(--saffron) !important;
    border-color: var(--saffron) !important;
    transform: translateY(-1px);
}
.btn-default { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.btn-default:hover { border-color: var(--gold); color: var(--maroon); }
.btn-success { background: var(--teal) !important; border-color: var(--teal) !important; }
.btn-success:hover { background: #123B34 !important; border-color: #123B34 !important; }

/* =============================================================
   HOME SLIDER
   ============================================================= */
.home-slider { background: var(--ink); }
.home-slider .slide header span { /* eyebrow tag e.g. "pilgrimage" */
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-light) !important;
    font-size: 1.3rem;
}
.home-slider h2 { font-family: var(--font-display); font-weight: 700; }
.home-slider .price { background: var(--white); }
.home-slider .price span:first-child { color: var(--maroon) !important; font-family: var(--font-display); }
.home-slider .arrow { background: var(--maroon) !important; }
.flex-direction-nav a { color: var(--white) !important; }
.flex-control-paging li a { background: rgba(255,255,255,0.4) !important; }
.flex-control-paging li a.flex-active { background: var(--gold) !important; }

/* Search form on slider */
.search-form { background: var(--white) !important; }
.search-form form .form-field svg { fill: var(--gold) !important; }
#tours-search input[type="submit"] { border-radius: 0 !important; }
.search-trapezoid { background: var(--maroon) !important; }

/* =============================================================
   TOUR CARDS — "torana" signature (temple-arch top)
   ============================================================= */
.tour-post, .tour-offer {
    background: var(--white);
    box-shadow: var(--shadow-card) !important;
    border: 1px solid var(--line);
}
.tour-post figure, .tour-offer figure { border-radius: var(--arch) var(--arch); overflow: hidden; }
.tour-post figure img, .tour-offer figure img { border-radius: var(--arch) var(--arch); }
.tour-post h3 a, .tour-offer h3 a { font-family: var(--font-display); color: var(--ink); }
.tour-post h3 a:hover, .tour-offer h3 a:hover { color: var(--maroon); }
.tour-post .tour-price, .tour-offer .tour-price {
    font-family: var(--font-display); font-weight: 700; color: var(--maroon) !important; font-size: 2.2rem;
}
.tour-post .discount-label, .tour-offer .discount-label { background: var(--saffron) !important; }
.tour-post .sunlight, .tour-offer .sunlight { background: var(--ink) !important; }
.tour-post .read-more, .tour-offer .read-more {
    background: var(--maroon); color: var(--white) !important; padding: 0.9rem 2rem; display: inline-block; border-radius: var(--radius-sm);
}
.tour-post .read-more:hover, .tour-offer .read-more:hover { background: var(--saffron); }

/* New wide tour-card design (tours listing) */
.tour-card-wide { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.tcw-image { border-radius: var(--arch) 0 0 var(--arch); overflow: hidden; }
.tcw-image img { border-radius: var(--arch) 0 0 var(--arch); }
.tcw-discount { background: var(--saffron) !important; }
.tcw-body h3 { font-family: var(--font-display); }
.tcw-meta span { color: #6B5A48; }
.tcw-meta i { color: var(--gold); }
.tcw-highlights li i { color: var(--teal) !important; }
.tcw-date-pill { background: var(--cream-deep) !important; color: var(--ink) !important; border: 1px solid var(--line); }
.tcw-price-box { border-left: 1px solid var(--line); }
.tcw-price { color: var(--maroon) !important; font-family: var(--font-display); }
.tcw-old-price { color: #A99A85; }
@media (max-width: 767px) {
    .tcw-image { border-radius: var(--arch) var(--arch) 0 0; }
    .tcw-image img { border-radius: var(--arch) var(--arch) 0 0; }
}

/* =============================================================
   DESTINATIONS
   ============================================================= */
.travel-destination .overlay {
    background: linear-gradient(180deg, rgba(42,24,16,0) 40%, rgba(42,24,16,0.88) 100%) !important;
}
.travel-destination .location h3 { font-family: var(--font-display); }
.travel-destination .location span { color: var(--gold-light); }
.destinations-page .destination-item img { border-radius: var(--arch) var(--arch); }
.destinations-page .destination-overlay {
    background: linear-gradient(180deg, rgba(42,24,16,0) 40%, rgba(42,24,16,0.9) 100%);
    border-radius: var(--arch) var(--arch);
}

/* =============================================================
   WHY CHOOSE US
   ============================================================= */
.home-section-features { background: var(--white); }
.home-feature figure {
    width: 84px; height: 84px; margin: 0 auto 2rem; border-radius: 50%;
    background: var(--cream); display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
}
.home-feature figure svg { width: 38px; height: 38px; }
.home-feature figure svg .st0,
.home-feature figure svg path,
.home-feature figure svg circle {
    stroke: var(--maroon) !important;
}
.home-feature h3 { font-family: var(--font-display); font-size: 2rem; }
.home-feature p { color: #6B5A48; }

/* =============================================================
   SPECIAL OFFERS / GOOGLE REVIEWS / TESTIMONIALS
   ============================================================= */
.google-review-card { border: 1px solid var(--line); box-shadow: var(--shadow-soft) !important; }
.grc-avatar svg { border-radius: 50%; }
.grc-who strong { font-family: var(--font-body); }
.google-reviews-section .section-tagline { color: var(--gold) !important; }

/* =============================================================
   FOOTER
   ============================================================= */
#site-footer { background: var(--ink); color: #D9C6AE; }
#site-footer .widget-title {
    font-family: var(--font-display); color: var(--white); font-size: 1.9rem; margin-bottom: 2rem;
    position: relative; padding-bottom: 1rem;
}
#site-footer .widget-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--gold); }
#site-footer p, #site-footer li { color: #C9B79A; }
#site-footer a { color: #C9B79A; text-decoration: none; }
#site-footer a:hover { color: var(--gold-light); }
#site-footer .contact-info-list i { color: var(--gold); margin-right: 0.8rem; }
.bottom-socket { background: #1D110B; color: #9C8A72; border-top: 1px solid rgba(255,255,255,0.06); }
.bottom-socket a { color: var(--gold-light); }

/* =============================================================
   FORMS
   ============================================================= */
.form-control, input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], textarea, select {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body);
    background: var(--white) !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(176,141,62,0.18) !important;
}
.contact-form input, .contact-form textarea, #tours-search input, #tours-search select {
    border: 1px solid var(--line) !important;
}

/* =============================================================
   PAGE BANNER (inner pages hero strip)
   ============================================================= */
.page-banner {
    background: linear-gradient(135deg, var(--ink) 0%, var(--maroon-dark) 100%);
    padding: 6rem 0 5rem;
}
.page-banner h1 { color: var(--white); font-size: 4rem; }
.page-banner .breadcrumb { background: transparent; padding: 0; margin-top: 1.2rem; }
.page-banner .breadcrumb li, .page-banner .breadcrumb a { color: #D9C6AE; }
.page-banner .breadcrumb li.active { color: var(--gold-light); }
.page-banner .breadcrumb > li + li::before { color: #7A6650; }

/* =============================================================
   PAGINATION
   ============================================================= */
.pagination > li > a, .pagination > li > span {
    color: var(--ink); border-color: var(--line); font-family: var(--font-body); font-weight: 600;
}
.pagination > li.active > a { background: var(--maroon) !important; border-color: var(--maroon) !important; }
.pagination > li > a:hover { background: var(--cream); border-color: var(--gold); color: var(--maroon); }

/* =============================================================
   TESTIMONIAL / REVIEW CARDS (about page grid + widget)
   ============================================================= */
.testimonial-item { border: 1px solid var(--line); box-shadow: var(--shadow-soft) !important; }
.testimonial-avatar { background: var(--cream) !important; color: var(--maroon) !important; }

/* =============================================================
   TOUR DETAIL PAGE
   ============================================================= */
.tour-main-img { border-radius: var(--arch) var(--arch) 8px 8px; overflow: hidden; }
#tourTabs { border-bottom: 2px solid var(--line); }
#tourTabs li { font-family: var(--font-body); font-weight: 600; color: #6B5A48; }
#tourTabs li.active { color: var(--maroon); border-bottom: 2px solid var(--maroon); margin-bottom: -2px; }
.inspiry_booking_widget { border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.inspiry_booking_widget header { background: var(--ink) !important; }
.tour-price-big { color: var(--maroon) !important; font-family: var(--font-display); }
.itinerary-day .day-number { background: var(--maroon) !important; }
.inc-exc-list .fa-check { color: var(--teal) !important; }
.inc-exc-list .fa-times { color: var(--saffron) !important; }

/* =============================================================
   SCROLL TO TOP / WHATSAPP WIDGET — keep functional, tune accent
   ============================================================= */
#scroll-top { background: var(--maroon) !important; }
#scroll-top:hover { background: var(--saffron) !important; }

/* =============================================================
   MOBILE
   ============================================================= */
@media (max-width: 767px) {
    .section-heading h2 { font-size: 2.6rem; }
    .header-phone-wrap { float: none; margin: 1rem 0 0; }
    .page-banner h1 { font-size: 2.8rem; }
}

/* =============================================================
   ACCESSIBILITY — respect reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}