/*!
 * 卡尼奶友链 - 前台样式
 * 说明：卡尼奶主题没有全局 border-box，所有元素都显式声明 box-sizing。
 */

/* 去重：若主题同时通过 the_content 与页脚兜底输出，隐藏页脚那一份（保留正文里的） */
.knnfl-home-fluid:has(~ .knnfl-home-fluid) {
	display: none;
}

.knnfl-wrap {
	--knnfl-columns: 3;
	--knnfl-gap: 14px;
	--knnfl-radius: 12px;

	/*
	 * 配色统一走主题变量，深色模式自动跟随，无需再写一套深色值。
	 *
	 * 卡尼奶主题在 body.dark-mode / body.dark-mode-auto 下重定义这些变量：
	 *   --knn-bg-color-card  #ffffff -> #272727
	 *   --knn-bg-color       #f3f3f3 -> #2e2e2e
	 *   --knn-text-color     #333     -> #b9b9b9
	 *   --knn-text-color-grey #999    -> #999
	 *   --knn-border-color   #e5ebeb -> #303030
	 *   --knn-shadow-color   …       -> rgba(24,24,24,.9)
	 *
	 * 非卡尼奶主题下这些变量不存在，回落到后面的浅色默认值。
	 */
	--knnfl-bg: var(--knn-bg-color-card, #fff);
	--knnfl-bg-soft: var(--knn-bg-color, #f6f7fb);
	--knnfl-text: var(--knn-text-color, #1f2937);
	--knnfl-text-soft: var(--knn-text-color-grey, #6b7280);
	--knnfl-border: var(--knn-border-color, rgba(15, 23, 42, .09));
	--knnfl-shadow-color: var(--knn-shadow-color, rgba(15, 23, 42, .18));
	--knnfl-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -18px var(--knnfl-shadow-color);

	--knnfl-primary: var(--knn-color-primary, #4f7cff);
	--knnfl-primary-dark: #3b63e0;
	/* 主色上的文字：深浅色都以主色为底，用白色最稳 */
	--knnfl-on-primary: #fff;
	/* 输入框等填充底色 */
	--knnfl-bg-input: var(--knn-bg-color-grey, #f6f7fb);
	/* 聚焦光环：深浅色下都可见 */
	--knnfl-focus-ring: rgba(79, 124, 255, .18);
	/* 头像容器底色 */
	--knnfl-avatar-bg: #fff;

	color: var(--knnfl-text);
}

/* 深色模式：只需微调几个主题变量覆盖不到的细节，其余自动跟随主题变量 */
body.dark-mode .knnfl-wrap,
body.dark-mode-auto .knnfl-wrap,
body.dark-theme .knnfl-wrap,
body.dark .knnfl-wrap,
.dark-mode .knnfl-wrap {
	--knnfl-primary-dark: #6b93ff;
	--knnfl-focus-ring: rgba(107, 147, 255, .28);
	/* 头像容器跟随卡片底色，避免深色下出现刺眼白块 */
	--knnfl-avatar-bg: var(--knn-bg-color-card, #272727);
}

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

.knnfl-card {
	background: var(--knnfl-bg);
	border: 1px solid var(--knnfl-border);
	border-radius: var(--knnfl-radius);
	box-shadow: var(--knnfl-shadow);
	padding: 18px;
}

/**
 * 友链区整块可折叠（.knnfl-links-card 是 <details>）
 *
 * 折叠状态下 padding 归零，避免留下一条空白；展开时再由 summary/body 自己撑开间距。
 */
.knnfl-links-card {
	padding: 0;
}

.knnfl-links-card > .knnfl-card-head {
	margin-bottom: 0;
	padding: 18px;
}

.knnfl-links-card > .knnfl-links-body {
	padding: 0 18px 18px;
}

/* summary 默认的小三角去掉 */
.knnfl-links-card > .knnfl-card-head::marker,
.knnfl-links-card > .knnfl-card-head::-webkit-details-marker {
	display: none;
	content: "";
}

/* 标题栏可点 */
.knnfl-links-card > .knnfl-card-head {
	cursor: pointer;
}

/* PC 端：内容常显（并覆盖主题的 details{display:block}）；标题不可点 */
@media screen and (min-width: 768px) {
	.knnfl-links-card > .knnfl-links-body {
		display: block !important;
	}

	.knnfl-links-card > .knnfl-card-head {
		pointer-events: none;
		cursor: default;
	}

	/* 标题里的「申请友链」按钮需要保持可点 */
	.knnfl-links-card > .knnfl-card-head .knnfl-btn-ghost {
		pointer-events: auto;
	}
}

.knnfl-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.knnfl-title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--knnfl-text);
	display: flex;
	align-items: center;
	gap: 8px;
}

.knnfl-title::before {
	content: "";
	width: 4px;
	height: 16px;
	border-radius: 2px;
	background: var(--knnfl-primary);
	display: inline-block;
	flex: 0 0 auto;
}

.knnfl-desc {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--knnfl-text-soft);
	line-height: 1.6;
}

.knnfl-head-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.knnfl-badge {
	font-size: 12px;
	color: var(--knnfl-text-soft);
	background: var(--knnfl-bg-soft);
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
}

/* 卡片网格 */
.knnfl-grid {
	display: grid;
	grid-template-columns: repeat(var(--knnfl-columns), minmax(0, 1fr));
	gap: var(--knnfl-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.knnfl-item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.knnfl-link {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 12px;
	background: var(--knnfl-bg-soft);
	border: 1px solid transparent;
	border-radius: 10px;
	text-decoration: none !important;
	color: inherit;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
	min-width: 0;
	height: 100%;
}

.knnfl-link:hover,
.knnfl-link:focus-visible {
	transform: translateY(-2px);
	background: var(--knnfl-bg);
	border-color: var(--knnfl-primary);
	box-shadow: 0 10px 22px -14px var(--knnfl-primary);
	outline: none;
}

.knnfl-avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--knnfl-avatar-bg, #fff);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--knnfl-border);
}

.knnfl-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
}

.knnfl-avatar-text {
	/* 头像底色是脚本按名称生成的高饱和色，白字在深浅色下都清晰 */
	color: var(--knnfl-on-primary);
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
	border-color: transparent;
}

.knnfl-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.knnfl-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--knnfl-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.knnfl-host {
	font-size: 12px;
	color: var(--knnfl-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.knnfl-note {
	font-size: 12px;
	color: var(--knnfl-text-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.knnfl-empty {
	margin: 0;
	padding: 22px 12px;
	text-align: center;
	color: var(--knnfl-text-soft);
	font-size: 13px;
	background: var(--knnfl-bg-soft);
	border-radius: 10px;
}

/* 按钮 */
.knnfl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none !important;
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
	box-sizing: border-box;
}

.knnfl-btn-primary {
	background: var(--knnfl-primary);
	color: var(--knnfl-on-primary) !important;
}

.knnfl-btn-primary:hover {
	background: var(--knnfl-primary-dark);
	color: var(--knnfl-on-primary);
}

.knnfl-btn-primary[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

.knnfl-btn-ghost {
	background: transparent;
	border-color: var(--knnfl-border);
	color: var(--knnfl-text) !important;
}

.knnfl-btn-ghost:hover {
	border-color: var(--knnfl-primary);
	color: var(--knnfl-primary) !important;
}

/* -------------------------------------------------------------------------
 * 申请友链弹窗（modal）
 *
 * 结构与样式完全自带，不依赖主题的 dialog 组件。
 * 触发方式：点标题栏里的「申请友链」按钮，或点下方的「一键申请友链」标题条。
 * ---------------------------------------------------------------------- */

.knnfl-modal {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

/* 只有展开（open）时才显示，不用 JS 参与渲染 */
.knnfl-modal:has(> .knnfl-apply[open]) {
	display: flex;
}

.knnfl-modal-backdrop {
	position: absolute;
	inset: 0;
	/* 优先用主题自带的遮罩色，深色模式会一起变 */
	background: var(--knn-bg-color-mask, rgba(15, 23, 42, .55));
	animation: knnfl-fade-in .18s ease;
}

.knnfl-apply.knnfl-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	max-height: 92vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	box-shadow: 0 24px 64px -16px var(--knnfl-shadow-color);
	animation: knnfl-modal-in .22s ease;
}

/**
 * 无 JS 兜底：WordPress 会在 <html> 上输出 no-js，主题脚本会换成 js。
 * 禁用 JS 时不显示遮罩，把表单平铺出来，功能不丢。
 */
.no-js .knnfl-modal-backdrop {
	display: none;
}

.no-js .knnfl-modal {
	position: static;
	inset: auto;
	display: block;
	padding: 0;
}

.no-js .knnfl-apply.knnfl-modal-dialog {
	position: static;
	max-width: none;
	max-height: none;
	overflow: visible;
	margin-top: 14px;
	animation: none;
	box-shadow: var(--knnfl-shadow);
}

.no-js .knnfl-modal-close {
	display: none;
}

.knnfl-modal-close {
	order: 3;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin-left: 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--knnfl-text-soft);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .18s ease, color .18s ease;
}

.knnfl-modal-close:hover {
	background: var(--knnfl-border);
	color: var(--knnfl-text);
}

/* 弹窗打开时锁定页面滚动 */
body.knnfl-modal-open {
	overflow: hidden;
}

@keyframes knnfl-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes knnfl-modal-in {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.knnfl-modal-backdrop,
	.knnfl-apply.knnfl-modal-dialog {
		animation: none;
	}
}

/* 手机端：弹窗铺满，表单更长时更好操作 */
@media screen and (max-width: 560px) {
	.knnfl-modal {
		padding: 12px;
	}

	.knnfl-apply.knnfl-modal-dialog {
		max-width: none;
		max-height: 94vh;
	}
}

/* 申请区（弹窗内的对话框本体） */
.knnfl-apply {
	margin-top: 14px;
	background: var(--knnfl-bg);
	border: 1px solid var(--knnfl-border);
	border-radius: var(--knnfl-radius);
	box-shadow: var(--knnfl-shadow);
	overflow: hidden;
	scroll-margin-top: 90px;
}

.knnfl-apply-summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 14px 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--knnfl-text);
	background: var(--knnfl-bg-soft);
	transition: background .18s ease;
}

.knnfl-apply-summary::-webkit-details-marker {
	display: none;
}

.knnfl-apply-summary:hover {
	background: var(--knnfl-bg);
}

.knnfl-apply-summary::before {
	content: "+";
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--knnfl-primary);
	color: var(--knnfl-on-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
	flex: 0 0 auto;
	order: 2;
	margin-left: auto;
}

.knnfl-apply[open] .knnfl-apply-summary::before {
	content: "−";
}

.knnfl-apply-summary-text {
	order: 1;
}

/* 这个 span 没用到，指示器由 summary::before 的 +/− 承担 */
.knnfl-apply-arrow {
	display: none;
}

.knnfl-apply-body {
	padding: 18px;
	border-top: 1px solid var(--knnfl-border);
}

/**
 * 申请面板：默认折叠，未展开时隐藏内容
 *
 * 主题的 app.css 里有 `details { display: block; }`，会覆盖浏览器对 <details>
 * 的默认收起行为，所以这里必须显式声明 display，折叠才真正生效。
 */
.knnfl-apply:not([open]) > .knnfl-apply-body {
	display: none !important;
	padding: 0 !important;
	border-top: 0 !important;
}

.knnfl-apply[open] > .knnfl-apply-body {
	display: block !important;
}

/**
 * 修正折叠行为。
 *
 * 卡尼奶主题的 app.css 里有 `details { display: block; }`，
 * 会覆盖浏览器对 <details> 的默认收起行为（未展开时应隐藏内容），
 * 导致申请面板「收不起来」。这里用更高的优先级把它纠正回来。
 */
.knnfl-apply:not([open]) > .knnfl-apply-body {
	display: none;
}

/* 无 JS 时保证初始是展开的（有 open 属性即可）；折叠只在有脚本时发生 */

/* 表单 */
.knnfl-form-wrap {
	width: 100%;
}

.knnfl-form-head {
	margin-bottom: 14px;
}

.knnfl-form-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--knnfl-text);
}

.knnfl-form-intro {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--knnfl-text-soft);
}

.knnfl-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.knnfl-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	min-width: 0;
}

.knnfl-field-full {
	grid-column: 1 / -1;
}

.knnfl-label {
	font-size: 13px;
	color: var(--knnfl-text-soft);
}

.knnfl-label i {
	color: #ef4444;
	font-style: normal;
}

.knnfl-field input[type="text"],
.knnfl-field input[type="url"],
.knnfl-field input[type="email"] {
	width: 100%;
	padding: 9px 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--knnfl-text);
	background: var(--knnfl-bg-input);
	border: 1px solid var(--knnfl-border);
	border-radius: 8px;
	outline: none;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
	margin: 0;
	box-shadow: none;
}

