/**
 * JasaPanda Theme Child — Base Styles
 *
 * Modern CSS reset, typography, container, buttons, forms,
 * and utility classes. This is the visual foundation for the
 * entire theme.
 *
 * @package JasaPanda_Theme_Child
 * @since   1.0.0
 */

/* ==========================================================================
   1. MODERN CSS RESET
   Inspired by Andy Bell + Josh Comeau — production-tested for 2024.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--jp-header-height-scrolled) + 24px);
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	line-height: var(--jp-lh-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-family: var(--jp-font-primary);
	font-size: var(--jp-fs-base);
	font-weight: var(--jp-fw-regular);
	color: var(--jp-color-text);
	background-color: var(--jp-color-bg);
	overflow-x: hidden;
}

/* Prevent body scroll when off-canvas is open. */
body.jp-no-scroll {
	overflow: hidden;
	touch-action: none;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

svg {
	fill: currentColor;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

p,
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	hyphens: auto;
}

ul, ol {
	list-style: none;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

hr {
	border: 0;
	height: 1px;
	background: var(--jp-color-border);
	margin: var(--jp-space-8) 0;
}

/* Remove default focus ring — we style our own below. */
:focus {
	outline: none;
}

/* Accessible focus ring for keyboard users. */
:focus-visible {
	outline: none;
	box-shadow: var(--jp-focus-ring);
	border-radius: var(--jp-radius-xs);
	transition: box-shadow var(--jp-duration-fast) var(--jp-ease-out);
}

/* Text selection color. */
::selection {
	background-color: var(--jp-color-primary);
	color: var(--jp-color-white);
}

::-moz-selection {
	background-color: var(--jp-color-primary);
	color: var(--jp-color-white);
}


/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--jp-font-display);
	font-weight: var(--jp-fw-bold);
	line-height: var(--jp-lh-tight);
	letter-spacing: var(--jp-ls-tight);
	color: var(--jp-color-text);
}

h1 { font-size: clamp(var(--jp-fs-3xl), 5vw, var(--jp-fs-6xl)); }
h2 { font-size: clamp(var(--jp-fs-2xl), 4vw, var(--jp-fs-5xl)); }
h3 { font-size: clamp(var(--jp-fs-xl), 3vw, var(--jp-fs-3xl)); }
h4 { font-size: clamp(var(--jp-fs-lg), 2.4vw, var(--jp-fs-2xl)); }
h5 { font-size: var(--jp-fs-xl); }
h6 { font-size: var(--jp-fs-lg); font-weight: var(--jp-fw-semibold); }

p {
	line-height: var(--jp-lh-relaxed);
	color: var(--jp-color-text);
}

p + p {
	margin-top: var(--jp-space-4);
}

small {
	font-size: var(--jp-fs-sm);
	color: var(--jp-color-text-muted);
}

strong, b {
	font-weight: var(--jp-fw-bold);
}

em, i {
	font-style: italic;
}

blockquote {
	position: relative;
	padding: var(--jp-space-6) var(--jp-space-8);
	border-left: 3px solid var(--jp-color-primary);
	background-color: var(--jp-color-bg-alt);
	font-style: italic;
	color: var(--jp-color-text);
	border-radius: 0 var(--jp-radius-md) var(--jp-radius-md) 0;
}

blockquote p {
	margin: 0;
}

code, kbd, samp, pre {
	font-family: var(--jp-font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	background-color: var(--jp-color-bg-muted);
	border-radius: var(--jp-radius-xs);
	color: var(--jp-color-primary-dark);
}

pre {
	padding: var(--jp-space-6);
	background-color: var(--jp-color-bg-dark);
	color: var(--jp-color-white);
	border-radius: var(--jp-radius-lg);
	overflow-x: auto;
	line-height: var(--jp-lh-relaxed);
}

pre code {
	padding: 0;
	background: transparent;
	color: inherit;
}


/* ==========================================================================
   3. LINKS
   ========================================================================== */

a {
	color: var(--jp-color-link);
	text-decoration: none;
	transition: var(--jp-transition-color);
}

a:hover {
	color: var(--jp-color-link-hover);
}

/* Content links (inside prose): subtle underline animation. */
.jp-entry__content a,
.jp-prose a {
	position: relative;
	color: var(--jp-color-primary);
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--jp-duration-base) var(--jp-ease-out);
}

