/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 * Version: 1.0.0
 */

/* -----------------------------------------------------------------
   Accessibility fix — category/tag pill text color.

   This started as what looked like a false positive (-webkit-text-
   fill-color already paints the text white, and Lighthouse reads
   `color` instead), so the original fix here just aligned `color` to
   match. It turns out that fix never actually applied: this site's
   own inline CSS (Customizer Additional CSS / a code-snippets plugin
   — not any theme file) has
     [data-prefix="blog"] .entry-card .entry-meta a { color: #555 !important }
   at specificity (0,3,1), which beat the single-attribute-selector
   rule below it at (0,2,0) on every homepage/archive card — confirmed
   directly against the live site via CDP's own cascade resolution,
   not just a guess. So this was a real, live contrast failure the
   whole time on cards specifically (post-detail tag pills, which
   don't sit inside .entry-card .entry-meta, were fine). Scoping a
   second rule to that exact context, with enough attribute/class
   selectors to definitively outrank it, is what actually fixes it —
   for both themes, since the site's own rule isn't theme-scoped.
------------------------------------------------------------------ */
a[rel="tag"][class*="ct-term-"] {
	color: #ffffff !important;
}

[data-prefix="blog"] .entry-card .entry-meta a[rel="tag"][class*="ct-term-"],
[data-cards="boxed"] .entry-card .entry-meta a[rel="tag"][class*="ct-term-"] {
	color: #ffffff !important;
}

/* -----------------------------------------------------------------
   Feature: post tags — were bare bordered boxes with no color or
   hover feedback; matching the pill language used everywhere else
   on the site (meta row, footer, search chips).
------------------------------------------------------------------ */
.entry-tags {
	margin: 32px 0;
}

.entry-tags .ct-module-title {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7280;
	margin-bottom: 12px;
}

.entry-tags-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.entry-tags-items a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 16px;
	border-radius: 999px;
	background: #eef2f0;
	border: 1px solid #dde3e0;
	color: #1b2028;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.entry-tags-items a span {
	color: #0056b3;
	font-weight: 700;
	transition: color 0.15s ease;
}

.entry-tags-items a:hover {
	background: #0056b3;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 86, 179, 0.25);
}

.entry-tags-items a:hover span {
	color: #ffffff;
}

/* -----------------------------------------------------------------
   Feature: drop cap on the opening paragraph (functions.php tags the
   right paragraph — see the comment there on why it isn't simply
   ":first-of-type"). Solid color first as a fallback, then the
   gradient version layers on top only where background-clip: text
   is actually supported, so nothing goes invisible on an older engine.
------------------------------------------------------------------ */
.ttz-dropcap::first-letter {
	float: left;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 64px;
	line-height: 0.85;
	font-weight: 700;
	padding: 4px 10px 0 0;
	color: #0056b3;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.ttz-dropcap::first-letter {
		background: linear-gradient(135deg, #0056b3, #2f5d5a, #7fb8b0);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

/* -----------------------------------------------------------------
   Fix: Related Articles no longer a dark panel with unreadable text —
   now matches the site's light card system used elsewhere. !important
   is used deliberately here: this module previously fought the parent
   theme's own dark-panel defaults, and a stale browser-cached copy of
   this stylesheet made an earlier version of this fix look reverted —
   see the filemtime()-based cache-busting in functions.php.
------------------------------------------------------------------ */
.ct-related-posts-container {
	--theme-heading-color: #1b2028;
	background: #eef2f0 !important;
	padding: 40px 0;
}

.ct-related-posts-container .ct-module-title {
	color: #1b2028 !important;
	font-size: 21px;
	margin-bottom: 20px;
}

.ct-related-posts-container .ct-related-posts-items {
	gap: 18px;
}

.ct-related-posts-container article > div {
	background: #ffffff !important;
	border: 1px solid #dfe1db;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(20, 20, 20, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ct-related-posts-container article > div:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(20, 20, 20, 0.12);
}

/* Smaller than the original full-size banner, but height now matches
   the image's own 16:9 ratio exactly — object-fit: cover only crops
   when the container ratio differs from the image, so this shrinks
   the thumbnail without cutting off the title text baked into it. */
.ct-related-posts-container .ct-media-container {
	display: block;
	aspect-ratio: 16 / 9;
	height: auto;
	overflow: hidden;
}

.ct-related-posts-container .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ct-related-posts-container .related-entry-title {
	padding: 12px 14px 0;
	font-size: 15px;
	line-height: 1.4;
}

.ct-related-posts-container .related-entry-title a {
	color: #1b2028 !important;
}

.ct-related-posts-container .entry-meta {
	padding: 6px 14px 14px;
}

.ct-related-posts-container .ct-meta-element-date {
	color: #6b7280 !important;
	font-size: 12px;
}

/* -----------------------------------------------------------------
   Fix: breathing room between the header and the page content —
   category pills/cards were touching the header's bottom border
------------------------------------------------------------------ */
#main {
	padding-top: 32px;
}

/* -----------------------------------------------------------------
   Feature: comment form — compact card instead of fields sprawling
   across the full content width
------------------------------------------------------------------ */
/* The real cause of the persistent blank space either side of the
   comment form: .ct-container-narrow (a parent this theme also reuses
   for other narrow content) is hard-capped at max-width: 750px, well
   inside the ~892px content column — nothing in .comment-respond
   itself was constraining the width. */
.ct-comments-container .ct-container-narrow {
	max-width: 100%;
}

/* Futuristic redesign: a faint dot-grid "HUD" texture plus a slowly
   traveling gradient border, built from a padding-box/border-box
   double background rather than an extra wrapper element — keeps the
   markup untouched while giving the whole card a "live circuit" feel
   instead of a flat static panel. */
@keyframes ttz-border-flow {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 300% 50%;
	}
}

@keyframes ttz-pulse-glow {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.35);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(0, 122, 255, 0);
	}
}

.comment-respond {
	position: relative;
	overflow: hidden;
	padding: 32px 28px 28px;
	background:
		radial-gradient(circle at 1px 1px, rgba(0, 86, 179, 0.08) 1px, transparent 0) 0 0 / 18px 18px,
		rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(175, 181, 190, 0.85);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(20, 20, 20, 0.05), 0 20px 50px -30px rgba(0, 86, 179, 0.25);
}

/* Animated brand-gradient accent bar — same hues as the site logo,
   now drifting slowly left-to-right rather than sitting static.
   Thinner than the original 4px (matches the same 2px treatment now
   used on .hero-section and .ttz-comment-qna, so all three read as
   one consistent accent instead of two different bar weights). */
.comment-respond::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #7c4fe0, #0056b3, #3ddbd9, #7c4fe0, #0056b3, #3ddbd9);
	background-size: 300% 100%;
	box-shadow: 0 0 10px rgba(0, 86, 179, 0.4);
	animation: ttz-border-flow 8s linear infinite;
}

/* This theme never wraps the reply title in WordPress's usual
   <h2 class="comment-reply-title"> — functions.php now builds this
   .ttz-comment-heading wrapper itself. The icon is positioned
   absolutely (not a flex sibling), so its width/gap is reserved via
   padding-left on both this heading AND .comment-notes below — since
   both use the identical 56px offset from the same card edge, they
   align exactly regardless of text metrics or flexbox gap quirks
   (which is what broke every earlier attempt at this). */
.ttz-comment-heading {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	min-height: 42px;
	padding-left: 56px;
	margin: 0 0 6px;
}

.ttz-comment-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #7c4fe0, #0056b3);
	box-shadow: 0 4px 10px rgba(0, 86, 179, 0.25);
	flex-shrink: 0;
	animation: ttz-pulse-glow 2.6s ease-in-out infinite;
}

.ttz-comment-icon svg {
	width: 19px;
	height: 19px;
	fill: #ffffff;
}

.ttz-comment-title-text {
	font-size: 22px;
	font-weight: 700;
	color: #1b2028;
}

/* Cancel-reply now renders as a proper sibling of the title text
   (see the functions.php comment) instead of nested inside it, so it
   can be pushed to the row's far right and given its own pill style
   instead of being squeezed against the heading text. */
.ttz-comment-heading .ct-cancel-reply {
	margin-left: auto;
}

.ttz-comment-heading .ct-cancel-reply a {
	display: inline-block;
	padding: 6px 14px;
	background: #2f5d5a;
	color: #ffffff;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.ttz-comment-heading .ct-cancel-reply a:hover {
	background: #0056b3;
}

.comment-notes {
	font-size: 13px;
	color: #6b7280;
	margin: 0 0 18px 56px;
}

/* The card fills the content column (no centered island with blank
   space on both sides); the fields themselves stay capped at a
   comfortable reading width inside it. The "Ask the Community" aside
   (added via comment_form_before/after in functions.php) shares this
   row and picks up whatever width the form doesn't use — on anything
   narrower than that combined width it drops below the form instead
   of squeezing it. */
.ttz-comment-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: stretch;
}

#commentform {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 16px;
	flex: 1 1 560px;
	max-width: 560px;
}

/* -----------------------------------------------------------------
   Feature: "Ask the Community" — a lightweight Q&A layered on top of
   the existing comment system (see functions.php for why: it reuses
   WordPress's own spam/moderation/reply handling instead of standing
   up a parallel forum). This card teases question-flagged comments
   for the article; the actual answers live in the full comment thread
   below, where there's room for a real threaded conversation.
------------------------------------------------------------------ */
/* Sized to its own content, not stretched/centered to match the much
   taller comment form next to it — that was tried (align-self:stretch
   + justify-content:center) and made a single short answer float in
   the middle of a mostly-empty card, two visible gaps instead of one.
   A shorter card sitting at the top of the row next to a taller one
   is a completely normal sidebar layout as long as both are the same
   dark color (which they now are) — nothing here to visually "fix"
   by forcing a match. */
/* HUD-style panel: dark in both themes (a deliberate contrast against
   the light comment form beside it — reads as a distinct "console"),
   fine scanline texture drifting downward, and status pills that pulse
   like live telemetry rather than sitting flat. */
@keyframes ttz-scanlines {
	0% {
		background-position-y: 0;
	}
	100% {
		background-position-y: 40px;
	}
}

@keyframes ttz-status-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}

/* Now built to be the SAME card as .comment-respond right beside it
   (same dot-grid texture, same glass/border/shadow values, same
   light/dark overrides further down) rather than a permanently-dark
   "HUD console" — that was a deliberate distinct-by-design choice
   earlier, but the two cards in one row reading as two different
   design systems (one reactive to the toggle, one not) was reported
   as a real inconsistency, not a stylistic feature. */
.ttz-comment-qna {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 220px;
	max-width: 380px;
	padding: 20px 22px;
	background:
		radial-gradient(circle at 1px 1px, rgba(0, 86, 179, 0.08) 1px, transparent 0) 0 0 / 18px 18px,
		rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(175, 181, 190, 0.85);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(20, 20, 20, 0.05), 0 20px 50px -30px rgba(0, 86, 179, 0.25);
	overflow: hidden;
}

/* Same gradient accent bar as .comment-respond right beside it — was
   missing here, which made the two cards in the same row look like
   they belonged to different design systems. ::after since ::before
   is already the scanline texture above. */
.ttz-comment-qna::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #7c4fe0, #0056b3, #3ddbd9, #7c4fe0, #0056b3, #3ddbd9);
	background-size: 300% 100%;
	box-shadow: 0 0 10px rgba(0, 86, 179, 0.4);
	animation: ttz-border-flow 8s linear infinite;
}

/* Now that the panel stretches to match the comment form's height
   (.ttz-comment-form-row above), it has more vertical room than its
   own content needs. Centering the content in that space (an earlier
   attempt) buried it in the middle of the box instead of reading
   top-down like the form beside it; keeping it flex-start and filling
   the leftover space with a small "live" status caption (below) reads
   as a deliberate HUD footer instead of dead space either way. */
.ttz-comment-qna-body {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.ttz-comment-qna-body::after {
	content: "\25CF  LIVE — NEW QUESTIONS APPEAR HERE INSTANTLY";
	display: block;
	margin-top: auto;
	padding-top: 18px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: rgba(0, 86, 179, 0.45);
}

html[data-theme="dark"] .ttz-comment-qna-body::after {
	color: rgba(110, 168, 255, 0.45);
}

.ttz-comment-qna-context {
	position: relative;
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.5;
	color: #6b7280;
}

.ttz-comment-qna-source {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b7280;
}

html[data-theme="dark"] .ttz-comment-qna-context,
html[data-theme="dark"] .ttz-comment-qna-source {
	color: #8892a6;
}

.ttz-comment-qna h5 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #4c5361;
}

.ttz-comment-qna h5 svg {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	fill: #0056b3;
}

html[data-theme="dark"] .ttz-comment-qna h5 {
	color: #6ea8ff;
}

