/*
Theme Name: TechQor Lite Theme
Theme URI: https://techqor.com
Author: Krishna Sharma
Author URI: https://techqor.com
Description: Ultra lightweight professional Genesis child theme for TechQor.
Version: 1.0.0
Template: genesis
Text Domain: techqor-lite
License: GPL-2.0+
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/


/* =========================================
   ROOBERT FONT FAMILY
========================================= */

@font-face {
    font-family: 'Roobert';
    src: url('assets/fonts/Roobert-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('assets/fonts/Roobert-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('assets/fonts/Roobert-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('assets/fonts/Roobert-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =========================================
   HEADER BASE
========================================= */

.tq-header {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    z-index: 1000;
    transition: box-shadow .3s ease;
}

.tq-header.is-sticky {
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.tq-header-inner {
    height: 64px;
    display: flex;
    align-items: center;

}

/* =========================================
   LOGO
========================================= */

.tq-logo a {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    text-decoration: none;
}

/* =========================================
   DESKTOP NAVIGATION
========================================= */

.tq-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.tq-menu {
    display: flex;
    list-style: none;
    gap: 22px;
    margin: 0;
    padding: 0;
}

.tq-menu li {
    position: relative;
}

.tq-menu a {
    text-decoration: none;
    color: #111;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 0;
    transition: .2s;
}

.tq-menu a:hover {
    color: #e10600;
}

/* Submenu */

.tq-menu .sub-menu {
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 180px;
    border: 1px solid #eee;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .25s ease;
    z-index: 100;
}

.tq-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =========================================
   SEARCH
========================================= */

.tq-search-toggle {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.tq-search-popup {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    padding: 15px;
    border: 1px solid #eee;
    display: none;
}

.tq-search-popup.active {
    display: block;
}

/* =========================================
   HAMBURGER
========================================= */

.tq-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.tq-hamburger span {
    width: 22px;
    height: 2px;
    background: #111;
    transition: .3s ease;
}

/* Hamburger Animation */

#tq-menu-toggle:checked ~ .tq-header-inner .tq-hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px,5px);
}

#tq-menu-toggle:checked ~ .tq-header-inner .tq-hamburger span:nth-child(2) {
    opacity: 0;
}

#tq-menu-toggle:checked ~ .tq-header-inner .tq-hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px,-5px);
}

/* =========================================
   OFFCANVAS MOBILE MENU (SMOOTH + GLASS)
========================================= */

.tq-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
    z-index: 2000;
    overflow-y: auto;
    will-change: transform;
    box-shadow: 8px 0 30px rgba(0,0,0,0.15);
}

#tq-menu-toggle:checked ~ .tq-offcanvas {
    transform: translateX(0);
}

/* Glass Overlay */

.tq-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    z-index: 1500;
}

#tq-menu-toggle:checked ~ .tq-overlay {
    opacity: 1;
    visibility: visible;
}

/* Offcanvas Header */

.tq-offcanvas-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    font-size: 20px;
    font-weight: 600;
    position: relative;
}

.tq-close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 22px;
    cursor: pointer;
}

/* Mobile Menu */

.tq-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tq-mobile-menu li {
    border-bottom: 1px solid #eee;
    position: relative;
}

.tq-mobile-menu li a {
    display: block;
    padding: 16px 24px;
    font-size: 17px;
    font-weight: 500;
    color: #222;
    text-decoration: none;
}

/* Accordion */

.tq-mobile-menu .sub-menu {
    display: none;
    background: #f9f9f9;
}

.tq-mobile-menu li.open > .sub-menu {
    display: block;
}

/* =========================================
   MOBILE ACTIVE RED PULSE DOT
========================================= */

@media (max-width: 768px) {

    .tq-mobile-menu .current-menu-item > a::after {
        content: '';
        position: absolute;
        right: 22px;
        top: 50%;
        width: 8px;
        height: 8px;
        background: red;
        border-radius: 50%;
        transform: translateY(-50%);
        animation: pulseDot 1.5s infinite;
    }

}

@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(255,0,0,.6); }
    70% { box-shadow: 0 0 0 8px rgba(255,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); }
}

/* =========================================
   RESPONSIVE RULES
========================================= */

@media (max-width: 768px) {

    .tq-nav {
        display: none;
    }

    .tq-hamburger {
        display: flex;
    }

}

@media (min-width: 769px) {

    .tq-offcanvas,
    .tq-overlay {
        display: none;
    }

}

/* Hide checkbox completely */

.tq-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}



/* =========================================
   GLOBAL CONTAINER WIDTH CONTROL
========================================= */

/* Desktop */
@media (min-width: 1024px) {

    .site-inner,
    .wrap {
        width: 85%;
        max-width: 1400px;
        margin: 0 auto;
    }

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1023px) {

    .site-inner,
    .wrap {
        width: 90%;
        margin: 0 auto;
    }

}

/* Mobile */
@media (max-width: 768px) {

    .site-inner,
    .wrap {
        width: 95%;
        margin: 0 auto;
    }

}



/* Logo Size Control */

.tq-logo img {
    max-height: 48px;   /* Desktop height */
    width: auto;
    height: auto;
    display: block;
}

/* Mobile smaller logo */

@media (max-width: 768px) {
    .tq-logo img {
        max-height: 30px;
    }
}


/* =========================================
   OFFCANVAS SEARCH BAR
========================================= */

.tq-offcanvas-search {
    padding: 18px 24px;
}

.tq-offcanvas-search form {
    position: relative;
}

.tq-offcanvas-search input[type="search"] {
    width: 100%;
    height: 46px;
    border-radius: 28px;
    border: none;
    padding: 0 48px 0 18px;
    font-size: 16px;
    background: #f1f1f1;
    outline: none;
}

.tq-offcanvas-search input[type="search"]::placeholder {
    color: #777;
}

.tq-offcanvas-search button {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #555;
}



