/* =============================================================
   SITIOSTORE THEME — responsive.css
   Mobile-first: el estilo base (móvil) vive en style.css.
   Aquí solo se sobrescribe para tablet y desktop.
   Breakpoints (ver Fase 0, sección 3):
     Móvil:   0–639px   (estilos base, sin media query)
     Tablet:  640–1023px
     Desktop: 1024px+
   ============================================================= */

/* -------------------------------------------------------------
   TABLET: 640px+
   ------------------------------------------------------------- */
@media (min-width: 640px) {

	.site-container {
		padding-left: var(--space-5);
		padding-right: var(--space-5);
	}

	h1 { font-size: 2.25rem; }
	h2 { font-size: 1.75rem; }

	.site-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-hero {
		min-height: 420px;
	}

	.site-hero__title {
		font-size: 2.5rem;
	}
}

/* -------------------------------------------------------------
   DESKTOP: 1024px+
   ------------------------------------------------------------- */
@media (min-width: 1024px) {

	.site-container {
		padding-left: var(--space-6);
		padding-right: var(--space-6);
	}

	h1 { font-size: 2.75rem; }
	h2 { font-size: 2rem; }

	/* Header desktop: toggle oculto, menú siempre visible. */
	.mobile-menu-toggle {
		display: none !important;
	}

	.site-header__bottom {
		max-height: none !important;
		overflow: visible;
	}

	.site-header__nav {
		min-height: var(--header-bottom-height);
	}

	.site-footer__columns {
		grid-template-columns: repeat(3, 1fr);
	}

	.site-hero {
		min-height: 520px;
	}

	.site-hero__title {
		font-size: 3rem;
	}
}

/* -------------------------------------------------------------
   MENÚ MÓVIL (0–1023px): comportamiento del toggle
   ------------------------------------------------------------- */
@media (max-width: 1023px) {

	.site-header__bottom {
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--transition-base);
	}

	.site-header__bottom.is-open {
		max-height: 600px;
	}

	.primary-menu {
		flex-direction: column;
		gap: 0;
		padding: var(--space-2) 0 var(--space-4);
	}

	.primary-menu > li > a {
		height: auto;
		line-height: 1.5;
		padding: var(--space-2) 0;
		border-bottom: 1px solid var(--color-border);
		border-bottom-color: var(--color-border) !important;
	}

	/* Animación hamburguesa → X: ahora se maneja via JS
	   mostrando/ocultando los SVGs en header.php */
}