/*
Theme Name: Vikkal Solution Digital Marketing
Author: Vikkal Solution
Description: Digital marketing agency WordPress theme for Vikkal Solution.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: appdevelopers-clean-blog
*/
:root{--accent:#1565c0;--text:#222;--muted:#687078;--border:#e3e6e8;--soft:#f6f8fa;--max:1160px;--article:820px}
*{box-sizing:border-box}html{margin:0;padding:0;overflow-x:hidden}body{margin:0;background:#fff;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto;display:block}.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.screen-reader-text:focus{position:fixed!important;top:8px;left:8px;width:auto;height:auto;margin:0;padding:10px 14px;clip:auto;background:#fff;color:#111;z-index:99999}
/* Header */
.site-header{position:sticky;top:0;z-index:99999;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 1px 7px rgba(0,0,0,.06)}.header-inner{width:100%;max-width:var(--max);min-height:68px;padding:0 16px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{min-width:0;display:flex;align-items:center;flex:1}.nav-wrap{display:flex;align-items:center;margin-left:auto}.site-title{font-size:24px;font-weight:700;line-height:1.2;color:#171717;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand img{max-height:48px;width:auto}.site-description{margin:2px 0 0;font-size:12px;color:var(--muted)}.menu-toggle{display:none;appearance:none;-webkit-appearance:none;padding:0;width:44px;height:44px;border:1px solid var(--border);background:#fff;align-items:center;justify-content:center;cursor:pointer}.menu-toggle svg{width:22px;height:22px}.primary-menu{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}.primary-menu li{position:relative}.primary-menu>li>a{display:flex;align-items:center;min-height:68px;padding:0 13px;color:#222;font-size:15px;font-weight:600}.primary-menu>li>a:hover,.primary-menu>li.current-menu-item>a{color:var(--accent)}.primary-menu .sub-menu{position:absolute;top:100%;left:0;min-width:210px;margin:0;padding:5px 0;list-style:none;background:#fff;border:1px solid var(--border);box-shadow:0 5px 18px rgba(0,0,0,.12);opacity:0;visibility:hidden}.primary-menu li:hover>.sub-menu,.primary-menu li:focus-within>.sub-menu{opacity:1;visibility:visible}.primary-menu .sub-menu a{display:block;padding:9px 14px;color:#222}.primary-menu .sub-menu a:hover{background:var(--soft);color:var(--accent)}
/* Blog shell */
.site-main{padding:28px 16px 0}.blog-container{width:100%;max-width:var(--max);margin:0 auto}.blog-heading{max-width:var(--article);margin:0 auto 28px;padding:0 8px}.blog-label{display:inline-block;margin-bottom:8px;padding:5px 9px;background:#eaf3ff;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.blog-title{margin:0;color:#171717;font-size:clamp(30px,4vw,44px);line-height:1.2}.blog-intro{margin:10px 0 0;color:var(--muted)}.post-list{display:grid;gap:24px;max-width:var(--article);margin:0 auto}.post-card{background:#fff;border:1px solid var(--border);padding:22px 24px;box-shadow:0 1px 5px rgba(0,0,0,.035)}.post-card .thumb{margin:-22px -24px 20px}.post-card .thumb img{width:100%;height:auto}.entry-title{margin:0 0 8px;font-size:clamp(24px,3vw,32px);line-height:1.3}.entry-title a{color:#171717}.entry-meta{margin-bottom:12px;color:var(--muted);font-size:13px}.entry-excerpt{color:#444}.read-more{display:inline-block;margin-top:10px;font-weight:700}.pagination{max-width:var(--article);margin:30px auto 0}.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}.pagination a,.pagination span{padding:8px 12px;border:1px solid var(--border)}
/* Single article */
.single-container{max-width:var(--article);margin:0 auto}.single-entry{background:#fff;border:1px solid var(--border);padding:28px 30px}.single-entry .entry-title{font-size:clamp(30px,4vw,44px)}.featured-image{margin:22px 0}.article-content{font-size:17px;overflow-wrap:anywhere}.article-content p{margin:0 0 1.15em}.article-content h2{font-size:28px;line-height:1.3;margin:1.5em 0 .6em}.article-content h3{font-size:23px;margin:1.4em 0 .6em}.article-content ul,.article-content ol{padding-left:1.4em}.article-content table{width:100%;border-collapse:collapse}.article-content th,.article-content td{border:1px solid var(--border);padding:8px;text-align:left}.article-content blockquote{margin:1.5em 0;padding:12px 18px;border-left:4px solid var(--accent);background:var(--soft)}
/* Footer */
.site-footer{margin:0;padding:24px 16px;background:#151515;color:#bbb;text-align:center;font-size:13px}.adb-footer-code{margin:0;padding:0}.adb-footer-code>*:first-child{margin-top:0}.adb-footer-code>*:last-child{margin-bottom:0}
@media(max-width:760px){.header-inner{min-height:60px;width:100%;padding:0 12px}.brand{flex:1;min-width:0}.nav-wrap{margin-left:auto;position:relative}.site-header{position:sticky;top:0}.site-description{display:none}.menu-toggle{display:flex;flex:0 0 44px}.nav-wrap{position:relative}.primary-menu{position:absolute;right:0;top:calc(100% + 1px);display:block;width:min(300px,calc(100vw - 20px));max-height:calc(100vh - 72px);overflow:auto;background:#fff;border:1px solid var(--border);box-shadow:0 5px 18px rgba(0,0,0,.13);padding:5px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:.15s}.nav-wrap.is-open .primary-menu{opacity:1;visibility:visible;transform:none}.primary-menu>li>a{min-height:0;padding:11px 12px;border-bottom:1px solid #eee}.primary-menu .sub-menu{position:static;display:none;opacity:1;visibility:visible;box-shadow:none;border:0;padding-left:10px}.primary-menu li.menu-item-has-children:hover>.sub-menu{display:none}.primary-menu li.menu-item-has-children:focus-within>.sub-menu{display:block}.site-main{padding:20px 12px 0}.blog-heading{padding:0 4px;margin-bottom:22px}.post-card{padding:18px 16px}.post-card .thumb{margin:-18px -16px 16px}.single-entry{padding:20px 16px}.article-content{font-size:16px}.single-container{width:100%}.site-title{font-size:20px}.primary-menu>li>a{font-size:15px}}

@media screen and (min-width:783px){body.admin-bar .site-header{top:32px}}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}


/* =========================================================
   FINAL HEADER
   ========================================================= */
.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:70px;
    z-index:99999;
    background:#fff;
    border-bottom:1px solid #e3e6e8;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.header-inner{
    width:100%;
    max-width:1280px;
    height:70px;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}
.brand{
    flex:0 0 auto;
    min-width:0;
    display:flex;
    align-items:center;
}
.brand .custom-logo-link{
    display:flex;
    align-items:center;
    line-height:0;
}
.brand img.custom-logo{
    display:block;
    width:auto;
    max-width:220px;
    max-height:50px;
    height:auto;
}
.site-title{
    display:block;
    margin:0;
    font-size:24px;
    font-weight:700;
    line-height:1.2;
    color:#171717;
    white-space:nowrap;
}
.nav-wrap{
    flex:0 0 auto;
    margin-left:auto;
    display:flex;
    align-items:center;
    position:relative;
}
.nav-wrap nav{
    display:block;
}
.primary-menu{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0;
    list-style:none;
    margin:0;
    padding:0;
}
.primary-menu>li{
    position:relative;
    margin:0;
}
.primary-menu>li>a{
    display:flex;
    align-items:center;
    min-height:70px;
    padding:0 14px;
    color:#222;
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
}
.primary-menu>li>a:hover,
.primary-menu>li.current-menu-item>a,
.primary-menu>li.current_page_item>a{
    color:var(--accent);
    text-decoration:none;
}
.primary-menu .sub-menu{
    position:absolute;
    top:100%;
    left:0;
    z-index:100000;
    min-width:210px;
    margin:0;
    padding:6px 0;
    list-style:none;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(3px);
    transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
.primary-menu li:hover>.sub-menu,
.primary-menu li:focus-within>.sub-menu{
    opacity:1;
    visibility:visible;
    transform:none;
}
.primary-menu .sub-menu a{
    display:block;
    padding:9px 14px;
    color:#222;
    font-size:14px;
    text-decoration:none;
}
.primary-menu .sub-menu a:hover{
    background:var(--soft);
    color:var(--accent);
}
.menu-toggle{
    display:none;
}

/* Space below fixed header without changing blog width */
.site-main{
    padding-top:98px;
}

/* =========================================================
   FULL WIDTH NORMAL PAGES ONLY
   Blog layout is intentionally NOT changed.
   ========================================================= */
.site-main > .full-page-container{
    width:calc(100% + 32px);
    max-width:none;
    margin-left:-16px;
    margin-right:-16px;
    padding:0 32px 60px;
}
.full-page-entry{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}
.full-page-entry .entry-title,
.full-page-entry .article-content{
    width:100%;
    max-width:none;
}

/* =========================================================
   ADMIN BAR
   ========================================================= */
@media screen and (min-width:783px){
    body.admin-bar .site-header{top:32px;}
    body.admin-bar .site-main{padding-top:130px;}
}
@media screen and (max-width:782px){
    body.admin-bar .site-header{top:46px;}
    body.admin-bar .site-main{padding-top:124px;}
}

/* =========================================================
   MOBILE HEADER
   ========================================================= */
@media (max-width:760px){
    .site-header{
        height:60px;
    }
    .header-inner{
        height:60px;
        min-height:60px;
        padding:0 12px;
        gap:10px;
    }
    .brand{
        min-width:0;
        flex:1 1 auto;
    }
    .brand img.custom-logo{
        max-width:190px;
        max-height:44px;
    }
    .site-title{
        max-width:calc(100vw - 80px);
        overflow:hidden;
        text-overflow:ellipsis;
        font-size:20px;
    }
    .nav-wrap{
        flex:0 0 44px;
        width:44px;
        height:44px;
        margin-left:auto;
    }
    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        margin:0;
        padding:0;
        border:1px solid var(--border);
        background:#fff;
        color:#222;
        cursor:pointer;
    }
    .menu-toggle svg{
        width:22px;
        height:22px;
    }
    .nav-wrap nav{
        position:static;
    }
    .primary-menu{
        position:absolute;
        top:46px;
        right:0;
        display:block;
        width:min(300px,calc(100vw - 24px));
        max-height:calc(100vh - 78px);
        overflow:auto;
        padding:5px;
        margin:0;
        background:#fff;
        border:1px solid var(--border);
        box-shadow:0 7px 20px rgba(0,0,0,.14);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-6px);
        transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
    }
    .nav-wrap.is-open .primary-menu{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
    }
    .primary-menu>li>a{
        min-height:0;
        padding:11px 12px;
        border-bottom:1px solid #eee;
        white-space:normal;
    }
    .primary-menu .sub-menu{
        position:static;
        display:block;
        min-width:0;
        padding:0 0 0 10px;
        border:0;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
    }
    .primary-menu .sub-menu a{
        padding:9px 10px;
    }

    .site-main{
        padding:80px 12px 0;
    }
    .site-main > .full-page-container{
        width:calc(100% + 24px);
        margin-left:-12px;
        margin-right:-12px;
        padding:0 16px 40px;
    }
}


/* =========================================================
   NORMAL PAGE TITLE HIDDEN — BLOG UNCHANGED
   ========================================================= */
.full-page-entry > header{
    display:none !important;
}
.full-page-entry .entry-title{
    display:none !important;
}
.full-page-entry{
    padding-top:0 !important;
    margin-top:0 !important;
}
.full-page-container{
    padding-top:0 !important;
    margin-top:0 !important;
}


/* =========================================================
   NORMAL PAGE TOP GAP FIX
   Blog layout remains unchanged.
   Fixed header keeps only the exact header-height offset.
   ========================================================= */
.site-main > .full-page-container{
    margin-top:-28px !important;
}

@media screen and (max-width:782px){
    .site-main > .full-page-container{
        margin-top:-20px !important;
    }
}

@media screen and (min-width:783px){
    body.admin-bar .site-main > .full-page-container{
        margin-top:-28px !important;
    }
}

@media screen and (max-width:782px){
    body.admin-bar .site-main > .full-page-container{
        margin-top:-18px !important;
    }
}



/* =========================================================
   HEADER WIDGETS
   ========================================================= */
.header-widgets{
    flex:0 1 auto;
    min-width:0;
    max-width:42%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-left:auto;
}
.header-widget{
    margin:0;
    padding:0;
    font-size:14px;
    line-height:1.35;
    color:var(--text);
}
.header-widget-title{
    margin:0 0 3px;
    font-size:12px;
    line-height:1.2;
    font-weight:700;
}
.header-widget p{margin:0;}
.header-widget ul{margin:0;padding:0;list-style:none;}
.header-widget a{color:inherit;}
.header-widget img{max-height:44px;width:auto;}
.header-widget input,.header-widget select,.header-widget button{max-width:100%;}

@media (max-width:760px){
    .header-widgets{
        flex:1 1 auto;
        max-width:none;
        min-width:0;
        justify-content:flex-end;
        margin-left:8px;
        margin-right:2px;
        overflow:hidden;
    }
    .header-widget{
        max-width:100%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        font-size:12px;
    }
    .header-widget-title{font-size:10px;}
    .header-widget img{max-height:36px;width:auto;}
    .header-widgets .widget:not(:first-child){display:none;}
}

/* =========================================================
   FOOTER WIDGETS
   Does not change the blog layout or page width.
   ========================================================= */
.footer-widgets{
    width:min(1100px,calc(100% - 32px));
    margin:0 auto 24px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    text-align:left;
}
.footer-widget{
    padding:18px;
    border:1px solid rgba(255,255,255,.14);
}
.footer-widget-title{
    margin:0 0 12px;
    font-size:18px;
}
.footer-widget ul{
    margin:0;
    padding-left:18px;
}
@media (max-width:782px){
    .footer-widgets{
        width:calc(100% - 24px);
        grid-template-columns:1fr;
        gap:12px;
    }
}


/* =========================================================
   NON-BLOG PAGES — REMOVE EMPTY SPACE BEFORE FOOTER
   Blog, archives and single posts remain unchanged.
   ========================================================= */

/* Normal WordPress pages */
body.page .site-main > .full-page-container{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
}

/* Homepage custom output */
body.home .site-main{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
}

body.home .adb-homepage-custom,
body.home .adb-homepage-custom > .adm-homepage{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

/* Remove only external bottom margin after the final homepage block */
body.home .adb-homepage-custom > *:last-child,
body.home .adb-homepage-custom .adm-homepage > *:last-child{
    margin-bottom:0 !important;
}

/* Footer starts immediately after non-blog page/home content */
body.page .site-main + .site-footer,
body.home .site-main + .site-footer{
    margin-top:0 !important;
}

/* Keep the blog section untouched */
body.blog .site-main,
body.archive .site-main,
body.search .site-main,
body.single-post .site-main{
    /* Existing blog/article spacing remains unchanged */
}

/* =========================================================
   FINAL NON-BLOG BOTTOM GAP FIX
   Applies to Homepage + normal Pages + other non-blog views.
   Blog index, archives, search results and single blog posts
   are intentionally excluded.
   ========================================================= */
body:not(.blog):not(.archive):not(.search):not(.single-post) .site-main{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
    border-bottom:0 !important;
}

body:not(.blog):not(.archive):not(.search):not(.single-post) .site-main > *:last-child,
body:not(.blog):not(.archive):not(.search):not(.single-post) .full-page-container,
body:not(.blog):not(.archive):not(.search):not(.single-post) .full-page-entry,
body:not(.blog):not(.archive):not(.search):not(.single-post) .adb-homepage-custom,
body:not(.blog):not(.archive):not(.search):not(.single-post) .adm-homepage{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

/* Homepage: force the final visual section to meet the footer */
body.home .adb-homepage-custom > :last-child,
body.home .adm-homepage > :last-child,
body.home .adm-final-cta{
    margin-bottom:0 !important;
}

/* Normal pages: remove theme container bottom space */
body.page:not(.blog) .site-main > .full-page-container{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
}

/* Footer itself must not create a top gap on non-blog views */
body:not(.blog):not(.archive):not(.search):not(.single-post) .site-footer{
    margin-top:0 !important;
}

/* Safety: preserve existing Blog section spacing */
body.blog .site-main,
body.archive .site-main,
body.search .site-main,
body.single-post .site-main{
    /* Blog spacing intentionally untouched */
}




/* MOBILE MENU: hamburger changes to close X when menu is open */
.menu-toggle .adb-icon-menu,
.menu-toggle .adb-icon-close{
    width:22px;
    height:22px;
    display:block;
}
.menu-toggle .adb-icon-close{
    display:none;
}
.menu-toggle.is-open .adb-icon-menu{
    display:none;
}
.menu-toggle.is-open .adb-icon-close{
    display:block;
}


/* FINAL FIX: never show hamburger and close icon together */
#adb-menu-toggle .adb-icon-menu,
#adb-menu-toggle .adb-icon-close{
    width:22px !important;
    height:22px !important;
}
#adb-menu-toggle .adb-icon-menu{
    display:block !important;
}
#adb-menu-toggle .adb-icon-close{
    display:none !important;
}
#adb-menu-toggle.is-open .adb-icon-menu{
    display:none !important;
}
#adb-menu-toggle.is-open .adb-icon-close{
    display:block !important;
}
@media screen and (min-width:761px){
    #adb-menu-toggle{display:none !important;}
}


/* FINAL MOBILE MENU ICON: one icon only, swaps between hamburger and close */
#adb-menu-toggle .adb-menu-icon{
    display:block !important;
    width:24px !important;
    height:24px !important;
    line-height:22px !important;
    text-align:center !important;
    font-size:26px !important;
    font-weight:400 !important;
    font-family:Arial, sans-serif !important;
}
#adb-menu-toggle.is-open .adb-menu-icon{
    font-size:30px !important;
    line-height:20px !important;
}


/* =========================================================
   VIKKAL SOLUTION — BRAND / FOOTER REFINEMENT
   Orange + charcoal + silver palette from supplied logo
   ========================================================= */
:root{
  --accent:#f58216;
  --accent-dark:#c95d00;
  --text:#1b1b1b;
  --soft:#f4f2ef;
  --border:#dedad5;
}
.site-header{background:#fff;border-bottom:1px solid #ddd8d2;box-shadow:0 5px 22px rgba(0,0,0,.07)}
.header-inner{max-width:1320px;min-height:76px;padding:0 24px}
.vikkal-brand-logo{display:flex;align-items:center;text-decoration:none}
.vikkal-brand-logo img{width:auto;height:58px;max-width:310px;object-fit:contain}
.primary-menu>li>a{min-height:76px;color:#292929;font-weight:700;letter-spacing:.01em}
.primary-menu>li>a:hover,.primary-menu>li.current-menu-item>a{color:#f58216}
.site-main{padding:0!important}
.site-footer{margin:0!important;padding:0!important;background:#161616;color:#c8c8c8;border-top:4px solid #f58216}
.vikkal-footer-inner{max-width:1320px;margin:0 auto;padding:25px 24px 28px;text-align:center}
.vikkal-footer-copyright{font-size:13px;letter-spacing:.02em;color:#c9c9c9}
.vikkal-footer-copyright span{color:#f58216;font-weight:700}
@media(max-width:760px){
  .header-inner{min-height:64px;padding:0 10px}
  .vikkal-brand-logo img{height:46px;max-width:245px}
  .primary-menu>li>a{min-height:0}
}