/* SVG Search Icon */

.tq-search-toggle svg,
.tq-search-icon svg {
    width: 20px;
    height: 20px;
    color: #111;
    transition: .2s ease;
}

.tq-search-toggle:hover svg,
.tq-search-icon:hover svg {
    color: #e10600;
}




/* =========================================
   FRONT PAGE STRUCTURE
========================================= */

.tq-front-wrapper section {
    padding: 60px 0;
}

.tq-front-hero {
    background: #f8f9fb;
}

.tq-front-featured {
    background: #ffffff;
}

.tq-front-categories {
    background: #f4f4f4;
}

.tq-front-cta {
    background: #111;
    color: #fff;
    text-align: center;
}

.tq-front-bottom {
    background: #ffffff;
}


/* =========================================
   DESKTOP PREMIUM FEATURED GRID (GENESIS)
========================================= */

@media (min-width: 992px) {

    .tq-front-featured .featured-content {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-auto-rows: auto;
        gap: 30px;
    }

    .tq-front-featured .featured-content .entry {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }

    /* FIRST POST BIG */
    .tq-front-featured .featured-content .entry:first-child {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .tq-front-featured .entry:first-child img {
        height: 520px;
        width: 100%;
        object-fit: cover;
    }

    /* NEXT 4 SMALL */
    .tq-front-featured .entry:not(:first-child) img {
        height: 240px;
        width: 100%;
        object-fit: cover;
    }

    /* Remove default float */
    .tq-front-featured .featured-content .alignleft {
        float: none !important;
        margin: 0 !important;
        display: block;
    }

    /* Title styling */
    .tq-front-featured .entry-title {
        margin-top: 15px;
        font-size: 20px;
    }

}



/* ===== SINGLE PRO LAYOUT ===== */

.tq-single-title {
    font-size: 34px;
    margin: 20px 0;
}

.tq-single-meta {
    display: flex;
   
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.tq-author-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tq-meta-text span {
    display: block;
    font-size: 14px;
    color: #666;
}

.tq-featured img {
    width: 100%;
    border-radius: 8px;
}

.tq-share {
    background: #f3f3f3;
    padding: 15px;
    text-align: center;
    margin: 20px 0;
}

.tq-author-box {
    display: flex;
    gap: 20px;
    background: #fafafa;
    padding: 25px;
    margin-top: 30px;
}

.tq-related-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 20px;
}

.tq-related-item img {
    width: 100%;
    border-radius: 6px;
}

/* Responsive */

@media (max-width: 768px) {

    .tq-single-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .tq-author-box {
        flex-direction: column;
    }

    .tq-related-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   GLOBAL FONT APPLY
========================================= */

body,
button,
input,
textarea,
select {
    font-family: 'Roobert', -apple-system, BlinkMacSystemFont, sans-serif;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}


body {
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -0.2px;
    color: #111;
}



@media (max-width: 768px) {

    .site-inner,
    .content-sidebar-wrap,
    .wrap {
        width: 95% !important;
        margin: 0 auto !important;
    }

    .entry-content {
        font-size: 16px;
        line-height: 1.7;
    }

    .entry-title {
        font-size: 28px;
        line-height: 1.3;
    }

}


@media (max-width: 768px) {

    .entry-content img,
    .wp-post-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

}
@media (max-width: 768px) {

    .tq-meta {
        font-size: 14px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

}


/* ===== FULL SINGLE LAYOUT ===== */

.tq-single-layout {
    max-width: 1100px;
}

.tq-breadcrumb {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.tq-single-title {
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: 12px;
}

.tq-meta-row {
    display: flex;
  
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.tq-author-meta {
    display: flex;
    gap: 12px;
    align-items: center;
}

.tq-author-meta span {
    display: block;
    font-size: 14px;
    color: #555;
}

.tq-social-inline a {
    margin-left: 10px;
    font-size: 14px;
}

.tq-featured-image img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 25px;
}

.tq-share {
    background: #f2f2f2;
    padding: 12px;
    text-align: center;
    margin: 20px 0;
}

.tq-content-wrap {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
}

.tq-article {
    font-size: 17px;
    line-height: 1.8;
}

.tq-author-box {
    display: flex;
    gap: 20px;
    background: #fafafa;
    padding: 25px;
    margin-top: 40px;
}

.tq-recent-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 20px;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {

    .tq-single-title {
        font-size: 28px;
    }

    .tq-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .tq-content-wrap {
        grid-template-columns: 1fr;
    }

    .tq-recent-grid {
        grid-template-columns: 1fr;
    }

}




/* ===== SINGLE POST LAYOUT ===== */

.tq-single-wrapper{
    max-width:1200px;
    margin:40px auto;
    display:grid;
    grid-template-columns: 1fr 360px;
    gap:36px;
}


.tq-post-category a{
    display:inline-block;
    background:#e10600;
    color:#fff;
    padding:4px 10px;
    font-size:12px;
    border-radius:6px;
    text-decoration:none;
    margin-bottom:10px;
}

.tq-post-title{
    font-size:36px;
    line-height:1.25;
    margin:10px 0 16px;
}

.tq-post-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:14px;
    color:#666;
    margin-bottom:24px;
}

.tq-post-meta img{
    border-radius:50%;
}

.tq-post-thumbnail img{
    width:100%;
    border-radius:16px;
    margin-bottom:24px;
}

.tq-share-bar{
    display:flex;
    gap:14px;
    margin:20px 0;
}

.tq-share-bar a{
    font-size:14px;
    text-decoration:none;
    color:#e10600;
    font-weight:600;
}

.tq-post-body{
    font-size:18px;
    line-height:1.9;
    color:#222;
}

.tq-author-card{
    display:flex;
    gap:18px;
    margin-top:40px;
    padding-top:24px;
    border-top:1px solid #eee;
}

.tq-author-card img{
    border-radius:50%;
}

.tq-single-sidebar{
    position:sticky;
    top:100px;
}

/* ===== MOBILE ===== */
@media(max-width:900px){
    .tq-single-wrapper{
        grid-template-columns:1fr;
    }
    .tq-single-sidebar{
        position:static;
    }
    .tq-post-title{
        font-size:28px;
    }
}




/* ===== FORCE SINGLE LAYOUT GRID ===== */

.single .content,
.single .site-inner,
.single .content-sidebar-wrap{
    width:100%;
    max-width:none;
    float:none;
}

.tq-single-wrapper{
    max-width:1200px;
    margin:40px auto;
    display:grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap:36px;
    align-items:start;
}

.tq-single-sidebar{
    min-width:0;
    position:sticky;
    top:110px;
}

/* Mobile */
@media(max-width:900px){
    .tq-single-wrapper{
        grid-template-columns:1fr;
    }
}



/* ===== POST META STRIP ===== */

.tq-post-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    font-size:13px;
    color:#777;
    margin:10px 0 22px;
}

.tq-post-meta img{
    border-radius:50%;
    vertical-align:middle;
    margin-right:4px;
}

.tq-meta-author{
    display:flex;
    align-items:center;
    gap:6px;
    color:#555;
}

.tq-meta-author strong{
    font-weight:500;
}

.tq-meta-sep{
    color:#bbb;
}

.tq-meta-comments,
.tq-meta-read{
    color:#777;
}



/* ===== META WITH CATEGORY ===== */

.tq-post-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    font-size:13px;
    color:#666;
    margin:10px 0 24px;
}

.tq-meta-item{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.tq-meta-item svg{
    width:14px;
    height:14px;
    fill:#999;
}

.tq-meta-category{
    color:#e10600;
    font-weight:500;
}

.tq-meta-category svg{
    fill:#e10600;
}

.tq-meta-author img{
    border-radius:50%;
}

.tq-meta-author strong{
    font-weight:500;
    color:#444;
}

/* ===== BREADCRUMB ===== */

.tq-breadcrumb{
    font-size:13px;
    color:#777;
    margin-bottom:10px;
}

.tq-breadcrumb a{
    color:#555;
    text-decoration:none;
}

.tq-breadcrumb a:hover{
    text-decoration:underline;
}

.tq-breadcrumb span{
    display:inline;
}

.tq-breadcrumb-inner{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    line-height:1.4;
}

/* Separator fix (Yoast) */
.tq-breadcrumb-inner span span{
    margin:0 4px;
}

/* ===== MOBILE OPTIMIZATION ===== */
@media (max-width: 768px){
    .tq-breadcrumb{
        font-size:12px;
        line-height:1.4;
    }
}



.tq-post-thumbnail{
    aspect-ratio: 16 / 9;
    overflow:hidden;
    border-radius:10px;
}

.tq-post-thumbnail img{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* ===============================
   COMMENTS – PROFESSIONAL
================================ */

.tq-comments{
    margin-top:48px;
    padding-top:32px;
    border-top:1px solid #eee;
}

.tq-comments-title{
    font-size:20px;
    margin-bottom:24px;
}

/* Comment list */
.tq-comment-list{
    list-style:none;
    padding:0;
    margin:0 0 32px;
}

.tq-comment-list li{
    display:flex;
    gap:14px;
    margin-bottom:24px;
}

.tq-comment-list .comment-body{
    flex:1;
}

/* Avatar */
.tq-comment-list img.avatar{
    border-radius:50%;
}

/* Author */
.tq-comment-list .comment-author{
    font-weight:600;
    font-size:14px;
    color:#222;
}

/* Meta */
.tq-comment-list .comment-metadata{
    font-size:12px;
    color:#777;
    margin:4px 0 8px;
}

/* Text */
.tq-comment-list .comment-content{
    font-size:14px;
    line-height:1.6;
    color:#444;
}

/* Reply */
.tq-comment-list .reply a{
    font-size:13px;
    color:#e10600;
    text-decoration:none;
}

/* Nested comments */
.tq-comment-list .children{
    margin-left:60px;
    margin-top:16px;
}

/* ===============================
   COMMENT FORM
================================ */

.tq-comment-form textarea,
.tq-comment-form input[type="text"],
.tq-comment-form input[type="email"]{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:14px;
    margin-bottom:12px;
}

.tq-comment-form textarea:focus,
.tq-comment-form input:focus{
    border-color:#e10600;
    outline:none;
}

/* Submit */
.tq-comment-form input[type="submit"]{
    background:#e10600;
    color:#fff;
    border:none;
    padding:12px 18px;
    font-size:14px;
    border-radius:6px;
    cursor:pointer;
}

.tq-comment-form input[type="submit"]:hover{
    background:#c80500;
}

/* ===============================
   MOBILE FIX
================================ */

@media (max-width:768px){

    .tq-comment-list li{
        flex-direction:column;
    }

    .tq-comment-list .children{
        margin-left:24px;
    }

}



/* ===============================
   AUTHOR COMMENT HIGHLIGHT
================================ */

.tq-author-comment{
    background:#f9f9f9;
    border-left:4px solid #e10600;
    padding:14px;
    border-radius:6px;
}

.tq-author-comment .comment-author::after{
    content:"Author";
    background:#e10600;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:4px;
    margin-left:6px;
}


/* ===============================
   COMMENT LIKE BUTTON
================================ */

.tq-like-comment{
    font-size:13px;
    color:#666;
    text-decoration:none;
    margin-right:12px;
}

.tq-like-comment:hover{
    color:#e10600;
}

.comment-actions{
    margin-top:8px;
}



/* ===============================
   SHARE BUTTONS (IMAGE STYLE)
================================ */

.tq-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.tq-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.tq-share svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

/* COLORS */
.tq-share.fb { background: #3b5998; }
.tq-share.tw { background: #1da1f2; }
.tq-share.pin { background: #bd081c; }
.tq-share.mail { background: #6c757d; }
.tq-share.wa { background: #25d366; }

/* Hover */
.tq-share:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,.15);
}

/* Mobile */
@media (max-width: 600px) {
    .tq-share-buttons {
       
    }

    .tq-share {
        flex: 1 1 48%;
        justify-content: center;
        font-size: 13px;
    }
}



/* ===============================
   MOBILE SHARE ICON ONLY (ONE LINE)
================================ */
@media (max-width: 600px) {

    .tq-share-buttons {
        display: flex;
        flex-wrap: nowrap;          /* ONE LINE */
      
        gap: 6px;
    }

    .tq-share {
        padding: 10px;
        flex: 1;                   /* equal width */
        justify-content: center;
        font-size: 0;              /* HIDE TEXT */
        border-radius: 6px;
    }

    .tq-share svg {
        width: 18px;
        height: 18px;
        margin: 0;
    }

}



/* =====================================
   ARCHIVE GRID – PRO DESIGN
===================================== */

.tq-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0;
}

.tq-archive-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.tq-archive-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

/* Thumbnail */
.tq-card-thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Content */
.tq-card-content {
    padding: 18px 20px 22px;
}

/* Category */
.tq-card-category {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #7b3fe4;
    margin-bottom: 10px;
}

/* Title */
.tq-card-title {
    font-size: 18px;
    line-height: 1.35;
    margin: 0 0 14px;
}

.tq-card-title a {
    color: #111;
    text-decoration: none;
}

.tq-card-title a:hover {
    color: #7b3fe4;
}

/* Meta */
.tq-card-meta {
    font-size: 13px;
    color: #666;
}

/* ===============================
   RESPONSIVE
================================ */

/* Tablet */
@media (max-width: 1024px) {
    .tq-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .tq-archive-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .tq-card-thumb img {
        height: 190px;
    }
}


/* ===== ARCHIVE GRID ===== */

.tq-archive-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.tq-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.tq-archive-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: .25s ease;
}

.tq-archive-card:hover {
    transform: translateY(-6px);
}

.tq-card-thumb img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}

.tq-card-content {
    padding: 18px 20px 22px;
}

.tq-card-category {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #7b3fe4;
    margin-bottom: 8px;
}

.tq-card-title {
    font-size: 18px;
    margin: 0 0 12px;
}

.tq-card-title a {
    color: #111;
    text-decoration: none;
}

.tq-card-meta {
    font-size: 13px;
    color: #666;
}

/* Responsive */
@media (max-width: 1024px) {
    .tq-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .tq-archive-grid {
        grid-template-columns: 1fr;
    }
}



/* ===== Archive Layout ===== */

.tq-archive-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    max-width: 1200px;
    margin: auto;
}

.tq-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Card */
.tq-archive-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    transition: transform .3s ease;
}

.tq-archive-card:hover {
    transform: translateY(-4px);
}

.tq-card-thumb {
    position: relative;
    display: block;
}

.tq-card-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Category badge */
.tq-card-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #6c4cff;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 20px;
}

