/*
Theme Name: Bank Media
Theme URI: https://github.com/example/bank-media
Author: Bank Media Team
Description: Minimal media theme — banks, finance, comparisons.
Version: 0.2.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bank-media-theme
*/

/* --- Base --- */
:root {
	--color-bg: #f8fafc;
	--color-surface: #ffffff;
	--color-text: #0f172a;
	--color-muted: #64748b;
	--color-accent: #1d4ed8;
	--color-accent-soft: #dbeafe;
	--color-border: #e2e8f0;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--radius: 12px;
	--shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	--max: 1120px;
	--narrow: 720px;
}

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

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--color-text);
	background: var(--color-bg);
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.container {
	width: min(100% - 2rem, var(--max));
	margin-inline: auto;
}

.container--narrow {
	width: min(100% - 2rem, var(--narrow));
	margin-inline: auto;
}

/* --- Header --- */
.site-header {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 64px;
}

.site-brand {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	max-width: 280px;
}

.site-brand .custom-logo {
	max-height: 44px;
	width: auto;
}

.site-brand__name {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.2;
}

.site-brand__tagline {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-muted);
	line-height: 1.3;
	margin-top: 0.15rem;
}

@media (min-width: 769px) {
	.site-brand__tagline { max-width: 220px; }
}

@media (max-width: 768px) {
	.site-brand__tagline { display: none; }
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}

.menu a {
	color: var(--color-text);
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
}

.menu a:hover,
.menu .current-menu-item > a {
	color: var(--color-accent);
}

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-text);
	margin: 4px 0;
}

@media (max-width: 768px) {
	.nav-toggle { display: block; }
	.site-nav {
		display: none;
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		background: var(--color-surface);
		border-bottom: 1px solid var(--color-border);
		padding: 1rem;
	}
	.site-nav.is-open { display: block; }
	.menu--primary { flex-direction: column; gap: 0.75rem; }
}

/* --- Hero --- */
.hero {
	padding: 3rem 0 2.5rem;
	background: linear-gradient(180deg, #fff 0%, var(--color-bg) 100%);
}

.hero__label {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent);
}

.hero__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	font-weight: 800;
}

.hero__desc {
	margin: 0 0 0.5rem;
	max-width: 42rem;
	font-size: 1.0625rem;
	color: var(--color-muted);
}

.hero__voice {
	margin: 0;
	max-width: 42rem;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

/* --- Sections --- */
.section { padding: 2.5rem 0; }
.section--featured { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.section--categories { background: var(--color-surface); }
.section--about { padding-bottom: 3.5rem; }

.section__title {
	margin: 0 0 1.25rem;
	font-size: 1.375rem;
	font-weight: 700;
}

/* --- Cards --- */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
}

.card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
}

.card__thumb img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
}

.card__body { padding: 1.125rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; }

.card__cat {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}

.card__title {
	margin: 0.35rem 0 0.5rem;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--color-accent); }

.card__excerpt {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	color: var(--color-muted);
	flex: 1;
}

.card__date { font-size: 0.8125rem; color: var(--color-muted); margin-top: auto; }

/* --- Categories --- */
.category-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.75rem;
}

.category-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.875rem 1rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: inherit;
	text-decoration: none;
}

.category-list a:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }

.category-list__count {
	font-size: 0.8125rem;
	color: var(--color-muted);
	background: var(--color-surface);
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
}

/* --- About box --- */
.about-box {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem 1.75rem;
}

.about-box p { margin: 0 0 1rem; color: var(--color-muted); }

.btn {
	display: inline-block;
	padding: 0.55rem 1rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}

.btn--ghost {
	border: 1px solid var(--color-border);
	color: var(--color-text);
	background: var(--color-bg);
}

.btn--ghost:hover { border-color: var(--color-accent); text-decoration: none; }

/* --- Entry (single/page) --- */
.entry { padding: 2rem 0 3rem; }

.entry__header { margin-bottom: 1.5rem; }

.entry__cat {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}

.entry__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.625rem, 4vw, 2.25rem);
	line-height: 1.2;
}

.entry__meta { font-size: 0.875rem; color: var(--color-muted); }

.entry__content :where(p, ul, ol) { margin: 0 0 1rem; }
.entry__content :where(h2, h3) { margin: 2rem 0 0.75rem; line-height: 1.3; }

.entry__content .table-wrap {
	overflow-x: auto;
	margin: 1.5rem 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	box-shadow: var(--shadow);
}

.entry__content table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.entry__content th,
.entry__content td {
	border-bottom: 1px solid var(--color-border);
	padding: 0.65rem 0.85rem;
	text-align: left;
	vertical-align: top;
}

.entry__content thead th {
	background: var(--color-accent-soft);
	color: var(--color-text);
	font-weight: 600;
	border-bottom: 2px solid var(--color-accent);
}

.entry__content tbody tr:nth-child(even) {
	background: var(--color-bg);
}

.entry__content tbody tr:last-child td {
	border-bottom: 0;
}

.entry__as-of { color: var(--color-muted); }

/* --- Sources block --- */
.article-sources {
	margin-top: 2.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.article-sources__title {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
}

.article-sources__freshness {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.article-sources__list {
	margin: 0;
	padding-left: 1.25rem;
}

.article-sources__item {
	margin-bottom: 0.85rem;
}

.article-sources__link {
	font-weight: 600;
	text-decoration: none;
}

.article-sources__link:hover { text-decoration: underline; }

.article-sources__url {
	display: block;
	font-size: 0.8125rem;
	color: var(--color-muted);
	margin-top: 0.15rem;
}

.article-sources__note {
	display: block;
	font-size: 0.875rem;
	color: var(--color-text);
	margin-top: 0.25rem;
}

.article-sources__disclaimer {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	color: var(--color-muted);
}

/* --- Table of contents --- */
.article-toc {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.article-toc__title { margin: 0 0 0.5rem; }

.article-toc__list {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 0.9375rem;
}

.article-toc__list a { text-decoration: none; }
.article-toc__list a:hover { text-decoration: underline; }

/* --- Archive --- */
.archive-header { padding: 2rem 0 1rem; }
.archive-header__title { margin: 0 0 0.5rem; font-size: 1.75rem; }
.archive-header__desc { color: var(--color-muted); }

.empty-state { color: var(--color-muted); grid-column: 1 / -1; }

/* --- Pagination --- */
.navigation.pagination { margin: 2rem 0; }
.nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.page-numbers {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background: var(--color-surface);
}

/* --- Footer --- */
.site-footer {
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
	padding: 1.5rem 0;
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.site-footer__copy { margin: 0; font-size: 0.875rem; color: var(--color-muted); }
.menu--footer { gap: 1rem; }
.menu--footer a { font-size: 0.875rem; color: var(--color-muted); }