html[data-theme="dark"] .ttz-comment-qna h5 svg {
	fill: #6ea8ff;
	filter: drop-shadow(0 0 4px rgba(110, 168, 255, 0.6));
}

.ttz-comment-qna-empty {
	position: relative;
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #4c5361;
}

html[data-theme="dark"] .ttz-comment-qna-empty {
	color: #b7bdc9;
}

.ttz-comment-qna ul {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ttz-comment-qna li a {
	display: block;
	padding: 10px 12px;
	border: 1px solid rgba(175, 181, 190, 0.85);
	border-radius: 10px;
	background: rgba(0, 86, 179, 0.03);
	text-decoration: none;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.ttz-comment-qna li a:hover {
	transform: translateX(3px);
	background: rgba(0, 86, 179, 0.08);
	border-color: rgba(0, 86, 179, 0.3);
}

html[data-theme="dark"] .ttz-comment-qna li a {
	border-color: rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] .ttz-comment-qna li a:hover {
	background: rgba(110, 168, 255, 0.08);
	border-color: rgba(110, 168, 255, 0.3);
}

.ttz-comment-qna-text {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: #1b2028;
}

html[data-theme="dark"] .ttz-comment-qna-text {
	color: #eef1f7;
}

.ttz-comment-qna-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ttz-comment-qna-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.ttz-comment-qna-status.is-open {
	background: rgba(255, 166, 87, 0.14);
	color: #ffa657;
}

.ttz-comment-qna-status.is-open::before {
	background: #ffa657;
	box-shadow: 0 0 6px #ffa657;
	animation: ttz-status-pulse 1.6s ease-in-out infinite;
}

.ttz-comment-qna-status.is-answered {
	background: rgba(126, 217, 87, 0.14);
	color: #7ed957;
}

.ttz-comment-qna-status.is-answered::before {
	background: #7ed957;
	box-shadow: 0 0 6px #7ed957;
}

/* Question-toggle checkbox appended to the comment textarea field —
   matches the existing cookie-consent checkbox treatment below. */
.comment-form-question-toggle {
	flex: 0 0 100%;
	margin: -4px 0 0;
}

.comment-form-question-toggle label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #4c5361;
	cursor: pointer;
}

.comment-form-question-toggle input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 2px solid #ccd2d9;
	border-radius: 5px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.comment-form-question-toggle input[type="checkbox"]:checked {
	background: #0056b3;
	border-color: #0056b3;
}

.comment-form-question-toggle input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* -----------------------------------------------------------------
   Question badge in the main comment thread — comment_class() (see
   functions.php) adds .ttz-is-question to a flagged comment's <li>,
   entirely via a WP filter hook, no template override.
------------------------------------------------------------------ */
.ttz-is-question .ct-comment-inner {
	background: linear-gradient(180deg, #eaf1fb 0%, #ffffff 70px);
}

/* Real DOM element (injected via JS in functions.php), not a CSS
   ::after with an emoji glyph — a "❓" character at 10px rendered
   inconsistently/faint across browsers and system emoji fonts; an SVG
   icon is crisp everywhere regardless. */
.ttz-question-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	background: #0056b3;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	vertical-align: middle;
}

.ttz-question-badge svg {
	width: 10px;
	height: 10px;
	fill: #ffffff;
}

/* A question <li> with no nested <ul class="children"> reply list has
   gone unanswered — :has() lets this stay pure CSS instead of a JS
   reply-count check; on a browser old enough not to support :has()
   the label simply never appears, no layout break either way. */
.ttz-is-question:not(:has(> .children)) .ct-comment-content::after {
	content: "Awaiting an answer";
	display: inline-block;
	margin-top: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(0, 86, 179, 0.08);
	color: #0056b3;
	font-size: 11px;
	font-weight: 700;
}

#commentform .comment-form-field-input-author,
#commentform .comment-form-field-input-email {
	flex: 1 1 calc(50% - 8px);
	margin: 0;
}

#commentform .comment-form-field-input-url,
#commentform .comment-form-field-textarea,
#commentform .comment-form-cookies-consent,
#commentform .gdpr-confirm-policy,
#commentform .form-submit {
	flex: 0 0 100%;
	margin: 0;
}

#commentform input[type="text"],
#commentform textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid #ccd2d9;
	border-radius: 8px;
	background: #ffffff;
	font: inherit;
	font-size: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#commentform textarea {
	min-height: 100px;
}

#commentform input[type="text"]:focus,
#commentform textarea:focus {
	outline: none;
	border-color: #0056b3;
	box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.12), 0 0 16px rgba(124, 79, 224, 0.15);
}

/* Force labels into normal flow above the field, regardless of any
   floating-label positioning the parent theme's JS may try to apply —
   guarantees the label can never sit on top of typed text.

   Blocksy's own comments.min.css (a bundle, not this theme's own
   files — easy to miss) ships this pairing on purpose:
     .has-labels-inside [class*=comment-form-field]:focus-within label,
     .has-labels-inside [class*=comment-form-field].ct-not-empty label
       { opacity:0; visibility:hidden; inset-inline-start:20px; }
   That's designed to work WITH the absolute-overlay positioning it
   also sets (the label fades out once it would visually collide with
   typed text) — but since the rule above already moves the label out
   of the input and into normal flow, it never collides with anything.
   The fade-out half of that pairing was still firing on its own,
   making the label vanish exactly when focused or filled — the label
   was correctly positioned but invisible. */
#commentform .comment-form-field-input-author label,
#commentform .comment-form-field-input-email label,
#commentform .comment-form-field-input-url label,
#commentform .comment-form-field-textarea label {
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
}

/* Custom checkbox styling — browsers' bare default checkboxes read as
   an afterthought next to the rest of this card. */
#commentform input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 18px;
	height: 18px;
	margin: 0 6px 0 0;
	vertical-align: middle;
	border: 2px solid #ccd2d9;
	border-radius: 5px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

#commentform input[type="checkbox"]:checked {
	background: #0056b3;
	border-color: #0056b3;
}

#commentform input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

#commentform .comment-form-cookies-consent label,
#commentform .gdpr-confirm-policy label {
	font-size: 13px;
	color: #4c5361;
}

/* CTA-style submit button instead of the theme's plain default — a
   diagonal light sweep crosses on hover (clipped by overflow:hidden
   on the button itself), the same "scanning" motif used on the
   newsletter CTA below, so the two primary buttons on this page read
   as one family. */
#commentform .form-submit .submit {
	position: relative;
	overflow: hidden;
	padding: 12px 30px;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	background: linear-gradient(135deg, #7c4fe0, #0056b3);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 86, 179, 0.3);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#commentform .form-submit .submit::before {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	transition: left 0.5s ease;
}

#commentform .form-submit .submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 86, 179, 0.4);
}

#commentform .form-submit .submit:hover::before {
	left: 130%;
}

/* -----------------------------------------------------------------
   Feature: meta row as capsules — author, date, reading time and
   category are all forced to the same height/vertical-centering so
   they read as one designed row instead of four mismatched pieces.
------------------------------------------------------------------ */
/* nowrap + horizontal scroll rather than letting pills wrap onto a
   second line — with reading-time, "updated" and category pills all
   present at once (this post has all of them), wrapped rows read as
   broken/misaligned. A horizontal scroll on genuinely narrow viewports
   is a much more common, expected pattern for a meta row than a
   ragged second line. */
.entry-header .entry-meta {
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	row-gap: 10px;
	column-gap: 10px;
}

.entry-header .entry-meta::-webkit-scrollbar {
	display: none;
}

.entry-header .entry-meta > li {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: 30px;
	box-sizing: border-box;
	margin: 0 !important;
}

/* Same blue as the category tag (rgb(0, 86, 179), confirmed from the
   rendered page) so all four pills read as one matching set instead
   of the category being the odd one out. */
.entry-header .entry-meta > li.meta-author,
.entry-header .entry-meta > li.meta-date,
.entry-header .entry-meta > li.meta-reading-time,
.entry-header .entry-meta > li.meta-updated {
	gap: 6px;
	padding: 0 12px;
	border-radius: 999px;
	background: #0056b3;
	border: 1px solid #0056b3;
}

.entry-header .entry-meta > li.meta-author {
	padding-left: 5px;
	color: #ffffff;
	font-weight: 600;
}

.entry-header .entry-meta > li.meta-author img {
	border-radius: 50%;
}

.entry-header .entry-meta > li.meta-author .ct-meta-element-author {
	color: #ffffff !important;
}

.entry-header .entry-meta > li.meta-date .ct-meta-element-date {
	color: #ffffff !important;
}

.entry-header .entry-meta > li.meta-date svg,
.entry-header .entry-meta > li.meta-reading-time svg,
.entry-header .entry-meta > li.meta-updated svg {
	width: 13px;
	height: 13px;
	fill: #ffffff;
	flex-shrink: 0;
}

.entry-header .entry-meta > li.meta-reading-time span,
.entry-header .entry-meta > li.meta-updated span {
	font-size: 13px;
	color: #ffffff;
}

/* The parent theme's own rule sets this link to display:block with
   its own padding, which wins on specificity and left the text
   vertically off-center inside the fixed-height pill — !important
   forces true flex centering to take over. */
.entry-header .entry-meta > li.meta-categories a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center;
	height: 30px !important;
	padding: 0 14px !important;
	border-radius: 999px;
	box-sizing: border-box;
	line-height: 1 !important;
}

/* This pill's own leading icon is a sibling of the <a>, not nested
   inside it (confirmed live) — it renders as an orphaned icon floating
   next to the pill rather than inside it, unlike every other meta
   pill (author/date/reading-time/updated), which all render their
   icon+text combined inside one colored pill. Coloring it (an earlier
   attempt: white, which then went invisible on a light page since it
   sits on the page background, not the pill's) only fixed contrast,
   not the layout oddity itself — hiding it is the more consistent fix,
   letting the category pill match the plain icon-less "NEWS"-style
   badge look the others already have. */
.entry-header .entry-meta > li.meta-categories > svg {
	display: none;
}

/* -----------------------------------------------------------------
   Feature: reading-progress bar — fills as the reader scrolls through
   the article body (functions.php measures .entry-content specifically,
   not total page scroll, so it reflects real reading progress).
------------------------------------------------------------------ */
/* Same purple→blue→cyan gradient as the logo/site name and the footer
   wash. Thinner than the original 5px flat bar (3px), with a glowing
   "comet head" dot riding its leading edge via ::after — since the
   dot is positioned relative to the bar itself (right: 0), it tracks
   the fill automatically as the bar's width changes on scroll, no
   extra JS needed. Reads as a live, moving indicator rather than a
   static rectangle slowly growing. */
#ttz-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: linear-gradient(90deg, #7c4fe0, #0056b3, #3ddbd9);
	box-shadow: 0 1px 8px rgba(124, 79, 224, 0.45), 0 1px 8px rgba(61, 219, 217, 0.35);
	z-index: 2147483647;
	pointer-events: none;
	transition: width 0.1s ease-out;
}

#ttz-progress-bar::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3ddbd9;
	box-shadow: 0 0 8px 2px rgba(61, 219, 217, 0.75);
}

/* The WP admin toolbar is fixed at top:0 too, 32px tall, z-index 99999
   — while logged in it completely covers this 3px bar. Only relevant
   to logged-in visitors (site owner/editors); the public never sees
   the admin bar, so this is invisible to them either way. Toolbar is
   only fixed at >=783px; below that it scrolls with the page, so no
   offset is needed there. */
@media (min-width: 783px) {
	body.admin-bar #ttz-progress-bar {
		top: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#ttz-progress-bar {
		transition: none;
	}
}

/* -----------------------------------------------------------------
   Feature: nav — a filled rounded-pill hover/active state (not just a
   thin underline, which only shows up while actively hovering and
   reads as "no change" in a plain screenshot).
------------------------------------------------------------------ */
#menu-main-menu,
#menu-main-menu-1 {
	row-gap: 6px;
}

/* This link is a flex child of its <li> with no align-items set on
   the parent, so the default "stretch" made the pill background fill
   the entire row height instead of hugging the text — align-self
   fixes that. display also needs !important: the parent theme's own
   rule for this link wins the specificity fight otherwise.
   Padding kept tight (5px 10px, no added letter-spacing): the parent
   theme auto-collapses overflowing items into a "More" dropdown based
   on measured width, and the first version of this padding (7px 14px
   + letter-spacing) pushed the row just wide enough to trigger that
   on real-world desktop widths narrower than a full 1440px viewport. */
#menu-main-menu .ct-menu-link,
#menu-main-menu-1 .ct-menu-link {
	display: inline-block !important;
	align-self: center !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 5px 10px;
	border-radius: 999px;
	transition: background 0.15s ease, color 0.15s ease;
}

#menu-main-menu .ct-menu-link:hover,
#menu-main-menu-1 .ct-menu-link:hover {
	background: #0056b3;
	color: #ffffff;
}

