/* ==========================================================================
   ReampZone -- responsive layer
   Loaded after style.css and theme-modern.css.

   WHY THIS FILE EXISTS
   The modern theme layer was built desktop-first and ended up with a single
   real media query across ~330 rules. Every fixed dimension in it -- 520px
   min-heights, 760px containers, 64px section padding, 40px nav pills, a
   60vh image cap -- applied unchanged from a 320px phone to a 4K monitor.
   This file adapts those, and fixes the layout problems that only appear
   below Bootstrap's 992px column breakpoint.

   Breakpoints follow the theme's existing Bootstrap 3 grid so nothing fights
   it: 1200 / 992 / 768 / 480.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Product page: get the price and Add to Cart above the fold
   MEASURED PROBLEM: Bootstrap stacks .col-lg-3 under .col-lg-9 below 992px,
   so on tablet the sidebar -- which holds the price and the buy button --
   started at y=3274 on a 4707px page. The single most important control on a
   product page was below the entire description and audio players.

   `display: contents` dissolves the column and sidebar wrappers so their
   children become items of the same flex column as the content, which lets
   them be ordered individually:
       price/CTA -> Pack Includes -> description -> Top Selling
   Neither wrapper carries visual styling of its own, so nothing is lost.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	@supports (display: contents) {
		.single-download .row,
		.post-content > .row,
		.row:has(> .sidebar),
		.row:has(.cart-box) {
			display: flex;
			flex-direction: column;
		}

		.row:has(.cart-box) > [class*="col-"]:has(.sidebar),
		.row:has(.cart-box) .sidebar { display: contents; }

		/* Price + buy button first. */
		.row:has(.cart-box) .sidebar-item:has(.cart-box) { order: -2; }

		/* Spec block next -- it is short and helps the buying decision. */
		.row:has(.cart-box) .sidebar-item:has(.details-table) { order: -1; }

		/* Main content. */
		.row:has(.cart-box) > [class*="col-"]:not(:has(.sidebar)) { order: 0; }

		/* Everything else in the sidebar (Top Sellers, etc.) after the copy. */
		.row:has(.cart-box) .sidebar-item { order: 1; }

		.row:has(.cart-box) .sidebar-item { margin-bottom: 16px; }
	}

	/* Fallback: no :has()/contents -- at least put the whole sidebar first. */
	@supports not (selector(:has(*))) {
		.single-download .row { display: flex; flex-direction: column; }
		.single-download .row > [class*="col-"]:last-child { order: -1; }
	}
}


/* --------------------------------------------------------------------------
   2. About section: the overlay is a desktop composition
   The image is 2171x724 (3:1). Below 992px the container becomes portrait
   (measured 375x683), and `object-fit: cover` on a 3:1 source crops it to a
   narrow vertical sliver -- the artwork becomes unreadable AND it is sitting
   behind text. Unstack it: image below the copy, at its natural ratio.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.fw-container:has(img.media-image) {
		display: block;
		min-height: 0;
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}

	.fw-container:has(img.media-image) > .fw-row:has(img.media-image) {
		position: static;
		inset: auto;
		margin-top: 22px;
	}

	.fw-container:has(img.media-image) img.media-image {
		height: auto;
		aspect-ratio: 2171 / 724;
		object-fit: contain;
		opacity: .9;              /* no longer behind text, so let it read */
		border-radius: 10px;
	}

	/* The vignette existed only to protect text over the image. */
	.fw-container:has(img.media-image)::after { display: none; }
}


/* --------------------------------------------------------------------------
   3. Vertical rhythm and hero
   64px section padding and a 520px footer are desktop values.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) { :root { --rz-section-y: 52px; } }
@media (max-width: 991px)  { :root { --rz-section-y: 44px; } }
@media (max-width: 767px)  { :root { --rz-section-y: 34px; } }
@media (max-width: 479px)  { :root { --rz-section-y: 26px; } }

@media (max-width: 767px) {
	.fw-main-row.section.parallax-section:first-child { padding: 40px 0 34px; }

	.search-title h1 { font-size: clamp(26px, 7.2vw, 34px); line-height: 1.12; }
	.fw-heading { padding-bottom: 16px; margin-bottom: 20px; }
	.fw-heading::after { width: 72px; height: 3px; }
	.fw-special-title { font-size: clamp(24px, 6.4vw, 32px); }

	/* Body copy was 15px/1.7 with a 72ch cap -- the cap does nothing here and
	   the leading is loose on a narrow column. */
	p, .entry-content li { font-size: 15px; line-height: 1.6; }
	.entry-content p, .fw-testimonials-content { max-width: none; }
}


