/* ==========================================================================
   TST Framework — Responsive / mobile refinements
   --------------------------------------------------------------------------
   ADDITIVE STYLESHEET. Loaded last so it can close gaps left by the other
   stylesheets without any of them being edited.

   THE ONE RULE THIS FILE OBEYS:
   every declaration lives inside a `max-width` media query. There is not a
   single unconditional rule in this file, so the desktop rendering (anything
   wider than 1024px) is mathematically untouched — the browser never even
   evaluates these blocks on a desktop viewport.

   The theme was already largely responsive: the header ships a mobile drawer,
   and header-res.css, footer-res.css, blog.css, project-res.css and the suite
   stylesheets all carry their own breakpoints. This file only fixes what those
   missed:

     1. Horizontal overflow from long URLs, wide tables and <pre> blocks.
     2. Touch targets below the 44×44 px accessibility minimum.
     3. iOS Safari zooming the page whenever a sub-16px input is focused.
     4. Page-hero section padding and font-size at small widths.
     5. Footer bar wrapping and centering on tiny screens.
     6. Home hero text/button sizing on small screens.
     7. RTL mirroring of the above at mobile widths.
   ========================================================================== */


/* ==========================================================================
   1. TABLET AND BELOW  (<= 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

	/* ── Horizontal overflow guard ──────────────────────────────────────
	   `clip` rather than `hidden`: `overflow-x:hidden` on a wrapper silently
	   breaks `position:sticky` descendants, and the theme has a sticky header
	   option plus a sticky blog sidebar. `clip` contains the overflow without
	   creating a scroll container. */
	#tst-page {
		overflow-x: clip;
	}

	/* Long unbroken strings (URLs, IDs, Arabic compound words) must wrap
	   rather than force the whole page wider than the screen. */
	.tst-post__content,
	.tst-bcard__excerpt,
	.tst-single__body,
	.tst-widget__bd {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* Media never exceeds its container. */
	.tst-main img,
	.tst-main video,
	.tst-main iframe,
	.tst-main embed,
	.tst-main object {
		max-width: 100%;
	}

	.tst-main img {
		height: auto;
	}

	/* ── Page hero — padding and font scale ─────────────────────────────
	   The page hero (blog/news/projects/search hero) uses large desktop
	   padding. Reduce it so the hero isn't half the screen on a tablet. */
	.tst-page-hero {
		padding: 48px 0 40px;
	}

	.tst-page-hero__title {
		font-size: clamp(1.5rem, 4vw, 2.2rem);
	}
}


/* ==========================================================================
   2. LANDSCAPE PHONE AND SMALL TABLET  (<= 768px)
   ========================================================================== */

