/*
Theme Name: SSC Mock Tests Child
Theme URI: https://sscmocktests.com
Description: Child theme for sscmocktests.com, built on Blocksy.
Author: SSC Mock Tests
Template: blocksy
Version: 1.0.0
*/

/* ==========================================================
   Homepage - Exam Category Grid
   ========================================================== */

.smt-category-section{
    max-width:1100px;
    margin:0 auto;
    padding:40px 20px 60px;
}

.smt-category-heading{
    text-align:center;
    font-size:28px;
    font-weight:700;
    color:#1e293b;
    margin:0 0 8px;
}

.smt-category-subheading{
    text-align:center;
    font-size:15px;
    color:#64748b;
    margin:0 0 32px;
}

.smt-category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
    gap:16px;
}

.smt-category-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    padding:34px 16px;
    border-radius:22px;
    text-decoration:none;
    transition:transform .15s;
}

.smt-category-card:hover{
    transform:translateY(-3px);
}

.smt-category-icon{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.smt-category-icon svg{
    width:100%;
    height:100%;
}

.smt-category-name{
    font-size:16px;
    font-weight:700;
    color:#1e293b;
    line-height:1.35;
}

/* Rotating pastel palette, cycling every 6 cards -- swap these
   values any time for your own brand colors. */
.smt-cat-color-0{ background:#ede9fe; }
.smt-cat-color-0 .smt-category-icon{ color:#7c3aed; }

.smt-cat-color-1{ background:#d1fae5; }
.smt-cat-color-1 .smt-category-icon{ color:#059669; }

.smt-cat-color-2{ background:#fce7f3; }
.smt-cat-color-2 .smt-category-icon{ color:#db2777; }

.smt-cat-color-3{ background:#fef3c7; }
.smt-cat-color-3 .smt-category-icon{ color:#d97706; }

.smt-cat-color-4{ background:#dbeafe; }
.smt-cat-color-4 .smt-category-icon{ color:#2563eb; }

.smt-cat-color-5{ background:#fee2e2; }
.smt-cat-color-5 .smt-category-icon{ color:#dc2626; }

.smt-mmenu-icon-badge svg{ color:inherit; }
.smt-cat-color-0.smt-mmenu-icon-badge{ color:#7c3aed; }
.smt-cat-color-1.smt-mmenu-icon-badge{ color:#059669; }
.smt-cat-color-2.smt-mmenu-icon-badge{ color:#db2777; }
.smt-cat-color-3.smt-mmenu-icon-badge{ color:#d97706; }
.smt-cat-color-4.smt-mmenu-icon-badge{ color:#2563eb; }
.smt-cat-color-5.smt-mmenu-icon-badge{ color:#dc2626; }

@media(max-width:480px){
    .smt-category-grid{
        grid-template-columns:repeat(2, 1fr);
    }
    .smt-category-card{
        padding:18px 8px;
    }
}

/* ==========================================================
   Homepage - Features section
   ========================================================== */

.smt-features-section{
    max-width:1100px;
    margin:0 auto;
    padding:10px 20px 60px;
}

.smt-features-heading{
    text-align:center;
    font-size:24px;
    font-weight:700;
    color:#1e293b;
    margin:0 0 28px;
}

.smt-features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:18px;
}

.smt-feature-card{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:24px 20px;
    text-align:center;
}

.smt-feature-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    color:#2563eb;
    margin-bottom:12px;
}

.smt-feature-icon svg{
    width:100%;
    height:100%;
}

.smt-feature-card h3{
    font-size:15.5px;
    font-weight:700;
    color:#1e293b;
    margin:0 0 6px;
}

.smt-feature-card p{
    font-size:13px;
    color:#64748b;
    line-height:1.55;
    margin:0;
}

/* List-style feature cards (grouped features under one heading,
   e.g. the "Why Practice With Us" section) -- left-aligned instead
   of the centered icon+paragraph layout above. */
.smt-features-grid-list{
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.smt-feature-card-list{
    text-align:center;
}

.smt-feature-card-list .smt-feature-icon{
    display:inline-flex;
}

.smt-feature-card-list h3{
    font-size:16px;
    text-align:center;
}

.smt-feature-card-list ul{
    list-style:none;
    margin:0;
    padding:0;
    text-align:left;
}

.smt-feature-card-list li{
    font-size:13.5px;
    color:#475569;
    line-height:1.5;
    padding:5px 0 5px 22px;
    position:relative;
}

.smt-feature-card-list li::before{
    content:"";
    position:absolute;
    left:2px;
    top:13px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#2563eb;
}

/* ==========================================================
   Header account widget + footer quick links
   (used via [smt_account_widget] / [smt_footer_links]
   inside Blocksy's own Header/Footer Builder)
   ========================================================== */

.smt-account-widget{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    padding:6px 14px;
    border-radius:30px;
    background:#eff6ff;
}

.smt-account-avatar{
    width:26px;
    height:26px;
    border-radius:50%;
    object-fit:cover;
}

.smt-account-avatar-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#dbeafe;
    font-size:14px;
}

.smt-account-name{
    font-size:13px;
    font-weight:700;
    color:#1d4ed8;
    white-space:nowrap;
}

.smt-footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
    padding:10px 0;
}

.smt-footer-links a{
    font-size:13px;
    font-weight:600;
    color:#64748b;
    text-decoration:none;
}

.smt-footer-links a:hover{
    color:#2563eb;
}

/* ==========================================================
   Mobile Menu drawer ([smt_mobile_menu])
   ========================================================== */

/* Real Blocksy source (static/bundle/main.min.css) confirms the
   panel's own width/height/offset/rounding are driven entirely by
   3 CSS custom properties on .ct-panel-inner -- overriding those
   directly (instead of fighting each computed property) is the
   correct, reliable way to make the side-panel truly full-screen: */
/* Real Blocksy source (static/bundle/main.min.css): also found via
   the user's own DevTools inspection that .ct-panel-content-inner
   (the actual scrollable container our content sits inside) has
   `padding:var(--panel-padding, 35px)` on ALL sides by default --
   that 35px was exactly the black strip showing above/below our
   content (its own background peeking through the padding). Set
   --panel-padding to 0 (Blocksy's own variable) so this is a real
   fix, not a fight against the property. */
#offcanvas{
    --side-panel-offset:0px !important;
    --side-panel-width:80% !important;
    --side-panel-border-radius:0px !important;
    --panel-padding:0px !important;
}

/* Match the quiz's own hamburger panel sizing exactly (see
   .mcq-fullscreen .palette in mcq-quiz-manager/assets/quiz.css):
   width:80%, capped at max-width:320px so it doesn't get too wide
   on tablets/large phones. */
#offcanvas .ct-panel-inner{
    max-width:320px !important;
}

/* Flickering black bars above/below the menu on mobile: Blocksy's
   panel chain doesn't consistently use the same viewport-height unit
   as our own content (some use 100vh, which is the LARGEST possible
   mobile viewport with the browser's address bar hidden, while our
   content used 100dvh, the CURRENT viewport). When the address bar
   is visible, 100vh > 100dvh, so the panel container ends up taller
   than our content -- the gap is the container's own background
   showing through, and it appears/disappears as the address bar
   shows/hides while scrolling ("shote shote"). Fix: force the exact
   same height (100dvh, falling back to 100vh on older engines that
   don't support dvh) on every element in the chain, and additionally
   mirror the menu's own background colour onto the ancestor chain
   via JS (see theme.js) so even a stray sub-pixel mismatch shows the
   right colour instead of black. */
#offcanvas,
#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-content,
#offcanvas .ct-panel-content-inner{
    height:100vh !important;
    height:100dvh !important;
}

#offcanvas .ct-panel-content-inner{
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
}

#offcanvas .ct-header-text,
#offcanvas .ct-panel-content-inner > div[data-id="text"]{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
}

#offcanvas .entry-content,
#offcanvas .entry-content.is-layout-flow{
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
}

.smt-mmenu{
    flex:1 1 auto !important;
}

#offcanvas .entry-content,
#offcanvas .entry-content.is-layout-flow,
#offcanvas div[data-id="text"]{
    max-width:100% !important;
    width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* This is Blocksy's own close-button bar sitting above the panel
   content -- rather than leaving it as a separate solid-colour
   strip (which is what created the "black gap" at the top), make
   it transparent and float it over our own content instead. */
#offcanvas .ct-panel-actions{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    background:transparent !important;
    z-index:20;
}

#offcanvas .ct-panel-actions button,
#offcanvas .ct-panel-actions svg{
    color:#0f172a !important;
    fill:#0f172a !important;
    --theme-icon-color:#0f172a !important;
}

#offcanvas .ct-panel-actions button{
    background:#fff !important;
    border-radius:50% !important;
    margin:10px !important;
    box-shadow:0 2px 6px rgba(0,0,0,.15) !important;
}

.smt-mmenu{
    padding:26px 18px 40px;
    min-height:100%;
    min-height:100dvh;
    width:100%;
    box-sizing:border-box;
}

.smt-mmenu-light{
    background:#eff6ff;
}

.smt-mmenu-dark{
    background:#dce8f7;
    color:#1e293b;
}

.smt-mmenu-profile{
    text-align:center;
    padding:8px 0 18px;
}

.smt-mmenu-avatar{
    width:76px;
    height:76px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #93c5fd;
    margin:0 auto 12px;
    display:block;
}

.smt-mmenu-avatar-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#94a3b8;
    border-color:#bfdbfe;
}

.smt-mmenu-avatar-empty svg{
    width:34px;
    height:34px;
}

.smt-mmenu-name{
    font-size:19px;
    font-weight:800;
    color:#1e293b;
}

.smt-mmenu-viewprofile{
    display:inline-block;
    margin-top:4px;
    font-size:13.5px;
    font-weight:600;
    color:#64748b;
    text-decoration:none;
}

.smt-mmenu-login-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#2563eb;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:15px;
    padding:13px;
    border-radius:12px;
    margin:6px auto 4px;
    width:80%;
    max-width:280px;
}

.smt-mmenu-login-btn svg{
    width:18px;
    height:18px;
}

.smt-mmenu-divider{
    height:1px;
    background:rgba(100,116,139,.2);
    margin:16px 0 10px;
}

.smt-mmenu-nav{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.smt-mmenu-item{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    padding:13px 12px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    color:#334155;
    text-decoration:none;
    cursor:pointer;
}

.smt-mmenu-item svg{
    width:19px;
    height:19px;
    flex-shrink:0;
}

.smt-mmenu-item-home{
    background:#bfdbfe;
    color:#1d4ed8;
}

.smt-mmenu-cat-toggle{
    background:#fff;
    border-radius:14px;
    padding:10px 14px;
    box-shadow:0 2px 8px rgba(15,23,42,.06);
}

.smt-mmenu-icon-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:10px;
    flex-shrink:0;
}

.smt-mmenu-icon-badge svg,
.smt-mmenu-icon-badge img{
    width:19px;
    height:19px;
    object-fit:contain;
}

.smt-mmenu-cat-toggle span{
    flex:1;
}

.smt-mmenu-chevron{
    transition:transform .2s;
    flex-shrink:0;
}

.smt-mmenu-cat-open .smt-mmenu-chevron{
    transform:rotate(180deg);
}

.smt-mmenu-subnav{
    display:none;
    flex-direction:column;
    margin:6px 8px 4px 8px;
    background:#f8fafc;
    border-radius:10px;
    border:1px solid #e2e8f0;
    overflow:hidden;
}

.smt-mmenu-cat-open .smt-mmenu-subnav{
    display:flex;
}

.smt-mmenu-subnav a{
    padding:11px 16px;
    font-size:13.5px;
    font-weight:600;
    color:#334155;
    text-decoration:none;
    border-bottom:1px solid #e2e8f0;
}

.smt-mmenu-subnav a:last-child{
    border-bottom:none;
}

.smt-mmenu-logout{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:70%;
    max-width:240px;
    margin:20px auto 0;
    background:#dc2626;
    color:#fff;
    border:none;
    text-decoration:none;
    padding:12px;
    border-radius:10px;
    font-size:14.5px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(220,38,38,.35);
}

.smt-mmenu-logout svg{
    width:18px;
    height:18px;
}

/* =======================================================
   DARK / LIGHT MODE TOGGLE (site-wide)
======================================================= */

.smt-theme-toggle-btn{
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:50%;
    background:#2563eb;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    line-height:1;
}

.smt-theme-toggle-floating{
    position:fixed;
    bottom:20px;
    right:16px;
    z-index:999999;
    box-shadow:0 2px 10px rgba(0,0,0,.3);
}

/* First pass: main site surfaces. Category/homepage cards keep
   their own pastel colours (that's their whole visual identity),
   only the page chrome around them (body, header, feature cards,
   footer) switches to a dark surface. */

[data-theme="dark"] body{
    background:#0f172a;
    color:#e2e8f0;
}

[data-theme="dark"] .smt-category-heading{
    color:#f1f5f9;
}

[data-theme="dark"] .smt-category-subheading{
    color:#94a3b8;
}

[data-theme="dark"] .smt-account-name{
    color:#60a5fa;
}

[data-theme="dark"] .smt-footer-links a{
    color:#94a3b8;
}

/* Site header dropdown submenus (Blocksy's own `.sub-menu`,
   confirmed from Blocksy's source - background driven by a
   theme CSS variable normally, not by our data-theme attribute,
   so it needs an explicit override here). Best-effort based on
   Blocksy's known markup, not yet visually confirmed live. */
[data-theme="dark"] .sub-menu{
    background-color:#1e293b !important;
}

[data-theme="dark"] .sub-menu a{
    color:#e2e8f0 !important;
}

[data-theme="dark"] .smt-features-section{
    background:#0f172a;
}

[data-theme="dark"] .smt-features-heading{
    color:#f1f5f9;
}

[data-theme="dark"] .smt-feature-card{
    background:#1e293b;
    box-shadow:0 2px 10px rgba(0,0,0,.3);
}

[data-theme="dark"] .smt-feature-card h3{
    color:#f1f5f9;
}

[data-theme="dark"] .smt-feature-card-list li{
    color:#cbd5e1;
}

[data-theme="dark"] .smt-feature-card p{
    color:#94a3b8;
}

[data-theme="dark"] #offcanvas .ct-panel-inner{
    filter:none;
}

[data-theme="dark"] footer,
[data-theme="dark"] .entry-content,
[data-theme="dark"] .site-footer{
    background:#0f172a;
    color:#cbd5e1;
}

/* =======================================================
   CATEGORY / TEST-TYPE ARCHIVE PAGES
======================================================= */

.smt-category-page{
    max-width:800px;
    margin:0 auto;
    padding:30px 20px 60px;
}

.smt-category-header h1{
    font-size:28px;
    color:#1e293b;
    margin:0 0 8px;
}

.smt-category-desc{
    color:#64748b;
    font-size:14px;
    line-height:1.6;
    margin:0 0 20px;
}

.smt-type-tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:8px;
    margin-bottom:20px;
}

.smt-type-tab{
    flex:0 0 auto;
    padding:8px 16px;
    border-radius:20px;
    background:#f1f5f9;
    color:#475569;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
}

.smt-type-tab.active{
    background:#2563eb;
    color:#fff;
}

.smt-test-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.smt-test-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
    text-decoration:none;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}

.smt-test-row-icon{
    flex:0 0 auto;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#eff6ff;
    color:#2563eb;
}

.smt-test-row-icon svg{
    width:20px;
    height:20px;
}

.smt-test-row-info{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.smt-test-row-title{
    font-size:14.5px;
    font-weight:700;
    color:#1e293b;
}

.smt-test-row-meta{
    font-size:12px;
    color:#64748b;
}

.smt-test-row-btn{
    flex:0 0 auto;
    padding:8px 14px;
    border-radius:8px;
    background:#2563eb;
    color:#fff;
    font-size:12.5px;
    font-weight:700;
}

.smt-no-tests{
    text-align:center;
    color:#64748b;
    padding:40px 0;
}

.smt-pagination{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-top:20px;
    flex-wrap:wrap;
}

.smt-pagination .page-numbers{
    padding:8px 13px;
    border-radius:8px;
    background:#f1f5f9;
    color:#475569;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}

.smt-pagination .page-numbers.current{
    background:#2563eb;
    color:#fff;
}

[data-theme="dark"] .smt-category-page{
    color:#e2e8f0;
}

[data-theme="dark"] .smt-category-header h1{
    color:#f1f5f9;
}

[data-theme="dark"] .smt-category-desc{
    color:#94a3b8;
}

[data-theme="dark"] .smt-type-tab:not(.active){
    background:#1e293b;
    color:#cbd5e1;
}

[data-theme="dark"] .smt-test-row{
    background:#1e293b;
    border-color:#334155;
    box-shadow:0 2px 8px rgba(0,0,0,.3);
}

[data-theme="dark"] .smt-test-row-title{
    color:#f1f5f9;
}

[data-theme="dark"] .smt-test-row-meta{
    color:#94a3b8;
}

[data-theme="dark"] .smt-test-row-icon{
    background:#0f172a;
}

[data-theme="dark"] .smt-pagination .page-numbers{
    background:#1e293b;
    color:#cbd5e1;
}

[data-theme="dark"] .smt-no-tests{
    color:#94a3b8;
}

/* =======================================================
   MOBILE MENU DRAWER - sitewide dark toggle
   The drawer normally has its OWN two-tone system keyed off
   LOGIN state (light-out/dark-in, .smt-mmenu-light/-dark) --
   completely separate from the sitewide data-theme toggle.
   Per request, when data-theme="dark" is on, this drawer
   should ALSO go dark regardless of login state, layered on
   top of (and overriding) that existing system.
======================================================= */

[data-theme="dark"] #offcanvas .ct-panel-inner,
[data-theme="dark"] #offcanvas .ct-panel-content,
[data-theme="dark"] #offcanvas .ct-panel-content-inner{
    background-color:#0f172a !important;
}

[data-theme="dark"] .smt-mmenu-light,
[data-theme="dark"] .smt-mmenu-dark{
    background:#0f172a;
    color:#e2e8f0;
}

[data-theme="dark"] .smt-mmenu-item{
    color:#e2e8f0;
}

[data-theme="dark"] .smt-mmenu-item-home{
    background:#2563eb;
    color:#fff;
}

[data-theme="dark"] .smt-mmenu-cat-toggle{
    background:#1e293b;
    color:#e2e8f0;
}

[data-theme="dark"] .smt-mmenu-subnav{
    background:#1e293b;
    border-color:#334155;
}

[data-theme="dark"] .smt-mmenu-subnav a{
    color:#e2e8f0;
    border-bottom-color:#334155;
}

[data-theme="dark"] .smt-mmenu-name,
[data-theme="dark"] .smt-mmenu-profile *{
    color:#f1f5f9;
}

[data-theme="dark"] .smt-mmenu-cat{
    background:#1e293b;
    border-color:#334155;
}