/*
 * Facilitate INT brand styles for the public /careers pages.
 * Overrides Tailwind utility colors used in careers EJS templates so the
 * career pages feel consistent with facilitateint.com.
 */

:root {
    --fc-primary: #4EC4CF;
    --fc-primary-hover: #3aa9b4;
    --fc-primary-soft: rgba(78, 196, 207, 0.15);
    --fc-primary-soft-strong: rgba(78, 196, 207, 0.28);
    --fc-dark: #0a2540;
    --fc-dark-2: #0d2d4d;
    --fc-dark-3: #122a4a;
    --fc-text: #e6f1f5;
    --fc-text-muted: #9bb3c4;
    --fc-border: rgba(255, 255, 255, 0.08);
}

html, body.bg-gray-50 {
    background: radial-gradient(circle at 20% 0%, #103a5b 0%, #0a2540 60%, #061a2d 100%) !important;
    color: var(--fc-text);
    font-family: 'Roboto', sans-serif;
}

body.bg-gray-50 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.bg-gray-50 > footer { margin-top: auto; }

h1, h2, h3, h4, h5 { font-family: 'Dosis', 'Roboto', sans-serif; letter-spacing: 0.2px; }

/* ---------- Navigation ---------- */
nav.bg-gray-800 {
    background: rgba(10, 37, 64, 0.85) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--fc-border);
}
nav.bg-gray-800 a, nav.bg-gray-800 .text-gray-300 { color: var(--fc-text) !important; }
nav.bg-gray-800 a:hover { color: var(--fc-primary) !important; }
nav.bg-gray-800 a.bg-blue-600 {
    background: var(--fc-primary) !important;
    color: #042330 !important;
    font-weight: 600;
}
nav.bg-gray-800 a.bg-blue-600:hover { background: var(--fc-primary-hover) !important; }

/* Brand block injected into navs */
.fc-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fc-text);
    text-decoration: none;
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 1px;
}
.fc-brand:hover { color: var(--fc-primary); }
.fc-brand-mark {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--fc-primary);
    display: inline-flex; align-items: center; justify-content: center;
    color: #042330; font-weight: 700; font-family: 'Dosis', sans-serif;
    box-shadow: 0 0 0 4px rgba(78, 196, 207, 0.18);
}

/* ---------- Hero ---------- */
.hero-gradient {
    background: linear-gradient(135deg, #0a2540 0%, #14506a 55%, #4EC4CF 100%) !important;
    position: relative;
    overflow: hidden;
}
.hero-gradient::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 90% 20%, rgba(78, 196, 207, 0.35), transparent 45%),
        radial-gradient(circle at 10% 80%, rgba(78, 196, 207, 0.18), transparent 40%);
    pointer-events: none;
}
.hero-gradient > * { position: relative; z-index: 1; }
.hero-gradient .text-blue-100 { color: rgba(230, 241, 245, 0.85) !important; }

/* ---------- Cards / surfaces ---------- */
.bg-white {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--fc-text) !important;
    border: 1px solid var(--fc-border);
    backdrop-filter: blur(6px);
}
.bg-gray-50 { background: transparent !important; }
.bg-gray-100 { background: rgba(255, 255, 255, 0.03) !important; }

/* Job card hover sheen */
.job-card { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--fc-border); }
.job-card:hover {
    border-color: var(--fc-primary) !important;
    box-shadow: 0 12px 30px -10px rgba(78, 196, 207, 0.45) !important;
}

/* Section dividers between sections */
.bg-white.border-b { border-color: var(--fc-border) !important; }

