/**
 * JasaPanda Theme Child — Single Post & Sidebar Widgets
 *
 * Styles for single.php and sidebar.php: article header, hero image,
 * prose content, tags, author box, prev/next navigation, comments,
 * and all sidebar widget cards (search, categories, recent/popular
 * posts, consultation CTA).
 *
 * @package JasaPanda_Theme_Child
 * @since   1.0.0
 */

/* ==========================================================================
   1. LAYOUT
   ========================================================================== */

.jp-single {
	padding-top: var(--jp-space-12);
	padding-bottom: var(--jp-space-24);
}

.jp-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--jp-space-16);
	align-items: start;
}

@media (min-width: 1024px) {
	.jp-single__layout {
		grid-template-columns: minmax(0, 1fr) 360px;
	}
}

.jp-single__main {
	min-width: 0;
	max-width: 820px;
}

@media (min-width: 1024px) {
	.jp-single__main {
		max-width: none;
	}
}


/* ==========================================================================
   2. HEADER (category, title, meta)
   ========================================================================== */

.jp-single__category {
	display: inline-flex;
	align-items: center;
	gap: var(--jp-space-2);
	padding: 6px 14px;
	margin-bottom: var(--jp-space-5);
	background-color: var(--jp-color-primary);
	color: var(--jp-color-white);
	font-size: var(--jp-fs-xs);
	font-weight: var(--jp-fw-semibold);
	letter-spacing: var(--jp-ls-wide);
	text-transform: uppercase;
	border-radius: var(--jp-radius-pill);
	transition: var(--jp-transition-color);
}

.jp-single__category:hover {
	background-color: var(--jp-color-primary-hover);
	color: var(--jp-color-white);
}

.jp-single__category .jp-icon {
	width: 13px;
	height: 13px;
}

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

.jp-single__meta {
	display: flex;
	align-items: center;
	gap: var(--jp-space-3);
	padding-bottom: var(--jp-space-8);
	border-bottom: 1px solid var(--jp-color-border);
}

.jp-single__avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--jp-radius-full);
	flex-shrink: 0;
}

.jp-single__meta-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.jp-single__author-name {
	font-size: var(--jp-fs-sm);
	font-weight: var(--jp-fw-semibold);
	color: var(--jp-color-text);
}

.jp-single__meta-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jp-space-4);
	font-size: var(--jp-fs-xs);
	color: var(--jp-color-text-muted);
}

.jp-single__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.jp-single__meta-item .jp-icon {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}


/* ==========================================================================
   3. HERO IMAGE
   ========================================================================== */

.jp-single__thumb {
	margin: var(--jp-space-8) 0;
	border-radius: var(--jp-radius-xl);
	overflow: hidden;
	box-shadow: var(--jp-shadow-md);
}

.jp-single__thumb img {
	width: 100%;
	height: auto;
}


/* ==========================================================================
   4. CONTENT (prose)
   ========================================================================== */

.jp-single__content {
	font-size: var(--jp-fs-md);
	line-height: var(--jp-lh-relaxed);
	color: var(--jp-color-text);
}

.jp-single__content > * + * {
	margin-top: var(--jp-space-5);
}

.jp-single__content h2 {
	font-size: clamp(var(--jp-fs-xl), 2.6vw, var(--jp-fs-2xl));
	margin-top: var(--jp-space-10);
}

.jp-single__content h3 {
	font-size: clamp(var(--jp-fs-lg), 2.2vw, var(--jp-fs-xl));
	margin-top: var(--jp-space-8);
}

.jp-single__content h4,
.jp-single__content h5,
.jp-single__content h6 {
	margin-top: var(--jp-space-6);
}

.jp-single__content ul,
.jp-single__content ol {
	padding-left: 1.3em;
	list-style: disc;
}

.jp-single__content ol {
	list-style: decimal;
}

.jp-single__content li + li {
	margin-top: var(--jp-space-2);
}

.jp-single__content img,
.jp-single__content figure {
	border-radius: var(--jp-radius-lg);
}

