/*
Theme Name: CIS455 Newsroom
Theme URI: https://cis455.xyz
Author: CIS455.XYZ
Author URI: https://cis455.xyz
Description: Newsroom-style magazine theme for CIS455.XYZ — tech and car news aggregation. Clean editorial layout: sticky masthead, topic nav, hero grid, recent-news cards, follow strip and full footer. Accent color is the Bolu Technologies brand blue (#1D4167).
Version: 1.0.25
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cisnews
*/

/* ============ Tokens ============ */
:root {
	--ink: #1c2b33;
	--muted: #677b8c;
	--faint: #8a9ba8;
	--accent: #1D4167;
	--paper: #ffffff;
	--border: rgba(22, 22, 22, 0.16);
	--pill-hover: #e3e3e5;
	--max: 1266px;
	--font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ============ Base ============ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #ffffff;
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.wrap-narrow { max-width: 680px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

/* Eyebrow: uppercase label with accent underline slightly wider than text */
.eyebrow {
	position: relative;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 8px;
	margin-bottom: 14px;
}
.eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: calc(100% + 12px);
	background: var(--accent);
}
.eyebrow a { color: var(--ink); }
.eyebrow a:hover { text-decoration: none; color: var(--accent); }

.post-date {
	font-size: 14px;
	color: var(--muted);
}
.post-date time { white-space: nowrap; }

/* ============ Header ============ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #ffffff;
	border-bottom: 1px solid var(--border);
	transition: transform 0.3s ease;
}
.site-header.header-hidden { transform: translateY(-100%); }
/* Verge-style utility topbar: language, Subscribe, Sign In. */
.hd-topbar { border-bottom: 1px solid var(--border); }
.hd-topbar-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 6px 40px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
}
.hd-subscribe {
	background: #1D4167;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 3px;
	white-space: nowrap;
}
.hd-subscribe:hover { background: #16334f; color: #ffffff; text-decoration: none; }
.hd-signin {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}
.hd-signin svg { width: 14px; height: 14px; fill: currentColor; }
.hd-signin:hover { color: var(--ink); }
.header-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 40px;
	height: 84px;
	display: flex;
	align-items: center;
	gap: 36px;
}
/* Verge-style slash-separated section nav. */
.verge-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}
.verge-nav a {
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
	white-space: nowrap;
}
.verge-nav a:hover { text-decoration: underline; }
.vn-sep { color: var(--faint); font-weight: 400; user-select: none; }
.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
	line-height: 1;
	white-space: nowrap;
}
.wordmark-badge {
	height: 40px;
	width: 40px;
	flex: 0 0 auto;
}
.wordmark-logo {
	height: 46px;
	width: auto;
	display: block;
	flex: 0 0 auto;
}
.wordmark:hover { text-decoration: none; }

.header-right { display: flex; align-items: center; gap: 20px; margin-left: auto; }
/* Language switcher: compact dropdown of language editions. */
.lang-switcher {
	display: flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 999px;
	overflow: hidden;
	background: var(--paper);
}
.lang-btn {
	border: 0;
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 12px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--border); }
.lang-btn.is-active { background: var(--accent); color: #fff; }
.lang-btn:not(.is-active):hover { background: var(--pill-hover); }
.lang-select {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231D4167' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: var(--ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 30px 7px 14px;
	cursor: pointer;
	max-width: 148px;
}
.lang-select:hover { border-color: var(--accent); }
.lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--ink);
}
.icon-btn:hover { background: var(--pill-hover); text-decoration: none; }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

