/* ==================================================
   FANSASSY SAFARIS THEME - style.css
   Author: Joshua Mshambala
   Version: 1.0
   Description: Stylesheet for Fansassy Safaris 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: Fansassy Safaris
 * Theme URI: www.fansassysafaris.com
 * Author: Joshua Mshambala
 * Author URI: www.fansassysafaris.com
 * Description: A custom WordPress theme for fansassy safaris, focusing on 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: fansassy-safaris
 *
 * This is the main stylesheet for the Fansassy Safaris Theme.
 * All styles have been updated for the new brand identity.
 */

/* 🌿 GLOBAL VARIABLES - UPDATED FOR FANSASSY SAFARIS BRAND */
:root {
    /* New Colors */
    --color-primary-red: #E70001; /* Warm, earthy red for a cultural feel - Changed to rastafarian red */
    --color-dark-green: #008542; /* Deep, natural green for a complementary feel - Changed to rastafarian green */
    --color-golden-yellow: #FFE000; /* Golden yellow for accents and highlights - Changed to rastafarian gold  */
    --color-charcoal: #362C1D; /* Dark charcoal for headings and main text - Changed to cured vanilla */
    --color-light-gray: #EAECEE; /* Light gray for backgrounds and dividers */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Shadows & Borders */
    --box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    --border-radius: 12px;

    /* Spacing */
    --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 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--color-white);
    color: var(--color-charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    margin: 0 0 var(--space-sm);
    color:#0082FC; /*Bluetooth icon color*/
    line-height: 1.2;
    margin-top: 1em;
}

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:#990000;/* 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 {
    /*
     * The `width` and `height` properties set the size of the logo.
     * `max-width` ensures it doesn't get too large on big screens.
     */
    
   max-width: 600px;
   height: auto;
    /*
     * `object-fit: contain` ensures the image scales down to fit the container without being cropped.
     */
    object-fit: contain;
    margin-right: 15px;
    /*
     * Adds a red box-shadow and background color as requested.
     */
    box-shadow: 0 0 0 5px #990000;
    background-color: #990000;
    /*
     * A transition for a smooth hover effect.
     */
    transition: transform 0.3s ease-in-out;
}

/*
 * Styles for the logo on hover.
 */
.site-branding img:hover {
    /*
     * This increases the size of the logo by 10% when a user hovers over it.
     */
    transform: scale(1.1);
}

/* Add more theme styles below this line */
.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;
    background-color: var(--color-dark-green); /* UPDATED */
    border-radius: 50px;
    padding: 5px 15px;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    background-color: var(--color-dark-green); /* UPDATED */
    color: var(--color-white); /* UPDATED */
    padding: 10px 20px;
    border-radius: 40px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
    display: block;
}

.main-navigation a:hover {
    background-color: var(--color-charcoal); /* UPDATED */
}

/* Submenu styling */
.main-navigation ul ul {
    display: none;
    position: absolute;
    background-color: var(--color-white);
    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: var(--color-charcoal); /* UPDATED */
    color: var(--color-white); /* UPDATED */
    position: relative;
    overflow: hidden;
    background-image: url('assets/images/hero-section-background.JPG');
    background-size: cover;
    background-position: center;
}

.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 {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
    }
}

@media (min-width: 1024px) {
    .hero-panels-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
    .hero-main-content {
        margin-bottom: var(--space-xxl);
    }
}

/* 🃏 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;
  }
}