/* ----------------------------------------------------------------
	Knowledge Library (คลังความรู้)

	Only the pieces the Canvas theme does not already provide: the filter bar,
	the content-type badge, the video play marker and the empty state. Colours
	come from the theme's own --themecolor so this stays in step with
	css/colors.php.
-----------------------------------------------------------------*/

/* Filter bar
	Two axes, deliberately different in weight. Category is the primary one and
	reads as tabs with an underline; content type is secondary and sits below as
	a lighter text row. No surrounding box, so the cards stay the loudest thing
	on the page.
-----------------------------------------------------------------*/
.knowledge-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 26px;
	border-bottom: 1px solid #e4eaea;
}

.knowledge-tab {
	position: relative;
	padding: 6px 0 12px;
	color: #7c8a8b;
	font-size: 16px;
	line-height: 1.6;
	text-decoration: none;
	transition: color .18s ease;
}

.knowledge-tab:hover,
.knowledge-tab:focus {
	color: #2f3b3d;
	text-decoration: none;
}

.knowledge-tab.is-active {
	color: var(--themecolor, #628187);
	font-weight: 500;
}

/* Sits on the container's own 1px rule, so the two never double up. */
.knowledge-tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--themecolor, #628187);
}

.knowledge-tab:focus-visible,
.knowledge-link:focus-visible {
	outline: 2px solid var(--themecolor, #628187);
	outline-offset: 3px;
}

.knowledge-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding-top: 14px;
}

.knowledge-sub-label {
	flex: 0 0 auto;
	color: #7c8a8b;
	font-size: 13px;
}

.knowledge-sub-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.knowledge-link {
	padding: 2px 0;
	border-bottom: 1px solid transparent;
	color: #556260;
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
	transition: color .18s ease, border-color .18s ease;
}

.knowledge-link:hover,
.knowledge-link:focus {
	color: var(--themecolor, #628187);
	text-decoration: none;
}

.knowledge-link.is-active {
	color: var(--themecolor, #628187);
	font-weight: 500;
	border-bottom-color: var(--themecolor, #628187);
}

.knowledge-count {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
	color: #7c8a8b;
	font-size: 13px;
}

.knowledge-count strong {
	color: var(--themecolor, #628187);
}

.knowledge-reset {
	color: #7c8a8b;
	text-decoration: underline;
}

.knowledge-reset:hover {
	color: var(--themecolor, #628187);
}

/* Cards
-----------------------------------------------------------------*/
#posts .entry-image {
	position: relative;
}

/* Card covers come from three sources with different native ratios: the 400x225
   crop of an uploaded image, a 480x360 YouTube thumbnail, and the 16:9
   placeholder. Pin them all to 16:9 so the grid stays even. */
#posts .entry-image,
#posts .entry-image a {
	display: block;
}

#posts .entry-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #eef1f2;
}

.knowledge-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	pointer-events: none;
}

.knowledge-type-badge {
	display: inline-block;
	margin-bottom: 6px;
	padding: 3px 10px;
	border-radius: 4px;
	background: rgba(98, 129, 135, .12);
	color: var(--themecolor, #628187);
	font-size: 12px;
	line-height: 1.7;
	font-weight: 600;
}

/* Empty state
-----------------------------------------------------------------*/
.knowledge-empty {
	text-align: center;
	padding: 64px 20px;
	color: #7c8a8b;
}

.knowledge-empty i {
	font-size: 44px;
	color: #c3d0d0;
	display: block;
	margin-bottom: 18px;
}

.knowledge-empty h3 {
	font-size: 20px;
	color: #3d4b4d;
	margin-bottom: 8px;
}

.knowledge-empty p {
	margin-bottom: 22px;
}

/* Mobile
-----------------------------------------------------------------*/
@media (max-width: 767px) {

	.knowledge-tabs {
		gap: 2px 18px;
	}

	.knowledge-tab {
		padding: 5px 0 10px;
		font-size: 15px;
	}

	/* The count drops to its own line rather than being squeezed against the
	   type row, which would otherwise wrap mid-phrase on a narrow screen. */
	.knowledge-count {
		width: 100%;
		margin-left: 0;
		padding-top: 4px;
	}
}

/* Detail page
-----------------------------------------------------------------*/
.knowledge-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
}

.knowledge-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.knowledge-infographic img {
	width: 100%;
	height: auto;
	border: 1px solid #e4eaea;
	border-radius: 6px;
}

.knowledge-infographic-hint {
	margin-top: 10px;
	font-size: 13px;
	color: #7c8a8b;
	text-align: center;
}

.knowledge-detail-cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 28px 0 24px;
	padding-top: 20px;
	border-top: 1px solid #eef1f1;
}

