/* ==========================================================================
   FILE: assets/css/mobile-nav.css
   PURPOSE: Mobile-only bottom nav bar + "Shop by Category" slide-up panel.
   Strict site theme: white background, black text/icons, no colour
   anywhere (gold is reserved for the announcement bar only).
   - Bar hides on scroll-down / reappears on scroll-up via the ".is-hidden"
     class, toggled by assets/js/mobile-nav.js (mirrors Kicks Mania's
     ".km-mn.is-hidden { transform:translateY(115%) }" pattern).
   - Category tiles (".dc-mn-card__media") use the same 3:4 image box,
     10px radius and 1px border that Kicks Mania's ".km-mn-card__media"
     uses, in a 2-column grid with the same 14px/12px gap.
   Desktop (900px+): the whole thing is hidden — mobile nav is mobile-only.
   HTML: template-parts/mobile-nav.php
   ========================================================================== */

.dc-mn-wrap { display: none; }

@media (max-width: 900px) {

	.dc-mn-wrap { display: block; }

	body { padding-bottom: 64px; }

	/* ---------- Bottom bar ---------- */
	.dc-mn {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 940;
		display: flex;
		padding-bottom: env( safe-area-inset-bottom, 0px );
		background: #fff;
		border-top: 1px solid #000;
		box-shadow: 0 -6px 18px rgba(0,0,0,.08);
		transition: transform .28s ease;
	}
	.dc-mn.is-hidden { transform: translateY(115%); }

	.dc-mn__item {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 9px 2px 8px;
		border: 0;
		background: none;
		color: #000;
		cursor: pointer;
		position: relative;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: transform .12s ease;
	}
	.dc-mn__item:link,
	.dc-mn__item:visited,
	.dc-mn__item:hover,
	.dc-mn__item:active { text-decoration: none; }
	.dc-mn__item:active { transform: scale(.92); }
	/* Active tab: same solid black icon, just a bit bolder label so it
	   still reads as "selected" without the icons losing their colour. */
	.dc-mn__item.is-active span:not(.dc-mn__badge) { font-weight: 800; }

	.dc-mn__item svg { width: 22px; height: 22px; display: block; }

	.dc-mn__item span:not(.dc-mn__badge) {
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		line-height: 1;
	}

	.dc-mn__badge {
		position: absolute;
		top: 2px; right: 18%;
		min-width: 16px; height: 16px;
		padding: 0 4px;
		border-radius: 9px;
		background: #000;
		color: #fff;
		font-size: 10px;
		font-weight: 800;
		line-height: 16px;
		text-align: center;
		box-shadow: 0 0 0 2px #fff;
	}
	.dc-mn__badge[hidden] { display: none; }
	.dc-mn__badge.is-pop { animation: dcMnPop .35s ease; }
	@keyframes dcMnPop {
		0%   { transform: scale(.5); }
		60%  { transform: scale(1.25); }
		100% { transform: scale(1); }
	}

	/* ---------- Scrim ---------- */
	.dc-mn-scrim {
		position: fixed; inset: 0;
		z-index: 1001;
		background: rgba(0,0,0,.5);
		opacity: 0;
		transition: opacity .25s ease;
	}
	.dc-mn-scrim[hidden] { display: none; }
	.dc-mn-scrim.is-open { opacity: 1; }

	/* ---------- Category panel ---------- */
	.dc-mn-panel {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 1002;
		max-height: 82vh;
		display: flex;
		flex-direction: column;
		background: #fff;
		border-top: 1px solid #000;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -18px 44px rgba(0,0,0,.18);
		transform: translateY(100%);
		transition: transform .32s cubic-bezier(.32,.72,0,1);
		overflow: hidden;
	}
	.dc-mn-panel[hidden] { display: none; }
	.dc-mn-panel.is-open { transform: none; }

	.dc-mn-panel__head {
		position: relative;
		flex: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 16px 14px;
		border-bottom: 1px solid #000;
	}
	.dc-mn-panel__head strong {
		font-size: 15px;
		letter-spacing: .5px;
		color: #000;
	}
	.dc-mn-grip {
		position: absolute;
		top: 7px; left: 50%;
		transform: translateX(-50%);
		width: 40px; height: 4px;
		border-radius: 3px;
		background: rgba(0,0,0,.18);
	}
	.dc-mn-close {
		width: 32px; height: 32px;
		padding: 0;
		border: 1px solid #000;
		border-radius: 50%;
		background: #fff;
		color: #000;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* ---------- Category grid: box size matches Kicks Mania's
	   .km-mn-card__media (3:4 tile, 10px radius, 1px border, 2 cols,
	   14px row gap / 12px column gap) ---------- */
	
		.dc-mn-grid {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));   /* ek line me 3 box */
		gap: 14px 10px;
		padding: 16px 14px calc(24px + env(safe-area-inset-bottom, 0px));
	}
	
	/* FIX: .dc-mn-card is an <a> tag — without this it shows the browser's
	   default blue underline under "Shop All" / "T-Shirts" / "Jeans" etc. */
	.dc-mn-card { display: block; text-decoration: none !important; }

	.dc-mn-card__media {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 3 / 4;
		border-radius: 10px;
		overflow: hidden;
		background: #f4f4f4;
		border: 1px solid #000;
		transition: transform .28s ease;
	}
	.dc-mn-card:active .dc-mn-card__media { transform: scale(.96); }

	.dc-mn-card__media img {
		width: 100%; height: 100%;
		object-fit: cover;
		display: block;
	}

	.dc-mn-card__media--all {
		background: #000;
		color: #fff;
	}
	.dc-mn-card__media--all svg { width: 30px; height: 30px; }

	.dc-mn-card__name {
		display: block;
		margin-top: 8px;
		text-align: center;
		font-size: 12px;
		font-weight: 600;
		color: #000;
		letter-spacing: .02em;
		line-height: 1.3;
	}

	body.dc-mn-lock { overflow: hidden; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
	.dc-mn, .dc-mn-panel, .dc-mn-scrim, .dc-mn__item { transition: none; animation: none; }
}