/* ======================================================================
   JOB.COM.BD — Global Layout + Header + Footer
   File: public/css/seeker/layout.css
   Version: 2.0  (header.css merged in)
   ====================================================================== */

/* ══════════════ 1. VARIABLES ══════════════ */
:root{
    --first:          #0F4C81;
    --second:         #00A6A6;
    --primary:        #1B6079;
    --primary-dark:   #0f3d4d;
    --primary-light:  #e8f4f8;
    --accent:         #8CC426;
    --accent-dark:    #7ab01f;
    --text-dark:      #0f172a;
    --text-body:      #334155;
    --text-muted:     #64748b;
    --text-light:     #94a3b8;
    --bg-page:        #f8fafc;
    --bg-card:        #ffffff;
    --border:         #e2e8f0;
    --border-light:   #f1f5f9;
    --radius-sm:      6px;
    --radius-md:      10px;
    --radius-lg:      14px;
    --shadow-sm:      0 1px 3px rgba(0,0,0,.06);
    --shadow-md:      0 4px 12px rgba(0,0,0,.07);
    --shadow-lg:      0 10px 30px rgba(27,96,121,.12);
    --shadow-hover:   0 12px 32px rgba(27,96,121,.14);
    --transition:     .25s cubic-bezier(.4,0,.2,1);
    --font-heading:   'Plus Jakarta Sans', sans-serif;
    --font-body:      'Inter', sans-serif;
}

/* ══════════════ 2. GLOBAL RESET & BASE ══════════════ */
*{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:#f5f7fa;
    color:#333;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:#1B6079;transition:color var(--transition)}
a:hover{color:#0044cc}
img{max-width:100%;height:auto}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 15px;
}

/* ══════════════════════════════════════════════════════════════════
   3. HEADER / NAVIGATION
   ══════════════════════════════════════════════════════════════════ */

/* Reset leaks — kill any generic styles on header links */
.site-header a{
    text-decoration:none;
    border:none;
    outline:none;
}
.site-header *{box-sizing:border-box}

/* ── Top Ad Strip ───────────────────────────────────── */
.top-ad{
    background:#f8fafc;
    border-bottom:1px solid var(--border);
}
.top-ad-inner{
    max-width:1200px;
    margin:0 auto;
    padding:8px 20px;
    text-align:right;
    color:#94a3b8;
    font-family:var(--font-body);
    font-size:12px;
}

/* ── Header Shell ───────────────────────────────────── */
.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:#fff;
    border-bottom:1px solid var(--border);
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:box-shadow var(--transition);
}
.site-header.scrolled{
    box-shadow:0 4px 18px rgba(15,23,42,.09);
}

.header-inner{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    height:64px;
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex-wrap:nowrap;
}

/* ── Brand / Logo ───────────────────────────────────── */
.brand{
    display:flex;
    align-items:center;
    flex-shrink:0;
    transition:opacity var(--transition);
    max-width:180px;
}
.brand:hover{opacity:.88}
.brand img{
    max-height:38px;
    width:auto;
    display:block;
}
.brand .brand-text{
    font-family:var(--font-heading);
    font-size:17px;
    font-weight:800;
    letter-spacing:-.4px;
    color:var(--primary);
    white-space:nowrap;
}
.brand .brand-text span{color:var(--accent)}

/* ── Main Nav ───────────────────────────────────────── */
.main-nav{
    display:flex;
    align-items:center;
    gap:2px;
    margin-left:auto;
    flex:1 1 auto;
    min-width:0;
    justify-content:flex-end;
    overflow:hidden;
}
.nav-inline,
.nav-more{
    display:flex;
    align-items:center;
    gap:2px;
    flex-wrap:nowrap;
    min-width:0;
}

/* ── Nav Item ───────────────────────────────────────── */
.nav-item{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    font-family:var(--font-body);
    font-size:13.5px;
    font-weight:500;
    line-height:1.2;
    color:var(--text-body);
    border-radius:var(--radius-sm);
    white-space:nowrap;
    flex-shrink:0;
    transition:color var(--transition), background var(--transition);
    -webkit-tap-highlight-color:transparent;
}
.nav-item i{font-size:12px}
.nav-item::after{
    content:'';
    position:absolute;
    left:12px;
    right:12px;
    bottom:3px;
    height:2px;
    border-radius:2px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav-item:hover{
    color:var(--primary);
    background:var(--primary-light);
}
.nav-item:hover::after,
.nav-item.active::after{
    transform:scaleX(1);
}
.nav-item.active{
    color:var(--primary);
    font-weight:600;
    background:var(--primary-light);
}

/* ── Hide drawer-only elements on desktop ───────────── */
.nav-more .nav-item.auth-mobile{display:none !important}
.nav-more .drawer-user{display:none !important}

/* ── Desktop Actions ────────────────────────────────── */
.header-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
    flex-wrap:nowrap;
    white-space:nowrap;
}