/* Content */
.tq-card-content {
    padding: 18px;
}

.tq-card-title {
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 10px;
}

.tq-card-title a {
    color: #111;
    text-decoration: none;
}

.tq-card-meta {
    font-size: 13px;
    color: #777;
}

/* Sidebar */
.tq-archive-sidebar {
    position: sticky;
    top: 100px;
}

/* Widgets */
.tq-widget {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    margin-bottom: 25px;
}

/* ===== Responsive ===== */

@media (max-width: 1024px) {
    .tq-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tq-archive-wrapper {
        grid-template-columns: 1fr;
    }

    .tq-archive-grid {
        grid-template-columns: 1fr;
    }

    .tq-archive-sidebar {
        position: static;
    }
}




/* ===== Genesis Content + Sidebar Fix ===== */

.content-sidebar-wrap {
    grid-template-columns: 1fr 320px;
    gap: 40px;
    max-width: 1200px;
    margin: auto;
}

.content {
    width: 100%;
}

.sidebar {
    width: 100%;
}

/* ===== Archive Grid ===== */

.tq-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.tq-archive-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.tq-card-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.tq-card-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #6c4cff;
    color: #fff;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 12px;
}

/* ===== Responsive ===== */

@media (max-width: 1024px) {
    .tq-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .content-sidebar-wrap {
        grid-template-columns: 1fr;
    }

    .tq-archive-grid {
        grid-template-columns: 1fr;
    }
}



