/* =========================================================
   JOURNEY JUNCTION — CENTRALIZED BRAND COLOR SYSTEM
   Primary Forest Green: #056839
   Dark Forest Green: #034D2A
   Secondary Earth Brown: #764C29
   Dark Brown: #58371F
   Primary Gold / Safari Gold: #FCB040
   Dark Gold: #D99018
   Light Green: #EAF4EE
   Light Brown: #F3EAE2
   Warm Cream: #F8F7F2
   White: #FFFFFF
   Primary Text: #1F2933
   Secondary Text: #667085
   Borders: #D8E2DC
   ========================================================= */

:root {
    --jj-green: #056839;
    --jj-green-dark: #034D2A;
    --jj-brown: #764C29;
    --jj-brown-dark: #58371F;
    --jj-gold: #FCB040;
    --jj-gold-dark: #D99018;
    --jj-green-light: #EAF4EE;
    --jj-brown-light: #F3EAE2;
    --jj-cream: #F8F7F2;
    --jj-white: #FFFFFF;
    --jj-text: #1F2933;
    --jj-muted: #667085;
    --jj-border: #D8E2DC;

    /* Override Elementor & Theme Global Colors */
    --e-global-color-primary: var(--jj-green) !important;
    --e-global-color-secondary: var(--jj-brown) !important;
    --e-global-color-text: var(--jj-text) !important;
    --e-global-color-accent: var(--jj-gold) !important;
    --primary-color1: var(--jj-green) !important;
    --primary-color2: var(--jj-green) !important;
    --primary-color3: var(--jj-green) !important;
    --primary-color4: var(--jj-green) !important;
}


/* =========================================================
   1. GENERAL BASE & TYPOGRAPHY
   ========================================================= */

body {
    color: var(--jj-text) !important;
    background-color: var(--jj-white) !important;
    font-family: inherit;
}

main, .elementor-location-content {
    background-color: var(--jj-white);
}

a {
    color: var(--jj-green) !important;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease !important;
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--jj-gold-dark) !important;
}


/* =========================================================
   2. HEADINGS HIERARCHY
   ========================================================= */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.section-title,
.entry-title {
    color: var(--jj-green) !important;
}

h1 strong, h2 strong, h3 strong, h4 strong,
.sub-title, .subtitle, .section-subtitle,
.section-title span.accent-text,
.highlight-text {
    color: var(--jj-brown) !important;
}

p, body, li, label, div {
    color: var(--jj-text);
}

.text-muted, .muted-text, .post-meta, .meta-data, .description,
.elementor-post__excerpt, .tour-excerpt {
    color: var(--jj-muted) !important;
}


/* =========================================================
   3. HEADER & NAVIGATION
   ========================================================= */

header,
.site-header,
.main-header,
.header-section,
.header-area {
    background-color: var(--jj-white) !important;
    border-bottom: 1px solid var(--jj-border);
}

/* Nav links default state */
header .main-menu > ul > li > a,
.site-header .main-menu > ul > li > a,
.navigation a,
.main-navigation a,
.menu-item a {
    color: var(--jj-green) !important;
    font-weight: 600;
}

/* Nav links hover state */
header .main-menu > ul > li > a:hover,
.site-header .main-menu > ul > li > a:hover,
.navigation a:hover,
.main-navigation a:hover {
    color: var(--jj-gold-dark) !important;
}

/* Nav links active state */
header .main-menu > ul > li.current-menu-item > a,
header .main-menu > ul > li.current_page_item > a,
header .main-menu > ul > li.current-menu-ancestor > a,
.current-menu-item > a,
.current_page_item > a,
.current-menu-ancestor > a {
    color: var(--jj-gold) !important;
}

/* Dropdown sub-menu */
header .sub-menu,
header .main-menu ul li ul {
    background-color: var(--jj-white) !important;
    border-top: 3px solid var(--jj-gold) !important;
    box-shadow: 0 10px 25px rgba(3, 77, 42, 0.12) !important;
}

header .sub-menu li a,
header .main-menu ul li ul li a {
    color: var(--jj-green) !important;
}

header .sub-menu li a:hover,
header .main-menu ul li ul li a:hover {
    color: var(--jj-gold-dark) !important;
    background-color: var(--jj-green-light) !important;
}


/* =========================================================
   4. HERO SECTION
   ========================================================= */

.hero-section,
.hero-wrapper,
.home-hero,
.elementor-section.hero-banner {
    position: relative;
}

/* Subtle Forest-Green Overlay replacing generic black */
.hero-overlay,
.overlay-hero,
.hero-section::before,
.hero-banner::before {
    background: rgba(3, 77, 42, 0.70) !important;
}