.jp-single__content figcaption {
	margin-top: var(--jp-space-2);
	font-size: var(--jp-fs-xs);
	color: var(--jp-color-text-muted);
	text-align: center;
}

.jp-single__content iframe {
	width: 100%;
	border-radius: var(--jp-radius-lg);
}

.jp-single__content table {
	font-size: var(--jp-fs-sm);
}

.jp-single__content th,
.jp-single__content td {
	padding: var(--jp-space-3) var(--jp-space-4);
	border: 1px solid var(--jp-color-border);
	text-align: left;
}

.jp-single__content th {
	background-color: var(--jp-color-bg-alt);
	font-weight: var(--jp-fw-semibold);
}

.jp-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jp-space-2);
	font-size: var(--jp-fs-sm);
	font-weight: var(--jp-fw-semibold);
}

.jp-page-links a,
.jp-page-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 var(--jp-space-2);
	border-radius: var(--jp-radius-sm);
	background-color: var(--jp-color-bg-alt);
}


/* ==========================================================================
   5. TAGS
   ========================================================================== */

.jp-single__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jp-space-2);
	margin-top: var(--jp-space-10);
	padding-top: var(--jp-space-8);
	border-top: 1px solid var(--jp-color-border);
	color: var(--jp-color-text-muted);
}

.jp-single__tag {
	padding: 6px 14px;
	background-color: var(--jp-color-bg-alt);
	color: var(--jp-color-text);
	font-size: var(--jp-fs-xs);
	font-weight: var(--jp-fw-medium);
	border-radius: var(--jp-radius-pill);
	transition: var(--jp-transition-color);
}

.jp-single__tag:hover {
	background-color: var(--jp-color-primary);
	color: var(--jp-color-white);
}


/* ==========================================================================
   6. AUTHOR BOX
   ========================================================================== */

.jp-single__author-box {
	display: flex;
	gap: var(--jp-space-5);
	margin-top: var(--jp-space-10);
	padding: var(--jp-space-8);
	background-color: var(--jp-color-bg-alt);
	border-radius: var(--jp-radius-lg);
}

.jp-single__author-box-avatar {
	width: 64px;
	height: 64px;
	border-radius: var(--jp-radius-full);
	flex-shrink: 0;
}

.jp-single__author-box-label {
	display: block;
	font-size: var(--jp-fs-xs);
	font-weight: var(--jp-fw-semibold);
	letter-spacing: var(--jp-ls-wider);
	text-transform: uppercase;
	color: var(--jp-color-text-muted);
	margin-bottom: 2px;
}

.jp-single__author-box-name {
	font-size: var(--jp-fs-lg);
	margin-bottom: var(--jp-space-2);
}

.jp-single__author-box-desc {
	font-size: var(--jp-fs-sm);
	line-height: var(--jp-lh-relaxed);
	color: var(--jp-color-text-muted);
}

@media (max-width: 479.98px) {
	.jp-single__author-box {
		flex-direction: column;
	}
}


/* ==========================================================================
   7. PREV / NEXT NAVIGATION
   ========================================================================== */

.jp-single__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jp-space-4);
	margin-top: var(--jp-space-10);
}

.jp-single__nav-item {
	display: flex;
	flex-direction: column;
	gap: var(--jp-space-2);
	padding: var(--jp-space-5) var(--jp-space-6);
	border: 1px solid var(--jp-color-border);
	border-radius: var(--jp-radius-lg);
	transition: var(--jp-transition-base);
}

.jp-single__nav-item:hover {
	border-color: var(--jp-color-primary);
	background-color: var(--jp-color-bg-alt);
	transform: translateY(-2px);
}

.jp-single__nav-item--next {
	text-align: right;
	align-items: flex-end;
}

.jp-single__nav-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--jp-fs-xs);
	font-weight: var(--jp-fw-semibold);
	letter-spacing: var(--jp-ls-wide);
	text-transform: uppercase;
	color: var(--jp-color-text-muted);
}

.jp-single__nav-arrow {
	width: 14px;
	height: 14px;
}

.jp-single__nav-arrow--prev {
	transform: rotate(180deg);
}

