/*
 * Beshno Music Core 0.8.0
 * Target: Jannah 7.6.5
 *
 * Strategy:
 * - Jannah itself toggles html.dark-skin.
 * - We reuse Jannah's own native dark selectors and variables.
 * - We do not create another dark-mode state.
 * - Full-screen search / live search / autocomplete are intentionally untouched.
 */

/* =========================================================
   1) Native Jannah dark variables
   ========================================================= */
html.dark-skin {
	/* Variables used directly by Jannah 7.6.5 Dark Mode */
	--tie-dark-skin-bg-main: var(--beshno-dark-bg);
	--tie-dark-skin-bg: var(--beshno-dark-surface);

	/* Native theme palette, scoped only to Dark Mode */
	--brand-color: var(--beshno-dark-primary);
	--dark-brand-color: var(--beshno-dark-primary);
	--bright-color: var(--beshno-dark-text);
	--base-color: var(--beshno-dark-text);

	color-scheme: dark;
}

/* Page shell */
html.dark-skin,
html.dark-skin body {
	background-color: var(--beshno-dark-bg) !important;
	color: var(--beshno-dark-text);
}

html.dark-skin #tie-wrapper {
	background-color: var(--beshno-dark-bg) !important;
}

/* Remove light backgrounds from structural wrappers.
   Cards are styled separately below. */
html.dark-skin #content,
html.dark-skin .site-content,
html.dark-skin .main-content,
html.dark-skin .main-content-row,
html.dark-skin .section-wrapper,
html.dark-skin .section-item,
html.dark-skin .fullwidth-area {
	background-color: transparent;
	border-color: var(--beshno-dark-border);
}

/* =========================================================
   2) Header / top navigation / main navigation
   ========================================================= */
html.dark-skin #theme-header,
html.dark-skin .logo-container {
	background-color: var(--beshno-dark-header) !important;
	border-color: var(--beshno-dark-border) !important;
	box-shadow: none !important;
}

/* Jannah may still be configured as main-nav-light.
   Override the native nav variables only while Dark Mode is active. */
html.dark-skin .main-nav-light,
html.dark-skin .main-nav-dark {
	--main-nav-background: var(--beshno-dark-surface);
	--main-nav-secondry-background: var(--beshno-dark-surface-2);
	--main-nav-primary-color: var(--beshno-dark-primary);
	--main-nav-contrast-primary-color: var(--beshno-dark-text);
	--main-nav-text-color: var(--beshno-dark-text);
	--main-nav-secondry-text-color: var(--beshno-dark-muted);
	--main-nav-main-border-color: var(--beshno-dark-border);
	--main-nav-secondry-border-color: var(--beshno-dark-border);
}

html.dark-skin #main-nav,
html.dark-skin .main-nav,
html.dark-skin .main-menu-wrapper,
html.dark-skin .main-nav.fixed-nav {
	background-color: var(--beshno-dark-surface) !important;
	border-color: var(--beshno-dark-border) !important;
	box-shadow: none !important;
}

html.dark-skin .main-nav .menu a,
html.dark-skin .main-nav .components li a {
	color: var(--beshno-dark-text);
}

html.dark-skin .main-nav .menu > li:hover > a,
html.dark-skin .main-nav .menu ul li:hover > a:not(.megamenu-pagination),
html.dark-skin .main-nav .components li a:hover,
html.dark-skin .main-nav .menu ul li.current-menu-item:not(.mega-link-column) > a,
html.dark-skin .main-nav .tie-current-menu > a,
html.dark-skin .main-nav .current-menu-item > a {
	color: var(--beshno-dark-primary) !important;
}

/* Main-menu dropdowns and mega menus.
   Search popup is NOT part of these selectors. */
