/**
 * Adarga REI — Ajustes de componentes
 *
 * Regla de oro: aquí SOLO va lo que las Opciones del Theme no pueden hacer.
 * Colores de marca, tipografías, tamaños de encabezado, colores de menú, fondo
 * del footer, etc. se configuran en Theme Options y NO se duplican aquí.
 *
 * Los selectores apuntan a clases reales de WpResidence 5.4 (Bootstrap 5.3).
 */

/* ==========================================================================
   1. UTILIDADES DE COMPOSICIÓN
   Clases que se asignan desde Elementor (pestaña Avanzado → Clases CSS).
   Evitan tener que insertar HTML crudo en un widget de texto.
   ========================================================================== */

/* Píldora "eyebrow" sobre los títulos de sección.
   Figma: hero "Hablar con un asesor", Propiedades "Propiedades".

   La clase se asigna desde Elementor (Avanzado -> Clases CSS) y aterriza en el
   CONTENEDOR del widget, no en el título. Por eso la píldora se dibuja sobre
   `.elementor-heading-title`: si se pinta sobre el contenedor, el fondo se
   estira a todo el ancho de la columna. */
.adarga-eyebrow .elementor-heading-title {
  display: inline-block;
  padding: 0.5rem 1.125rem;
  border-radius: 999px;
  background-color: var(--adarga-beige);
  color: var(--adarga-primary);
  font-family: var(--adarga-font-body);
  font-size: var(--adarga-text-small);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: background-color var(--adarga-duration) var(--adarga-ease);
}

/* Cuando la píldora lleva enlace, el <a> hereda el color de enlace del kit de
   Elementor (un celeste) y hay que devolverlo al burdeos de marca. */
.adarga-eyebrow .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}

.adarga-eyebrow .elementor-heading-title:hover {
  background-color: var(--adarga-border-strong);
}

/* Segundo renglón en itálica de los titulares del Figma
   ("...inmobiliarias empiezan por elegir mejor."). */
.adarga-title-accent em,
.adarga-title-accent i {
  font-style: italic;
  font-weight: 700;
}

/* Línea de plazas: "Guadalajara · Puerto Vallarta · Bahía de Banderas · México" */
.adarga-locations .elementor-heading-title {
  font-family: var(--adarga-font-body);
  font-style: italic;
  font-weight: 600;
  color: var(--adarga-primary);
  font-size: var(--adarga-text-small);
  letter-spacing: 0.01em;
}

/* Ritmo vertical uniforme entre secciones sin tocar cada widget. */
.adarga-section {
  padding-block: var(--adarga-space-section);
}

/* ==========================================================================
   2. BOTONES
   El theme usa Bootstrap. Se redefine la variante primaria y se le da
   un estado hover/focus con intención, no el default de Bootstrap.
   ========================================================================== */

.btn-primary,
.wpestate_vc_button,
.adarga-cta {
  --bs-btn-bg: var(--adarga-primary);
  --bs-btn-border-color: var(--adarga-primary);
  --bs-btn-hover-bg: var(--adarga-primary-hover);
  --bs-btn-hover-border-color: var(--adarga-primary-hover);
  --bs-btn-active-bg: var(--adarga-primary-hover);
  --bs-btn-active-border-color: var(--adarga-primary-hover);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  border-radius: var(--adarga-radius-md);
  padding: 0.75rem 1.5rem;
  font-family: var(--adarga-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color var(--adarga-duration) var(--adarga-ease),
              transform var(--adarga-duration) var(--adarga-ease);
}

.btn-primary:hover,
.adarga-cta:hover {
  transform: translateY(-1px);
}

/* Foco visible para navegación por teclado (WCAG 2.2). */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--adarga-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   3. TARJETA DE PROPIEDAD
   Clases reales: .property_listing, .listing_unit_price_wrapper,
   .property_location, .inforoom, .infobath, .infosize
   ========================================================================== */

.property_listing {
  background-color: var(--adarga-surface);
  border: 1px solid var(--adarga-border);
  border-radius: var(--adarga-radius-md);
  overflow: hidden;
  transition: box-shadow var(--adarga-duration) var(--adarga-ease),
              transform var(--adarga-duration) var(--adarga-ease);
}

.property_listing:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -12px rgb(20 27 49 / 0.28);
}