.jp-entry__content a:hover,
.jp-prose a:hover {
	background-size: 100% 1px;
}


/* ==========================================================================
   4. CONTAINER
   ========================================================================== */

.jp-container {
	width: 100%;
	max-width: var(--jp-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--jp-container-px);
	padding-right: var(--jp-container-px);
}

.jp-container--narrow {
	max-width: 880px;
}

.jp-container--wide {
	max-width: 1560px;
}

.jp-container--fluid {
	max-width: 100%;
}

@media (min-width: 1024px) {
	.jp-container {
		padding-left: var(--jp-container-px-lg);
		padding-right: var(--jp-container-px-lg);
	}
}


/* ==========================================================================
   5. MAIN CONTENT WRAPPER
   ========================================================================== */

.jp-main {
	position: relative;
	min-height: 60vh;
}

/* Push content down so the fixed header doesn't overlap. */
.jp-body:not(.elementor-editor-active):not(.page-template-elementor_canvas) .jp-main {
	padding-top: var(--jp-header-height);
}

/* Elementor Canvas / Full-Width templates: no push, no header/footer. */
.page-template-elementor_canvas .jp-main,
.page-template-elementor_header_footer .jp-main {
	padding-top: 0;
}

/* Page wrapper. */
.jp-page {
	padding-top: var(--jp-space-16);
	padding-bottom: var(--jp-space-20);
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.jp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: var(--jp-btn-py) var(--jp-btn-px);
	font-family: var(--jp-font-primary);
	font-size: var(--jp-btn-fs);
	font-weight: var(--jp-btn-fw);
	line-height: 1;
	letter-spacing: var(--jp-ls-wide);
	text-decoration: none;
	border-radius: var(--jp-btn-radius);
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	transition: var(--jp-btn-transition);
	will-change: transform;
}

.jp-btn:focus-visible {
	box-shadow: var(--jp-focus-ring);
}

.jp-btn:active {
	transform: translateY(1px);
}

/* --- Sizes --- */
.jp-btn--sm {
	padding: 0.625rem 1.25rem;
	font-size: var(--jp-fs-xs);
}

.jp-btn--lg {
	padding: 1.125rem 2rem;
	font-size: var(--jp-fs-base);
}

/* --- Variants --- */

/* Primary — filled coral */
.jp-btn--primary {
	background-color: var(--jp-color-primary);
	color: var(--jp-color-white);
	box-shadow: var(--jp-shadow-primary);
}

.jp-btn--primary:hover {
	background-color: var(--jp-color-primary-hover);
	color: var(--jp-color-white);
	box-shadow: var(--jp-shadow-primary-hover);
	transform: translateY(-2px);
}

.jp-btn--primary .jp-btn__arrow {
	transition: transform var(--jp-duration-base) var(--jp-ease-spring);
}

.jp-btn--primary:hover .jp-btn__arrow {
	transform: translate(3px, -3px);
}

/* Secondary — filled dark */
.jp-btn--secondary {
	background-color: var(--jp-color-secondary);
	color: var(--jp-color-white);
}

.jp-btn--secondary:hover {
	background-color: var(--jp-color-secondary-hover);
	color: var(--jp-color-white);
	transform: translateY(-2px);
}

/* Outline — bordered, transparent bg */
.jp-btn--outline {
	background-color: transparent;
	color: var(--jp-color-text);
	border-color: var(--jp-color-border-strong);
}

.jp-btn--outline:hover {
	background-color: var(--jp-color-text);
	color: var(--jp-color-white);
	border-color: var(--jp-color-text);
}

/* Ghost — text only */
.jp-btn--ghost {
	background-color: transparent;
	color: var(--jp-color-text);
	padding-left: var(--jp-space-4);
	padding-right: var(--jp-space-4);
}

.jp-btn--ghost:hover {
	color: var(--jp-color-primary);
	background-color: var(--jp-color-primary-lighter);
}

/* Icon-only button */
.jp-btn--icon {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--jp-radius-full);
}


/* ==========================================================================
   7. FORMS
   ========================================================================== */

