/* ==========================================================================
   LeadPDF mobile + tablet layer

   Loaded after lpdf-custom (custom.css). EVERY rule in this file lives inside
   a media query, so desktop rendering (and any viewport that does not match)
   is byte-for-byte identical to before. Nothing here touches payment logic,
   ARMember, AJAX actions or the conversion pipeline — layout layer only.

   Issue map (see mobile optimization plan):
     2. Upload box gutted on mobile
     3. Dashboard files table broken (actions column fixed 450px)
     4. Forms scroll-box clips the preview on touch
     5. Tap targets below 44px
     6. Header squeeze + hero tabs overflow
     + Fancybox popup polish on small screens
   ========================================================================== */

/* --------------------------------------------------------------------------
   Phones (<= 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* --- Issue 6a: header squeeze ---------------------------------------
	   The 95px header crams a 200px logo + the mobile menu toggle.
	   Slim the container padding, shrink the logo, force-hide the legacy
	   desktop nav widget (idempotent — Elementor hides it <=767px anyway,
	   this guarantees it on every page/cache state). */
	.elementor-location-header .elementor-element-87bb391 > .e-con-inner {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		align-items: center;
	}

	.elementor-location-header .elementor-element-b24b432,
	.elementor-location-header .elementor-element-b24b432 img {
		width: 150px !important;
		max-width: 150px !important;
		height: auto !important;
	}

	.elementor-location-header .elementor-element-9d1861f {
		display: none !important;
	}

	/* mobile nav widget: shrink-wrap the toggle, hug the inline end */
	.elementor-location-header .elementor-element-be71d48 {
		width: auto !important;
		margin-inline-start: auto;
	}

	/* --- Issue 5: 44px hamburger hit area (icon keeps its size, centered) */
	.elementor-location-header .e-n-menu-toggle,
	.elementor-location-header .elementor-menu-toggle {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* mobile drawer links: 44px rows */
	.elementor-location-header .e-n-menu-title-container,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* --- Issue 2: upload box gutted on mobile ---------------------------
	   Was: 60px strip, 13px text, illustration hidden. Now a prominent
	   tap target with a visible "+" affordance. Scoped to #uploadBox so
	   #fileListWrapper.upload-box (file-list state) is NOT affected.
	   The box sits on a blue/purple hero container on every tool page,
	   so the dashed border + translucent fill are white. */
	#uploadBox.upload-box {
		min-height: 180px;
		font-size: 17px;
		padding: 24px 16px;
		border: 2px dashed rgba(255, 255, 255, 0.85);
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.08);
		gap: 14px;
	}

	/* re-enable the plus affordance (custom.css hides it below 768px) */
	#uploadBox .img-wrapper {
		display: block;
		background: #fff;
		border-radius: 50%;
		width: 56px;
		height: 56px;
		position: relative;
		flex: 0 0 auto;
	}

	#uploadBox .img-wrapper svg {
		width: 30px;
		height: 30px;
	}

	#uploadBox .text-mobile {
		font-size: 17px;
		line-height: 1.4;
	}

	/* --- Issue 3: dashboard files table -> cards --------------------------
	   The actions column is hard-coded to 450px in custom.css — wider than
	   a phone. Stack rows as cards with ::before labels (data-label attrs
	   are printed by shortcodes/files-list.php, translated via lpdf_t). */
	.page-id-3811 .compdf-files-table thead {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.page-id-3811 .compdf-files-table,
	.page-id-3811 .compdf-files-table tbody,
	.page-id-3811 .compdf-files-table tr,
	.page-id-3811 .compdf-files-table td {
		display: block;
	}

	.page-id-3811 .compdf-files-table tr {
		border: 1px solid #ddd;
		border-radius: 12px;
		padding: 10px 14px;
		margin-bottom: 12px;
	}

	.page-id-3811 .compdf-files-table td {
		border-bottom: none;
		min-height: 0;
		padding: 6px 0;
		text-align: left !important;
		word-break: break-word;
	}

	.page-id-3811 .compdf-files-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #666;
		margin-bottom: 2px;
	}

	/* neutralize the fixed 450px actions column */
	.page-id-3811 .compdf-files-table th:last-child,
	.page-id-3811 .compdf-files-table td:last-child {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* 2x2 grid of 44px action buttons */
	.page-id-3811 .file-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		justify-content: stretch;
	}

	.page-id-3811 .file-actions .data-actions {
		min-height: 44px;
		justify-content: center;
		text-align: center;
		margin: 0;
	}

	/* ARMember upsell button (non-members) spans the full card width */
	.page-id-3811 .file-actions .button-upgrade {
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin: 0;
	}

	/* --- Issue 4: forms scroll-box clips the preview ----------------------
	   Was fixed 400x400 overflow:hidden with a hover-only zoom animation,
	   so the bottom of the form preview was unreachable on touch. */
	.scroll-box-wrapper {
		padding: 16px !important;
	}

	/* !important: the Elementor page CSS (post-669.css) re-declares
	   .scroll-box{overflow:hidden} and loads after this file. */
	.scroll-box-wrapper .scroll-box {
		width: 100%;
		max-width: 400px;
		height: 60vh;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		margin-inline-start: auto;
		margin-inline-end: auto;
	}

	/* --- Issue 5: homepage section accordion headings (custom.js tabs) --- */
	.my-tab-heading {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.my-tab-heading::after {
		top: 50%;
		transform: translateY(-50%);
	}

	/* --- Issue 5: popup close + Fancybox chrome tap targets --------------- */
	.button-fb-close {
		width: 44px;
		height: 44px;
		top: 8px;
		right: 8px;
		align-items: center;
		justify-content: center;
	}

	.fancybox__container .f-button,
	.fancybox__toolbar button {
		min-width: 44px;
		min-height: 44px;
	}

	/* --- popups: breathe on small screens --------------------------------- */
	.f-html {
		padding: 20px;
	}

	.f-html h2 {
		font-size: 20px;
	}
}

