/* =========================================================================
   08 — SINGLE POST · ARCHIVE · SIDEBAR · COMMENTS · PAGINATION
   ========================================================================= */

/* --- Page / archive / single titles ---------------------------------------
   Strip any box background so the title sits on the page grid, then give the
   H1 the same metallic gold-foil shimmer text as the homepage headline. */
.page-title,
.archive .page-title,
.blog-archive .page-title,
.page-title .page-title-inner {
	background: transparent !important;
	border-bottom: 0 !important;
}

.entry-title,
.page-title,
.page-title > span,
.page-title h1 {
	background-image: linear-gradient(100deg,
		#9c6e15 0%, #e8b929 20%, #f8d75a 38%, #fff3c2 50%,
		#f8d75a 62%, #e8b929 80%, #9c6e15 100%) !important;
	background-size: 200% auto !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	font-size: clamp(26px, 3.6vw, 40px) !important;
	line-height: 1.18 !important;
	font-weight: 800 !important;
	letter-spacing: 0.01em;
	filter: drop-shadow(0 3px 18px rgba(241, 194, 51, 0.28));
	animation: s67-text-shimmer 6s linear infinite;
}

/* --- Single post header --- */
.entry-header { margin-bottom: var(--s67-space-6); }
.entry-meta,
.entry-meta a {
	color: var(--s67-text-dim) !important;
	letter-spacing: 0.04em;
}
.entry-meta a:hover { color: var(--s67-gold-100) !important; }

/* Video embeds / iframes */
.entry-content iframe,
.entry-content video,
.entry-content .wp-video,
.entry-content .video-shortcode {
	border-radius: var(--s67-radius-md);
	overflow: hidden;
	border: 1px solid var(--s67-border);
	box-shadow: var(--s67-shadow-md);
	max-width: 100%;
}

/* --- Sidebar widgets --- */
.widget-area .widget,
.post-sidebar .widget {
	background: var(--s67-bg-elev-1);
	border: 1px solid var(--s67-border);
	border-radius: var(--s67-radius-md);
	padding: var(--s67-space-5);
	box-shadow: var(--s67-shadow-sm);
	margin-bottom: var(--s67-space-6);
}
.widget .widget-title,
.widget .widgettitle {
	color: var(--s67-text) !important;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	position: relative;
	padding-bottom: var(--s67-space-2);
	margin-bottom: var(--s67-space-4);
	display: block;
}
.widget .widget-title::after,
.widget .widgettitle::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 30px; height: 2px;
	background: var(--s67-grad-gold);
	box-shadow: 0 0 8px var(--s67-gold-glow);
	border-radius: 2px;
}
.widget ul li,
.widget ul li a { color: var(--s67-text-muted); }
.widget ul li a:hover { color: var(--s67-gold-100); }
.widget ul li { border-color: var(--s67-border) !important; }

/* Inputs (search widgets, forms) */
.widget input[type="search"],
.widget input[type="text"],
.search-form input[type="search"],
.searchwp-live-search-input {
	background: var(--s67-bg-elev-2) !important;
	color: var(--s67-text) !important;
	border: 1px solid var(--s67-border) !important;
	border-radius: var(--s67-radius-pill) !important;
}
.widget input::placeholder { color: var(--s67-text-dim); }
.widget input:focus,
.search-form input:focus {
	border-color: var(--s67-border-gold) !important;
	box-shadow: 0 0 0 3px rgba(244, 196, 48, 0.12) !important;
}

/* SearchWP live results dropdown */
.searchwp-live-search-results {
	background: var(--s67-bg-elev-1) !important;
	border: 1px solid var(--s67-border) !important;
	border-radius: var(--s67-radius-md) !important;
	box-shadow: var(--s67-shadow-lg) !important;
	color: var(--s67-text) !important;
}

/* --- Related posts --- */
.related-posts .box-blog-post,
.related .box-blog-post { background: var(--s67-bg-elev-1); }
.related h3, .related-title { color: var(--s67-text); }

