/* ==========================================================================
   RS Ning Treatment — Front-end Styles
   All rules scoped to .rsnt-* to avoid theme / plugin conflicts.
   ========================================================================== */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
	--rsnt-brand:       #722E2B;
	--rsnt-cream:       #EADFC9;
	--rsnt-bg-warm:     #F3F0E8;
	--rsnt-gold-border: #DAC2A3;
	--rsnt-dark:        #333333;
	--rsnt-gray:        #888888;
	--rsnt-gray-mid:    #807D7E;
	--rsnt-light:       #CCCCCC;
	--rsnt-border:      #D4D2D0;
	--rsnt-border-line: #E6E6E6;
	--rsnt-white:       #FFFFFF;
	--rsnt-page-bg:     #FEFDF9;

	--rsnt-font-zh: "GenKiGothic2 TC", "Noto Sans TC", sans-serif;
	--rsnt-font-en: "Libertinus Sans", Georgia, serif;
	--rsnt-font-input: "Noto Sans TC", sans-serif;
}

/* ── Reset for our scope ────────────────────────────────────────────────── */
.rsnt-listing,
.rsnt-loop {
	box-sizing: border-box;
}
.rsnt-listing *,
.rsnt-loop * {
	box-sizing: inherit;
}

/* ── Section header (shared pattern) ────────────────────────────────────── */
.rsnt-section {
	margin-bottom: 24px;
}
.rsnt-section__header {
	padding: 10px 0;
}
.rsnt-section__title-zh {
	margin: 0;
	color: var(--rsnt-dark);
	font-size: 23px;
	font-family: var(--rsnt-font-zh);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 2.3px;
}
.rsnt-section__title-en {
	display: block;
	margin-top: 6px;
	color: var(--rsnt-gray);
	font-size: 16px;
	font-family: var(--rsnt-font-en);
	font-weight: 400;
	line-height: 1.6;
}

/* ── Search ─────────────────────────────────────────────────────────────── */
.rsnt-search__form {
	margin-top: 10px;
}
.rsnt-search__input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.rsnt-search__icon {
	position: absolute;
	left: 20px;
	color: var(--rsnt-light);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	line-height: 0;
}
.rsnt-search__icon:hover {
	color: var(--rsnt-brand);
}
.rsnt-search__input {
	width: 100%;
	padding: 10px 44px 10px 54px;
	border: 1px solid var(--rsnt-border);
	background: var(--rsnt-white);
	color: var(--rsnt-dark);
	font-size: 14px;
	font-family: var(--rsnt-font-input);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 1.4px;
	outline: none;
	transition: border-color .2s;
}
.rsnt-search__input::placeholder {
	color: var(--rsnt-light);
}
.rsnt-search__input:focus {
	border-color: var(--rsnt-brand);
}
.rsnt-search__clear {
	position: absolute;
	right: 14px;
	color: var(--rsnt-gray);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}
.rsnt-search__clear:hover {
	color: var(--rsnt-brand);
}