.knnfl-field input::placeholder {
	color: var(--knnfl-text-soft);
	opacity: .85;
}

.knnfl-field input:focus {
	border-color: var(--knnfl-primary);
	background: var(--knnfl-bg);
	box-shadow: 0 0 0 3px var(--knnfl-focus-ring);
}

.knnfl-field input.knnfl-invalid {
	border-color: #ef4444;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.knnfl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.knnfl-tip {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--knnfl-text-soft);
}

.knnfl-tip a {
	color: var(--knnfl-primary);
	text-decoration: none;
}

.knnfl-actions {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.knnfl-form-status {
	font-size: 13px;
	color: var(--knnfl-text-soft);
}

.knnfl-alert {
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 12px;
	border: 1px solid transparent;
}

.knnfl-alert-success {
	background: rgba(16, 185, 129, .12);
	border-color: rgba(16, 185, 129, .35);
	/* 用主题的成功色，深浅色模式下都协调 */
	color: var(--knn-color-success, #047857);
}

.knnfl-alert-error {
	background: rgba(239, 68, 68, .12);
	border-color: rgba(239, 68, 68, .35);
	color: var(--knn-color-danger, #b91c1c);
}

/* 深色模式下把提示文字提亮，保证对比度 */
body.dark-mode .knnfl-alert-success,
body.dark-mode-auto .knnfl-alert-success,
body.dark-theme .knnfl-alert-success,
.dark-mode .knnfl-alert-success {
	color: #6ee7b7;
}

body.dark-mode .knnfl-alert-error,
body.dark-mode-auto .knnfl-alert-error,
body.dark-theme .knnfl-alert-error,
.dark-mode .knnfl-alert-error {
	color: #fca5a5;
}

.knnfl-count {
	font-weight: 600;
}

.knnfl-bbs-note {
	margin: 10px 0 0;
	font-size: 12px;
	opacity: .75;
}

/* 响应式 */
@media screen and (max-width: 900px) {
	.knnfl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 560px) {
	.knnfl-card,
	.knnfl-apply-body {
		padding: 14px;
	}

	.knnfl-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.knnfl-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 移动端：友链区 + 申请面板默认折叠（PC 端常显，规则见文件末尾与 frontend.js）
 * ---------------------------------------------------------------------- */

/* 移动端操作按钮更好点按 */
@media screen and (max-width: 767px) {
	.knnfl-link {
		padding: 12px;
	}

	.knnfl-avatar {
		width: 48px;
		height: 48px;
	}

	.knnfl-name {
		font-size: 15px;
	}

	.knnfl-bbs-note {
		margin-top: 8px;
	}

	/* 标题栏做成一条可点的标题条 */
	.knnfl-links-card > .knnfl-card-head {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 15px 16px;
		user-select: none;
	}

	/* 收起状态下的圆角保持完整 */
	.knnfl-links-card:not([open]) > .knnfl-card-head {
		border-radius: calc(var(--knnfl-radius) - 1px);
	}

	.knnfl-links-card > .knnfl-links-body {
		padding: 0 16px 16px;
	}

	/* 折叠时隐藏标题右侧的计数与按钮，让标题条更干净 */
	.knnfl-links-card:not([open]) .knnfl-badge,
	.knnfl-links-card:not([open]) .knnfl-btn-ghost {
		display: none;
	}

	/* 指示箭头：收起时朝下，展开时朝上 */
	.knnfl-title-wrap {
		position: relative;
		padding-right: 26px;
		flex: 1 1 auto;
	}

	.knnfl-title-wrap::after {
		content: "";
		position: absolute;
		right: 4px;
		top: 50%;
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--knnfl-text-soft);
		border-bottom: 2px solid var(--knnfl-text-soft);
		transform: translateY(-70%) rotate(45deg);
		transition: transform .2s ease;
	}

	.knnfl-links-card[open] > .knnfl-card-head .knnfl-title-wrap::after {
		transform: translateY(-30%) rotate(-135deg);
	}
}

@media screen and (max-width: 560px) {
	/* 申请面板标题条 */
	.knnfl-apply-summary {
		padding: 13px 14px;
		font-size: 15px;
	}

	.knnfl-apply-body {
		padding: 14px;
	}

	.knnfl-actions {
		gap: 10px;
	}

	.knnfl-actions .knnfl-btn-primary {
		width: 100%;
	}
}