/* Creative Hire — Professional Theme with Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --brand: #0d1b2a; /* deep navy */
    --brand-2: #1b263b;
    --accent: #e0b44c; /* gold accent */
    --border: #e5e7eb;
    --success: #16a34a;
    --danger: #dc2626;
    --info: #2563eb;
    --warning: #b45309;
}

* { 
    box-sizing: border-box; 
}

html, body { 
    height: 100%; 
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* sticky footer layout */
body { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}

.site-footer { 
    margin-top: auto; 
}

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

.page { 
    padding: 24px 0; 
}

/* Professional Navbar */
.navbar { 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
    color: #fff; 
    box-shadow: 0 2px 12px rgba(0,0,0,.1); 
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(224, 180, 76, 0.2);
}

.navbar .nav-inner { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 18px 0; 
    position: relative;
}

.navbar .logo a { 
    color: #fff; 
    text-decoration: none; 
    font-weight: 700; 
    font-size: 1.25rem; 
    letter-spacing: -0.01em; 
    transition: all 0.3s ease;
}

.navbar .logo a:hover {
    color: var(--accent);
    transform: translateX(2px);
}

.navbar .nav-links { 
    list-style: none; 
    display: flex; 
    gap: 8px; 
    align-items: center;
    margin: 0;
    padding: 0;
}

.navbar .nav-links li {
    margin: 0;
}

.navbar .nav-links a { 
    color: #e8edf7; 
    text-decoration: none; 
    padding: 9px 14px; 
    border-radius: 8px; 
    font-weight: 500; 
    font-size: 0.9375rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    letter-spacing: 0.01em;
}

.navbar .nav-links a:hover { 
    background: rgba(224, 180, 76, 0.15); 
    color: var(--accent); 
    transform: translateY(-1px);
}

.navbar .nav-links a:active {
    transform: translateY(0);
}

/* Enhanced sticky navbar when scrolling */
.navbar.scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,.2);
    background: rgba(13, 27, 42, 0.98);
    backdrop-filter: blur(12px);
}

/* Mobile Responsiveness for Navbar */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
    
    .navbar .nav-inner {
        padding: 14px 0;
    }
    
    .navbar .logo a {
        font-size: 1.125rem;
    }
    
    .navbar .nav-links {
        gap: 4px;
    }
    
    .navbar .nav-links a {
        padding: 7px 10px;
        font-size: 0.875rem;
    }
}

@media (max-width: 640px) {
    .navbar .nav-links {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    
    .navbar .nav-links a {
        padding: 6px 8px;
        font-size: 0.8125rem;
    }
}

/* Headings */
h1,h2,h3 { color: var(--brand-2); margin: 0 0 14px 0; letter-spacing: .2px; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; color: var(--text); }

/* Card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin: 16px 0; }

/* Forms */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
}
textarea { min-height: 110px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(55,90,158,.12); }

.form-row { display:flex; gap:12px; }
.form-row > * { flex:1; }
.form-actions { margin-top: 10px; }

