/*
 * JobRena design system.
 *
 * Loaded after the vendor theme so brand tokens win without editing the
 * upstream stylesheets, keeping script updates mergeable. Admin custom CSS is
 * still loaded afterwards and stays the final override.
 */

:root {
    /* Brand */
    --jr-primary: #1a56db;
    --jr-primary-strong: #1443ae;
    --jr-primary-soft: #e8effd;
    --jr-accent: #12b76a;
    --jr-accent-soft: #e7f8f0;
    --jr-warning: #f79009;

    /* Neutrals */
    --jr-ink: #101828;
    --jr-body: #475467;
    --jr-muted: #667085;
    --jr-line: #e4e7ec;
    --jr-surface: #ffffff;
    --jr-surface-alt: #f8fafc;

    /* Shape */
    --jr-radius-sm: 8px;
    --jr-radius: 12px;
    --jr-radius-lg: 18px;
    --jr-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --jr-shadow: 0 4px 16px rgba(16, 24, 40, .08);
    --jr-shadow-lg: 0 18px 40px rgba(16, 24, 40, .12);

    /* Type */
    --jr-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --jr-font-heading: 'Plus Jakarta Sans', var(--jr-font-body);

    /* Vendor token overrides */
    --body-bg: var(--jr-surface-alt);
    --main-menu-bg: var(--jr-surface);
    --main-menu-font-color: var(--jr-body);
    --main-menu-font-highlight-color: var(--jr-primary);
    --main-menu-sticky-bg: var(--jr-surface);
    --main-menu-sticky-font-color: var(--jr-ink);
    --main-menu-btn-bg: var(--jr-primary);
    --main-menu-btn-font-color: #fff;
    --main-menu-btn-highlight-bg: var(--jr-primary-strong);
    --main-menu-btn-font-highlight-color: #fff;
    --main-menu-dropdown-bg: var(--jr-surface);
    --main-menu-dropdown-highlight-bg: var(--jr-primary-soft);
    --main-menu-dropdown-font-color: var(--jr-body);
    --main-menu-dropdown-font-highlight-color: var(--jr-primary);
    --mobile-menu-bg: var(--jr-surface);
    --mobile-menu-sidebar-bg: var(--jr-ink);
    --mobile-menu-font-color: var(--jr-body);
    --main-banner-bg: var(--jr-surface);
    --breadcrumb-background: var(--jr-primary-soft);
    --breadcrumb-font-color: var(--jr-ink);
    --icons-color: var(--jr-primary);
    --site-btn-bg: var(--jr-primary);
    --site-btn-font-color: #fff;
    --site-headings-color: var(--jr-ink);
    --site-page-headings-color: var(--jr-ink);
    --site-font-color: var(--jr-body);
    --site-box-bg: var(--jr-surface);
    --site-box-bg-2: var(--jr-surface);
    --site-box-border-color: var(--jr-line);
    --site-breadcrumbs-bg: var(--jr-surface-alt);
}

body {
    font-family: var(--jr-font-body);
    color: var(--jr-body);
    background: var(--jr-surface-alt);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section-title, .section-heading {
    font-family: var(--jr-font-heading);
    color: var(--jr-ink);
    letter-spacing: -.015em;
    font-weight: 700;
}

h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); line-height: 1.2; }

a { color: var(--jr-primary); text-decoration: none; }
a:hover { color: var(--jr-primary-strong); }

.btn,
button.btn,
input[type="submit"].btn {
    border-radius: var(--jr-radius-sm);
    font-family: var(--jr-font-heading);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--jr-primary-soft);
    outline-offset: 1px;
}

.btn-primary,
.site-btn {
    background: var(--jr-primary);
    border-color: var(--jr-primary);
    color: #fff;
}

.btn-primary:hover,
.site-btn:hover {
    background: var(--jr-primary-strong);
    border-color: var(--jr-primary-strong);
    box-shadow: var(--jr-shadow-sm);
}

.form-control,
.form-select,
.select2-container--default .select2-selection--single {
    border-radius: var(--jr-radius-sm);
    border-color: var(--jr-line);
    color: var(--jr-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--jr-primary);
    box-shadow: 0 0 0 4px var(--jr-primary-soft);
}

/* Listing and content cards across jobs, companies, candidates and news */
.section-jobs-alpha-item,
.section-companies-alpha-item,
.section-candidates-alpha-item,
.section-news-alpha-item,
.section-job-detail-alpha-filters-item,
.section-box,
.card {
    background: var(--jr-surface);
    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius);
    box-shadow: var(--jr-shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.section-jobs-alpha-item:hover,
.section-companies-alpha-item:hover,
.section-candidates-alpha-item:hover,
.section-news-alpha-item:hover {
    box-shadow: var(--jr-shadow);
    border-color: #cfd8e6;
    transform: translateY(-2px);
}

/* Country marketplace switcher */
.jr-country-switcher { display: inline-flex; align-items: center; }

.jr-country-switcher .jr-country-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .75rem;
    border: 1px solid var(--jr-line);
    border-radius: 999px;
    background: var(--jr-surface);
    color: var(--jr-ink);
    font-family: var(--jr-font-heading);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
}

.jr-country-switcher .jr-country-toggle:hover {
    border-color: var(--jr-primary);
    color: var(--jr-primary);
}

.jr-country-switcher .dropdown-menu {
    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius);
    box-shadow: var(--jr-shadow);
    padding: .35rem;
    min-width: 15rem;
}

.jr-country-switcher .dropdown-item {
    border-radius: var(--jr-radius-sm);
    color: var(--jr-body);
    font-size: .9rem;
    padding: .5rem .65rem;
}

.jr-country-switcher .dropdown-item:hover,
.jr-country-switcher .dropdown-item.active {
    background: var(--jr-primary-soft);
    color: var(--jr-primary);
}

.jr-country-switcher .jr-country-meta {
    display: block;
    color: var(--jr-muted);
    font-size: .75rem;
}

.jr-country-tag {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--jr-primary-soft);
    color: var(--jr-primary-strong);
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

/* Preview marketplaces announce themselves so reviewers never mistake them
   for a launched market */
.jr-market-banner {
    padding: .5rem 1rem;
    background: var(--jr-primary-soft);
    color: var(--jr-primary-strong);
    font-size: .85rem;
    text-align: center;
}

/* Trust and status pills reused by verification, moderation and job badges */
.jr-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
}

.jr-pill-verified { background: var(--jr-accent-soft); color: #05603a; }
.jr-pill-new { background: var(--jr-primary-soft); color: var(--jr-primary-strong); }
.jr-pill-closing { background: #fef3e2; color: #b54708; }

.jr-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    padding: .6rem 1rem;
    background: var(--jr-ink);
    color: #fff;
    border-radius: 0 0 var(--jr-radius-sm) 0;
}

.jr-skip-link:focus {
    left: 0;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.jr-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--jr-accent-soft);
    color: #05603a;
    font-size: .75rem;
    font-weight: 600;
    vertical-align: middle;
}

.jr-hub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .35rem;
    font-size: .85rem;
    color: var(--jr-muted);
}