/* current-page item gets the same pill, permanently, instead of only
   a text-color change */
#menu-main-menu .current-menu-item > .ct-menu-link,
#menu-main-menu-1 .current-menu-item > .ct-menu-link,
#menu-main-menu .current-menu-parent > .ct-menu-link,
#menu-main-menu-1 .current-menu-parent > .ct-menu-link {
	background: #eef2f0;
	color: #0056b3 !important;
}

/* "More" overflow dropdown (Blocksy's own flexy overflow system, which
   moves items here when the row is too narrow to fit them all) — the
   toggle shares .ct-menu-link with regular items, but the panel itself
   had no styling of its own beyond the theme's bare default. */
#menu-main-menu .more-items-container > .ct-menu-link,
#menu-main-menu-1 .more-items-container > .ct-menu-link {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
}

#menu-main-menu .sub-menu,
#menu-main-menu-1 .sub-menu {
	background: #ffffff;
	border: 1px solid #dfe1db;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(20, 20, 20, 0.12);
	padding: 8px;
	min-width: 170px;
}

#menu-main-menu .sub-menu .ct-menu-link,
#menu-main-menu-1 .sub-menu .ct-menu-link {
	display: block !important;
	height: auto !important;
	padding: 9px 12px !important;
	border-radius: 6px;
	color: #1b2028;
}

#menu-main-menu .sub-menu .ct-menu-link:hover,
#menu-main-menu-1 .sub-menu .ct-menu-link:hover {
	background: #eef2f0;
	color: #0056b3;
}

/* The top row (social icons) reserves Blocksy's default 50px row
   height via var(--height) on [data-row="top"] > div, regardless of
   how short the actual content is — that's the empty gap above the
   logo/nav row. Shrinking it directly is more reliable than fighting
   the variable, since the child stylesheet loads after the parent's
   and wins on equal specificity. */
#header [data-row="top"] > div {
	min-height: 34px;
}

/* Thin divider separating the social-icons bar from the logo/nav row */
.ct-header-socials {
	border-bottom: 1px solid #e2e5e1;
	padding-bottom: 6px;
}

/* Header socials carry an icon + text label in one link (unlike the
   icon-only footer/author-box socials), so only pad/round them as a
   pill rather than forcing fixed circle dimensions that would clip
   the label. */
.ct-header-socials .ct-social-box a {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 4px 8px;
	transition: background 0.15s ease, color 0.15s ease;
}

.ct-header-socials .ct-social-box a:hover {
	background: #0056b3;
	color: #ffffff;
}

.ct-header-socials .ct-social-box a:hover svg {
	fill: #ffffff;
}

/* -----------------------------------------------------------------
   Feature: author box, redesigned with a stronger visual identity
------------------------------------------------------------------ */
/* Colors switched from the original navy/teal pairing to the same
   purple->blue->cyan family used everywhere else in this redesign
   (comment cards, buttons, gradient accent bars) — the teal read as
   a disconnected, one-off accent instead of part of the same system. */
/* Blocksy's own .author-box[data-type="type-1"] rule (0,2,0
   specificity, beats a plain .author-box at 0,1,0) sets
   border-radius: var(--theme-border-radius, 0) — with that variable
   left undefined here, it silently evaluated to 0, flattening every
   corner despite the 28px set below. The attribute selector repeated
   here matches its specificity and wins on being the later rule. */
.author-box,
.author-box[data-type="type-1"] {
	position: relative;
	align-items: flex-start;
	gap: 24px;
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 28px;
	background: linear-gradient(135deg, rgba(43, 30, 74, 0.72) 0%, rgba(0, 60, 125, 0.72) 55%, rgba(13, 60, 82, 0.72) 100%);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	box-shadow: 0 8px 24px rgba(13, 15, 24, 0.25);
	overflow: hidden;
}

.author-box::before {
	content: "";
	position: absolute;
	top: -50px;
	right: -50px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
}

.author-box::after {
	content: "";
	position: absolute;
	bottom: -60px;
	right: 60px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
}

.author-box .ct-media-container {
	position: relative;
	flex-shrink: 0;
	border-radius: 50%;
	padding: 3px;
	background: linear-gradient(135deg, #7c4fe0, #3ddbd9);
}

.author-box .ct-media-container img {
	border-radius: 50%;
	display: block;
}

.author-box section {
	position: relative;
}

.author-box-name {
	position: relative;
	margin: 0 0 10px;
	padding-top: 16px;
	color: #ffffff;
}

.author-box-name::before {
	content: "Written by";
	position: absolute;
	top: -4px;
	left: 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #9fc9ff;
}

.author-box-bio p {
	color: rgba(255, 255, 255, 0.94);
	margin: 0 0 14px;
}

.author-box-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	transition: background 0.15s ease;
}

.author-box-socials a:hover {
	background: rgba(255, 255, 255, 0.3);
}

.author-box-socials .ct-icon {
	fill: #ffffff;
}

/* -----------------------------------------------------------------
   Feature: sticky sidebar — keeps widgets in view instead of leaving
   a tall block of empty space once the shorter column runs out
------------------------------------------------------------------ */
#sidebar {
	position: sticky;
	top: 20px;
	align-self: flex-start;
}

/* -----------------------------------------------------------------
   Feature: readable code blocks and comparison tables for tech content
------------------------------------------------------------------ */
.entry-content pre {
	position: relative;
	overflow-x: auto;
	padding: 16px 18px;
	border-radius: 8px;
	background: #1b2028;
	color: #e9eaea;
	font-size: 14px;
	line-height: 1.6;
}

/* Feature: copy-to-clipboard button (functions.php injects this on
   every code block on single posts) */
.ttz-copy-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	color: #e9eaea;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ttz-copy-btn:hover {
	background: rgba(255, 255, 255, 0.22);
}

.entry-content code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.9em;
}

.entry-content :not(pre) > code {
	padding: 2px 6px;
	border-radius: 4px;
	background: #eef0f3;
	color: #b3261e;
}

.entry-content pre code {
	padding: 0;
	background: none;
	color: inherit;
}

.entry-content table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
}

.entry-content table th,
.entry-content table td {
	padding: 10px 14px;
	border: 1px solid #dfe1db;
	text-align: left;
}

.entry-content table th {
	background: #f4f5f2;
	font-weight: 700;
}

/* -----------------------------------------------------------------
   Feature: share buttons, appended after every post's content
------------------------------------------------------------------ */
.ttz-share-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 32px 0 8px;
	padding: 16px 20px;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(175, 181, 190, 0.8);
	border-radius: 14px;
}

.ttz-share-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	margin-right: 4px;
}

.ttz-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #eef2f0;
	border: none;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.ttz-share-btn svg {
	width: 16px;
	height: 16px;
	fill: #1b2028;
	transition: fill 0.15s ease;
}

.ttz-share-btn:hover {
	transform: translateY(-2px);
}

.ttz-share-btn:nth-child(2):hover {
	background: #000000;
}

.ttz-share-btn:nth-child(3):hover {
	background: #1877f2;
}

.ttz-share-btn:nth-child(4):hover {
	background: #25d366;
}

.ttz-share-btn:nth-child(5):hover {
	background: #0a66c2;
}

.ttz-share-copy:hover,
.ttz-share-copy.is-copied {
	background: #0056b3;
}

.ttz-share-btn:nth-child(2):hover svg,
.ttz-share-btn:nth-child(3):hover svg,
.ttz-share-btn:nth-child(4):hover svg,
.ttz-share-btn:nth-child(5):hover svg,
.ttz-share-copy:hover svg,
.ttz-share-copy.is-copied svg {
	fill: #ffffff;
}

/* -----------------------------------------------------------------
   Feature: "Save for Later" — a bookmark button on every article
   (share bar) plus a header-accessible panel listing everything
   saved. Entirely localStorage; no account/login needed.
------------------------------------------------------------------ */
.ttz-save-btn:hover {
	background: #0056b3;
}

.ttz-save-btn:hover svg {
	fill: #ffffff;
}

.ttz-save-icon-filled {
	display: none;
}

.ttz-save-btn.is-saved {
	background: #0056b3;
}

.ttz-save-btn.is-saved svg {
	fill: #ffffff;
}

.ttz-save-btn.is-saved .ttz-save-icon-outline {
	display: none;
}

.ttz-save-btn.is-saved .ttz-save-icon-filled {
	display: block;
}

/* Header trigger — sits among the existing social icons, matching
   their own icon-button treatment rather than introducing a new
   visual style into that row. */
#ttz-saved-toggle,
#ttz-saved-toggle-mobile {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

#ttz-saved-toggle:hover,
#ttz-saved-toggle-mobile:hover {
	background: #0056b3;
}

#ttz-saved-toggle svg,
#ttz-saved-toggle-mobile svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

#ttz-saved-toggle:hover svg,
#ttz-saved-toggle-mobile:hover svg {
	fill: #ffffff;
}

.ttz-saved-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 999px;
	background: #0056b3;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
}

/* Slide-out panel */
#ttz-saved-panel {
	position: fixed;
	inset: 0;
	z-index: 999999;
}

.ttz-saved-panel-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.5);
}

.ttz-saved-panel-content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 360px;
	max-width: 88vw;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
}

.ttz-saved-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px;
	border-bottom: 1px solid #dfe1db;
}

.ttz-saved-panel-header h3 {
	margin: 0;
	font-size: 17px;
}

.ttz-saved-panel-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background: #eef2f0;
	cursor: pointer;
}

.ttz-saved-panel-close svg {
	width: 12px;
	height: 12px;
	fill: #1b2028;
}

.ttz-saved-panel-close:hover {
	background: #0056b3;
}

.ttz-saved-panel-close:hover svg {
	fill: #ffffff;
}

.ttz-saved-panel-list {
	flex: 1;
	overflow-y: auto;
	padding: 12px 22px;
}

.ttz-saved-empty {
	padding: 20px 0;
	font-size: 14px;
	line-height: 1.6;
	color: #6b7280;
}

.ttz-saved-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #eef2f0;
}

.ttz-saved-item-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	display: block;
}

.ttz-saved-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ttz-saved-item-title {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #1b2028;
	text-decoration: none;
	padding-right: 24px;
}

.ttz-saved-item-title:hover {
	color: #0056b3;
}

.ttz-saved-item-remove {
	position: absolute;
	top: 12px;
	right: 0;
	width: 20px;
	height: 20px;
	border: none;
	border-radius: 50%;
	background: none;
	color: #6b7280;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.ttz-saved-item-remove:hover {
	background: #eef2f0;
	color: #b3261e;
}

/* -----------------------------------------------------------------
   Feature: mid-article related-post card — a single recommendation
   inserted after the 2nd <h2> (functions.php), so it's seen by
   readers who never make it to the end-of-post block or sidebar.
------------------------------------------------------------------ */
.ttz-inline-related {
	margin: 32px 0;
	padding: 20px;
	background: #eef2f0;
	border-radius: 14px;
}

.ttz-inline-related-label {
	display: block;
	margin-bottom: 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7280;
}

.ttz-inline-related-card {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
}

.ttz-inline-related-thumb {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
}

.ttz-inline-related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ttz-inline-related-title {
	flex: 1;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #1b2028;
}

.ttz-inline-related-arrow {
	flex-shrink: 0;
	font-size: 20px;
	color: #0056b3;
	transition: transform 0.15s ease;
}

.ttz-inline-related-card:hover .ttz-inline-related-arrow {
	transform: translateX(4px);
}

/* -----------------------------------------------------------------
   Feature: "Was this helpful?" thumbs up/down, appended after the
   share bar. A real per-article signal without an analytics platform.
------------------------------------------------------------------ */
.ttz-helpful {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 24px 0 8px;
	padding: 18px 22px;
	background: #eef2f0;
	border-radius: 14px;
}

.ttz-helpful-question {
	font-size: 14px;
	font-weight: 700;
	color: #1b2028;
}

.ttz-helpful-buttons {
	display: flex;
	gap: 10px;
}

.ttz-helpful-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 16px;
	border: 1px solid #dde3e0;
	border-radius: 999px;
	background: #ffffff;
	color: #1b2028;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ttz-helpful-btn svg {
	width: 14px;
	height: 14px;
	fill: #6b7280;
	transition: fill 0.15s ease;
}

.ttz-helpful-btn:hover {
	border-color: #0056b3;
	transform: translateY(-1px);
}

.ttz-helpful-btn:hover svg {
	fill: #0056b3;
}

.ttz-helpful.is-voted .ttz-helpful-btn {
	cursor: default;
	opacity: 0.5;
}

.ttz-helpful.is-voted .ttz-helpful-btn:hover {
	transform: none;
	border-color: #dde3e0;
}

.ttz-helpful.is-voted .ttz-helpful-btn.is-selected {
	opacity: 1;
	border-color: #0056b3;
	background: #0056b3;
	color: #ffffff;
}

