@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../vendor/inter-v20-latin/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../vendor/inter-v20-latin/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../vendor/inter-v20-latin/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../vendor/inter-v20-latin/inter-v20-latin-700.woff2') format('woff2');
}

/* ==========================================================================
   Bootstrap Variable Overrides
   ========================================================================== */

:root,
[data-bs-theme] {
    --bs-primary: #1271ed;
    --bs-primary-rgb: 18, 113, 237;
    --bs-link-color: #1271ed;
    --bs-link-color-rgb: 18, 113, 237;
    --bs-link-hover-color: #0d5bbd;
    --bs-body-bg: #fff;
    --bs-body-color: #171717;
    --bs-body-font-size: 17px;
    --bs-body-line-height: 1.6;
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-border-color: #e5e7eb;

    --r100k-purple: #8960ed;
    --r100k-purple-hover: #7a4de0;
    --r100k-featured-bg: #f0ebfd;
    --r100k-featured-border: #d4c4f7;
    --r100k-new-badge: #f97316;
}

/* ==========================================================================
   Button Overrides
   ========================================================================== */

.btn-primary {
    --bs-btn-bg: #1271ed;
    --bs-btn-border-color: #1271ed;
    --bs-btn-hover-bg: #0d5bbd;
    --bs-btn-hover-border-color: #0d5bbd;
}

.btn-outline-primary {
    --bs-btn-color: #1271ed;
    --bs-btn-border-color: rgba(18, 113, 237, 0.1);
    --bs-btn-bg: rgba(18, 113, 237, 0.1);
    --bs-btn-hover-bg: rgba(18, 113, 237, 0.15);
    --bs-btn-hover-border-color: rgba(18, 113, 237, 0.15);
    --bs-btn-hover-color: #1271ed;
}

.btn-purple {
    --bs-btn-bg: #8960ed;
    --bs-btn-border-color: #8960ed;
    --bs-btn-hover-bg: #7a4de0;
    --bs-btn-hover-border-color: #7a4de0;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #7a4de0;
    --bs-btn-active-border-color: #7a4de0;
    --bs-btn-active-color: #fff;
}

.bg-muted {
    background-color: #f5f5f5;
}

.form-control::placeholder,
.form-select:invalid,
.form-select option[value=""] {
    color: #c5c5c5 !important;
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select:invalid,
[data-bs-theme="dark"] .form-select option[value=""] {
    color: #4a4f57 !important;
}

.bg-purple {
    background-color: var(--r100k-purple) !important;
}

.bg-orange {
    background-color: var(--r100k-new-badge) !important;
}

/* Footer link styling */
footer a {
    text-decoration: none;
}

/* ==========================================================================
   Mega Menu (Nav Dropdown)
   ========================================================================== */

.mega-menu .dropdown-item {
    color: var(--bs-link-color);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-dropdown-link-hover-bg);
    --bs-dropdown-link-active-color: var(--bs-dropdown-link-hover-color);
}

.mega-menu {
    padding: 24px;
    border-radius: 12px;
}

@media (min-width: 992px) {
    .nav-item.dropdown > .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
        pointer-events: none;
    }

    .nav-item.dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .mega-menu {
        left: 0;
        right: auto;
        min-width: 0;
        max-width: calc(100vw - 2rem);
    }

    .mega-menu .row {
        flex-wrap: nowrap;
    }

    .mega-menu .row > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        min-width: 140px;
    }
}

@media (max-width: 991.98px) {
    .mega-menu {
        min-width: 100%;
        padding: 12px 0;
        border: none;
        box-shadow: none;
    }
}

/* ==========================================================================
   Job Cards
   ========================================================================== */

.job-card,
.card {
    background-color: #fafafa;
}

.job-card {
    transition: box-shadow 0.15s, border-color 0.15s;
}

.job-card:hover {
    border-color: var(--r100k-purple) !important;
    box-shadow: 0 2px 8px rgba(137, 96, 237, 0.08);
}

.job-card.featured {
    background-color: var(--r100k-featured-bg) !important;
    border-color: var(--r100k-featured-border) !important;
}


/* ── Mobile header ── */
.job-card-mobile-header {
    padding: 12px 16px;
    background-color: rgba(0, 0, 0, 0.025);
    border-bottom: 1px solid var(--bs-border-color);
}

.job-card.featured .job-card-mobile-header {
    background-color: rgba(108, 58, 237, 0.05);
}

