/* ==========================================================
   SARKARIMAUKA.COM - FINAL COMMON STYLESHEET
   Common Header/Footer + Home Page + Job Detail Page
   ========================================================== */

/* ---------- RESET / BASE ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background:#f5f5f5;
    font-size:16px;
    line-height:1.5;
    color: #212529;
}
a{color:#0645ad;text-decoration:none}
a:hover{color:#f4511e;text-decoration:underline}
img{max-width:100%;height:auto}

.site-wrapper{width:100%;max-width:1070px;margin:auto;background:#fff}
.container{width:calc(100% - 30px);margin:auto}

/* ---------- SIMPLE RESPONSIVE GRID ---------- */
.row{display:flex;flex-wrap:wrap;margin-left:-10px;margin-right:-10px}
.row>[class*="col-"]{min-width:0;padding-left:5px;padding-right:5px}
.col-4{flex:0 0 33.333%;max-width:33.333%}
.col-5{flex:0 0 41.666667%;max-width:41.666667%}
.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.333333%;max-width:58.333333%}
.col-12{flex:0 0 100%;max-width:100%}
.g-3{row-gap:15px}

@media(min-width:768px){
    .col-md-3{flex:0 0 25%;max-width:25%}
    .col-md-4{flex:0 0 33.333%;max-width:33.333%}
    .col-md-5{flex:0 0 41.666667%;max-width:41.666667%}
    .col-md-7{flex:0 0 58.333333%;max-width:58.333333%}
    .col-md-9{flex:0 0 75%;max-width:75%}
}

/* ==========================================================
   COMMON HEADER
   ========================================================== */