html.dark-skin .main-nav .menu-sub-content,
html.dark-skin .main-nav .sub-menu,
html.dark-skin .main-nav .mega-menu-block,
html.dark-skin .main-nav .mega-menu-content,
html.dark-skin .top-menu ul,
html.dark-skin .components .comp-sub-menu {
	background-color: var(--beshno-dark-surface-2) !important;
	border-color: var(--beshno-dark-border) !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

html.dark-skin .main-nav .menu-sub-content a:not(:hover),
html.dark-skin .main-nav .sub-menu a:not(:hover),
html.dark-skin .top-menu ul a:not(:hover),
html.dark-skin .components .comp-sub-menu a:not(:hover) {
	color: var(--beshno-dark-link);
}

/* Top navigation */
html.dark-skin .top-nav,
html.dark-skin .topbar-wrapper {
	background-color: var(--beshno-dark-header) !important;
	border-color: var(--beshno-dark-border) !important;
}

html.dark-skin .top-nav,
html.dark-skin .top-nav a:not(:hover),
html.dark-skin .top-nav .breaking a:not(:hover),
html.dark-skin .top-nav .components > li > a {
	color: var(--beshno-dark-muted);
}

html.dark-skin .top-nav a:hover,
html.dark-skin .top-nav .components > li:hover > a,
html.dark-skin .top-menu li:hover > a {
	color: var(--beshno-dark-primary) !important;
}

/* =========================================================
   3) Main content / cards / blocks
   ========================================================= */
html.dark-skin .container-wrapper {
	background-color: var(--beshno-dark-surface) !important;
	border-color: var(--beshno-dark-border) !important;
}

/* Jannah Magazine 2 normally makes these transparent in dark mode.
   Beshno uses actual cards. */
html.dark-skin .magazine2 .container-wrapper,
html.dark-skin .mag-box > .container-wrapper,
html.dark-skin .post-content.container-wrapper,
html.dark-skin .entry-header-outer.container-wrapper {
	background-color: var(--beshno-dark-surface) !important;
}

html.dark-skin .mag-box,
html.dark-skin .post-components,
html.dark-skin .comments-area,
html.dark-skin .comment-respond,
html.dark-skin #check-also-box,
html.dark-skin .tabs-wrapper,
html.dark-skin .tab-content {
	border-color: var(--beshno-dark-border) !important;
}

/* Cards: subtle separation without heavy magazine shadows */
html.dark-skin .container-wrapper,
html.dark-skin .sidebar .widget {
	border-radius: 12px;
	box-shadow: none;
}

/* Headings and primary text */
html.dark-skin h1,
html.dark-skin h2,
html.dark-skin h3,
html.dark-skin h4,
html.dark-skin h5,
html.dark-skin h6,
html.dark-skin .page-title,
html.dark-skin .entry-title,
html.dark-skin .post-title,
html.dark-skin .widget-title,
html.dark-skin .the-subtitle {
	color: var(--beshno-dark-text) !important;
}

/* Secondary text */
html.dark-skin .post-excerpt,
html.dark-skin .post-meta,
html.dark-skin .post-meta a:not(:hover),
html.dark-skin .entry-header .entry-sub-title,
html.dark-skin .wp-caption .wp-caption-text,
html.dark-skin .timeline-widget ul li .date,
html.dark-skin .breadcrumb,
html.dark-skin #breadcrumb {
	color: var(--beshno-dark-muted) !important;
}

/* Regular links */
html.dark-skin .entry-content a,
html.dark-skin .post-content a {
	color: var(--beshno-dark-primary);
}

html.dark-skin .entry-content a:hover,
html.dark-skin .post-content a:hover {
	color: var(--beshno-dark-primary) !important;
}

/* Separators / borders */
html.dark-skin hr,
html.dark-skin .divider,
html.dark-skin .comment-list li,
html.dark-skin .commentlist li,
html.dark-skin .entry table *,
html.dark-skin .tabs,
html.dark-skin .tabs a,
html.dark-skin .post-tags a,
html.dark-skin .widget_tag_cloud .tagcloud a,
html.dark-skin .pages-nav .pages-numbers a,
html.dark-skin .multiple-post-pages .post-page-numbers {
	border-color: var(--beshno-dark-border) !important;
}

/* Tabs / filter popups */
html.dark-skin .tabs a {
	background-color: var(--beshno-dark-surface-2);
}

html.dark-skin .tabs a:not(:hover),
html.dark-skin .mag-box .mag-box-filter-links a:not(:hover) {
	color: var(--beshno-dark-muted);
}

html.dark-skin .tabs .active > a,
html.dark-skin .tabs a:hover {
	color: var(--beshno-dark-primary) !important;
}

html.dark-skin .mag-box .mag-box-filter-links .flexMenu-popup,
html.dark-skin .flex-tabs .flexMenu-popup {
	background-color: var(--beshno-dark-surface-2) !important;
	border-color: var(--beshno-dark-border) !important;
}

/* Tags */
html.dark-skin .post-tags a,
html.dark-skin .widget_tag_cloud .tagcloud a,
html.dark-skin .widget_product_tag_cloud a {
	background-color: var(--beshno-dark-surface-2);
	color: var(--beshno-dark-link) !important;
}

html.dark-skin .post-tags a:hover,
html.dark-skin .widget_tag_cloud .tagcloud a:hover,
html.dark-skin .widget_product_tag_cloud a:hover {
	background-color: var(--beshno-dark-primary) !important;
	border-color: var(--beshno-dark-primary) !important;
	color: #fff !important;
}

