/* =========================================================
DISHA RECRUITMENT
GUIDE.CSS
VERSION 1.0 — EMPLOYER HIRING GUIDE SYSTEM

Shared by individual Employer Hiring Guides.

Architecture:
    global-new.css
        ↓
    guide.css
        ↓
    accounts-guide.css / future-role-guide.css

This file does NOT style the site-wide header, navigation, buttons,
container foundation or HRX footer. Those remain in global-new.css.

Priorities:
• Employer-first
• Educational, not promotional
• Compact but readable
• Medium typography
• Reusable components
• Accessibility
• Stable responsive behaviour
========================================================= */

:root{
    --guide-blue:#0B4F9C;
    --guide-blue-dark:#083D79;
    --guide-green:#148C3B;
    --guide-blue-soft:#F4F8FD;
    --guide-text:#243447;
    --guide-muted:#63758A;
    --guide-border:#DCE6F1;
    --guide-shadow:0 7px 20px rgba(18,60,105,.07);
}

/* =========================================================
GUIDE 01 — ACCESSIBILITY + BREADCRUMB
========================================================= */

.skip-link{
    position:absolute;
    left:16px;
    top:-60px;
    z-index:99999;
    padding:10px 14px;
    border-radius:7px;
    background:var(--guide-blue);
    color:#fff;
    font-weight:700;
    transition:top .2s ease;
}
.skip-link:focus{top:12px;}

.breadcrumb-nav{
    background:#fff;
    border-bottom:1px solid #EDF2F7;
}
.breadcrumb-list{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    list-style:none;
    margin:0;
    padding:10px 0;
    color:var(--guide-muted);
    font-size:13px;
    line-height:1.4;
}
.breadcrumb-list li{
    display:flex;
    align-items:center;
}
.breadcrumb-list li+li::before{
    content:"›";
    margin:0 9px;
    color:#9AA9B9;
}
.breadcrumb-list a{
    color:var(--guide-blue);
    font-weight:600;
}
.breadcrumb-list .active{color:var(--guide-muted);}

/* =========================================================
GUIDE 02 — COMMON SECTION TYPOGRAPHY
========================================================= */

.guide-page{color:var(--guide-text);}

.guide-section{
    padding:48px 0;
}

.guide-section:nth-of-type(3),
.guide-section:nth-of-type(5),
.guide-section:nth-of-type(7){
    background:var(--guide-blue-soft);
}

.section-heading,
.guide-section-header{
    max-width:820px;
    margin:0 auto 26px;
    text-align:center;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 0 9px;
    padding:5px 12px;
    border-radius:30px;
    background:#EAF3FF;
    color:var(--guide-blue);
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.guide-section-header h2,
.section-heading h2{
    margin:0 0 9px;
    color:var(--guide-blue);
    font-family:"Poppins",Arial,sans-serif;
    font-size:30px;
    line-height:1.2;
    font-weight:700;
}

.guide-section-header p,
.section-heading p{
    max-width:800px;
    margin:0 auto;
    color:var(--guide-muted);
    font-size:15.5px;
    line-height:1.65;
}

.center{text-align:center;}

/* =========================================================
GUIDE 03 — HERO
========================================================= */

.guide-hero{
    padding:40px 0 38px;
    background:linear-gradient(180deg,#F7FBFF 0%,#EEF5FC 100%);
    border-bottom:1px solid #E4EDF6;
}

.guide-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
    gap:38px;
    align-items:center;
}

.guide-hero-content{min-width:0;}

.guide-label{
    display:inline-flex;
    align-items:center;
    margin-bottom:9px;
    padding:5px 11px;
    border-radius:30px;
    background:#EAF3FF;
    color:var(--guide-blue);
    font-size:11px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.guide-hero h1{
    max-width:700px;
    margin:0 0 8px;
    color:var(--guide-blue);
    font-family:"Poppins",Arial,sans-serif;
    font-size:42px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-.45px;
}

.guide-subtitle{
    margin:0 0 13px;
    color:var(--guide-green);
    font-family:"Poppins",Arial,sans-serif;
    font-size:19px;
    line-height:1.35;
    font-weight:700;
}

.guide-intro{
    max-width:720px;
    margin:0 0 16px;
    color:var(--guide-muted);
    font-size:15.5px;
    line-height:1.72;
}

.guide-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 16px;
}

.guide-highlights{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    max-width:720px;
}

.guide-highlight{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    padding:8px 10px;
    border:1px solid #DDE8F3;
    border-radius:8px;
    background:#fff;
    color:#42566B;
    font-size:12px;
    line-height:1.35;
    font-weight:700;
}

.guide-highlight i{
    flex:0 0 auto;
    color:var(--guide-green);
}

.guide-hero-image{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.guide-hero-image img{
    width:100%;
    max-width:410px;
    height:auto;
    border:1px solid #D9E4EF;
    border-radius:14px;
    box-shadow:var(--guide-shadow);
}

/* =========================================================
GUIDE 04 — AT A GLANCE
========================================================= */

.guide-at-a-glance{
    padding:40px 0 44px;
    background:#fff;
}

.guide-at-a-glance-header{
    max-width:800px;
    margin:0 auto 24px;
    text-align:center;
}

.guide-at-a-glance-header h2{
    margin:0 0 9px;
    color:var(--guide-blue);
    font-size:28px;
    line-height:1.2;
}

.guide-at-a-glance-header p{
    margin:0;
    color:var(--guide-muted);
    font-size:15px;
    line-height:1.65;
}

.guide-at-a-glance-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
}

.guide-glance-card{
    min-width:0;
    padding:17px 14px;
    border:1px solid var(--guide-border);
    border-top:3px solid var(--guide-green);
    border-radius:11px;
    background:#fff;
    box-shadow:0 5px 15px rgba(18,60,105,.045);
}

.guide-glance-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin-bottom:10px;
    border-radius:9px;
    background:#EEF5FD;
    color:var(--guide-blue);
}

