/**
 * DIPHP IT — Tahap 7: Accessibility (WCAG 2.2) & extra responsive rules.
 * Loaded last (see inc/enqueue.php) so it can safely override earlier
 * component styles without needing !important everywhere.
 *
 * @package DIPHP_IT
 */

/* =========================================================
   REDUCED MOTION (WCAG 2.3.3 / user preference)
   Users who ask the OS for reduced motion get near-instant,
   non-parallax, non-auto-scrolling transitions everywhere.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.diphp-partners__track { animation: none !important; }
	.diphp-hero__scroll-cue::before { animation: none !important; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   KEYBOARD ACCESSIBILITY — dropdown mega menu must open on
   keyboard focus, not just mouse hover (WCAG 2.1.1 Keyboard).
   ========================================================= */
.diphp-menu-item--has-children:focus-within > .diphp-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Visible focus outline inside dark/transparent header context too. */
.diphp-header[data-transparent="true"] .diphp-menu-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* =========================================================
   TARGET SIZE (WCAG 2.2 SC 2.5.8) — interactive controls need
   a minimum 24×24 CSS px hit area; several visual dots/icons
   are smaller than that, so we pad their *hit area* invisibly
   without changing their visual size.
   ========================================================= */
.diphp-hero__dot { position: relative; }
.diphp-hero__dot::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 24px; height: 24px;
	transform: translate(-50%, -50%);
}

.diphp-faq__toggle,
.diphp-portfolio-item__zoom { min-width: 24px; min-height: 24px; }

.diphp-icon-btn,
.diphp-back-to-top,
.diphp-whatsapp-float,
.diphp-hamburger,
.diphp-lightbox__close,
.diphp-hero__arrow,
.diphp-hero__pause,
.diphp-testimonials__nav button {
	min-width: 44px;
	min-height: 44px;
}

/* =========================================================
   HERO PAUSE/PLAY CONTROL (WCAG 2.2.2 Pause, Stop, Hide)
   ========================================================= */
.diphp-hero__pause {
	position: absolute;
	bottom: 32px;
	right: 24px;
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.3);
	background: rgba(255,255,255,0.1);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 640px) {
	.diphp-hero__pause { bottom: 76px; right: 16px; }
}

/* Pause the client-logo marquee whenever it (or a child link) has
   keyboard focus or mouse hover, and always give it a label. */
.diphp-partners__marquee:hover .diphp-partners__track,
.diphp-partners__marquee:focus-within .diphp-partners__track {
	animation-play-state: paused;
}

/* =========================================================
   FOCUS NOT OBSCURED (WCAG 2.2 SC 2.4.11) — anchored/focused
   sections must not be hidden behind the sticky header.
   ========================================================= */
[id] {
	scroll-margin-top: calc(var(--diphp-header-height) + 16px);
}

/* =========================================================
   FLUID TYPOGRAPHY — scale headings smoothly between mobile
   and desktop instead of jumping at breakpoints.
   ========================================================= */
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }

/* =========================================================
   EXTRA RESPONSIVE BREAKPOINTS
   ========================================================= */

/* Small tablets / large phones (landscape) */
@media (max-width: 900px) {
	.diphp-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.diphp-about__grid { gap: 32px; }
}

/* Landscape phones: 100vh hero is too tall when the viewport is short. */
@media (max-height: 480px) and (orientation: landscape) {
	.diphp-hero { height: auto; min-height: 100vh; padding-block: 100px 60px; }
}

/* Very small phones */
@media (max-width: 380px) {
	.diphp-container { padding-inline: 16px; }
	.diphp-btn { padding: 12px 20px; font-size: 14px; }
	.diphp-hero__title { font-size: 1.9rem; }
}

/* Ensure tap targets in dense lists (FAQ, career list) keep breathing room */
@media (max-width: 480px) {
	.diphp-faq__question { padding: 18px 2px; }
	.diphp-career-item { padding: 20px; }
}

/* Reflow safety: prevent any wide fixed-width element from forcing
   horizontal scroll at narrow/zoomed viewports (WCAG 1.4.10 Reflow). */
img, table, iframe, video, .diphp-single-gallery, .diphp-grid {
	max-width: 100%;
}

/* Ensure long, unbreakable strings (URLs, emails) wrap instead of
   overflowing their container. */
.diphp-single-content,
.diphp-contact-info-card p,
.diphp-footer-widget {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Prevent iOS Safari's automatic zoom-on-focus for form fields
   smaller than 16px — a common mobile usability papercut. */
@media (max-width: 640px) {
	input, select, textarea, button {
		font-size: 16px;
	}
}

/* Reduce the tap-highlight flash on touch devices while keeping a
   visible focus style for keyboard users (see :focus-visible above). */
a, button {
	-webkit-tap-highlight-color: transparent;
}

/* =========================================================
   HIGH CONTRAST / FORCED COLORS MODE
   Keep interactive borders visible when Windows High Contrast
   or forced-colors is active.
   ========================================================= */
@media (forced-colors: active) {
	.diphp-btn, .diphp-icon-btn, .diphp-hamburger span {
		forced-color-adjust: none;
		border: 1px solid ButtonText;
	}
}