/*
全站页尾（markup在mu-plugins/obago-footer.php）。每个页面都加载（见functions.php）。
配色/字号token统一记在docs/视觉样式规范_配色字号交互.md。
三档布局：≥1100px四栏；781~1099px品牌栏独占一行、下面三栏；≤780px（跟header切手机版同一个断点）
品牌栏居中、导航和分类两列并排、订阅/联系占满一行，二维码换成大图标按钮（手机上没法扫自己屏幕上的码）。
*/

/* 根选择器写成.site-footer.obago-ft：Astra内联CSS里有.site-footer的暖白底色、
   .ast-hfb-header .site-footer在≤780px加的左右20px内边距，权重要追平才盖得住。 */
.site-footer.obago-ft {
	padding: 0;
	--obago-ft-bg: #2B2A28;
	--obago-ft-strong: #FBF8F4;
	--obago-ft-text: rgba(251, 248, 244, 0.72);
	--obago-ft-dim: #A39E95;
	--obago-ft-rule: rgba(251, 248, 244, 0.12);
	--obago-ft-chip: rgba(251, 248, 244, 0.08);
	--obago-ft-heading-font: "Alibaba PuHuiTi 3.0", "PingFang SC", "Microsoft YaHei", sans-serif;
	background: var(--obago-ft-bg);
	color: var(--obago-ft-text);
	font-size: 15px;
	line-height: 1.7;
}
.obago-ft p {
	margin: 0;
}

.obago-ft-main {
	max-width: 1240px;
	margin: 0 auto;
	padding: 72px 40px 56px;
	display: grid;
	grid-template-columns: 1.3fr 0.8fr 0.8fr 1.3fr;
	gap: 48px;
}
.obago-ft-col {
	display: grid;
	align-content: start;
	gap: 18px;
	min-width: 0;
}
.obago-ft-title {
	font-family: var(--obago-ft-heading-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--obago-ft-strong);
}
.obago-ft-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.obago-ft-links a {
	color: var(--obago-ft-text);
	text-decoration: none;
	transition: color 0.2s ease;
}
.obago-ft-links a:hover,
.obago-ft-links a:focus-visible {
	color: #E8834B;
}
.obago-ft :focus-visible {
	outline: 2px solid #3E8FC4;
	outline-offset: 3px;
}

/* 文字Logo：两行在Logo块内居中，Logo块本身靠左跟简介对齐。中文的letter-spacing会在最后一个字后面
   也留一段空，居中时整行偏左，左边补同样宽度的padding抵消。 */
.obago-ft-logo {
	display: inline-grid;
	justify-items: center;
	justify-self: start;
	gap: 2px;
	text-decoration: none;
}
.obago-ft-logo-en {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: #3E8FC4;
}
.obago-ft-logo-zh {
	font-family: var(--obago-ft-heading-font);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.3em;
	padding-left: 0.3em;
	color: var(--obago-ft-text);
}
.obago-ft-desc {
	max-width: 22em;
}
.obago-ft-sub {
	font-size: 12px;
	letter-spacing: 0.15em;
	color: var(--obago-ft-dim);
	margin-top: 6px !important;
}

/* 圆形图标：关注（36px）和手机端联系（--big，56px）共用一套，hover换成各自品牌色。 */
.obago-ft-follow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
}
.obago-ft-icon {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: var(--obago-ft-chip);
	color: var(--obago-ft-strong);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.obago-ft-icon svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}