.property_listing .listing-unit-img-wrapper img {
  border-radius: var(--adarga-radius-md) var(--adarga-radius-md) 0 0;
}

/* Precio: mismo renglón que el título, alineado a la derecha (Figma). */
.property_listing .listing_unit_price_wrapper {
  font-family: var(--adarga-font-heading);
  font-weight: 700;
  color: var(--adarga-primary);
}

.property_listing .property_location {
  color: var(--adarga-text-muted);
  font-size: var(--adarga-text-small);
}

/* Los tres chips: "4 Recámaras · 2 Baños · 50 mts".
   En el Figma son pastillas con borde, no texto suelto. */
.property_listing .inforoom,
.property_listing .infobath,
.property_listing .infosize {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  margin-inline-end: 0.375rem;
  border: 1px solid var(--adarga-border);
  border-radius: var(--adarga-radius-sm);
  background-color: transparent;
  color: var(--adarga-text-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ==========================================================================
   4. BÚSQUEDA AVANZADA (hero y página de Propiedades)
   ========================================================================== */

.adv_search_wrapper,
.advanced_search_shortcode {
  background-color: var(--adarga-cream);
  border-radius: var(--adarga-radius-lg);
  border: 1px solid var(--adarga-border);
}

/* Botón "Buscar": azul tinta, no burdeos (Figma). */
.adv_search_wrapper .btn,
.advanced_search_shortcode .btn {
  --bs-btn-bg: var(--adarga-navy);
  --bs-btn-border-color: var(--adarga-navy);
  --bs-btn-hover-bg: #1E2846;
  --bs-btn-hover-border-color: #1E2846;
  border-radius: var(--adarga-radius-md);
}

/* ==========================================================================
   5. SIDEBAR DE FILTROS (página Propiedades)
   Los selectores de tipo y amenidades son pastillas conmutables.
   ========================================================================== */

.advanced_filter_wrapper {
  background-color: var(--adarga-surface);
  border: 1px solid var(--adarga-border);
  border-radius: var(--adarga-radius-md);
  padding: 1.5rem;
}

.advanced_filter_wrapper .filter_menu_item,
.advanced_filter_wrapper .checkbox_wrapper label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--adarga-border);
  border-radius: var(--adarga-radius-sm);
  color: var(--adarga-text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color var(--adarga-duration) var(--adarga-ease),
              background-color var(--adarga-duration) var(--adarga-ease),
              color var(--adarga-duration) var(--adarga-ease);
}

.advanced_filter_wrapper .filter_menu_item:hover {
  border-color: var(--adarga-border-strong);
}

/* Estado activo: relleno burdeos, como "Casa" y "Jardín" en el Figma. */
.advanced_filter_wrapper .filter_menu_item.active,
.advanced_filter_wrapper .checkbox_wrapper input:checked + label {
  background-color: var(--adarga-primary);
  border-color: var(--adarga-primary);
  color: #fff;
}

/* ==========================================================================
   6. FOOTER
   El fondo y los colores base van en Theme Options → Footer.
   Aquí solo la viñeta triangular y el ritmo de la lista.
   ========================================================================== */

.widget-title-footer {
  font-family: var(--adarga-font-heading);
  font-weight: 700;
  color: var(--adarga-navy);
  margin-bottom: 1.25rem;
}

/* Viñeta ▸ del menú "Explora" (Figma). Se dibuja con CSS, sin imágenes. */
.sub_footer .widget_nav_menu li,
.footer_widget .widget_nav_menu li {
  list-style: none;
  position: relative;
  padding-inline-start: 1.125rem;
  margin-bottom: 0.75rem;
}

.sub_footer .widget_nav_menu li::before,
.footer_widget .widget_nav_menu li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  border-block: 4px solid transparent;
  border-inline-start: 6px solid var(--adarga-text-subtle);
}

.copyright {
  color: var(--adarga-text-subtle);
  font-size: var(--adarga-text-small);
  text-align: center;
  border-top: 1px solid var(--adarga-border);
  padding-top: 1.5rem;
}

