/* -----------------------------------------------------------------------------
 * Koti Rentals - CSS personalizado
 *
 * Este archivo se encola DESPUES del CSS completo de wpresidence
 * (ver functions.php), asi que no hace falta !important para ganarle al tema:
 * basta con igualar o superar su especificidad.
 *
 * Ojo con Elementor: lo maquetado con Elementor genera sus propias hojas por
 * pagina y suele cargar despues. Si una regla de aqui no se aplica sobre un
 * elemento de Elementor, el sitio correcto para tocarlo casi siempre es el
 * propio Elementor, no este archivo.
 *
 * Organiza por secciones y comenta el POR QUE, no el QUE.
 * -------------------------------------------------------------------------- */


/* --- Global -------------------------------------------------------------- */


/* --- Cabecera / navegacion ----------------------------------------------- */


/* =========================================================================
 * PROPORCIONES DE IMAGEN
 *
 * Acompana a mu-plugins/koti-remove-unused-image-sizes.php v3.0, que retiro
 * los 16 tamanos recortados de wpresidence y los redirige a los nativos de
 * WordPress. Los nativos NO llevan recorte: medium_large da 768 de ancho y la
 * altura que salga, asi que la proporcion hay que fijarla aqui.
 *
 * Agravante: el tema imprime las medidas en el atributo HTML
 * (templates/property_cards_templates/property_card_slider.php, linea 44):
 *
 *     '<img width="'.$preview[1].'px" height="'.$preview[2].'px" ... />'
 *
 * Esos atributos vienen del tamano devuelto, asi que cada tarjeta traeria un
 * height distinto. De ahi los !important en width/height: sin ellos el layout
 * lo dictan los atributos y no estas reglas.
 *
 * Documentacion: docs/miniaturas-solo-tamanos-wordpress.md
 * ====================================================================== */

/* --- Tarjetas de listado --------------------------------------------------
 * 525/328 = 1.6:1, la proporcion que ya tenia el diseno del tema.
 */
.listing-unit-img-wrapper {
    aspect-ratio: 1.6 / 1;
    min-height: 0;           /* el tema fuerza min-height: 150px */
    overflow: hidden;
}