/* ==============================
   TABLE OF CONTENTS
================================ */

.techqor-toc {
    background: #f9f9f9;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.techqor-toc strong {
    display: block;
    margin-bottom: 10px;
}

.techqor-toc ul {
    padding-left: 18px;
}

.techqor-toc li {
    margin-bottom: 8px;
}

.techqor-toc .level-3 {
    margin-left: 15px;
    font-size: 14px;
}



/* ===== RELATED ARTICLES HEADING STYLE ===== */

.tq-related-head {
    margin-bottom: 15px;
}

.tq-related-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 4px;
}

.tq-related-head h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}


/* ==============================
   RELATED ARTICLES HOVER EFFECT
================================ */

.tq-related-item {
    display: block;
    background: #fff;
    border-radius: 12px;
    padding-bottom: 10px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.tq-related-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}




@media (hover: none) {
    .tq-related-item:hover {
        transform: none;
        box-shadow: none;
    }
    .tq-related-item:hover img {
        transform: none;
    }
}



/* ==============================
   RELATED ARTICLES – CARD DESIGN
================================ */

.tq-related-item {
    display: block;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.tq-related-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.12);
}

/* Thumbnail */
.tq-related-thumb img {
    width: 100%;
    height: auto;
    transition: transform .45s ease;
}

.tq-related-item:hover .tq-related-thumb img {
    transform: scale(1.06);
}

/* Content */
.tq-related-content {
    padding: 14px 14px 16px;
}

