/* responsive-custom.css
   Reset mínimo y reglas globales para que el sitio sea responsivo
*/

/* Reset/box sizing */
* {
    box-sizing: border-box;
}

/* Layout base seguro */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Poppins", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Contenedor principal: usa todo el ancho en móvil y centrado en escritorio */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Header / top header adaptativo */
.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* permite salto en pantallas pequeñas */
    gap: 10px;
}

.realestate-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

    /* por defecto el logo puede ocupar su tamaño, pero en móvil centramos */
    .realestate-logo img {
        max-width: 100%;
        height: auto;
        display: block;
    }

/* Menu container (PC) */
.menu-navbar {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Asegurar que nav fallback se vea si bootstrap falla */
#navmenu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 12px;
    align-items: center;
}

    /* Links nav (estilo base) */
    #navmenu li a {
        display: inline-block;
        padding: 10px 12px;
        color: #2c4068;
        text-decoration: none;
        font-weight: 600;
    }

        /* State hover desktop */
        #navmenu li a:hover {
            color: #0a5586;
            text-decoration: underline;
        }

/* Small screens: el nav vertical, botón hamburguesa visible */
@media (max-width: 768px) {

    /* logo centra y agranda */
    .realestate-logo {
        flex: 1 1 100%;
        text-align: center;
        margin-bottom: 6px;
    }

    /* ocultar nav horizontal, se usará nav móvil (css/mobile-nav.css controla) */
    #navmenu {
        display: none;
    }

    /* forzamos que la menu-navbar ocupe 100% (para el botón) */
    .menu-navbar {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    /* content padding para que no se tapen por header fijo si lo usas */
    .bodyContent {
        padding-top: 10px;
    }
}