/* ==========================================================================
   Genfinity.io — Additional CSS (Customizer)
   Paste into: WP admin → Appearance → Customize → Additional CSS

   This file is intentionally minimal. The bulk of dark-mode styling lives in
   the child theme's dark-mode.css (Newspaper-child/dark-mode.css). Only
   tweaks that are brand-specific or that an editor may want to nudge
   without touching theme code belong here.

   Removed from prior version:
     - All search dropdown / form / mega-menu / mobile menu rules
       → moved into dark-mode.css with corrected selectors.
     - `.hero h1`, `.filter-pill.active`, `.search-wrap`, `wp-block-post*`,
       `.tdb-header-mega-menu`, `.block-mega-child-cats`, `.mega-menu-sub-cat`
       → confirmed dead on the live site (no matching markup in homepage,
         crypto category, or any tagDiv-rendered template). These were
         legacy Dracula plugin selectors for an older Newspaper version.
     - Desktop/mobile `.tdb-logo-img` @media filter variants
       → dark-mode.css now uses `brightness(0) invert(1)` which works
         identically on both viewports. The previous mobile rule
         (`invert(0%) brightness(200%)`) rendered the black logo PNG
         invisible against the dark mobile header — known bug, fixed.
   ========================================================================== */


/* ---- Section A — Brand colors -----------------------------------------
   Specific accents Genfinity uses that aren't part of the generic dark
   theme. Keep these here so editors can tweak hue without redeploying
   the theme.
   ---------------------------------------------------------------------- */

/* Brand cyan accent for the active state on filter UI. Keeps the rule
   alive for any future filter-pill component; harmless if no `.filter-pill`
   exists on a given page. */
.filter-pill.active {
	border-color: #3DD6E8 !important;
}

/* Crypto ticker — recolor positive/negative deltas to the brand palette.
   Parent dark-mode.css ships green/red defaults; override to brand cyan +
   editorial red. */
.ccpw-container .changes.up,
.ccpw-container .changes.up * {
	color: #3DD6E8 !important;
}
.ccpw-container .changes.down,
.ccpw-container .changes.down * {
	color: #ff4d6d !important;
}


.tdb-menu-item-text {
	color: black !important;
}

.td-block-title span {
	color: white !important
}

.td-block-title span {
	color: black !important
}

/* ---- Section B — Crypto ticker layout polish ---------------------------
   Layout-only tweaks that pair with the dark-mode.css color overrides.
   ---------------------------------------------------------------------- */

#ccpw-ticker-widget-1999,
#ccpw-ticker-widget-1999 *,
.ccpw-container .name,
.ccpw-container .price {
	color: #ffffff !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;
}

.ccpw_icon img { margin: auto; }
.tickercontainer { margin-top: 1rem; }


/* ---- Section C — Search dropdown size + padding (responsive) ----------
   dark-mode.css owns the colors and the positioning; this section just
   tunes panel WIDTH and padding so the dropdown is comfortable on each
   viewport. We do NOT force position / left / margin / transform here —
   those are deliberately left to the parent theme + tagDiv inline rules
   (which anchor `right: 0` to the search trigger). Forcing them caused
   the modal to render off-anchor and was the source of the "search modal
   not opening" symptom on desktop and mobile.
   ---------------------------------------------------------------------- */

@media (min-width: 768px) {
	.tdb-drop-down-search-inner {
		width: 600px !important;
		max-width: 600px !important;
	}
	.tdb-search-form {
		padding: 20px 24px !important;
	}
}

@media (max-width: 767px) {
	.tdb-drop-down-search-inner {
		width: 92vw !important;
		max-width: 92vw !important;
	}
	.tdb-search-form {
		padding: 14px 16px !important;
	}
	/* iOS: any input < 16px triggers an auto-zoom on focus. Pin to 16px on
	   mobile so the page doesn't jump-zoom when the user taps the search
	   field. */
	.tdb-search-form .tdb-head-search-form-input {
		font-size: 16px !important;
	}
}


/* ---- Section D — Single-post elements (Sharedaddy, Jetpack, tags) ----
   These don't appear on the homepage but may render on individual article
   pages. Defensive overrides ensure dark readability without depending on
   page-by-page audit.
   ---------------------------------------------------------------------- */

/* 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,
#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;
}

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


/* ---- Section E — Embedded third-party widgets -------------------------
   Spotify embed (about page / podcast pages). Spotify ships an opaque
   white-on-light card by default; force the dark surface through.
   ---------------------------------------------------------------------- */

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