/*
Theme Name: OmniX
Theme URI: https://example.com/omnix
Author: Hemsagar Patel
Author URI: https://example.com/
Description: OmniX is a next-generation WordPress theme designed for speed, SEO, and simplicity. Built with Tailwind CSS, it achieves a perfect 100/100 Google PageSpeed score without needing cache plugins.

It comes with a dedicated OmniX Toolkit plugin that adds premium features like an Intelligent Sticky Header, Reading Progress Bar, Auto Table of Contents, and Portfolio Management—keeping your content safe even if you switch themes. Perfect for bloggers, developers, and agencies who value clean code and modern UI.
Version: 2.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: omnix
Tags: wordpress-theme, tailwind-css, seo-friendly, fast-loading, minimalist, blog-theme, sticky-header, table-of-contents, reading-progress-bar, portfolio, mobile-responsive, schema-markup, starter-theme, no-jquery, lightweight, gpl-license, customizer-api
*/

/* ==============================================
   1. BASE & WORDPRESS CORE
   ============================================== */
html {
    scroll-behavior: smooth;
    overflow: visible !important; /* Vital for Sticky Sidebar */
}

body {
    background-color: #f9fafb; /* Matches Tailwind gray-50 */
    color: #374151;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll only on body */
}

/* Accessibility */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow-x: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* WP Alignments */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; margin-left: 1.5em; }
.alignleft { float: left; margin-right: 1.5em; }

/* ==============================================
   2. MAIN NAVIGATION (DESKTOP)
   ============================================== */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.main-navigation ul li {
    position: relative;
    padding: 0 15px;
}

.main-navigation ul li a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

/* Sub-menu styling */
.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    flex-direction: column;
    z-index: 999;
    border-radius: 8px;
    padding: 10px 0;
    border: 1px solid #f3f4f6;
}