/* Meta */
.tq-related-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 6px;
    color: #666;
}

.tq-related-cat {
    font-weight: 600;
    color: #0073e6;
}

.tq-related-date {
    position: relative;
    padding-left: 10px;
}

.tq-related-date::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #aaa;
}

/* Title */
.tq-related-title {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    transition: color .3s ease;
}

.tq-related-item:hover .tq-related-title {
    color: #0073e6;
}



/* ==============================
   RELATED META – TOP META STYLE
================================ */

.tq-related-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280; /* same family as top meta */
    margin-bottom: 6px;
}

/* Category */
.tq-related-cat {
    font-weight: 500;
    color: #6b7280;
}

/* Dot separator */
.tq-related-date {
    position: relative;
    padding-left: 10px;
    color: #6b7280;
}

.tq-related-date::before {
    content: "·";
    position: absolute;
    left: 0;
    color: #9ca3af;
    font-weight: bold;
}



/* ==============================
   CENTER ALIGN – META & TITLE
================================ */

/* Content center */
.tq-related-content {
    text-align: center;
}

/* Meta center */
.tq-related-meta {
    justify-content: center;
}

/* Title spacing + alignment */
.tq-related-title {
    text-align: center;
    margin-top: 4px;
}


.tq-related-item:hover .tq-related-title {
    color: #0073e6;
}



/* ==============================
   RELATED CARD DIVIDER (GUARANTEED)
================================ */

.tq-related-divider {
    display: block;
    height: 1px;
    margin: 10px 12px 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,0.12),
        rgba(0,0,0,0)
    );
}



/* Title 2-line clamp */
.tq-related-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}





/* Pointer + smoother easing */
.tq-related-item {
    cursor: pointer;
    transition:
        transform 0.35s cubic-bezier(.4,0,.2,1),
        box-shadow 0.35s cubic-bezier(.4,0,.2,1);
}


/* ==============================
   RELATED IMAGE ASPECT RATIO
================================ */

/* Thumbnail wrapper */
.tq-related-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;      /* editorial standard */
    overflow: hidden;
    border-radius: 10px;
}

/* Image fit */
.tq-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* crop, no stretch */
    display: block;
}



/* Remove underline from related cards */
.tq-related-item,
.tq-related-item * {
    text-decoration: none !important;
}



@media (max-width: 768px) {

    .tq-related-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px;
        position: relative;
        overflow: hidden; /* ripple ke liye */
    }

    /* Image left */
    .tq-related-thumb {
        flex: 0 0 110px;
        aspect-ratio: 4 / 3;
        border-radius: 10px;
    }

    /* Content right */
    .tq-related-content {
        flex: 1;
        padding: 0;
        text-align: left;
        display: flex;
        flex-direction: column;
    }

    /* TITLE FIRST */
    .tq-related-title {
        order: 1;
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 4px;
        -webkit-line-clamp: 2;
    }

    /* META BELOW TITLE */
    .tq-related-meta {
        order: 2;
        justify-content: flex-start;
        font-size: 12px;
    }

    /* Divider not needed in mobile */
    .tq-related-divider {
        display: none;
    }
}


/* ==============================
   MOBILE TAP RIPPLE EFFECT
================================ */

@media (max-width: 768px) {

    .tq-related-item {
        position: relative;
        overflow: hidden;
    }

    .tq-related-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.06);
        opacity: 0;
        transition: opacity .2s ease;
        pointer-events: none;
    }

    .tq-related-item:active::after {
        opacity: 1;
    }
}



/* ==============================
   MOBILE – FORCE LEFT ALIGNMENT
================================ */

@media (max-width: 768px) {

    /* Ensure content is left-aligned */
    .tq-related-content {
        text-align: left !important;
        align-items: flex-start;
    }

    /* Title left aligned */
    .tq-related-title {
        text-align: left !important;
        margin-left: 0;
        margin-right: 0;
    }

    /* Meta left aligned (no center) */
    .tq-related-meta {
        justify-content: flex-start !important;
        text-align: left !important;
    }
}


/* ==============================
   RELATED META – LIGHTER GRAY
================================ */

/* Default (desktop + mobile) */
.tq-related-meta,
.tq-related-cat,
.tq-related-date {
    color: #9ca3af; /* light neutral gray */
}

/* Mobile fine-tuning */
@media (max-width: 768px) {
    .tq-related-meta {
        color: #9ca3af; /* slightly lighter for small screens */
    }
}

/* ==============================
   RELATED META ICON STYLE
================================ */

.tq-related-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #9ca3af; /* light gray */
}

.tq-related-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Icon size + color */
.tq-related-meta svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Dot separator */
.tq-related-date {
    position: relative;
    padding-left: 10px;
}

.tq-related-date::before {
    content: "·";
    position: absolute;
    left: 0;
    color: #9ca3af;
}


/* ==============================
   MOBILE – REMOVE CARD PADDING
================================ */

@media (max-width: 768px) {

    .tq-related-item {
        padding: 0 !important;   /* remove card padding */
        gap: 10px;               /* thoda tight spacing */
    }

    .tq-related-thumb {
        margin: 0;               /* image flush left */
    }

    .tq-related-content {
        padding-right: 4px;      /* micro breathing space */
    }
}



@media (max-width: 768px) {
    .tq-related-item {
        padding: 10px 0;
        border-bottom: 1px solid #e5e7eb; /* subtle list divider */
    }

    .tq-related-item:last-child {
        border-bottom: none;
    }
}


@media (max-width: 768px) {
    .tq-related-thumb {
        flex: 0 0 90px;          /* smaller image */
        aspect-ratio: 1 / 1;    /* square = news list style */
        border-radius: 8px;
    }
}


@media (max-width: 768px) {

    .tq-related-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        margin-bottom: 2px;
    }

    .tq-related-meta {
        font-size: 12px;
        color: #9ca3af;
    }
}