.jp-input,
input[type="text"]:not(.jp-newsletter__input):not(.jp-search-form__input),
input[type="email"]:not(.jp-newsletter__input):not(.jp-search-form__input),
input[type="url"]:not(.jp-newsletter__input):not(.jp-search-form__input),
input[type="password"]:not(.jp-newsletter__input):not(.jp-search-form__input),
input[type="search"]:not(.jp-newsletter__input):not(.jp-search-form__input),
input[type="tel"]:not(.jp-newsletter__input):not(.jp-search-form__input),
input[type="number"]:not(.jp-newsletter__input):not(.jp-search-form__input),
textarea,
select {
	width: 100%;
	min-height: var(--jp-input-height);
	padding: 0 var(--jp-space-5);
	font-family: var(--jp-font-primary);
	font-size: var(--jp-fs-sm);
	color: var(--jp-color-text);
	background-color: var(--jp-input-bg);
	border: var(--jp-input-border);
	border-radius: var(--jp-input-radius);
	transition: var(--jp-transition-color), box-shadow var(--jp-duration-fast) var(--jp-ease-out);
	-webkit-appearance: none;
	appearance: none;
}

textarea {
	min-height: 140px;
	padding: var(--jp-space-4) var(--jp-space-5);
	line-height: var(--jp-lh-relaxed);
	resize: vertical;
	border-radius: var(--jp-radius-lg);
}

.jp-input:focus,
input:not(.jp-newsletter__input):not(.jp-search-form__input):focus,
textarea:focus,
select:focus {
	border-color: var(--jp-color-primary);
	box-shadow: var(--jp-input-focus-ring);
	outline: none;
}

.jp-input::placeholder,
input:not(.jp-newsletter__input):not(.jp-search-form__input)::placeholder,
textarea::placeholder {
	color: var(--jp-color-text-light);
	opacity: 1;
}

/* Search form defaults (WordPress). */
.search-form {
	display: flex;
	gap: var(--jp-space-2);
	max-width: 480px;
}

.search-form .search-submit {
	background-color: var(--jp-color-primary);
	color: var(--jp-color-white);
	padding: 0 var(--jp-space-6);
	border-radius: var(--jp-radius-pill);
	border: none;
	font-weight: var(--jp-fw-semibold);
	cursor: pointer;
	transition: var(--jp-transition-color);
}

.search-form .search-submit:hover {
	background-color: var(--jp-color-primary-hover);
}


/* ==========================================================================
   8. ENTRY / POST STYLES (used by index.php fallback)
   ========================================================================== */

.jp-entry {
	margin-bottom: var(--jp-space-16);
	padding-bottom: var(--jp-space-12);
	border-bottom: 1px solid var(--jp-color-border);
}

.jp-entry:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.jp-entry__header {
	margin-bottom: var(--jp-space-6);
}

.jp-entry__title {
	font-size: clamp(var(--jp-fs-xl), 3vw, var(--jp-fs-3xl));
	line-height: var(--jp-lh-snug);
	margin-bottom: var(--jp-space-3);
}

.jp-entry__title a {
	color: inherit;
	background-image: linear-gradient(var(--jp-color-primary), var(--jp-color-primary));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--jp-duration-base) var(--jp-ease-out),
	            color var(--jp-duration-fast) var(--jp-ease-out);
}

.jp-entry__title a:hover {
	color: var(--jp-color-primary);
	background-size: 100% 2px;
}

.jp-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jp-space-4);
	font-size: var(--jp-fs-sm);
	color: var(--jp-color-text-muted);
}

.jp-entry__thumb {
	display: block;
	margin: 0 0 var(--jp-space-6);
	overflow: hidden;
	border-radius: var(--jp-radius-lg);
}

.jp-entry__thumb img {
	width: 100%;
	height: auto;
	transition: transform var(--jp-duration-slow) var(--jp-ease-smooth);
}

.jp-entry__thumb:hover img {
	transform: scale(1.04);
}

.jp-entry__content {
	line-height: var(--jp-lh-relaxed);
	color: var(--jp-color-text);
}

.jp-entry__more {
	margin-top: var(--jp-space-4);
}


/* ==========================================================================
   9. PAGINATION
   ========================================================================== */

.jp-pagination {
	margin-top: var(--jp-space-12);
	display: flex;
	justify-content: center;
}

.jp-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jp-space-2);
	align-items: center;
}

.jp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--jp-space-3);
	font-size: var(--jp-fs-sm);
	font-weight: var(--jp-fw-semibold);
	color: var(--jp-color-text);
	background-color: var(--jp-color-bg-alt);
	border-radius: var(--jp-radius-full);
	transition: var(--jp-transition-color);
}

