/**
 * GoBlocks — Frontend Base Styles
 *
 * Applies consistent, home-page-matching design to ALL pages and posts.
 * Loaded on every frontend request via CssEnqueue::enqueue_base().
 *
 * Scope: body, typography, single post/page layout, heading reset.
 * NOT scoped to GoBlocks blocks — those have their own generatedCss.
 */

/* ── Design Tokens ────────────────────────────────────────────────────────── */

:root {
	--gb-site-bg:        #ffffff;
	--gb-content-bg:     #ffffff;
	--gb-text:           #0f172a;
	--gb-text-muted:     #64748b;
	--gb-text-light:     #94a3b8;
	--gb-border:         #e2e8f0;
	--gb-border-light:   #f1f5f9;
	--gb-primary:        #4f46e5;
	--gb-primary-hover:  #4338ca;
	--gb-accent:         #0891b2;
	--gb-success:        #059669;
	--gb-radius:         10px;
	--gb-radius-sm:      6px;
	--gb-radius-lg:      16px;
	--gb-content-width:  720px;
	--gb-font-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Global Reset ─────────────────────────────────────────────────────────── */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var( --gb-site-bg );
	color: var( --gb-text );
	font-family: var( --gb-font-sans );
	line-height: 1.7;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── Single Post / Page Layout ───────────────────────────────────────────── */

/* GoBlocks layout blocks (Group, Container) should never be constrained
   by a max-width set by frontend-base — the theme controls page layout,
   and GoBlocks blocks control their own sizing via the inspector. */
.wp-block-post-content > [class*="gb-"],
.entry-content > [class*="gb-"] {
	max-width: none;
	box-sizing: border-box;
}

/* ── Single Post Header Area ─────────────────────────────────────────────── */

.wp-block-post-title,
.entry-title {
	font-family: var( --gb-font-sans );
	font-size: clamp( 1.75rem, 4vw, 2.75rem );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.025em;
	color: var( --gb-text );
	margin-bottom: 0.5rem;
}

/* Post metadata (date, author, category) */
.wp-block-post-date,
.wp-block-post-author,
.entry-date,
.entry-meta,
.posted-on,
.byline {
	font-size: 0.875rem;
	color: var( --gb-text-muted );
}

/* ── Typography Defaults ─────────────────────────────────────────────────── */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
#comments h2,
#comments h3 {
	font-family: var( --gb-font-sans );
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	margin-top: 1.75em;
	margin-bottom: 0.5em;
}

/* Only set default dark color for native WP headings, not for GoBlocks-scoped ones */
.entry-content > h1, .entry-content > h2, .entry-content > h3, .entry-content > h4,
.wp-block-post-content > h1, .wp-block-post-content > h2,
.wp-block-post-content > h3, .wp-block-post-content > h4 {
	color: var( --gb-text );
}

.entry-content h2,
.wp-block-post-content h2 {
	font-size: clamp( 1.4rem, 3vw, 1.85rem );
}

.entry-content h3,
.wp-block-post-content h3 {
	font-size: clamp( 1.15rem, 2.5vw, 1.45rem );
}

/* Direct children only — let GoBlocks-scoped paragraphs keep their own color */
.entry-content > p,
.wp-block-post-content > p {
	color: var( --gb-text );
	line-height: 1.8;
	margin-bottom: 1.25rem;
}

.entry-content a,
.wp-block-post-content a {
	color: var( --gb-primary );
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.entry-content a:hover,
.wp-block-post-content a:hover {
	color: var( --gb-primary-hover );
}

/* ── Blockquote ──────────────────────────────────────────────────────────── */

.entry-content blockquote,
.wp-block-quote {
	border-left: 3px solid var( --gb-primary );
	margin-left: 0;
	padding-left: 1.5rem;
	color: var( --gb-text-muted );
	font-style: italic;
}

/* ── Code ────────────────────────────────────────────────────────────────── */

.entry-content code,
.wp-block-post-content code {
	font-size: 0.875em;
	background: #f1f5f9;
	border: 1px solid var( --gb-border );
	border-radius: var( --gb-radius-sm );
	padding: 2px 6px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.entry-content pre,
.wp-block-code {
	background: #0f172a;
	border-radius: var( --gb-radius );
	padding: 1.25rem 1.5rem;
	overflow-x: auto;
}

.entry-content pre code,
.wp-block-code code {
	background: none;
	border: none;
	padding: 0;
	color: #e2e8f0;
	font-size: 0.875rem;
}

/* ── Images ──────────────────────────────────────────────────────────────── */

.entry-content img,
.wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: var( --gb-radius );
}

/* ── Lists ───────────────────────────────────────────────────────────────── */

.entry-content ul,
.entry-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol {
	padding-left: 1.5rem;
	line-height: 1.8;
	margin-bottom: 1.25rem;
}

.entry-content li,
.wp-block-post-content li {
	margin-bottom: 0.4rem;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.entry-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.entry-content th,
.wp-block-table th {
	background: #f8fafc;
	font-weight: 700;
	text-align: left;
	padding: 12px 16px;
	border-bottom: 2px solid var( --gb-border );
	color: var( --gb-text );
}

.entry-content td,
.wp-block-table td {
	padding: 11px 16px;
	border-bottom: 1px solid var( --gb-border-light );
	color: var( --gb-text );
	vertical-align: top;
}

/* ── HR / Separator ──────────────────────────────────────────────────────── */

.entry-content hr,
.wp-block-separator {
	border: none;
	border-top: 1px solid var( --gb-border );
	margin: 2rem 0;
}

/* ── Post Navigation ─────────────────────────────────────────────────────── */

.post-navigation,
.wp-block-post-navigation-link {
	padding: 2rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --gb-primary );
}

/* ── Comments ────────────────────────────────────────────────────────────── */

#comments {
	max-width: var( --gb-content-width );
	margin: 3rem auto 2rem;
	padding: 2rem;
	background: #f8fafc;
	border-radius: var( --gb-radius-lg );
	border: 1px solid var( --gb-border );
}

#comments h2,
#comments .comments-title {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.comment-form input,
.comment-form textarea {
	border: 1.5px solid var( --gb-border );
	border-radius: var( --gb-radius-sm );
	padding: 10px 14px;
	font-size: 0.9rem;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var( --gb-primary );
	box-shadow: 0 0 0 3px rgba( 79, 70, 229, 0.12 );
}

.comment-form .submit {
	background: var( --gb-primary );
	color: #fff;
	border: none;
	padding: 11px 24px;
	border-radius: var( --gb-radius-sm );
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
}

.comment-form .submit:hover {
	background: var( --gb-primary-hover );
}

/* ── Archive / Blog List ─────────────────────────────────────────────────── */

.wp-block-post-template {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1.5rem;
}

/* ── Page content area (non-GoBlocks) ────────────────────────────────────── */

.page-content,
.post-content {
	padding: 2rem 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( max-width: 860px ) {
	:root {
		--gb-content-width: 100%;
	}

	.wp-block-post-content,
	.entry-content {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	#comments {
		margin-left: 1.25rem;
		margin-right: 1.25rem;
	}
}