.ttz-helpful.is-voted .ttz-helpful-btn.is-selected svg {
	fill: #ffffff;
}

.ttz-helpful-thanks {
	font-size: 13px;
	font-weight: 600;
	color: #2f5d5a;
}

/* -----------------------------------------------------------------
   Feature: MailChimp newsletter signup, appended below every post
   (see functions.php). A dark "aurora glow" card — two soft blurred
   color blobs drifting behind the content via a dedicated ::before
   element — rather than a plain colored box, echoing the same
   purple/blue/cyan gradient identity used for the logo, the footer
   accent bar and the comment-form icon elsewhere on the page.
------------------------------------------------------------------ */
@keyframes ttz-aurora-drift {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(3%, -4%) scale(1.08);
	}
}

.ttz-newsletter {
	position: relative;
	overflow: hidden;
	margin: 32px 0;
	padding: 40px 36px;
	background: linear-gradient(165deg, rgba(20, 16, 31, 0.75) 0%, rgba(16, 19, 31, 0.75) 60%, rgba(13, 26, 28, 0.75) 100%);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	text-align: center;
}

.ttz-newsletter-glow {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(circle at 20% 30%, rgba(124, 79, 224, 0.35), transparent 45%),
		radial-gradient(circle at 80% 70%, rgba(61, 219, 217, 0.28), transparent 45%),
		radial-gradient(circle at 55% 15%, rgba(0, 86, 179, 0.3), transparent 40%);
	filter: blur(30px);
	animation: ttz-aurora-drift 10s ease-in-out infinite;
	pointer-events: none;
}

.ttz-newsletter-inner {
	position: relative;
	max-width: 460px;
	margin: 0 auto;
}

.ttz-newsletter-eyebrow {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 14px;
	border: 1px solid rgba(110, 168, 255, 0.35);
	border-radius: 999px;
	background: rgba(110, 168, 255, 0.1);
	color: #6ea8ff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ttz-newsletter-title {
	margin: 0 0 10px;
	color: #ffffff;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.25;
}

.ttz-newsletter-copy {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
	line-height: 1.6;
}

.ttz-newsletter-fields {
	display: flex;
	gap: 10px;
}

/* Selectors below are prefixed with .ttz-newsletter-form (rather than
   the input's own class alone) to out-specificity Blocksy's own
   global form-field rule — it targets
   "input:is([type=email], [type=text], ...)", which at (0,1,1) beats
   a bare ".ttz-newsletter-input" class at (0,1,0) and was silently
   winning the box-model properties (width/height/padding/border/
   background all came from Blocksy's --theme-form-field-* variables
   instead), collapsing the field to a nearly invisible 1px line. */
.ttz-newsletter-form .ttz-newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	padding: 13px 16px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	font: inherit;
	font-size: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ttz-newsletter-form .ttz-newsletter-input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.ttz-newsletter-form .ttz-newsletter-input:focus {
	outline: none;
	border-color: #6ea8ff;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 0 4px rgba(110, 168, 255, 0.15);
}

.ttz-newsletter-submit {
	position: relative;
	overflow: hidden;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, #7c4fe0, #0056b3, #3ddbd9);
	background-size: 200% 100%;
	color: #ffffff;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 8px 24px -8px rgba(0, 86, 179, 0.6);
	transition: background-position 0.4s ease, transform 0.15s ease;
}

.ttz-newsletter-submit svg {
	width: 15px;
	height: 15px;
	transition: transform 0.15s ease;
}

.ttz-newsletter-submit:hover {
	background-position: 100% 0;
	transform: translateY(-2px);
}

.ttz-newsletter-submit:hover svg {
	transform: translateX(3px);
}

@media (max-width: 560px) {
	.ttz-newsletter {
		padding: 32px 22px;
	}

	.ttz-newsletter-fields {
		flex-direction: column;
	}

	.ttz-newsletter-submit {
		justify-content: center;
	}
}

/* Shared Mailchimp submission target — visually hidden but not
   display:none (some browsers refuse to submit a form whose iframe
   target is display:none). */
.ttz-mc-frame {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	border: none;
}

/* Inline success state, swapped in for the form itself once the
   hidden iframe finishes loading (see the wp_footer script) — no
   popup, no new tab, just this same box confirming right where the
   visitor already is. */
@keyframes ttz-success-pop {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.ttz-mc-success {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 20px;
	animation: ttz-success-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The plain class rule above (display: flex) has the same specificity
   as the browser's own [hidden] { display: none }, and loads later —
   without this, the hidden attribute is silently overridden and the
   success state renders permanently visible underneath the form. */
.ttz-mc-success[hidden] {
	display: none;
}

.ttz-mc-success svg {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	fill: #7ed957;
	filter: drop-shadow(0 0 6px rgba(126, 217, 87, 0.5));
}

.ttz-mc-success span {
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
}

/* -----------------------------------------------------------------
   Feature: exit-intent / timed popup — a free-PDF lead magnet, same
   aurora-glow glass language as the below-post newsletter card, in a
   centered modal instead of an inline block.
------------------------------------------------------------------ */
@keyframes ttz-popup-in {
	0% {
		transform: translateY(16px) scale(0.97);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

.ttz-lead-popup {
	position: fixed;
	inset: 0;
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* Same [hidden]-override issue as .ttz-mc-success: the plain class
   rule above (display: flex) ties with the browser's own
   [hidden] { display: none } on specificity and loads later, so
   without this the popup rendered permanently open regardless of the
   hidden attribute — confirmed live, this is why it kept reappearing
   in every screenshot no matter how it was dismissed. */
.ttz-lead-popup[hidden] {
	display: none;
}

.ttz-lead-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(5, 7, 12, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ttz-lead-popup-card {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 460px;
	border-radius: 20px;
	background: linear-gradient(165deg, rgba(20, 16, 31, 0.92) 0%, rgba(16, 19, 31, 0.92) 60%, rgba(13, 26, 28, 0.92) 100%);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
	animation: ttz-popup-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ttz-lead-popup-glow {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(circle at 20% 20%, rgba(124, 79, 224, 0.35), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(61, 219, 217, 0.28), transparent 45%);
	filter: blur(30px);
	animation: ttz-aurora-drift 10s ease-in-out infinite;
	pointer-events: none;
}

.ttz-lead-popup-inner {
	position: relative;
	padding: 40px 32px;
	text-align: center;
}

.ttz-lead-popup-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ttz-lead-popup-close svg {
	width: 14px;
	height: 14px;
}

.ttz-lead-popup-close:hover {
	background: rgba(255, 255, 255, 0.18);
}

.ttz-lead-popup .ttz-mc-success {
	flex-direction: column;
	text-align: center;
}

.ttz-lead-popup-download {
	margin-top: 6px;
	text-decoration: none;
}

@media (max-width: 560px) {
	.ttz-lead-popup-inner {
		padding: 36px 24px;
	}
}

/* -----------------------------------------------------------------
   Feature: approved comments list — previously completely unstyled
   (bare heading, no card, no spacing), reads as an afterthought
   compared to the rest of the page.
------------------------------------------------------------------ */
.ct-comments-title {
	font-size: 20px;
	margin-bottom: 20px;
}

.ct-comment-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Full-width gradient top bar (not just a thin side accent — that
   read as too subtle to register as a real design change) plus a
   large, low-opacity decorative quote mark, the same technique
   already used for .comment-respond::before. */
.ct-comment-inner {
	position: relative;
	padding: 26px 26px 22px;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(175, 181, 190, 0.8);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(20, 20, 20, 0.06);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ct-comment-inner:hover {
	transform: translateY(-2px);
	border-color: rgba(0, 86, 179, 0.3);
	box-shadow: 0 10px 30px -10px rgba(0, 86, 179, 0.25);
}

.ct-comment-inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #7c4fe0, #0056b3, #3ddbd9);
}

.ct-comment-inner::after {
	content: "\201C";
	position: absolute;
	top: -18px;
	right: 18px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 100px;
	font-weight: 700;
	line-height: 1;
	color: rgba(0, 86, 179, 0.07);
	pointer-events: none;
}

.ct-comment-meta {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.ct-comment-author {
	margin: 0;
	font-size: 17px;
}

.ct-comment-author cite {
	font-style: normal;
	font-weight: 700;
	color: #1b2028;
}

/* Fallback initial-letter avatar (functions.php adds this via JS when
   a comment has no real avatar image — common when Gravatar/avatars
   are disabled site-wide) — a colored circle beats a blank gap. */
@keyframes ttz-ring-spin {
	to {
		transform: rotate(360deg);
	}
}

.ttz-comment-avatar-fallback {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, #7c4fe0, #0056b3);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	margin-right: 4px;
}

/* Slowly rotating conic-gradient ring, offset just outside the circle
   via a negative-inset ::before sitting behind it (z-index -1) —
   a small "live" detail rather than a static flat avatar. */
.ttz-comment-avatar-fallback::before {
	content: "";
	position: absolute;
	inset: -3px;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #7c4fe0, #0056b3, #3ddbd9, #7c4fe0);
	animation: ttz-ring-spin 4s linear infinite;
}

/* Highlights when the blog author (you) replies to a reader — a
   small "Author" badge next to the name, so it reads as a real
   conversation rather than a flat list of look-alike comments. */
.ct-author-comment .ct-comment-inner {
	background: linear-gradient(180deg, #f4f1fc 0%, #ffffff 90px);
}

.ct-author-comment .ct-comment-author cite::after {
	content: "Author";
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	background: linear-gradient(135deg, #7c4fe0, #0056b3);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

.ct-comment-meta-data {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	color: #6b7280;
}

.ct-comment-meta-data .comment-reply-link {
	padding: 4px 12px;
	border: 1px solid #0056b3;
	border-radius: 999px;
	color: #0056b3;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.ct-comment-meta-data .comment-reply-link:hover {
	background: #0056b3;
	color: #ffffff;
}

/* Comment upvote button — injected via JS in functions.php as a
   sibling of the date/reply-link row. A quick pop animation plus a
   gradient fill once voted give the click a real sense of weight
   instead of a flat state swap. */
@keyframes ttz-upvote-pop {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.25);
	}
	100% {
		transform: scale(1);
	}
}

.ttz-upvote-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	padding: 4px 12px;
	border: 1px solid #ccd2d9;
	border-radius: 999px;
	background: transparent;
	color: #6b7280;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ttz-upvote-btn svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.ttz-upvote-btn:hover {
	border-color: #0056b3;
	color: #0056b3;
}

.ttz-upvote-btn.is-voted {
	border-color: transparent;
	background: linear-gradient(135deg, #7c4fe0, #0056b3);
	color: #ffffff;
	cursor: default;
}

.ttz-upvote-btn.is-animating svg {
	animation: ttz-upvote-pop 0.4s ease;
}

.ct-comment-content p {
	margin: 0;
	color: #4c5361;
}

/* -----------------------------------------------------------------
   Fix: on category/tag/search/author archives, the title + breadcrumb
   block lives inside the content column only, so the sidebar (a
   separate grid sibling) started level with that title instead of
   the post grid beneath it — pushing it down by the measured height
   of that block aligns the first sidebar widget with the first post
   card instead.

   The 100px this used before was measured against a taller title
   block (an <h1> plus its own margins); re-measured live at 60px
   against the current hero-section (24px padding-top + breadcrumb
   only — this category's <h1> isn't present in the page's HTML at
   all right now, a Customizer/taxonomy setting rather than anything
   CSS controls). If the title comes back, this will likely need
   re-measuring again — it's tied to that block's actual rendered
   height, not a fixed constant.
------------------------------------------------------------------ */
body.archive #sidebar,
body.search #sidebar,
body.author #sidebar {
	margin-top: 60px;
}

/* -----------------------------------------------------------------
   Feature: footer redesign — a dark wash of the same purple→blue→cyan
   gradient used for the site name/logo, rather than flat navy. Every
   stop is still dark enough (low luminance) that white footer text
   keeps solid contrast across the whole width, so this is a hue shift,
   not a brightness one.
------------------------------------------------------------------ */
/* Aurora-mesh footer: a near-black base with the same drifting glow
   blobs used on the newsletter card (::after, kept behind the real
   content via z-index), rather than the previous flat three-stop
   diagonal gradient — ties the footer into the same "living" visual
   language as the rest of the redesign instead of sitting still. */
#footer.ct-footer {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(13, 10, 24, 0.85) 0%, rgba(16, 19, 31, 0.85) 45%, rgba(10, 26, 29, 0.85) 100%);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	padding: 34px 0;
}

#footer.ct-footer::after {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: 0;
	background:
		radial-gradient(circle at 15% 20%, rgba(124, 79, 224, 0.3), transparent 45%),
		radial-gradient(circle at 85% 15%, rgba(0, 86, 179, 0.26), transparent 40%),
		radial-gradient(circle at 50% 95%, rgba(61, 219, 217, 0.22), transparent 45%);
	filter: blur(40px);
	animation: ttz-aurora-drift 14s ease-in-out infinite;
	pointer-events: none;
}

/* Same gradient as the site name, full-strength, as a thin accent bar
   — ties the footer to the logo directly instead of the previous
   blue/teal accent shared with the comment form and author box. */
#footer.ct-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 2;
	background: linear-gradient(90deg, #7c4fe0, #0056b3, #3ddbd9);
	box-shadow: 0 0 10px rgba(0, 86, 179, 0.4);
}

/* The parent theme paints its own white background directly onto the
   inner row div (background-color never inherits from a parent, so
   setting it on #footer alone left this row's own white showing
   through as a pale stripe sandwiched inside the dark padding). */
#footer.ct-footer > div {
	position: relative;
	z-index: 1;
	background: transparent !important;
}

#footer .ct-footer-copyright p {
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
}

/* Footer socials already have their own per-brand colored ring/fill —
   the translucent white circle added here fought with that, muddying
   icons that already read fine on a dark background left alone. */

/* -----------------------------------------------------------------
   Feature: footer content — was a single bare row (copyright, socials,
   legal links) with nothing above it. Adds a brand blurb, a real
   "Explore" links list and a "Recent Posts" list (both built from
   actual site data, not placeholder links) above the existing row.

   The three columns use flex-grow (1 1 / 1.3 1) rather than
   justify-content: space-between, so they actually expand to fill the
   full footer width — space-between was pinning two narrow blocks to
   the outer edges and leaving a large empty gap between them, which
   is what read as "two blank boxes" rather than a filled row.
------------------------------------------------------------------ */
/* Horizontal padding here specifically (not on #footer.ct-footer
   itself): this block is inserted as a direct child of the footer,
   outside the theme's own .ct-container — so it never inherited the
   container's side padding the rest of the footer gets, and on mobile
   it ran flush to both edges. */
#ttz-footer-top {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 28px 40px;
	padding: 0 20px 20px;
}

.ttz-footer-col {
	flex: 1 1 220px;
}

.ttz-footer-brand {
	flex: 1.3 1 260px;
}

.ttz-footer-sitename {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	background: linear-gradient(90deg, #7c4fe0, #0056b3, #3ddbd9);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ttz-footer-brand p:not(.ttz-footer-sitename) {
	margin: 0 0 14px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 13px;
	line-height: 1.5;
}

/* Socials land here (moved from the old copyright/socials row by the
   wp_footer script) directly under the sitename + tagline, matching a
   logo-then-icons layout instead of being tucked away at the bottom. */
.ttz-footer-brand .ct-footer-socials {
	display: flex;
	gap: 8px;
}

/* Same uppercase/letter-spaced treatment already used for the
   "Popular" search-chip label and section labels elsewhere, so this
   reads as the same typographic system rather than a new one. */
.ttz-footer-col h4 {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Pills, matching the legal-links row directly below (same uppercase,
   font-weight 600) and the search chips in the search modal — one
   consistent link style across the whole footer/search system. */
.ttz-footer-links ul,
.ttz-footer-quicklinks ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ttz-footer-links a,
.ttz-footer-quicklinks a {
	display: inline-block;
	padding: 5px 14px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ttz-footer-links a:hover,
.ttz-footer-quicklinks a:hover {
	background: #0056b3;
	border-color: #0056b3;
	color: #ffffff;
}

/* Recent Posts stays a plain readable list rather than pills — these
   are full headline titles in natural sentence case, not short
   category labels, so uppercasing them would read as shouting. */
.ttz-footer-recent ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ttz-footer-recent a {
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ttz-footer-recent a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* The copyright line, relocated by the wp_footer script to sit inside
   the brand column directly under the social icons — putting it after
   the whole 4-column row instead left it stranded below whichever
   column was tallest, with a large gap under the shorter brand column
   above it. A small top margin (not a border) separates it from the
   icons without implying it's a distinct section. */
.ttz-footer-brand .ct-footer-copyright {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	text-align: left;
}

.ttz-footer-brand .ct-footer-copyright a {
	color: rgba(255, 255, 255, 0.75);
}

/* -----------------------------------------------------------------
   Feature: news ticker — a breaking-news bar in the vein of a real
   broadcast lower-third: a pulsing LIVE indicator, per-headline
   category tags and relative timestamps, and a glass-edge highlight
   for depth instead of a flat color fill. Built from your most recent
   published posts (there's no analytics/pageview data this theme has
   access to for genuine "trending," so recency is the honest
   stand-in — labeled generically rather than overclaiming).
------------------------------------------------------------------ */
/* Higher opacity than the other glass surfaces on purpose (same
   reasoning as .ttz-comment-qna): a news ticker reads as a ticker
   because it's reliably dark — at the lighter 0.75 alpha used
   elsewhere, a white light-mode page bled through the blur enough to
   wash it toward gray, which is exactly the "should stay matched with
   the dark color" mismatch that got reported. */
#ttz-news-ticker {
	position: relative;
	display: flex;
	align-items: stretch;
	height: 44px;
	background: linear-gradient(180deg, rgba(27, 32, 40, 0.94) 0%, rgba(20, 23, 28, 0.94) 100%);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 16px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.ttz-ticker-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 20px;
	background: linear-gradient(135deg, #7c4fe0, #0056b3);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	position: relative;
	z-index: 2;
}

/* A genuine broadcast-style "on air" dot — pulses on its own timer,
   independent of the headline scroll, so the bar reads as live even
   when a reader stops to read one headline. */
.ttz-ticker-live-dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff4d4f;
	animation: ttz-live-pulse 1.8s ease-out infinite;
}

@keyframes ttz-live-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.55);
	}
	70% {
		box-shadow: 0 0 0 6px rgba(255, 77, 79, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
	}
}

.ttz-ticker-badge::after {
	content: "";
	position: absolute;
	top: 0;
	right: -18px;
	width: 0;
	height: 0;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 18px solid #0056b3;
}

#ttz-news-ticker .ttz-ticker-track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	animation: ttz-ticker-scroll 42s linear infinite;
}

#ttz-news-ticker:hover .ttz-ticker-track {
	animation-play-state: paused;
}

.ttz-ticker-content {
	display: flex;
	align-items: center;
	padding-left: 28px;
}

.ttz-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}

/* Color itself (text/background/border) is set inline per post
   (functions.php) so each category gets its own accent instead of one
   flat teal for everything — this rule only supplies the shared shape
   and a fallback color for the rare case a post has no category. */
.ttz-ticker-item-cat {
	padding: 3px 10px;
	border-radius: 5px;
	border: 1px solid;
	color: #3ddbd9;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ttz-ticker-item-title {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	font-weight: 600;
	transition: color 0.15s ease, text-shadow 0.15s ease;
}

.ttz-ticker-item:hover .ttz-ticker-item-title {
	color: #ffffff;
	text-shadow: 0 0 12px rgba(61, 219, 217, 0.55);
}

/* A sharp chevron divider reads as more deliberate than a round dot —
   closer to a broadcast ticker's segment break. */
.ttz-ticker-chevron {
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	margin: 0 28px;
	border-top: 2px solid rgba(255, 255, 255, 0.22);
	border-right: 2px solid rgba(255, 255, 255, 0.22);
	transform: rotate(45deg);
}

/* Fades the scrolling headlines to transparent right at the edge of
   the visible strip, instead of an abrupt hard cut mid-character. */
#ttz-news-ticker::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 70px;
	background: linear-gradient(90deg, rgba(20, 23, 28, 0), #14171c);
	pointer-events: none;
	z-index: 1;
}

@keyframes ttz-ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	#ttz-news-ticker .ttz-ticker-track,
	.ttz-ticker-live-dot {
		animation: none;
	}
}