.jp-pagination .page-numbers:hover,
.jp-pagination .page-numbers.current {
	background-color: var(--jp-color-primary);
	color: var(--jp-color-white);
}


/* ==========================================================================
   10. EMPTY STATE (404 / no results)
   ========================================================================== */

.jp-empty {
	padding: var(--jp-space-24) 0;
	text-align: center;
}

.jp-empty__inner {
	max-width: 640px;
	margin: 0 auto;
}

.jp-empty__title {
	font-size: clamp(var(--jp-fs-2xl), 5vw, var(--jp-fs-5xl));
	margin-bottom: var(--jp-space-4);
}

.jp-empty__text {
	font-size: var(--jp-fs-md);
	color: var(--jp-color-text-muted);
	margin-bottom: var(--jp-space-8);
}

.jp-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jp-space-4);
	justify-content: center;
	align-items: center;
}


/* ==========================================================================
   11. SKIP LINK (accessibility)
   ========================================================================== */

.jp-skip-link {
	position: absolute;
	top: -100px;
	left: var(--jp-space-4);
	z-index: var(--jp-z-max);
	padding: var(--jp-space-3) var(--jp-space-5);
	background-color: var(--jp-color-black);
	color: var(--jp-color-white);
	font-weight: var(--jp-fw-semibold);
	border-radius: var(--jp-radius-md);
	transition: top var(--jp-duration-fast) var(--jp-ease-out);
}

.jp-skip-link:focus {
	top: var(--jp-space-4);
	color: var(--jp-color-white);
}


/* ==========================================================================
   12. UTILITIES
   ========================================================================== */

/* Visually hidden but accessible to screen readers. */
.screen-reader-text,
.jp-sr-only {
	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;
	white-space: nowrap !important;
	border: 0 !important;
}

.screen-reader-text:focus,
.jp-sr-only:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	white-space: normal !important;
}

/* Alignment (WordPress core). */
.alignleft {
	float: left;
	margin: 0 var(--jp-space-6) var(--jp-space-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--jp-space-4) var(--jp-space-6);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Clearfix. */
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

/* No-scroll helper (used by mobile menu). */
.jp-lock-scroll {
	overflow: hidden;
	position: fixed;
	width: 100%;
}


/* ==========================================================================
   13. SCROLLBAR (subtle, elegant)
   ========================================================================== */

@media (min-width: 1024px) {
	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}

	::-webkit-scrollbar-track {
		background: var(--jp-color-bg-alt);
	}

	::-webkit-scrollbar-thumb {
		background: var(--jp-color-gray-300);
		border-radius: var(--jp-radius-pill);
		border: 2px solid var(--jp-color-bg-alt);
	}

	::-webkit-scrollbar-thumb:hover {
		background: var(--jp-color-gray-400);
	}

	html {
		scrollbar-color: var(--jp-color-gray-300) var(--jp-color-bg-alt);
		scrollbar-width: thin;
	}
}


/* ==========================================================================
   14. WORDPRESS CORE ALIGNMENTS (Gutenberg fallback)
   ========================================================================== */

.wp-caption {
	max-width: 100%;
	margin-bottom: var(--jp-space-6);
}

.wp-caption img {
	border-radius: var(--jp-radius-md);
}

.wp-caption-text {
	margin-top: var(--jp-space-2);
	font-size: var(--jp-fs-sm);
	color: var(--jp-color-text-muted);
	text-align: center;
}

.sticky {
	display: block;
}

.bypostauthor {
	display: block;
}


/* ==========================================================================
   15. ELEMENTOR COMPATIBILITY LAYER
   ========================================================================== */

/* Elementor Canvas / Header-Footer templates should not push down. */
.elementor-template-canvas .jp-main,
.elementor-template-full-width .jp-main {
	padding-top: 0;
}

/* Elementor sections should respect our max-width where appropriate. */
.elementor-section-boxed > .elementor-container {
	max-width: var(--jp-container-max);
}

/* Ensure Elementor buttons don't inherit our .jp-btn styles unless class present. */
.elementor .elementor-button {
	transition: var(--jp-btn-transition);
}

/* Elementor headings — respect our font family. */
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
	font-family: var(--jp-font-display);
}

/* Elementor body text — respect our font. */
.elementor,
.elementor p {
	font-family: var(--jp-font-primary);
}