/* ==========================================================================
   Genfinity.io — theme Additional CSS
   Paste into: WP admin → Appearance → Customize → Additional CSS
   No plugin dependency. Single source of truth for site customizations.
   ========================================================================== */

.td-block-title span, .tdb-menu-item-text {
	color: white !important;
}

.WidgetBackground__ContentContainer-sc {
	background-color: #131314 !important
}

.ccpw_icon img {
	margin: auto;
}

.tickercontainer {
	margin-top: 1rem;
}


/* ---- Section A — Brand customizations ---------------------------------- */

.filter-pill.active {
	border-color: #3DD6E8 !important;
}

.hero h1 {
	font-family: 'Inter', sans-serif !important;
	font-size: clamp(36px, 6vw, 68px) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.03em !important;
	color: var(--text) !important;
	margin-bottom: 20px !important;
}

.mark {
	background: unset !important;
}

body {
	background-color: unset !important;
}

.td-footer-wrap .tdb-logo-img {
	filter: invert(0%) brightness(200%) !important;
}

.tdb-search-icon svg path {
	filter: brightness(0) invert(1);
}

.tdb-search-icon svg * {
	fill: #ffffff !important;
	stroke: #ffffff !important;
}

/* Elfsight client logo widget ("Notable Guests" section).
   Two problems we have to fix together:
   (1) The widget renders with a white background by default, so without
       any override it shows as a solid white rectangle on the dark page.
   (2) The logos uploaded to Elfsight are white-on-transparent (designed
       for dark page placement), which is why they were filtered to white
       silhouettes pre-Dracula. Without ANY filter the white logos sit
       invisibly on the white widget background.
   Fix: force the widget container transparent so the dark page shows
   through, AND apply brightness(0) invert(1) on the images so they always
   render as white silhouettes regardless of upload color. This restores
   the pre-Dracula behavior. */

.elfsight-app-1f440a2a-e1b8-4d4e-bc42-468ed270d89c,
.elfsight-app-1f440a2a-e1b8-4d4e-bc42-468ed270d89c > *,
.elfsight-app-1f440a2a-e1b8-4d4e-bc42-468ed270d89c [class*="eapps-"] {
	background: transparent !important;
	background-color: transparent !important;
}

.elfsight-app-1f440a2a-e1b8-4d4e-bc42-468ed270d89c img {
	filter: brightness(0) invert(1) !important;
}