.job-card-mobile-badge {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Desktop header + body ── */
.job-card-desktop-header {
    padding: 14px 20px;
    background-color: rgba(0, 0, 0, 0.025);
    border-bottom: 1px solid var(--bs-border-color);
}

.job-card.featured .job-card-desktop-header {
    background-color: rgba(108, 58, 237, 0.05);
}

.job-card-desktop-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.job-card-desktop-body .job-card-salary {
    margin-top: 0;
    margin-bottom: 0.7em;
}

/* ── Logos ── */
.job-card-mobile-logo {
    width: 44px;
    height: 44px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background: #fff;
}

.job-card-desktop-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background: #fff;
}

.job-card-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Mobile company + title ── */
.job-card-mobile-company {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--bs-gray-dark);
}

.job-card-mobile-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-bottom: 0;
}

/* ── Desktop title + company ── */
.job-card-desktop-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.job-card-desktop-company {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--bs-gray-dark);
}

/* ── Shared: salary pill ── */
.job-card-salary {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.3);
    color: #15803d;
    border-radius: 0.5em;
    padding: 0.9em 0.7em;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1;
    margin-top: 0.7em;
    margin-bottom: 0.7em;
}

/* ── Shared: meta + age pills (identical tier) ── */
.job-card-meta > span,
.job-card-age {
    background: rgba(0, 0, 0, 0.045);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 2em;
    padding: 0.8em;
    font-size: 0.8em;
    line-height: 1;
    color: var(--bs-secondary-color);
}

.job-card-age {
    white-space: nowrap;
}

/* ── Dark mode ── */
[data-bs-theme="dark"] .job-card-mobile-header,
[data-bs-theme="dark"] .job-card-desktop-header {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .job-card.featured .job-card-mobile-header,
[data-bs-theme="dark"] .job-card.featured .job-card-desktop-header {
    background-color: rgba(163, 133, 245, 0.07);
}

[data-bs-theme="dark"] .job-card-mobile-logo,
[data-bs-theme="dark"] .job-card-desktop-logo {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    background: #1a1d23;
}

[data-bs-theme="dark"] .job-card-mobile-company,
[data-bs-theme="dark"] .job-card-desktop-company {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .job-card-salary {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

[data-bs-theme="dark"] .job-card-meta > span,
[data-bs-theme="dark"] .job-card-age {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.075);
}

/* ==========================================================================
   Company Cards
   ========================================================================== */

.company-card {
    transition: box-shadow 0.15s, border-color 0.15s;
}

.company-card:hover {
    border-color: var(--r100k-purple) !important;
    box-shadow: 0 2px 8px rgba(137, 96, 237, 0.08);
}

.company-card-header {
    padding: 14px 20px;
    background-color: rgba(0, 0, 0, 0.025);
    border-bottom: 1px solid var(--bs-border-color);
}

.company-card-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background: #fff;
}

.company-card-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.company-card-name {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 700;
    color: var(--bs-body-color);
}

.company-card-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.company-card-jobs {
    background: rgba(0, 0, 0, 0.045);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 2em;
    padding: 0.8em;
    font-size: 0.8em;
    line-height: 1;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

/* ── Dark mode ── */
[data-bs-theme="dark"] .company-card:hover {
    box-shadow: 0 2px 8px rgba(163, 133, 245, 0.15);
}

[data-bs-theme="dark"] .company-card-header {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .company-card-logo {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    background: #1a1d23;
}

[data-bs-theme="dark"] .company-card-name {
    color: var(--bs-gray-300);
}

[data-bs-theme="dark"] .company-card-jobs {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.075);
}

/* ==========================================================================
   Promo Card
   ========================================================================== */

.promo-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 20px;
}

.promo-card-highlight {
    background: linear-gradient(135deg, #6C3AED 0%, #8960ed 50%, #1271ed 100%);
    border: none;
    color: #fff;
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(108, 58, 237, 0.3);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}

.promo-card-highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.03) 48%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.03) 52%,
        transparent 60%
    );
    animation: shimmer 10s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-200%); }
    100% { transform: translateX(200%); }
}

.promo-card-highlight:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 40px rgba(108, 58, 237, 0.5);
    color: #fff;
}

.promo-card-highlight .promo-content h3 {
    color: #fff;
    font-size: 18px;
}

.promo-card-highlight .btn {
    background: #fff;
    color: var(--r100k-purple);
    border: none;
}

