/*
 * Techtro Responsive Fixes
 * Phase 6 — Mobile UX Polish baseline.
 *
 * Mục tiêu:
 *  - Loại horizontal scroll mobile (overflow-x).
 *  - Touch target tối thiểu 44x44px (WCAG 2.1 SC 2.5.5).
 *  - Tránh tap highlight ugly trên iOS.
 *  - Font scale fluid với clamp().
 *  - Tôn trọng prefers-reduced-motion (WCAG 2.1 SC 2.3.3).
 *  - Skip-to-content visible on focus (a11y).
 *  - Image max-width fallback.
 *  - Safe-area cho iOS notch.
 *
 * File này được enqueue qua Techtro_Mobile_Polish, áp toàn site.
 * KHÔNG dùng !important trừ khi cần thắng inline style của Elementor.
 */

/* ----------------------------------------------------------------------------
 * 1. Box sizing + reset cơ bản
 * -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* ----------------------------------------------------------------------------
 * 2. Overflow-x — chặn horizontal scroll mobile
 * -------------------------------------------------------------------------- */
html,
body {
	overflow-x: clip;            /* `clip` không gây scroll như `hidden` */
	max-width: 100vw;
}

/* Fallback browser không support `clip` */
@supports not (overflow-x: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* ----------------------------------------------------------------------------
 * 3. iOS safe-area (notch) — yêu cầu viewport-fit=cover
 * -------------------------------------------------------------------------- */
body {
	padding-left:  env(safe-area-inset-left,  0);
	padding-right: env(safe-area-inset-right, 0);
}

.site-header,
.site-footer,
.techtro-skip-link {
	padding-left:  max(0px, env(safe-area-inset-left,  0));
	padding-right: max(0px, env(safe-area-inset-right, 0));
}

/* ----------------------------------------------------------------------------
 * 4. Image / media — max-width fallback + ngừa CLS
 * -------------------------------------------------------------------------- */
img,
svg,
video,
iframe,
canvas {
	max-width: 100%;
	height: auto;
}

img[width][height] {
	height: auto;                /* override layout-thrash, giữ aspect ratio */
}

/* Lazy attribute hint trên img */
img[loading="lazy"] {
	background-color: #f4f4f4;
}

/* ----------------------------------------------------------------------------
 * 5. Touch targets — WCAG 2.5.5 (Target Size 44x44 minimum)
 * -------------------------------------------------------------------------- */
@media (pointer: coarse) {
	a,
	button,
	[role="button"],
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	label,
	summary {
		min-height: 44px;
		min-width: 44px;
	}

	/* Compact icon button — relax với class .is-compact */
	a.is-compact,
	button.is-compact {
		min-height: 32px;
		min-width: 32px;
	}

	/* Nav link mobile */
	nav a,
	.menu-item a {
		padding: 12px 16px;
	}
}

/* ----------------------------------------------------------------------------
 * 6. Tap highlight (iOS) — đổi color tinh tế thay vì xám đậm mặc định
 * -------------------------------------------------------------------------- */
a,
button {
	-webkit-tap-highlight-color: rgba(13, 110, 253, 0.18);
}

/* ----------------------------------------------------------------------------
 * 7. Focus visible (a11y, không bị `outline:none` của reset)
 * -------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
	border-radius: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
 * 8. Skip-to-content (output bởi Techtro_Mobile_Polish::output_skip_link)
 * -------------------------------------------------------------------------- */
.techtro-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: #0d6efd;
	color: #fff;
	padding: 12px 16px;
	z-index: 100000;
	text-decoration: none;
	font-weight: 600;
	border-radius: 0 0 4px 0;
	transform: translateY(-100%);
	transition: transform 0.2s ease;
}

.techtro-skip-link:focus,
.techtro-skip-link:focus-visible {
	top: 0;
	transform: translateY(0);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Hide visually mặc định (chỉ visible khi focus) — fallback `screen-reader-text` chuẩn WP */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: #0d6efd;
	display: block;
	font-size: 1rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ----------------------------------------------------------------------------
 * 9. Fluid typography (clamp) — mobile xuống 14px, desktop lên 18px
 *    Override `font-size` nếu theme đã set, dùng selector chính xác.
 * -------------------------------------------------------------------------- */
:root {
	--techtro-fs-body: clamp(0.875rem, 0.85rem + 0.25vw, 1.125rem);
	--techtro-fs-h1: clamp(1.75rem, 1.4rem + 1.75vw, 3rem);
	--techtro-fs-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
	--techtro-fs-h3: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
}

body {
	font-size: var(--techtro-fs-body);
	line-height: 1.6;
}

/* Chỉ áp ở mobile để không phá vỡ Elementor desktop typography */
@media (max-width: 768px) {
	h1, .h1 { font-size: var(--techtro-fs-h1); line-height: 1.2; }
	h2, .h2 { font-size: var(--techtro-fs-h2); line-height: 1.25; }
	h3, .h3 { font-size: var(--techtro-fs-h3); line-height: 1.3; }
	p       { line-height: 1.6; }
}

/* ----------------------------------------------------------------------------
 * 10. Word-break — chống overflow chữ Vietnamese dài
 * -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
p, li, td, th, a {
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

/* Tránh break trong inline code/keyword */
code, kbd, pre, samp {
	overflow-wrap: normal;
	word-break: keep-all;
}

/* ----------------------------------------------------------------------------
 * 11. Form input mobile — tránh iOS zoom khi focus (font >= 16px)
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	input,
	select,
	textarea {
		font-size: 16px;          /* >=16px tránh iOS auto-zoom */
	}
}

input,
select,
textarea {
	max-width: 100%;
}

/* ----------------------------------------------------------------------------
 * 12. Table responsive — wrap trong .table-scroll
 * -------------------------------------------------------------------------- */
.entry-content table,
.wp-block-table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

/* ----------------------------------------------------------------------------
 * 13. Prefers reduced motion — disable animation/transition (WCAG 2.3.3)
 * -------------------------------------------------------------------------- */
@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;
	}

	/* GSAP / WOW / IntersectionObserver — set class .no-motion để JS skip */
	.wow,
	[data-aos],
	[data-anim] {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	/* Swiper auto-play tắt */
	.swiper-autoplay {
		animation-play-state: paused !important;
	}
}

/* ----------------------------------------------------------------------------
 * 14. Print styles — clean cho print preview
 * -------------------------------------------------------------------------- */
@media print {
	.no-print,
	.techtro-skip-link,
	header,
	footer,
	nav,
	aside {
		display: none !important;
	}

	body {
		font-size: 12pt;
		color: #000;
		background: #fff;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #555;
	}

	a[href^="#"]::after,
	a[href^="javascript:"]::after {
		content: "";
	}
}

/* ----------------------------------------------------------------------------
 * 15. Helpers
 * -------------------------------------------------------------------------- */
.techtro-visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.techtro-no-overflow {
	overflow: hidden;
}

.techtro-aspect-16-9 {
	aspect-ratio: 16 / 9;
}

.techtro-aspect-1-1 {
	aspect-ratio: 1 / 1;
}