/*
 * Theme Name:  Teslamagz Child
 * Theme URI:   https://teslamagz.com/
 * Description: Teslamagz Child Theme
 * Author:      Teslamagz
 * Author URI:  https://teslamagz.com/
 * Template:    teslamagz
 * Version:     1.0.1
 */

/* ==========================================================================
   Header Navigation — Responsive & Dropdown Improvements
   - Proper vertical centering
   - Progressive spacing reduction for smaller desktops
   - Show mobile menu earlier (below 1200px) if many items overflow
   - Scrollable dropdown submenus
   - Better overall menu UX
   ========================================================================== */

/* --- Vertical Centering Fix --- */
.cs-header__inner-desktop {
	align-items: center;
}

.cs-header__col {
	align-items: center;
}

.cs-header__nav {
	align-self: center;
	display: flex;
	align-items: center;
}

.cs-header__nav-inner {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.cs-header__nav-inner > li {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.cs-header__nav-inner > li > a {
	display: flex;
	align-items: center;
	white-space: nowrap;
}

/* --- Center Column Flexibility --- */
.cs-header__inner-desktop .cs-header__col.cs-col-center {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

/* Prevent the logo/left column from being compressed by nav */
.cs-header__inner-desktop .cs-header__col.cs-col-left {
	flex: 0 0 auto;
	min-width: 0;
}

/* Prevent the right column from being compressed */
.cs-header__inner-desktop .cs-header__col.cs-col-right {
	flex: 0 0 auto;
	min-width: 0;
}

/* --- Progressive Spacing Reduction --- */

/* Between 1360px and 1500px: tighten things up */
@media (min-width: 1360px) and (max-width: 1500px) {
	.cs-header__nav-inner {
		gap: 1.25rem;
	}

	.cs-header__nav:not(:first-child) {
		margin-left: 1.25rem;
	}

	.cs-header__col.cs-col-left:not(:only-child) {
		padding-right: 12px;
	}

	.cs-header__col.cs-col-right:not(:only-child) {
		padding-left: 12px;
	}

	.cs-header__col.cs-col-center:not(:only-child) {
		padding: 0 10px;
	}

	.cs-header__nav-inner > li > a {
		font-size: 0.875rem;
	}
}

/* --- Switch to Mobile Nav Earlier ---
   Show the mobile (hamburger) nav below 1360px to prevent
   menu items from overlapping the logo or right-side icons.
   ========================================================================== */
@media (max-width: 1359.98px) {
	.cs-header__inner-desktop {
		display: none !important;
	}

	.cs-header__inner-mobile {
		display: flex !important;
	}
}

@media (min-width: 1360px) {
	.cs-header__inner-desktop {
		display: flex !important;
	}

	.cs-header__inner-mobile {
		display: none !important;
	}
}

/* --- Dropdown / Submenu Improvements --- */

/* Ensure dropdowns aren't clipped */
.cs-header__nav-inner > li.menu-item-has-children {
	position: relative;
}

/* First-level dropdown: scrollable if too tall */
.cs-header__nav-inner > li.menu-item-has-children > .sub-menu {
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	z-index: 9999;
}

/* Thin scrollbar for dropdown menus */
.cs-header__nav-inner .sub-menu::-webkit-scrollbar {
	width: 5px;
}

.cs-header__nav-inner .sub-menu::-webkit-scrollbar-track {
	background: transparent;
}

.cs-header__nav-inner .sub-menu::-webkit-scrollbar-thumb {
	background-color: rgba(128, 128, 128, 0.35);
	border-radius: 5px;
}

.cs-header__nav-inner .sub-menu {
	scrollbar-width: thin;
	scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

/* Nested submenus: also scrollable */
.cs-header__nav-inner .sub-menu .sub-menu {
	max-height: 60vh;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Smoother dropdown transitions */
.cs-header__nav-inner > li.menu-item-has-children > .sub-menu {
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* --- Mobile / Offcanvas Menu Improvements --- */

/* Ensure offcanvas content is scrollable with many items */
.cs-offcanvas__content {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	max-height: calc(100vh - 80px);
	overscroll-behavior: contain;
}

/* Better spacing for mobile nav items */
.cs-offcanvas__content .menu > li > a {
	padding: 0.75rem 0;
}

/* Smooth expand/collapse of mobile submenus */
.cs-offcanvas__content .sub-menu {
	transition: max-height 0.3s ease, opacity 0.2s ease;
}

/* --- Sticky Header Polish --- */
.cs-navbar-sticky-enabled .cs-header.cs-scroll-sticky .cs-header__inner-desktop {
	align-items: center;
}

/* Smooth transition for nav link hovers */
.cs-header__nav-inner > li > a > span {
	transition: background-size 0.3s ease, color 0.25s ease;
}

/* ==========================================================================
   Featured Image Credit Overlay (ISC Plugin)
   - Shows source credit at the bottom-right of the featured image
   - Positioned against .cs-overlay-ratio (position: relative) parent
   ========================================================================== */

.featured-image-credit {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	font-size: 11px;
	font-style: italic;
	line-height: 1.4;
	padding: 4px 10px;
	border-radius: 4px;
	z-index: 3;
	pointer-events: auto;
	max-width: 65%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.featured-image-credit .credit-label {
	opacity: 0.7;
	margin-right: 3px;
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 0.5px;
	vertical-align: baseline;
}

.featured-image-credit a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	transition: border-color 0.2s ease;
}

.featured-image-credit a:hover {
	border-bottom-color: #fff;
}

/* ==========================================================================
   Collapsible Comments Section + Reactions — Inline Row Layout
   - Reactions left-aligned, comment button right-aligned, same row
   - Comment panel expands below on click
   ========================================================================== */

/* The row: reactions left, comment button right */
.emoji-reactions-wrapper {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	margin-top: 20px;
	margin-bottom: 0;
	padding: 14px 16px;
	border: none;
	border-radius: 12px;
	background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
	border: 1px solid #e2eafc;
}

/* Top row inside the wrapper: emojis left, button right */
.emoji-reactions-wrapper > .emoji-reactions-container {
	margin-bottom: 0;
}

/* Make the container + button sit on same row */
.emoji-reactions-wrapper {
	flex-wrap: wrap;
}

.emoji-reactions-wrapper > .emoji-reactions-container,
.emoji-reactions-wrapper > .teslamagz-comments-section > .teslamagz-comments-toggle,
.emoji-reactions-wrapper > .teslamagz-comments-toggle {
	flex-shrink: 0;
}

/* When comments section is inside wrapper, layout the top as a row */
.emoji-reactions-wrapper {
	display: grid !important;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 0 12px;
}

.emoji-reactions-wrapper > .emoji-reactions-container {
	grid-column: 1;
	grid-row: 1;
}

.emoji-reactions-wrapper > .teslamagz-comments-section {
	grid-column: 2;
	grid-row: 1;
}

/* Comments body spans full width below */
.emoji-reactions-wrapper > .teslamagz-comments-section {
	display: contents;
}

.emoji-reactions-wrapper .teslamagz-comments-toggle {
	grid-column: 2;
	grid-row: 1;
}

.emoji-reactions-wrapper .teslamagz-comments-body {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* Comments section sits below the row */
.teslamagz-comments-section {
	margin-top: 0;
	border: none;
	border-radius: 0;
	overflow: visible;
}

.teslamagz-comments-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	background: #4b92fc;
	border: none;
	border-radius: 24px;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(75, 146, 252, 0.3);
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.teslamagz-comments-toggle:hover {
	background: #3a7ee6;
	box-shadow: 0 4px 14px rgba(75, 146, 252, 0.4);
	transform: translateY(-1px);
}

.teslamagz-comments-toggle:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(75, 146, 252, 0.3);
}

.teslamagz-comments-toggle__icon {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
}

.teslamagz-comments-section.is-open .teslamagz-comments-toggle {
	background: #3a7ee6;
}

.teslamagz-comments-section.is-open .teslamagz-comments-toggle__icon,
.teslamagz-comments-toggle.is-open .teslamagz-comments-toggle__icon {
	transform: rotate(90deg);
}

.teslamagz-comments-body {
	max-height: 0 !important;
	overflow: hidden !important;
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
	            padding 0.3s ease;
	padding: 0;
}

.teslamagz-comments-section.is-open .teslamagz-comments-body {
	max-height: 5000px !important;
	padding: 8px 0 0;
	overflow: visible !important;
}

/* Reduce wpdiscuz internal spacing when inside our collapsible */
.teslamagz-comments-body .comments-area,
.teslamagz-comments-body #comments {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.teslamagz-comments-body .wpd-main-form-wrapper {
	margin-top: 0 !important;
}

.teslamagz-comments-body #wpcomm {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Aggressive gap removal for all wpdiscuz wrappers */
.teslamagz-comments-body > *:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.teslamagz-comments-body .wpd-thread-list,
.teslamagz-comments-body .wpd-comment-form,
.teslamagz-comments-body .wpd-form-wrap,
.teslamagz-comments-body .wpd-board-header,
.teslamagz-comments-body .wc-comment-header,
.teslamagz-comments-body .wpd-main-form-wrapper,
.teslamagz-comments-body .wpd-form-head,
.teslamagz-comments-body #wpcomm .wpd-main-form-wrapper {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Remove any large top gaps from wpdiscuz subscribe/header area */
.teslamagz-comments-body .wpd-subscribe-bar,
.teslamagz-comments-body .wpdiscuz-subscribe-bar {
	margin-top: 4px !important;
	padding-top: 4px !important;
}

/* Dark mode */
[data-scheme="dark"] .emoji-reactions-wrapper,
.cs-dark-scheme .emoji-reactions-wrapper {
	background: linear-gradient(135deg, #1e2a3a 0%, #1a2535 100%);
	border-color: #2e3e52;
}

[data-scheme="dark"] .teslamagz-comments-toggle,
.cs-dark-scheme .teslamagz-comments-toggle {
	background: #4b92fc;
	box-shadow: 0 2px 8px rgba(75, 146, 252, 0.2);
}

[data-scheme="dark"] .teslamagz-comments-toggle:hover,
.cs-dark-scheme .teslamagz-comments-toggle:hover {
	background: #3a7ee6;
}

[data-scheme="dark"] .emoji-reactions-container,
.cs-dark-scheme .emoji-reactions-container {
	background: #162030 !important;
	border-color: #2e3e52 !important;
	box-shadow: none !important;
}

/* Auto-open if user navigates directly to #comments */
.teslamagz-comments-section:target .teslamagz-comments-body {
	max-height: 5000px !important;
	padding: 8px 0 0;
	overflow: visible !important;
}

.teslamagz-comments-section:target .teslamagz-comments-toggle__icon {
	transform: rotate(90deg);
}

/* Mobile: stack vertically on small screens */
@media (max-width: 500px) {
	.emoji-reactions-wrapper {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto auto auto !important;
		align-items: center !important;
		gap: 10px 0 !important;
		padding: 12px;
	}

	.emoji-reactions-wrapper > .emoji-reactions-container {
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
	}

	.emoji-reactions-wrapper .teslamagz-comments-toggle {
		grid-column: 1;
		grid-row: 2;
		justify-self: stretch;
		justify-content: center;
		width: 100%;
	}

	.emoji-reactions-wrapper .teslamagz-comments-body {
		grid-column: 1;
		grid-row: 3;
	}
}

/* ==========================================================================
   wpDiscuz Comment Form — Theme Matching + Dark Mode
   ========================================================================== */

/* Light mode: clean modern look matching theme */
.teslamagz-comments-body #wpcomm .wpd-form-wrap {
	background: #fff;
	border-radius: 10px;
	border: 1px solid #e4e4e4;
	padding: 16px;
}

.teslamagz-comments-body #wpcomm .ql-container,
.teslamagz-comments-body #wpcomm .ql-editor {
	background: #f9fafb;
	border-color: #e4e4e4;
	border-radius: 8px;
	color: #1d1d1f;
}

.teslamagz-comments-body #wpcomm .ql-editor.ql-blank::before {
	color: #999;
}

.teslamagz-comments-body #wpcomm .ql-toolbar {
	border-color: #e4e4e4;
	border-radius: 0 0 8px 8px;
}

.teslamagz-comments-body #wpcomm .wpd-form-foot .wpd-prim-button {
	background: #4b92fc !important;
	border-radius: 8px !important;
	font-weight: 700;
}

.teslamagz-comments-body #wpcomm .wpd-form-foot .wpd-prim-button:hover {
	background: #3a7ee6 !important;
}