.guide-glance-card h3{
    margin:0 0 5px;
    color:var(--guide-blue);
    font-size:16px;
    line-height:1.3;
}

.guide-glance-card p{
    margin:0;
    color:var(--guide-muted);
    font-size:13px;
    line-height:1.55;
}

/* =========================================================
GUIDE 05 — GUIDE NAVIGATOR
========================================================= */

.guide-navigation{
    padding:42px 0 46px;
    background:#fff;
}

.guide-nav-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
    max-width:1060px;
    margin:0 auto;
}

.guide-nav-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:17px;
    border:1px solid var(--guide-border);
    border-top:3px solid var(--guide-blue);
    border-radius:11px;
    background:#fff;
    box-shadow:0 5px 16px rgba(18,60,105,.05);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.guide-nav-card:hover{
    transform:translateY(-2px);
    border-color:#BFD5EA;
    box-shadow:var(--guide-shadow);
}

.guide-nav-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:35px;
    height:35px;
    margin-bottom:10px;
    border-radius:9px;
    background:#EEF5FD;
    color:var(--guide-blue);
}

.guide-nav-card h3{
    margin:0 0 5px;
    color:var(--guide-blue);
    font-size:17px;
    line-height:1.3;
}

.guide-nav-card p{
    margin:0 0 9px;
    color:var(--guide-muted);
    font-size:13px;
    line-height:1.55;
}

.guide-nav-link{
    margin-top:auto;
    color:var(--guide-green);
    font-size:12px;
    line-height:1.3;
    font-weight:800;
}

/* =========================================================
GUIDE 06 — TABLES
========================================================= */

.guide-table-wrapper{
    width:100%;
    overflow-x:auto;
    margin:0 auto;
    border:1px solid var(--guide-border);
    border-radius:11px;
    background:#fff;
    box-shadow:0 5px 18px rgba(18,60,105,.05);
    -webkit-overflow-scrolling:touch;
}

.guide-table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
    background:#fff;
}

.guide-table thead{
    background:var(--guide-blue);
    color:#fff;
}

.guide-table th{
    padding:12px 13px;
    text-align:left;
    color:#fff;
    font-family:"Poppins",Arial,sans-serif;
    font-size:13px;
    line-height:1.35;
    font-weight:700;
}

.guide-table td{
    padding:12px 13px;
    border-top:1px solid #E8EEF5;
    color:var(--guide-muted);
    font-size:14px;
    line-height:1.55;
    vertical-align:top;
}

