/* ==================================================
   Vanilla Coffee Farm Lodges THEME - style.css
   Author: Joshua Mshambala
   Version: 1.0
   Description: Stylesheet for Vanila Coffee Farm Lodges WordPress Theme
   ==================================================
   TABLE OF CONTENTS
   1. CSS Variables (Colors, Spacing, Typography)
   2. Global Resets & Base Styles
   3. Typography & Headings
   4. Utility Classes
   5. Layout & Grid Helpers
   6. Header & Navigation
   7. Hero Section
   8. Front Page Panels
   9. Safari Sections
   10. Mountain Climbing Sections
   11. Cultural Tours Sections
   12. Footer
   13. Gutenberg Block Styles
   14. Media Queries (Responsive Design)
   15. Print Styles
   ==================================================
*/

/*
 * Theme Name: Vanilla Coffee Farm Lodges
 * Theme URI: # (to be set later)
 * Author: Joshua Mshambala
 * Author URI: # (to be set later)
 * Description: A custom WordPress theme for Arusha Cultural Tours, focusing on authentic cultural, wildlife safari, and mountain climbing experiences in Tanzania.
 * Version: 1.0.0
 * Requires at least: 5.8
 * Tested up to: 6.5
 * Requires PHP: 7.4
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: arusha-cultural-tours
 *
 * This is the main stylesheet for the Arusha Cultural Tours Theme.
 * All styles have been updated for the new brand identity.
 */

/* 🌿 GLOBAL VARIABLES - UPDATED FOR VANILLA-COFFEE-FARM-LODGE BRAND */
:root {
    /* New Colors Mapped to Existing Variables */
    --color-primary-red: #CC6600; /* Turmeric: Links, High-Contrast Accents */
    --color-dark-green: #6F4E37; /* Fried Coffee: Header/Footer BG, Primary BG Color */
    --color-golden-yellow: #F1C40F; /* Golden Yellow: Headings, Header Text */
    --color-charcoal: #362C1D; /* Cured Vanilla: Main Button BG, Heading/Primary Text (Original Use) */
    --color-light-gray: #EAECEE; /* Light gray for backgrounds and dividers (Kept) */
    --color-white: #ffffff;
    --color-black: #000000; /* Black: Main body content text (Specific override) */

    /* Shadows & Borders (Unchanged) */
    --box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    --border-radius: 12px;
    
    /* Spacing (Unchanged) */
    --space-xs: 0.5rem; /* 8px */
    --space-sm: 1rem;   /* 16px */
    --space-md: 1.5rem; /* 24px */
    --space-lg: 2rem;   /* 32px */
    --space-xl: 3rem;   /* 48px */
    --space-xxl: 4rem;  /* 64px */
}
/* Basic Reset for cross-browser consistency */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

/* ✒️ BASE TYPOGRAPHY & BODY */
body {
    /* ... other styles ... */
    /* CHANGE: Use --color-black for all main body content */
    color: var(--color-black); 
}

h1, h2, h3, h4, h5, h6 {
    /* ... other styles ... */
    /* CHANGE: Use --color-golden-yellow for all headings */
    color: var(--color-golden-yellow); 
    /* ... other styles ... */
}

h1 { font-size: 2.8em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }

p {
    margin: 0 0 1em;
}

