/**
 * Infographic Image Viewer Styles
 *
 * Styles for the tap-to-open infographic viewer on LearnDash lesson pages.
 *
 * The JavaScript (panzoom-init.js) adds a transparent <a> overlay over every
 * figure.panzoom-image element. Tapping it opens the image in a new browser tab
 * (web browser path) or in the BuddyBoss App in-app browser (app path).
 *
 * These styles ensure the figure is a proper positioning context for the overlay
 * and that the image displays correctly within it.
 *
 * This stylesheet is loaded only on LearnDash course, lesson, and topic pages.
 * The PHP enqueue function (cookie_cart_enqueue_panzoom) restricts loading to
 * those post types via is_singular().
 *
 * Maintenance notes:
 * - If the "panzoom-image" class name changes, update the selectors here,
 *   in panzoom-init.js, and notify content editors.
 * - The -webkit-touch-callout rule suppresses the iOS long-press context menu
 *   (Save Image / Copy Image / etc.) that appears when a user long-presses an
 *   image. Without it, long-pressing the overlay on iOS shows the context menu
 *   for the <a> element rather than the image, which is confusing.
 */

/**
 * Make the figure a positioning context for the absolute tap overlay.
 *
 * The JS sets position:relative and display:block via inline styles on the figure
 * element as well. This rule ensures the correct layout even if the JS has not
 * yet run or the inline styles are stripped.
 */
figure.panzoom-image {
	position: relative;
	display: block;
	cursor: pointer;
}

/**
 * Suppress the iOS long-press link menu on the tap overlay.
 *
 * Without this, long-pressing the transparent <a> overlay on iOS shows a context
 * menu with "Open Link", "Copy Link", etc. — which is disorienting since the
 * overlay is invisible. -webkit-touch-callout: none suppresses this menu for
 * the link element and its descendants.
 */
figure.panzoom-image a {
	-webkit-touch-callout: none;
}