/**
 * YugenManga Responsive Media Queries & Mobile Drawer
 *
 * @package YugenManga
 */

/* ==========================================================================
   1. Mobile Navigation Drawer (below 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
	.primary-navigation {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: calc(100vh - var(--header-height));
		height: calc(100dvh - var(--header-height));
		background-color: #ffffff;
		flex-direction: column;
		align-items: stretch;
		padding: 1.5rem 1.25rem 2rem;
		border-top: 1px solid var(--color-border);
		transform: translateX(-100%);
		transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
		visibility: hidden;
		z-index: 9999;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		display: flex;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
	}

	.primary-navigation.is-open {
		transform: translateX(0);
		visibility: visible;
	}

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

	.nav-menu li {
		width: 100%;
	}

	.nav-menu a {
		display: flex;
		align-items: center;
		padding: 0.85rem 1.15rem;
		font-size: 1.05rem;
		font-weight: 600;
		color: var(--color-text);
		border-radius: var(--radius-md);
		border: 1px solid transparent;
		transition: all var(--transition-fast);
	}

	.nav-menu a:hover,
	.nav-menu .current-menu-item > a {
		background-color: var(--color-brand-light);
		color: var(--color-brand);
		border-color: rgba(109, 74, 255, 0.15);
	}

	.mobile-nav-footer {
		margin-top: auto;
		padding-top: 1.5rem;
		border-top: 1px solid var(--color-border);
		display: flex;
		flex-direction: column;
		gap: 0.85rem;
	}

	.mobile-nav-contact-link {
		text-align: center;
		font-size: 0.875rem;
	}

	.mobile-nav-contact-link a {
		color: var(--color-text-muted);
		text-decoration: none;
	}

	.mobile-nav-contact-link a:hover {
		color: var(--color-brand);
		text-decoration: underline;
	}

	.mobile-nav-toggle {
		display: inline-flex;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}

	.footer-col-brand {
		grid-column: 1 / -1;
	}

	.manga-detail-hero {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.manga-detail-cover {
		max-width: 240px;
		margin: 0 auto;
	}

	.hero-content-grid {
		grid-template-columns: 1fr !important;
		gap: 2.5rem !important;
	}

	.app-showcase-grid {
		grid-template-columns: 1fr !important;
		gap: 2.5rem !important;
	}
}

/* ==========================================================================
   2. Small Tablets & Phablets (below 768px)
   ========================================================================== */
@media (max-width: 767px) {
	:root {
		--header-height: 62px;
	}

	.site-section {
		padding-block: 2.75rem;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 1rem;
		text-align: center;
	}

	.section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

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

	.blog-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

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

	.btn-header-cta {
		display: none; /* Accessible in mobile menu drawer */
	}

	.brand-tagline {
		display: none;
	}

	.brand-title {
		font-size: 1.15rem;
	}

	.header-inner {
		gap: 0.75rem;
	}

	.header-actions {
		gap: 0.5rem;
	}

	.btn-header-search,
	.mobile-nav-toggle {
		width: 38px;
		height: 38px;
	}

	.yugen-contact-card {
		padding: 1.5rem;
	}

	.hero-cta-group {
		flex-direction: column;
		width: 100%;
	}

	.hero-cta-group .btn {
		width: 100%;
	}

	.hero-stats-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.75rem;
		border-top: 1px solid var(--color-border);
		padding-top: 1.25rem;
		width: 100%;
	}

	.hero-stats-row > div {
		min-width: 0;
	}

	.hero-stats-row span:first-child {
		font-size: 1.25rem !important;
	}

	.hero-stats-row span:last-child {
		font-size: 0.72rem !important;
		line-height: 1.25;
	}
}

/* ==========================================================================
   3. Small Mobile Devices (below 480px)
   ========================================================================== */
@media (max-width: 480px) {
	.site-container,
	.site-container-narrow {
		padding-inline: 1rem;
	}

	.manga-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	.manga-card-body {
		padding: 0.65rem;
	}

	.manga-card-title {
		font-size: 0.875rem;
	}

	.genres-grid {
		grid-template-columns: 1fr;
	}

	.search-modal-window {
		margin-inline: 1rem;
	}

	.tool-calc-box,
	.tool-results-panel {
		padding: 1.5rem 1.25rem;
	}

	.tool-hero-value {
		font-size: 1.95rem;
	}

	.tool-breakdown-grid {
		grid-template-columns: 1fr;
	}

	.hero-stats-row {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5rem;
	}

	.hero-stats-row span:first-child {
		font-size: 1.1rem !important;
	}

	.hero-stats-row span:last-child {
		font-size: 0.68rem !important;
	}
}

/* ==========================================================================
   4. Ultra Small Displays (320px)
   ========================================================================== */
@media (max-width: 350px) {
	.manga-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   5. Accessibility: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}