.hamburger {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	color: var(--ink);
}
.hamburger svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ============ Topic bar ============ */
.topic-bar { border-bottom: 1px solid var(--border); background: #ffffff; }
.topic-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 12px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.topic-nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topic-nav::-webkit-scrollbar { display: none; }
.topic-nav ul { display: flex; align-items: center; gap: 28px; white-space: nowrap; }
.topic-nav a { font-size: 16px; font-weight: 500; color: var(--ink); }
.topic-nav a:hover { color: var(--accent); text-decoration: none; }
.topic-nav .current-cat a {
	background: var(--pill-hover);
	border-radius: 999px;
	padding: 8px 18px;
	color: var(--ink);
}

/* Sub-topic row: always visible under the topic bar, like Meta's open menu */
.sub-bar { background: #ffffff; border-bottom: 1px solid var(--border); }
.sub-inner { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
.sub-nav { overflow-x: auto; scrollbar-width: none; }
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav ul {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 13px 0;
	white-space: nowrap;
}
.sub-nav a { font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.sub-nav a:hover { color: var(--accent); }
.sub-nav .current-cat a { color: var(--accent); }

.topic-search { position: relative; flex: 0 0 auto; }
.search-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #ccd0d5;
	border-radius: 999px;
	background: #ffffff;
	padding: 9px 18px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	font-family: var(--font);
}
.search-pill svg { width: 16px; height: 16px; fill: currentColor; }
.search-pill:hover { border-color: var(--ink); }
.topic-search-form { display: none; align-items: center; gap: 8px; }
.topic-search.open .search-pill { display: none; }
.topic-search.open .topic-search-form { display: inline-flex; }
.topic-search-form input[type="search"] {
	border: 1px solid #ccd0d5;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 15px;
	font-family: var(--font);
	color: var(--ink);
	width: 240px;
	outline: none;
}
.topic-search-form input[type="search"]:focus { border-color: var(--accent); }
.topic-search-form button {
	border: 0;
	background: var(--ink);
	color: #fff;
	border-radius: 999px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.topic-search-form button svg { width: 16px; height: 16px; fill: #fff; }

/* ============ Front page hero ============ */
.front-h1 {
	text-align: center;
	font-size: 80px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 64px 0 56px;
	padding: 0 20px;
}
.hero { margin-bottom: 72px; }
.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 78px;
	align-items: start;
}
/* Image links are block-level so border-radius + overflow actually clip the image. */
a.ph { display: block; }
.hero-main .ph { border-radius: 24px; overflow: hidden; margin-bottom: 28px; }
.hero-main .ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-main h2 { font-size: 32px; line-height: 1.25; margin-bottom: 14px; }
.hero-main h2 a:hover { color: var(--accent); text-decoration: none; }
.hero-dek {
	font-size: 16px;
	line-height: 1.5;
	color: var(--muted);
	margin-bottom: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hero-side { display: flex; flex-direction: column; gap: 60px; }

/* Mini card: thumb 40% / text 60% */
.mini-card { display: flex; gap: 24px; align-items: flex-start; }
.mini-card .ph { flex: 0 0 40%; border-radius: 20px; overflow: hidden; }
.mini-card .ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mini-card .tx { flex: 1 1 60%; min-width: 0; }
.mini-card h3 { font-size: 20px; line-height: 1.35; margin-bottom: 10px; }
.mini-card h3 a:hover { color: var(--accent); text-decoration: none; }
.mini-dek {
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============ Section label + recent news ============ */
.section-divider { border: 0; border-top: 1px solid var(--border); margin: 0 0 40px; }
.section-label {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 48px;
}
.recent { margin-bottom: 40px; }
.cards-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	row-gap: 80px;
	margin-bottom: 72px;
}
.h-card { display: flex; gap: 24px; align-items: flex-start; }
.h-card .ph { flex: 0 0 40%; border-radius: 20px; overflow: hidden; }
.h-card .ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.h-card .tx { flex: 1 1 60%; min-width: 0; }
.h-card h3 { font-size: 20px; line-height: 1.35; margin-bottom: 12px; }
.h-card h3 a:hover { color: var(--accent); text-decoration: none; }

.see-more { text-align: center; margin: 8px 0 88px; }
.see-more a { display: inline-flex; flex-direction: column; align-items: center; gap: 16px; }
.see-more a:hover { text-decoration: none; }
.see-more-circle {
	width: 48px;
	height: 48px;
	border: 1px solid var(--ink);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
}
.see-more-circle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.see-more a:hover .see-more-circle { background: var(--ink); color: #fff; }
.see-more-text { font-size: 18px; font-weight: 500; color: var(--ink); }

/* ============ Follow strip ============ */
.follow-strip { border-top: 1px solid var(--border); }
.follow-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 36px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.follow-left { display: flex; align-items: center; gap: 28px; }
.follow-left h2 { font-size: 20px; font-weight: 500; color: var(--faint); white-space: nowrap; }
.follow-divider { width: 1px; height: 32px; background: var(--border); }
.social-icons { display: flex; align-items: center; gap: 12px; }
.social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #1c2b33;
	color: #ffffff;
}
.social-icons a:hover { background: var(--accent); text-decoration: none; }
.social-icons svg { width: 15px; height: 15px; fill: currentColor; }
.social-icons.gray a { background: #ccd0d5; width: 28px; height: 28px; }
.social-icons.gray svg { width: 13px; height: 13px; }
.follow-right { display: flex; align-items: center; gap: 32px; }
.follow-right a {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
}
.follow-right a:hover { color: var(--accent); text-decoration: none; }

/* ============ Footer ============ */
.site-footer { background: #ffffff; border-top: 1px solid var(--border); }
.footer-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 64px 40px 48px;
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: 64px;
}
.footer-brand .wordmark { display: inline-block; margin-bottom: 16px; }
.footer-brand .wordmark-logo { height: 54px; }
.footer-tagline { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-col h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 15px; color: var(--ink); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
	border-top: 1px solid var(--border);
}
.footer-bottom-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 24px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-size: 14px;
	color: var(--muted);
}
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--ink); }
.footer-legal { white-space: nowrap; }

/* ============ Article ============ */
.article { padding-top: 56px; }
.article .eyebrow { margin-bottom: 20px; }
.article h1 { font-size: 40px; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 16px; }
.article .post-date { font-size: 15px; margin-bottom: 32px; }
.article-hero-img { border-radius: 20px; overflow: hidden; margin: 0 0 40px; }
.article-hero-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article-body { font-size: 18px; line-height: 1.7; color: var(--ink); margin-bottom: 40px; }
.article-body p { margin-bottom: 1.4em; }
.source-box {
	background: #eef4fd;
	border-left: 4px solid var(--accent);
	border-radius: 0 12px 12px 0;
	padding: 20px 24px;
	margin: 0 0 28px;
	font-size: 16px;
}
.source-box p { margin: 0; }
.source-box a { color: var(--accent); font-weight: 600; }
.readmore-btn {
	display: inline-block;
	background: var(--accent);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 16px 32px;
	border-radius: 999px;
	margin-bottom: 40px;
}
.readmore-btn:hover { background: #152c49; color: #ffffff; text-decoration: none; }
.share-row { display: flex; gap: 12px; margin-bottom: 64px; }
.share-row a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #ccd0d5;
	color: var(--ink);
}
.share-row a:hover { border-color: var(--ink); background: var(--ink); color: #fff; text-decoration: none; }
.share-row svg { width: 17px; height: 17px; fill: currentColor; }

.related { margin-bottom: 88px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* ============ Archive / category ============ */
.archive-head { padding: 64px 0 0; }
.archive-head .section-label { margin-bottom: 48px; }
.archive-grid { margin-bottom: 88px; }

/* ============ Search ============ */
.search-head { padding: 64px 0 0; }
.search-count { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
.search-query-line { font-size: 32px; font-weight: 600; margin-bottom: 48px; }
.search-query-line span { color: var(--muted); }
.empty-state { text-align: center; padding: 40px 0 88px; }
.empty-state h2 { font-size: 28px; margin-bottom: 16px; }
.empty-state p { color: var(--muted); font-size: 17px; margin-bottom: 32px; }
.empty-state .topic-search-form { display: inline-flex; }
.empty-state .topic-search-form input[type="search"] { width: 320px; }

/* ============ Page / 404 ============ */
.page-body { padding: 64px 0 88px; }
.page-body h1 { font-size: 44px; letter-spacing: -0.01em; margin-bottom: 32px; }
.page-body h2 { font-size: 26px; margin: 40px 0 16px; }
.page-body p, .page-body li { font-size: 18px; line-height: 1.7; }
.page-body ul, .page-body ol { padding-left: 1.4em; margin-bottom: 1.4em; }
.page-body ul { list-style: disc; }
.page-body ol { list-style: decimal; }
.page-body a { color: var(--accent); }
.notfound { text-align: center; padding: 96px 20px 120px; }
.notfound h1 { font-size: 64px; margin-bottom: 16px; }
.notfound p { font-size: 18px; color: var(--muted); margin-bottom: 32px; }
.notfound .readmore-btn { margin-bottom: 0; }

/* ============ Responsive ============ */
@media (max-width: 992px) {
	.verge-nav { display: none; }
	.header-right { margin-left: auto; }
	.related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 959px) {
	.wrap, .wrap-narrow { padding-left: 40px; padding-right: 40px; }
	.header-inner, .topic-inner, .sub-inner, .follow-inner, .footer-inner, .footer-bottom-inner { padding-left: 40px; padding-right: 40px; }
	.front-h1 { font-size: 56px; margin: 48px 0 40px; }
	.hero-grid { grid-template-columns: 1fr; gap: 48px; }
	.hero-side { gap: 40px; }
	.footer-inner { grid-template-columns: 1fr; gap: 48px; }
	.follow-inner { flex-direction: column; align-items: flex-start; }
	.article h1 { font-size: 34px; }
}

@media (max-width: 639px) {
	.wrap, .wrap-narrow { padding-left: 20px; padding-right: 20px; }
	.header-inner, .topic-inner, .sub-inner, .follow-inner, .footer-inner, .footer-bottom-inner { padding-left: 20px; padding-right: 20px; }
	.front-h1 { font-size: 40px; margin: 40px 0 32px; }
	.cards-2col { grid-template-columns: 1fr; row-gap: 48px; }
	.h-card .ph { display: none; }
	.h-card .tx { flex-basis: 100%; }
	.related-grid { grid-template-columns: 1fr; }
	.footer-cols { grid-template-columns: 1fr 1fr; }
	.footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
	.article h1 { font-size: 30px; }
	.article-body { font-size: 17px; }
	.page-body h1 { font-size: 34px; }
	.topic-search-form input[type="search"] { width: 170px; }
	.hd-topbar-inner { padding: 6px 20px; gap: 12px; }
	.hd-signin span { display: none; }
}

/* ============ Verge-style drawer menu ============ */
.vd-root {
	position: fixed;
	inset: 0;
	z-index: 500;
	visibility: hidden;
	transition: visibility 0s linear 0.35s;
}
.vd-root.open {
	visibility: visible;
	transition-delay: 0s;
}
.vd-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 15, 25, 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.vd-root.open .vd-backdrop { opacity: 1; }
.vd-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100dvh;
	width: min(420px, 94vw);
	background: #1D4167;
	color: #ffffff;
	transform: translateX(103%);
	transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.24, 1);
	display: flex;
	flex-direction: column;
	padding: 24px 34px 44px;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: -24px 0 64px rgba(0, 0, 0, 0.28);
}
.vd-root.open .vd-panel { transform: none; }
.vd-panel > *:not(.vd-watermark) { position: relative; z-index: 1; }
body.vd-lock { overflow: hidden; }

.vd-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}
.vd-account { display: flex; align-items: center; gap: 8px; }
.vd-login,
.vd-signup {
	background: none;
	border: 0;
	padding: 6px 0;
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.vd-login:hover, .vd-signup:hover { opacity: 0.8; text-decoration: underline; }
.vd-slash { opacity: 0.7; font-size: 14px; }
.vd-close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	color: #ffffff;
	font-size: 15px;
	font-family: inherit;
	cursor: pointer;
	padding: 6px 0 6px 12px;
}
.vd-close:hover { opacity: 0.75; }
.vd-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

.vd-search { position: relative; margin-bottom: 18px; }
.vd-search input[type="search"] {
	width: 100%;
	border: 0;
	border-radius: 8px;
	padding: 14px 54px 14px 20px;
	font-size: 16px;
	font-family: inherit;
	color: #1c2b33;
	background: #ffffff;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.vd-search button {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: #1D4167;
}
.vd-search button svg { width: 21px; height: 21px; fill: currentColor; display: block; }

.vd-theme {
	display: inline-flex;
	align-self: center;
	gap: 4px;
	background: rgba(0, 0, 0, 0.32);
	border-radius: 999px;
	padding: 5px;
	margin-bottom: 22px;
}
.vd-theme button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 8px 13px;
	cursor: pointer;
}
.vd-theme button.is-active { background: #0c1f33; color: #ffffff; }
.vd-theme button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.vd-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.vd-item { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.vd-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 19px 0;
}
.vd-link {
	color: #ffffff;
	font-size: 27px;
	font-weight: 500;
	line-height: 1.2;
}
.vd-link:hover { text-decoration: none; opacity: 0.82; }
.vd-plus {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 8px;
	margin: -8px;
	cursor: pointer;
	color: #3ddc97;
}
.vd-plus svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.4; display: block; }
.vd-plus:hover { opacity: 0.85; }
.vd-sub {
	display: none;
	padding: 6px 0 24px 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.vd-item.expanded .vd-sub { display: block; }
.vd-subhead {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	margin: 0 0 6px;
}
.vd-topics a,
.vd-headlines a {
	display: block;
	text-decoration: none;
}
.vd-topics a {
	color: #ffffff;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 11px 0;
}
.vd-headlines a {
	color: rgba(255, 255, 255, 0.92);
	font-size: 16px;
	line-height: 1.45;
	padding: 9px 0;
}
.vd-topics a:hover { opacity: 0.8; }
.vd-headlines a:hover { color: #ffffff; text-decoration: underline; }

.vd-bottom { margin-top: 30px; }
.vd-subscribe {
	display: block;
	text-align: center;
	border: 2px solid #ffffff;
	border-radius: 10px;
	color: #ffffff;
	font-size: 19px;
	font-weight: 500;
	padding: 13px 16px;
	text-decoration: none;
}
.vd-subscribe:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; text-decoration: none; }
.vd-social {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}
.vd-social a {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.5px solid #3ddc97;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #3ddc97;
}
.vd-social a:hover { background: rgba(61, 220, 151, 0.14); }
.vd-social svg { width: 20px; height: 20px; fill: currentColor; display: block; }

.vd-watermark {
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	font-size: clamp(150px, 24vw, 220px);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
	color: rgba(0, 0, 0, 0.20);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

/* ============ Dark mode (drawer Light/System/Dark toggle) ============ */
html.dark {
	--ink: #e9eff4;
	--muted: #9fb2c2;
	--faint: #7f95a8;
	--paper: #141d26;
	--border: rgba(255, 255, 255, 0.14);
	--pill-hover: #22303d;
}
html.dark body { background: #0c1319; }
html.dark .site-header,
html.dark .topic-bar,
html.dark .sub-bar,
html.dark .site-footer { background: #141d26; }
html.dark .search-pill,
html.dark .topic-search-form input[type="search"] { background: #141d26; border-color: rgba(255, 255, 255, 0.22); }
html.dark .topic-search-form button { background: #e9eff4; }
html.dark .topic-search-form button svg { fill: #0c1319; }
html.dark .lang-select { background-color: #141d26; }
html.dark .source-box { background: #16222e; }
html.dark .see-more a:hover .see-more-circle { color: #0c1319; }
html.dark .social-icons a { background: #2b3b49; }

/* ============ Header account dropdown (v1.0.25) ============ */
.hd-account { position: relative; }
.hd-account-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}
.hd-account-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.hd-account-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin: 8px 0 0;
	padding: 6px;
	min-width: 170px;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	display: none;
	z-index: 200;
}
.hd-account-menu a {
	display: block;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	border-radius: 3px;
	white-space: nowrap;
}
.hd-account-menu a:hover {
	background: #eef2f6;
	color: var(--accent);
	text-decoration: none;
}
.hd-account:hover .hd-account-menu,
.hd-account:focus-within .hd-account-menu { display: block; }

/* ============ Comments (v1.0.25) ============ */
.comments-area { margin-top: 48px; }
.comments-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 24px;
	color: var(--ink);
}
.comment-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}
.cisnews-comment { margin: 0 0 16px; }
.cisnews-comment .children {
	list-style: none;
	margin: 16px 0 0 32px;
	padding: 0;
}
.cisnews-comment-body {
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 18px 20px;
}
.cisnews-comment-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.cisnews-comment-head .avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex-shrink: 0;
}
.cisnews-comment-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.cisnews-comment-author {
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
}
.cisnews-comment-date {
	font-size: 12px;
	color: var(--faint);
}
.cisnews-comment .comment-reply-link {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	white-space: nowrap;
	flex-shrink: 0;
}
.cisnews-comment .comment-reply-link:hover { text-decoration: underline; }
.comment-awaiting-moderation {
	font-size: 13px;
	font-style: italic;
	color: var(--muted);
	margin: 0 0 10px;
}
.cisnews-comment-text {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink);
	word-wrap: break-word;
}
.cisnews-comment-text p { margin: 0 0 12px; }
.cisnews-comment-text p:last-child { margin-bottom: 0; }
.cisnews-comment-form { margin-top: 8px; }
.cisnews-comment-form p { margin: 0 0 16px; }
.cisnews-comment-form label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
}
.cisnews-comment-form .required { color: #b3402e; }
.cisnews-comment-form input[type="text"],
.cisnews-comment-form input[type="email"],
.cisnews-comment-form input[type="url"],
.cisnews-comment-form textarea {
	width: 100%;
	max-width: 560px;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: 4px;
}
.cisnews-comment-form input:focus,
.cisnews-comment-form textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}
.cisnews-comment-submit {
	background: var(--accent);
	color: #ffffff;
	border: 0;
	border-radius: 3px;
	padding: 12px 28px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}
.cisnews-comment-submit:hover { background: #16334f; color: #ffffff; }
.no-comments {
	font-size: 14px;
	color: var(--muted);
	margin: 0 0 16px;
}
.comment-navigation { margin: 0 0 24px; font-size: 13px; }
.comment-navigation a { color: var(--accent); }
.comment-navigation .nav-previous { float: left; }
.comment-navigation .nav-next { float: right; }
html.dark .cisnews-comment-body { background: #141d26; }
html.dark .cisnews-comment-form input[type="text"],
html.dark .cisnews-comment-form input[type="email"],
html.dark .cisnews-comment-form input[type="url"],
html.dark .cisnews-comment-form textarea { background: #141d26; }
html.dark .hd-account-menu a:hover { background: #1d2733; }

/* ---------- Community chat (v1.0.25) ---------- */
.cis-chat-wrap { background: #fff; }
.cis-chat-inner { max-width: 720px; margin: 0 auto; padding: 40px 20px 64px; }
.cis-chat-title { font-size: 30px; font-weight: 700; margin: 0 0 20px; }
.cis-chat-login-wall { border: 1px solid #e0e0e0; border-radius: 12px; padding: 36px 28px; text-align: center; background: #f7f9fb; }
.cis-chat-login-wall p { margin: 0 0 18px; font-size: 16px; color: #333; }
.cis-chat-btn { display: inline-block; background: #1D4167; color: #fff; border: none; border-radius: 8px; padding: 12px 26px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; }
.cis-chat-btn:hover { background: #16324e; color: #fff; text-decoration: none; }
.cis-chat-btn:disabled { opacity: .55; cursor: default; }
.cis-chat-list { border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; height: 420px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cis-chat-msg { background: #f1f4f7; border-radius: 10px; padding: 10px 14px; max-width: 92%; }
.cis-chat-user { display: block; font-weight: 600; font-size: 13px; color: #1D4167; margin-bottom: 2px; }
.cis-chat-text { display: block; font-size: 15px; line-height: 1.5; color: #161616; overflow-wrap: anywhere; }
.cis-chat-time { display: block; font-size: 11px; color: #8a8a8a; margin-top: 4px; }
.cis-chat-form { display: flex; gap: 10px; margin-top: 14px; }
.cis-chat-form input[type="text"] { flex: 1; border: 1px solid #cfd6dd; border-radius: 8px; padding: 12px 14px; font-size: 15px; background: #fff; color: #161616; }
.cis-chat-form input[type="text"]:focus { border-color: #1D4167; outline: 2px solid rgba(29,65,103,.25); }
.cis-chat-error { margin: 12px 0 0; color: #b3261e; font-size: 14px; }
html.dark .cis-chat-wrap { background: #161616; }
html.dark .cis-chat-title { color: #f4f4f4; }
html.dark .cis-chat-login-wall { background: #1f1f1f; border-color: #333; }
html.dark .cis-chat-login-wall p { color: #e0e0e0; }
html.dark .cis-chat-list { background: #1f1f1f; border-color: #333; }
html.dark .cis-chat-msg { background: #2a2a2a; }
html.dark .cis-chat-user { color: #7fa8d1; }
html.dark .cis-chat-text { color: #f4f4f4; }
html.dark .cis-chat-time { color: #9a9a9a; }
html.dark .cis-chat-form input[type="text"] { background: #1f1f1f; border-color: #444; color: #f4f4f4; }
html.dark .cis-chat-form input[type="text"]::placeholder { color: #8a8a8a; }

/* ---------- Ask CIS: assistant widget (v1.0.25) ---------- */
.cisnews-ask-fab {
	position: fixed;
	right: 20px;
	bottom: 96px;
	z-index: 9990;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: #1D4167;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cisnews-ask-fab:hover { transform: scale(1.06); }
.cisnews-ask-panel {
	position: fixed;
	right: 20px;
	bottom: 164px;
	z-index: 9990;
	width: min(380px, calc(100vw - 32px));
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}
.cisnews-ask-panel[hidden] { display: none; }
.cisnews-ask-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: #1D4167;
	color: #fff;
}
.cisnews-ask-title { margin: 0; font-size: 17px; font-weight: 600; }
.cisnews-ask-subtitle { margin: 2px 0 0; font-size: 12px; opacity: 0.85; }
.cisnews-ask-close {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}
.cisnews-ask-log {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 180px;
	background: #f7f9fb;
}
.cisnews-ask-msg {
	max-width: 88%;
	padding: 9px 12px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: break-word;
}
.cisnews-ask-msg-user { align-self: flex-end; background: #1D4167; color: #fff; }
.cisnews-ask-msg-cis { align-self: flex-start; background: #eef1f4; color: #161616; }
.cisnews-ask-msg-cis a { color: #1D4167; text-decoration: underline; }
.cisnews-ask-typing { opacity: 0.6; font-style: italic; }
.cisnews-ask-form {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #e0e0e0;
	background: #fff;
}
.cisnews-ask-input {
	flex: 1;
	border: 1px solid #cfd8dc;
	border-radius: 20px;
	padding: 9px 14px;
	font-size: 14px;
}
.cisnews-ask-send {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #1D4167;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cisnews-ask-body { padding: 18px 16px; background: #f7f9fb; }
.cisnews-ask-gate { text-align: center; }
.cisnews-ask-gate p { margin: 0 0 14px; font-size: 14px; color: #525252; }
.cisnews-ask-signin {
	display: inline-block;
	background: #1D4167;
	color: #fff;
	padding: 10px 22px;
	border-radius: 22px;
	text-decoration: none;
	font-weight: 600;
}
@media (max-width: 480px) {
	.cisnews-ask-panel { right: 16px; left: 16px; width: auto; }
}
html.dark .cisnews-ask-panel { background: #152027; border-color: #2a3944; }
html.dark .cisnews-ask-log { background: #10181e; }
html.dark .cisnews-ask-msg-cis { background: #22303a; color: #e8eef2; }
html.dark .cisnews-ask-msg-cis a { color: #7fb3d9; }
html.dark .cisnews-ask-form { background: #152027; border-color: #2a3944; }
html.dark .cisnews-ask-input { background: #0c1319; border-color: #2a3944; color: #e8eef2; }
html.dark .cisnews-ask-body { background: #10181e; }
html.dark .cisnews-ask-gate p { color: #aeb9c2; }