/* ==========================================================================
   GALLERY PAGE SPECIFIC COLORS & OVERRIDES
   ========================================================================== */

:root {
    /* Base color requested by user */
    --g-hero-bg: #CBBFAE; 
    
    /* Flow colors strictly extracted from gallery_page_hero.png */
    --g-mid-blend: #b9a285; /* Extracted taupe/sand */
    --g-dark-blend: #959088; /* Extracted greyish stone */
    --g-charcoal: #25262A;
    --g-golden: #F2C36F;
}

/* --------------------------------------
   1. HEADER NAV OVERRIDE
-------------------------------------- */
.header-nav {
    background: linear-gradient(to bottom, rgba(203, 191, 174, 0.9) 0%, transparent 100%) !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.header-nav .nav-link {
    color: var(--g-charcoal) !important;
}
.header-nav .nav-dropdown {
    background: rgba(203, 191, 174, 0.95) !important;
}
.header-nav .nav-dropdown-item {
    color: var(--g-charcoal) !important;
}
.header-nav .nav-dropdown-item:hover {
    background: rgba(37, 38, 42, 0.1) !important;
}

/* --------------------------------------
   2. HERO SECTION (.gallery-hero)
-------------------------------------- */
.gallery-hero {
    /* Shift the image so the logo doesn't clash */
    background-color: var(--g-hero-bg) !important;
    background: 
        /* Bottom fade blends seamlessly into the main section */
        linear-gradient(to bottom, transparent 60%, var(--g-hero-bg) 100%),
        /* Left fade matches the hero text background color perfectly */
        linear-gradient(to right, var(--g-hero-bg) 0%, var(--g-hero-bg) 35%, rgba(203, 191, 174, 0) 80%),
        url('../assets/gallery_page_hero.png') 15vw 10% / cover no-repeat !important;
}

/* Force text visibility and alignment (Match Contact Page) */
.gallery-hero-text-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    align-items: flex-start !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
}

.gallery-hero .disperse-text {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: scale(1) !important;
    letter-spacing: normal !important;
    visibility: visible !important;
    text-align: left !important;
}

.gallery-hero-heading,
.gallery-hero-desc {
    color: #1a202c !important; /* Deep, rich slate navy for premium contrast */
    text-shadow: 0 4px 15px rgba(26, 32, 44, 0.15); /* Soft premium glow */
}
.gallery-hero-heading {
    margin-bottom: 0 !important; /* Remove bottom margin to ensure perfect vertical centering since there is no description below it */
}
.gallery-hero-subheading {
    color: #c99665 !important; /* Common gold color for all eyebrows */
    font-weight: 700 !important;
}

/* --------------------------------------
   2. MAIN CONTENT
-------------------------------------- */
main {
    /* Smooth waterfall from Hero bg -> Extracted Mid Blend and stays there until footer */
    background: linear-gradient(180deg, var(--g-hero-bg) 0%, var(--g-mid-blend) 30%, var(--g-mid-blend) 100%) !important;
}
.section-inner h2, .section-inner p, .section-inner .eyebrow {
    color: var(--g-charcoal) !important;
}
.section-inner .eyebrow {
    color: var(--g-golden) !important;
}

/* --------------------------------------
   3. CATEGORY BAR
-------------------------------------- */
.cat-btn {
    color: var(--g-charcoal) !important;
    background: transparent !important;
    border: 1px solid rgba(37, 38, 42, 0.2) !important;
    border-radius: 50px !important;
}
.cat-btn.active, .cat-btn:hover {
    background: var(--g-charcoal) !important;
    color: var(--g-hero-bg) !important;
    border-color: var(--g-charcoal) !important;
}

/* --------------------------------------
   4. GALLERY MASONRY ITEMS
-------------------------------------- */
.gallery-img-container {
    background: transparent !important;
    border: 2px solid #C89B3C !important;
    border-radius: 16px 0 16px 0 !important; /* Top-left and bottom-right rounded, others remain cut */
    box-shadow: none !important;
    padding: 10px; /* added padding to offset the border as in the design */
    clip-path: polygon(0 0, calc(100% - 35px) 0, 100% 35px, 100% 100%, 35px 100%, 0 calc(100% - 35px)) !important;
}
.gallery-img-container img {
    border-radius: 16px 0 16px 0 !important;
    clip-path: polygon(0 0, calc(100% - 35px) 0, 100% 35px, 100% 100%, 35px 100%, 0 calc(100% - 35px)) !important;
}
.gallery-caption h3,
.gallery-caption p {
    color: var(--g-charcoal) !important;
}
.gallery-caption {
    background: rgba(203, 191, 174, 0.65) !important;
}

/* --------------------------------------
   5. LIGHTBOX MODAL FIXES
-------------------------------------- */
.lightbox-content {
    background: var(--g-hero-bg) !important;
    border-radius: 6px !important;
}
.lightbox-content::-webkit-scrollbar-track {
    background-color: transparent !important;
}

/* --------------------------------------
   6. FOOTER BLEND
-------------------------------------- */
.new-footer {
    background-blend-mode: normal !important;
    background-image: 
        /* Fade from the extracted mid-blend main content into the dark footer image */
        linear-gradient(to bottom, var(--g-mid-blend) 0%, rgba(185, 162, 133, 0) 30%),
        /* Layer over the footer image as requested */
        linear-gradient(135deg, rgba(37, 38, 42, 0.6) 0%, rgba(37, 38, 42, 0.9) 100%), 
        url('../assets/gallery_page_footer.png') !important;
    background-color: #b9a285!important;
    background-size: 100% 100%, 100% 100%, cover !important; /* Cover prevents shrinking */
    background-position: center 120% !important; /* Pushes image up from the bottom */
    background-repeat: no-repeat !important;
    box-shadow: inset 0 20px 40px -10px var(--g-mid-blend) !important;
    border-top: none !important;
}

main, .gallery-section {
    border-bottom: none !important;
}

.footer-overlay {
    display: none !important; /* using the image background directly */
}

/* Invert footer text for contrast against charcoal */
.huge-watermark {
    color: rgba(203, 191, 174, 0.12) !important; /* Standardized 12% opacity */
}


/* Global Unified Footer Typography & Social Icons */
.new-footer h2, .new-footer h3, .new-footer h4 { color: #ffffff !important; }
.new-footer p, .new-footer a, .new-footer li { color: #ffffff !important; font-size: 1.05rem !important; }
.new-footer a:hover { color: var(--c-golden, #C8A14A) !important; }
.new-footer p.sub-credit { font-size: 0.95rem !important; opacity: 0.8; }
.new-footer .social-icons a { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.4) !important; background: transparent !important; }
.new-footer .social-icons a.social-instagram:hover { color: #ffffff !important; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; border-color: transparent !important; }
.new-footer .social-icons a.social-facebook:hover { color: #ffffff !important; background: #1877F2 !important; border-color: #1877F2 !important; }
.new-footer .social-icons a.social-twitter:hover { color: #ffffff !important; background: #000000 !important; border-color: #000000 !important; }
.new-footer .social-icons a.social-linkedin:hover { color: #ffffff !important; background: #0A66C2 !important; border-color: #0A66C2 !important; }
.new-footer .social-icons a.social-youtube:hover { color: #ffffff !important; background: #FF0000 !important; border-color: #FF0000 !important; }
.new-footer .social-icons a.social-whatsapp:hover { color: #ffffff !important; background: #25D366 !important; border-color: #25D366 !important; }
.new-footer .social-icons a.social-gmail:hover { color: #ffffff !important; background: #D44638 !important; border-color: #D44638 !important; }