.obago-ft-icon--xiaohongshu svg {
	width: 26px;
	height: 26px;
}
.obago-ft-icon:hover,
.obago-ft-icon:focus-visible {
	color: #FFFFFF;
	transform: translateY(-2px);
}
.obago-ft-icon--wechat:hover,
.obago-ft-icon--wechat:focus-visible {
	background: #07C160;
}
.obago-ft-icon--xiaohongshu:hover,
.obago-ft-icon--xiaohongshu:focus-visible {
	background: #FF2442;
}
.obago-ft-icon--facebook:hover,
.obago-ft-icon--facebook:focus-visible {
	background: #1877F2;
}
.obago-ft-icon--line:hover,
.obago-ft-icon--line:focus-visible {
	background: #06C755;
}
.obago-ft-icon[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 12px;
	line-height: 1;
	padding: 6px 9px;
	border-radius: 999px;
	background: var(--obago-ft-strong);
	color: var(--obago-ft-bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.obago-ft-icon[data-tip]:hover::after,
.obago-ft-icon[data-tip]:focus-visible::after {
	opacity: 1;
}

/* 第四列：订阅 + 联系，两块之间36px（栏内gap 18px + 这里18px）。 */
.obago-ft-block {
	display: grid;
	gap: 14px;
}
.obago-ft-block + .obago-ft-block {
	margin-top: 18px;
}

/* 订阅表单是SureForms #2157（[sureforms id="2157"]），这里把它改成"透明输入框+右侧箭头"。
   SureForms自己的样式靠CSS变量和较高权重的选择器，必须!important才盖得住；只在.obago-ft里生效。 */
.obago-ft .srfm-form-container {
	background: transparent !important;
	padding: 0 !important;
}
.obago-ft .srfm-form {
	position: relative;
	display: block !important;
}
/* 提交成功后SureForms给表单加行内display:none，上面的display:block !important会盖住它，这里补回来。 */
.obago-ft .srfm-form[style*="display: none"] {
	display: none !important;
}
.obago-ft .srfm-email-block-wrap {
	width: 100% !important;
	margin: 0 !important;
}
.obago-ft .srfm-block-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.obago-ft .srfm-input-email {
	height: 52px !important;
	margin: 0 !important;
	background: transparent !important;
	border: 1px solid rgba(251, 248, 244, 0.35) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--obago-ft-strong) !important;
	font-size: 15px !important;
	padding: 0 56px 0 18px !important;
	transition: border-color 0.2s ease;
}
.obago-ft .srfm-input-email::placeholder {
	color: rgba(251, 248, 244, 0.5) !important;
}
.obago-ft .srfm-input-email:focus {
	border-color: var(--obago-ft-strong) !important;
	outline: none;
}
/* min-width也要清掉：SureForms在≤576px给窄栏字段加了min-width:100%，会把这个透明按钮容器
   撑满整行、盖住输入框，手机上点不进输入框。 */
.obago-ft .srfm-custom-button-ctn {
	position: absolute !important;
	top: 4px;
	right: 4px;
	width: 44px !important;
	min-width: 0 !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}
/* 输入框里的实心主色方块+白色箭头。按钮里原本的"订阅"文字和加载动画（.srfm-submit-wrap）
   改成绝对定位，不占高度，箭头（::before）才能用grid上下左右居中。 */
.obago-ft .srfm-submit-button {
	position: relative;
	display: grid !important;
	place-items: center;
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #3E8FC4 !important;
	box-shadow: none !important;
	color: #FFFFFF !important;
	font-size: 0 !important;
	cursor: pointer;
	transition: background 0.2s ease;
}
.obago-ft .srfm-submit-button .srfm-submit-wrap {
	position: absolute;
	inset: 0;
}
.obago-ft .srfm-submit-button::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}
.obago-ft .srfm-submit-button:hover,
.obago-ft .srfm-submit-button:focus-visible {
	background: #2E6F9C !important;
}
.obago-ft .srfm-submit-button:hover::before {
	transform: translateX(2px);
}
.obago-ft .srfm-error-wrap,
.obago-ft .srfm-error-message,
.obago-ft .srfm-common-error-message {
	font-size: 13px !important;
	color: #F2A579 !important;
}
.obago-ft .srfm-error-wrap:empty {
	display: none;
}
.obago-ft .srfm-success-box,
.obago-ft .srfm-success-box-description {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	color: var(--obago-ft-strong) !important;
	text-align: left !important;
}
/* 订阅成功提示：占原来输入框的位置，同高同边框，左边蓝底白勾。SureForms给提示框的min-height:200px要清掉，
   不然提示语在200px里垂直居中，离上面的说明文字很远。 */
.obago-ft .srfm-success-box.srfm-active {
	min-height: 0 !important;
}
.obago-ft .srfm-success-box.srfm-active .srfm-success-box-description {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px;
	min-height: 52px;
	padding: 10px 16px !important;
	border: 1px solid rgba(251, 248, 244, 0.35) !important;
	font-size: 14px !important;
	line-height: 1.5;
}
.obago-ft .srfm-success-box.srfm-active .srfm-success-box-description::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #3E8FC4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.obago-ft .srfm-success-box-description p {
	margin: 0;
}

