/*
=========================================================
 TRAUM KENIA HOLIDAY SAFARIS
 GLOBAL WEBSITE CSS
 Maximum content width: 1500px
 Transparent Header + Hero Spacing Fix
 Version: 1.2
=========================================================

Upload to:
    /public_html/css/custom.css

Load LAST in:
    /public_html/includes/header.php

Use:
    <link rel="stylesheet" href="/css/custom.css?v=1.2">

=========================================================
*/

:root{
    --tk-max-width:1500px;
    --tk-desktop-gap:48px;
    --tk-tablet-gap:32px;
    --tk-mobile-gap:24px;

    --tk-brown:#3b2819;
    --tk-brown-dark:#281b12;
    --tk-dark:#241a13;
    --tk-gold:#c59136;
    --tk-gold-light:#e0b55e;
    --tk-green:#60725a;
    --tk-cream:#f6f0e6;
    --tk-white:#ffffff;
    --tk-text:#28302c;
    --tk-muted:#6d746f;
    --tk-border:#e3ddd3;

    --tk-radius:12px;
    --tk-shadow:0 15px 40px rgba(48,34,22,.10);

    /*
     Transparent desktop header total overlay space:
     top bar + main navigation.
    */
    --transparent-header-height:136px;
}


/* =====================================================
   1. GLOBAL RESET
===================================================== */

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    color:var(--tk-text);
    background:#fff;
}

img,
picture,
video,
canvas,
svg{
    max-width:100%;
}

img{
    height:auto;
}

iframe{
    max-width:100%;
}

a{
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        opacity .2s ease;
}

button,
input,
select,
textarea{
    font:inherit;
}


/* =====================================================
   2. MASTER WEBSITE WIDTH — 1500PX
===================================================== */

.container,
.container-fluid-inner,
.site-container,
.page-container,
.content-container,
.main-container,
.inner-container,
.section-container,
.wrapper,
.wrap,
.inner-wrap,

.kh-container,

.footer-container,
.footer-bottom,

.about-wrap,

.faq-wrap,
.faq-container,

.hero-container,
.hero-inner,
.hero-content-inner,

.safari-container,
.safari-wrap,

.destination-container,
.destination-wrap,

.excursion-container,
.excursion-wrap,

.climbing-container,
.climbing-wrap,

.contact-container,
.contact-wrap,

.tour-container,
.tour-wrap,

.booking-container,
.booking-wrap,

