/* ==========================================================================
   Responsible Gorilla Trips — Global Brand Stylesheet
   ========================================================================== */

/* ---------- 1. Brand variables ---------- */
:root{
    --primary:#165129;       /* Forest Green — unchanged */
    --secondary:#8B5E3C;     /* Light Coffee Brown — CTAs/highlights (was Safari Gold) */
    --accent:#556B2F;        /* Army Green — hover states, links, icons (was Nature Green) */
    --accent-light:#B2BCA1;  /* lighter tint of Army Green, for text/icons on dark green backgrounds */
    --secondary-hover:#A07B5F; /* lighter tint of Light Coffee Brown, for button hover */

    --background:#FFFFFF;
    --background-alt:#F7F8F5;

    --text:#2C2C2C;
    --text-light:#666666;

    --border:#E6E8E3;

    --success:var(--accent);
    --warning:var(--secondary);

    --hero-overlay:rgba(22,81,41,.75);

    --shadow:0 10px 30px rgba(22,81,41,.12);

    --radius-sm:6px;
    --radius-md:12px;
    --radius-lg:20px;

    /* Spacing scale — vertical rhythm for sections and section-level
       components. Sections sit back-to-back with alternating backgrounds,
       so their padding stacks (bottom of one + top of the next); keep these
       values modest rather than compensating per-page. */
    --space-xs:12px;
    --space-sm:20px;
    --space-md:32px;

    /* Single source of truth for section vertical padding. Every
       section-level wrapper (.rgt-section, .rgt-section-alt,
       .rgt-contact-section) must use this rather than its own value —
       the responsive overrides below retune it once per breakpoint. */
    --section-space:44px;

    --font-heading:'Fraunces', Georgia, serif;
    --font-body:'Inter', -apple-system, sans-serif;

    /* Luxury gold & black — scoped to buttons/CTAs and the footer only;
       headings, links, badges elsewhere keep the green/brown system above. */
    --luxury-gold:#C29A6B;
    --luxury-gold-hover:#B3875A;
    --luxury-black:#1A1A1A;
    --luxury-black-hover:#333333;
    --luxury-warm-white:#FAF8F5;
    --luxury-footer-bg:#0A0A0A;
    --luxury-footer-link:#999999;
    --luxury-footer-text:var(--luxury-warm-white);
    --luxury-footer-divider:#1A1A1A;
}

/* ---------- 2. Base ---------- */
.rgt-page{
    font-family: var(--font-body);
    color: var(--text);
    background: var(--background);
    line-height: 1.65;
}
.rgt-page h1, .rgt-page h2, .rgt-page h3, .rgt-page h4{
    font-family: var(--font-heading);
    color: var(--primary);
    line-height: 1.2;
    margin: 0 0 16px 0;
}
.rgt-page p{ color: var(--text); margin: 0 0 16px 0; }
.rgt-page a{ color: var(--accent); text-decoration: none; transition: color .18s ease; }
.rgt-page a:hover{ color: var(--secondary); }

.rgt-container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}
.rgt-eyebrow{
    display:inline-block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 12px;
}

/* ---------- 3. Buttons (luxury gold & black CTA treatment) ---------- */
.rgt-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 16px 40px;
    border-radius: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration:none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

/* Chained with .rgt-btn (not just the modifier alone) so these beat the
   global ".rgt-page a { color: var(--accent) }" link-color rule on
   specificity — a single class (0,0,1,0) loses to that class+element
   selector (0,0,1,1), which was silently recoloring every button that's an
   <a> tag to Army Green text regardless of what was declared here. */

/* "Learn more / Contact us"-tier actions: Explore More, More About Us, WhatsApp */
.rgt-btn.rgt-btn-primary{
    background: var(--luxury-black);
    color: var(--luxury-warm-white);
}
.rgt-btn.rgt-btn-primary:hover{
    background: var(--luxury-black-hover);
    color: var(--luxury-warm-white);
}

/* Strongest booking-intent actions: Book Your Trip, Send Enquiry, Book This Tour */
.rgt-btn.rgt-btn-secondary{
    background: var(--luxury-gold);
    color: var(--luxury-black);
}
.rgt-btn.rgt-btn-secondary:hover{
    background: var(--luxury-gold-hover);
    color: var(--luxury-black);
    transform: scale(1.02);
}

