/* apiscrapy.com — glossary single tweaks (Divi Theme Builder "Glossary All" layout).
 *
 * Scope: applied to single glossary entries ONLY, via two independent guards:
 *   1. this file is enqueued only when is_singular('glossary')  (see functions.php)
 *   2. every rule below is prefixed with body.single-glossary
 * So the blog template (single-post) and everything else are never affected, even
 * though some class names (e.g. .meta-item) are shared across layouts.
 *
 * Per client request, on glossary singles:
 *   - hide the whole post-meta byline (author / reviewer / updated / read-time)
 *   - add a thin separator line below the hero section
 *   - hide the "Related Articles" section
 *   - hide the Table of Contents (keep only the sidebar CTA)
 *   - make the sidebar CTA sticky
 */

/* Post-meta byline (Written by / Reviewed by / Updated / read time) — not used on glossary. */
body.single-glossary .custom-post-meta { display: none !important; }

/* Small brand separator line at the base of the hero. The hero renders on a WHITE background
   here (Theme Builder overrides the dark parent style), so a translucent line was invisible —
   use a thin theme gradient sized to the hero container. */
body.single-glossary .custom-blog-hero { border-bottom: 0 !important; padding-bottom: 5px !important; }
body.single-glossary .custom-blog-hero .custom-container { position: relative; }
body.single-glossary .custom-blog-hero .custom-container::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 8px;
	background: #d9d3d3;
}

/* Related Articles section (heading + grid + "Browse All Categories" button). */
body.single-glossary .related-posts-section { display: none !important; }

/* Table of Contents box (covers the case where LuckyWP TOC is still active). */
body.single-glossary .lwptoc { display: none !important; }

/* Sticky sidebar CTA — follows the reader; top offset clears the fixed Divi header.
   Desktop only; on mobile the sidebar stacks below the content normally. */
@media (min-width: 981px) {
	body.single-glossary .custom-blog-layout .custom-blog-sidebar {
		position: sticky;
		top: 110px;
		align-self: flex-start;
	}
}

/* Hero primary CTA: use the brand colour (was dark #222), and fix the broken hover.
   The layout ships a second :hover rule ({background:#f2f2f2}) that leaves the text
   white on light-grey (invisible) — override so it stays brand pink with white text. */
body.single-glossary .hero-buttons .btn-primary {
	background: #ff0066 !important;
	color: #fff !important;
}
body.single-glossary .hero-buttons .btn-primary:hover {
	background: #d1004f !important; /* darker brand pink */
	color: #fff !important;
	transform: translateY(-2px);
}

/* ============================================================
   Bottom "Get the data, skip the scraping" CTA banner.
   The parent theme (single-new.php) ships it dark (#2d2d2d) with faint white corner glows.
   On glossary we make it a clean WHITE panel with light theme-colour glows + brand buttons.
   ============================================================ */
body.single-glossary .banner {
	background: #ffffff !important;
	border: 1px solid #ece9f4 !important;
	box-shadow: 0 24px 60px -34px rgba(76, 29, 149, .28) !important;
}
/* decorative corner circles -> light theme colours (were rgba white .03, invisible on white) */
body.single-glossary .banner::before { background: rgba(255, 0, 102, .12) !important; }
body.single-glossary .banner::after  { background: rgba(155, 81, 224, .12) !important; }
/* readable text on white */
body.single-glossary .banner h2 { color: #171226 !important; }
body.single-glossary .banner p  { color: #5b5570 !important; }

/* Primary button ("Create a Free Account") — brand pink, normal + hover */
body.single-glossary .banner .btn-primary {
	background: #ff0066 !important;
	color: #fff !important;
	border: 2px solid #ff0066 !important;
	box-shadow: 0 14px 26px -12px rgba(255, 0, 102, .5) !important;
}
body.single-glossary .banner .btn-primary:hover {
	background: #e6005c !important;
	border-color: #e6005c !important;
	color: #fff !important;
	transform: translateY(-2px);
}
/* Ghost button ("Book a Demo") — outline, goes brand purple on hover */
body.single-glossary .banner .btn-ghost {
	background: #fff !important;
	color: #171226 !important;
	border: 2px solid #e3dded !important;
}
body.single-glossary .banner .btn-ghost:hover {
	background: rgba(155, 81, 224, .06) !important;
	color: #9b51e0 !important;
	border-color: #9b51e0 !important;
	transform: translateY(-2px);
}