a {
    color: var(--color-primary-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, a:focus {
    color: var(--color-dark-green);
    text-decoration: underline;
}

/* --- 3. Layout: General --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-sm);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-md);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-lg);
    }
}

.content-area {
    padding-top: calc(var(--space-xl) + 100px);
    padding-bottom: var(--space-xl);
}

.site-main {
    padding: var(--space-lg) 0;
}

/* 🧭 HEADER & NAVIGATION */
.site-header {
    background-color:#6F4E37; /* UPDATED */
    padding: var(--space-sm) var(--space-md);
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.2); /* UPDATED */
    margin-bottom: 10px;
}

.header-widget-area {
    font-size: 0.85em;
    color: var(--color-white); /* UPDATED */
}

.header-widget-area-left .contact-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.header-widget-area-left .contact-info .contact-item a {
    color: var(--color-golden-yellow); /* UPDATED */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-widget-area-left .contact-info .contact-item a:hover {
    color: var(--color-white); /* UPDATED */
    text-decoration: none;
}

.header-widget-area-left, .header-widget-area-right {
    flex: 1;
}

.header-widget-area-center {
    flex: 2;
    text-align: center;
}

.header-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.site-branding {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.site-branding img {
    width: 100%;
    height: auto;
    max-width: 200px;
    object-fit: contain;
    margin-right: 15px;
    box-shadow: 0 0 0 5px var(--color-primary-red); /* UPDATED */
    background-color: var(--color-primary-red); /* UPDATED */
}

.site-title {
    margin: 0;
    font-size: 1.8em;
    line-height: 1;
}

.site-title a {
    color: var(--color-white); /* UPDATED */
    text-decoration: none;
}

.site-description {
    font-size: 2em;
    color: var(--color-golden-yellow); /* UPDATED */
    margin-bottom: 0.5em;
    line-height: 1.1;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: var(--color-dark-green); /* UPDATED */
    border: none;
    font-size: 2em;
    cursor: pointer;
    padding: 10px;
    color: var(--color-white); /* UPDATED */
    transition: color 0.3s ease;
    outline: none;
}

.menu-toggle:hover {
    color: var(--color-golden-yellow); /* UPDATED */
}

.menu-toggle .icon-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-white); /* UPDATED */
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

.menu-toggle.toggled-on .icon-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.toggled-on .icon-bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.toggled-on .icon-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.main-navigation {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    /* Was: #FF850F (Turmeric color) */
    background-color: var(--color-primary-red); 
    border-radius: 50px;
    padding: 5px 15px;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    /* Was: #FF850F (Turmeric color) */
    background-color: var(--color-primary-red); 
    /* Was: #2F241E (Roasted coffee color) */
    color: var(--color-charcoal); /* Use Cured Vanilla for strong contrast */
    padding: 10px 20px;
    border-radius: 40px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
    display: block;
}

.main-navigation a:hover {
    /* Was: #F1C40F (Golden Yellow) */
    background-color: var(--color-golden-yellow);
}

/* Submenu styling */
.main-navigation ul ul {
    display: none;
    position: absolute;
    background-color:#FF850F;
    min-width: 200px;
    box-shadow: var(--box-shadow);
    z-index: 99;
    top: 100%;
    left: 0;
    flex-direction: column;
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 0;
}

.main-navigation ul ul li {
    border-bottom: 1px solid var(--color-light-gray);
}

.main-navigation ul ul li:last-child {
    border-bottom: none;
}

.main-navigation ul ul a {
    padding: 12px 20px;
    font-size: 0.95em;
    color: var(--color-charcoal);
    font-weight: 400;
    border-radius: 0;
}

.main-navigation ul ul a:hover, .main-navigation ul ul a:focus {
    background-color: var(--color-light-gray);
    color: var(--color-dark-green);
}

.main-navigation li:hover > ul, .main-navigation li.focus > ul {
    display: flex;
}

.main-navigation .menu-item-has-children > a {
    position: relative;
    padding-right: 35px;
}

.main-navigation .submenu-indicator {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: var(--color-golden-yellow); /* UPDATED */
    pointer-events: none;
}

.main-navigation li.open-submenu > a .submenu-indicator {
    transform: translateY(-50%) rotate(180deg);
}

.header-call-to-action-wrapper {
    margin-left: var(--space-md);
}

.header-call-to-action-wrapper .widget {
    margin: 0;
}

/* Responsive Header */
@media (max-width: 768px) {
    .header-top-bar {
        flex-direction: column;
        text-align: center;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .header-widget-area {
        margin-bottom: 5px;
    }
    .header-main-row {
        flex-direction: column;
        text-align: center;
    }
    .site-branding {
        justify-content: center;
        margin-bottom: var(--space-sm);
        flex-wrap: wrap;
    }
    .site-branding img {
        max-width: 70%;
        margin-right: 0;
    }
    .menu-toggle {
        display: block;
        order: -1;
        margin-bottom: var(--space-sm);
    }
    .main-navigation {
        flex-direction: column;
        align-items: center;
        width: 100%;
        display: block;
    }
    .main-navigation ul {
        flex-direction: column;
        display: none;
        width: 100%;
        background-color: var(--color-charcoal); /* UPDATED */
        border-top: 1px solid var(--color-light-gray);
        border-radius: 0;
        padding: 0;
    }
    .main-navigation li {
        border-bottom: 1px solid var(--color-light-gray);
        width: 100%;
    }
    .main-navigation ul ul {
        position: static;
        box-shadow: none;
        width: 100%;
        background-color: var(--color-charcoal); /* UPDATED */
        padding-left: var(--space-sm);
    }
    .main-navigation ul ul a {
        padding-left: var(--space-lg);
        color: var(--color-white); /* UPDATED */
    }
    .main-navigation li.focus > ul {
        display: none;
    }
    .main-navigation li.open-submenu > ul {
        display: flex;
    }
    .header-call-to-action-wrapper {
        margin-left: 0;
        margin-top: var(--space-sm);
        width: 100%;
        text-align: center;
    }
}

/* --- 5. Layout: Hero Section (from front-page.php) */
.hero-panels-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl) var(--space-sm);
    background-color:#7B3F00; /* Chocolate brown */
	background-image: none; 
	min-height: 80vh; 
    color: var(--color-white); /* UPDATED */
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
	background-repeat: no-repeat;
	z-index: 1; 
}


/* Also, check the overlay opacity */
.hero-overlay {
    /* If you set the background color to be the final color, the overlay should be transparent (or removed) */
    opacity: 0; 
    /* The overlay might also be set to a dark color by default, if so: */
    background-color: transparent; 
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-main-content {
    max-width: 800px;
    margin-bottom: var(--space-xl);
    z-index: 2;
}

.hero-panels-container .hero-main-content h1 {
    font-size: 3.5em;
    color: var(--color-white); /* UPDATED */
    margin-bottom: 0.5em;
    line-height: 1.1;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

.hero-main-content p {
    font-size: 1.3em;
    opacity: 0.9;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.hero-buttons {
    margin-top: var(--space-md);
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.hero-buttons .button {
    min-width: 180px;
}

.hero-panels-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    width: 100%;
    max-width: 1000px;
    z-index: 2;
    padding: var(--space-md) 0;
}

.panel {
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    max-width: 320px;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.panel:hover {
    transform: translateY(-5px);
}

.panel-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.panel-content {
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.panel-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
    margin-bottom: var(--space-xs);
    color: var(--color-charcoal);
    margin-top: 0;
}

.panel-content p {
    font-size: 0.95em;
    line-height: 1.5;
    flex-grow: 1;
}

.panel-content .button {
    margin-top: auto;
    width: 100%;
}

@media (min-width: 768px) {
    .hero-panels-wrapper {
        /*
         * FIX: Explicitly setting the layout to grid
         * ensures it overrides the default flex.
         * The base layout will be handled by the flex fallback/stacking.
        */
        display: grid; 
        grid-template-columns: repeat(2, 1fr);
        /* Keep existing gap rules if needed: gap: var(--space-md); */
    }
}
/* Ensure the 3-column layout is correct for very large screens */
@media (min-width: 1024px) {
    .hero-panels-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 🃏 SAFARI SCROLL CARDS */
.safari-scroll-section {
    background-color: var(--color-light-gray); /* UPDATED */
    padding: var(--space-xl) var(--space-md);
    text-align: center;
}

.section-heading {
    font-size: 2rem;
    margin-bottom: var(--space-lg);
    color: var(--color-primary-red); /* UPDATED */
    font-family: 'Playfair Display', serif;
}

.safari-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
}

.safari-card {
    flex: 0 0 auto;
    width: 280px;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    scroll-snap-align: start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.safari-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* 🖼️ SAFARI CARD IMAGERY & BUTTONS */
.safari-card-image {
    width: 100%;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    object-fit: cover;
    height: 200px;
    display: block;
}

.safari-card-content {
    padding: var(--space-sm) var(--space-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.safari-card-content h3 {
    font-size: 1.4em;
    margin-bottom: var(--space-xs);
    color: var(--color-charcoal);
    margin-top: 0;
}

.entry-summary {
    font-size: 0.95em;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
    flex-grow: 1;
}

.safari-button {
    display: inline-block;
    background-color: var(--color-primary-red); /* UPDATED */
    color: var(--color-white); /* UPDATED */
    padding: 10px 18px;
    border-radius: 40px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: auto;
    border: none;
    cursor: pointer;
}

.safari-button:hover {
    background-color: var(--color-dark-green); /* UPDATED */
    color: var(--color-white);
}


/* 🏔 MOUNTAIN CLIMBING ROUTE CARDS */
.mountain-routes {
    padding: var(--space-xl) var(--space-sm);
    text-align: center;
    background-color: var(--color-white); /* UPDATED */
}

.mountain-routes h2 {
    font-size: 2.5em;
    margin-bottom: var(--space-lg);
    color: var(--color-charcoal);
}

.route-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    margin-top: var(--space-md);
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.route-card {
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.route-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.route-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.route-card-text-content {
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.route-card h3 {
    font-size: 1.5em;
    color: var(--color-charcoal);
    margin: var(--space-sm) 0;
}

.route-card p {
    font-size: 0.95em;
    margin-bottom: var(--space-sm);
    flex-grow: 1;
}

.route-card .button {
    display: block;
    width: fit-content;
    margin: 0 auto var(--space-md);
}

.see-more-button {
    background-color: var(--color-dark-green); /* UPDATED */
    color: var(--color-white);
    padding: 15px 40px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
}

.see-more-button:hover {
    background-color: var(--color-charcoal); /* UPDATED */
    transform: translateY(-2px);
}

/* --- 6. Layout: Header Banner */
.site-banner {
    position: relative;
    width: 100%;
    min-height: 200px;
    background-color: var(--color-charcoal); /* UPDATED */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    padding: 40px 20px;
    margin-bottom: var(--space-lg);
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.site-banner .container {
    position: relative;
    z-index: 2;
}

.banner-title {
    font-family: 'Playfair Display', serif; /* UPDATED from var(--font-heading) to explicit font */
    font-size: 3em;
    color: var(--color-white);
    margin-bottom: 10px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

.banner-subtitle {
    font-family: 'Open Sans', sans-serif; /* UPDATED from var(--font-body) to explicit font */
    font-size: 1.5em;
    color: #eee;
    margin-bottom: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

/* Responsive adjustments for banner */
@media (max-width: 767px) {
    .site-banner {
        min-height: 150px;
        padding: 30px 15px;
        margin-bottom: var(--space-md);
    }
    .banner-title {
        font-size: 2em;
    }
    .banner-subtitle {
        font-size: 1.1em;
    }
}

@media (min-width: 1024px) {
    .site-banner {
        min-height: 250px;
    }
    .banner-title {
        font-size: 3.5em;
    }
    .banner-subtitle {
        font-size: 1.8em;
    }
}

/* 🔚 FOOTER WIDGETS & PAGINATION */
#site-footer {
    background-color: var(--color-dark-green); /* UPDATED */
    color: var(--color-white); /* UPDATED */
    padding: var(--space-lg) 0;
    text-align: center;
}

#site-footer p {
    margin: 0;
    font-size: 0.9em;
    opacity: 0.9;
}

.footer-widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: var(--color-dark-green); /* UPDATED */
    color: var(--color-white); /* UPDATED */
    margin-bottom: var(--space-lg);
    text-align: left;
}

/* Basic styling for individual widget columns */
.footer-widget-column {
    /* Add any specific styling for each column here if needed */
}

/* Styling for widget titles within the footer columns */
.footer-widgets-grid .widget-title {
    color: var(--color-white);
    font-size: 1.2em;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 10px;
}

/* Styling for unordered lists within footer widgets */
.footer-widgets-grid .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widgets-grid .widget ul li {
    margin-bottom: 8px;
}

/* Styling for links within footer widgets */
.footer-widgets-grid .widget ul li a {
    color: var(--color-white);
    transition: color 0.3s ease;
}

.footer-widgets-grid .widget ul li a:hover {
    color: var(--color-golden-yellow); /* UPDATED */
    text-decoration: underline;
}

/* Ensure existing footer navigation and social links are visually separated from widgets */
#footer-navigation {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1); /* UPDATED */
}

.footer-social-links {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1); /* UPDATED */
}

/* Ensure site-info (copyright) is centered and visually distinct */
#site-footer .site-info {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1); /* UPDATED */
    margin-top: 20px;
    color: var(--color-white);
}

/* --- 8. General Content / Page Styles */
.entry-header {
    margin-bottom: var(--space-md);
    text-align: center;
}

.entry-title {
    margin-top: 0;
    font-size: 2.5em;
    color: var(--color-charcoal);
}

.page-title {
    font-size: 2.8em;
    margin-bottom: var(--space-lg);
    text-align: center;
    color: var(--color-charcoal);
}

.entry-meta {
    font-size: 0.9em;
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
}

.entry-meta a {
    color: var(--color-charcoal);
}

.post-thumbnail {
    margin-bottom: var(--space-lg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.entry-content {
    margin-bottom: var(--space-lg);
}

.entry-content p {
    margin-bottom: 1em;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--space-md) auto;
    border-radius: var(--border-radius);
}

.entry-footer {
    font-size: 0.85em;
    color: var(--color-charcoal);
    border-top: 1px solid var(--color-light-gray);
    padding-top: var(--space-sm);
    margin-top: var(--space-md);
}

.entry-footer a {
    color: var(--color-charcoal);
}

/* Comments Section */
.comments-area {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.comments-title {
    font-size: 2em;
    margin-bottom: var(--space-md);
    color: var(--color-charcoal);
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-body {
    border-bottom: 1px solid var(--color-light-gray);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
}

.comment-body:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.comment-author .avatar {
    border-radius: 50%;
    margin-right: 10px;
}

.comment-metadata {
    font-size: 0.8em;
    color: var(--color-charcoal);
}

.comment-content p {
    margin-top: 10px;
}

.reply {
    font-size: 0.9em;
    text-align: right;
}

.comment-form-comment label, .comment-form-author label,
.comment-form-email label, .comment-form-url label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* ✏️ FORM INPUTS & SEARCH FIELDS */
input[type="text"], input[type="email"],
input[type="search"], textarea {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    margin-bottom: var(--space-sm);
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--color-dark-green);
    box-shadow: 0 0 4px rgba(14, 102, 85, 0.4);
}

.form-submit input[type="submit"] {
    background-color: var(--color-dark-green);
    color: var(--color-white);
    padding: 12px 25px;
    font-weight: 600;
    text-align: center;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    border: none;
}

.form-submit input[type="submit"]:hover {
    background-color: var(--color-primary-red);
    transform: translateY(-2px);
}

/* 🚫 404 & EMPTY RESULT STYLES */
.no-results, .error-404 {
    text-align: center;
    padding: var(--space-xl) 0;
}

.error404 .page-content, .no-results .page-content {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}

.error404 h1, .no-results h1 {
    font-size: 2.5rem;
    color: var(--color-primary-red);
    margin-bottom: var(--space-md);
}

.error404 p, .no-results p {
    font-size: 1.2rem;
    color: var(--color-charcoal);
}

/* Search Form */
.search-form {
    display: flex;
    justify-content: center;
    margin-top: var(--space-md);
}

.search-form label {
    display: none;
}

.search-form .search-field {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    min-width: 250px;
}

.search-form .search-submit {
    padding: 12px 20px;
    background-color: var(--color-dark-green);
    color: var(--color-white);
    border: 1px solid var(--color-dark-green);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.search-form .search-submit:hover {
    background-color: var(--color-primary-red);
}

/* ⚙️ ADMIN BAR OFFSET FOR LOGGED-IN VIEW */
@media screen and (min-width: 782px) {
    .admin-bar .site-header {
        top: 32px;
    }
}

@media screen and (max-width: 781px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* 🔄 POST NAVIGATION & PAGERS */
.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--space-lg) 0;
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
}

.nav-previous, .nav-next {
    flex: 1;
    text-align: center;
}

.nav-subtitle {
    display: block;
    font-size: 0.85em;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xs);
}

.page-numbers {
    display: inline-block;
    margin: 0 var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-light-gray);
    color: var(--color-charcoal);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-numbers.current {
    background-color: var(--color-primary-red);
    color: var(--color-white);
}

.page-numbers:hover:not(.current) {
    background-color: #D5DBDB; /* Slightly darker light-gray */
    color: var(--color-charcoal);
}

/* 🎯 BUTTON STYLES */
.button {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 40px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
}

/* Specific button color classes - now using new colors */
.button.green {
    background-color: var(--color-dark-green);
    color: var(--color-white);
}

.button.black {
    background-color: var(--color-charcoal);
    color: var(--color-golden-yellow);
}

.button.light-red {
    background-color: var(--color-primary-red);
    color: var(--color-white);
}

.button.light-green {
    background-color: var(--color-dark-green);
    color: var(--color-white);
}

.button.light-yellow {
    background-color: var(--color-golden-yellow);
    color: var(--color-charcoal);
}

.button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* 📱 RESPONSIVE LAYOUT TWEAKS */
@media (max-width: 768px) {
    .panel, .route-card, .safari-card {
        width: 100%;
        max-width: 100%;
    }

    .safari-scroll-container {
        gap: var(--space-sm);
        padding: var(--space-sm);
    }

    .main-navigation {
        flex-direction: column;
        align-items: center;
    }

    .main-navigation a {
        margin-bottom: var(--space-xs);
    }

    .hero-panels-wrapper, .route-cards-container {
        flex-direction: column;
        align-items: center;
    }
}

/* ⚒️ UTILITY CLASSES & ACCESSIBILITY */
.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.text-center {
    text-align: center;
}

.bg-light {
    background-color: var(--color-light-gray);
}

.mt-sm {
    margin-top: var(--space-sm);
}

.mb-sm {
    margin-bottom: var(--space-sm);
}

.mt-md {
    margin-top: var(--space-md);
}

.mb-md {
    margin-bottom: var(--space-md);
}

/* --- New: Styles for 1 Day Lake Manyara Trip Page (re-colored) --- */
.trip-detail-section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-xl);
}

.trip-detail-section h2 {
    font-size: 2.2em;
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
    text-align: center;
    border-bottom: 2px solid var(--color-primary-red); /* UPDATED */
    padding-bottom: 10px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.trip-detail-section h3 {
    font-size: 1.6em;
    color: var(--color-dark-green); /* UPDATED */
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
}

.trip-intro p {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: var(--space-lg);
    text-align: justify;
}

.trip-highlights ul, .inclusions ul, .exclusions ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-lg);
}

.trip-highlights li, .inclusions li, .exclusions li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
    font-size: 1em;
    line-height: 1.5;
    color: var(--color-charcoal);
}

.trip-highlights li::before {
    content: '\2713';
    color: var(--color-dark-green); /* UPDATED */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.inclusions li::before {
    content: '\2713';
    color: var(--color-dark-green); /* UPDATED */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.exclusions li::before {
    content: '\2717';
    color: var(--color-primary-red); /* UPDATED */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.itinerary-item {
    background-color: var(--color-light-gray);
    padding: var(--space-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.itinerary-item h3 {
    color: var(--color-charcoal);
    margin-top: 0;
    margin-bottom: 10px;
}

.itinerary-item p {
    font-size: 0.95em;
    line-height: 1.6;
}

.trip-inclusions-exclusions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

@media (min-width: 768px) {
    .trip-inclusions-exclusions {
        grid-template-columns: repeat(2, 1fr);
    }
}

.inclusions, .exclusions {
    background-color: var(--color-light-gray);
    padding: var(--space-md);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.inclusions h2, .exclusions h2 {
    border-bottom: 2px solid var(--color-dark-green);
    color: var(--color-dark-green);
}

.exclusions h2 {
    border-bottom-color: var(--color-primary-red);
    color: var(--color-primary-red);
}

.trip-booking-cta {
    text-align: center;
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background-color: var(--color-dark-green);
    color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.trip-booking-cta h2 {
    color: var(--color-white);
    margin-bottom: var(--space-sm);
    border-bottom-color: rgba(255,255,255,0.3);
}

.trip-booking-cta p {
    font-size: 1.1em;
    opacity: 0.9;
    margin-bottom: var(--space-md);
}

.trip-booking-cta .button {
    background-color: var(--color-primary-red);
    color: var(--color-white);
}

.trip-booking-cta .button:hover {
    background-color: #a94500;
}
//* Lake duluti two photo card*//
/* Ensure Only the Active Slide Is Clickable*/
.hero-slideshow .slide {
  pointer-events: none;
}
.hero-slideshow .slide.active {
  pointer-events: auto;
}

/* Double-Check Slide Visibility*/
.hero-slideshow .slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}
.hero-slideshow .slide.active {
  opacity: 1;
  visibility: visible;
}

/* Add z-index for Safety*/
.hero-slideshow .slide {
  z-index: 0;
}
.hero-slideshow .slide.active {
  z-index: 1;
}

.two-photo-cards {
  padding: 40px 0;
  background-color: #f0f0f0;
  text-align: center;
  border-radius: 15px;
  margin: 20px auto;
  max-width: 1200px;
}

.two-photo-cards .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.two-photo-cards h2 {
  margin-bottom: 30px;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.two-photo-card {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* left image | center info | right image */
  gap: 20px;
  align-items: stretch;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-info {
  padding: 20px;
  text-align: left;
}

.card-info h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}

.card-info p {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.price-table {
  margin-bottom: 15px;
}

.price-table .tour-type {
  font-size: 0.95em;
  font-weight: bold;
  color: #E9A447ff;
  margin-bottom: 8px;
}

.price-table table {
  width: 100%;
  border-collapse: collapse;
  background: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.price-table th,
.price-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.price-table th {
  background: #f0f0f0;
  font-weight: bold;
}

.card-info .safari-link {
  display: inline-block;
  background-color: #E9A447ff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 15px;
}

.card-info .safari-link:hover {
  background-color: #d1903e;
}

/* Mobile friendly */
@media (max-width: 900px) {
  .two-photo-card {
    grid-template-columns: 1fr;
  }
  .card-photo {
    height: 220px;
  }
}

/* Masai trip card*/

/* Add to your theme's stylesheet to control the height of the card images. */

.route-card .image-wrapper {
    height: 1024px; /* Set to match your image's height */
    overflow: hidden;
}

.route-card .route-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px; /* This adds the rounded corners */
}

/* New CSS for the price container */
.route-card .price-container {
    margin-bottom: 15px; /* Adds space below the price */
    font-size: 1.25rem;
    font-weight: bold;
    color: #4A5568; /* A darker gray for contrast */
}

.route-card .price-label {
    margin-right: 5px;
    font-weight: normal;
    color: #718096; /* A lighter gray for the label */
}
/* Optional: Add this for responsive image height on smaller screens */
@media (max-width: 768px) {
    .route-card .image-wrapper {
        height: 500px; /* A slightly smaller height for mobile devices */
    }
}