/**
 * JasaPanda Theme Child — Responsive Overrides
 *
 * Final layer of media queries to fine-tune the theme across
 * all breakpoints — from small phones to ultra-wide desktops.
 *
 * Approach: Mobile-first (defaults are mobile in other files,
 * this file adds progressive enhancement).
 *
 * @package JasaPanda_Theme_Child
 * @since   1.0.0
 */

/* ==========================================================================
   1. EXTRA SMALL DEVICES (< 480px)
   Small phones (iPhone SE, etc.)
   ========================================================================== */

@media (max-width: 479.98px) {

	:root {
		--jp-container-px: 1rem;
		--jp-header-height: 64px;
		--jp-header-height-scrolled: 60px;
	}

	/* Tighter header on tiny screens. */
	.jp-header__inner {
		gap: var(--jp-space-3);
	}

	.jp-logo img,
	.jp-logo .custom-logo {
		max-height: 36px;
	}

	.jp-logo__text {
		font-size: var(--jp-fs-lg);
	}

	/* Hide extras — keep only logo + hamburger. */
	.jp-header__search,
	.jp-header__social,
	.jp-header__cta {
		display: none;
	}

	/* Off-canvas: full width on tiny screens. */
	.jp-offcanvas {
		width: 100vw;
		max-width: 100vw;
	}

	.jp-offcanvas__header,
	.jp-offcanvas__body {
		padding: var(--jp-space-5);
	}

	/* Mobile menu — slightly smaller text. */
	.jp-offcanvas__nav .jp-menu--mobile .jp-menu__link {
		font-size: var(--jp-fs-lg);
		padding: var(--jp-space-3) 0;
	}

	/* Footer marquee — smaller. */
	:root {
		--jp-marquee-fs: clamp(3rem, 16vw, 5rem);
	}

	.jp-footer__badge {
		width: 100px;
		height: 100px;
	}

	.jp-footer__marquee-wrap {
		padding: var(--jp-space-10) 0 var(--jp-space-6);
	}

	.jp-footer__main {
		padding: var(--jp-space-8) 0 var(--jp-space-10);
	}

	.jp-footer__grid {
		gap: var(--jp-space-8);
	}

	/* Scroll to top — smaller & closer to edge. */
	.jp-scroll-top {
		width: 40px;
		height: 40px;
		bottom: var(--jp-space-4);
		right: var(--jp-space-4);
	}

	/* Buttons — slightly smaller padding. */
	.jp-btn {
		padding: 0.75rem 1.25rem;
		font-size: var(--jp-fs-xs);
	}

	/* Typography — tighter headings. */
	h1 { font-size: var(--jp-fs-3xl); }
	h2 { font-size: var(--jp-fs-2xl); }
	h3 { font-size: var(--jp-fs-xl); }
}


/* ==========================================================================
   2. SMALL DEVICES (480px – 639px)
   Large phones (iPhone Plus, Pixel Pro, etc.)
   ========================================================================== */

@media (min-width: 480px) and (max-width: 639.98px) {

	.jp-header__inner {
		gap: var(--jp-space-4);
	}

	.jp-header__search,
	.jp-header__social,
	.jp-header__cta {
		display: none;
	}

	.jp-footer__grid {
		gap: var(--jp-space-10);
	}
}


/* ==========================================================================
   3. MEDIUM-SMALL / TABLET (640px – 767px)
   Small tablets, phablets, iPad Mini portrait
   ========================================================================== */

@media (min-width: 640px) and (max-width: 767.98px) {

	.jp-header__search,
	.jp-header__cta {
		display: none;
	}

	.jp-header__social {
		display: none;
	}

	/* Footer grid: 2 columns. */
	.jp-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.jp-footer__col--about {
		grid-column: 1 / -1;
	}
}


/* ==========================================================================
   4. MEDIUM / TABLET (768px – 1023px)
   iPad portrait/landscape, tablets
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023.98px) {

	:root {
		--jp-header-height: 76px;
	}

	/* Show search, hide primary nav (use off-canvas). */
	.jp-header__nav {
		display: none;
	}

	.jp-header__search {
		display: flex;
	}

	.jp-search-form__input {
		width: 160px;
	}

	.jp-search-form__input:focus {
		width: 200px;
	}

	/* Hide CTA on tablet (space is limited). */
	.jp-header__cta {
		display: none;
	}

	/* Footer grid: 2 columns wider. */
	.jp-footer__grid {
		grid-template-columns: 1.2fr 1fr;
		gap: var(--jp-space-12);
	}

	.jp-footer__col--about {
		grid-column: 1 / -1;
		max-width: 480px;
	}

	.jp-footer__main {
		padding: var(--jp-space-14) 0;
	}
}


