/*
Theme Name: ASQUARE
Theme URI: https://abynabhirealtors.com
Author: A Square Dubai
Author URI: https://abynabhirealtors.com
Description: Custom WordPress theme for A Square Dubai Real Estate.
Version: 1.0.0
Text Domain: asquare
*/
/* 
 * This file is required for WordPress theme recognition.
 * Actual styles are loaded via the build assets in functions.php 
 */
/* === Mobile Sticky Header Fixes === */
/* Force dark content when header has white background */
header.bg-white #mobile-menu-toggle,
header.bg-white #theme-toggle-mobile,
header.bg-white #book-consultation-btn,
header.bg-white nav a {
    color: #1a202c !important;
    /* Navy/Dark color */
    border-color: #e2e8f0;
    /* lighter border */
}

header.bg-white #book-consultation-btn:hover {
    border-color: #bca360 !important;
    background-color: #bca360 !important;
    color: #ffffff !important;
}

header.bg-white #book-consultation-btn {
    border-color: #bca360 !important;
    /* Primary color */
    color: #bca360 !important;
}

/* Dark mode overrides */
html.dark header.dark\:bg-navy #mobile-menu-toggle,
html.dark header.dark\:bg-navy #theme-toggle-mobile,
html.dark header.dark\:bg-navy nav a {
    color: #ffffff !important;
}

/* Ensure header is always on top */
#main-header {
    z-index: 9999 !important;
}

/* === Mobile Alignment Fixes === */
/* Prevent horizontal overflow on mobile */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix Hero Text Wrapping on Small Screens */
@media (max-width: 640px) {
    h1 {
        font-size: 2.5rem !important;
        /* Force smaller size on very small screens */
        line-height: 1.1 !important;
    }

    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Force active tab text color on mobile */
@media (max-width: 768px) {
    .search-tab.active {
        color: #bca360 !important;
        border-color: #bca360 !important;
    }
}