@media (max-width: 768px) {
    .tq-related-posts {
        margin-top: 30px;
    }

    .tq-related-head {
        margin-bottom: 12px;
    }
}



/* ==============================
   RELATED ARTICLES – MATERIAL LIST (MOBILE)
================================ */

@media (max-width: 768px) {

    /* Section spacing */
    .tq-related-posts {
        margin-top: 28px;
    }

    /* Each item = list row */
    .tq-related-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid #e5e7eb;
        background: none;
        box-shadow: none;
        border-radius: 0;
    }

    .tq-related-item:last-child {
        border-bottom: none;
    }

    /* ==============================
   MOBILE – RELATED IMAGE 16:9
================================ */

@media (max-width: 768px) {

    .tq-related-thumb {
        flex: 0 0 110px;        /* thoda wide for 16:9 */
        aspect-ratio: 16 / 9;  /* FINAL: keep 16:9 */
        border-radius: 6px;
        overflow: hidden;
    }

    .tq-related-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


    /* Content right */
    .tq-related-content {
        flex: 1;
        padding: 0;
        text-align: left;
    }

    /* Title */
    .tq-related-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.35;
        margin: 0 0 2px;
        color: #111827;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Meta under title */
    .tq-related-meta {
        font-size: 12px;
        color: #9ca3af;
        justify-content: flex-start;
    }
}



/* ==============================
   AUTHOR PROFILE BOX
================================ */

.tq-author-profile {
    text-align: center;
    max-width: 720px;
    margin: 60px auto 40px;
    padding: 40px 20px;
    background: #fafafa;
    border-radius: 16px;
}

.tq-author-avatar img {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-bottom: 16px;
}

.tq-author-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.tq-author-role {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 14px;
}

.tq-author-bio {
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    max-width: 560px;
    margin: 0 auto 20px;
}

.tq-author-socials {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.tq-author-socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
}

.tq-author-socials a svg {
    width: 16px;
    height: 16px;
    fill: #374151;
}

.tq-author-socials a:hover {
    background: #111827;
    border-color: #111827;
}

.tq-author-socials a:hover svg {
    fill: #fff;
}

/* Mobile polish */
@media (max-width: 768px) {
    .tq-author-profile {
        padding: 30px 16px;
        margin-top: 40px;
    }

    .tq-author-name {
        font-size: 20px;
    }

    .tq-author-bio {
        font-size: 14px;
    }
}


/* ==============================
   AUTHOR PROFILE – REMOVE PADDING
================================ */

.tq-author-profile {
    padding: 0 !important;   /* completely zero padding */
    background: transparent; /* optional: clean, no card feel */
}


@media (max-width: 768px) {
    .tq-author-profile {
        padding: 0 !important;
    }
}



/* ==============================
   FIX AVATAR ↔ NAME GAP (FINAL)
================================ */

/* Avatar ke niche koi extra gap nahi */
.tq-author-avatar {
    margin-bottom: 0 !important;
}

/* Name ka top margin completely remove */
.tq-author-name {
    margin-top: 2px !important;   /* ya 0 if aur tight chahiye */
    margin-bottom: 2px !important;
}

.tq-author-name {
    margin-top: 2px !important;
}

/* ==============================
   AUTHOR FULL WIDTH DIVIDER LINE
================================ */

.tq-author-profile {
    position: relative;
    text-align: center;
}

/* Full horizontal line */
.tq-author-profile::before {
    content: "";
    position: absolute;
    top: 60px; /* avatar center ke around */
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,0.25),
        rgba(0,0,0,0)
    );
}

/* Avatar above the line */
.tq-author-avatar {
    position: relative;
    display: inline-block;
    background: #fff; /* line ke upar cut effect */
    padding: 0 16px;
    margin-bottom: 6px;
}


/* ==============================
   COMMENTS COUNT – DESIGN
================================ */

.tq-comments-title {
    margin-bottom: 18px;
}

.tq-comments-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    padding: 6px 12px;
    border-radius: 999px; /* pill feel */
}

/* Icon */
.tq-comments-count svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .tq-comments-count {
        font-size: 14px;
        padding: 5px 10px;
    }
}



/* ==============================
   AUTHOR COMMENT HIGHLIGHT
================================ */

.comment.bypostauthor {
    background: #f0f9ff;
    border-left: 4px solid #2563eb;
    padding: 12px;
    border-radius: 6px;
}

.comment.bypostauthor .comment-author::after {
    content: "Author";
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #2563eb;
    background: #e0f2fe;
    padding: 2px 6px;
    border-radius: 999px;
}


/* ==============================
   COMMENTS LAZY LOAD
================================ */

.tq-comments-placeholder {
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 16px;
}


/* ==============================
   COMMENT SUCCESS – INLINE
================================ */

.tq-comment-success-inline {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #ecfeff;
    color: #065f46;
    border-left: 4px solid #10b981;
    border-radius: 6px;
    font-size: 14px;
}


/* ==============================
   COMMENT SUCCESS – TOAST
================================ */

.tq-comment-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    color: #fff;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
    z-index: 9999;
}

.tq-comment-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}




/* ==============================
   COMMENT LAYOUT – BASIC STYLES
================================ */

.tq-comment-body {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.tq-comment-avatar img {
    border-radius: 50%;
}

.tq-comment-meta {
    font-size: 14px;
    margin-bottom: 6px;
    color: #374151;
}

.tq-comment-date {
    margin-left: 6px;
    font-size: 12px;
    color: #9ca3af;
}

.tq-comment-text {
    font-size: 15px;
    line-height: 1.6;
}

.tq-comment-awaiting {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #ca8a04;
}

.tq-comment-reply a {
    font-size: 13px;
    color: #2563eb;
}


/* ==============================
   FINAL FOOTER – FULL WIDTH + PULSE
================================ */

/* Kill Genesis footer wrap width */
.site-footer,
.site-footer .wrap {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Custom footer */
.tq-site-footer {
    width: 100%;
    background: #000;
    padding: 16px 12px;
}

/* Center content */
.tq-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    flex-wrap: wrap;
}

/* Text */
.tq-footer-text,
.tq-footer-site {
    color: #fff;
    font-weight: 500;
}


html, body {
    overflow-x: hidden;
}

.tq-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
}