/* -----------------------------------------------------------------
   Feature: search modal glass redesign — was a plain placeholder
   (then a flat #212529, one more of the several mismatched dark
   shades found across the site) with no visual identity. Now a glass
   panel with the same aurora glow used on the newsletter/popup cards,
   a brand-gradient (purple/blue/cyan, matching everywhere else —
   previously blue/teal/green, its own disconnected palette) focus
   underline, and glowing "Popular" chips.
------------------------------------------------------------------ */
#search-modal {
	overflow: hidden;
	background: linear-gradient(165deg, rgba(20, 16, 31, 0.92) 0%, rgba(16, 19, 31, 0.92) 55%, rgba(13, 26, 28, 0.92) 100%) !important;
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
}

#search-modal::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(124, 79, 224, 0.22), transparent 45%),
		radial-gradient(circle at 80% 70%, rgba(61, 219, 217, 0.18), transparent 45%);
	filter: blur(40px);
	animation: ttz-aurora-drift 12s ease-in-out infinite;
	pointer-events: none;
}

#search-modal .ct-panel-actions,
#search-modal .ct-search-form {
	position: relative;
	z-index: 1;
}

#search-modal .ct-toggle-close {
	transition: background 0.15s ease, transform 0.15s ease;
}

#search-modal .ct-toggle-close:hover {
	background: rgba(110, 168, 255, 0.16);
	transform: rotate(90deg);
}

/* The theme already draws its own 2px solid border-bottom here — my
   gradient underline was drawn right on top of it (bottom: -2px),
   producing a doubled/overlapping line right at the edge of the input.
   Removing the native border leaves the gradient as the only line. */
#search-modal .ct-search-form-inner {
	position: relative;
	border-bottom: none !important;
}

/* Subtle static baseline so the field doesn't look border-less at
   rest — the gradient (::after) scales in over this on focus. */
#search-modal .ct-search-form-inner::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
}

#search-modal .ct-search-form-inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: linear-gradient(90deg, #7c4fe0, #0056b3, #3ddbd9);
	box-shadow: 0 0 10px rgba(0, 86, 179, 0.5);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

#search-modal .ct-search-form-inner:focus-within::after {
	transform: scaleX(1);
}

#search-modal input.modal-field {
	font-size: 28px;
}

#search-modal .ct-search-form-inner svg {
	transition: fill 0.2s ease, filter 0.2s ease;
}

#search-modal .ct-search-form-inner:focus-within svg {
	fill: #3ddbd9;
	filter: drop-shadow(0 0 6px rgba(61, 219, 217, 0.6));
}

#ttz-search-chips {
	position: relative;
	z-index: 1;
	margin-top: 28px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.ttz-search-chips-label {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	margin-right: 4px;
}

.ttz-search-chip {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ttz-search-chip:hover {
	background: linear-gradient(135deg, #7c4fe0, #0056b3);
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 86, 179, 0.4);
	transform: translateY(-1px);
}

/* -----------------------------------------------------------------
   Feature: comment-form polish — icons inside each field, and a
   properly styled "logged in as" state (WordPress swaps the
   Name/Email/Website fields for this automatically for logged-in
   users — expected behavior, not a bug, but it still needs to look
   intentional rather than like plain unstyled text).
------------------------------------------------------------------ */
#commentform .comment-form-field-input-author,
#commentform .comment-form-field-input-email,
#commentform .comment-form-field-input-url {
	position: relative;
}

#commentform .comment-form-field-input-author input,
#commentform .comment-form-field-input-email input,
#commentform .comment-form-field-input-url input {
	padding-left: 34px;
}

#commentform .comment-form-field-input-author::after,
#commentform .comment-form-field-input-email::after,
#commentform .comment-form-field-input-url::after {
	content: "";
	position: absolute;
	left: 11px;
	bottom: 11px;
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.45;
	pointer-events: none;
}

/* Each icon is a data-URI SVG with its fill hardcoded black — fine on
   the light input background, close to invisible on the near-black
   input background in dark mode. Inverting turns black into white
   without needing three separate light-colored copies of each icon. */
html[data-theme="dark"] #commentform .comment-form-field-input-author::after,
html[data-theme="dark"] #commentform .comment-form-field-input-email::after,
html[data-theme="dark"] #commentform .comment-form-field-input-url::after {
	filter: invert(1);
	opacity: 0.55;
}

#commentform .comment-form-field-input-author::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10,10c2.8,0,5-2.2,5-5s-2.2-5-5-5S5,2.2,5,5S7.2,10,10,10z M10,12.5c-3.3,0-10,1.7-10,5V20h20v-2.5C20,14.2,13.3,12.5,10,12.5z'/%3E%3C/svg%3E");
}

#commentform .comment-form-field-input-email::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2,4h16c1.1,0,2,0.9,2,2v8c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V6C0,4.9,0.9,4,2,4z M10,10.5L18,5H2L10,10.5z'/%3E%3C/svg%3E");
}

