/* 
 * Responsive Stylesheet for Siempre Arriba Theme
 * Handles all breakpoints and mobile-specific CSS overrides.
 */

/* ==========================================
   MOBILE / CELLULAR STYLES (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {

	/* Header Navigation & Mobile Menu */
	.header-navigation-wrapper {
		gap: var(--spacing-md);
	}

	.header-actions {
		display: none;
	}

	.navbar-brand img,
	.site-branding img {
		max-height: 45px !important;
		/* Logo más compacto en celulares */
	}

	/* Submenú flotante sobre el contenido */
	.navbar {
		position: relative;
	}

	.navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: #ffffff;
		z-index: 1050;
		padding: 10px 20px 20px 20px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	/* Mejorar botón toggler al hacer clic */
	.navbar-toggler {
		outline: none !important;
		box-shadow: none !important;
		border: 1px solid rgba(0, 0, 0, 0.1) !important;
		padding: 6px 10px;
		border-radius: 8px;
		transition: background-color 0.2s ease, border-color 0.2s ease;
	}

	.navbar-toggler:focus,
	.navbar-toggler:active {
		outline: none !important;
		box-shadow: none !important;
		background-color: rgba(0, 0, 0, 0.04) !important;
		border-color: rgba(0, 0, 0, 0.2) !important;
	}

	/* Global Page Banner - Mobile view */
	.global-page-banner {
		height: clamp(300px, 50vh, 400px) !important;
		/* Ajuste para móviles para mostrar mejor la imagen de 600x800px */
		margin-bottom: var(--spacing-lg) !important;
	}

	.global-page-banner .banner-title {
		font-size: 1.8rem !important;
		/* Título un poco más pequeño y legible en pantallas de celulares */
		text-align: center !important;
		/* Centrado en móviles para mejorar estética */
	}

	.global-page-banner .container {
		padding-top: var(--spacing-lg) !important;
		padding-bottom: var(--spacing-lg) !important;
	}

	/* Main site wrapper & content padding on mobile */
	.site-main {
		padding-left: var(--spacing-md);
		padding-right: var(--spacing-md);
	}

	/* Cards and listings spacing on mobile */
	.card {
		margin-bottom: var(--spacing-sm);
	}

	.card-body {
		padding: var(--spacing-md) !important;
	}

	/* Footer styling on mobile */
	.site-footer {
		text-align: center;
		padding-top: var(--spacing-lg) !important;
		padding-bottom: var(--spacing-lg) !important;
	}

	.footer-branding {
		margin-bottom: var(--spacing-lg);
	}

	.footer-logo {
		display: flex;
		justify-content: center;
	}

	.footer-social-icons {
		justify-content: center;
		margin-top: var(--spacing-md);
	}

	.btn-whatsapp {
		width: 100%;
		justify-content: center;
	}

	.whatsapp-float-btn {
		bottom: 20px;
		right: 20px;
		width: 50px;
		height: 50px;
		font-size: 26px;
	}
}

/* ==========================================
   TINY MOBILE / SMARTPHONES (max-width: 576px)
   ========================================== */
@media (max-width: 576px) {

	/* Comments indentation on small mobile screens */
	.comment-list .children {
		padding-left: 20px;
	}

	/* Adjust grid paddings for small screens */
	.row {
		--bs-gutter-x: 1rem;
	}
}

/* ==========================================
   DESKTOP STYLES (min-width: 768px)
   ========================================== */
@media (min-width: 768px) {
	.global-page-banner {
		height: clamp(550px, 35vh, 500px) !important;
		/* Ajuste para desktop para mostrar mejor la imagen de 1960x900px */
	}
}