/*
Theme Name: StudyBix Theme
Theme URI: https://studybix.in/
Author: Gautamaditya
Author URI: https://yourwebsite.com/
Description: A fully custom WordPress theme based on a static HTML design.
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studybix
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Preload & Animations
2.0 Global Resets & Helpers
3.0 Layout: Header, Main Content, Sidebars
4.0 Overlays: Mobile Sidebar & Search
5.0 Dark Mode
6.0 Components: Content Box, Footer Nav, Widgets
7.0 Search Forms (404 & Search Page)
--------------------------------------------------------------*/


/*--------------------------------------------------------------
1.0 Preload & Animations
--------------------------------------------------------------*/

body.preload {
    display: none;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.btn-blink-1 { animation: blink 1s infinite; }
.btn-blink-2 { animation: blink 1s infinite 0.5s; }


/*--------------------------------------------------------------
2.0 Global Resets & Helpers
--------------------------------------------------------------*/
* { box-sizing: border-box; }
html, body { overflow-x: hidden; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }

.hidden { display: none; }
.transition { transition: all 0.3s ease-in-out; }

.custom-scrollbar::-webkit-scrollbar { width: 2px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #888; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; }


/*--------------------------------------------------------------
3.0 Layout: Header, Main Content, Sidebars
--------------------------------------------------------------*/
.sticky-header {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 10000;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
}

.main-content-container {
    margin-top: 70px;
    transition: margin-left 0.3s ease-in-out;
    display: flex; flex-direction: column;
}

#sidebar {
    position: fixed; top: 0; left: 0; width: 16rem; height: 100vh;
    overflow-y: auto; transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 10002; /* --- FIX: Increased z-index to be above header/footer --- */
}
#sidebar.open { transform: translateX(0); }

.layout-container { display: flex; flex-direction: column; min-height: 100vh; }

/* Desktop Layout (1280px and up) */
@media (min-width: 1280px) {
    .sticky-header.shifted { left: 16rem; width: calc(100% - 16rem); }
    .main-content-container.shifted { margin-left: 16rem; }
    .content-sidebar-wrapper { display: flex; flex: 1; }
    .main-content { flex: 1; }
    .right-sidebar { width: 16rem; margin-left: 1rem; }
} 

/* Tablet & Mobile Layout (up to 1279px) */
@media (max-width: 1279px) {
    .sticky-header { left: 0; width: 100%; }
    .main-content-container { margin-left: 0; }
    .content-sidebar-wrapper { display: flex; flex-direction: column; flex: 1; }
    .right-sidebar { width: 100%; margin-top: 1rem; }
    #sidebar { visibility: hidden; }
    #sidebar.open { visibility: visible; }
}

/* Specific Sidebar Widths for Mobile/Tablet */
@media (max-width: 767px) { #sidebar { width: 70%; } }
@media (min-width: 768px) and (max-width: 1279px) { #sidebar { width: 40%; } }


/*--------------------------------------------------------------
4.0 Overlays: Mobile Sidebar & Search
--------------------------------------------------------------*/
/* Dimmed effect for main content */
.dimmed { opacity: 0.5; transition: opacity 0.3s ease-in-out; }

/* Overlay for sidebar on mobile/tablet */
#overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: transparent; z-index: 40;
}
#overlay.show { display: block; }

/* Full-screen search overlay */
#searchOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 11000; display: none;
    flex-direction: column; justify-content: flex-start; padding-top: 1rem;
    overflow-y: auto;
}
#searchOverlay.active { display: flex; }
#searchOverlay .close-btn {
    font-size: 1rem; color: #fff; cursor: pointer; background: none;
    border: 1px solid #fff; border-radius: 0.375rem; padding: 0.5rem 0.75rem;
}
.search-bar-container { position: relative; width: 100%; margin-bottom: 1rem; }
#overlaySearchInput {
    width: 100%; padding: 0.75rem 2.5rem;
    border: 1px solid #e2e8f0; border-radius: 0.375rem; outline: none;
}
.clear-icon {
    position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%);
    color: #a0aec0; cursor: pointer; font-size: 1rem;
}
.search-action {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    color: #a0aec0; cursor: pointer; font-size: 1rem;
}
#searchOverlay h3 {
    margin-top: 1rem; font-size: 1.125rem; font-weight: 600; color: #fff;
}
#searchHistory li {
    display: flex; align-items: center; justify-content: space-between;
    color: #fff; margin-top: 0.5rem; padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
