/* 
    Custom CSS for Ascon Irika Real Estate Landing Page 
*/

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 
 * Hide native scrollbar for horizontal carousel 
 * but keep its scrolling functionality intact
 */
.custom-scrollbar::-webkit-scrollbar {
    display: none;
}
.custom-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 
 * Accordion Animation States 
 */
.accordion.active .acc-icon {
    transform: rotate(45deg);
    color: #ffffff;
}

.accordion.active {
    color: #cba052; /* gold/secondary color when active */
}

/* 
 * Location Page Accordion Icons
 */
.location-accordion-icon {
    position: absolute !important;
    right: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1rem !important;
    height: 1rem !important;
    pointer-events: none !important;
}

.location-plus, .location-minus {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.75rem !important;
    font-weight: 300 !important;
    color: #cba052 !important;
    line-height: 1 !important;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
}

.location-minus {
    opacity: 0 !important;
}

.accordion.active .location-plus {
    opacity: 0 !important;
    transform: rotate(90deg) !important;
}

.accordion.active .location-minus {
    opacity: 1 !important;
    color: #cba052 !important;
}

/* 
 * Reusable Animation Utilities 
 */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.2, 0, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger for children */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}

.stagger-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* 
 * Input placeholders 
 */
input::placeholder {
    color: transparent; /* Changed to transparent for floating label trick */
}

/* Form Autofill background reset */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* Mobile Link Styling */
.mobile-link:active {
    background-color: #f3f4f6;
}

/* 
 * Scrolled Header States 
 */
header.scrolled {
    background-color: #ffffff !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
header.scrolled .header-text,
header.scrolled #logo-irika {
    color: #1e544d !important;
}
header.scrolled .header-text:hover {
    color: #cba052 !important;
}
header.scrolled .header-btn {
    border-color: #1e544d !important;
    color: #1e544d !important;
}
header.scrolled .header-btn:hover {
    background-color: #1e544d !important;
    color: #ffffff !important;
}
header.scrolled #header-divider {
    background-color: rgba(30, 84, 77, 0.2) !important;
}
header.scrolled .header-border {
    display: none !important;
}
header.scrolled div[class*="pb-8"] {
    padding-bottom: 0 !important;
}
header.scrolled #header-logo {
    max-height: 40px !important;
}

/* ===========================================
   Global: Prevent horizontal scroll on mobile
=========================================== */
body, html {
    overflow-x: hidden;
    max-width: 100%;
}

/* ===========================================
   Header Logo: Smaller on mobile
=========================================== */
@media (max-width: 639px) {
    #header-logo {
        max-height: 20px !important;
    }
}