/* Universal Pro Theme — responsive v1.0.9 */
@media (max-width: 1024px) {
	.up-grid { grid-template-columns: repeat(2, 1fr); }
	.up-footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet (641px - 1024px): fixed header, logo 70px center, nav + login/register inline, hamburger hidden */
@media (min-width: 641px) and (max-width: 1024px) {
	.up-header-inner { gap: 1rem; min-height: 94px; padding: 12px 16px; }
	.up-nav { gap: 1rem; }
	.up-menu { gap: 1rem; }
	.up-header-right { gap: 0.75rem; }
	.up-header-actions { gap: 0.5rem; }
	.up-btn-header {
		padding: 0.5rem 0.85rem;
		min-height: 40px;
		font-size: 0.85rem;
	}
	.up-brand img { max-height: 70px; height: 70px; max-width: 70px; }
	body { padding-top: 94px; }
	body.admin-bar { padding-top: 126px; }
}

/* Mobile header (≤ 640px): TWO-ROW layout.
   Row 1: Logo full width, big (90px), centered.
   Row 2: Login + Register + Hamburger in a single centered row.
   Nav slides in from the right (sidebar) with navigation links only. */
@media (max-width: 640px) {
	html, body { overflow-x: hidden; max-width: 100vw; }
	body { padding-top: 170px; }

	/* Two-row header: logo on top, buttons row below */
	.up-header-inner {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: 12px;
		padding: 12px 16px;
		min-height: auto;
		align-items: center;
	}
	.up-header-left { display: none; }

	/* Row 1 — Logo: full width, big (90px), centered, proper aspect ratio */
	.up-brand {
		grid-row: 1;
		width: 100%;
		justify-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.up-brand img {
		max-height: 90px;
		height: auto;
		width: auto;
		max-width: 90%;
		object-fit: contain;
	}
	.up-logo-text { font-size: 1.5rem; text-align: center; }

	/* Row 2 — Login + Register + Hamburger, single centered row, no wrapping */
	.up-header-right {
		grid-row: 2;
		width: 100%;
		justify-self: stretch;
		justify-content: center;
		gap: 8px;
		flex-wrap: nowrap;
	}
	.up-header-actions { gap: 8px; flex-wrap: nowrap; justify-content: center; }

	/* Login: 36px height (smaller). Register: 40px height (slightly larger). */
	.up-btn-header {
		padding: 8px 12px;
		font-size: 14px;
		border-radius: 4px;
		white-space: nowrap;
		font-weight: 600;
		line-height: 1;
		min-height: 40px;
	}
	.up-btn-header.btn-outline {
		min-height: 36px;
		border: 1px solid #ffffff;
		background: transparent;
		color: #ffffff;
	}
	.up-btn-header.btn-outline:hover { background: #2d2d2d; border-color: #ffffff; color: #ffffff; }
	.up-btn-header.btn-gold {
		min-height: 40px;
		background: #FFD700;
		color: #1a1a1a;
		border: none;
	}
	.up-btn-header.btn-gold:hover { background: #FFC700; color: #1a1a1a; }

	/* Hamburger: 24x24 icon, 44px touch target via padding, 8px gap from buttons */
	.up-nav-toggle {
		display: inline-flex;
		width: 44px; height: 44px;
		padding: 10px;
		border-radius: 4px;
		flex-shrink: 0;
		pointer-events: auto;
		cursor: pointer;
	}
	.up-nav-toggle span { width: 24px; height: 2px; margin: 5px auto; }

	/* Nav sidebar — slides in from the right, navigation links only */
	.up-nav {
		position: fixed; top: 0; right: -100%; height: 100dvh;
		width: 80%; max-width: 320px; background: #1a1a1a;
		border-left: 1px solid #404040;
		padding: 4.5rem 16px 1.5rem; overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
		transition: right 280ms ease; z-index: 1100;
		box-shadow: -8px 0 24px rgba(0,0,0,0.4);
		pointer-events: none;
	}
	.up-nav.is-open { right: 0; pointer-events: auto; }

	/* Close button (X) at top of menu */
	.up-nav-close { display: inline-flex; pointer-events: auto; cursor: pointer; z-index: 10; }

	/* Overlay backdrop behind sidebar */
	.up-nav-overlay {
		position: fixed; top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(0, 0, 0, 0.5); z-index: 1090;
		opacity: 0; visibility: hidden;
		cursor: pointer;
		transition: opacity 280ms ease, visibility 280ms ease;
	}
	.up-nav-overlay.is-visible { opacity: 1; visibility: visible; }

	/* Menu items: 16px vertical spacing, white text, gold hover, border bottom */
	.up-menu { flex-direction: column; gap: 0; }
	.up-menu li { width: 100%; }
	.up-menu a {
		display: block; padding: 16px 8px; font-size: 16px;
		color: #ffffff; border-bottom: 1px solid #404040;
		border-radius: 0; transition: color 200ms ease, background 200ms ease;
	}
	.up-menu a:hover { color: #FFD700; background: rgba(255, 215, 0, 0.08); }
	.up-menu li:last-child a { border-bottom: none; }

	.up-grid { grid-template-columns: 1fr; }
	.up-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.up-hero { padding: 2.5rem 0; }
	.up-hero-actions .btn { width: 100%; }
}

/* Very small mobile (≤ 480px): keep two-row layout, tighten spacing, logo 80px */
@media (max-width: 480px) {
	.up-container { padding: 0 1rem; }
	.up-card-body { padding: 1rem; }
	.up-header-inner { padding: 10px 12px; gap: 10px; }
	.up-header-right { gap: 6px; }
	.up-header-actions { gap: 6px; }
	.up-btn-header { padding: 8px 10px; font-size: 13px; }
	.up-brand img { max-height: 80px; max-width: 90%; }
	body { padding-top: 160px; }
}