.listing-unit-img-wrapper img,
.property_unit_carousel .carousel-inner .item img {
    width: 100% !important;  /* anula el atributo width del HTML */
    height: 100% !important; /* anula el atributo height del HTML */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* El carrusel debe rellenar el contenedor para que la proporcion se respete */
.listing-unit-img-wrapper .property_unit_carousel,
.listing-unit-img-wrapper .carousel-inner,
.listing-unit-img-wrapper .carousel-inner .item {
    height: 100%;
}

/* --- Ficha de propiedad ---------------------------------------------------
 * 835/467 = 1.79:1
 */
.wpestate_property_slider img,
.property_page_slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- Avatares y miniaturas cuadradas -------------------------------------
 * thumbnail (150x150) ya viene recortado cuadrado. object-fit actua aqui como
 * red de seguridad para adjuntos antiguos que no tengan ese tamano.
 */
.agent_face img,
.agent_unit_widget img,
.user_thumb img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --- Listados y buscador ------------------------------------------------- */


/* --- Pie ----------------------------------------------------------------- */


/* --- Responsive ---------------------------------------------------------- */


/* --- WpResidence 5.4.0: fuga de CSS del propio tema sobre Elementor ------ */

/*
 * WpResidence 4.11.0 tenia esta regla acotada a un layout de header que este
 * sitio no usa:
 *   .header_type3_menu_sidebar .widget_nav_menu .sub-menu {
 *       position: absolute; right: 200px; ...
 *   }
 * En 5.4.0 (public/css/main.css) quedo sin ese scoping -- ahora es un
 * ".sub-menu{position:absolute;right:200px;...}" global. El widget de menu
 * de Elementor genera exactamente esa clase para cada submenu
 * (<ul class="sub-menu elementor-nav-menu--dropdown">), asi que hereda ese
 * right:200px encima del left:0 propio de Elementor. Con left y right fijos
 * a la vez y sin width explicito, el navegador estira la caja del dropdown
 * para satisfacer ambos -- de ahi el rectangulo blanco tapando el menu.
 * Neutralizamos solo el submenu de Elementor, sin tocar el .sub-menu propio
 * de WpResidence (que si lo sigue usando en otras plantillas del theme).
 */
.elementor-nav-menu--dropdown.sub-menu {
    right: auto;
}


/*
 * .header_media es el wrapper que WpResidence usa para el slider/imagen de
 * cabecera cuando el header lo arma el theme mismo (fondo #fdfdfd,
 * padding-top:90px -- ver style.css del padre, es codigo del theme, no
 * nuestro). Este sitio usa Elementor Theme Builder para el header entero
 * (header.php linea ~89: elementor_theme_do_location('header') maneja todo
 * y el theme se aparta), asi que ese div queda vacio -- pero en 4.11.0 no se
 * notaba porque el layout de esa version lo colapsaba visualmente; en 5.4.0
 * (Bootstrap 5 + reescritura de la cascada) queda visible como una franja
 * blanca detras/encima del header real y de los heros de cada pagina.
 * Confirmado en el sitio en vivo y en local: display:none lo resuelve del
 * todo. No tiene sentido en absoluto cuando Elementor gestiona el header,
 * asi que se oculta siempre en vez de perseguir el motivo exacto del cambio
 * de layout entre versiones.
 */
.header_media.header_media_elementor {
    display: none !important;
}


/*
 * NO poner background-color/z-index solido en .elementor-location-header
 * de forma global -- probado y revertido. Algunas paginas (ej. Corta
 * Temporada, id 36601) usan un margin-top negativo a proposito en su
 * primera seccion (.elementor-element-59b2b60, margin-top:-94px) para que
 * la foto de fondo quede DETRAS de un header transparente por diseno --
 * es el mismo patron que /alojamientos/ y otras paginas de hero. Forzar
 * fondo blanco + z-index alto ahi tapa la foto en vez de arreglar nada.
 *
 * El problema real de fondo/logo invisible sigue sin resolverse de forma
 * general -- pasa en paginas donde el header SI deberia ser solido (no
 * transparente por diseno), pero no hay (todavia) una forma de
 * distinguirlas por CSS: el mecanismo de wpresidence para eso
 * (header_transparent, wpestate_header_classes()) nunca corre en este
 * sitio porque Elementor Theme Builder maneja el header entero y wpresidence
 * se aparta (header.php linea ~89). Hay que resolverlo pagina por pagina
 * desde el propio editor de Elementor (background_background del
 * contenedor 7310af0), no con una regla CSS unica para todo el sitio.
 */


/*
 * Sin header transparente en ninguna pagina -- confirmado explicitamente con
 * el usuario, no es un efecto de diseno que se quiera conservar. El mismo
 * "--margin-top:-94px" (que mete la primera seccion de cada pagina por
 * debajo del header) esta calcado, con distinto ID de elemento generado por
 * Elementor, en estas 11 paginas (buscado en wp_postmeta._elementor_data,
 * no adivinado):
 *
 *   36018 nosotros              -> elementor-element-ba2b0f0
 *   36083 propietarios          -> elementor-element-4f9fe17
 *   36224 contacto              -> elementor-element-ec3ecbb
 *   36354 huone                 -> elementor-element-0b73482
 *   36422 huone-housing-corp.   -> elementor-element-d1e7ac9
 *   36513 blog                  -> elementor-element-3552381
 *   36573 alojamientos          -> elementor-element-9d6df6c
 *   36601 corta-temporada       -> elementor-element-59b2b60
 *   36607 media-temporada       -> elementor-element-8c85616
 *   36622 modelo-hibrido        -> elementor-element-bfafea4
 *   32216 politica-privacidad   -> elementor-element-1ca5de9
 *
 * Se neutraliza --margin-top (y las propiedades reales que consume esa
 * variable, margin-top/margin-block-start, por si Elementor cambia el
 * nombre de la variable interna en otra version) para cada una. Ademas hay
 * una regla estructural de respaldo (por posicion, no por ID) para que una
 * pagina nueva con el mismo patron quede cubierta sin tener que volver a
 * tocar este archivo -- pero la lista de IDs de arriba es la que garantiza
 * el resultado en las paginas ya conocidas.
 */
.elementor-element-ba2b0f0,
.elementor-element-4f9fe17,
.elementor-element-ec3ecbb,
.elementor-element-0b73482,
.elementor-element-d1e7ac9,
.elementor-element-3552381,
.elementor-element-9d6df6c,
.elementor-element-59b2b60,
.elementor-element-8c85616,
.elementor-element-bfafea4,
.elementor-element-1ca5de9 {
    --margin-top: 0px !important;
    margin-top: 0px !important;
    margin-block-start: 0px !important;
}

/* Respaldo estructural: primera seccion de cualquier pagina, por posicion. */
[data-elementor-type="wp-page"] > .e-con:first-child,
[data-elementor-type="wp-page"] > .e-parent:first-child {
    --margin-top: 0px !important;
    margin-top: 0px !important;
    margin-block-start: 0px !important;
}