#searchHistory li:last-child { border-bottom: none; }
#searchHistory li .remove-icon { font-size: 0.75rem; cursor: pointer; margin-left: 1rem; }
#clearHistoryBtn {
    background: none; border: 1px solid #fff; color: #fff;
    border-radius: 0.375rem; padding: 0.5rem 0.75rem; cursor: pointer;
}
#clearHistoryBtn:hover { background: rgba(255,255,255,0.2); }


/*--------------------------------------------------------------
5.0 Dark Mode
--------------------------------------------------------------*/
.dark-mode body { background-color: #121212; color: #E0E0E0; }
.dark-mode header,
.dark-mode .main-content,
.dark-mode #sidebar,
.dark-mode .content-box,
.dark-mode footer,
.dark-mode .dropdown-content {
    background-color: #121212; color: #E0E0E0;
}
.dark-mode a { color: #E0E0E0; }
.dark-mode a:hover { color: #FFD700; }  /* Yellow accent for links */
.dark-mode .text-red-500,
.dark-mode .text-red-600 { color: #FFD700; }  /* Replace red with yellow */
.dark-mode header i,
.dark-mode header svg,
.dark-mode header button { opacity: 1; color: #E0E0E0; fill: #E0E0E0; }

.dark-mode #overlaySearchInput {
    background-color: #2d3748; color: #e2e8f0; border: 1px solid #4a5568;
}

/* Sidebar Link Specificity Fix */
#sidebar a { color: #000 !important; }
.dark-mode #sidebar a { color: #E0E0E0 !important; }


/*--------------------------------------------------------------
6.0 Components: Content Box, Footer Nav, Widgets
--------------------------------------------------------------*/
.content-box {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.1);
    padding: 20px;
}
body.home .content-box {
    box-shadow: none !important;
}

nav.mobile {
    position: fixed; bottom: 0; left: 0; right: 0; width: 100%;
    background: #fff; border-top: 1px solid #ccc;
    z-index: 9999; /* --- FIX: Explicitly set z-index below header --- */
    padding: 0.5rem 0; overflow-x: hidden; box-sizing: border-box;
}
nav.mobile ul {
    display: flex; align-items: center; justify-content: space-evenly;
    gap: 1rem; list-style: none; margin: 0; padding: 0;
}
nav.mobile ul li { display: flex; flex-direction: column; align-items: center; }
nav.mobile ul li a {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none; color: #333; font-size: 0.75rem;
}
nav.mobile ul li a svg {
    display: block; width: 25px; height: 25px; margin-bottom: 4px;
}
@media (min-width: 1025px) { nav.mobile { display: none; } }
body { padding-bottom: 60px; } /* Prevent content from hiding behind fixed nav */

.dark-mode nav.mobile { background: #121212; border-top-color: #444; }
.dark-mode nav.mobile ul li a { color: #E0E0E0; }
.dark-mode nav.mobile ul li a svg { fill: currentColor; }

/* Ad & Widget Areas */
.below-header-ad-area, .above-footer-ad-area, .single-post-top-ad-area,
.single-post-mid-ad-area, .single-post-bottom-ad-area {
    margin-bottom: 15px; text-align: center; background: #f0f0f0; padding: 10px;
}
.below-header-widget-area, .above-footer-widget-area, .single-post-top-widget-area,
.single-post-mid-widget-area, .single-post-bottom-widget-area {
    margin-bottom: 20px;
}


/*--------------------------------------------------------------
7.0 Search Forms (404 & Search Page)
--------------------------------------------------------------*/
.search-container {
    background-color: #fff; border: 2px solid #dc3545;
    padding: 20px; border-radius: 5px;
    transition: all 0.3s ease;
    margin: 20px auto; max-width: 500px;
}
.search-container .search-field {
    width: 100%; padding: 10px; border: none; outline: none;
    background: inherit; color: inherit;
}
.search-submit {
    padding: 10px 20px; margin-top: 10px;
    background-color: #dc3545; color: white;
    border: none; border-radius: 5px;
    cursor: pointer; transition: background-color 0.3s ease;
}
.search-submit:hover { background-color: darkred; }

.dark-mode .search-container {
    background-color: #121212; border: 2px solid #FFD700;
}



/* --- Unified Exam Hub Item Styles --- */
.mock-test-list-item {
    background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.5rem;
    padding: 1rem; display: grid; grid-template-columns: 1fr;
    grid-template-areas: "header" "meta" "actions";
    gap: 1rem; transition: all 0.2s ease-in-out;
}
.mock-test-list-item:hover { border-color: #d1d5db; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.dark-mode .mock-test-list-item { background-color: #1f2937; border-color: #374151; }
.mock-test-list-item .item-header { grid-area: header; }
.mock-test-list-item .item-meta { grid-area: meta; }
.mock-test-list-item .item-actions { grid-area: actions; }
.mock-test-list-item .item-tags { margin-bottom: 0.75rem; }
.mock-test-list-item .item-tags span { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 9999px; text-transform: uppercase; }
.tag-free { background-color: #d1fae5; color: #065f46; }
.tag-premium { background-color: #e0f2fe; color: #0c4a6e; }
.tag-skill { background-color: #ede9fe; color: #5b21b6; }
.tag-bix { background-color: #fef3c7; color: #92400e; }
.dark-mode .tag-free, .dark-mode .tag-premium, .dark-mode .tag-skill, .dark-mode .tag-bix { color: #ffffff; }
.dark-mode .tag-free { background-color: #10b981; } .dark-mode .tag-premium { background-color: #3b82f6; } .dark-mode .tag-skill { background-color: #8b5cf6; } .dark-mode .tag-bix { background-color: #f59e0b; }
.mock-test-list-item .item-title { font-size: 1.25rem; font-weight: 600; color: #111827; line-height: 1.2; }
.dark-mode .mock-test-list-item .item-title { color: #f3f4f6; }
.mock-test-list-item .item-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; color: #6b7280; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.dark-mode .mock-test-list-item .item-meta { color: #9ca3af; border-top-color: #374151; }
.mock-test-list-item .item-meta span { display: flex; align-items: center; gap: 0.375rem; }
.mock-test-list-item .item-meta i { color: #3b82f6; }
.dark-mode .mock-test-list-item .item-meta i { color: #60a5fa; }
.action-buttons-wrapper { display: flex; gap: 0.5rem; justify-content: flex-start; width: 100%; }
.action-buttons-wrapper .button { flex-grow: 1; text-align: center; padding: 0.75rem 1rem; border-radius: 0.375rem; text-decoration: none; font-weight: 600; border: none; cursor: pointer; color: #fff; }
.button.button-start { background-color: #16a34a; }
.button.button-reattempt { background-color: #0284c7; }
.button.button-result { background-color: #6b7280; }
.button.button-unlock { background-color: #a855f7; }
@media (min-width: 768px) {
    .mock-test-list-item { grid-template-columns: 1fr auto; grid-template-areas: "header actions" "meta actions"; align-items: center; }
    .action-buttons-wrapper { width: auto; } .action-buttons-wrapper .button { flex-grow: 0; min-width: 120px; }
}
/* --- Disable Text Selection Globally --- */
body, .sblms-player-body {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}