/*
 * ================================================================
 *  Paramount Adventure Travel & Treks — Brand Theme CSS
 *  Primary: Navy #0B2A4A | Accent: Green #5E8F3E
 * ================================================================
 */

/* ── CSS Variables (Brand Palette) ── */
:root {
    --navy:          #0B2A4A;
    --navy-hover:    #123E63;
    --navy-dark:     #071C30;
    --mtn-blue:      #1E5A85;
    --trek-green:    #5E8F3E;
    --trek-green-hv: #4D7632;
    --sage:          #EAF2E4;
    --page-bg:       #F6F5EF;
    --card-bg:       #FFFFFF;
    --white:         #FFFFFF;
    --text-main:     #1C1917;
    --text-sec:      #78716C;
    --border:        #E8DDD5;
}

/* ── Base ── */
body {
    background: var(--page-bg);
    color: var(--text-main);
}

/* ── Typography ── */
h1, h2, h3, h4, .font-display {
    font-family: 'Playfair Display', serif;
    color: var(--navy);
}

/* ── Buttons ── */
.btn-primary {
    background: var(--navy) !important;
    color: #fff !important;
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(11,42,74,.15);
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background: var(--navy-hover) !important;
    box-shadow: 0 6px 20px rgba(11,42,74,.25) !important;
    transform: translateY(-2px);
}

.btn-outline {
    border-color: var(--navy) !important;
    color: var(--navy) !important;
}
.btn-outline:hover {
    background: var(--navy) !important;
    color: #fff !important;
}

/* "Book / Enquire" CTA button — green */
.btn-sun {
    background: var(--trek-green) !important;
    box-shadow: 0 4px 14px rgba(94,143,62,.20) !important;
    color: #fff !important;
    border-radius: 9999px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    animation: btnShake 4s infinite;
}
.btn-sun::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: flashShine 4s ease-in-out infinite;
}
@keyframes flashShine {
    0% { left: -100%; }
    40% { left: 200%; }
    100% { left: 200%; }
}
@keyframes btnShake {
    0%, 40%, 100% { transform: translateX(0); }
    5% { transform: translateX(-3px) rotate(-1deg); }
    10% { transform: translateX(3px) rotate(1deg); }
    15% { transform: translateX(-3px) rotate(-1deg); }
    20% { transform: translateX(3px) rotate(1deg); }
    25% { transform: translateX(-3px) rotate(-1deg); }
    30% { transform: translateX(3px) rotate(1deg); }
    35% { transform: translateX(0); }
}
.btn-sun:hover {
    background: var(--trek-green-hv) !important;
    box-shadow: 0 6px 22px rgba(94,143,62,.32) !important;
    animation: none; /* Pause animation on hover */
}

/* ── Eyebrow labels ── */
.eyebrow { color: var(--trek-green) !important; }

/* ── Nav links ── */
.nav-link::after {
    background: var(--trek-green) !important;
}
.nav-link.nav-active { color: #a8d48a !important; }

/* ── Cards ── */
.card-soft {
    border-color: var(--border) !important;
    background: var(--white) !important;
}
.card-soft:hover {
    box-shadow: 0 8px 32px rgba(11,42,74,.10) !important;
}

/* ── Package card accent ── */
.pkg-badge { color: var(--navy) !important; }
.pkg-name-link:hover { color: var(--navy) !important; }
.pkg-icon { color: var(--trek-green) !important; }

/* ── Includes (teal→navy) ── */
.bg-teal-50   { background-color: var(--sage) !important; }
.border-teal-100 { border-color: #c8e0c0 !important; }
.text-teal-700, .text-teal-800 { color: var(--navy) !important; }
.text-teal-500, .text-teal-600 { color: var(--trek-green) !important; }
.bg-teal-600  { background-color: var(--navy) !important; }

/* ── Excludes (red stays red) — no change needed ── */

/* ── Tab bar / sticky nav ── */
.pkg-tab.is-active {
    color: var(--navy) !important;
    border-bottom-color: var(--navy) !important;
}
.pkg-tab:hover { color: var(--navy) !important; }

/* ── Hero overlay refinement ── */
.hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(11,42,74,.48) 0%,
        rgba(11,42,74,.30) 60%,
        rgba(11,42,74,.55) 100%
    ) !important;
}

/* ── Quick-facts cards ── */
.quick-fact-icon { color: var(--trek-green) !important; }
.quick-fact-label { color: var(--text-sec) !important; }
.quick-fact-value { color: var(--navy) !important; }

/* ── Difficulty badges ── */
.diff-easy   { background: var(--sage); color: var(--trek-green); }
.diff-moderate { background: #dbeafe; color: var(--navy); }
.diff-hard   { background: #fee2e2; color: #b91c1c; }

/* ── Booking card ── */
.booking-header { background: var(--navy) !important; }
.booking-price  { color: var(--navy) !important; }
.booking-cta    { background: var(--trek-green) !important; }
.booking-cta:hover { background: var(--trek-green-hv) !important; }

/* ── Form inputs ── */
input:focus, textarea:focus, select:focus {
    border-color: var(--navy) !important;
    box-shadow: 0 0 0 3px rgba(11,42,74,.12) !important;
    outline: none;
}

/* ── Route timeline dots ── */
.bg-teal-600 { background-color: var(--navy) !important; }
.ring-teal-100 { --tw-ring-color: rgba(11,42,74,.15) !important; }
.border-teal-400 { border-color: var(--trek-green) !important; }
.bg-teal-500, .bg-teal-400 { background-color: var(--trek-green) !important; }
.text-teal-600 { color: var(--trek-green) !important; }
.bg-teal-100  { background-color: var(--sage) !important; }
.bg-teal-200  { background-color: #c8dfc0 !important; }

/* ── Itinerary accordion ── */
.itinerary-day-badge { background: var(--navy) !important; }
.itinerary-open svg  { color: var(--trek-green) !important; }

/* ── Star ratings ── */
.text-amber-400, .text-amber-500 { color: #f59e0b !important; } /* keep gold stars */

/* ── Map section ── */
.map-section-icon { color: var(--trek-green) !important; }

/* ── Mobile nav ── */
#mobileMenu {
    background: rgba(7,28,48,.97) !important;
}

/* ── Footer social hover ── */
footer a:hover .social-icon { color: #a8d48a !important; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--page-bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy); }

/* ── Warm Cream Theme Overrides ── */
/* Page background already set via --page-bg: #F6F5EF */

/* Gray backgrounds → warm cream tone */
.bg-gray-50  { background-color: #F6F5EF !important; }
.bg-gray-100 { background-color: #EDE6DF !important; }
.bg-gray-200 { background-color: #E2D8CF !important; }

/* Borders → warm tone */
.border-gray-100 { border-color: #E8DDD5 !important; }
.border-gray-200 { border-color: #DCCFC5 !important; }

/* White cards stay white for contrast against warm bg */
.bg-white {
    background-color: #FFFFFF !important;
    border-color: #E8DDD5;
}

/* Text color warm adjustment */
.text-gray-500 { color: #78716C !important; }
.text-gray-600 { color: #57534E !important; }
.text-gray-400 { color: #A8A29E !important; }