/* 电脑端联系方式：两张白底二维码卡片（码周围需要白边才扫得出来）。 */
.obago-ft-qrs {
	display: flex;
	gap: 20px;
}
.obago-ft-qr {
	margin: 0;
	display: grid;
	justify-items: center;
	gap: 8px;
}
.obago-ft-qr-card {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 10px;
}
.obago-ft-qr-img {
	display: block;
	width: 104px;
	height: 104px;
}
.obago-ft-qr-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}
.obago-ft-qr-label svg {
	width: 14px;
	height: 14px;
}
.obago-ft-qr-label--wechat svg {
	fill: #07C160;
}
.obago-ft-qr-label--line svg {
	fill: #06C755;
}
.obago-ft-contact-m {
	display: none;
}

.obago-ft-bar {
	border-top: 1px solid var(--obago-ft-rule);
}
.obago-ft-bar-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 22px 40px 26px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: var(--obago-ft-dim);
}

/* 手机端微信二维码弹窗（原生<dialog>）。 */
.obago-ft-dialog {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: calc(100vw - 32px);
}
.obago-ft-dialog::backdrop {
	background: rgba(30, 29, 27, 0.55);
}
.obago-ft-dialog-card {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 22px;
	display: grid;
	gap: 12px;
	justify-items: center;
	width: 280px;
	max-width: 100%;
	text-align: center;
}
.obago-ft-dialog-card img {
	width: 220px;
	height: 220px;
	max-width: 100%;
}
.obago-ft-dialog-title {
	font-weight: 700;
	color: #2B2A28;
}
.obago-ft-dialog-text {
	font-size: 14px;
	color: #6B6862;
}
/* 选择器带上.obago-ft-dialog：Astra全局button样式（含:focus深色底）权重是0,1,1，要高过它。 */
.obago-ft-dialog .obago-ft-dialog-close,
.obago-ft-dialog .obago-ft-dialog-close:focus {
	border: 1px solid #3E8FC4;
	color: #3E8FC4;
	background: transparent;
	border-radius: 999px;
	padding: 6px 18px;
	font-size: 13px;
	cursor: pointer;
}
.obago-ft-dialog .obago-ft-dialog-close:hover {
	background: #3E8FC4;
	color: #FFFFFF;
}

@media (max-width: 1099px) {
	.obago-ft-main {
		grid-template-columns: 1fr 1fr 288px;
		gap: 40px 32px;
	}
	.obago-ft-brand {
		grid-column: 1 / -1;
	}
}

/* 781~1099px三栏：站点导航/热门分类在第一行左两栏，右栏（订阅+联系二维码）纵跨两行，
   品牌区放到左下角横跨前两栏、底边跟二维码对齐，填掉两个短链接栏下面的空白。
   两个nav没写位置，靠自动排布落进第一行的前两格。只改视觉位置，HTML顺序不变。 */
@media (min-width: 781px) and (max-width: 1099px) {
	.obago-ft-brand {
		grid-column: 1 / 3;
		grid-row: 2;
		align-self: end;
	}
	.obago-ft-col4 {
		grid-column: 3;
		grid-row: 1 / 3;
	}
}

@media (max-width: 780px) {
	.obago-ft-main {
		grid-template-columns: 1fr 1fr;
		gap: 36px 20px;
		padding: 48px 20px 36px;
	}
	.obago-ft-brand {
		justify-items: center;
		text-align: center;
	}
	.obago-ft-logo {
		justify-self: center;
	}
	.obago-ft-col4 {
		grid-column: 1 / -1;
		gap: 32px;
	}
	.obago-ft-block + .obago-ft-block {
		margin-top: 0;
	}
	.obago-ft-qrs {
		display: none;
	}
	.obago-ft-contact-m {
		display: flex;
		gap: 28px;
	}
	.obago-ft-contact-item {
		display: grid;
		gap: 6px;
		justify-items: center;
		font-size: 13px;
	}
	.obago-ft-icon--big {
		width: 56px;
		height: 56px;
	}
	.obago-ft-icon--big svg {
		width: 26px;
		height: 26px;
	}
	.obago-ft-bar-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 18px 20px 24px;
		gap: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.obago-ft *,
	.obago-ft *::before,
	.obago-ft *::after {
		transition: none !important;
	}
}