/* ============================================================
   OutsourceDepot - main.css  (Tailwind override & custom layer)
   ============================================================ */

/* ── Custom font stack ─────────────────────────────────────── */
body { font-family: 'Outfit', sans-serif; }
h1,h2,h3,h4,h5 { font-family: 'Sora', sans-serif; }

/* ── Navbar transparency / scroll ──────────────────────────── */
#navbar {
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
#navbar.scrolled {
    background: rgba(248,250,252,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);  
}
/* When hero is dark, nav text should be white initially */
.hero-section ~ * { }
#navbar:not(.scrolled) .nav-link,
#navbar:not(.scrolled) #menuToggle i,
#navbar:not(.scrolled) .font-display, #navbar:not(.scrolled) .linked-text { color: #eee !important; }
#navbar:not(.scrolled) .font-display span { color: #93c5fd !important; }
#navbar:not(.scrolled) a.border { border-color: rgba(255,255,255,0.4) !important; color: rgba(255,255,255,0.85) !important; }
#navbar:not(.scrolled) a.bg-primary-600 { background: rgba(37,99,235,0.9) !important; }
#navbar:not(.scrolled) #menuToggle { background: rgba(255,255,255,0.12) !important; }

/* ── Mobile Nav Drawer ─────────────────────────────────────── */
#mobileNav.open { pointer-events: all; }
#mobileNav.open #navOverlay {
    opacity: 1;
    pointer-events: all;
}
#mobileNav.open #navDrawer {
    transform: translateX(0);
}

/* ── Scroll-reveal base state ──────────────────────────────── */
.service-reveal,
.role-reveal,
.why-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.service-reveal.visible,
.role-reveal.visible,
.why-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Progress bar fill animation ──────────────────────────── */
@keyframes fillBar {
    from { width: 0; }
}
.progress-fill { animation: fillBar 0.8s cubic-bezier(0.4,0,0.2,1) forwards; }

/* ── Custom float animation ────────────────────────────────── */
@keyframes float {
    0%,100% { transform: translateY(0px); }
    50%      { transform: translateY(-12px); }
}

/* ── Smooth scroll ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Form focus rings ──────────────────────────────────────── */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

/* ── Utility ───────────────────────────────────────────────── */
.font-display { font-family: 'Sora', sans-serif; }

/* ── Admin sidebar ─────────────────────────────────────────── */
.admin-sidebar {
    width: 260px;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    background: #0F172A;
    z-index: 50;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.admin-main {
    margin-left: 260px;
    min-height: 100vh;
    background: #F8FAFC;
}
@media (max-width: 1024px) {
    .admin-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-main { margin-left: 0; }
}

/* ── Badge colours ─────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}
.badge-pending    { background:rgba(245,158,11,.12); color:#D97706; }
.badge-submitted  { background:rgba(59,130,246,.1);  color:#2563EB; }
.badge-accepted   { background:rgba(16,185,129,.1);  color:#059669; }
.badge-rejected   { background:rgba(239,68,68,.1);   color:#DC2626; }
.badge-on_hold    { background:rgba(100,116,139,.1); color:#64748B; }
.badge-open       { background:rgba(16,185,129,.1);  color:#059669; }
.badge-closed     { background:rgba(239,68,68,.1);   color:#DC2626; }
.badge-draft      { background:rgba(100,116,139,.1); color:#64748B; }

/* ── Print / misc ──────────────────────────────────────────── */
* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

.od-hero-grid {
    background-image:
        linear-gradient(rgba(180,155,90,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180,155,90,0.07) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
}

.od-hero-glow {
    background: radial-gradient(ellipse, rgba(90, 155, 180, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -60%);
}

.od-hero-ornament {
    background: linear-gradient(to bottom, transparent, rgba(180,155,90,0.5), transparent);
}

.od-hero-eyebrow span {
    width: 28px;
    height: 1px;
    background: rgba(180,155,90,0.35);
    display: inline-block;
}

.od-hero-headline em { color: #c9a84c; }

.od-hero-divider {
    background: linear-gradient(to right, transparent, rgba(90, 162, 180, 0.55), transparent);
}