/*
Layout base de template-parts/aside.php.
Buscador -> categorías -> últimos blogs. Solo acomoda la info, sin diseño.
*/

/* Esto es el aside completo (buscador + categorías + últimos blogs, todo junto).
   Se usa en single.php, category.php, search.php y author.php. */
#blog-aside {
	width: 320px;    /* ancho fijo del aside (por eso las columnas de al lado usan flex:1, para que ocupen "el resto") */
	flex-shrink: 0;  /* evita que el aside se achique cuando el navegador es angosto, mantiene sus 320px */
	border: 2px solid red; /* borde de 2px, color rojo, para ubicar este bloque mientras diseñás */
}

/* Esto es lo que muestra tu buscador: el <form> con el input + el botón de búsqueda. */
#aside-search {
	position: relative; /* necesario para que la lista de sugerencias (#mitema-aside-search-results)
	                        se pueda posicionar "flotando" justo debajo de este bloque */
	border: 2px solid blue; /* borde de 2px, color azul, para ubicar este bloque mientras diseñás */
}

/* Esto es el <form> en sí: el input de texto + el botón, uno al lado del otro. */
#mitema-aside-search-form {
	display: flex; /* pone el input y el botón en fila */
	gap: 8px;        /* espacio entre el input y el botón */
}

/* Esto es específicamente el campo de texto donde escribís para buscar. */
#mitema-aside-search-input {
	flex: 1;      /* ocupa todo el espacio sobrante dentro del form (el botón tiene su ancho propio) */
	min-width: 0; /* evita que el input desborde el ancho del aside */
	border: 2px solid green; /* borde de 2px, color verde, para ubicar este bloque mientras diseñás */
}

/* Esto es la lista de sugerencias que aparece flotando mientras escribís en el buscador
   (la arma el JS de assets/js/live-search.js con lo que devuelve la búsqueda en vivo). */
#mitema-aside-search-results {
	position: absolute; /* la saca del flujo normal y la "flota" sobre el resto del contenido */
	top: 100%;             /* la pega justo debajo del buscador (100% de la altura del padre relative) */
	left: 0;
	right: 0;              /* left+right en 0 hace que ocupe el mismo ancho que el buscador */
	z-index: 10;           /* la pone por ENCIMA de lo que venga después (el resto del aside), para que no quede tapada */
	list-style: none;      /* saca las viñetas por defecto de la lista */
	margin: 4px 0 0;       /* un poquito de separación respecto al buscador */
	padding: 0;            /* saca el padding por defecto de la lista */
	border: 2px solid orange; /* borde de 2px, color naranja, para ubicar este bloque mientras diseñás */
}

/* Esto es cada sugerencia individual dentro de esa lista flotante. */
#mitema-aside-search-results li {
	margin: 0;
}

/* Esto es el bloque completo de la lista de categorías del sitio. */
#aside-categories {
	margin-top: 32px; /* separación respecto al buscador (o al índice, si estuviera arriba) */
	border: 2px solid purple; /* borde de 2px, color violeta, para ubicar este bloque mientras diseñás */
}

/* Esto es la lista (<ul>) de categorías en sí, la arma wp_list_categories() automático. */
#aside-categories ul {
	list-style: none; /* saca las viñetas por defecto */
	margin: 0;
	padding: 0;
}

/* Esto es cada categoría individual dentro de esa lista. */
#aside-categories li {
	margin-bottom: 6px; /* separación entre una categoría y la siguiente */
}

/* Esto es el bloque completo de "últimos blogs publicados" (los 5 posts más recientes,
   cada uno con su meta imagen). */
#aside-latest-posts {
	margin-top: 32px; /* separación respecto al bloque de categorías de arriba */
	border: 2px solid teal; /* borde de 2px, color teal, para ubicar este bloque mientras diseñás */
}

/* Esto es cada item individual dentro de "últimos blogs" (la imagen + el título, uno al lado del otro). */
.aside-latest-item {
	display: flex;         /* pone la imagen y el título en fila */
	align-items: center;   /* los centra verticalmente entre sí */
	gap: 12px;               /* espacio entre la imagen y el título */
	margin-bottom: 16px;    /* separación entre un post y el siguiente en la lista */
	border: 2px solid deeppink; /* borde de 2px, color rosa fuerte, para ubicar este bloque mientras diseñás */
}

/* Esto es específicamente la meta imagen (miniatura) de cada post en "últimos blogs". */
.aside-latest-item img {
	width: 64px;         /* ancho fijo de la miniatura */
	height: 64px;        /* alto fijo, igual al ancho (para que sea cuadrada) */
	object-fit: cover;   /* recorta la imagen para que llene el cuadro de 64x64 sin deformarse */
	flex-shrink: 0;      /* evita que la miniatura se achique si el título es muy largo */
}