/* --------------------------------------------------------------------------
   4. Footer
   min-height:520px is 64% of a 375x812 viewport, mostly a cropped image.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	#footer { min-height: 380px; padding: 40px 0 34px; background-position: center top !important; }
	#footer .container { max-width: 100%; padding: 18px; border-radius: 14px; }
}

@media (max-width: 479px) {
	#footer { min-height: 300px; padding: 30px 0 26px; }
	#footer .container { padding: 14px; border-radius: 12px; }
	#footer .footer-text { font-size: 12px; }
}


/* --------------------------------------------------------------------------
   5. Touch targets
   MEASURED: pagination chips 14px tall, testimonial links 15px, product
   titles 19px. WCAG 2.5.8 asks for 24px minimum; 40px+ is the practical
   floor on touch. Applied via a pointer query so desktop density is kept.
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
	.pagination ul li a,
	.pagination ul li span,
	.page-numbers,
	.edd_pagination a,
	.edd_pagination span {
		min-width: 44px;
		height: 44px;
	}

	.header-wrap ul.menu > li > a,
	.header-wrap ul.shop-nav > li > a,
	.header-wrap ul.shop-nav .cart-btn { height: 44px; }

	.sidebar .sidebar-item .filter-by a { padding: 12px 16px; }

	.details-table ul li { padding: 13px 0; }

	/* Inline text links in dense blocks get breathing room rather than a box. */
	.fw-testimonials-url a,
	#footer .menu li a,
	#footer .textwidget a { display: inline-block; padding: 6px 2px; }

	.edd_download_inner .product-name a { display: block; padding: 8px 0; }

	/* Category navigation. Measured at 16px tall -- this is the primary way to
	   browse the catalogue on a phone, so every row needs a real tap target.
	   Deliberately NOT flexing the <li>: these lists nest, and making the row a
	   flex container puts a child <ul> beside its parent link instead of under
	   it. Padding the anchor alone gets the target size without touching the
	   list structure. */
	.edd-taxonomy-widget li a,
	.sidebar .cat-item a,
	.sidebar-item ul li a,
	.widget ul li a {
		display: block;
		padding: 11px 4px;
		line-height: 1.3;
	}
}


/* --------------------------------------------------------------------------
   6. Cards and grids at intermediate widths
   The cross-sell row used `flex: 1 1 260px`, which drops to two-up between
   roughly 620px and 900px and leaves a stranded third card on its own row.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.edd-csau-products { gap: 12px; }
	.edd-csau-products > .edd_download { flex: 1 1 calc(50% - 6px); }
}

@media (max-width: 575px) {
	.edd-csau-products > .edd_download { flex: 1 1 100%; }
}

/* Product cards: the 16:10 media box is right on desktop but very tall in a
   single-column phone layout. */
@media (max-width: 767px) {
	.edd_download_inner .thumb { aspect-ratio: 16 / 9; }
	.edd_download_inner .product-details { padding: 14px; gap: 8px; }
	.edd_download_inner .product-name a { font-size: 14px; }
}


/* --------------------------------------------------------------------------
   7. Product image
   `max-height: 60vh` is sensible on a laptop but crops hard in landscape on a
   phone, where 60vh can be under 220px.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.preview-area img,
	.product-image img { max-height: none; }
}

@media (orientation: landscape) and (max-height: 500px) {
	.preview-area img { max-height: 70vh; }
	.fw-main-row.section.parallax-section:first-child { padding: 28px 0 24px; }
}


/* --------------------------------------------------------------------------
   8. Checkout
   The two-up field rule fires from 768px, but the form sits in a narrower
   column at tablet widths, so the pairs were cramped.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {
	#edd_cc_address .edd-form-group,
	#edd_checkout_user_info .edd-form-group { width: 100%; margin-right: 0; }
}

@media (max-width: 767px) {
	#edd_checkout_form_wrap fieldset,
	#edd_checkout_user_info,
	#edd_cc_fields,
	#edd_cc_address,
	#edd_purchase_submit,
	#edd_final_total_wrap,
	#edd_discount_code { padding: 14px !important; }

	#edd_checkout_cart th,
	#edd_checkout_cart td { padding: 11px 12px !important; }
}


/* --------------------------------------------------------------------------
   9. Long-content safety
   Product names, amp models and discount codes can be long strings without
   spaces. Without this they force horizontal scroll on narrow screens.
   -------------------------------------------------------------------------- */