/* ── Categories list ────────────────────────────────────────────────────── */
.rsnt-categories__list {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

/* ── Category item (shared) ─────────────────────────────────────────────── */
.rsnt-category {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 10px;
	border: none;
	border-bottom: 1px solid var(--rsnt-border-line);
	background: transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, color .2s;
	text-align: left;
}
.rsnt-category:hover {
	text-decoration: none;
}
.rsnt-category:focus-visible {
	outline: 2px solid var(--rsnt-brand);
	outline-offset: -2px;
}

/* ── "All" category ─────────────────────────────────────────────────────── */
.rsnt-category--all {
	padding: 16px 16px 0 20px; /* no bottom padding — image sits flush at bottom */
	border-bottom: 1px solid var(--rsnt-brand);
	background-color: var(--rsnt-brand);
	color: var(--rsnt-white);
	text-decoration: none;
	gap: 16px;
	/* No opacity change between active / non-active. */
}
.rsnt-category--all:hover {
	text-decoration: none;
	color: var(--rsnt-white);
}

/* Seal / stamp image — fully visible, aligned to bottom of bar. */
.rsnt-category--all__image {
	display: block;
	flex-shrink: 0;
	width: auto;
	max-height: 64px;
	object-fit: contain;
	margin-left: auto;
	align-self: flex-end; /* push to bottom edge */
}
.rsnt-category--all .rsnt-category__zh {
	font-size: 16px;
	font-family: var(--rsnt-font-zh);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 2.56px;
	color: var(--rsnt-white);
}
.rsnt-category--all .rsnt-category__en {
	font-size: 14px;
	font-family: var(--rsnt-font-zh);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 1.4px;
	color: var(--rsnt-cream);
}
.rsnt-category--all .rsnt-category__arrow {
	color: var(--rsnt-white);
}

/* ── Numbered category item ─────────────────────────────────────────────── */
.rsnt-category--item .rsnt-category__left {
	display: flex;
	align-items: center;
	gap: 20px;
}
.rsnt-category__number {
	font-size: 32px;
	font-family: var(--rsnt-font-en);
	font-style: italic;
	font-weight: 400;
	line-height: 1.6;
	color: var(--rsnt-brand);
	min-width: 42px;
}
.rsnt-category--item .rsnt-category__zh {
	font-size: 16px;
	font-family: var(--rsnt-font-zh);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 2.56px;
	color: var(--rsnt-dark);
}
.rsnt-category--item .rsnt-category__en {
	font-size: 14px;
	font-family: var(--rsnt-font-zh);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 1.4px;
	color: var(--rsnt-gray);
}
.rsnt-category--item .rsnt-category__arrow {
	color: var(--rsnt-dark);
}

/* Category item text stacking */
.rsnt-category__text {
	display: flex;
	flex-direction: column;
}

/* ── Category active state (numbered items) ─────────────────────────────── */
.rsnt-category--item.rsnt-category--active {
	background: var(--rsnt-bg-warm);
	border-bottom-color: var(--rsnt-brand);
}
.rsnt-category--item.rsnt-category--active .rsnt-category__zh {
	color: var(--rsnt-brand);
}
.rsnt-category--item.rsnt-category--active .rsnt-category__arrow {
	color: var(--rsnt-brand);
}

/* ── Tags ───────────────────────────────────────────────────────────────── */
.rsnt-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 10px;
}
.rsnt-tag {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border: 1px solid var(--rsnt-gold-border);
	border-radius: 24px;
	background: var(--rsnt-white);
	color: var(--rsnt-gray-mid);
	font-size: 14px;
	font-family: var(--rsnt-font-zh);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 2.24px;
	text-decoration: none; /* <a> reset */
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.rsnt-tag:hover {
	background: var(--rsnt-bg-warm);
	text-decoration: none;
	color: var(--rsnt-gray-mid);
}
.rsnt-tag:focus-visible {
	outline: 2px solid var(--rsnt-brand);
	outline-offset: 2px;
}
.rsnt-tag--active {
	background: var(--rsnt-brand);
	border-color: var(--rsnt-brand);
	color: var(--rsnt-white);
}
.rsnt-tag--active:hover {
	background: var(--rsnt-brand);
	color: var(--rsnt-white);
}

/* ── Loop wrapper ───────────────────────────────────────────────────────── */
.rsnt-loop__posts {
	display: flex;
	flex-direction: column;
}
.rsnt-loop__pagination {
	margin-top: 70px;
}

/* ── Post card ──────────────────────────────────────────────────────────── */
.rsnt-post {
	display: flex;
	align-items: center;
	gap: 68px;
	padding: 32px 0;
	border-bottom: 1px solid var(--rsnt-border-line);
	text-decoration: none;
	color: inherit;
	transition: opacity .2s;
}
.rsnt-post:hover {
	opacity: 0.85;
}
.rsnt-post:first-child {
	padding-top: 0;
}

/* Image: fixed size, background cover */
.rsnt-post__image {
	flex-shrink: 0;
	width: 288px;
	height: 338px;
	background-color: #D9D9D9;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Content */
.rsnt-post__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.rsnt-post__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rsnt-post__category {
	color: var(--rsnt-gray);
	font-size: 14px;
	font-family: var(--rsnt-font-zh);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 2.24px;
}
.rsnt-post__title {
	margin: 0;
	color: var(--rsnt-dark);
	font-size: 23px;
	font-family: var(--rsnt-font-zh);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 2.3px;
}
.rsnt-post__excerpt {
	margin: 0;
	color: var(--rsnt-gray);
	font-size: 16px;
	font-family: var(--rsnt-font-zh);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 2.56px;
}

/* VIEW MORE link */
.rsnt-post__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--rsnt-dark);
	align-self: flex-start;
}
.rsnt-post__link-text {
	color: var(--rsnt-dark);
	font-size: 16px;
	font-family: var(--rsnt-font-en);
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.8px;
}
.rsnt-post__link svg {
	color: var(--rsnt-dark);
}

/* ── No results ─────────────────────────────────────────────────────────── */
.rsnt-no-results {
	padding: 60px 0;
	text-align: center;
	color: var(--rsnt-gray);
	font-size: 16px;
	font-family: var(--rsnt-font-zh);
	letter-spacing: 2px;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.rsnt-pagination {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-wrap: wrap;
}
.rsnt-pagination__item,
.rsnt-pagination__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--rsnt-dark);
	font-size: 16px;
	font-family: var(--rsnt-font-en);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 1.6px;
	text-decoration: none; /* <a> reset */
	cursor: pointer;
	transition: background .2s, color .2s;
}
.rsnt-pagination__item:hover {
	background: var(--rsnt-bg-warm);
	color: var(--rsnt-dark);
}
.rsnt-pagination__item--active {
	background: var(--rsnt-brand);
	color: var(--rsnt-page-bg);
	cursor: default;
}
.rsnt-pagination__item--active:hover {
	background: var(--rsnt-brand);
	color: var(--rsnt-page-bg);
}
.rsnt-pagination__next {
	color: var(--rsnt-dark);
}
.rsnt-pagination__next:hover {
	background: var(--rsnt-bg-warm);
}

/* ── RWD ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.rsnt-post {
		flex-direction: column;
		gap: 24px;
	}
	.rsnt-post__image {
		width: 100%;
		height: 0;
		padding-bottom: 75%; /* 4:3 aspect ratio on mobile */
	}
	.rsnt-post__content {
		gap: 20px;
	}
	.rsnt-post__title {
		font-size: 20px;
	}
	.rsnt-post__excerpt {
		font-size: 15px;
	}
	.rsnt-loop__pagination {
		margin-top: 40px;
	}
	.rsnt-pagination {
		justify-content: center;
	}
}