/* Pagination / load more */
html.dark-skin .show-more-button,
html.dark-skin .pages-nav .pages-numbers a,
html.dark-skin .pages-nav .pages-numbers span.pages-nav-item,
html.dark-skin .multiple-post-pages .post-page-numbers {
	background-color: var(--beshno-dark-surface-2);
	color: var(--beshno-dark-link);
}

html.dark-skin .show-more-button:hover,
html.dark-skin .pages-nav .pages-numbers a:hover,
html.dark-skin .multiple-post-pages .post-page-numbers:hover {
	background-color: var(--beshno-dark-primary) !important;
	border-color: var(--beshno-dark-primary) !important;
	color: #fff !important;
}

/* Tables */
html.dark-skin .entry table,
html.dark-skin .entry table td,
html.dark-skin .entry table th {
	background-color: var(--beshno-dark-surface);
	color: var(--beshno-dark-text);
	border-color: var(--beshno-dark-border) !important;
}

html.dark-skin .wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) {
	background-color: var(--beshno-dark-surface-2);
}

/* Quotes */
html.dark-skin .entry blockquote,
html.dark-skin .entry .wp-block-quote,
html.dark-skin .entry .wp-block-pullquote {
	background-color: var(--beshno-dark-surface-2);
	color: var(--beshno-dark-text);
	border-color: var(--beshno-dark-primary) !important;
}

/* Buttons */
html.dark-skin .button:not(.search-submit),
html.dark-skin .more-link,
html.dark-skin input[type="submit"]:not(.search-submit) {
	border-color: var(--beshno-dark-border);
}

html.dark-skin .button:not(.search-submit):hover,
html.dark-skin .more-link:hover,
html.dark-skin input[type="submit"]:not(.search-submit):hover {
	background-color: var(--beshno-dark-primary) !important;
	border-color: var(--beshno-dark-primary) !important;
	color: #fff !important;
}

/* =========================================================
   4) Sidebars + widgets (right and left)
   ========================================================= */
html.dark-skin .sidebar,
html.dark-skin .sidebar-right,
html.dark-skin .sidebar-left,
html.dark-skin .widget-area,
html.dark-skin .normal-side {
	color: var(--beshno-dark-muted);
}

html.dark-skin .sidebar .container-wrapper,
html.dark-skin .sidebar .widget,
html.dark-skin .widget-area .widget,
html.dark-skin .normal-side .widget {
	background-color: var(--beshno-dark-surface) !important;
	border-color: var(--beshno-dark-border) !important;
}

html.dark-skin .sidebar .widget-title,
html.dark-skin .widget-area .widget-title,
html.dark-skin .normal-side .widget-title {
	color: var(--beshno-dark-text) !important;
}

html.dark-skin .sidebar .widget a:not(:hover),
html.dark-skin .widget-area .widget a:not(:hover),
html.dark-skin .normal-side .widget a:not(:hover) {
	color: var(--beshno-dark-link);
}

html.dark-skin .sidebar .widget a:hover,
html.dark-skin .widget-area .widget a:hover,
html.dark-skin .normal-side .widget a:hover {
	color: var(--beshno-dark-primary) !important;
}

html.dark-skin .sidebar .widget li,
html.dark-skin .widget-area .widget li,
html.dark-skin .normal-side .widget li {
	border-color: var(--beshno-dark-border) !important;
}

/* =========================================================
   5) Forms — SEARCH IS INTENTIONALLY EXCLUDED
   ========================================================= */