#commentform .comment-form-field-input-url::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M16.9,6h-3c-0.3-1.4-0.8-2.6-1.4-3.6C14.4,3.1,15.9,4.3,16.9,6z M10,2c0.8,1.1,1.5,2.4,1.9,4H8.1C8.5,4.4,9.2,3.1,10,2z M2.3,12C2.1,11.4,2,10.7,2,10s0.1-1.4,0.3-2h3.4C5.6,8.6,5.5,9.3,5.5,10s0.1,1.4,0.2,2H2.3z M3.1,14h3c0.3,1.4,0.8,2.6,1.4,3.6C5.6,16.9,4.1,15.7,3.1,14z M6.1,6h-3c1-1.7,2.5-2.9,4.4-3.6C6.9,3.4,6.4,4.6,6.1,6z M10,18c-0.8-1.1-1.5-2.4-1.9-4h3.8C11.5,15.6,10.8,16.9,10,18z M12.4,12H7.6C7.5,11.4,7.5,10.7,7.5,10s0.1-1.4,0.2-2h4.7c0.1,0.6,0.2,1.3,0.2,2S12.5,11.4,12.4,12z M12.5,17.6c0.6-1,1.1-2.2,1.4-3.6h3C15.9,15.7,14.4,16.9,12.5,17.6z M14.3,12c0.1-0.6,0.2-1.3,0.2-2s-0.1-1.4-0.2-2h3.4c0.2,0.6,0.3,1.3,0.3,2s-0.1,1.4-0.3,2H14.3z'/%3E%3C/svg%3E");
}

/* WordPress prints this automatically instead of the Name/Email/URL
   fields once a user is logged in — real site visitors (not signed
   into wp-admin) will always see the full form above. */
.logged-in-as {
	padding: 10px 14px;
	background: #eef2f0;
	border-radius: 8px;
	font-size: 13px;
	color: #4c5361;
}

.logged-in-as a {
	color: #0056b3;
	font-weight: 600;
}

/* -----------------------------------------------------------------
   Accessibility: visible keyboard-focus outline site-wide
------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid #2f5d5a;
	outline-offset: 2px;
}

/* -----------------------------------------------------------------
   Feature: dark/light toggle, next to the header search icon. Icon
   only (no track/pill) — this row is measured by Blocksy's own
   "Flexy" overflow system, which collapses nav items into a "More"
   dropdown once it runs out of width, and a wider control was
   tipping that measurement over the edge (same class of issue this
   nav already had earlier in the session). A single small icon adds
   the least possible width.

   Correction: the header's background used to be assumed fixed-dark
   in every mode — it wasn't; see the html[data-theme] #header rules
   further down, which now make it genuinely follow the toggle. Since
   the header background is now reliable in both modes, this button no
   longer needs its own always-present backdrop chip as an insurance
   policy — that chip is exactly the gray "shade" that was reported
   sitting behind the icon on a light header. It now matches the other
   header icon buttons (search, bookmark, socials): transparent at
   rest, a subtle tinted background only on hover.
------------------------------------------------------------------ */
#ttz-theme-toggle,
#ttz-theme-toggle-mobile {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 26px !important;
	height: 26px !important;
	padding: 0;
	margin-left: 2px;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background 0.15s ease;
}

#ttz-theme-toggle:hover,
#ttz-theme-toggle-mobile:hover {
	background: rgba(0, 86, 179, 0.14);
}

/* The mobile off-canvas menu's social row already has its own icon
   spacing/sizing (30px circles) — matching that instead of the
   desktop header's tighter 26px keeps this toggle from looking like
   an afterthought squeezed in among the other icons. */
#ttz-theme-toggle-mobile {
	width: 30px !important;
	height: 30px !important;
}

/* The off-canvas panel itself is dark (confirmed live: background
   #14171c), and its nav links correctly render white text — but
   Blocksy's social-icon widget keeps its own hardcoded dark default
   color regardless, rendering near-black icons on that same dark
   background. The nav links prove white reads fine here; matching
   that for the icons and their text labels. */
#offcanvas .ct-social-box svg {
	fill: #ffffff !important;
}

#offcanvas .ct-social-box .ct-label {
	color: #ffffff !important;
}

.ttz-toggle-icon {
	width: 15px;
	height: 15px;
	transition: fill 0.15s ease;
}

.ttz-toggle-icon-sun {
	fill: #f5a623;
}

.ttz-toggle-icon-moon {
	display: none;
	fill: #ffffff;
}

html[data-theme="dark"] .ttz-toggle-icon-sun {
	display: none;
}

html[data-theme="dark"] .ttz-toggle-icon-moon {
	display: block;
}

html[data-theme="dark"] #ttz-theme-toggle:hover,
html[data-theme="dark"] #ttz-theme-toggle-mobile:hover {
	background: rgba(110, 168, 255, 0.16);
}

/* Force the sticky/shrunk header state to stay dark too — it cross-
   fades its own background via a CSS custom property this child
   theme doesn't control, which otherwise reverts to a light color on
   scroll regardless of the toggle's state. */
html[data-theme="dark"] [data-sticky] {
	background: #14171c !important;
}

/* Correction to the assumption above ("the header is already a dark
   navbar in every mode") — that was wrong; the header's real
   background is a fixed Customizer color that never reacted to this
   toggle at all, light or dark. That's why the saved-articles
   bookmark icon (styled white, assuming an always-dark backdrop)
   disappeared on a light header, and why toggling to dark mode never
   visibly changed the header. This makes the header's own background
   and its icons/nav-link text explicitly follow the toggle instead of
   guessing at a fixed Customizer value. */
/* #header itself paints nothing visible — Blocksy renders the actual
   header bar background on anonymous, inline-styled <div> wrappers
   nested two/three levels inside it (confirmed live: the real painted
   layer sits at header > div > div[data-row] and header > div >
   .ct-sticky-container > div > div, each with its own inline
   background-color, no class to target). Overriding #header alone
   left those inner divs' inline styles fully in control. Forcing
   every div inside #header solves it in one rule — nothing else in
   the header is a bare <div> with its own intentional background
   worth preserving (menu pills and the sub-menu dropdown are
   <a>/<ul> elements, untouched by this). */
html[data-theme="light"] #header,
html[data-theme="light"] #header div,
html[data-theme="light"] [data-sticky] {
	background-color: #ffffff !important;
}

html[data-theme="dark"] #header,
html[data-theme="dark"] #header div {
	background-color: #14171c !important;
}

/* #menu-main-menu-1 (the off-canvas mobile menu, confirmed live: it
   lives inside #offcanvas, not #header) is deliberately excluded from
   the light-mode rule below — that panel is always dark regardless of
   the toggle (see the #offcanvas rules elsewhere), so forcing dark
   text on it in light mode made its nav items unreadable. It's
   included in the dark-mode rule since white-on-dark is correct for
   both cases there. */
html[data-theme="light"] #header #menu-main-menu .ct-menu-link {
	color: #1b2028;
}

html[data-theme="dark"] #menu-main-menu .ct-menu-link,
html[data-theme="dark"] #menu-main-menu-1 .ct-menu-link {
	color: #f2f3f5;
}

#offcanvas #menu-main-menu-1 .ct-menu-link {
	color: #ffffff;
}

html[data-theme="light"] #header .ct-header-search svg,
html[data-theme="light"] #header .ct-header-trigger svg,
html[data-theme="light"] #ttz-saved-toggle svg {
	fill: #1b2028;
}

html[data-theme="dark"] #header .ct-header-search svg,
html[data-theme="dark"] #header .ct-header-trigger svg,
html[data-theme="dark"] #ttz-saved-toggle svg {
	fill: #f2f3f5;
}

/* The "Search" label and the social-icon labels/icons share the same
   .ct-label class and a fixed dark default color/fill that never
   reacted to the toggle — same root cause as the header background
   fix above, just on different elements. This was invisible in dark
   mode (dark-on-dark) until now. */
html[data-theme="light"] #header .ct-label,
html[data-theme="light"] #header .ct-header-socials .ct-social-box a {
	color: #1b2028;
}

html[data-theme="light"] #header .ct-header-socials .ct-social-box svg {
	fill: #1b2028;
}

html[data-theme="dark"] #header .ct-label,
html[data-theme="dark"] #header .ct-header-socials .ct-social-box a {
	color: #f2f3f5;
}

html[data-theme="dark"] #header .ct-header-socials .ct-social-box svg {
	fill: #f2f3f5;
}

html[data-theme="dark"] .ct-header-socials {
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Paired with the click handler in functions.php: suppresses every
   transition site-wide for the two frames around a theme switch, so
   dozens of independently-transitioning cards/buttons don't paint a
   blended gray frame while their colors interpolate between the two
   themes' palettes. */
html.ttz-theme-switching,
html.ttz-theme-switching * {
	transition: none !important;
}

/* A little extra breathing room reclaimed for the nav row this icon
   now sits in, on top of the earlier padding reduction. */
#menu-main-menu .ct-menu-link,
#menu-main-menu-1 .ct-menu-link {
	padding: 5px 8px;
}

/* -----------------------------------------------------------------
   Feature: dark mode for the rest of the site.

   Blocksy's own color system turned out to be a patchwork of scoped
   CSS custom properties rather than one clean :root definition —
   --theme-text-color and --theme-heading-color each carry several
   different values depending on context (confirmed by inspecting its
   generated global.css), so redefining those variables once wouldn't
   reliably cascade to every element. This overrides each surface
   directly instead: more rules, but nothing silently depends on a
   variable scope that might not apply where expected.

   The header, footer, news ticker, search modal, author box, code
   blocks and meta pills were all already built dark earlier this
   session — they need no changes here and aren't repeated.
------------------------------------------------------------------ */
/* Blocksy's own "boxed layout" border on body (confirmed live: 4px on
   right/bottom/left, color rgb(15,23,42)) is a fixed near-black that
   never reacted to this toggle — invisible in dark mode since it's
   almost the same shade as this dark body background right next to
   it. Light mode is untouched (already "looking nice" per feedback);
   only the dark-mode color needs a lighter, visible tone. */
html[data-theme="dark"] body {
	background: #14171c;
	color: #dcdfe4;
	border-color: #2b313b;
}

html[data-theme="dark"] #main {
	background: transparent;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .entry-title a,
html[data-theme="dark"] .related-entry-title a {
	color: #f2f3f5 !important;
}

html[data-theme="dark"] .entry-content a {
	color: #6ea8ff;
}

/* Post cards and sidebar widgets both use a translucent white "glass"
   overlay on top of the page background (confirmed via computed
   styles: background-color has an alpha channel, not solid white) —
   inverting to a translucent black keeps that same frosted-glass look
   instead of just going flat, which a plain solid swap would do. */