.jp-single__nav-title {
	font-size: var(--jp-fs-sm);
	font-weight: var(--jp-fw-semibold);
	color: var(--jp-color-text);
	line-height: var(--jp-lh-snug);
}

@media (max-width: 639.98px) {
	.jp-single__nav {
		grid-template-columns: 1fr;
	}

	.jp-single__nav-item--next {
		text-align: left;
		align-items: flex-start;
	}
}


/* ==========================================================================
   8. COMMENTS
   ========================================================================== */

.jp-single__comments {
	margin-top: var(--jp-space-12);
	padding-top: var(--jp-space-10);
	border-top: 1px solid var(--jp-color-border);
}

.jp-single__comments .comment-form input[type="text"],
.jp-single__comments .comment-form input[type="email"],
.jp-single__comments .comment-form input[type="url"],
.jp-single__comments .comment-form textarea {
	width: 100%;
	padding: var(--jp-space-3) var(--jp-space-4);
	background-color: var(--jp-color-white);
	border: var(--jp-input-border);
	border-radius: var(--jp-radius-md);
	font-family: var(--jp-font-primary);
	font-size: var(--jp-fs-sm);
	color: var(--jp-color-text);
	transition: var(--jp-transition-color), box-shadow var(--jp-duration-fast) var(--jp-ease-out);
}

.jp-single__comments .comment-form input:focus,
.jp-single__comments .comment-form textarea:focus {
	border-color: var(--jp-color-primary);
	box-shadow: var(--jp-input-focus-ring);
	outline: none;
}

.jp-single__comments .comment-form p {
	margin-top: var(--jp-space-4);
}

.jp-single__comments .comment-form-comment label,
.jp-single__comments .comment-form-author label,
.jp-single__comments .comment-form-email label,
.jp-single__comments .comment-form-url label {
	display: block;
	margin-bottom: var(--jp-space-2);
	font-size: var(--jp-fs-xs);
	font-weight: var(--jp-fw-semibold);
}

.jp-single__comments .form-submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--jp-btn-py) var(--jp-btn-px);
	background-color: var(--jp-color-primary);
	color: var(--jp-color-white);
	font-family: var(--jp-font-primary);
	font-size: var(--jp-btn-fs);
	font-weight: var(--jp-btn-fw);
	border: none;
	border-radius: var(--jp-btn-radius);
	cursor: pointer;
	transition: var(--jp-btn-transition);
}

.jp-single__comments .form-submit input[type="submit"]:hover {
	background-color: var(--jp-color-primary-hover);
	transform: translateY(-2px);
}

.jp-single__comments ol.comment-list {
	list-style: none;
}

.jp-single__comments .comment-body {
	padding: var(--jp-space-5) 0;
	border-bottom: 1px solid var(--jp-color-border);
}

.jp-single__comments .comment-author .avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--jp-radius-full);
}


/* ==========================================================================
   9. SIDEBAR — SHELL
   ========================================================================== */

.jp-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--jp-space-6);
}

@media (min-width: 1024px) {
	.jp-sidebar {
		position: sticky;
		top: calc(var(--jp-header-height) + var(--jp-space-6));
	}
}

.jp-widget {
	padding: var(--jp-space-6);
	background-color: var(--jp-color-white);
	border: 1px solid var(--jp-color-border);
	border-radius: var(--jp-radius-lg);
}

.jp-widget__title {
	font-size: var(--jp-fs-base);
	margin-bottom: var(--jp-space-5);
}

/* Widgets registered via Appearance → Widgets carry a WP-generated ID
   class ("widget_jasapanda_widget_...") in addition to .jp-widget — no
   extra spacing/rules needed, the base .jp-widget card covers them. */


/* ==========================================================================
   10. WIDGET — SEARCH
   ========================================================================== */

.jp-widget--search {
	padding: var(--jp-space-4);
}

.jp-search-form--block {
	width: 100%;
}

.jp-search-form--block .jp-search-form__input,
.jp-search-form--block input[type="search"].jp-search-form__input {
	width: 100%;
}

.jp-search-form--block:focus-within .jp-search-form__input {
	width: 100%;
}