html.dark-skin input:not([type="search"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.dark-skin textarea,
html.dark-skin select {
	background-color: var(--beshno-dark-surface-2);
	color: var(--beshno-dark-text);
	border-color: var(--beshno-dark-border) !important;
}

html.dark-skin input:not([type="search"])::placeholder,
html.dark-skin textarea::placeholder {
	color: var(--beshno-dark-muted);
	opacity: .75;
}

/*
 * Deliberately untouched:
 * .tie-popup
 * .tie-popup-container
 * #autocomplete-suggestions
 * .search-bar
 * .search-form
 * #search-input
 * input[type="search"]
 * Full-screen search / live-search containers
 */

/* Footer and copyright are intentionally untouched: Jannah controls their colors. */

/* =========================================================
   7) Mobile + Slide Sidebar
   ========================================================= */
@media (max-width: 991px) {
	html.dark-skin #theme-header,
	html.dark-skin .mobile-header-components {
		background-color: var(--beshno-dark-header) !important;
		border-color: var(--beshno-dark-border) !important;
	}

	html.dark-skin .mobile-header-components .nav-icon,
	html.dark-skin .mobile-header-components .nav-icon:before,
	html.dark-skin .mobile-header-components .nav-icon:after {
		background-color: var(--beshno-dark-text) !important;
	}

	html.dark-skin .mobile-header-components .menu-text {
		color: var(--beshno-dark-text) !important;
	}

	html.dark-skin .side-aside,
	html.dark-skin #slide-sidebar-widgets,
	html.dark-skin .side-aside .widget {
		background-color: var(--beshno-dark-surface) !important;
		color: var(--beshno-dark-text);
		border-color: var(--beshno-dark-border) !important;
	}

	html.dark-skin .side-aside a:not(:hover) {
		color: var(--beshno-dark-link);
	}

	html.dark-skin .side-aside a:hover {
		color: var(--beshno-dark-primary) !important;
	}
}

/* =========================================================
   8) Small native-dark refinements
   ========================================================= */
html.dark-skin .sticky {
	background-color: var(--beshno-dark-surface-2);
}

html.dark-skin .tie-slider-nav span {
	background-color: var(--beshno-dark-surface-2);
}

html.dark-skin .mag-box .mag-box-filter-links .flexMenu-popup {
	box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

/* Keep album/song cover images vivid: no dimming here. */
html.dark-skin img {
	filter: none;
}


/* =========================================================
   9) v0.6 — Header edge fix + visible header controls
   ========================================================= */

/*
 * Some Jannah header layouts leave the outer 15px gutters visible.
 * This filler exists only in site-wide Dark Mode and does not change
 * the header width, menu geometry, dropdowns, or search behavior.
 */
html.dark-skin body #tie-wrapper header#theme-header {
	background: var(--beshno-dark-header) !important;
	background-color: var(--beshno-dark-header) !important;
}

html.dark-skin body:not(.is-header-bg-extended) #theme-header {
	position: relative;
}

html.dark-skin body:not(.is-header-bg-extended) #theme-header::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--beshno-dark-header);
	pointer-events: none;
	z-index: -1;
}

/*
 * Only icon colors are changed here.
 * Search forms, search overlays, live-search and autocomplete stay native.
 */
html.dark-skin #theme-header .components #search-submit,
html.dark-skin #theme-header .components #search-submit [class*="tie-icon-search"],
html.dark-skin #theme-header .components [class^="tie-icon-search"],
html.dark-skin #theme-header .components [class*=" tie-icon-search"] {
	color: var(--beshno-dark-search-icon) !important;
	opacity: 1 !important;
}

html.dark-skin #theme-header .components #search-submit:hover,
html.dark-skin #theme-header .components #search-submit:hover [class*="tie-icon-search"] {
	color: #FFFFFF !important;
}

html.dark-skin #theme-header .change-skin-icon,
html.dark-skin #theme-header .change-skin-icon:before,
html.dark-skin #theme-header a.change-skin,
html.dark-skin #theme-header .components a:has(.change-skin-icon) {
	color: var(--beshno-dark-switch-icon) !important;
	opacity: 1 !important;
}

html.dark-skin #theme-header a.change-skin:hover,
html.dark-skin #theme-header .components a:has(.change-skin-icon):hover,
html.dark-skin #theme-header .components a:has(.change-skin-icon):hover .change-skin-icon {
	color: #FFFFFF !important;
}

/* Mobile uses the same two accent colors. */
@media (max-width: 991px) {
	html.dark-skin #theme-header .mobile-header-components #search-submit,
	html.dark-skin #theme-header .mobile-header-components [class^="tie-icon-search"],
	html.dark-skin #theme-header .mobile-header-components [class*=" tie-icon-search"] {
		color: var(--beshno-dark-search-icon) !important;
	}

	html.dark-skin #theme-header .mobile-header-components .change-skin-icon,
	html.dark-skin #theme-header .mobile-header-components .change-skin-icon:before {
		color: var(--beshno-dark-switch-icon) !important;
	}
}


/* =========================================================
   10) v0.8 — Header text visibility in Dark Mode
   ========================================================= */
html.dark-skin #theme-header .main-nav .menu > li > a,
html.dark-skin #theme-header .main-nav .components > li > a,
html.dark-skin #theme-header .main-menu-wrapper .menu > li > a,
html.dark-skin #theme-header .top-nav .menu > li > a {
	color: var(--beshno-dark-link) !important;
}