/* --- Comments --- */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	background: var(--s67-bg-elev-2) !important;
	color: var(--s67-text) !important;
	border: 1px solid var(--s67-border) !important;
	border-radius: var(--s67-radius-sm) !important;
}
.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--s67-border-gold) !important;
	box-shadow: 0 0 0 3px rgba(244, 196, 48, 0.12) !important;
}
.commentlist .comment-body,
.comment-body {
	background: var(--s67-bg-elev-1);
	border: 1px solid var(--s67-border);
	border-radius: var(--s67-radius-md);
	padding: var(--s67-space-5);
}

/* --- Pagination -----------------------------------------------------------
   The <ul class="page-numbers"> is the CONTAINER (don't box it); the buttons
   use class "page-number" (singular). Make the container a centered flex row
   and style each page-number as a button. */
ul.page-numbers,
.nav-pagination {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 0 !important;
	margin: var(--s67-space-6) 0;
	list-style: none;
}
ul.page-numbers > li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	list-style: none;
}
.page-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: var(--s67-bg-elev-1) !important;
	color: var(--s67-text) !important;
	border: 1px solid var(--s67-border) !important;
	border-radius: var(--s67-radius-sm) !important;
	font-weight: 600;
	line-height: 1;
	transition: transform var(--s67-dur-fast) var(--s67-ease),
		background var(--s67-dur-fast) var(--s67-ease),
		border-color var(--s67-dur-fast) var(--s67-ease),
		color var(--s67-dur-fast) var(--s67-ease);
}
a.page-number:hover {
	border-color: var(--s67-border-gold) !important;
	color: var(--s67-gold-100) !important;
	background: var(--s67-bg-elev-2) !important;
	transform: translateY(-1px);
}
.page-number.current {
	background-image: var(--s67-grad-gold) !important;
	background-color: var(--s67-gold-300) !important;
	color: var(--s67-text-on-gold) !important;
	border-color: transparent !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.page-number.dots {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--s67-text-dim) !important;
}

/* Breadcrumbs */
.breadcrumbs,
.breadcrumbs a { color: var(--s67-text-dim) !important; }
.breadcrumbs a:hover { color: var(--s67-gold-100) !important; }

/* =========================================================================
   Author box + comment form → framed cards (tidier, premium).
   ========================================================================= */
.entry-author.author-box {
	background: var(--s67-bg-elev-1);
	border: 1px solid var(--s67-border);
	border-radius: var(--s67-radius-md);
	padding: var(--s67-space-5) var(--s67-space-6);
	box-shadow: var(--s67-shadow-sm);
	margin: var(--s67-space-6) 0;
}
.entry-author .author-name { color: var(--s67-gold-100) !important; }
.entry-author .author-desc { color: var(--s67-text-muted) !important; }
.entry-author .blog-author-image img {
	border-radius: 50%;
	border: 2px solid var(--s67-border-gold);
	box-shadow: 0 0 0 4px rgba(241, 194, 51, 0.06);
}

/* Comment reply form box */
.comment-respond {
	background: var(--s67-bg-elev-1);
	border: 1px solid var(--s67-border);
	border-radius: var(--s67-radius-md);
	padding: var(--s67-space-6);
	box-shadow: var(--s67-shadow-sm);
	margin-top: var(--s67-space-6);
}
.comments-area .comments-title,
.comment-respond .comment-reply-title,
.comments-area .comment-author,
.comments-area .comment-meta a { color: var(--s67-text) !important; }
.comments-area .comment-meta a:hover { color: var(--s67-gold-100) !important; }

/* =========================================================================
   Clear gold "light from the header" at the top of detail / archive content.
   #content is also .page-wrapper (transparent), so we override with !important.
   ========================================================================= */
.single #content,
.archive #content,
.single .content-area,
.archive .content-area {
	background: radial-gradient(820px 320px at 50% -30px, rgba(241, 194, 51, 0.17), transparent 66%) no-repeat top center !important;
}