/* Subscribe bar */
.teslamagz-comments-body #wpcomm .wpd-subscribe-bar,
.teslamagz-comments-body #wpcomm .wpdiscuz-subscribe-bar {
	border-color: #e4e4e4;
}

/* Comment count header */
.teslamagz-comments-body #wpcomm .wpd-comment-info-bar {
	border-color: #e4e4e4;
}

/* ==========================================================================
   wpDiscuz Dark Mode
   ========================================================================== */

[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpd-form-wrap,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpd-form-wrap {
	background: #1e2a3a;
	border-color: #2e3e52;
}

[data-scheme="dark"] .teslamagz-comments-body #wpcomm .ql-container,
[data-scheme="dark"] .teslamagz-comments-body #wpcomm .ql-editor,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .ql-container,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .ql-editor {
	background: #162030 !important;
	border-color: #2e3e52 !important;
	color: #e8e8e8 !important;
}

[data-scheme="dark"] .teslamagz-comments-body #wpcomm .ql-editor.ql-blank::before,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .ql-editor.ql-blank::before {
	color: #6b7f96 !important;
}

[data-scheme="dark"] .teslamagz-comments-body #wpcomm .ql-toolbar,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .ql-toolbar {
	border-color: #2e3e52 !important;
	background: #1a2840;
}