.hero-section h1,
.hero-section h2,
.hero-banner h1,
.hero-banner h2 {
    color: var(--jj-white) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-section p,
.hero-banner p {
    color: var(--jj-cream) !important;
}

/* Hero Primary CTA */
.hero-section .primary-btn,
.hero-section .btn-primary,
.hero-banner .elementor-button {
    background-color: var(--jj-gold) !important;
    color: var(--jj-green-dark) !important;
    border: 2px solid var(--jj-gold) !important;
    font-weight: 700;
}

.hero-section .primary-btn:hover,
.hero-section .btn-primary:hover,
.hero-banner .elementor-button:hover {
    background-color: var(--jj-green) !important;
    color: var(--jj-white) !important;
    border-color: var(--jj-green) !important;
}

/* Hero Secondary CTA */
.hero-section .secondary-btn,
.hero-section .btn-secondary,
.hero-banner .btn-outline {
    background-color: transparent !important;
    color: var(--jj-white) !important;
    border: 2px solid var(--jj-white) !important;
    font-weight: 600;
}

.hero-section .secondary-btn:hover,
.hero-section .btn-secondary:hover,
.hero-banner .btn-outline:hover {
    background-color: var(--jj-gold) !important;
    color: var(--jj-green-dark) !important;
    border-color: var(--jj-gold) !important;
}


/* =========================================================
   5. BUTTON SYSTEM
   ========================================================= */

/* PRIMARY CTA: Gold Background, Dark Green Text */
.btn-primary,
.primary-btn,
.primary-btn1,
.jj-btn-primary,
.jj-gold-btn,
a.jj-gold-btn,
.elementor-button--type-primary {
    background-color: var(--jj-gold) !important;
    color: var(--jj-green-dark) !important;
    border: 2px solid var(--jj-gold) !important;
    font-weight: 700 !important;
    border-radius: 4px;
    padding: 12px 28px;
    display: inline-block;
    transition: all 0.25s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary:hover,
.primary-btn:hover,
.primary-btn1:hover,
.jj-btn-primary:hover,
.jj-gold-btn:hover,
a.jj-gold-btn:hover,
.elementor-button--type-primary:hover,
.primary-btn1:hover span {
    background-color: var(--jj-green) !important;
    color: var(--jj-white) !important;
    border-color: var(--jj-green) !important;
}

/* SECONDARY CTA: Forest Green Background, White Text */
.btn-secondary,
.secondary-btn,
.jj-btn-secondary,
.jj-green-btn,
a.jj-green-btn,
.elementor-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"] {
    background-color: var(--jj-green) !important;
    color: var(--jj-white) !important;
    border: 2px solid var(--jj-green) !important;
    font-weight: 600 !important;
    border-radius: 4px;
    padding: 12px 28px;
    display: inline-block;
    transition: all 0.25s ease !important;
}

.btn-secondary:hover,
.secondary-btn:hover,
.jj-btn-secondary:hover,
.jj-green-btn:hover,
a.jj-green-btn:hover,
.elementor-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--jj-gold) !important;
    color: var(--jj-green-dark) !important;
    border-color: var(--jj-gold) !important;
}

/* SECONDARY EARTH BROWN BUTTON OPTION */
.jj-brown-btn,
a.jj-brown-btn {
    background-color: var(--jj-brown) !important;
    color: var(--jj-white) !important;
    border: 2px solid var(--jj-brown) !important;
}

.jj-brown-btn:hover,
a.jj-brown-btn:hover {
    background-color: var(--jj-green) !important;
    color: var(--jj-white) !important;
    border-color: var(--jj-green) !important;
}


/* =========================================================
   6. SECTION BACKGROUNDS & RHYTHM
   ========================================================= */

/* Default section background */
.section-white,
.bg-white {
    background-color: var(--jj-white) !important;
}

/* Warm Cream section background */
.section-cream,
.bg-cream,
.jj-cream-section,
.egns-bg-cream {
    background-color: var(--jj-cream) !important;
}

/* Light Green section background */
.section-light-green,
.bg-light-green,
.jj-light-green-section {
    background-color: var(--jj-green-light) !important;
}

/* Occasional Forest Green section */
.section-green,
.bg-green,
.jj-green-section {
    background-color: var(--jj-green) !important;
    color: var(--jj-white) !important;
}

.section-green h1,
.section-green h2,
.section-green h3,
.section-green h4,
.jj-green-section h1,
.jj-green-section h2,
.jj-green-section h3,
.jj-green-section h4 {
    color: var(--jj-white) !important;
}

.section-green p,
.jj-green-section p {
    color: var(--jj-cream) !important;
}

/* Occasional Earth Brown section */
.section-brown,
.bg-brown,
.jj-brown-section {
    background-color: var(--jj-brown) !important;
    color: var(--jj-white) !important;
}

.section-brown h1,
.section-brown h2,
.section-brown h3,
.section-brown h4,
.jj-brown-section h1,
.jj-brown-section h2,
.jj-brown-section h3,
.jj-brown-section h4 {
    color: var(--jj-white) !important;
}


/* =========================================================
   7. TOUR / SAFARI / DESTINATION CARDS
   ========================================================= */

.tour-card,
.tour-item,
.package-card,
.package-item,
.destination-card,
.destination-item,
.service-card,
.service-box,
.service-item {
    background: var(--jj-white) !important;
    border: 1px solid var(--jj-border) !important;
    border-radius: 8px;
    transition: all 0.3s ease !important;
    overflow: hidden;
}