html[data-theme="dark"] .entry-card,
html[data-theme="dark"] #sidebar .ct-widget,
html[data-theme="dark"] .glass-widget-custom {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .entry-card .ct-meta-element-date,
html[data-theme="dark"] .entry-card .ct-meta-element-author {
	color: #9aa0aa !important;
}

/* Comment-count pill (icon + number) on the blog-listing entry-card
   meta row — same fixed near-black color/fill as the other meta items
   above, just missed the first time since it wasn't obviously
   "invisible" until checked specifically in dark mode. */
html[data-theme="dark"] .entry-card .meta-comments,
html[data-theme="dark"] .entry-card .meta-comments svg {
	color: #9aa0aa !important;
	fill: #9aa0aa !important;
}

/* This site already carries its own inline CSS (Customizer Additional
   CSS / a code-snippets plugin — not any file in this theme) that
   hardcodes the glassmorphism card/sidebar look with selectors like
   [data-prefix="blog"] .entry-card and a long .ct-sidebar/.widget
   selector list, all at higher specificity than the rules above (and
   all !important). The card title, excerpt and meta text were
   otherwise landing dark-on-dark or invisible. Matching those exact
   selectors (with html[data-theme="dark"] prefixed on) is the only
   way to reliably out-specify them rather than guessing at !important
   escalation. */
html[data-theme="dark"] [data-prefix="blog"] .entry-card,
html[data-theme="dark"] [data-cards="boxed"] .entry-card {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] [data-prefix="blog"] .entry-card:hover,
html[data-theme="dark"] [data-cards="boxed"] .entry-card:hover {
	background: rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] [data-prefix="blog"] .entry-card .entry-title,
html[data-theme="dark"] [data-cards="boxed"] .entry-card .entry-title,
html[data-theme="dark"] [data-prefix="blog"] .entry-card .entry-title a,
html[data-theme="dark"] [data-cards="boxed"] .entry-card .entry-title a {
	color: #f2f3f5 !important;
}

html[data-theme="dark"] [data-prefix="blog"] .entry-card .entry-excerpt,
html[data-theme="dark"] [data-cards="boxed"] .entry-card .entry-excerpt {
	color: #b6bcc6 !important;
}

html[data-theme="dark"] [data-prefix="blog"] .entry-card .entry-meta,
html[data-theme="dark"] [data-cards="boxed"] .entry-card .entry-meta {
	color: #9aa0aa !important;
	border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] [data-prefix="blog"] .entry-card .entry-meta a,
html[data-theme="dark"] [data-cards="boxed"] .entry-card .entry-meta a {
	color: #b6bcc6 !important;
}

/* Same specificity fight as the light-mode fix near the top of this
   file, just with html[data-theme="dark"] prefixed on both sides —
   the category/tag pill needs to stay white regardless of theme, not
   fall back to this muted gray meant for plain meta text links. */
html[data-theme="dark"] [data-prefix="blog"] .entry-card .entry-meta a[rel="tag"][class*="ct-term-"],
html[data-theme="dark"] [data-cards="boxed"] .entry-card .entry-meta a[rel="tag"][class*="ct-term-"] {
	color: #ffffff !important;
}

html[data-theme="dark"] #secondary.ct-sidebar .widget,
html[data-theme="dark"] body .ct-sidebar .widget,
html[data-theme="dark"] body #secondary .widget,
html[data-theme="dark"] .ct-sidebar .ct-widget,
html[data-theme="dark"] .ct-sidebar .widget,
html[data-theme="dark"] [data-sidebar] .widget,
html[data-theme="dark"] [data-sidebar] .ct-widget {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Blocksy's own light-mode widget border is too faint against a white
   page to read as a card edge — strengthened to match the same
   visible-border tone now used on every other glass card. */
html[data-theme="light"] #secondary.ct-sidebar .widget,
html[data-theme="light"] body .ct-sidebar .widget,
html[data-theme="light"] body #secondary .widget,
html[data-theme="light"] .ct-sidebar .ct-widget,
html[data-theme="light"] .ct-sidebar .widget,
html[data-theme="light"] [data-sidebar] .widget,
html[data-theme="light"] [data-sidebar] .ct-widget {
	border-color: rgba(175, 181, 190, 0.8) !important;
}

/* Some sidebar widgets (e.g. a "Recent Posts"-style widget with a
   Customizer-configured title, not present on this local install —
   couldn't be reproduced/verified here, only from a live screenshot)
   render their .widget-title on a solid, hardcoded light-gray box
   that doesn't react to the toggle, leaving an odd mismatched panel
   sitting inside an otherwise transparent dark sidebar card. Forcing
   it transparent in dark mode matches how every other widget title
   already behaves. */
html[data-theme="dark"] .ct-sidebar .widget-title,
html[data-theme="dark"] .ct-sidebar .widget > h2,
html[data-theme="dark"] .ct-sidebar .widget > h3,
html[data-theme="dark"] .ct-sidebar .widget > h4,
html[data-theme="dark"] [data-sidebar] .widget-title,
html[data-theme="dark"] [data-sidebar] .widget > h2,
html[data-theme="dark"] [data-sidebar] .widget > h3,
html[data-theme="dark"] [data-sidebar] .widget > h4 {
	background: transparent !important;
}

/* Same story, different property: a per-item box-shadow inside a
   sidebar list widget (e.g. a "Recent Posts"-style list) that reads
   as a subtle shadow against a white card turns into a stark black
   block against the now-dark card — confirmed to be a block-editor
   widget (built in Appearance > Widgets, not a template file this
   theme controls), but still not reproducible on this dev install
   since that specific widget isn't configured here. Broadened past
   the first attempt (li/article only) to also cover plain block
   wrappers (a Group block left in its default div, or one with the
   core "Shadow" style applied) and any shadow set via inline style,
   which is how the block editor sometimes applies it. */
html[data-theme="dark"] .ct-sidebar .widget li,
html[data-theme="dark"] .ct-sidebar .widget article,
html[data-theme="dark"] .ct-sidebar .widget div,
html[data-theme="dark"] .ct-sidebar .widget .has-shadow,
html[data-theme="dark"] .ct-sidebar .widget [style*="box-shadow"],
html[data-theme="dark"] [data-sidebar] .widget li,
html[data-theme="dark"] [data-sidebar] .widget article,
html[data-theme="dark"] [data-sidebar] .widget div,
html[data-theme="dark"] [data-sidebar] .widget .has-shadow,
html[data-theme="dark"] [data-sidebar] .widget [style*="box-shadow"] {
	box-shadow: none !important;
}

/* The visible light box behind a page header — a single post's
   title/meta/featured image, the author-archive name/bio block, or
   a category/tag archive's title+breadcrumb block — comes from
   Blocksy's own .hero-section wrapper, not #main or .entry-card
   (confirmed via computed styles: all of these templates share this
   same class). It previously read as a flat, slightly-mismatched
   gray box (a plain solid color, one shade off from the surrounding
   page background) — a glass panel with the same gradient accent bar
   used elsewhere ties it into the rest of the redesign instead. */
/* padding-top guarantees clearance from the ::before gradient bar
   below — confirmed live: .hero-section, .entry-header and
   .ct-breadcrumbs all have 0 padding-top of their own, so on an
   archive whose title happens to not be rendered (a Customizer/
   category setting, not something CSS controls — the H1 is entirely
   absent from the page's HTML, not just hidden), the breadcrumb sat
   with zero clearance, flush against the bar. */
.hero-section {
	position: relative;
	overflow: hidden;
	padding-top: 24px;
	border-radius: 16px;
}

/* Thinner than the flat 4px block it replaced, with a soft glow
   underneath and the same slow drift used on the comment form's
   accent bar. Full width edge-to-edge (an earlier inset "light beam"
   version left visible gaps at both ends of the card, which read as
   an incomplete/broken bar rather than a deliberate design). */
.hero-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #7c4fe0, #0056b3, #3ddbd9, #7c4fe0, #0056b3, #3ddbd9);
	background-size: 300% 100%;
	box-shadow: 0 0 10px rgba(0, 86, 179, 0.4);
	animation: ttz-border-flow 8s linear infinite;
}

/* Corrected: the "pale mint, not pure white" tone this rule used to
   match was itself the bug, not the site's real tone — confirmed by
   comparing computed body background on the homepage (#ffffff, no
   body.single class) against a single post (Blocksy's own
   body.single default, a pale mint rgb(230,240,238) the homepage
   never uses). Both this hero-section glass and the body override
   two rules down now use white, matching the homepage the user
   pointed at as the correct reference. */
html[data-theme="light"] .hero-section {
	background: rgba(255, 255, 255, 0.5) !important;
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(175, 181, 190, 0.8);
}

html[data-theme="light"] body.single {
	background: #ffffff !important;
}

article.hentry {
	background: transparent !important;
}

html[data-theme="dark"] .hero-section {
	background: rgba(26, 31, 38, 0.55) !important;
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(110, 168, 255, 0.16);
}

/* Breadcrumbs ("Home / Category Name") — the current (non-link) crumb
   is a bare <span> with a fixed dark color, never reactive to the
   toggle; invisible against a dark .hero-section in dark mode. */
html[data-theme="light"] .ct-breadcrumbs,
html[data-theme="light"] .ct-breadcrumbs span {
	color: #1b2028;
}

html[data-theme="dark"] .ct-breadcrumbs,
html[data-theme="dark"] .ct-breadcrumbs span {
	color: #d5d9df;
}

/* This is the actual bug behind "post content invisible after dark
   mode": .hero-section only wraps the title/meta/image block — the
   rest of the article (.entry-content, holding every paragraph/list/
   heading in the post) is a SIBLING of .hero-section, both inside the
   same <article>, and it's the <article> element itself that paints
   this same light background — confirmed by walking the DOM chain
   from a live paragraph on a real post. Body text was already flipped
   light by the site-wide body-color override, which is exactly why it
   went invisible: light text on a background that was still light. */
html[data-theme="dark"] article.hentry {
	background: transparent !important;
}

/* "Stay Updated" newsletter widget: a third-party block, not built
   this session, that hardcodes a solid white card and a light pill
   around its email input. Both need explicit dark variants — its own
   heading already picks up the h3 override above, which would
   otherwise go invisible against the white it was designed for. */
html[data-theme="dark"] .subscription-box {
	background: #1a1f26 !important;
}

html[data-theme="dark"] .input-wrapper {
	background: #262b33 !important;
}

html[data-theme="dark"] .form-container input {
	color: #dcdfe4 !important;
}

/* Blocksy's own post-header subtitle ("page description") — a plain,
   classless <p> with a hardcoded dark color, so it doesn't inherit
   the body override above. */
html[data-theme="dark"] .page-description {
	color: #c1c5cc;
}

/* -----------------------------------------------------------------
   Dark-mode variants of this session's own light-colored components
------------------------------------------------------------------ */
html[data-theme="dark"] .entry-tags .ct-module-title {
	color: #9aa0aa;
}

html[data-theme="dark"] .entry-tags-items a {
	background: #1e232b;
	border-color: #2b313b;
	color: #dcdfe4;
}

html[data-theme="dark"] .ct-related-posts-container {
	--theme-heading-color: #f2f3f5;
	background: #1a1f26 !important;
}

html[data-theme="dark"] .ct-related-posts-container .ct-module-title,
html[data-theme="dark"] .ct-related-posts-container .related-entry-title a {
	color: #f2f3f5 !important;
}

html[data-theme="dark"] .ct-related-posts-container article > div {
	background: #20262f !important;
	border-color: #2b313b;
}

html[data-theme="dark"] .ct-related-posts-container .ct-meta-element-date {
	color: #9aa0aa !important;
}

html[data-theme="dark"] .comment-respond {
	background:
		radial-gradient(circle at 1px 1px, rgba(110, 168, 255, 0.1) 1px, transparent 0) 0 0 / 18px 18px,
		rgba(26, 31, 38, 0.55);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border-color: rgba(110, 168, 255, 0.16);
}

html[data-theme="dark"] .ttz-comment-title-text {
	color: #f2f3f5;
}

html[data-theme="dark"] .comment-notes {
	color: #9aa0aa;
}

html[data-theme="dark"] .ttz-comment-qna {
	background:
		radial-gradient(circle at 1px 1px, rgba(110, 168, 255, 0.1) 1px, transparent 0) 0 0 / 18px 18px,
		rgba(26, 31, 38, 0.55);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border-color: rgba(110, 168, 255, 0.16);
}

html[data-theme="dark"] .comment-form-question-toggle label {
	color: #9aa0aa;
}

html[data-theme="dark"] .ttz-is-question .ct-comment-inner {
	background: linear-gradient(180deg, #1c2740 0%, #1a1f26 70px);
}

html[data-theme="dark"] .ttz-is-question:not(:has(> .children)) .ct-comment-content::after {
	background: rgba(110, 168, 255, 0.14);
	color: #6ea8ff;
}

html[data-theme="dark"] .ttz-upvote-btn {
	border-color: #2b313b;
	color: #9aa0aa;
}

html[data-theme="dark"] .ttz-upvote-btn:hover {
	border-color: #6ea8ff;
	color: #6ea8ff;
}

html[data-theme="dark"] #commentform input[type="text"],
html[data-theme="dark"] #commentform textarea {
	background: #14171c;
	border-color: #2b313b;
	color: #dcdfe4;
}

html[data-theme="dark"] #commentform .comment-form-cookies-consent label,
html[data-theme="dark"] #commentform .gdpr-confirm-policy label {
	color: #9aa0aa;
}

/* Field labels ("Name", "Email", "Website", "Add Comment") — a plain
   hardcoded dark gray with no dark-mode awareness, otherwise
   invisible against the dark card. */
html[data-theme="dark"] #commentform label {
	color: #c1c5cc;
}

html[data-theme="dark"] .logged-in-as {
	background: #1e232b;
	color: #9aa0aa;
}

/* -----------------------------------------------------------------
   Feature: glass-card treatment for the main post-grid cards (the
   entry-card article on the homepage/archive/category grids), to
   match the same translucent-blur language now used everywhere else
   in this redesign (sidebar widgets, comment cards, newsletter card).
------------------------------------------------------------------ */
.entry-card {
	background: rgba(255, 255, 255, 0.5) !important;
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(175, 181, 190, 0.8);
	border-radius: 16px !important;
	overflow: hidden;
}

html[data-theme="dark"] .entry-card {
	background: rgba(26, 31, 38, 0.55) !important;
	border-color: rgba(110, 168, 255, 0.14);
}

/* -----------------------------------------------------------------
   Feature: glass-card treatment for Blocksy's own built-in "Trending
   Now" carousel (.ct-trending-block, appears above the footer on
   single posts) — previously bare, unstyled thumbnail+title stacks
   with no card surface at all.
------------------------------------------------------------------ */
.ct-trending-block-item {
	padding: 12px;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(175, 181, 190, 0.8);
	border-radius: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ct-trending-block-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(0, 86, 179, 0.3);
}

/* Blocksy crops this thumbnail into a 60px circle by default — fine
   for a plain photo, but these thumbnails have their own title text
   baked into the image itself, and a circular crop was slicing that
   text off awkwardly. A rounded square keeps far more of the actual
   image (and its text) visible. */