[data-scheme="dark"] .teslamagz-comments-body #wpcomm .ql-toolbar button,
[data-scheme="dark"] .teslamagz-comments-body #wpcomm .ql-toolbar .ql-picker-label,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .ql-toolbar button,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .ql-toolbar .ql-picker-label {
	color: #a0b4cc !important;
}

[data-scheme="dark"] .teslamagz-comments-body #wpcomm .ql-toolbar button:hover,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .ql-toolbar button:hover {
	color: #fff !important;
}

[data-scheme="dark"] .teslamagz-comments-body #wpcomm .ql-toolbar .ql-stroke,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .ql-toolbar .ql-stroke {
	stroke: #a0b4cc !important;
}

[data-scheme="dark"] .teslamagz-comments-body #wpcomm .ql-toolbar .ql-fill,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .ql-toolbar .ql-fill {
	fill: #a0b4cc !important;
}

/* Subscribe bar dark mode */
[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpd-subscribe-bar,
[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpdiscuz-subscribe-bar,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpd-subscribe-bar,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpdiscuz-subscribe-bar {
	border-color: #2e3e52 !important;
	color: #a0b4cc;
}

[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpd-subscribe-bar a,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpd-subscribe-bar a {
	color: #6aafff !important;
}

/* Comment count / info bar dark mode */
[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpd-comment-info-bar,
[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpd-load-more-submit,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpd-comment-info-bar,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpd-load-more-submit {
	border-color: #2e3e52 !important;
	color: #a0b4cc !important;
}

/* Icons / action buttons dark mode */
[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpd-form-foot button,
[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpd-form-foot .wpd-icon,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpd-form-foot button,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpd-form-foot .wpd-icon {
	color: #a0b4cc !important;
	border-color: #2e3e52 !important;
	background: #1a2840 !important;
}

[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpd-form-foot button:hover,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpd-form-foot button:hover {
	color: #fff !important;
	background: #2e3e52 !important;
}

/* Post Comment button keeps blue in dark mode */
[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpd-form-foot .wpd-prim-button,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpd-form-foot .wpd-prim-button {
	background: #4b92fc !important;
	color: #fff !important;
	border: none !important;
}

/* General text colors in dark mode */
[data-scheme="dark"] .teslamagz-comments-body #wpcomm,
[data-scheme="dark"] .teslamagz-comments-body #wpcomm *,
.cs-dark-scheme .teslamagz-comments-body #wpcomm,
.cs-dark-scheme .teslamagz-comments-body #wpcomm * {
	color: inherit;
}

[data-scheme="dark"] .teslamagz-comments-body #wpcomm {
	color: #c8d6e5;
}

[data-scheme="dark"] .teslamagz-comments-body,
.cs-dark-scheme .teslamagz-comments-body {
	color: #c8d6e5;
}

/* Character count in dark mode */
[data-scheme="dark"] .teslamagz-comments-body #wpcomm .wpd-char-counter,
.cs-dark-scheme .teslamagz-comments-body #wpcomm .wpd-char-counter {
	color: #6b7f96 !important;
}