/* User chip — truncated, single line */
.user-welcome{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:600;
    color:var(--primary);
    background:var(--primary-light);
    border-radius:var(--radius-sm);
    white-space:nowrap;
    max-width:170px;
    overflow:hidden;
}
.user-welcome i{font-size:13px;flex-shrink:0}
.user-welcome .u-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:90px;
}
.user-welcome small{
    font-weight:500;
    color:var(--text-muted);
    font-size:11px;
    flex-shrink:0;
}

/* ── Buttons ────────────────────────────────────────── */
.btn-ghost,
.btn-solid{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:500;
    line-height:1;
    border-radius:var(--radius-sm);
    white-space:nowrap;
    text-decoration:none;
    cursor:pointer;
    flex-shrink:0;
    transition:all var(--transition);
}
.btn-ghost{
    color:var(--primary);
    background:transparent;
    border:1px solid var(--border);
}
.btn-ghost:hover{
    border-color:var(--primary);
    background:var(--primary-light);
    color:var(--primary);
}
.btn-solid{
    color:#fff;
    background:var(--primary);
    border:1px solid var(--primary);
    font-weight:600;
}
.btn-solid:hover{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    box-shadow:0 4px 12px rgba(27,96,121,.28);
    transform:translateY(-1px);
    color:#fff;
}