.edd_download_inner .product-name a,
.edd-table td, .edd-table th,
#edd_user_history td, #edd_user_history th,
#edd_checkout_cart td, #edd_checkout_cart th,
.details-table ul li,
.fw-special-title,
h1, h2, h3 { overflow-wrap: anywhere; }

/* Media never breaks its container, whatever the source dimensions. */
img, video, iframe, embed, object { max-width: 100%; }


/* --------------------------------------------------------------------------
   10. Reading measure on large screens
   MEASURED at 1920px: body paragraphs render 1096px wide -- roughly 140
   characters per line, against a comfortable range of 45-85. style.css caps
   `.entry-content p` at 72ch, but most body copy on this site sits outside
   `.entry-content` and had no cap at all.

   Capped rather than widened: the theme's Bootstrap container is fixed at
   1170px, so the fix belongs on the text, not the grid.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.fw-main-row.section p,
	.post-content > p,
	.fw-text p,
	.fw-heading + p {
		max-width: 78ch;
	}

	/* Centred sections keep their paragraphs centred once capped. */
	.text-center p,
	.centered p,
	.fw-heading + p { margin-left: auto; margin-right: auto; }
}

/* Section subtitles are short by nature -- leave them alone so they do not
   inherit an awkward narrow column. */
.fw-special-subtitle { max-width: none; }


/* --------------------------------------------------------------------------
   11. Very large screens
   The theme's container is fixed at 1170px, so beyond ~1600px the page reads
   as a narrow strip. Rather than change the grid (which would affect every
   template), give the widest viewports a little more air in the hero so the
   composition does not sit crushed at the top of a tall screen.
   -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
	.fw-main-row.section.parallax-section:first-child { padding: 112px 0 88px; }
	.search-title h1 { font-size: clamp(48px, 3.6vw, 68px); }
}


/* --------------------------------------------------------------------------
   12. reCAPTCHA badge -- horizontal scroll at common laptop widths
   MEASURED at 1280px: 63px of horizontal overflow on every page.

   The site's Additional CSS hides the badge with `visibility: collapse`, but
   on a non-table element that behaves as `hidden` -- the element still takes
   part in layout. The badge is `position: fixed` at left:1200px with a 256px
   width, so its right edge lands at 1456px and extends the scrollable area.
   It is invisible, so the page just scrolls sideways for no apparent reason.

   Moving it off the left edge keeps the widget in the DOM and functional
   (reCAPTCHA needs it rendered) while removing it from the scroll extent --
   browsers do not scroll left of the origin.
   -------------------------------------------------------------------------- */

.grecaptcha-badge {
	left: -9999px !important;
	right: auto !important;
	visibility: hidden !important;
	pointer-events: none;
}


/* --------------------------------------------------------------------------
   13. Horizontal page scroll at intermediate desktop widths -- ROOT CAUSE
   MEASURED at 1280px: 73px of real horizontal scroll (the page could be
   dragged sideways). Bisection pointed at the fixed header; measuring inside
   it found `ul.menu` with a 305px box but a 697px scrollWidth.

   The cause is not the nav padding. The theme hides its dropdowns with
   `opacity: 0` alone -- they stay `display: block` and `visibility: visible`,
   so they occupy layout at all times. The third-level flyout sits at
   `left: 229px` inside its parent and reached x=1313 on a 1270px viewport.

   Taking closed menus out of flow fixes it at the source and costs nothing:
   they were invisible anyway. Shown on real hover and on `active-nav`, the
   class the theme's JS toggles.
   -------------------------------------------------------------------------- */

/* !important is required: theme-modern.css sets `display: block` on a grouped
   selector that includes `ul.menu li:hover > .sub-menu`, and grouped selectors
   apply their declarations at EACH selector's own specificity -- the hover
   variant (0,3,3) outranks this rule (0,2,2) even when not hovered is false,
   because the same declaration block is also reachable via the higher-ranked
   selector in the group. Forcing it is simpler and safer than restructuring
   that rule. */
ul.menu li > .sub-menu,
.header-wrap ul.menu li > ul { display: none !important; }

ul.menu li:hover > .sub-menu,
ul.menu li:focus-within > .sub-menu,
ul.menu li.active-nav > .sub-menu,
.header-wrap ul.menu li:hover > ul,
.header-wrap ul.menu li.active-nav > ul { display: block !important; }


