/*
 Theme Name:   GrúasYa
 Theme URI:    https://juweb.pro
 Description:  Default GrúasYa child theme
 Author:       Julian Drusin
 Author URI:   https://juweb.pro
 Template:     generatepress
 Version:      0.1
*/

/*================================================================
  1. Tipografía y Estilos Base (Typography & Base)
================================================================*/

/* Encabezados y Balanceo de texto */
h1, h2, h3, h4, h5, h6, 
.balance {
  text-wrap: balance;
}

/* Párrafos y Listas */
p:last-child:last-of-type {
  margin-bottom: 0;
}

blockquote, 
li {
  text-wrap: pretty;
}

/* Negritas */
p strong, 
b, 
strong,
.info-bar p strong {
  font-weight: 600;
}

/*================================================================
  2. Estructura y Layout (Structure & Layout)
================================================================*/

/* Contenedor Principal */
#content {
  min-height: 100vh;
}

/* Cabecera del Sitio */
.site-header {
  background-color: var(--base-3);
  box-shadow: 0 5px 20px -10px hsl(0deg 0% 0% / 15%);
}

/* Imagen Destacada */
.featured-image img {
  border-radius: 20px;
}

/*================================================================
  3. Utilidades (Utilities & Helpers)
================================================================*/

/* Separador discontinuo */
.hr-dash {
  border-top: 2px dashed white;
  height: 0;
  margin: 40px 0;
}

/* Cortar texto a 4 líneas */
.clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Estado expandido */
.city-text.is-expanded {
  -webkit-line-clamp: unset;
}

/*================================================================
  4. Componentes (Components)
================================================================*/

/* --- Items de Servicios --- */
.services-item h3.title {
  text-wrap: balance;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* --- Buscador de Ciudades (City Search) --- */
.city-search-wrap {
  margin-top: 14px;
  margin-bottom: 14px;
}

.city-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 16px;       /* 2xl-ish */
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .06);
}

.city-search-bar:focus-within {
  /*box-shadow: 0 0 0 2px #1d4ed8;*/
  border-color: rgba(15, 23, 42, .25);
}

.city-search-ico {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f8fafc; /* slate-50 */
  border: 1px solid #e2e8f0;
  color: #0f172a;      /* slate-900 */
}

#citySearch {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: #0f172a;
  padding: 8px 6px;
}

#citySearch::placeholder {
  color: #64748b; /* slate-500 */
}

.city-search-clear {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
}

.city-search-clear:hover {
  background: #f8fafc;
}

.city-search-empty {
  margin-top: 10px;
  font-size: 14px;
  color: #64748b;
}

/*  AJUSTES MÓVILES (Pantallas < 640px) */
@media (max-width: 640px) {
  
  /* Reducimos el relleno del contenedor principal */
  .city-search-bar {
    padding: 8px 10px; 
    gap: 8px; /* Menos espacio entre icono, input y botón */
  }

  /* Hacemos el icono un poco más pequeño si es necesario */
  .city-search-ico {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  
  /* Ajuste crítico: Botón "Limpiar" más compacto */
  .city-search-clear {
    padding: 8px 10px; /* Menos relleno */
    font-size: 13px;   /* Texto un poco más pequeño */
  }

  /* Ajustamos el tamaño de la fuente del input para que cuadre */
  #citySearch {
    font-size: 15px;
  }
}