html.dark-skin #theme-header .main-nav .menu > li:hover > a,
html.dark-skin #theme-header .main-nav .menu > li.current-menu-item > a,
html.dark-skin #theme-header .main-nav .menu > li.current-menu-ancestor > a,
html.dark-skin #theme-header .main-nav .components > li > a:hover,
html.dark-skin #theme-header .top-nav .menu > li > a:hover {
	color: var(--beshno-dark-primary) !important;
}

/* Keep dropdown text legible too, without touching search overlays. */
html.dark-skin #theme-header .main-nav .sub-menu a:not(:hover),
html.dark-skin #theme-header .main-nav .menu-sub-content a:not(:hover),
html.dark-skin #theme-header .main-nav .mega-menu-content a:not(:hover) {
	color: var(--beshno-dark-link) !important;
}


/* =========================================================
   11) v0.8.3 — Mobile header edges + mobile menu contrast
   ========================================================= */
@media (max-width: 991px) {
  /* Keep the entire mobile header strip and its side gutters dark. */
  html.dark-skin body #theme-header,
  html.dark-skin body #theme-header .container,
  html.dark-skin body #theme-header .header-content,
  html.dark-skin body #theme-header .mobile-header-components,
  html.dark-skin body #theme-header .logo-container,
  html.dark-skin body #theme-header .header-container {
    background: var(--beshno-dark-header) !important;
    background-color: var(--beshno-dark-header) !important;
    border-color: var(--beshno-dark-border) !important;
  }

  html.dark-skin body #theme-header::before {
    z-index: 0;
  }

  html.dark-skin body #theme-header > *,
  html.dark-skin body #theme-header .container,
  html.dark-skin body #theme-header .mobile-header-components {
    position: relative;
  }

  /* Jannah mobile hamburger may be a font icon rather than .nav-icon bars. */
  html.dark-skin #theme-header .mobile-header-components a,
  html.dark-skin #theme-header .mobile-header-components button,
  html.dark-skin #theme-header .mobile-header-components [class*="tie-icon-menu"],
  html.dark-skin #theme-header .mobile-header-components [class*="menu-icon"],
  html.dark-skin #theme-header .mobile-header-components .menu-toggle,
  html.dark-skin #theme-header .mobile-header-components .nav-icon,
  html.dark-skin #theme-header .mobile-header-components .nav-icon::before,
  html.dark-skin #theme-header .mobile-header-components .nav-icon::after {
    color: var(--beshno-dark-text) !important;
    border-color: var(--beshno-dark-text) !important;
    opacity: 1 !important;
  }

  html.dark-skin #theme-header .mobile-header-components .nav-icon,
  html.dark-skin #theme-header .mobile-header-components .nav-icon::before,
  html.dark-skin #theme-header .mobile-header-components .nav-icon::after {
    background-color: var(--beshno-dark-text) !important;
  }

  /* Mobile slide-out navigation: readable text in normal and active states. */
  html.dark-skin .side-aside,
  html.dark-skin .side-aside .container-wrapper,
  html.dark-skin #slide-sidebar-widgets,
  html.dark-skin #mobile-menu,
  html.dark-skin .mobile-menu,
  html.dark-skin .mobile-menu-container,
  html.dark-skin .off-canvas-menu,
  html.dark-skin .side-aside .menu,
  html.dark-skin .side-aside .menu li,
  html.dark-skin .side-aside .menu ul {
    background-color: var(--beshno-dark-surface) !important;
    color: var(--beshno-dark-text) !important;
    border-color: var(--beshno-dark-border) !important;
  }

  html.dark-skin .side-aside a,
  html.dark-skin #slide-sidebar-widgets a,
  html.dark-skin #mobile-menu a,
  html.dark-skin .mobile-menu a,
  html.dark-skin .mobile-menu-container a,
  html.dark-skin .off-canvas-menu a,
  html.dark-skin .side-aside .menu a,
  html.dark-skin .side-aside .menu-item > a,
  html.dark-skin .side-aside .menu-item > a span,
  html.dark-skin .side-aside .menu-item > a i,
  html.dark-skin .side-aside .menu-item > a::before {
    color: var(--beshno-dark-text) !important;
  }

  html.dark-skin .side-aside a:hover,
  html.dark-skin #slide-sidebar-widgets a:hover,
  html.dark-skin #mobile-menu a:hover,
  html.dark-skin .mobile-menu a:hover,
  html.dark-skin .mobile-menu-container a:hover,
  html.dark-skin .off-canvas-menu a:hover,
  html.dark-skin .side-aside .current-menu-item > a,
  html.dark-skin .side-aside .current-menu-ancestor > a {
    color: var(--beshno-dark-primary) !important;
  }
}