/*
 * The DEV Point — cross-cutting responsive safety net.
 * Component-specific breakpoints live alongside their components; this
 * file covers global small-screen adjustments and overflow safety.
 */

html,
body {
	max-width: 100%;
}

* {
	overflow-wrap: break-word;
	word-break: break-word;
}

table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 1023px) and (min-width: 640px) {
	.tdp-section {
		padding-block: var(--tdp-space-section-tablet);
	}
}

@media (max-width: 639px) {
	.tdp-section {
		padding-block: var(--tdp-space-section-mobile);
	}

	.tdp-footer-inner {
		padding-block: var(--tdp-space-section-mobile);
	}

	.tdp-btn {
		width: 100%;
	}

	.tdp-hero-actions .tdp-btn,
	.tdp-cta-banner .tdp-btn {
		width: 100%;
	}

	.tdp-mockup {
		max-width: 100%;
	}

	.tdp-mockup-grid {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.tdp-portfolio-meta-row {
		flex-direction: column;
		gap: 0.15rem;
	}

	.tdp-portfolio-meta-row dd {
		text-align: left;
	}

	.tdp-error-code {
		font-size: 3.5rem;
	}
}

@media (min-width: 640px) {
	.tdp-hero-actions {
		flex-direction: row;
		justify-content: center;
	}

	.tdp-hero-actions .tdp-btn,
	.tdp-cta-banner .tdp-btn {
		width: auto;
	}
}

@media (min-width: 1024px) {
	.tdp-hero-actions {
		justify-content: flex-start;
	}
}

/* Ensure every interactive control keeps a touch-friendly hit area on mobile. */
@media (pointer: coarse) {
	.tdp-btn,
	.tdp-nav-menu a,
	.tdp-mega-menu-link,
	.tdp-faq-question,
	.tdp-menu-toggle,
	.tdp-form-field input,
	.tdp-form-field select,
	.tdp-form-field textarea {
		min-height: 44px;
	}
}

/* ---------- Utility bar: stack and trim on small screens ---------- */

@media (max-width: 639px) {
	.tdp-utility-bar-inner {
		justify-content: center;
		text-align: center;
	}

	.tdp-utility-group {
		justify-content: center;
	}
}

/* ---------- Mobile/tablet nav: Services becomes an accordion ---------- */
/* Matches the .tdp-primary-nav collapse breakpoint in layout.css. Reuses
   the exact same markup as the desktop mega menu — only the presentation
   changes, so there is nothing to keep in sync between the two states. */

@media (max-width: 1023px) {
	/* The mobile slide-down panel can now contain the Services accordion
	   too, so give it more room and let it scroll internally rather than
	   clip content on short viewports. */
	.tdp-primary-nav.tdp-nav-open {
		max-height: 85vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tdp-menu-item-mega {
		position: static;
	}

	.tdp-nav-link-mega-group {
		justify-content: space-between;
		width: 100%;
	}

	.tdp-mega-menu-toggle {
		padding: 0.75rem 0.5rem; /* larger tap target on touch devices */
	}

	.tdp-mega-menu {
		position: static;
		margin-top: 0.5rem;
		width: 100%;
		max-width: none;
		box-shadow: none;
		border: none;
		border-radius: var(--tdp-radius-sm);
		background: var(--tdp-light-grey);
		padding: 0 1rem;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--tdp-transition-slow), padding var(--tdp-transition-slow);
	}

	/* Vertical padding only applies when open, same reasoning as
	   .tdp-primary-nav.tdp-nav-open above — otherwise the closed accordion
	   panel (and the group heading sitting at its edge) visibly peeks out
	   beneath the Services trigger. */
	.tdp-menu-item-mega.tdp-mega-open .tdp-mega-menu {
		max-height: 1400px; /* comfortably fits both columns + CTA panel */
		padding: 1rem;
	}

	.tdp-mega-menu-inner {
		display: block;
	}

	.tdp-mega-menu-column {
		margin-bottom: 1.5rem;
	}

	.tdp-mega-menu-link {
		background: var(--tdp-white);
		margin-bottom: 0.35rem;
	}

	.tdp-mega-menu-cta {
		background: var(--tdp-white);
		border: 1px solid var(--tdp-border);
	}
}

/* ---------- Body scroll lock while the mobile nav is open ---------- */

@media (max-width: 1023px) {
	body.tdp-nav-scroll-lock {
		overflow: hidden;
	}
}