/*
 * NPC Styling & UX Fixes - Mobile Blue Box Cleanup
 *
 * Scope: touch/mobile frontend interactions only.
 * Purpose: remove Chrome/Safari mobile tap highlight and persistent focus blue boxes
 * from common clickable website elements such as header logos, buttons, clickable
 * Elementor containers, Loop Grid cards, FAQ titles, sliders, review/logo cards,
 * and pagination controls.
 *
 * Desktop keyboard focus is intentionally preserved.
 */

@media (hover: none), (pointer: coarse) {
	:where(
		a[href],
		button,
		[role="button"],
		[role="link"],
		[tabindex]:not([tabindex="-1"]),
		.elementor-button,
		.e-clickable,
		.elementor-clickable,
		.elementor-widget-container,
		.elementor-accordion-title,
		.elementor-tab-title,
		.elementor-toggle-title,
		.elementor-swiper-button,
		.swiper-button-prev,
		.swiper-button-next,
		.swiper-pagination-bullet,
		.page-numbers,
		.npc-review-item,
		.npc-brand-logo,
		.npc-product-card,
		.npc-scd-card,
		.npc-sidebar-menu a,
		.npc-sidebar-menu button,
		.npc-menu-toggle,
		.npc-mobile-menu-toggle
	),
	:where(
		a[href],
		button,
		[role="button"],
		[role="link"],
		[tabindex]:not([tabindex="-1"]),
		.elementor-button,
		.e-clickable,
		.elementor-clickable,
		.elementor-accordion-title,
		.elementor-tab-title,
		.elementor-toggle-title,
		.elementor-swiper-button,
		.swiper-button-prev,
		.swiper-button-next,
		.swiper-pagination-bullet,
		.page-numbers,
		.npc-review-item,
		.npc-brand-logo,
		.npc-product-card,
		.npc-scd-card,
		.npc-sidebar-menu a,
		.npc-sidebar-menu button,
		.npc-menu-toggle,
		.npc-mobile-menu-toggle
	) * {
		-webkit-tap-highlight-color: transparent !important;
	}

	html.npc-suxf-touch-input :where(
		a[href],
		button,
		[role="button"],
		[role="link"],
		[tabindex]:not([tabindex="-1"]),
		.elementor-button,
		.e-clickable,
		.elementor-clickable,
		.elementor-accordion-title,
		.elementor-tab-title,
		.elementor-toggle-title,
		.elementor-swiper-button,
		.swiper-button-prev,
		.swiper-button-next,
		.swiper-pagination-bullet,
		.page-numbers,
		.npc-review-item,
		.npc-brand-logo,
		.npc-product-card,
		.npc-scd-card,
		.npc-sidebar-menu a,
		.npc-sidebar-menu button,
		.npc-menu-toggle,
		.npc-mobile-menu-toggle
	):where(:focus, :active, :focus-visible),
	html.npc-suxf-touch-input :where(
		.elementor-location-header a[href],
		.elementor-location-header a[href] *,
		.elementor-widget-theme-site-logo a[href],
		.elementor-widget-theme-site-logo a[href] *,
		.elementor-widget-loop-grid a[href],
		.elementor-widget-loop-grid a[href] *,
		.elementor-loop-container a[href],
		.elementor-loop-container a[href] *,
		.e-loop-item a[href],
		.e-loop-item a[href] *,
		.e-clickable,
		.e-clickable *,
		.elementor-accordion-title,
		.elementor-accordion-title *,
		.elementor-tab-title,
		.elementor-tab-title *,
		.elementor-toggle-title,
		.elementor-toggle-title *,
		.swiper-pagination-bullet,
		.swiper-pagination-bullet *,
		.npc-scd-card,
		.npc-scd-card *,
		.npc-sidebar-menu a,
		.npc-sidebar-menu button,
		.npc-menu-toggle,
		.npc-mobile-menu-toggle
	):where(:focus, :active, :focus-visible) {
		outline: none !important;
		box-shadow: none !important;
	}

	html.npc-suxf-touch-input :where(
		input,
		select,
		textarea,
		[contenteditable="true"]
	):where(:focus, :active, :focus-visible) {
		outline: revert;
	}
}