/* ==========================================================================
   7. RESPONSIVE
   Puntos de corte alineados con Bootstrap 5.3 del theme.
   ========================================================================== */

@media (max-width: 767.98px) {
  .property_listing .inforoom,
  .property_listing .infobath,
  .property_listing .infosize {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  .advanced_filter_wrapper {
    padding: 1.125rem;
  }
}

/* ==========================================================================
   8. LOGO SVG
   El logo es un SVG que declara viewBox pero no width/height, así que no tiene
   dimensiones intrínsecas: el navegador no puede deducir su tamaño y el theme
   —que asume un PNG— lo termina pintando a 0×0.
   Basta con fijar la altura; el ancho lo deriva el navegador del viewBox
   (1920×515 ≈ 3.73:1), que es justo el comportamiento que se quiere de un
   vector: nítido a cualquier densidad de pantalla.
   ========================================================================== */

.logo img,
#logo_image,
.sticky_logo img,
.mobile_logo img {
  height: 48px;
  width: auto;
  max-width: 100%;
}

/* El navbar del Figma mide 104px; en móvil el header se comprime. */
@media (max-width: 767.98px) {
  .logo img,
  #logo_image,
  .mobile_logo img {
    height: 38px;
  }
}

/* ==========================================================================
   9. MENÚ «EXPLORA» DEL FOOTER
   El widget de navegación de WpResidence está pensado para headers: renderiza
   un <nav class="navbar navbar-expand-lg px-5"> con menú horizontal y no expone
   control de orientación. Se conserva el widget —así el menú se sigue
   administrando desde WordPress → Menús en vez de quedar escrito a mano— y aquí
   solo se cambia su presentación.
   La clase `adarga-footer-menu` se asigna al widget desde Elementor, de modo
   que nada de esto toca el menú del header.
   Selectores tomados del HTML realmente emitido, no del nombre del widget.
   ========================================================================== */

/* El nav trae utilidades de Bootstrap (px-5) que sangran la columna. */
.adarga-footer-menu .wpresidence-navigation-menu {
  padding: 0 !important;
}

.adarga-footer-menu .menu-mega-menu-updated-container > ul.menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.adarga-footer-menu .menu-mega-menu-updated-container > ul.menu > li {
  list-style: none;
  position: relative;
  margin: 0;
  padding-inline-start: 1.125rem;
}

/* Viñeta del Figma, dibujada con bordes en vez de una imagen. */
.adarga-footer-menu .menu-mega-menu-updated-container > ul.menu > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  border-block: 4px solid transparent;
  border-inline-start: 6px solid var(--adarga-text-subtle);
  transition: border-inline-start-color var(--adarga-duration) var(--adarga-ease);
}

.adarga-footer-menu .menu-mega-menu-updated-container > ul.menu > li:hover::before,
.adarga-footer-menu .menu-mega-menu-updated-container > ul.menu > li.current-menu-item::before {
  border-inline-start-color: var(--adarga-primary);
}

.adarga-footer-menu .menu-mega-menu-updated-container > ul.menu > li > a {
  padding: 0 !important;
  font-family: var(--adarga-font-body);
  font-size: var(--adarga-text-body);
}


/* ==========================================================================
   10. TARJETAS DE «OUR IMPACT» (Inicio)
   El widget call-to-action del theme pinta el fondo sobre
   `.elementor-cta__content` y no expone control de radio de esquina. El
   redondeo y la altura pareja de las cuatro tarjetas se resuelven aquí.
   ========================================================================== */

.adarga-card .elementor-cta,
.adarga-card .elementor-cta__content {
  height: 100%;
}

.adarga-card .elementor-cta__content {
  border-radius: var(--adarga-radius-md);
}

/* ==========================================================================
   11. BOTÓN DEL BUSCADOR
   El widget imprime el icono y el texto como hermanos sin separación, así que
   quedan pegados («Buscar» tocando la lupa).
   ========================================================================== */

.wpresidence_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wpresidence_button .elementor-icon {
  display: inline-flex;
  margin-inline-end: 0.5rem;
}