/**
 * Pure Haven IT — Responsive system
 * Mobile (iOS/Android), tablet, and iPad alignment + overflow safety.
 */

/* --------------------------------------------------------------------------
   Global — prevent horizontal scroll on all devices
   -------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: clip;
}

body.ph-body {
	overflow-x: clip;
	max-width: 100%;
}

body.ph-body .ph-site-main,
body.ph-body #primary,
body.ph-body .site-content,
body.ph-body .ast-container,
body.ph-body .entry-content {
	max-width: 100%;
}

img,
video,
svg,
iframe,
.ph-hero__video,
.ph-hero__image,
.ph-contact-hub__photo,
.site-image {
	max-width: 100%;
	height: auto;
}

/* iOS safe areas (notch / home indicator) */
.ph-container {
	padding-left: max(var(--ph-container-padding), env(safe-area-inset-left, 0px));
	padding-right: max(var(--ph-container-padding), env(safe-area-inset-right, 0px));
}

/* --------------------------------------------------------------------------
   Tablet — iPad portrait & landscape (769px–1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--ph-section-padding: clamp(2.5rem, 5vw, 4rem);
	}

	.ph-hero--has-video .ph-container.ph-hero__grid {
		max-width: var(--ph-container-max);
		width: 100%;
		margin-inline: auto;
		padding-left: var(--ph-container-padding);
		padding-right: var(--ph-container-padding);
	}

	.ph-metrics-grid {
		max-width: none;
		width: 100%;
		margin-inline: auto;
	}

	.ph-section-header:not(.ph-section-header--center) {
		max-width: none;
	}

	.ph-split__content,
	.ph-split--about .ph-split__content {
		max-width: none;
	}

	.ph-showcase-grid,
	.ph-preview-grid {
		gap: var(--ph-space-md);
	}
}

/* --------------------------------------------------------------------------
   Mobile — phones (max 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	:root {
		--ph-section-padding: clamp(2rem, 5vw, 3rem);
		--ph-container-padding: clamp(1rem, 4.5vw, 1.35rem);
	}

	.ph-page-hero,
	.ph-page-hero--light,
	.ph-page-hero--premium {
		padding: clamp(1.75rem, 5vw, 2.5rem) 0 clamp(1.25rem, 4vw, 2rem);
	}

	.ph-page-hero__title {
		font-size: clamp(1.65rem, 6.5vw, 2.15rem) !important;
		line-height: 1.2 !important;
		word-wrap: break-word;
		overflow-wrap: anywhere;
	}

	.ph-page-hero__subtitle {
		font-size: clamp(0.9375rem, 3.8vw, 1.0625rem) !important;
		line-height: 1.55 !important;
	}

	.ph-section-header {
		margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
	}

	.ph-h2,
	.ph-section-title {
		font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
		line-height: 1.25 !important;
	}

	.ph-sharp-card,
	.ph-surface-card,
	.ph-tile {
		padding: clamp(1rem, 4vw, 1.35rem);
	}

	.ph-cta-group,
	.ph-hero__actions,
	.ph-contact-hub__actions,
	.ph-contact-form__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.ph-cta-group .ph-btn,
	.ph-hero__actions .ph-btn,
	.ph-contact-hub__actions .ph-btn,
	.ph-contact-form__actions .ph-btn,
	.ph-contact-form__actions button[type="submit"],
	.ph-wpforms-wrap .wpforms-submit {
		width: 100%;
		justify-content: center;
		min-height: 44px;
	}

	.ph-contact-hub__trust {
		gap: 0.45rem;
	}

	body.ph-body .ph-contact-trust-badge {
		font-size: 10px;
		padding: 6px 11px;
	}

	.ph-job-seekers-benefits .ph-feature-row {
		align-items: flex-start;
		padding: 1rem;
		gap: 0.85rem;
	}

	.ph-job-seekers-benefits .ph-feature-row__text {
		font-size: 0.875rem;
		line-height: 1.55;
		min-width: 0;
	}

	.ph-feature-row__text,
	.ph-prose p,
	.ph-surface-card p {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.ph-trust-strip__grid,
	.ph-trust-strip__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ph-space-md);
	}

	.ph-icon-grid--3,
	.ph-icon-grid--why {
		grid-template-columns: 1fr;
	}

	.ph-split__media {
		margin-bottom: var(--ph-space-lg);
	}

	.ph-panel {
		padding: var(--ph-space-xl) var(--ph-space-md);
	}

	.ph-prose--wide,
	.ph-prose {
		max-width: none;
	}

	/* Inline max-width cards on inner pages */
	.ph-page-section .ph-sharp-card[style*="max-width"] {
		max-width: 100% !important;
		margin-inline: 0 !important;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Small phones — iPhone SE, compact Android (max 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.ph-metrics-grid,
	.ph-trust-strip__grid,
	.ph-trust-strip__grid--4 {
		grid-template-columns: 1fr;
	}

	.ph-hero__trust {
		flex-direction: column;
		align-items: stretch;
	}

	.ph-hero__trust-item {
		justify-content: center;
		text-align: center;
		width: 100%;
	}

	body.ph-body .ph-section-label,
	body.ph-body .ph-section-header__eyebrow {
		font-size: 10px !important;
		padding: 6px 12px !important;
	}

	.ph-metric-card__label {
		max-width: none !important;
	}
}

/* --------------------------------------------------------------------------
   Touch targets — iOS / Android accessibility
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.ph-btn,
	.ph-contact-form__input,
	.ph-contact-form__select,
	.ph-contact-form__textarea,
	.ph-wpforms-wrap input,
	.ph-wpforms-wrap select,
	.ph-wpforms-wrap textarea,
	body.ph-body .ast-mobile-menu-buttons .menu-toggle,
	body.ph-body .main-header-menu .menu-item a {
		min-height: 44px;
	}

	.ph-contact-form__textarea,
	.ph-wpforms-wrap textarea {
		min-height: 7.5rem;
	}
}

/* --------------------------------------------------------------------------
   Landscape phones — short viewport height
   -------------------------------------------------------------------------- */
@media (max-width: 926px) and (orientation: landscape) {
	.ph-hero--cinematic {
		min-height: auto;
		padding-block: var(--ph-space-lg);
	}

	.ph-hero__video-panel,
	.ph-hero__image-panel,
	.ph-hero__video-frame,
	.ph-hero__image-frame,
	.ph-hero__video,
	.ph-hero__video-fallback {
		min-height: clamp(220px, 42vh, 320px) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Solid blue icon badges — final cascade (matches About / Vision cards)
   -------------------------------------------------------------------------- */
body.ph-body span.ph-feature-panel__badge--solid,
body.ph-body .ph-about-foundation span.ph-feature-panel__badge,
body.ph-body .ph-insights-hub span.ph-feature-panel__badge,
body.ph-body .ph-referrals-section span.ph-feature-panel__badge,
body.ph-body .ph-employers-section span.ph-feature-panel__badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 48px !important;
	width: 48px !important;
	height: 48px !important;
	padding: 0 !important;
	font-family: 'Montserrat', var(--ph-font-heading), sans-serif !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	background: linear-gradient(145deg, #0066FF 0%, #0052CC 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: var(--ph-radius-md) !important;
	box-shadow: 0 6px 20px rgba(0, 102, 255, 0.35) !important;
}

body.ph-body .ph-about-foundation span.ph-feature-panel__tag,
body.ph-body .ph-insights-hub span.ph-feature-panel__tag,
body.ph-body .ph-referrals-section span.ph-feature-panel__tag,
body.ph-body .ph-employers-section span.ph-feature-panel__tag {
	min-width: auto !important;
	height: auto !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	padding: 6px 14px !important;
	color: #0066FF !important;
	-webkit-text-fill-color: #0066FF !important;
	background: rgba(0, 102, 255, 0.15) !important;
	border: 1px solid rgba(0, 102, 255, 0.35) !important;
	border-radius: var(--ph-radius-pill) !important;
}