@media (max-width: 768px) {

	/* ── iOS zoom-on-focus ──────────────────────────────────────────────
	   Safari on iOS zooms the viewport whenever a focused form control has a
	   font-size below 16px, and never zooms back out. 16px is the fix. */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px;
	}

	/* ── Touch targets ──────────────────────────────────────────────────
	   WCAG 2.2 target size (minimum) is 24px; 44px is Apple's guidance and
	   the practical comfortable minimum. */
	.tst-share-btn,
	.tst-social-share__btn,
	.tst-page-numbers a,
	.tst-page-numbers span,
	.tst-proj-page,
	.tst-filter-tabs__btn {
		min-width: 44px;
		min-height: 44px;
	}

	.tst-share-btn,
	.tst-social-share__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Give the share row room to wrap instead of squeezing. */
	.tst-post__share {
		flex-wrap: wrap;
		gap: 10px;
	}

	/* Filter tabs scroll horizontally rather than
	   wrapping into an unreadable stack. */
	.tst-filter-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.tst-filter-tabs::-webkit-scrollbar {
		display: none;
	}

	.tst-filter-tabs__btn {
		flex: 0 0 auto;
	}

	/* ── Wide content ───────────────────────────────────────────────────
	   Tables and code blocks scroll inside their own box instead of
	   widening the page. */
	.tst-post__content table,
	.tst-single__body table,
	.tst-post__content pre,
	.tst-single__body pre {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Caption padding matches the reduced .tst-post__inner padding. */
	.tst-post__thumb-cap {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* ── Modals ─────────────────────────────────────────────────────────
	   Full-height modals on a phone must be scrollable, and must respect
	   the browser chrome. dvh accounts for the collapsing URL bar. */
	.tst-modal__inner,
	.tst-cert-modal__box {
		max-height: 88vh;
		max-height: 88dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tst-modal__close,
	.tst-cert-modal__close {
		min-width: 44px;
		min-height: 44px;
	}

	/* ── Client logo marquee ────────────────────────────────────────────
	   A long marquee is a lot of motion on a small screen; slow it and
	   shrink the cards so more than one is legible at a time. */
	.tstf-cl-logo-card {
		max-width: 42vw;
	}

	/* ── Page hero at phone width ───────────────────────────────────────
	   The hero's inner container must not overflow. */
	.tst-page-hero {
		padding: 36px 0 32px;
	}

	.tst-blog__wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* ── Footer bar — allow wrap on small landscape ─────────────────── */
	.footer-bar-inner {
		flex-wrap: wrap;
		gap: 8px;
		text-align: center;
		justify-content: center;
	}
}


/* ==========================================================================
   3. PORTRAIT PHONE  (<= 640px)
   ========================================================================== */

@media (max-width: 640px) {

	/* Post navigation: full-width stacked links are easier to hit. */
	.tst-postnav .prev,
	.tst-postnav .next {
		width: 100%;
	}

	/* Info panels become label-over-value instead of a cramped two-column. */
	.tst-info-panel__row,
	.tst-modal__info-grid {
		grid-template-columns: 1fr;
	}

	/* Breadcrumbs wrap and shrink slightly. */
	.tst-page-hero__bc,
	.tst-breadcrumb {
		flex-wrap: wrap;
		font-size: 12px;
	}

	/* Author box stacks. */
	.tst-author {
		flex-direction: column;
		text-align: center;
	}

	.tst-author__av {
		margin: 0 auto;
	}

	/* Sidebar widgets full width once stacked. */
	.tst-sidebar .tst-widget {
		flex: 1 1 100%;
	}

	/* ── Page hero ──────────────────────────────────────────────────── */
	.tst-page-hero {
		padding: 28px 0 24px;
	}

	.tst-page-hero__title {
		font-size: clamp(1.25rem, 6vw, 1.6rem);
	}

	.tst-page-hero__sub {
		font-size: 0.9rem;
	}

	/* Home hero section text — clamp keeps it readable without overflow. */
	.tst-hero__title,
	.site-hero h1 {
		font-size: clamp(1.4rem, 6vw, 2rem);
	}

	.tst-hero__sub,
	.site-hero p {
		font-size: clamp(0.875rem, 3.5vw, 1rem);
	}
}


/* ==========================================================================
   4. SMALL PHONE  (<= 420px)
   ========================================================================== */

@media (max-width: 420px) {

	.tst-blog__wrap {
		padding-left: 14px;
		padding-right: 14px;
	}

	.tst-post__inner {
		padding: 18px 14px 22px;
	}

	.tst-post__thumb-cap {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* Meta items stack into rows rather than truncating. */
	.tst-post__meta {
		gap: 6px 12px;
		font-size: 12.5px;
	}

	/* Buttons go full width so they are never a thin sliver. */
	.tst-btn,
	.tst-cert-btn,
	.tst-load-more__btn {
		width: 100%;
		justify-content: center;
	}

	/* Search form stacks input above button. */
	.tst-searchform {
		flex-wrap: wrap;
	}

	.tst-searchform input,
	.tst-searchform button {
		width: 100%;
	}

	/* Footer bar text shrinks to one readable line. */
	.footer-bar p,
	.footer-bar span {
		font-size: 11px;
		text-align: center;
	}

	/* Very small: language switcher dropdown must stay inside viewport. */
	.tst-lang-dropdown {
		right: 0;
		left: auto;
		min-width: 120px;
	}
}


/* ==========================================================================
   5. RTL — mobile mirroring
   --------------------------------------------------------------------------
   Scoped to [dir="rtl"] / .tst-rtl AND wrapped in a max-width query, so this
   affects neither the LTR site nor the Arabic desktop layout.
   ========================================================================== */

@media (max-width: 768px) {

	[dir="rtl"] .tst-post__share,
	.tst-rtl .tst-post__share {
		justify-content: flex-start;
	}

	/* Scrollable tab strips must start from the right in RTL. */
	[dir="rtl"] .tst-filter-tabs,
	.tst-rtl .tst-filter-tabs {
		direction: rtl;
	}

	/* Arabic needs slightly more leading than Latin at small sizes to keep
	   diacritics and descenders from colliding. */
	[dir="rtl"] .tst-post__content,
	.tst-rtl .tst-post__content {
		line-height: 1.95;
	}

	/* RTL footer bar: flip the divider between copyright and links. */
	[dir="rtl"] .footer-bar-inner,
	.tst-rtl .footer-bar-inner {
		flex-direction: row-reverse;
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media (max-width: 640px) {

	[dir="rtl"] .tst-author,
	.tst-rtl .tst-author {
		text-align: center;
	}

	[dir="rtl"] .tst-postnav .prev,
	[dir="rtl"] .tst-postnav .next,
	.tst-rtl .tst-postnav .prev,
	.tst-rtl .tst-postnav .next {
		text-align: right;
	}

	/* RTL: language switcher dropdown anchors to left side on small screens. */
	[dir="rtl"] .tst-lang-dropdown,
	.tst-rtl .tst-lang-dropdown {
		right: auto;
		left: 0;
	}
}

@media (max-width: 420px) {

	/* On tiny RTL screens the footer columns already stack via footer-res.css.
	   Ensure the contact/social rows remain centred. */
	[dir="rtl"] .footer-bar p,
	.tst-rtl .footer-bar p {
		font-size: 11px;
		text-align: center;
	}
}


/* ==========================================================================
   6. Accessibility — reduced motion
   --------------------------------------------------------------------------
   Mobile-scoped so desktop animation is untouched. The theme's AOS-style
   reveal animations are the main concern on a phone, where scroll-linked
   motion is most likely to cause discomfort.
   ========================================================================== */

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {

	[data-tstf-aos] {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.tstf-cl-track {
		animation: none !important;
	}
}