.blog-container,
.blog-wrap{
    width:min(
        var(--tk-max-width),
        calc(100% - var(--tk-desktop-gap))
    ) !important;

    max-width:var(--tk-max-width) !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* Bootstrap override */

@media(min-width:1200px){

    .container{
        max-width:var(--tk-max-width) !important;
    }

}


/* =====================================================
   3. LEGACY 1600PX OVERRIDES
===================================================== */

[style*="max-width: 1600px"],
[style*="max-width:1600px"]{
    max-width:1500px !important;
}


/* =====================================================
   4. FULL WIDTH SECTIONS
   Keep hero/footer/header backgrounds edge-to-edge.
===================================================== */

header,
footer,

.site-header,
.kh-header,
.site-footer,

.hero,
.page-hero,
.inner-hero,
.breadcrumb-hero,
.safari-hero,
.destination-hero,
.excursion-hero,
.climbing-hero,

.about-hero,
.faq-hero,

.cta-section,
.about-cta,
.help-section{
    width:100% !important;
    max-width:none !important;
}


/* =====================================================
   5. TRANSPARENT HEADER — HERO SPACING FIX
===================================================== */

/*
 Desktop:
 Header overlays the hero.
 Add enough top padding to hero sections so headings and
 breadcrumbs are not hidden behind the navigation.
*/

.page-hero,
.safari-hero,
.destination-hero,
.excursion-hero,
.climbing-hero,
.inner-hero,
.breadcrumb-hero{
    padding-top:var(--transparent-header-height) !important;
}


/*
 Some pages use a generic .hero.
 We only apply the spacing where the hero behaves like
 an inner/page hero.
*/

body:not(.home) .hero{
    padding-top:var(--transparent-header-height);
}


/*
 Protect hero content stacking.
*/

.page-hero .hero-content,
.safari-hero .hero-content,
.destination-hero .hero-content,
.excursion-hero .hero-content,
.climbing-hero .hero-content,
.inner-hero .hero-content,
.breadcrumb-hero .hero-content,
.page-hero .hero-inner,
.safari-hero .hero-inner,
.destination-hero .hero-inner,
.excursion-hero .hero-inner,
.climbing-hero .hero-inner{
    position:relative;
    z-index:2;
}


/*
 Hero text container remains 1500px.
*/

.page-hero .container,
.safari-hero .container,
.destination-hero .container,
.excursion-hero .container,
.climbing-hero .container,
.inner-hero .container,
.breadcrumb-hero .container,

.page-hero .wrap,
.safari-hero .wrap,
.destination-hero .wrap,
.excursion-hero .wrap,
.climbing-hero .wrap,

.hero-inner,
.hero-container{
    width:min(
        var(--tk-max-width),
        calc(100% - var(--tk-desktop-gap))
    ) !important;

    max-width:var(--tk-max-width) !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/*
 Prevent hero content from being pulled upward with old
 negative margins or transforms.
*/

.page-hero .hero-content,
.safari-hero .hero-content,
.destination-hero .hero-content,
.excursion-hero .hero-content,
.climbing-hero .hero-content,
.inner-hero .hero-content,
.breadcrumb-hero .hero-content{
    margin-top:0 !important;
}


/* =====================================================
   6. HEADER
===================================================== */

.kh-container,
.header-container,
.header-inner,
.navigation-container{
    width:min(
        1500px,
        calc(100% - 48px)
    ) !important;

    max-width:1500px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/*
 Logo border radius
*/

.kh-logo img,
.site-logo img,
.header-logo img,
.navigation-logo img,
.logo img{
    border-radius:10px !important;
}


/*
 Prevent navigation from forcing layout wider than viewport.
*/

.kh-main-row,
.kh-nav-row,
.header-inner,
.navigation-inner{
    min-width:0;
}

.kh-nav,
.kh-menu,
.navigation-list{
    min-width:0;
}


/* =====================================================
   7. FOOTER
===================================================== */

.footer-container,
.footer-bottom{
    width:min(
        1500px,
        calc(100% - 48px)
    ) !important;

    max-width:1500px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}

.footer-logo,
.footer-logo img{
    border-radius:10px !important;
}


/* =====================================================
   8. ABOUT PAGE
===================================================== */

.about-wrap{
    width:min(
        1500px,
        calc(100% - 48px)
    ) !important;

    max-width:1500px !important;
}


/* =====================================================
   9. FAQ PAGE
===================================================== */

.faq-page .wrap{
    width:min(
        1500px,
        calc(100% - 48px)
    ) !important;

    max-width:1500px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* =====================================================
   10. SAFARI PAGES
===================================================== */

.safari-page .container,
.safari-page .wrap,
.safari-page .inner-container,
.safari-page .section-container{
    width:min(
        1500px,
        calc(100% - 48px)
    ) !important;

    max-width:1500px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* =====================================================
   11. DESTINATION PAGES
===================================================== */

.destination-page .container,
.destination-page .wrap,
.destination-page .inner-container,
.destination-page .section-container{
    width:min(
        1500px,
        calc(100% - 48px)
    ) !important;

    max-width:1500px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* =====================================================
   12. EXCURSION PAGES
===================================================== */

.excursion-page .container,
.excursion-page .wrap,
.excursions-page .container,
.excursions-page .wrap{
    width:min(
        1500px,
        calc(100% - 48px)
    ) !important;

    max-width:1500px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* =====================================================
   13. MOUNTAIN CLIMBING PAGES
===================================================== */

.climbing-page .container,
.climbing-page .wrap,
.mk-page .container,
.mk-page .wrap,
.machame-page .container,
.machame-page .wrap{
    width:min(
        1500px,
        calc(100% - 48px)
    ) !important;

    max-width:1500px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* =====================================================
   14. CONTACT / BOOKING PAGES
===================================================== */

.contact-page .container,
.contact-page .wrap,

.booking-page .container,
.booking-page .wrap,

.enquiry-page .container,
.enquiry-page .wrap{
    width:min(
        1500px,
        calc(100% - 48px)
    ) !important;

    max-width:1500px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}


/* =====================================================
   15. TYPOGRAPHY SAFETY
===================================================== */

p,
li,
a,
span,
strong{
    overflow-wrap:break-word;
}

h1,
h2,
h3,
h4,
h5,
h6{
    overflow-wrap:break-word;
}


/* =====================================================
   16. IMAGES & GALLERIES
===================================================== */

.gallery img,
.gallery-grid img,
.card-image img,
.safari-image img,
.destination-image img,
.excursion-image img{
    width:100%;
    object-fit:cover;
}


/* =====================================================
   17. RESPONSIVE TABLES
===================================================== */

.table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    max-width:100%;
}


/* =====================================================
   18. FORMS
===================================================== */

input,
select,
textarea,
button{
    max-width:100%;
}

textarea{
    resize:vertical;
}


/* =====================================================
   19. RESPONSIVE EMBEDS
===================================================== */

.responsive-video,
.video-wrapper,
.map-wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:var(--tk-radius);
}

.responsive-video,
.video-wrapper{
    aspect-ratio:16 / 9;
}

.responsive-video iframe,
.video-wrapper iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.map-wrapper iframe{
    width:100%;
    border:0;
}


/* =====================================================
   20. FLOATING WHATSAPP
===================================================== */

.floating-whatsapp{
    max-width:calc(100vw - 28px);
}


/* =====================================================
   21. TABLET
===================================================== */

@media(max-width:1100px){

    :root{
        --transparent-header-height:95px;
    }

    .container,
    .container-fluid-inner,
    .site-container,
    .page-container,
    .content-container,
    .main-container,
    .inner-container,
    .section-container,
    .wrapper,
    .wrap,
    .inner-wrap,

    .kh-container,

    .footer-container,
    .footer-bottom,

    .about-wrap,

    .faq-wrap,
    .faq-container,

    .hero-container,
    .hero-inner,
    .hero-content-inner,

    .safari-container,
    .safari-wrap,

    .destination-container,
    .destination-wrap,

    .excursion-container,
    .excursion-wrap,

    .climbing-container,
    .climbing-wrap,

    .contact-container,
    .contact-wrap,

    .tour-container,
    .tour-wrap,

    .booking-container,
    .booking-wrap,

    .blog-container,
    .blog-wrap{
        width:calc(
            100% - var(--tk-tablet-gap)
        ) !important;

        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }


    /*
     On tablet/mobile the header becomes solid and no longer
     needs the full desktop overlay spacing.
    */

    .page-hero,
    .safari-hero,
    .destination-hero,
    .excursion-hero,
    .climbing-hero,
    .inner-hero,
    .breadcrumb-hero{
        padding-top:45px !important;
    }

    body:not(.home) .hero{
        padding-top:45px;
    }


    .faq-page .wrap,
    .about-wrap,
    .kh-container,
    .footer-container,
    .footer-bottom{
        width:calc(
            100% - var(--tk-tablet-gap)
        ) !important;

        max-width:100% !important;
    }

}


/* =====================================================
   22. MOBILE
===================================================== */

@media(max-width:760px){

    :root{
        --tk-mobile-gap:24px;
        --transparent-header-height:0px;
    }

    .container,
    .container-fluid-inner,
    .site-container,
    .page-container,
    .content-container,
    .main-container,
    .inner-container,
    .section-container,
    .wrapper,
    .wrap,
    .inner-wrap,

    .kh-container,

    .footer-container,
    .footer-bottom,

    .about-wrap,

    .faq-wrap,
    .faq-container,

    .hero-container,
    .hero-inner,
    .hero-content-inner,

    .safari-container,
    .safari-wrap,

    .destination-container,
    .destination-wrap,

    .excursion-container,
    .excursion-wrap,

    .climbing-container,
    .climbing-wrap,

    .contact-container,
    .contact-wrap,

    .tour-container,
    .tour-wrap,

    .booking-container,
    .booking-wrap,

    .blog-container,
    .blog-wrap{
        width:calc(
            100% - var(--tk-mobile-gap)
        ) !important;

        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }


    /*
     Smaller hero spacing on mobile.
    */

    .page-hero,
    .safari-hero,
    .destination-hero,
    .excursion-hero,
    .climbing-hero,
    .inner-hero,
    .breadcrumb-hero{
        padding-top:35px !important;
    }

    body:not(.home) .hero{
        padding-top:35px;
    }


    .page-hero .container,
    .safari-hero .container,
    .destination-hero .container,
    .excursion-hero .container,
    .climbing-hero .container,
    .inner-hero .container,
    .breadcrumb-hero .container,

    .page-hero .wrap,
    .safari-hero .wrap,
    .destination-hero .wrap,
    .excursion-hero .wrap,
    .climbing-hero .wrap,

    .hero-inner,
    .hero-container{
        width:calc(
            100% - var(--tk-mobile-gap)
        ) !important;

        max-width:100% !important;
    }


    .faq-page .wrap,
    .about-wrap,
    .kh-container,
    .footer-container,
    .footer-bottom{
        width:calc(
            100% - var(--tk-mobile-gap)
        ) !important;

        max-width:100% !important;
    }


    /*
     Prevent large buttons from overflowing.
    */

    .btn,
    .about-btn,
    .cta-button,
    .enquire-button{
        max-width:100%;
    }

}


/* =====================================================
   23. SMALL MOBILE
===================================================== */

@media(max-width:480px){

    :root{
        --tk-mobile-gap:20px;
    }

    .container,
    .wrap,
    .kh-container,
    .footer-container,
    .footer-bottom,
    .about-wrap,
    .faq-page .wrap{
        width:calc(
            100% - var(--tk-mobile-gap)
        ) !important;
    }

}


/* =====================================================
   24. PRINT
===================================================== */

@media print{

    .floating-whatsapp,
    .kh-mobile-toggle,
    .top-language-translator{
        display:none !important;
    }

    .container,
    .wrap,
    .about-wrap,
    .footer-container{
        width:100% !important;
        max-width:none !important;
    }

}


/* =====================================================
   END
   TRAUM KENIA HOLIDAY SAFARIS
   GLOBAL CSS v1.2
===================================================== */

/* =====================================================
   25. FORCE INNER HERO / BANNER OFFSET
   Fixes pages whose hero uses different class names.
===================================================== */

/*
 Desktop transparent header:
 top contact bar + navigation overlays approximately 135px.

 Add a real content-safe zone to all common inner-page
 hero/banner/title sections.
*/
:root{
    --tk-inner-hero-safe-top:165px;
}

/* Common hero/banner class names used across PHP templates */
.page-hero,
.inner-hero,
.inner-banner,
.page-banner,
.subpage-banner,
.sub-page-banner,
.breadcrumb-hero,
.breadcrumb-banner,
.breadcrumb-area,
.breadcrumb-section,
.page-title,
.page-title-area,
.page-title-section,
.banner,
.banner-section,
.safari-banner,
.destination-banner,
.excursion-banner,
.climbing-banner,
.tour-banner,
.hero-inner-section,

/* Generic first hero/banner section inside main */
main > section:first-child.hero,
main > section:first-child[class*="hero"],
main > section:first-child[class*="banner"],
main > section:first-child[class*="breadcrumb"],
main > section:first-child[class*="page-title"]{
    padding-top:var(--tk-inner-hero-safe-top) !important;
}

/*
 If the page's first section is the hero but its class is unusual,
 this catches the most common full-width image-header layouts.
 Excludes known content sections that should not be pushed.
*/
main > section:first-child:not(.intro):not(.content):not(.about-story):not(.faq-content):not(.safaris):not(.gallery):not(.why):not(.routes){
    position:relative;
}

/* Force hero text wrappers below the navigation */
.page-hero .container,
.page-hero .wrap,
.inner-hero .container,
.inner-hero .wrap,
.inner-banner .container,
.inner-banner .wrap,
.page-banner .container,
.page-banner .wrap,
.subpage-banner .container,
.subpage-banner .wrap,
.breadcrumb-hero .container,
.breadcrumb-hero .wrap,
.breadcrumb-banner .container,
.breadcrumb-banner .wrap,
.breadcrumb-area .container,
.breadcrumb-section .container,
.page-title .container,
.page-title-area .container,
.page-title-section .container,
.banner .container,
.banner .wrap,
.banner-section .container,
.banner-section .wrap,
.safari-banner .container,
.destination-banner .container,
.excursion-banner .container,
.climbing-banner .container,
.tour-banner .container,
main > section:first-child[class*="hero"] > .container,
main > section:first-child[class*="hero"] > .wrap,
main > section:first-child[class*="banner"] > .container,
main > section:first-child[class*="banner"] > .wrap{
    position:relative !important;
    z-index:3 !important;
    width:min(1500px,calc(100% - 48px)) !important;
    max-width:1500px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Ensure title/breadcrumb blocks cannot sit under transparent nav */
.page-hero h1,
.inner-hero h1,
.inner-banner h1,
.page-banner h1,
.subpage-banner h1,
.breadcrumb-hero h1,
.breadcrumb-banner h1,
.breadcrumb-area h1,
.breadcrumb-section h1,
.page-title h1,
.page-title-area h1,
.page-title-section h1,
.banner h1,
.banner-section h1,
.safari-banner h1,
.destination-banner h1,
.excursion-banner h1,
.climbing-banner h1,
.tour-banner h1,
main > section:first-child[class*="hero"] h1,
main > section:first-child[class*="banner"] h1{
    margin-top:0 !important;
    position:relative;
    z-index:4;
}

/*
 Some older templates use absolute-positioned banner content.
 Reset only the top placement, not the overall visual design.
*/
.hero-content,
.banner-content,
.page-title-content,
.breadcrumb-content,
.inner-banner-content{
    z-index:4;
}

main > section:first-child[class*="hero"] .hero-content,
main > section:first-child[class*="banner"] .banner-content,
.page-banner .banner-content,
.inner-banner .banner-content,
.page-title-section .page-title-content,
.breadcrumb-section .breadcrumb-content{
    top:auto !important;
    transform:none !important;
}

/* Tablet: shared header is no longer a tall transparent overlay */
@media(max-width:1100px){

    :root{
        --tk-inner-hero-safe-top:55px;
    }

    .page-hero,
    .inner-hero,
    .inner-banner,
    .page-banner,
    .subpage-banner,
    .sub-page-banner,
    .breadcrumb-hero,
    .breadcrumb-banner,
    .breadcrumb-area,
    .breadcrumb-section,
    .page-title,
    .page-title-area,
    .page-title-section,
    .banner,
    .banner-section,
    .safari-banner,
    .destination-banner,
    .excursion-banner,
    .climbing-banner,
    .tour-banner,
    main > section:first-child.hero,
    main > section:first-child[class*="hero"],
    main > section:first-child[class*="banner"],
    main > section:first-child[class*="breadcrumb"],
    main > section:first-child[class*="page-title"]{
        padding-top:var(--tk-inner-hero-safe-top) !important;
    }

    .page-hero .container,
    .page-hero .wrap,
    .inner-hero .container,
    .inner-hero .wrap,
    .inner-banner .container,
    .inner-banner .wrap,
    .page-banner .container,
    .page-banner .wrap,
    .banner .container,
    .banner .wrap,
    main > section:first-child[class*="hero"] > .container,
    main > section:first-child[class*="hero"] > .wrap,
    main > section:first-child[class*="banner"] > .container,
    main > section:first-child[class*="banner"] > .wrap{
        width:calc(100% - 32px) !important;
        max-width:100% !important;
    }
}

/* Mobile */
@media(max-width:760px){

    :root{
        --tk-inner-hero-safe-top:38px;
    }

    .page-hero,
    .inner-hero,
    .inner-banner,
    .page-banner,
    .subpage-banner,
    .sub-page-banner,
    .breadcrumb-hero,
    .breadcrumb-banner,
    .breadcrumb-area,
    .breadcrumb-section,
    .page-title,
    .page-title-area,
    .page-title-section,
    .banner,
    .banner-section,
    .safari-banner,
    .destination-banner,
    .excursion-banner,
    .climbing-banner,
    .tour-banner,
    main > section:first-child.hero,
    main > section:first-child[class*="hero"],
    main > section:first-child[class*="banner"],
    main > section:first-child[class*="breadcrumb"],
    main > section:first-child[class*="page-title"]{
        padding-top:var(--tk-inner-hero-safe-top) !important;
    }

    .page-hero .container,
    .page-hero .wrap,
    .inner-hero .container,
    .inner-hero .wrap,
    .inner-banner .container,
    .inner-banner .wrap,
    .page-banner .container,
    .page-banner .wrap,
    .banner .container,
    .banner .wrap,
    main > section:first-child[class*="hero"] > .container,
    main > section:first-child[class*="hero"] > .wrap,
    main > section:first-child[class*="banner"] > .container,
    main > section:first-child[class*="banner"] > .wrap{
        width:calc(100% - 24px) !important;
        max-width:100% !important;
    }
}

/* =====================================================
   END FORCE INNER HERO / BANNER OFFSET
===================================================== */