/**
 * AverixOne Responsive Stylesheet
 * Tablet and Mobile Adaptations
 *
 * @package AverixOne
 */

/* ==========================================================================
   1. TABLET SCREENS (MAX-WIDTH: 1024PX)
   ========================================================================== */

@media (max-width: 1024px) {
	:root {
		--av-sidebar-width: 280px;
	}

	.site-main-wrap.has-sidebar-right,
	.site-main-wrap.has-sidebar-left {
		grid-template-columns: minmax(0, 1fr);
	}

	.features-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-columns-grid.footer-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.blog-posts-grid.layout-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero-container {
		grid-template-columns: 1fr;
		gap: var(--av-space-8);
	}

	.hero-content {
		max-width: 100%;
	}

	.types-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--av-space-6);
	}

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

	.about-container {
		grid-template-columns: 1fr;
		gap: var(--av-space-8);
	}

	.why-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--av-space-6);
	}

	.performance-strip-grid {
		gap: var(--av-space-4);
	}
}

/* ==========================================================================
   2. MOBILE DEVICES (MAX-WIDTH: 768PX)
   ========================================================================== */

@media (max-width: 768px) {
	/* Header and Mobile Menu Drawer */
	.menu-toggle {
		display: inline-flex;
	}

	.primary-menu-container {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		background-color: var(--av-bg-elevated);
		border-bottom: 1px solid var(--av-border-color);
		box-shadow: var(--av-shadow-md);
		padding: var(--av-space-4) var(--av-container-gutter);
		z-index: var(--av-z-dropdown);
		flex-direction: column;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}

	.primary-menu-container.is-open {
		display: flex;
		animation: avSlideDown 200ms ease-out forwards;
	}

	@keyframes avSlideDown {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.nav-menu {
		flex-direction: column;
		width: 100%;
		align-items: stretch;
		gap: 0;
	}

	.nav-menu li {
		width: 100%;
		border-bottom: 1px solid var(--av-border-subtle);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.nav-menu li:last-child {
		border-bottom: 0;
	}

	.nav-menu a {
		flex: 1;
		padding: 0.75rem 0.5rem;
		min-height: 44px;
	}

	/* Accessible Mobile Submenu Accordion */
	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: var(--av-text-secondary);
		transition: transform var(--av-transition-fast);
	}

	.submenu-toggle[aria-expanded="true"] {
		transform: rotate(180deg);
		color: var(--av-color-lavender);
	}

	.nav-menu .sub-menu {
		position: static;
		width: 100%;
		box-shadow: none;
		border: 0;
		border-top: 1px solid var(--av-border-subtle);
		background-color: var(--av-bg-secondary);
		padding: 0.25rem 0 0.25rem 1rem;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	.nav-menu .sub-menu.is-open {
		display: block;
	}

	/* Hero adjustments */
	.hero-section {
		padding-top: var(--av-space-12);
		padding-bottom: var(--av-space-12);
	}

	.hero-title {
		font-size: var(--av-text-3xl);
	}

	.hero-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.hero-actions .btn {
		width: 100%;
	}

	.performance-strip-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--av-space-6) var(--av-space-4);
	}

	.perf-item:nth-child(2)::after,
	.perf-item:nth-child(4)::after {
		display: none;
	}

	.types-grid {
		grid-template-columns: 1fr;
		gap: var(--av-space-4);
	}

	.templates-grid {
		grid-template-columns: 1fr;
		gap: var(--av-space-6);
	}

	.why-grid {
		grid-template-columns: 1fr;
		gap: var(--av-space-6);
	}

	.section-spacing {
		padding-top: var(--av-space-10);
		padding-bottom: var(--av-space-10);
	}

	.section-title {
		font-size: 1.75rem;
	}

	/* Blog Grids */
	.blog-posts-grid.layout-grid-2,
	.blog-posts-grid.layout-grid-3 {
		grid-template-columns: 1fr;
	}

	/* Post Navigation */
	.post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	.post-navigation .nav-next {
		text-align: left;
	}

	/* Author Box */
	.author-box {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Footer */
	.footer-columns-grid.footer-grid-4,
	.footer-columns-grid.footer-grid-3,
	.footer-columns-grid.footer-grid-2 {
		grid-template-columns: 1fr;
	}

	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
		gap: var(--av-space-4);
	}

	.footer-nav-menu {
		justify-content: center;
		flex-wrap: wrap;
	}

	.footer-social-links {
		justify-content: center;
	}

	.back-to-top {
		bottom: 16px;
		right: 16px;
	}
}

/* ==========================================================================
   3. SMALL MOBILE PHONES (MAX-WIDTH: 480PX)
   ========================================================================== */

@media (max-width: 480px) {
	.header-container {
		min-height: 64px;
	}

	.header-cta-btn {
		display: none;
	}

	.single-post-entry,
	.page-entry,
	.card-body,
	.comments-area {
		padding: var(--av-space-5);
	}

	.cta-card {
		padding: var(--av-space-8) var(--av-space-4);
	}

	.performance-strip-grid {
		grid-template-columns: 1fr;
		gap: var(--av-space-5);
	}

	.perf-item::after {
		display: none !important;
	}

	.error-code-badge {
		font-size: 3.5rem;
	}
}