/* Extra small <576px
Small ≥576px
Medium ≥768px
Large ≥992px
Extra large ≥1200px */

/*
 * Mobile hero / section pictures.
 * Use FULL assets + aspect-ratio (not fixed height) so the mixer is never cropped.
 * pic-01-adaptive.jpg itself is a tight crop — prefer pic-01.jpg on mobile.
 */
.pic-01-adaptive {
	background: #fff url("../images/pic-01.jpg") no-repeat center center;
	background-size: contain;
	width: 100%;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	height: 0;
	padding-bottom: 71.76%; /* 615/857 — full mixer, not cropped adaptive jpg */
	box-sizing: content-box;
}

.pic-03-adaptive {
	background: #fff url("../images/pic-03.jpg") no-repeat center center;
	background-size: contain;
	width: 100%;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
	height: 0;
	padding-bottom: 93.48%; /* 559/598 */
	box-sizing: content-box;
}

.pic-04-adaptive {
	background: #fff url("../images/pic-04-adaptive.jpg") no-repeat center center;
	background-size: contain;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	height: 0;
	padding-bottom: 72.24%; /* 622/861 */
	box-sizing: content-box;
}

.pic-05-adaptive {
	background: #fff url("../images/pic-05-adaptive.jpg") no-repeat center center;
	background-size: contain;
	width: 100%;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	height: 0;
	padding-bottom: 64.69%; /* 207/320 */
	box-sizing: content-box;
}

@supports (aspect-ratio: 1 / 1) {
	.pic-01-adaptive {
		height: auto;
		padding-bottom: 0;
		aspect-ratio: 857 / 615;
		box-sizing: border-box;
	}
	.pic-03-adaptive {
		height: auto;
		padding-bottom: 0;
		aspect-ratio: 598 / 559;
		box-sizing: border-box;
	}
	.pic-04-adaptive {
		height: auto;
		padding-bottom: 0;
		aspect-ratio: 861 / 622;
		box-sizing: border-box;
	}
	.pic-05-adaptive {
		height: auto;
		padding-bottom: 0;
		aspect-ratio: 320 / 207;
		box-sizing: border-box;
	}
}

/* Global mobile safety (no SEO impact — CSS only) */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	overflow-x: hidden;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

svg:not(.icon) {
	max-width: 100%;
	height: auto;
}

body.menu-open {
	overflow: hidden;
}