.eapps-widget-toolbar,
.eapps-widget-toolbar * {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Crypto ticker (ccpw plugin) — force readable colors + flex alignment.
   Theme default inherits #444 text on dark page, making it unreadable. */

#ccpw-ticker-widget-1999,
#ccpw-ticker-widget-1999 *,
.ccpw-container .name,
.ccpw-container .price {
	color: #ffffff !important;
}

.ccpw-container .changes.up,
.ccpw-container .changes.up * {
	color: #3DD6E8 !important;
}

.ccpw-container .changes.down,
.ccpw-container .changes.down * {
	color: #ff4d6d !important;
}

.ccpw-container .coin-container {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 0 16px !important;
}

.ccpw-container .coin-container .ccpw_icon img {
	display: inline-block !important;
	vertical-align: middle !important;
	width: 22px !important;
	height: 22px !important;
}


/* ---- Section B — Dark-component overrides ------------------------------ */

.tdb-drop-down-search,
.tdb-drop-down-search-inner {
	background-color: #131314 !important;
	border-color: #131314 !important;
}

.tdb-search-form,
.tdb-search-form-inner {
	background-color: #131314 !important;
	border-color: #131314 !important;
}

.tdb-search-form::before {
	background-color: #131314 !important;
	border-color: #131314 !important;
}

.tdb-header-mega-menu,
.block-mega-child-cats,
.block-mega,
.mega-menu-sub-cat,
.mega-menu-sub-cat a {
	background-color: #131314 !important;
}

.tdb-header-mega-menu::before,
.block-mega-child-cats::before,
.mega-menu-sub-cat::before {
	background-color: #131314 !important;
}

.mega-menu-sub-cat a,
.block-mega-child-cats a {
	color: #e5e5e8 !important;
}

.mega-menu-sub-cat a:hover,
.block-mega-child-cats a:hover {
	background-color: #202325 !important;
	color: #ffffff !important;
}


/* ---- Section C — Search dropdown as an anchored popover ---------------- */

/* Restore the Newspaper theme's default popover behavior: the dropdown is
   `position: absolute` anchored to the search-button parent, drops down just
   below the trigger, and is sized to a comfortable width with dark styling.
   We do NOT force position: fixed or width: 100vw — those caused the
   dropdown to anchor off-screen because the parent sits at the far right
   of the header.
   The theme's existing visibility / opacity / translateY transitions
   still apply because we're not touching them. */

.search-wrap {
	margin-right: 3rem;
}

.tdb-drop-down-search {
	background: transparent !important;
	z-index: 100 !important;
}

.tdb-drop-down-search-inner {
	box-sizing: border-box !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.tdb-search-form,
.tdb-search-form-inner {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.tdb-search-form .tdb-head-search-form-input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	color: #ffffff !important;
	background: transparent !important;
	caret-color: #ffffff !important;
}

.tdb-search-form .tdb-head-search-form-input::placeholder {
	color: #b8b8c0 !important;
	opacity: 1 !important;
}

.tdb-search-form .tdb-head-search-placeholder {
	color: #b8b8c0 !important;
}

.tdb-search-form .wpb_button,
.tdb-search-form .td-search-form-btn,
.tdb-search-form button[type="submit"] {
	flex: 0 0 auto !important;
}


/* ---- Section D — @media overrides -------------------------------------- */

@media (min-width: 768px) {
	.tdb-logo-img {
		filter: invert(100%) brightness(200%) !important;
	}

	/* Desktop popover: ~600px wide panel (within the theme's 600px cap).
	   Stays anchored to the right edge of the search-button parent. */
	.tdb-drop-down-search-inner {
		width: 600px !important;
		max-width: 600px !important;
	}

	.tdb-search-form {
		padding: 20px 24px !important;
	}
}

@media (max-width: 767px) {
	.tdb-logo-img {
		filter: invert(0%) brightness(200%) !important;
	}

	/* Mobile popover: ~92vw, prevents off-screen overflow when the parent
	   anchor sits near the right edge. */
	.tdb-drop-down-search-inner {
		width: 92vw !important;
		max-width: 92vw !important;
		margin-right: 4vw !important;
	}

	.tdb-search-form {
		padding: 14px 16px !important;
	}

	.tdb-search-form .tdb-head-search-form-input {
		font-size: 16px !important;
	}
}


/* ---- Section E — Post listing readability ------------------------------ */

/* Recent Updates / Related grids / archive cards. Block default has the
   list item rendering with a white background; that fights the dark page.
   Make the card transparent and force readable text. */

li.wp-block-post {
	background-color: transparent !important;
}

.wp-block-post-title,
.wp-block-post-title a {
	color: #ffffff !important;
}

.wp-block-post-title a:hover {
	color: #3DD6E8 !important;
}

.wp-block-post-date,
.wp-block-post-date time,
li.wp-block-post .has-small-font-size {
	color: #b8b8c0 !important;
}

/* Tag pills under the post body */
.tdb-tags li a {
	color: #e5e5e8 !important;
	border: 1px solid #2a2d31 !important;
	background-color: transparent !important;
}

.tdb-tags li a:hover {
	color: #ffffff !important;
	border-color: #3DD6E8 !important;
}

/* Jetpack Related Posts */
#jp-relatedposts .jp-relatedposts-headline,
#jp-relatedposts .jp-relatedposts-headline em {
	color: #ffffff !important;
}

#jp-relatedposts .jp-relatedposts-post-title a {
	color: #ffffff !important;
}

#jp-relatedposts .jp-relatedposts-post-title a:hover {
	color: #3DD6E8 !important;
}

#jp-relatedposts .jp-relatedposts-post-date,
#jp-relatedposts .jp-relatedposts-post-context {
	color: #b8b8c0 !important;
}

/* "Share this:" + Sharedaddy headings */
.sharedaddy h3,
.sd-title {
	color: #ffffff !important;
}