/*
Theme Name:  VBTCafe Child
Template:    generatepress
Version:     1.0.0
Description: Clean, fast reading layout for the vbtcafe.com relaunch (GeneratePress child).
Text Domain: vbtcafe-child
*/

:root {
	--vbt-ink: #111827;
	--vbt-ink-2: #1f2937;
	--vbt-muted: #5b6474;
	--vbt-line: #e6e8ec;
	--vbt-bg: #f5f6f8;
	--vbt-card: #ffffff;
	--vbt-accent: #0b63ce;
	--vbt-accent-2: #084b9c;
	--vbt-radius: 12px;
}

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: var(--vbt-ink-2);
	background: var(--vbt-bg);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--vbt-accent); }
a:hover, a:focus { color: var(--vbt-accent-2); }

h1, h2, h3, h4, h5, h6 {
	color: var(--vbt-ink);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

/* ---------- header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--vbt-line); }
.inside-header { padding-top: 18px; padding-bottom: 18px; }
.main-title { font-size: 28px; font-weight: 850; letter-spacing: -0.03em; line-height: 1.1; }
.main-title a, .main-title a:hover { color: var(--vbt-ink); }
.site-description { color: var(--vbt-muted); font-size: 13.5px; margin-top: 2px; }
.main-navigation, .main-navigation ul ul { background: #fff; }
.main-navigation { border-bottom: 1px solid var(--vbt-line); }
.main-navigation .main-nav ul li a { color: var(--vbt-ink-2); font-weight: 600; font-size: 15px; }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--vbt-accent); }
.menu-toggle { color: var(--vbt-ink); }

/* ---------- cards: containers ---------- */
.separate-containers .inside-article,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.vbt-card {
	background: var(--vbt-card);
	border: 1px solid var(--vbt-line);
	border-radius: var(--vbt-radius);
}
.separate-containers .inside-article { padding: 32px; }

/* ---------- single posts & pages: reading column ---------- */
.single .inside-article,
.page .inside-article { max-width: 780px; margin-inline: auto; }
.single .entry-title,
.page .entry-title { font-size: clamp(27px, 3.8vw, 40px); }
.entry-content { font-size: 18px; }
.entry-content > * + * { margin-top: 1.05em; }
.entry-content h2 { font-size: 1.55em; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.28em; margin-top: 1.4em; }
.entry-content img, .featured-image img { border-radius: 10px; height: auto; }
.entry-content table { border-collapse: collapse; width: 100%; font-size: 16px; }
.entry-content th, .entry-content td { border: 1px solid var(--vbt-line); padding: 8px 10px; }
.entry-meta, .entry-meta a { color: var(--vbt-muted); font-size: 14px; }
.cat-links a, .tags-links a { font-weight: 600; }

/* ---------- home, archives, search: card grid ---------- */
.vbt-grid,
.blog .site-main,
.archive .site-main,
.search .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 22px;
	align-items: start;
}
.blog .site-main > :not(article),
.archive .site-main > :not(article),
.search .site-main > :not(article) { grid-column: 1 / -1; }
.separate-containers .site-main > article,
.vbt-grid > article { margin-bottom: 0; }
.blog .inside-article,
.archive .inside-article,
.search .inside-article,
.vbt-grid .inside-article { padding: 0 0 20px; overflow: hidden; height: 100%; }
.blog .post-image,
.archive .post-image,
.search .post-image,
.vbt-grid .post-image { margin: 0 0 14px; }
.blog .post-image img,
.archive .post-image img,
.search .post-image img,
.vbt-grid .post-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.blog .entry-header,
.blog .entry-summary,
.blog footer.entry-meta,
.archive .entry-header,
.archive .entry-summary,
.archive footer.entry-meta,
.search .entry-header,
.search .entry-summary,
.search footer.entry-meta,
.vbt-grid .entry-header,
.vbt-grid .entry-summary,
.vbt-grid footer.entry-meta { padding-inline: 20px; }
.blog h2.entry-title,
.archive h2.entry-title,
.search h2.entry-title,
.vbt-grid h2.entry-title { font-size: 19px; line-height: 1.35; margin-bottom: 6px; }
.blog h2.entry-title a,
.archive h2.entry-title a,
.search h2.entry-title a,
.vbt-grid h2.entry-title a { color: var(--vbt-ink); }
.entry-summary { font-size: 15.5px; color: var(--vbt-muted); }
.entry-summary p { margin-bottom: 0.6em; }
.read-more-container, .read-more { font-weight: 600; }
.page-header { padding: 22px 24px; }
.page-header h1 { font-size: 28px; margin: 0; }
.taxonomy-description { color: var(--vbt-muted); margin-top: 6px; }

/* ---------- home page sections ---------- */
.vbt-home .vbt-intro { padding: 26px 28px; margin-bottom: 26px; }
.vbt-home .vbt-intro h1 { font-size: clamp(24px, 3.2vw, 32px); margin: 0 0 6px; }
.vbt-home .vbt-intro p { margin: 0; color: var(--vbt-muted); }
.vbt-section { margin-top: 42px; }
.vbt-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vbt-section-head h2 { font-size: 22px; margin: 0; }
.vbt-section-head a { font-weight: 600; font-size: 15px; white-space: nowrap; }
.vbt-pagination { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 6px; }
.vbt-pagination .page-numbers { display: inline-block; min-width: 42px; padding: 8px 12px; text-align: center; background: #fff; border: 1px solid var(--vbt-line); border-radius: 8px; color: var(--vbt-ink-2); }
.vbt-pagination .page-numbers.current { background: var(--vbt-accent); border-color: var(--vbt-accent); color: #fff; }

/* ---------- related posts (single) ---------- */
.vbt-related { max-width: 780px; margin: 26px auto 0; padding: 24px 28px; }
.vbt-related h2 { font-size: 20px; margin: 0 0 14px; }
.vbt-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vbt-related li a { font-weight: 600; color: var(--vbt-ink); }
.vbt-related li a:hover { color: var(--vbt-accent); }
.vbt-related li span { display: block; color: var(--vbt-muted); font-size: 13.5px; }

/* ---------- footer ---------- */
.site-info { background: #fff; border-top: 1px solid var(--vbt-line); color: var(--vbt-muted); font-size: 14px; }
.site-info a { color: var(--vbt-ink-2); }
.vbt-footer-links a + a { margin-left: 16px; }

@media (max-width: 768px) {
	body { font-size: 16.5px; }
	.separate-containers .inside-article { padding: 22px 18px; }
	.blog .inside-article,
	.archive .inside-article,
	.search .inside-article,
	.vbt-grid .inside-article { padding: 0 0 20px; }
	.entry-content { font-size: 17px; }
	.vbt-related { padding: 20px 18px; }
	.main-title { font-size: 24px; }
}