/*
 * Styles for the modern features added to Oblique Pro: dark mode, reading
 * time, related posts, and social share buttons. Kept in a separate file
 * on purpose so it's easy to tell apart from the original theme CSS.
 */

/* ---------------------------------------------------------------------
 * "Really Simple Featured Video" (rsfv) compatibility.
 *
 * content.php covers every grid thumbnail with an invisible full-size
 * link (.thumb-link-wrap, z-index: 99) so the whole thumbnail is
 * clickable through to the post. That overlay sits above anything the
 * video plugin renders (its own hover layers only reach z-index 10-15),
 * so it silently swallowed the mouseenter/mouseleave events the plugin
 * needs to start the hover-preview video in the grid/archive view.
 *
 * Per your choice: for posts that have a featured video, hover now
 * reaches the video preview instead of the overlay link. The post title
 * remains a normal link, so the article is still just as reachable —
 * only the thumbnail itself stops being a click-through for those posts.
 * --------------------------------------------------------------------- */

.rsfv-has-video .thumb-link-wrap {
	pointer-events: none;
}

.rsfv-has-video .thumb-link {
	display: none;
}

/* ---------------------------------------------------------------------
 * Dark mode toggle button
 * --------------------------------------------------------------------- */

.oblique-dark-mode-toggle {
	background: transparent;
	border: 2px solid currentColor;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
	padding: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.oblique-dark-mode-toggle:hover,
.oblique-dark-mode-toggle:focus {
	background-color: rgba(127, 127, 127, 0.15);
}

html.oblique-dark-mode .oblique-dark-mode-toggle i:before {
	content: "\f185"; /* fa-sun */
}

/* ---------------------------------------------------------------------
 * Dark mode color overrides
 *
 * This is a first pass covering the main structural areas (background,
 * text, header, widgets, comments, forms). It intentionally leaves
 * photography and custom-colored accents alone. Refine further with a
 * child theme stylesheet if you want a pixel-perfect dark version.
 * --------------------------------------------------------------------- */

html.oblique-dark-mode {
	background-color: #121212;
}

html.oblique-dark-mode body,
html.oblique-dark-mode #page {
	background-color: #121212;
	color: #e2e2e2;
}

html.oblique-dark-mode .site-header {
	background-color: #1a1a1a;
}

html.oblique-dark-mode .entry-content,
html.oblique-dark-mode .entry-title,
html.oblique-dark-mode .site-title a,
html.oblique-dark-mode .site-description,
html.oblique-dark-mode h1,
html.oblique-dark-mode h2,
html.oblique-dark-mode h3,
html.oblique-dark-mode h4,
html.oblique-dark-mode h5,
html.oblique-dark-mode h6 {
	color: #f0f0f0;
}

html.oblique-dark-mode a {
	color: #8ab4f8;
}

/* style.css sets an explicit color on these links (not just inherited from
   an ancestor), so the dark-mode override has to target them directly too. */
html.oblique-dark-mode .entry-title a {
	color: #f0f0f0;
}
html.oblique-dark-mode .entry-title a:hover {
	color: #8ab4f8;
}

html.oblique-dark-mode .hentry,
html.oblique-dark-mode .widget,
html.oblique-dark-mode .comment-body,
html.oblique-dark-mode .oblique-related-post,
html.oblique-dark-mode .site-footer,
html.oblique-dark-mode .header-widgets {
	background-color: #1e1e1e;
	color: #e2e2e2;
	border-color: #333;
}

/* style.css hardcodes these decorative diagonal dividers to white so they
   blend into the (normally white) content/widget area right after them.
   In dark mode that area turns dark, so the dividers need to follow —
   otherwise you get a stray white diagonal band, which is the bug this
   fixes. */
html.oblique-dark-mode .single-post-svg,
html.oblique-dark-mode .svg-container.bh-widgets-svg,
html.oblique-dark-mode .woocommerce-cart div.cross-sells > ul.products > li.product > div.svg-block {
	fill: #1e1e1e !important;
}

html.oblique-dark-mode input,
html.oblique-dark-mode textarea,
html.oblique-dark-mode select {
	background-color: #262626;
	color: #e2e2e2;
	border-color: #444;
}

html.oblique-dark-mode ::placeholder {
	color: #999;
}

/* ---------------------------------------------------------------------
 * Reading time
 * --------------------------------------------------------------------- */

.oblique-reading-time {
	display: inline-block;
	margin-left: 8px;
}

.oblique-reading-time:before {
	content: "\2022";
	margin-right: 8px;
}

/* ---------------------------------------------------------------------
 * Social share buttons
 * --------------------------------------------------------------------- */

.oblique-share-buttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0;
}

.oblique-share-label {
	font-weight: 600;
	margin-right: 4px;
}

.oblique-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: #f1f1f1;
	color: #333;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.oblique-share-btn:hover,
.oblique-share-btn:focus {
	transform: translateY(-2px);
	color: #fff;
}

.oblique-share-x:hover { background-color: #000; }
.oblique-share-facebook:hover { background-color: #1877f2; }
.oblique-share-linkedin:hover { background-color: #0a66c2; }
.oblique-share-whatsapp:hover { background-color: #25d366; }
.oblique-share-copy.oblique-share-copied {
	background-color: #2ecc71;
	color: #fff;
}

html.oblique-dark-mode .oblique-share-btn {
	background-color: #2a2a2a;
	color: #e2e2e2;
}

/* ---------------------------------------------------------------------
 * Related posts
 * --------------------------------------------------------------------- */

.oblique-related-posts {
	margin: 40px 0;
	padding-top: 24px;
	border-top: 1px solid rgba(127, 127, 127, 0.25);
}

.oblique-related-posts-title {
	margin-bottom: 16px;
}

.oblique-related-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.oblique-related-post-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.oblique-related-post-thumb {
	overflow: hidden;
	border-radius: 4px;
	margin-bottom: 10px;
}

.oblique-related-post-thumb img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.oblique-related-post-link:hover .oblique-related-post-thumb img {
	transform: scale(1.05);
}

.oblique-related-post-title {
	font-size: 16px;
	margin: 0;
}

@media (max-width: 600px) {
	.oblique-related-posts-grid {
		grid-template-columns: 1fr 1fr;
	}
}