.promo-card-highlight .btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--r100k-purple-hover);
}

.promo-icon {
    flex-shrink: 0;
}

.promo-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.promo-content p {
    font-size: 14px;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .promo-card {
        flex-direction: column;
        text-align: center;
    }
    .promo-card .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Company Logos (Hero)
   ========================================================================== */

.logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.logo-row img {
    height: 18px;
    width: auto;
    transition: transform 0.2s;
}

.logo-row img:hover {
    transform: scale(1.12);
}

/* Scrolling logo bar (infinite horizontal scroll) */
.logo-scroll-wrapper {
    overflow: hidden;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-scroll-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: logo-scroll 30s linear infinite;
}

.logo-scroll-track img {
    height: 18px;
    width: auto;
    flex-shrink: 0;
    padding-left: 20px;
    padding-right: 20px;
}

@keyframes logo-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================================================
   Text Color Utilities
   ========================================================================== */

.text-purple {
    color: var(--r100k-purple);
}

/* ==========================================================================
   JobCopilot Widget
   ========================================================================== */

#get-email-widget-button-container {
    margin-bottom: 8px;
}

/* ==========================================================================
   Sticky Filters (Homepage)
   ========================================================================== */

.sticky-filters {
    position: sticky;
    top: 56px;
    z-index: 1010;
    background: var(--bs-body-bg);
    padding-top: 12px;
}

.sticky-filters.is-stuck {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
    clip-path: inset(0 0 -10px 0);
    border-radius: 0 0 12px 12px;
}

@media (max-width: 767.98px) {
    .sticky-filters .form-control {
        font-size: 14px;
        padding: 6px 10px;
    }

    .category-pills-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .category-pills-row::-webkit-scrollbar {
        display: none;
    }
}

/* ==========================================================================
   Sidebar Sticky
   ========================================================================== */

.sidebar-sticky {
    position: sticky;
    top: 84px;
}

/* ==========================================================================
   Job Description Prose
   ========================================================================== */

.rich-text {
    font-size: 15px;
    line-height: 1.7;
}

.rich-text h2,
.rich-text h3,
.rich-text h4 {
    margin-top: 24px;
    margin-bottom: 8px;
    font-weight: 600;
}

.rich-text p {
    margin-bottom: 12px;
}

.rich-text ul,
.rich-text ol {
    margin-bottom: 12px;
    padding-left: 24px;
}

.rich-text li {
    margin-bottom: 4px;
}

.rich-text img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

/* ==========================================================================
   JobCopilot Landing Page
   ========================================================================== */

.jobcopilot-page {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4em;
    background: linear-gradient(
        180deg,
        rgba(108, 58, 237, 0.06) 0%,
        rgba(18, 113, 237, 0.04) 40%,
        rgba(255, 255, 255, 1) 80%
    );
}

.jobcopilot-page h1 {
    font-size: 58px;
    line-height: 90px;
    font-weight: 600;
    margin-bottom: 32px;
}

.jobcopilot-page h1 em,
.jobcopilot-page h2 em {
    margin-right: 0.15em;
}

.jobcopilot-page .header-wrapper {
    max-width: 929px;
}

.jobcopilot-page h2 {
    font-size: 42px;
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 24px;
}

.jobcopilot-page h3 {
    font-size: 30px;
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 20px;
}

.jobcopilot-page h6 {
    font-weight: 500;
}

.jobcopilot-page section {
    padding-top: 120px;
    padding-bottom: 120px;
}

.jobcopilot-page hr.jcp-divider {
    border: none;
    border-top: 2px solid var(--r100k-purple);
    opacity: 0.3;
}

.jobcopilot-page p {
    margin-bottom: 20px;
}

.jobcopilot-page .btn {
    font-weight: 600;
}

.jobcopilot-page .card-white {
    background-color: #fff;
}

.jobcopilot-page .card p {
    font-size: 17px;
    line-height: 1.6;
}

.jobcopilot-page .card h6 {
    font-size: 18px;
    margin-bottom: 12px;
}