/* ---------- Typography overrides ---------- */
.text-gray-900 { color: #ffffff !important; }
.text-gray-700, .text-gray-800 { color: var(--fc-text) !important; }
.text-gray-600, .text-gray-500, .text-gray-400 { color: var(--fc-text-muted) !important; }
.text-gray-300 { color: var(--fc-text) !important; }

/* Headings on dark surfaces */
section h1, section h2, section h3 { color: #ffffff; }
.bg-white h1, .bg-white h2, .bg-white h3 { color: #ffffff !important; }

/* ---------- Buttons & accents ---------- */
.bg-blue-600 { background: var(--fc-primary) !important; color: #042330 !important; }
.bg-blue-600:hover, .hover\:bg-blue-700:hover { background: var(--fc-primary-hover) !important; }
.text-white.bg-blue-600 { color: #042330 !important; }

button.bg-blue-600, a.bg-blue-600,
button[class*="bg-blue-6"], a[class*="bg-blue-6"] {
    box-shadow: 0 6px 18px -6px rgba(78, 196, 207, 0.6);
    font-weight: 600;
}

/* Soft accent pills (badges) */
.bg-blue-100 { background: var(--fc-primary-soft) !important; }
.text-blue-800 { color: var(--fc-primary) !important; }
.bg-green-100 { background: rgba(16, 185, 129, 0.18) !important; }
.text-green-800 { color: #6ee7b7 !important; }
.bg-purple-100 { background: rgba(168, 85, 247, 0.18) !important; }
.text-purple-800 { color: #d8b4fe !important; }
.bg-yellow-50 { background: rgba(234, 179, 8, 0.12) !important; }
.bg-green-50 { background: rgba(16, 185, 129, 0.12) !important; }
.bg-blue-50 { background: var(--fc-primary-soft) !important; }
.text-blue-100 { color: rgba(230, 241, 245, 0.85) !important; }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="search"], input[type="url"], input[type="password"],
select, textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--fc-text) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
/* Native select needs an opaque background so the dropdown list is readable */
select {
    background-color: #0d2d4d !important;
    color: var(--fc-text) !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234EC4CF'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.1em 1.1em !important;
    padding-right: 2.5rem !important;
}
select option {
    background-color: #0d2d4d !important;
    color: var(--fc-text) !important;
}
select option:checked,
select option:hover {
    background-color: var(--fc-primary) !important;
    color: #042330 !important;
}
input::placeholder, textarea::placeholder { color: rgba(230, 241, 245, 0.45) !important; }

/* Radio buttons & checkboxes use brand teal instead of browser default red/blue */
input[type="radio"], input[type="checkbox"] {
    accent-color: var(--fc-primary) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--fc-primary) !important;
    box-shadow: 0 0 0 3px var(--fc-primary-soft) !important;
    outline: none;
}
.focus\:ring-blue-500:focus { --tw-ring-color: var(--fc-primary) !important; }
.focus\:border-blue-500:focus { border-color: var(--fc-primary) !important; }

/* File upload */
.file-upload-area { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: var(--fc-text); }
.file-upload-area:hover { border-color: var(--fc-primary) !important; background: var(--fc-primary-soft) !important; }
.file-upload-area.dragover { border-color: var(--fc-primary) !important; background: var(--fc-primary-soft-strong) !important; }
.file-upload-area.has-file { border-color: #34d399 !important; background: rgba(16, 185, 129, 0.18) !important; }

/* Step indicators */
.step-indicator { background-color: rgba(255, 255, 255, 0.18) !important; }
.step-indicator.active { background-color: var(--fc-primary) !important; color: #042330 !important; }
.step-indicator.completed { background-color: #10b981 !important; }

/* ---------- Footer ---------- */
footer.bg-gray-800 {
    background: rgba(10, 37, 64, 0.9) !important;
    border-top: 1px solid var(--fc-border);
    color: var(--fc-text-muted) !important;
}
footer.bg-gray-800 a { color: var(--fc-primary); }

/* Job content typography */
.job-content h1, .job-content h2, .job-content h3 { color: #ffffff !important; }
.job-content a { color: var(--fc-primary) !important; }
.job-content a:hover { color: var(--fc-primary-hover) !important; }
.job-content { color: var(--fc-text) !important; }

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #061a2d; }
::-webkit-scrollbar-thumb { background: rgba(78, 196, 207, 0.35); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--fc-primary); }