/* ==========================================================================
   11. WIDGET — CATEGORIES
   ========================================================================== */

.jp-widget-cat-list {
	display: flex;
	flex-direction: column;
	gap: var(--jp-space-1);
}

.jp-widget-cat-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jp-space-3);
	padding: var(--jp-space-3);
	border-radius: var(--jp-radius-md);
	color: var(--jp-color-text);
	transition: var(--jp-transition-color);
}

.jp-widget-cat-link:hover {
	background-color: var(--jp-color-bg-alt);
	color: var(--jp-color-primary);
}

.jp-widget-cat-name {
	display: inline-flex;
	align-items: center;
	gap: var(--jp-space-2);
	font-size: var(--jp-fs-sm);
	font-weight: var(--jp-fw-medium);
	min-width: 0;
}

.jp-widget-cat-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--jp-color-text-light);
}

.jp-widget-cat-count {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 22px;
	padding: 0 7px;
	background-color: var(--jp-color-bg-muted);
	color: var(--jp-color-text-muted);
	font-size: var(--jp-fs-xs);
	font-weight: var(--jp-fw-semibold);
	border-radius: var(--jp-radius-pill);
}

.jp-widget-cat-link:hover .jp-widget-cat-count {
	background-color: var(--jp-color-primary);
	color: var(--jp-color-white);
}


/* ==========================================================================
   12. WIDGET — RECENT / POPULAR POSTS
   ========================================================================== */

.jp-widget-post-list {
	display: flex;
	flex-direction: column;
	gap: var(--jp-space-5);
}

.jp-widget-post {
	display: flex;
	gap: var(--jp-space-3);
}

.jp-widget-post__thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--jp-radius-md);
	overflow: hidden;
	background-color: var(--jp-color-bg-alt);
}

.jp-widget-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jp-widget-post__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jp-color-text-light);
}

.jp-widget-post__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.jp-widget-post__title {
	font-size: var(--jp-fs-sm);
	font-weight: var(--jp-fw-semibold);
	line-height: var(--jp-lh-snug);
	color: var(--jp-color-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jp-widget-post__title:hover {
	color: var(--jp-color-primary);
}

.jp-widget-post__meta {
	display: flex;
	align-items: center;
	gap: var(--jp-space-3);
	font-size: var(--jp-fs-xs);
	color: var(--jp-color-text-muted);
}

.jp-widget-post__meta time,
.jp-widget-post__views {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.jp-widget-post__meta-icon {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

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


/* ==========================================================================
   13. WIDGET — CONSULTATION CTA
   ========================================================================== */

.jp-widget--cta {
	position: relative;
	text-align: center;
	padding: var(--jp-space-8) var(--jp-space-6);
	background-color: var(--jp-color-bg-dark);
	border: none;
	overflow: hidden;
}

.jp-widget--cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 60%);
	pointer-events: none;
}

.jp-widget-cta__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--jp-space-4);
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--jp-color-white);
	border-radius: var(--jp-radius-full);
}

.jp-widget-cta__title {
	position: relative;
	font-size: var(--jp-fs-lg);
	color: var(--jp-color-white);
	margin-bottom: var(--jp-space-2);
}

.jp-widget-cta__desc {
	position: relative;
	font-size: var(--jp-fs-sm);
	line-height: var(--jp-lh-relaxed);
	color: var(--jp-color-text-invert-muted);
	margin-bottom: var(--jp-space-6);
}

.jp-widget-cta__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jp-space-2);
	width: 100%;
	padding: var(--jp-btn-py) var(--jp-btn-px);
	background-color: var(--jp-color-white);
	color: var(--jp-color-text);
	font-size: var(--jp-btn-fs);
	font-weight: var(--jp-btn-fw);
	letter-spacing: var(--jp-ls-wide);
	border-radius: var(--jp-btn-radius);
	transition: var(--jp-btn-transition);
}

.jp-widget-cta__btn:hover {
	background-color: var(--jp-color-primary-lighter);
	color: var(--jp-color-text);
	transform: translateY(-2px);
}

.jp-widget-cta__btn .jp-icon {
	width: 16px;
	height: 16px;
}