.rgt-btn.rgt-btn-outline{
    background: transparent;
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
}
.rgt-btn.rgt-btn-outline:hover{
    background: var(--luxury-gold);
    color: var(--luxury-black);
}

/* Used on the photographic hero: gold text measured 3.62:1 against the flat
   overlay color, but the hero is a photo with bright foliage patches behind
   it, so real-world contrast dropped well below that and the label became
   unreadable. White text has enough luminance headroom to stay legible
   against any part of a darkened photo — kept the gold border as the accent. */
.rgt-btn.rgt-btn-outline-light{
    background: transparent;
    border-color: var(--luxury-gold);
    color: #FFFFFF;
}
.rgt-btn.rgt-btn-outline-light:hover{
    background: var(--luxury-gold);
    color: var(--luxury-black);
}

/* WhatsApp's official brand green — used only for the WhatsApp CTA, not the luxury palette */
.rgt-btn.rgt-btn-whatsapp{
    background: #25D366;
    color: #FFFFFF;
}
.rgt-btn.rgt-btn-whatsapp:hover{
    background: #1EBE5A;
    color: #FFFFFF;
}

/* ---------- 4. Sections ---------- */
.rgt-section{
    padding: var(--section-space) 0;
    background: var(--background);
}
.rgt-section-alt{
    padding: var(--section-space) 0;
    background: var(--background-alt);
}
.rgt-section-header{
    max-width: 680px;
    margin: 0 0 var(--space-sm) 0;
}
.rgt-section-header.center{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.rgt-section-header p{
    color: var(--text-light);
    font-size: 17px;
}

/* ---------- 5. Hero ---------- */
.rgt-hero{
    position: relative;
    min-height: 620px;
    display:flex;
    align-items:center;
    background-size: cover;
    background-position: center;
    isolation: isolate;
}
.rgt-hero::before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(22,81,41,.55) 0%, var(--hero-overlay) 100%);
    z-index:0;
}
.rgt-hero-content{
    position:relative;
    z-index:1;
    max-width: 680px;
    padding: 40px 0;
}
.rgt-hero-content .rgt-eyebrow{ color: var(--accent-light); }
.rgt-hero-content h1{
    color:#FFFFFF;
    font-size: clamp(32px, 5vw, 54px);
    margin-bottom: 20px;
}
.rgt-hero-content p{
    color: #EAF2E9;
    font-size: 18px;
    max-width: 560px;
    margin-bottom: 32px;
}
.rgt-hero-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

/* ---------- 6. About / intro section ---------- */
.rgt-about{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items:center;
}
/* Tour/destination detail pages: top-align instead of vertically centering,
   since their text column is often shorter than the fixed 4:3 media column —
   centering left large blank margins above/below the text. */