/* ── Hamburger ──────────────────────────────────────── */
.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:42px;
    height:42px;
    padding:0;
    background:transparent;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    cursor:pointer;
    flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
    transition:all var(--transition);
}
.nav-toggle:hover{
    border-color:var(--primary);
    background:var(--primary-light);
}
.nav-toggle span{
    display:block;
    width:20px;
    height:2px;
    border-radius:2px;
    background:var(--primary);
    transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

/* ── Header Responsive — 1180px ─────────────────────── */
@media (max-width:1180px){
    .header-inner{gap:8px}
    .nav-item{padding:8px 10px;font-size:13px}
    .nav-item::after{left:10px;right:10px}
    .btn-ghost,
    .btn-solid{padding:7px 12px;font-size:12.5px}
    .user-welcome{max-width:130px}
    .user-welcome .u-name{max-width:60px}
}

/* ── Header Responsive — 1024px ─────────────────────── */
@media (max-width:1024px){
    .user-welcome{display:none}
}

/* ── Header Responsive — 900px (hamburger drawer) ───── */
@media (max-width:900px){

    .header-inner{
        height:58px;
        padding:0 14px;
        gap:8px;
    }

    .brand{max-width:140px}
    .brand img{max-height:32px}

    .header-actions{display:none}
    .nav-toggle{display:flex}

    .main-nav{
        margin-left:auto;
        gap:2px;
        flex:1 1 auto;
        justify-content:flex-end;
        overflow:visible;
    }
    .nav-inline{gap:2px}
    .nav-inline .nav-item{
        padding:8px 10px;
        font-size:13px;
    }
    .nav-inline .nav-item i{font-size:11px}
    .nav-inline .nav-item::after{
        left:10px;
        right:10px;
    }

    /* Drawer */
    .nav-more{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        display:block;
        background:#fff;
        border-bottom:1px solid var(--border);
        box-shadow:0 18px 36px rgba(15,23,42,.12);
        max-height:0;
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        transition:max-height .35s cubic-bezier(.4,0,.2,1),
                   opacity .25s ease,
                   visibility .25s ease;
        scrollbar-width:thin;
        scrollbar-color:var(--primary) transparent;
    }
    .nav-more.open{
        max-height:80vh;
        overflow-y:auto;
        opacity:1;
        visibility:visible;
    }
    .nav-more::-webkit-scrollbar{width:6px}
    .nav-more::-webkit-scrollbar-track{background:transparent}
    .nav-more::-webkit-scrollbar-thumb{
        background:var(--primary);
        border-radius:3px;
    }

    .nav-more .nav-item{
        display:flex;
        width:100%;
        padding:14px 20px;
        font-size:14px;
        border-radius:0;
        border-bottom:1px solid var(--border-light);
    }
    .nav-more .nav-item i{font-size:13px}
    .nav-more .nav-item::after{display:none}
    .nav-more .nav-item:hover,
    .nav-more .nav-item.active{
        background:var(--primary-light);
        padding-left:26px;
    }
    .nav-more .nav-item:last-child{border-bottom:none}

    /* Reveal drawer-only elements inside the drawer */
    .nav-more .nav-item.auth-mobile{display:flex !important}

    .nav-more .drawer-user{
        display:flex !important;
        align-items:center;
        gap:8px;
        padding:14px 20px;
        font-size:13.5px;
        font-weight:600;
        color:var(--primary);
        background:var(--primary-light);
        border-bottom:1px solid var(--border);
    }
    .nav-more .drawer-user i{font-size:14px;flex-shrink:0}
    .nav-more .drawer-user .u-name{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        max-width:140px;
    }
    .nav-more .drawer-user small{
        color:var(--text-muted);
        font-weight:500;
        font-size:11px;
        flex-shrink:0;
    }
}

/* ── Header Responsive — 480px ──────────────────────── */
@media (max-width:480px){

    .header-inner{
        height:54px;
        padding:0 12px;
        gap:6px;
    }
    .brand{max-width:120px}
    .brand img{max-height:28px}

    .nav-inline .nav-item{
        padding:7px 9px;
        font-size:12.5px;
    }
    .nav-inline .nav-item i{display:none}

    .nav-toggle{width:38px;height:38px}
    .nav-toggle span{width:18px}

    .nav-more .nav-item{
        padding:13px 16px;
        font-size:13.5px;
    }
    .nav-more .nav-item:hover,
    .nav-more .nav-item.active{
        padding-left:22px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .nav-item::after,
    .nav-toggle span,
    .nav-more{transition:none !important}
}

/* ══════════════════════════════════════════════════════════════════
   4. ALERTS
   ══════════════════════════════════════════════════════════════════ */
.alert-success,
.alert-danger{
    padding:12px 18px;
    border-radius:8px;
    margin:10px 0;
    font-size:14px;
}
.alert-success{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.alert-danger{background:#ffebee;color:#c62828;border:1px solid #ef9a9a}

/* ══════════════════════════════════════════════════════════════════
   5. FOOTER
   ══════════════════════════════════════════════════════════════════ */
.footer{
    background:linear-gradient(145deg, #0d1b4a, #1a237e);
    color:#ffffff;
    margin-top:30px;
    padding:45px 20px 20px;
    border-radius:12px 12px 0 0;
    box-shadow:0 -4px 20px rgba(0,0,0,0.1);
    position:relative;
    overflow:hidden;
}
.footer::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg, #8CC426, #4CAF50, #8CC426);
}
.footer-inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:40px;
    position:relative;
    z-index:1;
}
.footer-section h4{
    font-size:15px;
    margin-bottom:14px;
    color:#90caf9;
    border-bottom:2px solid rgba(255,255,255,0.08);
    padding-bottom:10px;
    font-weight:600;
    letter-spacing:0.5px;
}
.footer-section h4 i{margin-right:8px;color:#8CC426}
.footer-section ul{list-style:none;padding:0;margin:0}
.footer-section ul li{padding:6px 0;transition:0.3s}
.footer-section ul li:hover{padding-left:6px}
.footer-section ul li a{
    color:#b0bec5;
    font-size:13px;
    transition:all 0.3s ease;
    display:inline-block;
}
.footer-section ul li a:hover{
    color:#ffffff;
    text-decoration:underline;
    transform:translateX(4px);
}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.08);
    margin-top:22px;
    padding-top:20px;
    text-align:center;
    font-size:12px;
    color:#90caf9;
    position:relative;
    z-index:1;
}
.footer-bottom strong{color:#ffffff;font-weight:700}
.footer-bottom .footer-divider{color:rgba(255,255,255,0.2);margin:0 10px}
.footer-bottom a{color:#90caf9;transition:color 0.3s ease}
.footer-bottom a:hover{color:#ffffff;text-decoration:underline}

/* ══════════════════════════════════════════════════════════════════
   6. BACK TO TOP
   ══════════════════════════════════════════════════════════════════ */
#backToTop{
    display:none;
    position:fixed;
    bottom:30px;
    right:30px;
    z-index:999;
    background:linear-gradient(135deg, #004993, #003366);
    color:#ffffff;
    border:none;
    border-radius:50%;
    width:52px;
    height:52px;
    cursor:pointer;
    font-size:18px;
    box-shadow:0 4px 20px rgba(0,73,147,0.4);
    transition:all 0.3s ease;
    align-items:center;
    justify-content:center;
}
#backToTop:hover{
    background:linear-gradient(135deg, #003366, #002244);
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 6px 30px rgba(0,73,147,0.5);
}
#backToTop i{font-size:22px}
#backToTop.show{display:flex;animation:fadeInUp 0.5s ease}
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}