/* Tags naming the categories this item belongs to - not a filter control, so
   they keep the rounded-pill look rather than the listing page's tab row. */
.knowledge-detail-cats-label {
	flex: 0 0 auto;
	color: #3d4b4d;
	font-size: 15px;
	font-weight: 600;
}

.knowledge-cat-tag {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid #d5dede;
	border-radius: 999px;
	background: #fff;
	color: #4a5a5c;
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.knowledge-cat-tag:hover,
.knowledge-cat-tag:focus {
	border-color: var(--themecolor, #628187);
	color: var(--themecolor, #628187);
	text-decoration: none;
}

.knowledge-cat-tag:focus-visible {
	outline: 2px solid var(--themecolor, #628187);
	outline-offset: 2px;
}

/* The detail page's own hero image should not be cropped to 16:9 the way the
   listing cards are - show it whole. */
.single-post .entry-image img {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
}

/* Mega menu
-----------------------------------------------------------------*/

@media (min-width: 992px) {

	/* Anchored panel rather than a full-width band. The theme's
	   .mega-menu-small fixes this at 400px, which is too tight for two Thai
	   columns; 620px fits both without the large empty gutters a full-width
	   panel leaves. Anchored to the item's right edge so it cannot run off
	   screen - this item sits near the end of the nav. */
	.mega-menu-small .knowledge-mega {
		width: 620px;
		left: auto;
		right: 0;
		transform: none;
	}

	/* The theme pads mega columns 30px/20px, which is what makes the panel feel
	   empty at this size. */
	.knowledge-mega.mega-menu-style-2 .mega-menu-column {
		padding: 18px 22px;
	}

	.knowledge-mega .sub-menu-container .menu-link {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	/* Small caret pointing back at the menu item. */
	.mega-menu-small .knowledge-mega::before {
		content: "";
		position: absolute;
		top: -8px;
		right: 26px;
		width: 12px;
		height: 12px;
		background: #fff;
		border-left: 1px solid #eee;
		border-top: 1px solid #eee;
		transform: rotate(45deg);
	}
}

/* The theme styles mega-menu group headings as uppercase Poppins. Neither
   suits Thai: Poppins carries no Thai glyphs, and uppercase is meaningless
   for the script. Keep the theme's weight and rhythm, drop the rest.
   .mega-menu-style-2 and .knowledge-mega sit on the SAME element, so these must
   be written without a space between them - a descendant selector would never
   match. The theme's own rule carries !important, so these do too. */
.knowledge-mega.mega-menu-style-2 .mega-menu-title > .menu-link {
	font-family: 'Kanit', sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: #7a8a8c !important;
	margin-bottom: 8px !important;
}

/* The group headings are labels, not links. */
.knowledge-mega .mega-menu-title > span.menu-link {
	cursor: default;
}

.knowledge-mega .mega-menu-title > span.menu-link:hover {
	background-color: transparent;
}

/* "ดูคลังความรู้ทั้งหมด" sits under both columns, so it needs a top rule
   instead of the left divider the theme gives additional columns. */
/* The theme zeroes borders on every .sub-menu-container inside a mega panel
   with a higher-specificity rule, so both of these need !important. */
.knowledge-mega .knowledge-mega-footer {
	border-left: 0 !important;
	border-top: 1px solid #F2F2F2 !important;
	padding-top: 12px !important;
	padding-bottom: 14px !important;
}

.knowledge-mega .knowledge-mega-footer .menu-link {
	font-weight: 600;
	color: var(--themecolor, #628187);
}

@media (max-width: 991px) {

	/* On mobile the theme turns the panel into an accordion. Give the two
	   groups a little separation now that they are stacked. */
	.knowledge-mega .mega-menu-column + .mega-menu-column {
		border-top: 1px solid #F2F2F2 !important;
	}

	.knowledge-mega .knowledge-mega-footer {
		border-top: 1px solid #F2F2F2 !important;
	}
}