.guide-table tbody tr:nth-child(even){background:#FBFDFF;}
.guide-table tbody tr:hover{background:#F3F8FD;}
.guide-table strong{color:var(--guide-text);}

.guide-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 8px;
    border-radius:30px;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    white-space:nowrap;
}

.guide-badge.recommended{background:#EAF7EF;color:#147B35;}
.guide-badge.good{background:#EEF5FD;color:var(--guide-blue);}
.guide-badge.preferred{background:#F1FAF4;color:#227535;}
.guide-badge.entry{background:#F3F5F7;color:#5D6976;}

/* =========================================================
GUIDE 07 — EMPLOYER TIP / KNOWLEDGE NOTE
========================================================= */

.guide-note{
    max-width:100%;
    margin:17px auto 0;
    padding:14px 17px;
    border:1px solid #DCE9F4;
    border-left:4px solid var(--guide-green);
    border-radius:10px;
    background:#F9FCFA;
}

.guide-note h3{
    margin:0 0 5px;
    color:var(--guide-blue);
    font-size:16px;
    line-height:1.35;
}

.guide-note p{
    margin:0 0 6px;
    color:var(--guide-muted);
    font-size:14px;
    line-height:1.6;
}

.guide-note p:last-child{margin-bottom:0;}
.guide-note strong{color:var(--guide-text);}

/* =========================================================
GUIDE 08 — SKILLS
========================================================= */

.skills-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
    max-width:1000px;
    margin:0 auto;
}

.skill-card{
    min-width:0;
    padding:18px;
    border:1px solid var(--guide-border);
    border-top:3px solid var(--guide-green);
    border-radius:11px;
    background:#fff;
    box-shadow:0 5px 16px rgba(18,60,105,.05);
}

.skill-card h3{
    margin:0 0 9px;
    color:var(--guide-blue);
    font-size:18px;
    line-height:1.3;
}

.skill-card ul{
    margin:0;
    padding:0;
    list-style:none;
}

.skill-card li{
    position:relative;
    padding:5px 0 5px 16px;
    border-top:1px solid #EEF2F6;
    color:var(--guide-muted);
    font-size:14px;
    line-height:1.45;
}

.skill-card li:first-child{border-top:0;}

.skill-card li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:5px;
    color:var(--guide-green);
    font-weight:800;
}

/* =========================================================
GUIDE 09 — HIRING MISTAKES / CHECKLIST
========================================================= */

.mistake-list{
    max-width:1000px;
    margin:0 auto;
    padding:0;
    border:1px solid var(--guide-border);
    border-radius:12px;
    background:#fff;
    box-shadow:0 6px 18px rgba(18,60,105,.05);
}

.mistake-item{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:11px;
    padding:14px 16px;
    border-top:1px solid #E9EFF5;
}

.mistake-item:first-child{border-top:0;}

.mistake-icon{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:2px;
    color:var(--guide-green);
}

.mistake-icon i{color:var(--guide-green) !important;}

.mistake-content h3{
    margin:0 0 4px;
    color:var(--guide-blue);
    font-size:16px;
    line-height:1.35;
}

.mistake-content p{
    margin:0;
    color:var(--guide-muted);
    font-size:14px;
    line-height:1.6;
}

/* =========================================================
GUIDE 10 — FAQ ACCORDION
========================================================= */

.faq-section{
    padding:48px 0 50px;
    background:#fff;
}

.faq-container{
    max-width:900px;
    margin:0 auto;
}

.faq-item{
    overflow:hidden;
    margin-bottom:8px;
    border:1px solid var(--guide-border);
    border-radius:9px;
    background:#fff;
}

.faq-question{
    position:relative;
    display:block;
    width:100%;
    padding:14px 42px 14px 16px;
    border:0;
    background:#fff;
    color:var(--guide-blue);
    font-family:"Poppins",Arial,sans-serif;
    font-size:14px;
    line-height:1.4;
    font-weight:700;
    text-align:left;
    cursor:pointer;
}

.faq-question::after{
    content:"+";
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--guide-green);
    font-size:19px;
    font-weight:500;
}

.faq-item.is-open .faq-question{background:#F8FBFF;}
.faq-item.is-open .faq-question::after{content:"−";}

.faq-answer{
    display:none;
    padding:0 16px 15px;
    background:#F8FBFF;
}

.faq-item.is-open .faq-answer{display:block;}

.faq-answer p{
    margin:0;
    color:var(--guide-muted);
    font-size:14px;
    line-height:1.65;
}

/* =========================================================
GUIDE 11 — RELATED EMPLOYER RESOURCES
========================================================= */

.guide-related{
    padding:42px 0 44px;
    background:var(--guide-blue-soft);
}

.guide-related-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
    max-width:1000px;
    margin:0 auto;
}

.guide-related-card{
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    gap:11px;
    padding:16px;
    border:1px solid var(--guide-border);
    border-top:3px solid var(--guide-blue);
    border-radius:11px;
    background:#fff;
    box-shadow:0 5px 16px rgba(18,60,105,.05);
    transition:transform .2s ease,box-shadow .2s ease;
}

.guide-related-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--guide-shadow);
}

.guide-related-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:9px;
    background:#EEF5FD;
    color:var(--guide-blue);
}

.guide-related-card h3{
    margin:0 0 4px;
    color:var(--guide-blue);
    font-size:16px;
    line-height:1.35;
}

.guide-related-card p{
    margin:0 0 7px;
    color:var(--guide-muted);
    font-size:13px;
    line-height:1.5;
}

.guide-related-link{
    color:var(--guide-green);
    font-size:12px;
    font-weight:800;
}

/* =========================================================
GUIDE 12 — SECONDARY EMPLOYER CONVERSION NOTE
========================================================= */

.guide-employer-note{
    padding:30px 0;
    background:#fff;
}

.guide-employer-note-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:18px 20px;
    border:1px solid #CDE6D6;
    border-left:4px solid var(--guide-green);
    border-radius:11px;
    background:#F7FCF8;
}