.ct-trending-block-item .ct-media-container {
	flex-shrink: 0;
	width: 80px !important;
	height: 80px !important;
	border-radius: 10px !important;
	overflow: hidden;
}

.ct-trending-block-item .ct-media-container img {
	width: 100%;
	height: 100%;
	border-radius: 10px !important;
	object-fit: cover;
}

html[data-theme="dark"] .ct-trending-block-item {
	background: rgba(26, 31, 38, 0.55);
	border-color: rgba(110, 168, 255, 0.14);
}

html[data-theme="dark"] .ttz-share-bar {
	background: rgba(26, 31, 38, 0.55);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border-color: rgba(110, 168, 255, 0.14);
}

html[data-theme="dark"] .ttz-share-label {
	color: #9aa0aa;
}

html[data-theme="dark"] .ttz-share-btn {
	background: #1e232b;
}

html[data-theme="dark"] .ttz-share-btn svg {
	fill: #dcdfe4;
}

html[data-theme="dark"] .ttz-saved-panel-content {
	background: #14171c;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .ttz-saved-panel-header {
	border-bottom-color: #2b313b;
}

html[data-theme="dark"] .ttz-saved-panel-close {
	background: #1e232b;
}

html[data-theme="dark"] .ttz-saved-panel-close svg {
	fill: #dcdfe4;
}

html[data-theme="dark"] .ttz-saved-empty {
	color: #9aa0aa;
}

html[data-theme="dark"] .ttz-saved-item {
	border-bottom-color: #262b33;
}

html[data-theme="dark"] .ttz-saved-item-title {
	color: #f2f3f5;
}

html[data-theme="dark"] .ttz-saved-item-title:hover {
	color: #6ea8ff;
}

html[data-theme="dark"] .ttz-saved-item-remove {
	color: #9aa0aa;
}

html[data-theme="dark"] .ttz-saved-item-remove:hover {
	background: #262b33;
	color: #ff8a80;
}

html[data-theme="dark"] .ct-comment-inner {
	background: rgba(26, 31, 38, 0.55);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border-color: rgba(110, 168, 255, 0.14);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .ct-comment-inner::after {
	color: rgba(110, 168, 255, 0.09);
}

html[data-theme="dark"] .ct-author-comment .ct-comment-inner {
	background: linear-gradient(180deg, #22203a 0%, #1a1f26 90px);
}

html[data-theme="dark"] .ttz-inline-related,
html[data-theme="dark"] .ttz-helpful {
	background: #1e232b;
}

html[data-theme="dark"] .ttz-inline-related-label {
	color: #9aa0aa;
}

html[data-theme="dark"] .ttz-inline-related-title,
html[data-theme="dark"] .ttz-helpful-question {
	color: #f2f3f5;
}

html[data-theme="dark"] .ttz-helpful-btn {
	background: #262b33;
	border-color: #363c46;
	color: #dcdfe4;
}

html[data-theme="dark"] .ttz-helpful.is-voted .ttz-helpful-btn:hover {
	border-color: #363c46;
}

html[data-theme="dark"] .ttz-helpful-thanks {
	color: #6ea8ff;
}

html[data-theme="dark"] .ct-comment-author cite {
	color: #f2f3f5;
}

html[data-theme="dark"] .ct-comment-meta-data {
	color: #9aa0aa;
}

html[data-theme="dark"] .ct-comment-content p {
	color: #c1c5cc;
}

/* WordPress's own "Your comment is awaiting moderation." notice — a
   plain <em>, sibling of the comment text rather than wrapped in a
   <p>, so it fell outside the rule above and kept its hardcoded dark
   color, going invisible against the dark card. */
html[data-theme="dark"] .ct-awaiting-moderation {
	color: #c1c5cc;
}

html[data-theme="dark"] .entry-content :not(pre) > code {
	background: #262b33;
	color: #ff8a80;
}

html[data-theme="dark"] .entry-content table th,
html[data-theme="dark"] .entry-content table td {
	border-color: #2b313b;
}

html[data-theme="dark"] .entry-content table th {
	background: #1e232b;
}

html[data-theme="dark"] #menu-main-menu .sub-menu,
html[data-theme="dark"] #menu-main-menu-1 .sub-menu {
	background: #1a1f26;
	border-color: #2b313b;
}

html[data-theme="dark"] #menu-main-menu .sub-menu .ct-menu-link,
html[data-theme="dark"] #menu-main-menu-1 .sub-menu .ct-menu-link {
	color: #dcdfe4;
}

/* Solid blue fill instead of the light-mode's pale-gray-pill/blue-text
   combo — that combo depended on contrast against a light page, and
   against this already-dark navbar it read as a blurry, low-contrast
   smudge. Matching the hover-state treatment (solid blue, white text)
   keeps it crisp regardless of theme. */
html[data-theme="dark"] #menu-main-menu .current-menu-item > .ct-menu-link,
html[data-theme="dark"] #menu-main-menu-1 .current-menu-item > .ct-menu-link,
html[data-theme="dark"] #menu-main-menu .current-menu-parent > .ct-menu-link,
html[data-theme="dark"] #menu-main-menu-1 .current-menu-parent > .ct-menu-link {
	background: #0056b3;
	color: #ffffff !important;
}

/* -----------------------------------------------------------------
   Dark mode, round two: fixes for elements the first pass missed —
   pagination, "Easy Table of Contents" (a plugin, not this theme),
   post prev/next navigation, and the drop-cap gradient.
------------------------------------------------------------------ */

/* Blog-index pagination ("1 2 3 4 Next") — Blocksy sets the link
   color through a chain of CSS custom properties
   (--theme-link-initial-color: var(--theme-text-color)) rather than a
   literal color, which left it stuck at its light-mode value. Setting
   color directly sidesteps the variable chain entirely. */
/* Sat right on top of the "Trending Now" block below it (the pill row
   even has a small negative margin-bottom of its own) — real breathing
   room between the two sections instead. */
.ct-pagination {
	margin-bottom: 32px;
}

html[data-theme="dark"] .page-numbers,
html[data-theme="dark"] .page-numbers a {
	color: #dcdfe4 !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .page-numbers.current {
	color: #ffffff !important;
}

/* "Easy Table of Contents" plugin box — entirely its own stylesheet
   and colors, unrelated to this theme, hardcoding a near-white card. */
html[data-theme="dark"] #ez-toc-container {
	background: #1a1f26 !important;
	border-color: #2b313b !important;
}

html[data-theme="dark"] #ez-toc-container .ez-toc-title,
html[data-theme="dark"] #ez-toc-container a,
html[data-theme="dark"] #ez-toc-container a.ez-toc-toggle {
	color: #dcdfe4 !important;
}

html[data-theme="dark"] #ez-toc-container a:visited {
	color: #9aa0aa !important;
}

/* Previous/Next post links at the bottom of an article — hardcoded
   dark gray label/title text. */
html[data-theme="dark"] .nav-item-prev,
html[data-theme="dark"] .nav-item-next,
html[data-theme="dark"] .post-navigation .item-label,
html[data-theme="dark"] .post-navigation .item-title {
	color: #dcdfe4 !important;
}

/* Author archive header: "Articles: N" count next to the join date */
html[data-theme="dark"] .meta-articles {
	color: #dcdfe4 !important;
}

/* Blocksy Companion's "Trending" block (its own extension, separate
   stylesheet) hardcodes a near-white card background AND its actual
   title link (.ct-post-title) has its own explicit dark color — not
   inherited, so the earlier body-color override never reached it —
   leaving the titles all but invisible: dark text on a dark card. */
html[data-theme="dark"] .ct-trending-block {
	background: #1a1f26 !important;
}

html[data-theme="dark"] .ct-trending-block .ct-post-title {
	color: #f2f3f5 !important;
}

/* Sidebar "Recent Articles" — same site-wide inline CSS block found
   earlier (Customizer Additional CSS / a code-snippets plugin, not
   any theme file) hardcodes this widget with a 3-class-chained
   selector (.has-dates.glass-widget-custom.wp-block-latest-posts),
   which out-specifies the generic .glass-widget-custom / post-date
   overrides above. Matching its exact selector chain is the only way
   to reliably win: the widget title (generated via ::before content,
   not real text), the post titles, their hover color, the hover
   row-tint (previously 4% opacity blue — read as a colorless "blur"
   against a dark card, not a visible highlight), and the date/time
   pill all needed their own dark variants. */
html[data-theme="dark"] .has-dates.glass-widget-custom.wp-block-latest-posts {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .has-dates.glass-widget-custom.wp-block-latest-posts::before {
	color: #f2f3f5 !important;
	border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .has-dates.glass-widget-custom.wp-block-latest-posts li {
	border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .has-dates.glass-widget-custom.wp-block-latest-posts li:hover {
	background: rgba(110, 168, 255, 0.14) !important;
}

html[data-theme="dark"] .has-dates.glass-widget-custom.wp-block-latest-posts a.wp-block-latest-posts__post-title {
	color: #f2f3f5 !important;
}

html[data-theme="dark"] .has-dates.glass-widget-custom.wp-block-latest-posts a.wp-block-latest-posts__post-title:hover {
	color: #6ea8ff !important;
}

html[data-theme="dark"] .has-dates.glass-widget-custom.wp-block-latest-posts time {
	color: #b6bcc6 !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Drop-cap gradient: the blue/dark-teal/light-teal mix was tuned for
   contrast against a white page. Dark teal in particular sits close
   in luminance to the dark-mode page background, so the letter read
   as a flat, muddy shape instead of a crisp accent — swapping in the
   brighter purple/blue/cyan brand gradient already proven to read
   well on dark (it's the same one used for the progress bar). */
html[data-theme="dark"] .ttz-dropcap::first-letter {
	color: #7c4fe0;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	html[data-theme="dark"] .ttz-dropcap::first-letter {
		background: linear-gradient(135deg, #7c4fe0, #0056b3, #3ddbd9);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

/* -----------------------------------------------------------------
   Fix: related-post cards were different heights when titles wrapped
   to different numbers of lines — the grid stretches each card's
   outer box to match its row, but nothing forced the title itself to
   a consistent height, so a 1-line title left a shorter card next to
   a 3-line one. Clamping the title (same technique already used for
   the homepage/archive cards) and making the card body a column flex
   so the meta row always sits at the bottom fixes both the height
   mismatch and any uneven internal spacing.
------------------------------------------------------------------ */
.ct-related-posts-container article > div {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* max-height was redundant with -webkit-line-clamp (which already
   constrains to 2 lines and adds its own ellipsis) and calculated
   just tight enough to clip the bottom of the second line on some
   titles — line-clamp alone handles the truncation correctly without
   it. min-height stays, so cards in the same row still end up equal
   height regardless of how many lines a given title needs. */
.ct-related-posts-container .related-entry-title {
	min-height: 42px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ct-related-posts-container .entry-meta {
	margin-top: auto;
}

/* -----------------------------------------------------------------
   Feature: comment section redesign — avatars, a cleaner hierarchy,
   and hover feedback so approved comments read as a proper
   conversation thread rather than a plain stacked list.

   Real markup (from Blocksy's own comments.php, not this theme):
   <article class="ct-comment-inner">
     <footer class="ct-comment-meta"><figure>avatar</figure><h4 class="ct-comment-author">...<div class="ct-comment-meta-data">
     <div class="ct-comment-content">...
   — meta is a horizontal header row, content sits below it as a
   separate block (not a left-avatar/right-text side-by-side layout).
------------------------------------------------------------------ */
/* Hover glow/lift is defined once, in the futuristic-redesign block
   above (near the top of this file) — not duplicated here. */

/* Hidden, not removed from the DOM — functions.php always injects the
   initial-letter fallback in front of it via JS (this site's default
   avatar setting turned out to be the site owner's own photo, so
   every commenter without their own Gravatar was showing up as the
   admin; showing an initial for everyone is simpler and consistent
   than trying to detect "real avatar vs. site default"). */
.ct-comment-meta figure {
	display: none;
}

.ct-comment-meta-data .comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ct-comment-meta-data .comment-reply-link::before {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.7,10.6L11.2,4v4C4.8,8.7,2,13.4,1,18c2.9-3.9,6.5-5.7,10.2-5.7v4L17.7,10.6z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.7,10.6L11.2,4v4C4.8,8.7,2,13.4,1,18c2.9-3.9,6.5-5.7,10.2-5.7v4L17.7,10.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Threaded replies get a visual indent + connecting rule so nesting
   is obvious at a glance rather than just relying on margin. */
.ct-comment-list .children {
	list-style: none;
	margin: 14px 0 0;
	padding: 0 0 0 24px;
	border-left: 2px solid #dfe1db;
}

.ct-comment-list .children > li {
	margin-top: 14px;
}

html[data-theme="dark"] .ct-comment-list .children {
	border-left-color: #2b313b;
}