.tour-card:hover,
.tour-item:hover,
.package-card:hover,
.package-item:hover,
.destination-card:hover,
.destination-item:hover,
.service-card:hover,
.service-box:hover,
.service-item:hover {
    border-color: var(--jj-gold) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(5, 104, 57, 0.12) !important;
}

.tour-card h3,
.tour-card h4,
.package-card h3,
.package-card h4,
.destination-card h3,
.destination-card h4,
.service-card h3,
.service-card h4 {
    color: var(--jj-green) !important;
}

.tour-card p,
.package-card p,
.destination-card p,
.service-card p {
    color: var(--jj-muted) !important;
}

/* Tour Price Highlight */
.price,
.tour-price,
.package-price,
.amount,
.price-tag {
    color: var(--jj-green) !important;
    font-weight: 800 !important;
}

/* Badges & Tags */
.badge,
.tag,
.tour-badge,
.package-badge,
.category-badge,
.featured-badge {
    background-color: var(--jj-gold) !important;
    color: var(--jj-green-dark) !important;
    font-weight: 700 !important;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    text-transform: uppercase;
}


/* =========================================================
   8. FORMS & INPUTS
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select,
.wpcf7-form-control,
.form-control {
    background-color: var(--jj-white) !important;
    border: 1px solid var(--jj-border) !important;
    color: var(--jj-text) !important;
    border-radius: 4px;
    padding: 10px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus,
.wpcf7-form-control:focus,
.form-control:focus {
    border-color: var(--jj-green) !important;
    box-shadow: 0 0 0 4px rgba(5, 104, 57, 0.12) !important;
    outline: none !important;
}

label,
.wpcf7 label,
.form-label {
    color: var(--jj-text) !important;
    font-weight: 600;
}

.required,
.wpcf7-form-control-wrap .required,
span.required {
    color: var(--jj-gold) !important;
}

/* Submit Buttons in Forms */
.wpcf7-submit,
form button[type="submit"],
form input[type="submit"] {
    background-color: var(--jj-green) !important;
    color: var(--jj-white) !important;
    border: 2px solid var(--jj-green) !important;
    font-weight: 700 !important;
}

.wpcf7-submit:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover {
    background-color: var(--jj-gold) !important;
    color: var(--jj-green-dark) !important;
    border-color: var(--jj-gold) !important;
}


/* =========================================================
   9. ICONS & FEATURE CONTAINERS
   ========================================================= */

.feature-icon,
.service-icon,
.icon-box,
.icon-container,
.jj-feature-icon {
    background-color: var(--jj-green-light) !important;
    color: var(--jj-green) !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease !important;
}

.feature-icon:hover,
.service-icon:hover,
.icon-box:hover,
.jj-feature-icon:hover {
    background-color: var(--jj-gold) !important;
    color: var(--jj-green-dark) !important;
}

.feature-icon i,
.service-icon i,
.icon-box i,
.icon-container i {
    color: var(--jj-green);
}

.feature-icon:hover i,
.service-icon:hover i,
.icon-box:hover i {
    color: var(--jj-green-dark);
}

/* Selected Highlight Icons */
.gold-icon,
.accent-icon,
i.gold,
i.accent {
    color: var(--jj-gold) !important;
}


/* =========================================================
   10. FOOTER & COPYRIGHT
   ========================================================= */

footer,
.site-footer,
.footer-section,
.footer-area {
    background-color: var(--jj-green-dark) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.site-footer h3, .site-footer h4,
.footer-widget-title,
.footer-title {
    color: var(--jj-gold) !important;
}

footer p, footer span, footer div, footer li {
    color: rgba(255, 255, 255, 0.85);
}

footer a,
.site-footer a,
.footer-section a {
    color: rgba(255, 255, 255, 0.85) !important;
}

footer a:hover,
.site-footer a:hover,
.footer-section a:hover {
    color: var(--jj-gold) !important;
}

/* Footer Bottom / Copyright Bar */
.footer-bottom,
.copyright,
.copyright-area,
.footer-copyright {
    background-color: var(--jj-brown-dark) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom a,
.copyright a {
    color: var(--jj-gold) !important;
}

.footer-bottom a:hover,
.copyright a:hover {
    color: var(--jj-white) !important;
}


/* =========================================================
   11. BACK TO TOP & CONTACT BUTTONS
   ========================================================= */

.scroll-top,
.back-to-top,
.progress-wrap {
    background-color: var(--jj-green) !important;
    border: 2px solid var(--jj-gold) !important;
}

.scroll-top:hover,
.back-to-top:hover,
.progress-wrap:hover {
    background-color: var(--jj-gold) !important;
}

.scroll-top svg path,
.progress-wrap svg path,
.progress-wrap .arrow path {
    fill: var(--jj-white);
}

.scroll-top:hover svg path,
.progress-wrap:hover svg path,
.progress-wrap:hover .arrow path {
    fill: var(--jj-green-dark);
}