.rgt-about--detail{
    align-items: start;
}
.rgt-badge{
    display:inline-flex;
    align-items:center;
    background: var(--background-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.rgt-badge--lg{
    padding: 8px 16px;
    font-size: 13px;
}
.rgt-about-facts{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin: 4px 0 8px;
}
.rgt-about-media{
    position:relative;
    border-radius: var(--radius-lg);
    overflow:hidden;
    box-shadow: var(--shadow);
}
.rgt-about-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit: cover;
    aspect-ratio: 4/3;
}
.rgt-about-badge{
    position:absolute;
    left:24px;
    bottom:24px;
    background: rgba(22,81,41,.92);
    color:#fff;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: 15px;
    line-height:1.3;
}
.rgt-about-badge strong{
    display:block;
    font-size: 26px;
    color: var(--accent-light);
}
.rgt-about-body .rgt-eyebrow{ color: var(--accent); }
.rgt-about-body p{ font-size: 16px; color: var(--text-light); }

/* ---------- 7. Why travel with us ---------- */
.rgt-why-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.rgt-why-card{
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 32px 26px;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.rgt-why-card:hover{
    box-shadow: var(--shadow);
    transform: translateY(-4px);
    border-color: var(--accent-light);
}
.rgt-why-icon{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(82,185,71,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 18px;
}
.rgt-why-icon svg{
    width: 24px;
    height: 24px;
    stroke: var(--primary);
}
.rgt-why-card h3{
    font-size: 18px;
    margin-bottom: 10px;
}
.rgt-why-card p{
    font-size: 14.5px;
    color: var(--text-light);
    margin:0;
}

/* ---------- 8. Tour package cards ---------- */
.rgt-tours-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.rgt-tour-card{
    background:#FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition: box-shadow .18s ease, transform .18s ease;
}
.rgt-tour-card:hover{
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}
.rgt-tour-media{
    position:relative;
    aspect-ratio: 4/3;
    overflow:hidden;
}
.rgt-tour-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition: transform .35s ease;
}
.rgt-tour-card:hover .rgt-tour-media img{
    transform: scale(1.06);
}
.rgt-tour-rate{
    position:absolute;
    top:14px;
    right:14px;
    background: var(--secondary);
    color:#fff;
    font-size: 12.5px;
    font-weight:700;
    padding: 6px 12px;
    border-radius: 999px;
}
.rgt-tour-body{
    padding: 20px 20px 24px;
    display:flex;
    flex-direction:column;
    flex:1;
}
.rgt-tour-body h3{
    font-size: 16.5px;
    line-height:1.35;
    margin-bottom: 10px;
    min-height: 44px;
}
.rgt-tour-body p{
    font-size: 13.5px;
    color: var(--text-light);
    margin-bottom: 20px;
    flex:1;
}
.rgt-tour-body .rgt-btn{
    align-self:flex-start;
    padding: 10px 20px;
    font-size: 13.5px;
}

/* ---------- 9. Responsive ---------- */
@media (max-width: 1080px){
    .rgt-why-grid{ grid-template-columns: repeat(2, 1fr); }
    .rgt-tours-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
    :root{ --section-space:32px; }
    .rgt-about{ grid-template-columns: 1fr; gap: 36px; }
    .rgt-container{ padding: 0 22px; }
}
@media (max-width: 560px){
    :root{ --section-space:24px; }
    .rgt-why-grid{ grid-template-columns: 1fr; }
    .rgt-tours-grid{ grid-template-columns: 1fr; }
    .rgt-hero{ min-height: 520px; }
    .rgt-section-header{ margin-bottom: 16px; }
}

/* ---------- 9b. Detail page gallery ---------- */
.rgt-gallery{
    display:flex;
    flex-direction:column;
    gap: 12px;
}
.rgt-gallery-main{
    position:relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    overflow:hidden;
    box-shadow: var(--shadow);
}
.rgt-gallery-main img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.rgt-gallery-nav{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(22,81,41,.85);
    color:#fff;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size: 18px;
    line-height:1;
    transition: background .18s ease;
}
.rgt-gallery-nav:hover{ background: var(--primary); }
.rgt-gallery-nav--prev{ left: 14px; }
.rgt-gallery-nav--next{ right: 14px; }
.rgt-gallery-thumbs{
    display:flex;
    gap: 10px;
    overflow-x:auto;
    padding-bottom: 2px;
}
.rgt-gallery-thumb{
    flex: 0 0 72px;
    width: 72px;
    height: 54px;
    border-radius: var(--radius-sm);
    overflow:hidden;
    border: 2px solid transparent;
    cursor:pointer;
    padding:0;
    background:none;
}
.rgt-gallery-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.rgt-gallery-thumb.is-active{ border-color: var(--secondary); }
@media (max-width: 560px){
    .rgt-gallery-nav{ width: 32px; height: 32px; font-size: 15px; }
    .rgt-gallery-thumb{ flex-basis: 60px; width: 60px; height: 45px; }
}

/* ==========================================================================
   Site chrome — topbar, header, nav, footer.
   Not covered by the WordPress "Additional CSS" snippet above (that snippet
   assumes a theme already renders header/nav/footer); this project has no
   theme, so these are hand-built to match the brand system's variables,
   radii, and fonts.
   ========================================================================== */

.rgt-topbar{
    background: var(--primary);
    color: #fff;
    font-family: var(--font-body);
    font-size: 13.5px;
    padding: 10px 0;
}
.rgt-topbar .rgt-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}
.rgt-topbar a{ color:#fff; }
.rgt-topbar a:hover{ color: var(--accent-light); }

.rgt-header{
    background: var(--background);
    box-shadow: 0 2px 12px rgba(22,81,41,.08);
    position: sticky;
    top: 0;
    z-index: 100;
}
.rgt-header .rgt-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height: 76px;
}
.rgt-logo{
    display:flex;
    align-items:center;
}
.rgt-logo-img{
    height: 40px;
    width: auto;
    display:block;
}

.rgt-nav ul{
    display:flex;
    list-style:none;
    gap: 30px;
    align-items:center;
    margin:0;
    padding:0;
}
.rgt-nav a{
    font-family: var(--font-body);
    color: var(--text);
    font-weight: 600;
    font-size: 14.5px;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.rgt-nav a:hover,
.rgt-nav a.is-active{
    color: var(--primary);
    border-bottom-color: var(--accent);
}
.rgt-nav .rgt-btn{ padding: 10px 24px; }

.rgt-nav-toggle{
    display:none;
    background:none;
    border:none;
    font-size: 1.6rem;
    color: var(--primary);
    cursor:pointer;
}

.rgt-footer{
    background: var(--luxury-footer-bg);
    color: var(--luxury-footer-text);
    font-family: var(--font-body);
    padding: var(--section-space) 0 24px;
    font-size: 14.5px;
}
/* explicit override: ".rgt-page p{color:var(--text)}" is a class+element
   selector (same specificity as inheritance can't beat), so it silently
   recolors any <p> here unless matched directly like this */
.rgt-footer p{ color: var(--luxury-footer-text); }
.rgt-footer__grid{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: var(--space-md);
}
.rgt-footer h4{
    font-family: var(--font-body);
    color: var(--luxury-gold);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.rgt-footer-logo{
    height: 48px;
    width: auto;
    display:block;
    margin-bottom: 18px;
}
.rgt-footer ul{ list-style:none; margin:0; padding:0; }
.rgt-footer li{ margin-bottom: 0; line-height: 2.2; }
.rgt-footer a{ color: var(--luxury-footer-link); transition: color .2s ease; }
.rgt-footer a:hover{ color: var(--luxury-gold); }

/* Social icons keep each platform's own brand color rather than the
   monochrome footer link treatment above. */
.rgt-social-links{
    display:flex;
    gap:10px;
    margin-top:20px;
}
.rgt-footer a.rgt-social-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    transition: transform .2s ease, opacity .2s ease;
}
.rgt-footer a.rgt-social-link:hover{
    transform: translateY(-2px);
    opacity:.85;
}
.rgt-social-link svg{ width:18px; height:18px; }
.rgt-social-facebook{ background:#1877F2; }
.rgt-social-instagram{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.rgt-social-x{ background:#000000; }
.rgt-social-whatsapp{ background:#25D366; }
.rgt-social-youtube{ background:#FF0000; }
.rgt-footer__bottom{
    border-top: 1px solid var(--luxury-footer-divider);
    margin-top: 0;
    padding: 20px 0;
    text-align:center;
    font-size: 13.5px;
    color: var(--luxury-footer-text);
}

/* Floating WhatsApp chat widget — fixed to the viewport on every page,
   independent of the footer's own layout. Uses WhatsApp's brand green
   rather than the luxury gold/black palette, matching .rgt-btn-whatsapp. */
.rgt-whatsapp-float{
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: transform .2s ease, background .2s ease;
}
.rgt-whatsapp-float:hover{
    background: #1EBE5A;
    transform: scale(1.06);
}
.rgt-whatsapp-float svg{ width:30px; height:30px; }

@media (max-width: 1024px){
    .rgt-footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px){
    .rgt-nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background: var(--background);
        box-shadow: var(--shadow);
        display:none;
        padding: 16px 20px 24px;
    }
    .rgt-nav.is-open{ display:block; }
    .rgt-nav ul{ flex-direction:column; align-items:flex-start; gap:14px; }
    .rgt-nav-toggle{ display:block; }
}

@media (max-width: 640px){
    .rgt-footer__grid{ grid-template-columns: 1fr; }
}