.main-navigation ul ul li { padding: 0; width: 100%; }
.main-navigation ul ul a { display: block; padding: 10px 20px; color: #374151; font-size: 0.95rem; }
.main-navigation ul ul a:hover { background-color: #eff6ff; color: #2563eb; }

/* Show Dropdown on Hover */
.main-navigation li:hover > ul { display: flex; }

/* ==============================================
   3. MOBILE DRAWER / OFF-CANVAS
   ============================================== */
.mobile-menu-drawer {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.mobile-menu-drawer.active { transform: translateX(0); }

.mobile-menu-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
.mobile-menu-overlay.active { display: block !important; opacity: 1; pointer-events: auto; }

.mobile-navigation ul { list-style: none; padding: 0; margin: 0; }
.mobile-navigation li { border-bottom: 1px solid #f3f4f6; }
.mobile-navigation li a { display: block; padding: 12px 0; text-decoration: none; color: #374151; font-weight: 500; }

.mobile-navigation ul ul {
    display: block; padding-left: 20px; background: transparent; box-shadow: none; border: none; position: static;
}
.mobile-navigation ul ul li { border-bottom: none; }
.mobile-navigation ul ul a { font-size: 0.9em; color: #6b7280; padding: 8px 0; }

/* ==============================================
   4. NEW FOOTER STYLING (Brainstorm Style)
   ============================================== */
#colophon .widget {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

#colophon.site-footer {
    background-color: #f8f9fa !important;
    color: #374151 !important;
    border-top: 1px solid #e5e7eb;
}

#colophon .widget-title, #colophon h4, #colophon h2 {
    color: #111827 !important;
    font-size: 20px !important; 
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-bottom: none !important;
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
}
#colophon .widget-title::after { display: none !important; }

#colophon a {
    color: #4b5563 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    padding: 0 !important;
    padding-bottom: 1px;
    width: auto !important;
    display: inline-block;
}
#colophon a:hover { color: #2563eb !important; text-decoration: underline !important; }

#colophon ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#colophon ul li { border-bottom: none !important; padding: 2px 0 !important; margin-bottom: 2px !important; line-height: 1.4 !important; display: block !important; }

.footer-col-1 a.social-link, .footer-col-1 .wp-block-social-links a {
    font-size: 20px; margin-right: 15px; color: #2563eb !important; display: inline-block !important;
}
#colophon .border-t { border-top: 1px solid #e5e7eb !important; }

/* ==============================================
   5. PRO FEATURES (TRANSPARENT HEADER)
   ============================================== */
body.omnix-header-transparent .site-header {
    position: absolute; top: 0; left: 0; width: 100%; background-color: transparent !important;
    box-shadow: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15); z-index: 50;
}
body.omnix-header-transparent .top-bar {
    background-color: transparent !important; position: absolute; top: 0; width: 100%; z-index: 51; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.omnix-header-transparent .site-header { top: 40px; }
body.omnix-header-transparent .site-header a, body.omnix-header-transparent .site-title, body.omnix-header-transparent .site-header p {
    color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
body.omnix-header-transparent .mobile-menu-toggle { color: #ffffff !important; }

body.omnix-no-padding .site-content-area, body.omnix-no-padding .site-content-area .container {
    padding-top: 0 !important; padding-bottom: 0 !important;
}

/* =======================================================
   🔥 FIXED SIDEBAR UI DESIGN
   ======================================================= */
aside .widget, #secondary-right .widget, #secondary-left .widget, .sidebar .widget, .widget-area .widget:not(#colophon .widget) {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #f3f4f6 !important;
    position: relative;
    overflow-x: hidden;
    display: block;
}

aside .widget-title, #secondary-right h2, #secondary-left h2, .sidebar h2 {
    font-size: 16px !important; font-weight: 800 !important; color: #111827 !important;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px !important; padding-bottom: 12px !important;
    border-bottom: 2px solid #f3f4f6 !important; position: relative; display: block;
}
aside .widget-title::after, .sidebar h2::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 50px; height: 3px; background-color: #2563eb; border-radius: 2px;
}

/* =======================================================
   🔍 FIXED SEARCH BAR DESIGN
   ======================================================= */
.widget_search .wp-block-search__label, .widget_search label { display: none !important; }
.widget_search .wp-block-search__inside-wrapper, .widget_search form {
    display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; width: 100% !important;
}
.widget_search input.wp-block-search__input, .widget_search input[type="search"] {
    flex-grow: 1; width: 100%; padding: 12px 15px !important; background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important; border-radius: 6px !important; font-size: 14px; color: #374151; outline: none; height: auto !important;
}
.widget_search input:focus { border-color: #2563eb !important; background-color: #fff !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.widget_search button.wp-block-search__button, .widget_search input[type="submit"] {
    flex-shrink: 0; background-color: #2563eb !important; color: #ffffff !important; border: none !important;
    border-radius: 6px !important; padding: 10px 20px !important; font-weight: 600 !important; font-size: 14px; cursor: pointer; margin: 0 !important;
}
.widget_search button:hover, .widget_search input[type="submit"]:hover { background-color: #1d4ed8 !important; }

/* RECENT POSTS LIST */
.widget_recent_entries ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.widget_recent_entries ul li { padding: 12px 0 !important; border-bottom: 1px dashed #e5e7eb !important; display: flex; flex-direction: column; }
.widget_recent_entries ul li:last-child { border-bottom: none !important; }
.widget_recent_entries ul li a { font-weight: 600 !important; font-size: 15px !important; color: #374151 !important; text-decoration: none; line-height: 1.4; }
.widget_recent_entries ul li a:hover { color: #2563eb !important; }
.widget_recent_entries .post-date { font-size: 12px !important; color: #9ca3af !important; margin-top: 4px; display: block; }

/* =======================================================
   6. CONTENT TYPOGRAPHY
   ======================================================= */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    color: #111827; line-height: 1.3; margin-top: 1.5em; margin-bottom: 0.6em;
}
.entry-content h1 { font-size: 2.5rem !important; font-weight: 800 !important; }
.entry-content h2 { font-size: 2.0rem !important; font-weight: 700 !important; border-bottom: none !important; }
.entry-content h3 { font-size: 1.75rem !important; font-weight: 600 !important; }
.entry-content h4 { font-size: 1.5rem !important; font-weight: 600 !important; }
.entry-content h5 { font-size: 1.25rem !important; font-weight: 600 !important; }
.entry-content h6 { font-size: 1rem !important; font-weight: 700 !important; text-transform: uppercase; color: #6b7280; }
.entry-content p { font-size: 1.125rem !important; line-height: 1.8 !important; margin-bottom: 1.5em !important; color: #374151; }
.entry-content ul, .entry-content ol { font-size: 1.125rem !important; margin-bottom: 1.5em; padding-left: 1.5em; }
.entry-content li { margin-bottom: 0.5em; }

/* =======================================================
   7. WOOCOMMERCE FIXES
   ======================================================= */
.woocommerce button.button.alt, .woocommerce a.button.alt {
    background-color: #2563eb !important; color: #fff !important; border-radius: 6px; font-weight: 700;
}
.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { background-color: #1d4ed8 !important; }
.woocommerce input.input-text { padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; }

/* =======================================================
   8. LAYOUT FIXES
   ======================================================= */
body { overflow-x: hidden !important; }
.container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; }
img, video, iframe { max-width: 100%; height: auto; }
@media (min-width: 1024px) { .lg\:w-8\/12 { width: 66.666667% !important; } .lg\:w-4\/12 { width: 33.333333% !important; } }

/* 🚫 HIDE EMPTY WIDGETS */
aside .widget:empty, .widget-area .widget:empty, .widget:blank {
    display: none !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; height: 0 !important;
}

/* =========================================
   OMNIX SIDEBAR FIX (Remove Scrollbar)
   ========================================= */
.widget, aside.widget, #secondary .widget, .sidebar .widget {
    max-height: none !important; height: auto !important; overflow: visible !important; overflow-y: visible !important;
}
.widget ul, .widget_recent_entries ul, .widget_categories ul {
    max-height: none !important; overflow: visible !important; display: block !important;
}
.widget::-webkit-scrollbar { display: none; width: 0px; }

/* =========================================
   🚀 STICKY SIDEBAR
   ========================================= */
.site-content, .site-main, .content-area { overflow: visible !important; }
aside#secondary, .widget-area, .sidebar, #secondary-right, #secondary-left {
    display: block !important; position: -webkit-sticky !important; position: sticky !important;
    top: 100px !important; height: fit-content !important; align-self: flex-start !important; z-index: 10;
}

/* ==============================================
   🍞 BREADCRUMBS REDESIGN (Minimal & Clean)
   ============================================== */
.rank-math-breadcrumb, #breadcrumbs, .breadcrumbs {
    background-color: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; margin-top: 15px !important; margin-bottom: 5px !important; width: 100%;
}
.rank-math-breadcrumb p, .breadcrumbs {
    font-size: 13px !important; font-weight: 500 !important; color: #6b7280 !important; margin: 0 !important; line-height: 1.5;
}
.rank-math-breadcrumb a, .breadcrumbs a {
    color: #374151 !important; text-decoration: none !important; transition: color 0.2s;
}
.rank-math-breadcrumb a:hover, .breadcrumbs a:hover {
    color: #2563eb !important; text-decoration: underline !important;
}
.rank-math-breadcrumb .separator { margin: 0 6px !important; color: #d1d5db !important; }
.rank-math-breadcrumb a:first-child { display: inline-flex; align-items: center; gap: 4px; }

/* =========================================
   COMPACT COMMENT BOX FIX
   ========================================= */
#respond {
    padding: 20px !important; margin-top: 20px !important; background-color: #f9fafb;
    border-radius: 10px; border: 1px solid #e5e7eb; max-width: 100%;
}
#reply-title { font-size: 16px !important; font-weight: 700 !important; margin-bottom: 15px !important; display: block; }
#commentform textarea { height: 80px !important; padding: 10px !important; font-size: 14px !important; border-radius: 6px !important; }
#commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"] {
    padding: 8px 12px !important; font-size: 14px !important; min-height: 40px !important; border-radius: 6px !important;
}
.comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-comment label {
    font-size: 12px !important; font-weight: 600 !important; color: #6b7280;
}
#commentform .submit {
    padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important; margin-top: 10px !important; width: auto !important; border-radius: 6px !important;
}
.comment-notes, .logged-in-as { font-size: 12px !important; margin-bottom: 10px !important; color: #9ca3af; }

/* =========================================
   🔥 CARD STYLE TABLE DESIGN (Toggleable)
   ========================================= */

/* 1. Main Table Container (Sirf tab chalega jab ON ho) */
.omnix-card-tables-on .entry-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
    font-size: 15px;
}

/* 2. Cells Style */
.omnix-card-tables-on .entry-content table td, 
.omnix-card-tables-on .entry-content table th {
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    border-top: none;
    border-left: none;
    border-right: none;
    vertical-align: middle;
    color: #374151;
    line-height: 1.5;
}

/* 3. Bold First Column */
.omnix-card-tables-on .entry-content table tr td:first-child {
    font-weight: 700;
    color: #111827;
    background-color: #f9fafb;
    width: 35%;
}

/* 4. Last Row Fix */
.omnix-card-tables-on .entry-content table tr:last-child td {
    border-bottom: none;
}

/* 5. Mobile Scroll */
.omnix-card-tables-on .wp-block-table {
    overflow-x: auto;
    border-radius: 12px;
}

/* 6. Badges (Always work regardless of toggle) */
.badge-success {
    display: inline-block;
    background-color: #d1fae5;
    color: #065f46;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.text-red {
    color: #dc2626;
    font-weight: 600;
}

/* =========================================
   HINDI FONT FIX (Compact & Clean)
   ========================================= */

h1.entry-title {
    /* 1. Font Size Control (Bahut bada nahi) */
    font-size: 28px !important;      /* Mobile ke liye */
    
    /* 2. Line Height Balance */
    line-height: 1.4 !important;     /* Hindi matra ke liye perfect gap */
    
    /* 3. Spacing Control */
    margin-top: 10px !important;     /* Badge se chipka hua */
    margin-bottom: 15px !important;  /* Niche gap kam */
    
    /* 4. Text Color & Weight */
    color: #111827;
    font-weight: 800 !important;
}

/* Desktop ke liye thoda bada (lekin 5xl jitna nahi) */
@media (min-width: 768px) {
    h1.entry-title {
        font-size: 36px !important;  /* Pehle ye ~48px tha, ab chhota hai */
        line-height: 1.35 !important;
    }
}

/* Category Badge ko thoda upar khiskaya */
.entry-header .mb-3, 
.entry-header .mb-4 {
    margin-bottom: 8px !important;
}

/* =========================================
   SIDEBAR LIST SEPARATOR FIX
   ========================================= */

/* 1. Target Recent Posts & List Items */
.widget_recent_entries ul li,
.wp-block-latest-posts__list-item,
.widget ul li {
    border-bottom: 1px dashed #d1d5db !important; /* Halka gray dashed border */
    padding-bottom: 12px !important;             /* Niche jagah */
    margin-bottom: 12px !important;              /* Agle item se duri */
    line-height: 1.5 !important;                 /* Text khula-khula */
    display: block !important;
}

/* 2. Last Item Clean (Last wale me line nahi dikhegi) */
.widget_recent_entries ul li:last-child,
.wp-block-latest-posts__list-item:last-child,
.widget ul li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Link Styling (Hover Effect) */
.widget_recent_entries a,
.widget ul li a {
    text-decoration: none !important;
    color: #374151 !important;   /* Dark Gray */
    font-weight: 500 !important; /* Thoda Bold */
    display: block;              /* Pura clickable area */
    transition: color 0.2s ease;
}

.widget_recent_entries a:hover,
.widget ul li a:hover {
    color: #2563eb !important;   /* Blue on Hover */
}