/* Red dot */
.tq-footer-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    position: relative;
    overflow: visible;
}

/* Pulse ring */
.tq-footer-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.6);
    animation: tq-pulse 1.6s infinite ease-out;
}

/* Pulse animation */
@keyframes tq-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}


.tq-featured-image-sidebar #postimagediv {
    margin-bottom: 16px;
}

.tq-featured-image-sidebar h2.hndle {
    font-size: 13px;
}



/* =====================================
   GLOBAL HORIZONTAL SCROLL KILL
===================================== */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* =====================================
   HEADER STRICT WIDTH CONTROL
===================================== */
.tq-header {
    width: 100%;
    left: 0;
    right: 0;
    overflow: visible; /* important for submenu */
}

.tq-header-inner {
    max-width: 1240px;
    width: 100%;
    box-sizing: border-box;
}

/* =====================================
   MENU – PREVENT LAYOUT SHIFT
===================================== */
.tq-menu {
    position: relative;
}

.tq-menu li {
    position: relative;
}

/* Submenu absolute – no layout push */
.tq-menu li ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    z-index: 9999;
}

/* =====================================
   SEARCH POPUP ISOLATION
===================================== */
.tq-search-popup {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 9999;
}

/* =====================================
   STICKY HEADER SCROLL BUG FIX
===================================== */
.tq-header.is-sticky {
    left: 0;
    right: 0;
    transform: translateZ(0);
}

/* =====================================
   FINAL SAFETY NET
===================================== */
.tq-header *,
.tq-header *::before,
.tq-header *::after {
    box-sizing: border-box;
}


/* ===============================
   DESKTOP MENU – PREMIUM POLISH
================================ */

.tq-nav .tq-menu {
    display: flex;
    align-items: center;
    gap: 22px; /* premium spacing */
}

.tq-nav .tq-menu > li > a {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #111;
    padding: 12px 4px;
    transition: color 0.25s ease;
}

/* Hover color */
.tq-nav .tq-menu > li > a:hover {
    color: #e10600;
}

/* Smooth underline */
.tq-nav .tq-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 100%;
    height: 2px;
    background: #e10600;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.tq-nav .tq-menu > li > a:hover::after,
.tq-nav .tq-menu > li.current-menu-item > a::after {
    transform: scaleX(1);
}

/* Active menu item */
.tq-nav .tq-menu > li.current-menu-item > a {
    color: #e10600;
    font-weight: 600;
}


/* ===============================
   DESKTOP MENU – PREMIUM POLISH
================================ */

.tq-nav .tq-menu {
    display: flex;
    align-items: center;
    gap: 22px; /* premium spacing */
}

.tq-nav .tq-menu > li > a {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #111;
    padding: 12px 4px;
    transition: color 0.25s ease;
}

/* Hover color */
.tq-nav .tq-menu > li > a:hover {
    color: #e10600;
}

/* Smooth underline */
.tq-nav .tq-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 100%;
    height: 2px;
    background: #e10600;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.tq-nav .tq-menu > li > a:hover::after,
.tq-nav .tq-menu > li.current-menu-item > a::after {
    transform: scaleX(1);
}

/* Active menu item */
.tq-nav .tq-menu > li.current-menu-item > a {
    color: #e10600;
    font-weight: 600;
}


/* ===============================
   SEARCH ICON UX
================================ */

.tq-search-toggle {
    margin-left: 14px;
    cursor: pointer;
    transition: transform 0.25s ease, color 0.25s ease;
}

.tq-search-toggle:hover {
    transform: scale(1.1);
    color: #e10600;
}

/* Popup animation */
.tq-search-popup {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
}

.tq-search-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* REMOVE underline completely */
.tq-nav .tq-menu > li > a::after {
    display: none !important;
}



/* ===============================
   SUBMENU ARROW INDICATOR
================================ */

/* Only menu items having submenu */
.tq-menu > li.menu-item-has-children > a {
    padding-right: 18px;
}

/* Arrow */
.tq-menu > li.menu-item-has-children > a::before {
    content: "›";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    font-size: 16px;
    color: #999;
    transition: all 0.25s ease;
}

/* Arrow animate on hover */
.tq-menu > li.menu-item-has-children:hover > a::before {
    color: #e10600;
    transform: translateY(-50%) translateX(4px);
}


/* ===============================
   SUBMENU – PREMIUM DESIGN
================================ */

.tq-menu .sub-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 230px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 35px rgba(0,0,0,0.14);
    padding: 6px 0;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 999;
}

/* Show submenu */
.tq-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Submenu links */
.tq-menu .sub-menu li a {
    display: flex;
    align-items: center;
    padding: 11px 18px;
    font-size: 14px;
    color: #222;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Soft divider between items */
.tq-menu .sub-menu li:not(:last-child) a {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Hover effect */
.tq-menu .sub-menu li a:hover {
    background: #f7f7f7;
    color: #e10600;
}


/* Prevent hover flicker gap */
.tq-menu li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    height: 14px;
    width: 100%;
}

.tq-menu {
    display: flex;
    align-items: center;
    gap: 26px; /* KEY */
}

.tq-menu > li > a {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .2px;
}


/* Ensure submenu is not clipped */
.tq-header,
.tq-header-inner,
.tq-nav {
    overflow: visible !important;
}


.tq-menu .sub-menu {
    top: calc(100% + 8px); /* earlier too much gap */
}


/* FIX arrow behaving like breadcrumb */
.tq-menu > li > a {
    position: relative;
}

/* Arrow purely visual (not text flow) */
.tq-menu > li.menu-item-has-children > a::before {
    content: "›";
    position: absolute;
    right: -14px;   /* text से बाहर */
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #aaa;
    pointer-events: none;
    transition: transform .25s ease, color .25s ease;
}

.tq-menu > li.menu-item-has-children:hover > a::before {
    transform: translateY(-50%) translateX(4px);
    color: #e10600;
}


/* Active / current menu item */
.tq-menu li.current-menu-item > a,
.tq-menu li.current-menu-ancestor > a {
    color: #e10600;
    font-weight: 600;
}



/* Parent menu link */
.tq-menu > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* text + arrow gap */
}