/* Avoid horizontal scroll from long BTC addresses / PGP / URLs */
main a,
main p,
main li,
footer a,
[aria-label="MixTum guides"] {
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

table {
	max-width: 100%;
}

/* xs + sm + md + lg */

@media (max-width: 1199px) {
	.h4, h4 {
		font-size: 1.4rem;
	}
	.pic-05 {
		background-position: right -100px top;
	}
}

/* xs + sm + md — tablet/phone menu */

@media (max-width: 991px) {
	header > .container {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* Keep logo clear of absolute burger */
	header > .container > .row > [class*="col-"]:first-child {
		padding-right: 56px;
		min-height: 48px;
	}

	header > .container > .row > [class*="col-"]:first-child img {
		max-height: 48px;
		width: auto;
	}

	.menu {
		width: auto;
		position: absolute;
		z-index: 100;
		top: 0;
		right: 0;
		padding: 10px 12px 12px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		background: transparent;
		transition: background 0.2s ease;
	}

	.menu .menu-toggle {
		cursor: pointer;
		padding: 10px;
		margin: -8px;
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		-webkit-tap-highlight-color: transparent;
		outline: none;
	}

	.menu .menu-toggle:focus-visible {
		outline: 2px solid #94cce7;
		outline-offset: 2px;
	}

	.menu .nav hr {
		border-color: #fff;
	}

	/* Default (e.g. rare headers without burger): keep links visible */
	.menu .nav {
		margin: 10px 0 0;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0 4px;
		max-height: none;
		max-width: none;
		opacity: 1;
		pointer-events: auto;
		overflow: visible;
		padding: 0;
		background: transparent;
	}

	.menu .nav .nav-link {
		padding: 0.4rem 0.55rem;
		white-space: nowrap;
		min-height: 40px;
		color: #000;
		display: flex;
		align-items: center;
	}

	/* Headers with burger — collapse until opened */
	.menu:has(.icon.d-lg-none) .nav,
	.menu.js-collapsible .nav,
	.menu:has(.icon.d-lg-none) .nav a,
	.menu.js-collapsible .nav a {
		color: #fff;
	}

	.menu:has(.icon.d-lg-none) .nav,
	.menu.js-collapsible .nav {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		overflow: hidden;
		max-height: 0;
		max-width: 0;
		opacity: 0;
		pointer-events: none;
		padding: 0;
		background: #000;
		border-radius: 8px;
		transition:
			max-height 0.2s ease,
			max-width 0.2s ease,
			opacity 0.15s ease,
			padding 0.2s ease;
	}

	.menu:has(.icon.d-lg-none).is-open,
	.menu.js-collapsible.is-open {
		background: #000;
		border-radius: 8px;
	}

	.menu:has(.icon.d-lg-none).is-open .nav,
	.menu.js-collapsible.is-open .nav {
		max-height: min(70vh, 480px);
		max-width: min(290px, calc(100vw - 48px));
		opacity: 1;
		pointer-events: auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 16px 14px;
	}

	.menu:has(.icon.d-lg-none) .nav-link,
	.menu.js-collapsible .nav-link {
		padding: 0.55rem 0;
		min-height: 44px;
		color: #fff;
		white-space: normal;
	}

	.menu .nav-item {
		display: block !important;
	}

	.menu .nav-item.adaptive-only {
		display: block !important;
	}

	.pic-01 {
		background: none;
		min-height: 0;
	}

	.pic-03 {
		min-height: 0;
	}

	.pic-05 {
		background: none;
		min-height: 0;
	}

	main .btn-mix.mr-2,
	main p > .btn-mix {
		margin-bottom: 0.5rem;
	}

	/* Hero CTAs: full width under lg */
	.pic-01 .col-8.offset-2 {
		flex: 0 0 100%;
		max-width: 100%;
		margin-left: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.pic-01 .pt-3 {
		padding-left: 0;
		padding-right: 0;
	}
}

/* xs + sm */

@media (max-width: 767px) {
	h1, .h1 {
		font-size: 1.8rem;
		line-height: 1.25;
		letter-spacing: 1px;
		word-wrap: break-word;
		overflow-wrap: anywhere;
	}

	.h1.e1-small {
		letter-spacing: 1px;
	}

	.h3, h3 {
		font-size: 1.3rem;
		letter-spacing: 1px;
	}

	.h4, h4 {
		font-size: 1.2rem;
	}

	.font-25 {
		font-size: 20px;
	}

	.pic-01 {
		background: none;
		min-height: 0;
		padding-bottom: 1.5rem;
	}

	.pic-01-adaptive {
		max-width: min(100%, 400px);
		margin-bottom: 0.5rem;
	}

	.pic-02 {
		background-position: center top -150px;
		padding-top: 200px;
	}

	.pic-03-adaptive {
		max-width: min(100%, 320px);
	}

	.pic-04-adaptive {
		max-width: 100%;
	}

	.pic-05-adaptive {
		max-width: min(100%, 360px);
		margin-bottom: 1rem;
	}

	.pic-06 {
		margin-right: -15px;
	}

	.address {
		padding: 0.85rem 2.4rem 0.85rem 1rem;
		font-size: 1.05rem;
		line-height: 1.45;
		border-radius: 16px;
		word-break: break-all;
		overflow-wrap: anywhere;
		max-width: 100%;
		box-sizing: border-box;
	}

	.address .icon,
	.address .copy-to-clipboard {
		right: 8px !important;
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.form-control-mix,
	input.form-control,
	textarea.form-control,
	select.form-control {
		font-size: 16px !important; /* iOS: no zoom on focus */
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.form-control-mix.form-control-lg,
	.form-control-mix {
		height: auto !important;
		min-height: 52px;
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
		line-height: 1.3;
	}

	.btn-mix {
		display: block;
		width: 100%;
		max-width: 100%;
		padding-left: 24px;
		padding-right: 24px;
		min-height: 48px;
		box-sizing: border-box;
		text-align: center;
	}

	.btn-mix + .btn-mix,
	.btn-mix.mr-2,
	main p .btn-mix {
		margin-right: 0 !important;
		margin-bottom: 0.75rem;
		display: block;
	}

	.btn-mix:last-child {
		margin-bottom: 0;
	}

	.pgp {
		display: block;
		max-width: 100%;
		word-break: break-all;
		overflow-wrap: anywhere;
		box-sizing: border-box;
	}

	footer .list-unstyled {
		margin-bottom: 1rem;
	}

	footer .col-6 {
		margin-bottom: 0.5rem;
	}

	header .mirror {
		white-space: normal;
		font-size: 12px;
		padding-bottom: 8px;
	}

	main .lead {
		font-size: 1.05rem;
	}

	#qr-code {
		max-width: min(180px, 70vw);
		height: auto;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	#calculator-form .col-12 {
		margin-bottom: 1rem;
	}

	#forward-address,
	#deposit-address {
		word-break: break-all;
		overflow-wrap: anywhere;
	}

	[aria-label="MixTum guides"] p,
	article .mt-5.mb-2 {
		line-height: 1.6;
	}

	a[href="#top"] {
		bottom: max(12px, env(safe-area-inset-bottom, 0px));
		left: max(12px, env(safe-area-inset-left, 0px));
		z-index: 90;
		opacity: 0.55;
	}

	article.container,
	main > .container.bg-white {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}

	.bg-white.d-flex .h1.nospacing {
		font-size: 1.5rem;
		padding: 1rem !important;
	}

	.bg-white.d-flex .flex-fill {
		padding-right: 1rem !important;
	}

	/* Tables / FAQ / legal — horizontal scroll instead of page overflow */
	main table,
	article table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Landing / trust pages: stack CTA groups */
	article .btn-mix,
	main article a.btn {
		display: block;
		width: 100%;
		max-width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 0.75rem;
		text-align: center;
		box-sizing: border-box;
	}

	article .btn-mix:last-child,
	main article a.btn:last-child {
		margin-bottom: 0;
	}

	/* Mix form layout */
	#calculator-form .row > [class*="col-"] {
		margin-bottom: 0.75rem;
	}

	.form-group {
		margin-bottom: 1rem;
	}

	pre, code {
		max-width: 100%;
		overflow-x: auto;
		word-break: break-word;
		white-space: pre-wrap;
	}
}

/* xs */

@media (max-width: 575px) {
	header .menu {
		right: 0;
		padding-right: 4px;
	}

	.menu:has(.icon.d-lg-none).is-open .nav,
	.menu.js-collapsible.is-open .nav {
		max-height: calc(100vh - 64px - env(safe-area-inset-bottom, 0px));
		max-width: calc(100vw - 24px);
		width: calc(100vw - 24px);
	}

	h1, .h1 {
		font-size: 1.55rem;
		letter-spacing: 0.5px;
	}

	.h1.e1-small {
		font-size: 1.25rem;
	}

	.h3, h3 {
		font-size: 1.15rem;
	}

	.h4, h4 {
		font-size: 1.05rem;
	}

	.font-25 {
		font-size: 18px;
	}

	.pic-01-adaptive {
		max-width: 100%;
		padding-left: 8px;
		padding-right: 8px;
		box-sizing: border-box;
	}

	.pic-04-adaptive {
		margin-left: -15px;
		margin-right: -15px;
		width: calc(100% + 30px);
		max-width: none;
	}

	.pic-05-adaptive {
		max-width: 100%;
	}

	.container {
		padding-left: max(16px, env(safe-area-inset-left, 0px));
		padding-right: max(16px, env(safe-area-inset-right, 0px));
	}

	.address {
		font-size: 0.98rem;
		padding-left: 0.85rem;
	}

	.pic-01 .btn-mix,
	.pic-01 a.btn {
		width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Footer social icons — keep tappable */
	footer .icon.circle {
		min-width: 40px;
		min-height: 40px;
	}

	footer .col-6.col-md-2 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.menu .nav,
	.menu {
		transition: none !important;
	}
}