/* ==========================================================================
   Insight Architects Premium UI/UX Overrides
   ========================================================================== */

/* 1. Typography & Readability */
body {
    letter-spacing: 0.02em;
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6,
.tp-section-title,
.tp-hero-title {
    letter-spacing: -0.03em;
}

/* 2. Premium Micro-Interactions (Hover Effects) */
.tp-service-2-item,
.tp-project-item,
.tp-project-2-item,
.tp-project-4-item,
.tp-team-item,
.tp-blog-item,
.tp-about-thumb-box {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.tp-service-2-item:hover,
.tp-project-item:hover,
.tp-project-2-item:hover,
.tp-project-4-item:hover,
.tp-team-item:hover,
.tp-blog-item:hover,
.tp-about-thumb-box:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 15px 35px rgba(74, 59, 51, 0.08) !important; /* Using Charcoal Brown for shadow */
    z-index: 10;
}

/* 3. Color Palette Integration */
/* Charcoal Brown: #4A3B33 */
.tp-btn-black,
.tp-btn-border.black-border:hover,
.tp-btn-theme,
.search__close button:hover,
.tpoffcanvas__close-btn button:hover,
.tp-slider-video:hover {
    background-color: var(--tp-theme-1) !important;
    border-color: var(--tp-theme-1) !important;
    color: #fff !important;
}

.tp-btn-black::after,
.tp-btn-theme::after {
    background-color: #382c26 !important; /* Slightly darker shade for hover fill */
}

a:hover {
    color: var(--tp-theme-1);
}

/* Update section sub-titles to match brand */
.tp-section-subtitle {
    color: var(--tp-theme-1) !important;
    font-weight: 600;
}

/* 4. Layout & Whitespace refinements */
.tp-service-2-area {
    padding-top: 160px;
    padding-bottom: 140px;
}
.tp-about-area {
    padding-top: 160px;
    padding-bottom: 160px;
}

/* 5. Custom Preloader Animation */
.ia-preloader-logo {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ia-pulse 1.5s ease-in-out infinite;
}

@keyframes ia-pulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
}

/* Ensure consistent header height and background across all pages, and fix alignment on sub-pages */
.tp-header-area {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #fff;
    height: 90px;
    display: flex;
    align-items: center;
}


/* ==========================================================================
   UI/UX Enhancements
   ========================================================================== */

/* 1. Smooth Scrolling & Selection */
html {
    scroll-behavior: smooth;
}
::selection {
    background-color: var(--tp-theme-1);
    color: #FDF9F1;
}

/* 2. Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: var(--tp-theme-1);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #382c26; 
}

/* 3. Standardize Focus Rings for Accessibility */
*:focus-visible {
    outline: 2px solid #4A3B33 !important;
    outline-offset: 3px !important;
}

/* 4. Breadcrumb Banner Height */
.breadcrumb__height {
    height: 400px !important;
}

/* 5. Image Hover Effects */
.tp-project-thumb img,
.tp-service-2-thumb img,
.tp-blog-thumb img {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.tp-project-thumb:hover img,
.tp-service-2-thumb:hover img,
.tp-blog-thumb:hover img {
    transform: scale(1.05);
}

/* 6. Footer Background Unification */
.tp-footer-area {
    background-color: #221C18 !important;
}
.tp-footer-widget-content ul li a:hover {
    color: #FDF9F1 !important;
}

/* 7. Interactive Hamburger Menu */
.tp-menu-bar {
    transition: transform 0.3s ease, color 0.3s ease !important;
}
.tp-menu-bar:hover {
    transform: scale(1.1) !important;
    color: var(--tp-theme-1) !important;
}


/* 6b. Fix Footer Contrast against Dark Background */
.tp-footer-title {
    color: #FDF9F1 !important;
}
.tp-footer-list ul li a,
.tp-footer-contact ul li a {
    color: rgba(253, 249, 241, 0.7) !important;
}
.tp-footer-list ul li a:hover,
.tp-footer-contact ul li a:hover {
    color: #FDF9F1 !important;
}
.tp-footer-contact ul li span svg {
    color: #FDF9F1 !important;
    fill: #FDF9F1 !important;
}
/* Copyright Area Contrast */
.tp-copyright-area {
    background-color: #1a1512 !important; /* Slightly darker than footer for separation */
    border-top: none !important;
}
.tp-copyright-left p,
.tp-copyright-right a {
    color: rgba(253, 249, 241, 0.7) !important;
}
.tp-copyright-right a:hover {
    color: #FDF9F1 !important;
}



/* Fix email address capitalization in top bar */
.tp-header-top-left ul li a[href^="mailto:"] {
    text-transform: lowercase !important;
}

/* 8. Accessibility utilities */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* 9. Contact form status message */
#formMessage {
    display: none;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 4px;
    font-weight: 500;
}
#formMessage.form-message--success {
    display: block;
    background-color: #d4edda;
    color: #155724;
}
#formMessage.form-message--error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
}