/* ==========================================================================
   5. LAPTOP (1024px – 1535px)
   iPad Pro landscape through standard laptops (1280, 1366, 1440px are all
   real, common viewport widths in this range).

   --jp-container-max is 1560px, so on real laptop screens (which are
   almost always narrower than that) the header never reaches its
   "ideal" width. Everything in this range must stay in a single
   compact mode — CTA + full-width search + full header spacing are
   reserved for --jp-container-max being reachable (>= 1536px).
   Previously this compact mode stopped at 1279.98px and a separate
   rule re-expanded everything from 1280px, which put the header back
   into a layout wider than the viewport could fit and caused the nav
   to visually overlap the logo on common laptop sizes. Keeping one
   continuous compact range through 1535.98px fixes that.
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1535.98px) {

	:root {
		/* Reclaim horizontal room; full 3rem padding is only for >= 1536px. */
		--jp-container-px-lg: 2rem;
	}

	.jp-header__inner {
		gap: var(--jp-space-6);
	}

	/* Hide CTA through the whole laptop range to reduce clutter. */
	.jp-header__cta {
		display: none;
	}

	/* Social icons stay reachable via the off-canvas menu; hiding them
	   here reclaims meaningful width for the primary nav + search. */
	.jp-header__social {
		display: none;
	}

	/* Slightly tighter menu but still nowrap */
	.jp-menu--primary > .jp-menu__item > .jp-menu__link {
		padding: var(--jp-space-3);
		font-size: var(--jp-fs-xs);
		white-space: nowrap;
	}

	.jp-nav--primary .jp-menu--primary {
		gap: var(--jp-space-2);
	}

	/* Smaller search on this breakpoint */
	.jp-search-form .jp-search-form__input {
		width: 160px;
	}

	/* Mega menu: single column so rows stay comfortably readable at this width. */
	.jp-menu--primary .sub-menu {
		grid-template-columns: 1fr;
		width: 300px;
	}

	.jp-search-form .jp-search-form__input:focus {
		width: 200px;
	}

	/* Footer: 4 columns but slightly tighter. */
	.jp-footer__grid {
		gap: var(--jp-space-8);
	}
}


/* ==========================================================================
   7. 2XL / ULTRA-WIDE (≥ 1536px)
   Large desktops, 4K, ultrawide monitors
   ========================================================================== */

@media (min-width: 1536px) {

	:root {
		--jp-container-max: 1680px;   /* Even wider on ultra-wide screens */
		--jp-container-px-lg: 3.5rem;
		--jp-header-height: 96px;
		--jp-header-height-scrolled: 76px;
	}

	.jp-menu--primary {
		gap: var(--jp-space-4);
	}

	.jp-menu--primary > .jp-menu__item > .jp-menu__link {
		padding: var(--jp-space-3) var(--jp-space-5);
		font-size: var(--jp-fs-base);
		white-space: nowrap;
	}

	.jp-search-form .jp-search-form__input {
		width: 240px;
	}

	.jp-search-form .jp-search-form__input:focus {
		width: 300px;
	}

	.jp-footer__main {
		padding: var(--jp-space-20) 0;
	}

	.jp-footer__grid {
		gap: var(--jp-space-14);
	}
}


/* ==========================================================================
   8. TOUCH DEVICES — no hover state
   Optimize for touchscreens (phones, tablets).
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

	/* Remove hover-only underline slide — keep it visible always for touch. */
	.jp-menu--primary > .jp-menu__item--active > .jp-menu__link::after,
	.jp-menu--primary > .jp-menu__item.current-menu-parent > .jp-menu__link::after {
		transform: scaleX(1);
	}

	/* Larger touch targets on interactive elements. */
	.jp-btn {
		min-height: 48px;
	}

	.jp-menu--primary > .jp-menu__item > .jp-menu__link,
	.jp-menu--footer .jp-menu__link,
	.jp-footer__social-link {
		padding-top: var(--jp-space-3);
		padding-bottom: var(--jp-space-3);
	}

	/* Disable transform-based hover effects (feels laggy on touch). */
	.jp-btn--primary:hover,
	.jp-btn--secondary:hover {
		transform: none;
	}

	.jp-offcanvas-trigger:hover,
	.jp-offcanvas__close:hover {
		transform: none;
	}

	.jp-social--header .jp-social__link:hover,
	.jp-social--offcanvas .jp-social__link:hover {
		transform: none;
	}

	/* Marquee pause on touch (tap to pause). */
	.jp-marquee:active .jp-marquee__track {
		animation-play-state: paused;
	}

	/* Image zoom becomes tap-to-zoom instead of hover. */
	.jp-img-zoom:active img,
	.jp-entry__thumb:active img {
		transform: scale(1.04);
	}
}