.jobcopilot-page .jcp-app-img {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.jobcopilot-page .accordion-item,
.jcp-faq-wrap .accordion-item {
    margin-bottom: 16px;
    border-color: var(--bs-border-color);
}

.jobcopilot-page .accordion-button,
.jcp-faq-wrap .accordion-button {
    font-size: 20px;
    font-weight: 600;
    padding: 20px 24px;
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

.jobcopilot-page .accordion-button:not(.collapsed),
.jcp-faq-wrap .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

.jobcopilot-page .accordion-button:focus,
.jcp-faq-wrap .accordion-button:focus {
    box-shadow: none;
    border-color: var(--bs-border-color);
}

.jobcopilot-page .accordion-item:has(.accordion-button:not(.collapsed)),
.jcp-faq-wrap .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--bs-border-color);
}

.jobcopilot-page .accordion-body,
.jcp-faq-wrap .accordion-body {
    font-size: 18px;
    line-height: 1.6;
    padding: 8px 24px 24px;
}

.jcp-subtitle {
    max-width: 640px;
}

.jcp-faq-wrap {
    max-width: 800px;
}

.jcp-checklist-pill {
    background: linear-gradient(135deg, rgba(108, 58, 237, 0.05) 0%, rgba(18, 113, 237, 0.05) 100%);
    border-color: rgba(137, 96, 237, 0.12);
}

.jcp-trust-badge {
    height: 28px;
    width: auto;
}

@media (max-width: 767.98px) {
    .jcp-pain-pill {
        flex-direction: column;
        text-align: center;
        border-radius: 1rem !important;
    }

    .jobcopilot-page h1 {
        font-size: 36px;
        line-height: 1.2;
    }

    .jobcopilot-page h2 {
        font-size: 28px;
    }

    .jobcopilot-page h3 {
        font-size: 24px;
    }

    .jobcopilot-page {
        font-size: 18px;
    }

    .jobcopilot-page section {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

[data-bs-theme="dark"] {
    --bs-body-bg: #0f1115;
    --bs-body-bg-rgb: 15, 17, 21;
    --bs-body-color: #e5e7eb;
    --bs-body-color-rgb: 229, 231, 235;
    --bs-border-color: #2a2f36;
    --bs-link-color: #4a96f5;
    --bs-link-color-rgb: 74, 150, 245;
    --bs-link-hover-color: #6fa8f7;

    --r100k-purple: #a385f5;
    --r100k-purple-hover: #b69ef7;
    --r100k-featured-bg: #1f1a2e;
    --r100k-featured-border: #3d3258;
}

[data-bs-theme="dark"] .bg-muted {
    background-color: #181b20;
}

[data-bs-theme="dark"] .job-card,
[data-bs-theme="dark"] .card {
    background-color: #1a1d23;
}

[data-bs-theme="dark"] .promo-card {
    background-color: #1a1d23;
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #4a96f5;
    --bs-btn-border-color: #4a96f5;
    --bs-btn-hover-bg: #6fa8f7;
    --bs-btn-hover-border-color: #6fa8f7;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #4a96f5;
    --bs-btn-border-color: rgba(74, 150, 245, 0.2);
    --bs-btn-bg: rgba(74, 150, 245, 0.1);
    --bs-btn-hover-bg: rgba(74, 150, 245, 0.2);
    --bs-btn-hover-border-color: rgba(74, 150, 245, 0.3);
    --bs-btn-hover-color: #6fa8f7;
}

[data-bs-theme="dark"] .btn-purple {
    --bs-btn-bg: #a385f5;
    --bs-btn-border-color: #a385f5;
    --bs-btn-hover-bg: #b69ef7;
    --bs-btn-hover-border-color: #b69ef7;
    --bs-btn-active-bg: #b69ef7;
    --bs-btn-active-border-color: #b69ef7;
}

[data-bs-theme="dark"] .sticky-filters.is-stuck {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .job-card:hover {
    box-shadow: 0 2px 8px rgba(163, 133, 245, 0.15);
}

[data-bs-theme="dark"] #theme-toggle {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .rich-text {
    color: rgba(229, 231, 235, 0.82);
}

[data-bs-theme="dark"] .logo-row img,
[data-bs-theme="dark"] .logo-scroll-track img {
    filter: brightness(0) invert(1);
}


[data-bs-theme="dark"] .jobcopilot-page {
    background: linear-gradient(
        180deg,
        rgba(108, 58, 237, 0.06) 0%,
        rgba(18, 113, 237, 0.04) 40%,
        rgba(15, 17, 21, 1) 80%
    );
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

@media (max-width: 991.98px) {
    .mega-menu .collapse.show {
        max-height: 220px;
        overflow-y: auto;
    }
}