.guide-note-label{
    display:inline-block;
    margin-bottom:5px;
    color:var(--guide-green);
    font-size:10px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.guide-employer-note h2{
    margin:0 0 4px;
    color:var(--guide-blue);
    font-size:20px;
    line-height:1.3;
}

.guide-employer-note p{
    max-width:700px;
    margin:0;
    color:var(--guide-muted);
    font-size:14px;
    line-height:1.55;
}

.guide-employer-note .btn{flex:0 0 auto;}

/* =========================================================
GUIDE 13 — FINAL CTA REFINEMENT
========================================================= */

.guide-page .final-cta{padding:40px 0;}

.guide-page .final-cta .section-tag{
    margin-bottom:8px;
    background:rgba(255,255,255,.13);
    color:#fff;
}

.guide-page .final-cta h2{
    max-width:820px;
    margin:0 auto 8px;
    color:#fff;
    font-size:30px;
    line-height:1.2;
}

.guide-page .final-cta p{
    max-width:760px;
    margin:0 auto 17px;
    color:#EAF3FF;
    font-size:15px;
    line-height:1.65;
}

/* =========================================================
GUIDE 14 — RESPONSIVE
========================================================= */

@media(max-width:1050px){
    .guide-hero-grid{
        grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
        gap:26px;
    }
    .guide-at-a-glance-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:900px){
    .guide-hero{padding:34px 0 32px;}
    .guide-hero-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
    .guide-hero-image{justify-content:flex-start;}
    .guide-hero-image img{max-width:390px;}
    .guide-hero h1{font-size:36px;}
    .guide-highlights{grid-template-columns:repeat(2,minmax(0,1fr));}
    .guide-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .guide-related-grid{grid-template-columns:1fr 1fr;}
    .guide-employer-note-inner{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(max-width:767px){
    .breadcrumb-list{
        font-size:12px;
        padding:8px 0;
    }

    .guide-section,
    .faq-section{padding:36px 0;}

    .guide-section-header,
    .section-heading{margin-bottom:22px;}

    .guide-section-header h2,
    .section-heading h2{font-size:25px;}

    .guide-section-header p,
    .section-heading p{
        font-size:14.5px;
        line-height:1.6;
    }

    .guide-hero{padding:30px 0 28px;}
    .guide-hero h1{
        font-size:31px;
        letter-spacing:-.2px;
    }
    .guide-subtitle{font-size:17px;}
    .guide-intro{
        font-size:15px;
        line-height:1.65;
    }

    .guide-highlights{grid-template-columns:1fr;}

    .guide-hero-actions{
        width:100%;
    }
    .guide-hero-actions .btn{width:100%;}

    .guide-at-a-glance{padding:34px 0;}
    .guide-at-a-glance-header h2{font-size:24px;}
    .guide-at-a-glance-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .guide-nav-grid,
    .guide-related-grid,
    .skills-grid{
        grid-template-columns:1fr;
    }

    .guide-nav-card,
    .skill-card,
    .guide-related-card{padding:15px;}

    .guide-table{min-width:680px;}

    .guide-table th,
    .guide-table td{
        padding:10px 11px;
        font-size:13px;
    }

    .guide-note{padding:13px 14px;}

    .mistake-item{
        grid-template-columns:28px minmax(0,1fr);
        padding:13px 14px;
    }

    .faq-question{
        padding:13px 38px 13px 14px;
        font-size:13.5px;
    }

    .faq-answer{padding:0 14px 13px;}

    .guide-employer-note-inner{padding:16px;}
    .guide-employer-note .btn{width:100%;}

    .guide-page .final-cta{padding:34px 0;}
    .guide-page .final-cta h2{font-size:25px;}
}

@media(max-width:480px){
    .guide-at-a-glance-grid{grid-template-columns:1fr;}
    .guide-hero-image img{max-width:100%;}
    .guide-badge{
        white-space:normal;
        text-align:center;
    }
}


/* Navigation utility badges used by the shared DISHA master navigation. */
.nav-menu .live-now-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    padding:4px 8px;
    border-radius:30px;
    background:#EAF7EF;
    color:#147B35;
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.3px;
    white-space:nowrap;
}

.nav-menu .coming-soon-link{
    gap:10px;
}

/* DISHA TYPOGRAPHY STANDARD V1 — shared/new hiring-guide baseline */
.tcl2-section .guide-section-header h2,
.guide-section-header h2 { font-size:30px; line-height:1.2; }
.guide-section-header p { font-size:15px; line-height:1.55; }


@media (max-width: 768px){
.tcl2-section .guide-section-header h2,.guide-section-header h2{font-size:24px;line-height:1.22;}
.guide-section-header p{font-size:14px;line-height:1.5;}
}