/* ==========================================================================
   9. LANDSCAPE MOBILE (short height)
   Prevent off-canvas overflow on landscape phones.
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {

	.jp-offcanvas__body {
		padding: var(--jp-space-4);
		gap: var(--jp-space-6);
	}

	.jp-offcanvas__nav .jp-menu--mobile .jp-menu__link {
		font-size: var(--jp-fs-md);
		padding: var(--jp-space-2) 0;
	}

	.jp-offcanvas__heading {
		margin-bottom: var(--jp-space-2);
	}
}


/* ==========================================================================
   10. HIGH-DPI / RETINA DISPLAYS
   Sharpen borders and dividers on retina.
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {

	.jp-header {
		border-bottom-width: 0.5px;
	}

	.jp-header.is-scrolled {
		border-bottom-width: 0.5px;
	}

	.jp-marquee__text {
		-webkit-text-stroke-width: 0.75px;
		text-stroke-width: 0.75px;
	}
}


/* ==========================================================================
   11. DARK MODE (if user prefers)
   Respect OS-level dark preference.
   Note: applies to elements NOT inside footer (which is already dark).
   ========================================================================== */

@media (prefers-color-scheme: dark) {

	/* Uncomment to enable auto dark mode:
	:root {
		--jp-color-bg:            #0A0A0A;
		--jp-color-bg-alt:        #171717;
		--jp-color-bg-muted:      #262626;
		--jp-color-text:          #F7F7F7;
		--jp-color-text-muted:    #A3A3A3;
		--jp-color-border:        rgba(255, 255, 255, 0.10);
		--jp-color-border-strong: rgba(255, 255, 255, 0.16);
		--jp-color-glass:         rgba(15, 15, 15, 0.75);
	}
	*/
}


/* ==========================================================================
   12. PRINT STYLES
   Clean printable version — hide non-essential elements.
   ========================================================================== */

@media print {

	/* Universal reset for print (standard pattern) -- !important is
	   intentional here so the print layout can't be defeated by any more
	   specific on-screen rule elsewhere in the theme. */
	*,
	*::before,
	*::after {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #555;
	}

	/* Structural/interactive elements never make sense on paper; !important
	   guards against their many on-screen positioning rules (fixed, sticky). */
	.jp-header,
	.jp-footer,
	.jp-offcanvas,
	.jp-overlay,
	.jp-scroll-top,
	.jp-skip-link,
	.jp-newsletter,
	.jp-header__actions,
	.elementor-editor-active,
	nav,
	video,
	audio,
	iframe {
		display: none !important;
	}

	/* Beats .jp-body:not()...:not() .jp-main in style.css, which has higher
	   specificity -- !important needed since this must win in print regardless
	   of page template. */
	.jp-main {
		padding-top: 0 !important;
	}

	body {
		font-size: 12pt;
		line-height: 1.5;
	}

	h1, h2, h3, h4 {
		page-break-after: avoid;
	}

	img {
		page-break-inside: avoid;
	}

	p, blockquote {
		orphans: 3;
		widows: 3;
	}
}


/* ==========================================================================
   13. ACCESSIBILITY — Focus visibility on all sizes
   ========================================================================== */

@media (any-hover: none) {
	/* Universal accessibility fallback: guarantees a focus ring on ANY
	   element, even ones with their own :focus-visible rule elsewhere that
	   might not account for touch/hybrid devices -- !important intentional. */
	:focus-visible {
		box-shadow: var(--jp-focus-ring) !important;
	}
}


/* ==========================================================================
   14. ELEMENTOR-SPECIFIC RESPONSIVE FIXES
   ========================================================================== */

/* Elementor editor mode — remove fixed positioning to prevent editor conflicts. */
.elementor-editor-active .jp-header {
	position: absolute;
}

.elementor-editor-active .jp-scroll-top {
	display: none;
}

/* Prevent horizontal scroll on mobile from wide Elementor sections. */
@media (max-width: 767.98px) {

	.elementor-section-stretched {
		max-width: 100vw;
		overflow-x: hidden;
	}
}


/* ==========================================================================
   15. WORDPRESS ADMIN BAR — Responsive fix
   ========================================================================== */

@media screen and (max-width: 782px) {

	.admin-bar .jp-header {
		top: 46px;
	}

	.admin-bar .jp-offcanvas {
		top: 46px;
		height: calc(100dvh - 46px);
	}
}

@media screen and (min-width: 783px) {

	.admin-bar .jp-header {
		top: 32px;
	}

	.admin-bar .jp-offcanvas {
		top: 32px;
		height: calc(100dvh - 32px);
	}
}