/* Arrow – attached to same menu */
.tq-menu > li.menu-item-has-children > a::after {
    content: "›";
    font-size: 14px;
    color: #999;
    transition: transform .25s ease, color .25s ease;
}

/* Hover animation */
.tq-menu > li.menu-item-has-children:hover > a::after {
    transform: translateX(4px);
    color: #e10600;
}



/* Logo size control */
.tq-logo img {
    max-height: 42px;   /* ← yahin size control hoga */
    width: auto;
}

/* Desktop only (optional fine-tuning) */
@media (min-width: 992px) {
    .tq-logo img {
        max-height: 38px;
    }
}

/* Mobile logo slightly smaller */
@media (max-width: 768px) {
    .tq-logo img {
        max-height: 34px;
    }
}


/* Header main alignment – FIXED */
.tq-header-inner {
    display: flex;
    align-items: center;
}

/* Logo fixed left */
.tq-logo {
    flex: 0 0 auto;
}

/* Navigation pushed to right */
.tq-nav {
    margin-left: auto;   /* 🔥 KEY LINE */
    display: flex;
    align-items: center;
    gap: 20px;
}


/* Navigation wrapper */
.tq-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;      /* 🔴 IMPORTANT: stop stretching */
}

/* Menu itself */
.tq-menu {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
}

/* Search icon */
.tq-search-toggle {
    flex: 0 0 auto;
}



/* HEADER BASE */
.tq-header-inner {
    display: flex;
    align-items: center;
}

/* LOGO LEFT */
.tq-logo {
    flex-shrink: 0;
}

/* NAV RIGHT (🔥 MAIN FIX) */
.tq-nav {
    display: flex;
    align-items: center;
    margin-left: auto;   /* 🔥 यही missing था */
    gap: 22px;
}

/* MENU */
.tq-menu {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap; /* wrap रोकने के लिए */
}

/* SEARCH ICON */
.tq-search-toggle {
    flex-shrink: 0;
}



/* Header full width */
.tq-header {
    width: 100%;
    background: #fff;
}

/* Inner container – 85% */
.tq-header-inner {
    width: 85%;
    max-width: 1280px;
    margin: 0 auto;

    display: flex;
    align-items: center;
}

/* Logo – fixed */
.tq-logo {
    flex: 0 0 auto;
}

/* Nav – RIGHT side only */
.tq-nav {
    margin-left: auto;        /* 🔥 THIS IS KEY */
    display: flex;
    align-items: center;
    gap: 22px;

    width: auto !important;  /* 🔥 STOP STRETCH */
}

/* Menu ul */
.tq-menu {
    display: flex;
    gap: 18px;
    white-space: nowrap;
}



/* Logo base size */
.tq-logo img {
    max-height: 42px;
    width: auto;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Sticky state – SAME height (no shrink) */
.tq-header.is-sticky .tq-logo img {
    max-height: 42px;
    opacity: 0.95;
}


/* Main menu */
.tq-menu {
    display: flex;
    align-items: center;
    gap: 26px;
}

/* Menu links */
.tq-menu > li > a {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 14px 0;
    position: relative;
    color: #111;
}


/* Arrow only for items with submenu */
.tq-menu .menu-item-has-children > a::after {
    content: "›";
    font-size: 16px;
    margin-left: 6px;
    display: inline-block;
    transform: translateY(-1px);
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0.6;
}

/* Arrow animate on hover */
.tq-menu .menu-item-has-children:hover > a::after {
    transform: translate(3px, -1px);
    opacity: 1;
}


/* Submenu container */
.tq-menu ul.sub-menu {
    background: #fff;
    min-width: 220px;
    padding: 6px 0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Submenu items */
.tq-menu ul.sub-menu li a {
    padding: 10px 16px;
    font-size: 14px;
    color: #222;
    display: block;
    transition: background 0.2s ease, padding-left 0.2s ease;
}

/* Soft divider between submenu items */
.tq-menu ul.sub-menu li + li {
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* Hover feel */
.tq-menu ul.sub-menu li a:hover {
    background: rgba(0,0,0,0.03);
    padding-left: 20px;
}


/* Header transition */
.tq-header {
    transition: box-shadow 0.25s ease, background 0.25s ease;
}

/* Sticky effect */
.tq-header.is-sticky {
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}




/* Header base */
.tq-header {
    position: relative;
    background: #fff;
    z-index: 100;
}

/* Sticky header */
.tq-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* Spacer default */
#tq-header-spacer {
    height: 0;
}



/* ===============================
   MOBILE HEADER – PERFECT CENTER
================================ */

@media (max-width: 768px) {

  .tq-header-inner {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    height: 56px;
  }

  /* LEFT : Bell */
  .tq-bell {
    grid-column: 1;
    justify-self: center;
  }

  /* CENTER : Logo */
  .tq-logo {
    grid-column: 2;
    justify-self: center;
    text-align: center;
  }

  .tq-logo img {
    max-height: 34px;
    width: auto;
  }

  /* RIGHT : Hamburger */
  .tq-hamburger {
    grid-column: 3;
    justify-self: center;
  }

}


.tq-bell {
  cursor: pointer;
}

.tq-bell svg {
  width: 22px;
  height: 22px;
}