/**
 * Cross-browser / cross-device compatibility (no visual design changes).
 *
 * @package Solaris
 */

/* -------------------------------------------------------------------------
   Touch & tap (iOS Safari, Android Chrome)
   ------------------------------------------------------------------------- */

.solaris-site :is(
	button,
	.solaris-btn,
	.solaris-menu-toggle,
	.solaris-nav-arrow,
	.solaris-share__button,
	.solaris-share__action-btn,
	.solaris-share__dropdown-item,
	.solaris-toc__link,
	.solaris-pagination a,
	.solaris-footer-social-link,
	.solaris-faq-item summary,
	.solaris-faq-question,
	.solaris-single-subheader__trigger,
	.solaris-mobile-nav-back,
	.solaris-mega-trigger,
	.solaris-menu a
) {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.solaris-primary-navigation,
.solaris-primary-navigation__scroll,
.solaris-toc__viewport.is-scrollable,
.solaris-toc__viewport-shell:has(.is-scrollable) {
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

.solaris-blog-carousel {
	touch-action: pan-y pinch-zoom;
	-webkit-overflow-scrolling: touch;
}

/* Let vertical pans reach the TOC viewport instead of stalling on links. */
.solaris-toc__viewport.is-scrollable .solaris-toc__link {
	touch-action: pan-y;
}

@media (pointer: coarse) {
	.solaris-toc__viewport.is-scrollable .solaris-toc__link::before {
		pointer-events: none;
	}
}

.solaris-primary-navigation {
	touch-action: pan-x pan-y;
}

/* Expand touch targets without changing visible layout (44×44pt, iOS HIG). */
@media (pointer: coarse) {
	.solaris-share__button,
	.solaris-share__action-btn,
	.solaris-share__dropdown-item,
	.solaris-toc__link,
	.solaris-pagination a,
	.solaris-footer-social-link,
	.solaris-nav-arrow {
		position: relative;
	}

	.solaris-share__button::before,
	.solaris-share__action-btn::before,
	.solaris-share__dropdown-item::before,
	.solaris-toc__link::before,
	.solaris-pagination a::before,
	.solaris-footer-social-link::before,
	.solaris-nav-arrow::before {
		content: "";
		position: absolute;
		inset: -8px;
	}
}

/* -------------------------------------------------------------------------
   iOS: prevent input zoom (font-size < 16px)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.solaris-site :is(
		input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
		select,
		textarea
	) {
		font-size: max(16px, 1rem);
	}
}

.solaris-site :is(select, textarea) {
	-webkit-appearance: none;
	appearance: none;
}

/* -------------------------------------------------------------------------
   Safe area (notch / home indicator)
   ------------------------------------------------------------------------- */

.solaris-site-header {
	padding-top: env(safe-area-inset-top, 0);
}

/* --breakpoint-nav: 991px (foundations.css) */
@media (max-width: 991px) {
	.solaris-primary-navigation.is-open {
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.solaris-single-subheader {
		left: env(safe-area-inset-left, 0);
		width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
	}
}

/* -------------------------------------------------------------------------
   Scrollbars (Chrome / macOS Safari)
   ------------------------------------------------------------------------- */

.solaris-site {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--theme-outline-variant, rgba(0, 0, 0, 0.08)) 80%, transparent) transparent;
}

.solaris-site ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.solaris-site ::-webkit-scrollbar-track {
	background: transparent;
}

.solaris-site ::-webkit-scrollbar-thumb {
	background-color: color-mix(in srgb, var(--theme-outline-variant, rgba(0, 0, 0, 0.08)) 80%, transparent);
	border-radius: 999px;
}

.solaris-site ::-webkit-scrollbar-thumb:hover {
	background-color: color-mix(in srgb, var(--theme-outline, rgba(0, 0, 0, 0.12)) 70%, transparent);
}

/* -------------------------------------------------------------------------
   backdrop-filter fallbacks (Safari / unsupported)
   ------------------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.solaris-featured-media::before {
		background: linear-gradient(135deg, rgba(var(--palette-grey-0-rgb, 255, 255, 255), 0.42), rgba(var(--palette-grey-0-rgb, 255, 255, 255), 0.18));
	}

	.google-source-cta {
		background: var(--theme-card-surface, #ffffff);
	}

	body.is-aside-open::before,
	.solaris-nav-backdrop.is-visible {
		background: var(--effect-backdrop-strong, rgba(0, 0, 0, 0.75));
	}

	.solaris-ai-summary {
		background: var(--theme-surface-surface-container, #f1f3f4);
	}
}

@media (prefers-reduced-transparency: reduce) {
	body.is-aside-open::before,
	.solaris-nav-backdrop.is-visible {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--theme-backdrop-overlay);
	}
}

/* -------------------------------------------------------------------------
   iOS: avoid sticky :hover on touch (TOC links)
   ------------------------------------------------------------------------- */

@media (hover: hover) {
	.solaris-toc__link:hover {
		color: var(--theme-surface-on-surface);
	}
}

.solaris-toc__link:focus-visible {
	color: var(--theme-surface-on-surface);
}

@media (hover: hover) {
	@media (prefers-color-scheme: dark) {
		.solaris-post__content img:hover,
		.solaris-comment__content img:hover,
		.solaris-blog-card__media img:hover,
		.solaris-featured-media img:hover {
			opacity: 1;
		}
	}
}

/* -------------------------------------------------------------------------
   Keyboard focus (focus-visible)
   ------------------------------------------------------------------------- */

.solaris-site :is(
	input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
	select,
	textarea
):focus-visible {
	outline: none;
	border-color: var(--theme-interaction-accent-on-surface);
	box-shadow: 0 0 0 4px var(--theme-interaction-accent-focus-ring);
}

.solaris-site :is(
	a,
	button,
	[role="button"],
	.solaris-btn,
	.solaris-mega-trigger,
	.solaris-menu-toggle,
	.solaris-icon-link,
	.solaris-faq-question,
	.solaris-carousel-nav__button
):focus-visible {
	outline: 2px solid var(--theme-interaction-accent-on-surface);
	outline-offset: 2px;
}

.solaris-share__button:focus-visible,
.solaris-share__action-btn:focus-visible,
.solaris-share__dropdown-item:focus-visible {
	outline: 2px solid var(--theme-interaction-accent-on-surface);
	outline-offset: 2px;
}

@media (prefers-contrast: more) {
	.solaris-site :is(
		a,
		button,
		[role="button"],
		.solaris-btn,
		.solaris-mega-trigger,
		.solaris-menu-toggle,
		.solaris-icon-link,
		.solaris-faq-question,
		.solaris-carousel-nav__button,
		input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
		select,
		textarea
	):focus-visible {
		outline-width: 3px;
		outline-offset: 3px;
	}
}

/* -------------------------------------------------------------------------
   iPad / tablet split-view: keep article column readable
   ------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
	.solaris-single-layout {
		gap: var(--space-lg);
	}

	.solaris-single-main {
		max-width: min(var(--content-measure, 48rem), 100%);
	}
}