/**
 * MA Steelfixing: phones
 * Designed for site managers on the move: full-screen menu with contact
 * details, a Call / Send drawings bar in thumb reach, generous tap targets.
 * Tablet and desktop are unaffected.
 */

/* Desktop: the menu panel simply lays its contents out in the header */
.ms-menu-panel {
	display: contents;
}

.ms-menu-extra,
.ms-mobile-bar {
	display: none;
}

@media (max-width: 960px) {

	/* ---------- Full-screen menu sheet ---------- */
	.ms-menu-panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: calc(100vh - var(--ms-header-h, 114px));
		height: calc(100dvh - var(--ms-header-h, 114px));
		z-index: 90;
		background: var(--ms-film);
		border-top: var(--ms-line) solid var(--ms-ink);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0.5rem 0 calc(6rem + env(safe-area-inset-bottom));
		flex-direction: column;
	}

	.ms-menu-toggle:checked ~ .ms-menu-panel {
		display: flex;
		animation: ms-sheet-in 0.2s ease both;
	}

	body:has(.ms-menu-toggle:checked) {
		overflow: hidden;
	}

	.ms-menu-primary .ms-menu-panel .ms-menu {
		display: flex;
		position: static;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: none;
		border: 0;
	}

	.ms-menu-primary .ms-menu-panel .ms-menu > li {
		border-bottom: 1px solid var(--ms-hair);
	}

	.ms-menu-primary .ms-menu-panel .ms-menu > li + li {
		border-top: 0;
	}

	.ms-menu-primary .ms-menu-panel .ms-menu a {
		padding: 1.05rem var(--wp--style--root--padding-left, 1.5rem);
		font-size: 1.75rem;
		font-weight: 700;
		font-stretch: 118%;
		letter-spacing: -0.02em;
		line-height: 1.1;
		text-decoration: none;
	}

	.ms-menu-primary .ms-menu-panel .current-menu-item > a,
	.ms-menu-primary .ms-menu-panel .current_page_item > a {
		box-shadow: inset 4px 0 0 var(--ms-orange);
	}

	.ms-menu-primary .ms-menu-panel .sub-menu a,
	.ms-menu-primary .ms-menu-panel .children a {
		font-size: 1.15rem;
		font-weight: 500;
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}

	.ms-menu-extra {
		display: block;
		padding: 1.75rem var(--wp--style--root--padding-left, 1.5rem) 0;
	}

	.ms-menu-extra .ms-contact-list {
		margin: 0 0 1.5rem;
		font-family: var(--ms-annot);
		font-size: 0.95rem;
		line-height: 1.9;
		color: var(--ms-pencil);
	}

	.ms-menu-extra .ms-contact-list a {
		color: var(--ms-ink);
	}

	.ms-menu-send {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 56px;
		background: var(--ms-orange);
		color: var(--ms-ink);
		border: var(--ms-line) solid var(--ms-ink);
		font-weight: 650;
		font-size: 1.1rem;
		text-decoration: none;
	}

	/* ---------- Call / Send drawings bar ---------- */
	.ms-mobile-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		gap: 0;
		background: var(--ms-ink);
		padding: 0 0 env(safe-area-inset-bottom);
		border-top: var(--ms-line) solid var(--ms-ink);
	}

	.ms-mobile-bar a {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 58px;
		font-weight: 650;
		font-size: 1.05rem;
		text-decoration: none;
	}

	.ms-mb-call {
		color: var(--ms-film);
		flex: 0 0 38% !important;
	}

	.ms-mb-send {
		background: var(--ms-orange);
		color: var(--ms-ink);
	}

	.ms-mobile-bar a:active {
		filter: brightness(0.92);
	}

	/* Room at the bottom so the bar never covers the footer */
	.wp-site-blocks {
		padding-bottom: calc(58px + env(safe-area-inset-bottom));
	}

	/* Hide the bar while the menu sheet is open (it has its own button) */
	body:has(.ms-menu-toggle:checked) .ms-mobile-bar {
		display: none;
	}

	/* The Contact page is the destination, so the bar only offers Call there */
	body:has(.ms-form) .ms-mb-send {
		display: none;
	}

	body:has(.ms-form) .ms-mb-call {
		flex: 1 !important;
	}

	body:has(.ms-form) .ms-mobile-bar:not(:has(.ms-mb-call)) {
		display: none;
	}
}

@media (max-width: 600px) {

	/* Comfortable, full-width primary actions */
	.ms-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.ms-hero .wp-block-button,
	.ms-hero .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.ms-hero .wp-block-button__link {
		min-height: 54px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ms-cta .wp-block-button,
	.ms-cta .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	/* Forms: 16px+ text stops iPhones zooming in */
	.ms-form input[type="text"],
	.ms-form input[type="email"],
	.ms-form input[type="tel"],
	.ms-form textarea {
		font-size: 1rem;
		min-height: 52px;
	}

	.ms-form button {
		width: 100%;
		min-height: 56px;
	}
}

@keyframes ms-sheet-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ms-menu-toggle:checked ~ .ms-menu-panel {
		animation: none;
	}
}