/* Buttons */
.btn { display:inline-block; padding:10px 16px; border-radius:8px; border:1px solid transparent; cursor:pointer; font-weight:600; text-decoration:none; }
.btn-primary { background: var(--accent); color:#fff; }
.btn-primary:hover { background:#2d4d8a; }
.btn-secondary { background:#f1f5f9; color:#111827; border-color: var(--border); }
.btn-secondary:hover { background:#e9edf3; }
.btn-danger { background: var(--danger); color:#fff; }

/* Tables */
table.table { width:100%; border-collapse: collapse; background: var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.table thead th { background:#f3f4f6; text-align:left; padding:10px 12px; font-weight:600; color:#374151; border-bottom:1px solid var(--border); }
.table tbody td { padding:10px 12px; border-bottom:1px solid var(--border); }
.table tbody tr:hover { background:#fafafa; }

/* Alerts */
.alert { padding: 10px 12px; border-radius: 8px; margin: 8px 0; font-weight: 600; }
.alert-success { background:#e7f8ec; color:#175f2c; border:1px solid #b8e7c5; }
.alert-error { background:#feecec; color:#7a1b1b; border:1px solid #f5b5b5; }

/* Badges */
.badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; color:#fff; font-weight:600; }
.badge-viewing { background:#6b7280; }
.badge-interview { background:#2563eb; }
.badge-rejected { background:#dc2626; }
.badge-accepted { background:#16a34a; }

/* Layout helpers */
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }

/* Footer spacing */
.footer-space { height: 40px; }

/* About page */
.hero { background: linear-gradient(160deg, var(--brand) 0%, var(--accent) 100%); color:#fff; padding: 46px 0; margin-bottom: 12px; }
.hero .hero-title { font-size: 2rem; font-weight:800; letter-spacing:.3px; }
.breadcrumb { margin-top: 6px; opacity:.9; }
.breadcrumb a { color:#e9f0ff; text-decoration: none; }
.breadcrumb span { margin: 0 6px; opacity:.8; }

.about-features { grid-template-columns: repeat(4,minmax(0,1fr)); gap:14px; margin-top:16px; }
.feature { background: #eaf0ff; border:1px solid #dfe7fb; border-radius: 12px; padding:16px; text-align:left; }
.feature-title { font-weight:700; margin-bottom:6px; color:#20345f; }
.feature-desc { color: var(--muted); }

.vision, .mission { background: linear-gradient(160deg, #e9efff, #eef3ff); border:1px solid #dfe7fb; }
.about-list { margin: 10px 0 0 18px; }
.about-list li { margin-bottom: 10px; }

/* Home hero (with background image option) */
.home-hero { position: relative; overflow: hidden; border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
.home-hero::before { content:""; position:absolute; inset:0; background: url('../img/hero-illustration.svg') center/cover no-repeat; opacity:.08; }
.home-hero .container { position:relative; z-index:1; text-align:center; padding: 64px 20px; }
.home-hero .hero-title { font-size: 2.2rem; }
.home-hero .muted { color:#eaf0ff; }

/* Feature grid on Home */
.about-features .feature { background:#f0f5ff; border:1px solid #e0e7ff; }
.about-features .feature-title { color:#1f2a44; }

/* CTA buttons group */
.btn + .btn { margin-left: 8px; }

/* Auth (Login/Register/Forgot) */
.auth-wrap { max-width: 1000px; margin: 26px auto; }
.auth { display:grid; grid-template-columns: 1.1fr 1fr; background: var(--surface); border:1px solid var(--border); border-radius: 18px; overflow:hidden; box-shadow: 0 20px 60px rgba(31,41,55,.14); }
.auth-left { background: linear-gradient(160deg,#4e79d3,#7aa5ff); color:#eaf3ff; padding: 40px 34px; position:relative; display:flex; flex-direction:column; justify-content:center; }
.auth-left .brand { font-weight:700; letter-spacing:.4px; margin-bottom: 10px; }
.auth-left .subtitle { font-size:1.02rem; opacity:.95; }
.auth-left .illustration { margin-top: 24px; }
.auth-left .illustration img { width: 100%; height:auto; display:block; }
.auth-right { background:#fff; padding: 34px 40px; display:flex; align-items:center; }
.auth-card { width:100%; max-width: 420px; margin: 0 auto; }
.auth-card h2 { font-size: 2rem; margin-bottom: 18px; color: var(--brand-2); }
.auth-card label { display:block; font-weight:600; margin: 10px 0 6px; }
.auth-card .actions { margin-top: 14px; display:flex; align-items:center; justify-content:space-between; }
.auth-card .muted { color: var(--muted); font-size:.95rem; }
.auth-note { margin-top: 8px; color: var(--muted); font-size:.9rem; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-left{ display:none; } }

/* Modal (formal) */
.modal-backdrop { position:fixed; inset:0; background: rgba(17,24,39,.55); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.modal { background:#fff; border:1px solid var(--border); border-radius: 12px; width:min(480px,92vw); box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow:hidden; }
.modal .modal-header { background: #f3f4f6; padding:12px 16px; font-weight:700; color:#111827; }
.modal .modal-body { padding: 14px 16px; color:#1f2937; }
.modal .modal-actions { padding:12px 16px; background:#fafafa; text-align:right; }
.modal .btn-close { background:#f1f5f9; border:1px solid var(--border); color:#111827; }

/* Formal, clean theme for Job portal */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Inter, Arial, sans-serif; color: #111827; background: radial-gradient(1200px 800px at 80% -200px, #e9f1ff 0%, transparent 60%), #f7f8fa; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:root { --color-surface:#fff; --color-border:#e5e7eb; --color-text:#111827; --color-text-muted:#6b7280; --color-primary:#1f6feb; --color-primary-600:#1a5dcc; --radius:10px; --shadow-sm:0 1px 2px rgba(0,0,0,0.05); --shadow-md:0 4px 12px rgba(0,0,0,0.08); }

.container { width:100%; max-width:1100px; margin:0 auto; padding:0 20px; }

nav { background:#fff; border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:10; }
nav .container { display:flex; align-items:center; justify-content:space-between; height:64px; }
nav a { font-weight:600; padding:12px 14px; border-radius:8px; }
nav a:hover { color:var(--color-primary); background:#f0f6ff; }

h1,h2,h3 { line-height:1.25; margin:24px 0 12px; }
h1 { font-size:28px; }
h2 { font-size:22px; }
h3 { font-size:18px; }
p { color:var(--color-text-muted); }

.section { padding:28px 0; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px; }
.card:hover { box-shadow:var(--shadow-md); }
.card .card-title { font-weight:700; margin-bottom:6px; }
.card .card-subtitle { color:var(--color-text-muted); font-size:14px; margin-bottom:10px; }

.btn { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:8px; border:1px solid var(--color-border); background:#fff; color:#111827; font-weight:600; cursor:pointer; transition:background .15s ease, box-shadow .15s ease; }
.btn:hover { box-shadow:var(--shadow-sm); }
.btn-primary { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.btn-primary:hover { background:var(--color-primary-600); }

.form { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); padding:18px; }
.form .field { margin-bottom:14px; }
.form label { display:block; font-weight:600; margin-bottom:6px; }
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form textarea, .form select { width:100%; height:40px; padding:8px 12px; border:1px solid var(--color-border); border-radius:8px; background:#fff; color:#111827; }
.form textarea { height:auto; min-height:100px; resize:vertical; }
.form .actions { margin-top:16px; display:flex; gap:10px; }

.table-wrapper { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
thead th { background:#f8fafc; text-align:left; font-size:14px; color:var(--color-text-muted); }
th,td { padding:12px 14px; border-bottom:1px solid var(--color-border); }
tbody tr:hover { background:#f9fbff; }

@media (max-width:640px){ nav .container{height:auto; padding:10px 0; gap:6px; flex-wrap:wrap;} .card-grid{grid-template-columns:1fr;} }