.site-header{
    position:relative;min-height:120px;overflow:hidden;
    background:linear-gradient(110deg,#fff7ef 0%,#ffe8d3 56%,#ffd2ad 100%);
    border-bottom:1px solid #ffd1ad
}
.site-header:before,.site-header:after,.header-shape{content:"";position:absolute;border-radius:50%}
.site-header:before{width:330px;height:170px;right:110px;top:-105px;background:rgba(251,94,3,.10)}
.site-header:after{width:260px;height:150px;right:-70px;bottom:-95px;background:rgba(255,166,72,.18)}
.header-shape{width:180px;height:150px;right:25%;top:-75px;background:rgba(255,119,48,.08)}

.header-inner{position:relative;z-index:2;min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand-area{display:flex;align-items:center;gap:16px;min-width:0}
.logo{display:block;width:92px;height:92px;object-fit:contain}
.brand-name{margin:0;color:#242b35;font-size:40px;font-weight:800;line-height:1;white-space:nowrap}
.brand-name span{color:#f4511e}
.brand-tagline{margin-top:8px;color:#30343b;font-size:18px;font-weight:600}

.trust-box{
    display:flex;align-items:center;gap:10px;flex:0 0 auto;
    padding:10px 14px;background:rgba(255,255,255,.85);
    border:1px solid #f4c79f;border-radius:9px;box-shadow:0 3px 10px rgba(0,0,0,.04)
}
.trust-star{font-size:27px}
.trust-box strong{display:block;font-size:16px}
.trust-box small{display:block;color:#555;font-size:13px}

/* ==========================================================
   COMMON NAVIGATION
   Desktop: all links in one line
   Mobile: 3 links + toggle
   ========================================================== */
.main-nav{background:linear-gradient(90deg,#f4511e,#ff6d19,#f4511e);box-shadow:0 2px 5px rgba(0,0,0,.08)}
.nav-inner{display:flex;align-items:center}
.mobile-nav-row{display:contents}
.nav-menu{display:flex;margin:0;padding:0;list-style:none}
.nav-menu li{margin:0;padding:0}
.nav-menu a{display:block;padding:12px 13px;color:#fff;font-size:16px;font-weight:600;white-space:nowrap}
.nav-menu a:hover{color:#fff;background:rgba(255,255,255,.15);text-decoration:none}
.nav-menu .active{margin:4px;padding:8px 13px;background:#fff5e7;color:#9c3d12;border-radius:7px}
.nav-menu .active:hover{color:#9c3d12;background:#fff}
.menu-toggle{display:none}

/* ==========================================================
   HOME - WELCOME / LIVE / WHATSAPP
   ========================================================== */
.welcome-box{
    position:relative;display:flex;align-items:center;gap:20px;margin-top:20px;
    padding:12px 14px;overflow:hidden;background:linear-gradient(100deg,#fff9f4,#fffdfb);
    border:1px solid #f6cda9;border-radius:10px
}
.welcome-box:after{content:"";position:absolute;width:170px;height:170px;right:-80px;bottom:-100px;background:rgba(251,94,3,.06);border-radius:50%}
.announcement-icon{display:flex;align-items:center;justify-content:center;flex:0 0 68px;width:68px;height:68px;background:#fff0e2;border-radius:50%;font-size:34px}
.welcome-content{position:relative;z-index:1;min-width:0;line-height:1.55}
.welcome-content p{margin:4px 0}
.highlight{color:#f04418;font-weight:700}

/* only wrapper centers the live pill */
.live-clock-wrap{text-align:center;margin:18px 0 14px}
.live-clock{
    display:inline-flex;align-items:center;gap:8px;padding:5px 15px;
    background:#fff;color:#111;border:1px solid #eee;border-radius:30px;
    box-shadow:0 3px 10px rgba(0,0,0,.15);font-size:16px;font-weight:700;white-space:nowrap
}
.live-clock span:nth-child(2){color:#00a828}
.live-dot{display:inline-block;width:10px;height:10px;background:#ff7f86;border-radius:50%;animation:liveBlink 1s infinite}
@keyframes liveBlink{0%,50%{opacity:1}51%,100%{opacity:.25}}

.whatsapp-wrap{text-align:center;margin:0 0 24px}
.whatsapp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;background:linear-gradient(90deg,#128c43,#16a34a);color:#fff;font-size:16px;font-weight:700;border-radius:7px;box-shadow:0 3px 8px rgba(0,120,70,.17)}
.whatsapp-btn svg{width:22px;height:22px;display:block}
.whatsapp-btn:hover{color:#fff;background:#087f3b;text-decoration:none}

/* ==========================================================
   HOME - FEATURED UPDATE CARDS
   ========================================================== */
.update-grid{align-items:stretch;margin-bottom:20px}
.update-grid>[class*="col-"],.content-grid>[class*="col-"]{display:flex}
.update-card{
    display:flex;align-items:center;width:100%;min-height:72px;gap:12px;padding:12px;
    color:#222;border:1px solid;border-radius:8px;transition:.2s
}
.update-card:hover{color:#222;text-decoration:none;transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,0,0,.08)}
.update-icon{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;color:#fff;border-radius:8px;font-size:24px}
.update-title{min-width:0;font-size:16px;font-weight:600;text-align:center;line-height:1.4;overflow-wrap:anywhere}

/*.card-red{background:#fff5f4;border-color:#ffc8c2}.card-red .update-icon{background:#ef4444}
.card-orange{background:#fff8ef;border-color:#ffd7a8}.card-orange .update-icon{background:#f97316}
.card-yellow{background:#fffaf0;border-color:#f8dea2}.card-yellow .update-icon{background:#f59e0b}
.card-purple{background:#faf7ff;border-color:#d9c7f4}.card-purple .update-icon{background:#7441b5}
.card-blue{background:#f3f8ff;border-color:#c8dcf8}.card-blue .update-icon{background:#3478d4}
.card-green{background:#f4faf5;border-color:#cbe4cf}.card-green .update-icon{background:#178744}
.card-peach{background:#fff6f1;border-color:#f7d0bb}.card-peach .update-icon{background:#ea5b20}
.card-teal{background:#f3fafb;border-color:#c2e1e3}.card-teal .update-icon{background:#328d92}*/

.card-red{background:#ff4b45;border-color:#e83b36}
.card-orange{background:#ff8736;border-color:#ef7426}
.card-yellow{background:#f5a623;border-color:#df9217}
.card-purple{background:#e936e9;border-color:#ce27ce}
.card-blue{background:#3d5afe;border-color:#3049e5}
.card-green{background:#00c92c;border-color:#00ad26}
.card-peach{background:#ff6d3a;border-color:#ed5829}
.card-teal{background:#0aafbb;border-color:#0799a4}
.update-card,.update-card:hover{color:#fff}

/* ==========================================================
   HOME - RESULTS / ADMIT / LATEST JOBS
   ========================================================== */
.content-grid{align-items:stretch}
.content-box{
    display:flex;flex-direction:column;width:100%;overflow:hidden;background:#fff;
    border:1px solid #f2cdb8;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.04)
}
.box-heading{display:flex;align-items:center;gap:7px;margin:0;padding:11px 15px;color:#fff;font-size:19px}
.result-heading{background:linear-gradient(90deg,#ef3123,#fa4418)}
.admit-heading{background:linear-gradient(90deg,#f45a17,#ff7614)}
.job-heading{background:linear-gradient(90deg,#f89111,#ffad0a)}

.post-list{flex:1;margin:0;padding:8px 15px 15px;list-style:none}
.post-list li,.sidebar-list li{position:relative;border-bottom:1px solid #eee;font-size:16px}
.post-list li{padding:7px 4px 7px 15px}
.post-list li:before,.sidebar-list li:before{content:"•";position:absolute;left:0;color:#f4511e;font-weight:700}
.post-list li:before{top:6px}

.view-all{
    display:block;margin:0 14px 14px;padding:8px;color:#f4511e;border:1px solid #f4511e;
    border-radius:5px;text-align:center;font-size:16px;font-weight:600
}
.view-all:hover{color:#fff;background:#f4511e;text-decoration:none}

.about-box{margin-top:16px;padding:12px 14px;background:linear-gradient(105deg,#fff9f5,#fffdfb);border:1px solid #f1d5c2;border-radius:9px}
.about-box h2{margin:0 0 10px;color:#e8441a;font-size:21px}
.about-box p{margin:7px 0}

/* ==========================================================
   JOB DETAIL - LAYOUT
   ========================================================== */
.breadcrumb{margin:15px 0 12px;color:#666;font-size:16px}
.breadcrumb a{color:#555}.breadcrumb a:hover{color:#f4511e}
.breadcrumb span{margin:0 5px;color:#aaa}
.breadcrumb+.row{align-items:flex-start}

.job-article,.breadcrumb+.row aside{width:100%;min-width:0}
.job-article{overflow:hidden;background:#fff;border:1px solid #ead7c9;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.04)}

.article-header{padding:12px 14px;background:linear-gradient(110deg,#fff8f1,#fffdfb);border-bottom:1px solid #f2d6c1}
.article-header h1{margin:0 0 10px;font-size:28px;line-height:1.3}
.publish-info{color:#666}.publish-info strong{color:#f4511e}

.short-info{padding:14px 18px;background:#fffaf6;border-bottom:1px solid #f1dfd2}
.short-info h2{margin:0 0 8px;color:#e7461a;font-size:20px}
.short-info p{margin:6px 0;line-height:1.55}

/* ==========================================================
   JOB DETAIL - RECRUITMENT / DATES / SECTIONS
   ========================================================== */
.recruitment-box,.detail-section{margin:8px;overflow:hidden;border:1px solid #ead8ca;border-radius:7px}
.recruitment-box{text-align:center;border-color:#f2b17d}

.org-name,.section-heading{position:relative;overflow:hidden;background:linear-gradient(110deg,#fff7ef 0%,#ffe8d3 56%,#ffd2ad 100%)}
.org-name{padding:10px;color:#d94317;font-size:22px;font-weight:700}
.recruitment-name{font-weight:700}
.advt{padding-bottom:9px;color:#555;font-weight:600}
.site-name{padding:8px;background:linear-gradient(90deg,#f66032,#ff8438,#f66032);color:#fff;font-weight:700;letter-spacing:.6px}

.org-name:before,.section-heading:before{content:"";position:absolute;width:150px;height:80px;right:90px;top:-48px;border-radius:50%;background:rgba(251,94,3,.10)}
.org-name:after,.section-heading:after{content:"";position:absolute;width:120px;height:70px;right:-20px;bottom:-38px;border-radius:50%;background:rgba(255,166,72,.18)}

.info-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:8px}
.info-box{overflow:hidden;background:#fff;border:1px solid #ead8ca;border-radius:7px}
.info-box h2{margin:0;padding:10px 14px;color:#fff;font-size:20px}
.dates-heading{background:linear-gradient(90deg,#f77a6d,#fa936e)}
.fee-heading{background:linear-gradient(90deg,#f89b4c,#f9bd55)}
.info-box ul{margin:0;padding:10px 14px 10px 28px}
.info-box li,.section-content li{margin:7px 0}

.section-heading{margin:0;padding:10px 15px;color:#c94318;border-left:4px solid #f4511e;font-size:20px}
.section-content{padding:12px 14px}
.section-content p{margin:6px 0 10px}
.section-content ul{margin:6px 0;padding-left:22px}
.note-box{margin-top:12px;padding:9px 11px;background:#fff8dd;border-left:4px solid #f4b400;border-radius:4px}

/* ==========================================================
   JOB DETAIL - TABLES / FAQ / SIDEBAR
   ========================================================== */
.vacancy-table,.links-table{width:100%;border-collapse:collapse}
.vacancy-table th,.vacancy-table td{padding:10px;border:1px solid #ddd;text-align:left;vertical-align:top}
.vacancy-table th{background:#fff1e4;color:#c94318}
.vacancy-table td:nth-child(2),.vacancy-table th:nth-child(2){width:100px;text-align:center}
.links-table td{padding:11px 12px;border-bottom:1px solid #eee}
.links-table td:first-child{width:52%;font-weight:600}

.action-btn{
    display:inline-block;min-width:110px;padding:7px 12px;background:linear-gradient(90deg,#f4511e,#ff7619);
    color:#fff;border-radius:5px;text-align:center;font-weight:700
}
.action-btn:hover{color:#fff;background:#dc4417;text-decoration:none}

.faq-item{padding:10px 0;border-bottom:1px solid #eee}
.faq-item:last-child{border-bottom:0}
.faq-question{margin-bottom:5px;color:#d8471c;font-weight:700}
.faq-answer{color:#333}

.sidebar-box{margin-bottom:15px;overflow:hidden;background:#fff;border:1px solid #ead8ca;border-radius:7px;box-shadow:0 2px 7px rgba(0,0,0,.03)}
.sidebar-title{margin:0;padding:10px 13px;background:linear-gradient(90deg,#f66032,#ff8438,#f66032);color:#fff;font-size:19px}
.sidebar-list{margin:0;padding:8px 13px 12px;list-style:none}
.sidebar-list li{padding:9px 3px 9px 14px}
.sidebar-list li:last-child{border-bottom:0}
.join-box{padding:12px;background:#f7fff9;text-align:center}
.join-box p{margin:0 0 12px}

/* ==========================================================
   COMMON FOOTER
   ========================================================== */
.site-footer{margin-top:12px;background:linear-gradient(100deg,#fff6ee,#fffaf6);border-top:1px solid #f1d2bd}
.footer-row{padding:25px 10px;row-gap:20px;}
.footer-row .col-md-7 > .row{margin-left:0;margin-right:0}
.footer-title{margin:0 0 10px;color:#e9461c;font-size:19px}
.footer-links{margin:0;padding:0;list-style:none}
.footer-links li{margin:7px 0}
.footer-links a{color:#333}.footer-links a:hover{color:#f4511e}

.social-icons{display:flex;gap:8px;margin-top:12px}
.social-icons a{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;}
.social-icons a svg{width:18px;height:18px;fill:#fff;}
.facebook{background:#316dcc}
.instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.telegram{background:#20a7e0}
.whatsapp{background:#20b65a}
.youtube{background:#f11414}

.copyright{padding:10px;background:linear-gradient(90deg,#f4511e,#ff7619);color:#fff;text-align:center}

/* ============= MOBILE ============= */
@media(max-width:767.98px){

    .container{width:calc(100% - 20px)}

    /* keep desktop-like header; hide only trust box */
    .site-header,.header-inner{min-height:105px}
    .header-inner{justify-content:flex-start}
    .trust-box{display:none}
    .brand-area{width:100%;gap:10px}
    .logo{width:78px;height:78px}
    .brand-name{font-size:clamp(28px,8vw,36px)}
    .brand-tagline{margin-top:5px;font-size:clamp(15px,4.2vw,18px)}

    /* 3 links + menu button */
    .nav-inner{display:block}
    .mobile-nav-row{display:flex;width:100%}
    .nav-primary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:1}
    .nav-primary a,.nav-extra a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:7px 4px;text-align:center;white-space:nowrap}
    .nav-primary .active{margin:4px 2px;padding:7px 4px}
    /*.nav-primary .active{margin:1px 1px;padding:1px 4px}*/

    .menu-toggle{
        display:block;flex:0 0 48px;width:48px;margin:4px 0 4px 4px;
        background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);
        border-radius:7px;font-size:25px;cursor:pointer
    }

    .nav-extra{display:none;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding-bottom:5px}
    .nav-extra.show{display:grid}


    /* Home */
    .welcome-box{align-items:flex-start;gap:12px;margin-top:14px}
    .announcement-icon{flex-basis:54px;width:54px;height:54px;font-size:28px}
    .update-card{min-height:82px;gap:8px;padding:9px}
    .update-icon{flex-basis:38px;width:38px;height:38px;font-size:21px}
    .update-title{font-size:14px}

    /* Job detail */
    .info-row{grid-template-columns:1fr}
    .article-header h1{font-size:24px}
    .section-content{overflow-x:auto}
    .vacancy-table,.links-table{min-width:560px}

    .col-md-9 + .col-md-3{margin-top:10px;}

    /* Search toggle for mobile */
    .search-toggle {
        width: 100%;
        margin: 8px 0 0;
        padding: 10px 14px;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .search-toggle::after {
        content: "Search jobs, results, admit cards...";
        color: #fff;
        font-size: 15px;
    }

    .search-toggle svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .search-popup-box .search-form{
        width:100%;
        display:flex;
        gap:8px;
    }

    .search-popup-box .search-input{
        min-width:0;
        width:100%;
        flex:1 1 auto;
    }

    .search-popup-box .action-btn{
        min-width:auto;
        flex:0 0 auto;
        padding:7px 12px;
    }

}

@media(max-width:480px){;
    /*.container{width:calc(100% - 16px)}*/
    .container{width:calc(100% - 20px)}
    .logo{width:70px;height:70px}
    .brand-name{font-size:clamp(25px,8vw,31px)}
    .brand-tagline{font-size:14px}
    .menu-toggle{flex-basis:44px;width:44px;font-size:23px}
    .welcome-box{flex-direction:column}
    .announcement-icon{align-self:center}
}

.section-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

.section-content table th,
.section-content table td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    vertical-align: top;
}

.section-content table th {
    font-weight: 600;
    background: #fff4eb;
}

.links-table {
    font-size: 18px;
    color: #d8471c;
}

/* ---------- TEXT COLOR UTILITIES ---------- */
.text-red{color:#dc3545 !important}
.text-green{color:#198754 !important}
.text-blue{color:#0d6efd !important}
.text-orange{color:#f4511e !important}
.text-center{text-align: center !important}

.whatsapp-link {
    color: #128C7E;
    font-weight: 600;
}

.telegram-link {
    color: #229ED9;
    font-weight: 600;
}

/* ---------- 404 PAGE ---------- */

.error-page{
    margin:30px 0;
    padding:50px 20px;
    text-align:center;
    background:#fffaf6;
    border:1px solid #f2d6c1;
    border-radius:10px
}

.error-code{
    color:#f4511e;
    font-size:80px;
    font-weight:800;
    line-height:1
}

.error-page h1{
    margin:10px 0;
    font-size:30px
}

.error-page p{
    max-width:650px;
    margin:8px auto;
    color:#555
}

.error-links{
    margin-top:22px
}

.error-links a{
    display:inline-block;
    margin:5px;
    padding:9px 16px;
    border-radius:6px;
    font-weight:700
}

.error-home{
    background:#f4511e;
    color:#fff
}

.error-jobs{
    border:1px solid #f4511e;
    color:#f4511e
}

.error-home:hover{
    color:#fff;
    text-decoration:none
}

.error-jobs:hover{
    background:#f4511e;
    color:#fff;
    text-decoration:none
}

/* Search Icon */
.search-toggle {
    margin-left: auto;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.search-toggle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Search Form - Popup + Search Page */
.search-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-input {
    flex: 1;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.search-input:focus {
    border-color: #f4511e;
}

.search-form .action-btn {
    height: 44px;
    /*box-sizing: border-box;*/
}

/* Search Popup */
.search-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
}

.search-popup.active {
    display: flex;
}

.search-popup-box {
    position: relative;
    width: 90%;
    max-width: 520px;
    padding: 32px 22px 22px;
    background: #fffaf6;
    border: 2px solid #f4511e;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.search-popup-box h3 {
    margin: 0 0 14px;
    color: #f4511e;
    font-size: 20px;
}

.search-close {
    position: absolute;
    top: 7px;
    right: 10px;
    border: 0;
    background: transparent;
    color: #f4511e;
    font-size: 26px;
    font-weight: 700;
    cursor: pointer;
}