/**
 * UltraBlocks — Obsidian Gallery skin for legacy BlockSpare blocks.
 *
 * Loaded AFTER all BlockSpare structural CSS. Re-themes every legacy block
 * to the Obsidian Gallery theme design tokens (--og-*). Fallback values are
 * baked in so blocks render correctly even where the theme CSS variables
 * are unavailable (e.g. editor iframes).
 *
 * "Full reskin" mode: !important is used deliberately so per-block custom
 * colors saved as inline styles in old posts are also overridden.
 * Background IMAGES are never touched — only colors, borders, typography.
 */

/* =====================================================================
 * 0. Base — typography & text color for every BlockSpare block
 * =================================================================== */

[class*="wp-block-blockspare"],
.blockspare-blocks,
[class*="wp-block-blockspare"] p,
[class*="wp-block-blockspare"] li,
[class*="wp-block-blockspare"] span:not(.fa):not(.fas):not(.far):not(.fab) {
	font-family: var(--og-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif) !important;
	color: var(--og-text, #fff);
}

[class*="wp-block-blockspare"] h1,
[class*="wp-block-blockspare"] h2,
[class*="wp-block-blockspare"] h3,
[class*="wp-block-blockspare"] h4,
[class*="wp-block-blockspare"] h5,
[class*="wp-block-blockspare"] h6 {
	font-family: var(--og-font-heading, var(--og-font-body, inherit)) !important;
	color: var(--og-heading, #fff) !important;
	font-weight: var(--og-heading-weight, 700) !important;
	text-transform: var(--og-heading-tt, none) !important;
	letter-spacing: var(--og-heading-ls, 0) !important;
}

[class*="wp-block-blockspare"] a {
	color: var(--og-link, #7db4ec);
	text-decoration: none;
}

[class*="wp-block-blockspare"] a:hover {
	color: var(--og-link-hover, #fff);
}

/* =====================================================================
 * 1. POSTS BLOCKS (grid / list / slider / carousel / tile / masonry /
 *    flash / express / full) — the priority family
 * =================================================================== */

/* Card = the theme's framed-print signature */
.blockspare-posts-block-post-single {
	background: var(--og-card, rgba(10, 10, 12, 0.85)) !important;
	border: 1px solid var(--og-card-border, rgba(255, 255, 255, 0.09)) !important;
	border-radius: var(--og-radius, 10px) !important;
	box-shadow: var(--og-shadow, 0 8px 28px rgba(0, 0, 0, 0.25)) !important;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blockspare-posts-block-post-single:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Featured image: match theme hover-zoom */
.blockspare-posts-block-post-img {
	background: #000 !important;
	overflow: hidden;
}

.blockspare-posts-block-post-img img {
	transition: transform 0.35s ease, opacity 0.3s ease !important;
}

.blockspare-posts-block-post-single:hover .blockspare-posts-block-post-img img {
	transform: scale(1.06);
}

.bs-no-thumbnail-img {
	background: #000 !important;
	border: 1px solid var(--og-card-border, rgba(255, 255, 255, 0.09)) !important;
}

/* Post title */
.blockspare-posts-block-post-grid-title,
.blockspare-posts-block-post-grid-title a,
.blockspare-posts-block-title-link,
.blockspare-posts-block-post-content h2 a,
.blockspare-posts-block-post-content h3 a {
	color: var(--og-heading, #fff) !important;
	font-family: var(--og-font-heading, var(--og-font-body, inherit)) !important;
	font-size: var(--og-card-title-size, 1.18rem);
	font-weight: var(--og-heading-weight, 700) !important;
	line-height: 1.35;
}

.blockspare-posts-block-post-grid-title a:hover,
.blockspare-posts-block-title-link:hover,
.blockspare-posts-block-post-content h2 a:hover,
.blockspare-posts-block-post-content h3 a:hover {
	color: var(--og-link, #7db4ec) !important;
}

/* Category chips — theme tag-pill style */
.blockspare-posts-block-post-category,
.blockspare-posts-block-post-category a,
.blockspare-posts-block-post-by-category a,
.blockspare-posts-block-post-category-above-title a {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 99px !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	text-transform: none;
	line-height: 1.6;
}

.blockspare-posts-block-post-category a {
	padding: 4px 12px !important;
	display: inline-block;
}

.blockspare-posts-block-post-category a:hover,
.blockspare-posts-block-post-by-category a:hover,
.blockspare-posts-block-post-category-above-title a:hover {
	background: var(--og-accent, #0066cc) !important;
	color: var(--og-button-text, #fff) !important;
}

/* Meta / byline */
.blockspare-posts-block-post-grid-byline,
.blockspare-posts-block-post-grid-byline a,
.blockspare-posts-block-post-grid-byline span,
.blockspare-posts-block-post-grid-date,
.blockspare-posts-block-post-grid-author,
.blockspare-posts-block-post-grid-author a,
.comment_count {
	color: var(--og-text-muted, #b9bcc2) !important;
	font-size: 0.85rem;
}

.blockspare-posts-block-post-grid-byline i,
.blockspare-posts-block-post-grid-byline .fa,
.blockspare-posts-block-post-grid-byline .fas,
.blockspare-posts-block-post-grid-byline .far {
	color: var(--og-text-muted, #b9bcc2) !important;
}

.blockspare-posts-block-post-grid-byline a:hover {
	color: var(--og-link, #7db4ec) !important;
}

/* Excerpt */
.blockspare-posts-block-post-grid-excerpt,
.blockspare-posts-block-post-grid-excerpt-content,
.blockspare-posts-block-post-grid-excerpt p {
	color: var(--og-text-muted, #b9bcc2) !important;
}

/* Read-more / text links */
.blockspare-posts-block-post-grid-more-link,
.blockspare-posts-block-text-link {
	color: var(--og-link, #7db4ec) !important;
	background: transparent !important;
	border-color: var(--og-border, #3a3d42) !important;
}

.blockspare-posts-block-post-grid-more-link:hover,
.blockspare-posts-block-text-link:hover {
	color: var(--og-link-hover, #fff) !important;
}

/* Content overlay variants (tile / banner-style cards) keep readable text */
.blockspare-posts-block-bg-overlay {
	background: var(--og-hero-overlay, rgba(0, 0, 0, 0.4)) !important;
}

/* Load more (AJAX pagination) — theme button */
.bs_blockspare_loadmore .load-btn,
.blockspare-readmore .load-btn,
.blockspare-readmore-wrapper .load-btn {
	display: inline-block;
	background: var(--og-accent, #0066cc) !important;
	color: var(--og-button-text, #fff) !important;
	border: 0 !important;
	border-radius: var(--og-radius-sm, 6px) !important;
	padding: 0.65em 1.5em;
	font-weight: 600;
	transition: filter 0.15s ease;
}

.bs_blockspare_loadmore .load-btn:hover,
.blockspare-readmore-wrapper .load-btn:hover {
	filter: brightness(1.15);
	color: var(--og-button-text, #fff) !important;
}

/* Numbered pagination */
[class*="wp-block-blockspare"] .blockspare-pagination a,
[class*="wp-block-blockspare"] .page-numbers {
	background: var(--og-card, rgba(10, 10, 12, 0.85)) !important;
	color: var(--og-text, #fff) !important;
	border: 1px solid var(--og-card-border, rgba(255, 255, 255, 0.09)) !important;
	border-radius: var(--og-radius-sm, 6px) !important;
}

[class*="wp-block-blockspare"] .blockspare-pagination a:hover,
[class*="wp-block-blockspare"] .page-numbers.current,
[class*="wp-block-blockspare"] .page-numbers:hover {
	background: var(--og-accent, #0066cc) !important;
	color: var(--og-button-text, #fff) !important;
	border-color: var(--og-accent, #0066cc) !important;
}

/* =====================================================================
 * 2. SLICK sliders & carousels — dark chrome
 * =================================================================== */

[class*="wp-block-blockspare"] .slick-arrow,
[class*="wp-block-blockspare"] .slick-prev,
[class*="wp-block-blockspare"] .slick-next {
	background: var(--og-card, rgba(10, 10, 12, 0.85)) !important;
	color: var(--og-text, #fff) !important;
	border: 1px solid var(--og-card-border, rgba(255, 255, 255, 0.09)) !important;
	border-radius: 50% !important;
	z-index: 5;
}

[class*="wp-block-blockspare"] .slick-arrow:hover {
	background: var(--og-accent, #0066cc) !important;
	border-color: var(--og-accent, #0066cc) !important;
}

[class*="wp-block-blockspare"] .slick-arrow::before,
[class*="wp-block-blockspare"] .slick-prev::before,
[class*="wp-block-blockspare"] .slick-next::before {
	color: var(--og-text, #fff) !important;
	opacity: 1;
}

[class*="wp-block-blockspare"] .slick-dots li button::before {
	color: var(--og-text-muted, #b9bcc2) !important;
	opacity: 0.5;
}

[class*="wp-block-blockspare"] .slick-dots li.slick-active button::before {
	color: var(--og-accent, #0066cc) !important;
	opacity: 1;
}

/* =====================================================================
 * 3. POPULAR TAGS block — theme tag-cloud pills
 * =================================================================== */

[class*="wp-block-blockspare"] .blockspare-popular-tags a,
[class*="popular-tags"] a,
.wp-block-blockspare-popular-tags a {
	display: inline-block;
	padding: 4px 12px !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 0 !important;
	border-radius: 99px !important;
}

[class*="wp-block-blockspare"] .blockspare-popular-tags a:hover,
[class*="popular-tags"] a:hover,
.wp-block-blockspare-popular-tags a:hover {
	background: var(--og-accent, #0066cc) !important;
	color: var(--og-button-text, #fff) !important;
}

/* =====================================================================
 * 4. BANNERS / HEROES / SECTION HEADERS / CTA
 *    (colors + overlay only — background images are preserved)
 * =================================================================== */

[class*="blockspare-banner-"] .blockspare-banner-overlay,
[class*="wp-block-blockspare"] .blockspare-overlay,
[class*="wp-block-blockspare"] .bs-overlay {
	background-color: var(--og-hero-overlay, rgba(0, 0, 0, 0.4)) !important;
}

.blockspare-section-header-wrapper .blockspare-title-wrapper,
.blockspare-section-head-wrap .blockspare-title-wrapper,
.blockspare-section-header-wrapper h1,
.blockspare-section-header-wrapper h2,
.blockspare-section-header-wrapper h3 {
	color: var(--og-heading, #fff) !important;
}

.blockspare-section-header-wrapper .blockspare-subtitle,
.blockspare-section-head-wrap .blockspare-subtitle {
	color: var(--og-text-muted, #b9bcc2) !important;
}

.blockspare-lower-dash,
[class*="wp-block-blockspare"] .blockspare-separator {
	background-color: var(--og-accent, #0066cc) !important;
	border-color: var(--og-accent, #0066cc) !important;
}

/* =====================================================================
 * 5. BUTTONS (button block, CTA, banners, forms) — theme button
 * =================================================================== */

[class*="wp-block-blockspare"] .blockspare-button,
[class*="wp-block-blockspare"] a.blockspare-button-link,
[class*="wp-block-blockspare"] .blockspare-btn,
[class*="wp-block-blockspare"] .wp-block-button__link,
[class*="wp-block-blockspare"] button:not(.slick-arrow),
[class*="wp-block-blockspare"] input[type="submit"] {
	background: var(--og-accent, #0066cc) !important;
	color: var(--og-button-text, #fff) !important;
	border: 0 !important;
	border-radius: var(--og-radius-sm, 6px) !important;
	font-weight: 600;
	transition: filter 0.15s ease;
}

[class*="wp-block-blockspare"] .blockspare-button:hover,
[class*="wp-block-blockspare"] a.blockspare-button-link:hover,
[class*="wp-block-blockspare"] .blockspare-btn:hover,
[class*="wp-block-blockspare"] .wp-block-button__link:hover,
[class*="wp-block-blockspare"] button:not(.slick-arrow):hover,
[class*="wp-block-blockspare"] input[type="submit"]:hover {
	filter: brightness(1.15);
	color: var(--og-button-text, #fff) !important;
}

/* =====================================================================
 * 6. CONTENT & UI BLOCKS — cards on dark
 * =================================================================== */

/* Generic "boxed" elements: content box, services, pricing, testimonial,
   accordion items, notice bar, user profile, price list */
[class*="wp-block-blockspare"] .blockspare-content-wrapper,
.wp-block-blockspare-content-box .blockspare-content-box-inner,
.blockspare-block-service-table,
[class*="blockspare-service-wrap-"] .blockspare-service-inner,
.blockspare-block-pricing-table-inside,
[class*="blockspare-pricing-wrap-"] .blockspare-pricing-inner,
.blockspare-main-testimonial-wrapper .blockspare-testimonial-inner,
.wp-block-blockspare-blockspare-testimonial-item,
.wp-block-blockspare-blockspare-notice-bar,
.wp-block-blockspare-user-profile .blockspare-user-profile-wrap,
.wp-block-blockspare-blockspare-price-list .blockspare-price-list-item-wrap {
	background-color: var(--og-card, rgba(10, 10, 12, 0.85)) !important;
	border-color: var(--og-card-border, rgba(255, 255, 255, 0.09)) !important;
	border-radius: var(--og-radius, 10px) !important;
	color: var(--og-text, #fff) !important;
}

/* Accordion */
.wp-block-blockspare-blockspare-accordion .blockspare-accordion-item,
.wp-block-blockspare-blockspare-accordion .blockspare-accordion-title,
.wp-block-blockspare-blockspare-accordion .blockspare-accordion-header {
	background-color: var(--og-card, rgba(10, 10, 12, 0.85)) !important;
	color: var(--og-heading, #fff) !important;
	border-color: var(--og-card-border, rgba(255, 255, 255, 0.09)) !important;
	border-radius: var(--og-radius-sm, 6px);
}

.wp-block-blockspare-blockspare-accordion .blockspare-accordion-body,
.wp-block-blockspare-blockspare-accordion .blockspare-accordion-content {
	background-color: transparent !important;
	color: var(--og-text-muted, #b9bcc2) !important;
	border-color: var(--og-card-border, rgba(255, 255, 255, 0.09)) !important;
}

/* Tabs */
.wp-block-blockspare-blockspare-tabs .blockspare-tab-title,
.wp-block-blockspare-blockspare-tabs .blockspare-tabs-nav li,
.wp-block-blockspare-blockspare-tabs .blockspare-tabs-nav a {
	background-color: transparent !important;
	color: var(--og-text-muted, #b9bcc2) !important;
	border-color: var(--og-border, #3a3d42) !important;
}

.wp-block-blockspare-blockspare-tabs .blockspare-tab-title.active,
.wp-block-blockspare-blockspare-tabs .blockspare-tabs-nav li.active,
.wp-block-blockspare-blockspare-tabs .blockspare-tabs-nav li.active a,
.wp-block-blockspare-blockspare-tabs .blockspare-tab-title[aria-selected="true"] {
	background-color: var(--og-accent, #0066cc) !important;
	color: var(--og-button-text, #fff) !important;
	border-color: var(--og-accent, #0066cc) !important;
}

/* Counter / stats */
.wp-block-blockspare-blockspare-counter .blockspare-counter-number,
.wp-block-blockspare-blockspare-counter .blockspare-counter-value {
	color: var(--og-heading, #fff) !important;
}

.wp-block-blockspare-blockspare-counter .blockspare-counter-title,
.wp-block-blockspare-blockspare-counter .blockspare-counter-text {
	color: var(--og-text-muted, #b9bcc2) !important;
}

.wp-block-blockspare-blockspare-counter i,
.wp-block-blockspare-blockspare-iconset i {
	color: var(--og-accent, #0066cc) !important;
}

/* Progress bars & skill bars */
.wp-block-blockspare-blockspare-linearprogressbar .blockspare-progress-bar,
.wp-block-blockspare-blockspare-skillbar .blockspare-skillbar-bar,
[class*="wp-block-blockspare"] .blockspare-progress-fill {
	background-color: var(--og-accent, #0066cc) !important;
}

.wp-block-blockspare-blockspare-linearprogressbar .blockspare-progress-track,
.wp-block-blockspare-blockspare-skillbar .blockspare-skillbar-track,
[class*="wp-block-blockspare"] .blockspare-progress-wrap {
	background-color: rgba(255, 255, 255, 0.08) !important;
	border-radius: 99px !important;
}

/* Social links / sharing */
.blockspare-social-links a,
.blockspare-social-icons a,
.wp-block-blockspare-blocks-blockspare-social-sharing a {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: var(--og-text, #fff) !important;
	border-color: var(--og-card-border, rgba(255, 255, 255, 0.09)) !important;
	border-radius: var(--og-radius-sm, 6px) !important;
}

.blockspare-social-links a:hover,
.blockspare-social-icons a:hover,
.wp-block-blockspare-blocks-blockspare-social-sharing a:hover {
	background-color: var(--og-accent, #0066cc) !important;
	color: var(--og-button-text, #fff) !important;
}

/* Star ratings — keep stars readable on dark */
.wp-block-blockspare-blockspare-star-ratings .blockspare-star,
.wp-block-blockspare-blockspare-star-ratings i {
	color: #f5a623 !important;
}

/* Date-time & search */
.wp-block-blockspare-date-time,
.wp-block-blockspare-date-time * {
	color: var(--og-text-muted, #b9bcc2) !important;
}

.wp-block-blockspare-search input[type="search"],
.wp-block-blockspare-search input[type="text"],
[class*="wp-block-blockspare"] input[type="search"],
[class*="wp-block-blockspare"] input[type="text"],
[class*="wp-block-blockspare"] input[type="email"] {
	background-color: rgba(255, 255, 255, 0.06) !important;
	color: var(--og-text, #fff) !important;
	border: 1px solid var(--og-border, #3a3d42) !important;
	border-radius: var(--og-radius-sm, 6px) !important;
}

[class*="wp-block-blockspare"] input::placeholder {
	color: var(--og-text-muted, #b9bcc2) !important;
	opacity: 0.8;
}

/* Image blocks (carousel / masonry / slider / gallery) — theme radius */
.wp-block-blockspare-blockspare-masonry img,
.wp-block-blockspare-image-masonry img,
.wp-block-blockspare-image-carousel img,
.wp-block-blockspare-image-slider img,
.blockspare-gallery-figure img {
	border-radius: var(--og-radius, 10px);
}

/* Containers, layouts, empty sections: force dark backgrounds so old
   light-mode sections don't glare against the theme. Background images
   are preserved (background-color only). */
.wp-block-blockspare-blockspare-container,
.wp-block-blockspare-blockspare-empty-section,
.wp-block-blockspare-blockspare-layouts,
[class*="blockspare-layout-"],
.blockspare-page-section {
	background-color: transparent !important;
	color: var(--og-text, #fff);
}

/* Pricing highlight amounts */
[class*="wp-block-blockspare"] .blockspare-price,
[class*="wp-block-blockspare"] .blockspare-pricing-price {
	color: var(--og-heading, #fff) !important;
}

/* =====================================================================
 * 7. Trending / vertical carousels
 * =================================================================== */

.blockspare-banner-trending-carousel-wrapper,
.banner-trending-vertical-carousel {
	background-color: transparent !important;
}

.blockspare-banner-trending-carousel-wrapper .blockspare-posts-block-post-content {
	color: var(--og-text, #fff) !important;
}

/* =====================================================================
 * 8. Small fixes for dark rendering
 * =================================================================== */

/* Never let legacy white text-shadow or light borders bleed through */
[class*="wp-block-blockspare"] hr {
	border-color: var(--og-border, #3a3d42) !important;
	background-color: var(--og-border, #3a3d42) !important;
}

/* AJAX loader visible on dark */
[class*="wp-block-blockspare"] .ajax-loader,
.bs_blockspare_loadmore .ajax-loader {
	filter: invert(1);
}