/* single-column page-range form on the narrowest phones */
@media (max-width: 480px) {
	.form-row {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Touch devices: the scroll-box preview animation is hover-only. On touch
   there is no hover, so kill the transform/animation entirely — the box
   above becomes a plain scrollable preview instead.
   -------------------------------------------------------------------------- */
@media (hover: none) {
	.scroll-box-wrapper:hover {
		transform: none;
	}

	.scroll-box-wrapper:hover img,
	.scroll-box-wrapper:hover > img {
		animation: none;
		transform: none;
	}

	/* touch devices can't hover-pan the preview — let them swipe it
	   (covers touch tablets at 768-1024px too, where the width-based
	   rules above don't apply) */
	.scroll-box-wrapper .scroll-box {
		overflow-y: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Tablets (768px - 1024px): only where the desktop rules measurably break.
   The files table's fixed 450px actions column cramps the filename column
   at these widths — let the table auto-balance (buttons already wrap).
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.page-id-3811 .compdf-files-table th:last-child,
	.page-id-3811 .compdf-files-table td:last-child {
		width: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Issue 6b: hero tab strip overflow (phones AND tablets)
   665px+ of tabs inside a too-narrow strip scrolled sideways / bled past
   the viewport — measured at 393px (2 of 4 tabs hidden) AND at 768x1024
   (tab button reached x=793 in a 768 viewport). Force a deterministic
   2x2 grid: wraps in every locale, no sideways scroll even with long
   translations. >=1025px desktop keeps the single-row strip untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.tubs-p .e-n-tabs-heading {
		flex-wrap: wrap !important;
		gap: 6px !important;
		padding: 10px !important;
		overflow: visible !important;
		justify-content: center;
	}

	.tubs-p .e-n-tab-title {
		flex: 1 1 calc(50% - 3px) !important;
		min-width: 0 !important;
		max-width: calc(50% - 3px);
		min-height: 44px;
		padding: 8px 6px !important;
		font-size: 13px !important;
		line-height: 1.25 !important;
		white-space: normal !important;
		justify-content: center;
		text-align: center;
	}
}