/* --------------------------------------------------------------------------
   14. Header density in the band where it is tight
   Secondary to the above, but the nav still has little room between the
   Bootstrap column breakpoint and ~1400px. A modest padding reduction keeps
   it comfortable without changing type size.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1399px) {
	.header-wrap ul.menu,
	.header-wrap ul.shop-nav,
	.menu-main-container > ul.menu { gap: 3px !important; }

	.header-wrap ul.menu > li > a,
	.header-wrap ul.shop-nav > li > a,
	.header-wrap ul.shop-nav .cart-btn { padding: 0 12px !important; }

	.site-logo { max-height: 48px; }
}


/* ==========================================================================
   Product sidebar -- wider on large desktops
   MEASURED at 1440px: the sidebar column is Bootstrap `.col-lg-3` = 25%,
   giving 270px of usable width once padding is removed. That is narrow enough
   that "$15.00 - Add to Cart" wraps onto two lines inside a 170px button.
   Widening to ~31% gives ~375px and keeps the buy button on one line.

   Scoped with `:has()` to the row that actually contains `.sidebar`, so the
   generic Bootstrap column widths are untouched everywhere else on the site.
   ========================================================================== */

@media (min-width: 1200px) {

	.row:has(> [class*="col-"] > .sidebar) > [class*="col-"]:has(> .sidebar) {
		width: 31%;
	}

	.row:has(> [class*="col-"] > .sidebar) > [class*="col-"]:not(:has(> .sidebar)) {
		width: 69%;
	}

	/* The inner `.sidebar` is a fixed 270px in the theme; let it fill. */
	.row:has(> [class*="col-"] > .sidebar) .sidebar {
		width: 100%;
		max-width: none;
	}
}


/* ==========================================================================
   Mobile: stop nesting 30px gutters
   MEASURED at 375px on a product page: `.paper` has 30px padding and the
   content wrapper inside it another 30px, so 120px of a 375px viewport --
   nearly a third -- was gutter. Related-product cards ended up 253px wide
   with 61px of dead space each side. Halving both recovers ~60px.
   ========================================================================== */

@media (max-width: 767px) {

	.paper { padding: 16px !important; }

	.paper .content-area > div,
	.content-area > .single-download,
	.content-area > div[class=""] { padding-left: 14px !important; padding-right: 14px !important; }

	#edd-related-items-wrapper .row { margin-left: -8px; margin-right: -8px; }
	#edd-related-items-wrapper [class*="col-"] { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 480px) {
	.paper { padding: 10px !important; }
	.paper .content-area > div { padding-left: 10px !important; padding-right: 10px !important; }
}


/* ==========================================================================
   TablePress: let wide tables scroll rather than squash on small screens
   ========================================================================== */

@media (max-width: 767px) {

	.dt-container .dt-layout-cell:has(> table),
	.dt-container .dt-layout-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tablepress,
	table.dataTable { min-width: 520px; }

	/* Controls stack instead of crowding the row. */
	.dt-container .dt-layout-row { display: block; }
	.dt-container .dt-layout-cell { width: 100%; padding: 6px 0; text-align: left !important; }
	.dt-container .dt-search input { width: 100%; margin: 6px 0 0; }

	.tablepress thead th,
	.tablepress tbody td { padding: 11px 12px !important; }
}


/* Keep footer social icons at the 44px touch minimum on touch devices --
   the desktop rule condenses them to 40px. */
@media (hover: none) and (pointer: coarse) {
	#footer .footer-social a,
	#footer .footer-social .icon {
		width: 44px !important;
		height: 44px !important;
		line-height: 44px !important;
	}
}


/* The 78ch reading-measure cap above is meant for long-form body copy running
   the width of the page. It also matches `.fw-main-row.section p`, which
   catches the testimonial quote -- capping it at 694px inside a 939px card and
   leaving 214px of dead space to the right of every quote. A card already
   bounds its own measure, so the cap is redundant there. */
@media (min-width: 992px) {
	/* Scoped through `.fw-main-row.section` on purpose: the cap it is undoing
	   is `.fw-main-row.section p` at specificity (0,2,1), so a bare
	   `.fw-testimonials-text p` (0,1,1) loses regardless of source order. */
	.fw-main-row.section .fw-testimonials-text p,
	.fw-main-row.section .fw-testimonials-item p,
	.fw-main-row.section .fw-iconbox p,
	.fw-testimonials-text p,
	.fw-testimonials-item p,
	.fw-iconbox p,
	.cart-box p,
	.sidebar-item p {
		max-width: none;
	}
}