/* ── FJC Insights — Frontend Styles ─────────────────────────────────────────
   Dark magazine aesthetic. !important used to survive Kadence overrides.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --fjc-green:   #00d084;
    --fjc-blue:    #3b82f6;
    --fjc-dark:    #0f172a;
    --fjc-dark-2:  #1e293b;
    --fjc-dark-3:  #334155;
    --fjc-muted:   #64748b;
    --fjc-light:   #f1f5f9;
    --fjc-white:   #ffffff;
    --fjc-radius:  12px;
}

.fjc-ins { box-sizing: border-box !important; font-family: inherit !important; }
.fjc-ins *, .fjc-ins *::before, .fjc-ins *::after { box-sizing: border-box !important; }

.fjc-ins__section-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--fjc-dark) !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    letter-spacing: -.02em !important;
    line-height: 1.2 !important;
    border: none !important;
}

.fjc-ins__footnote {
    font-size: 0.7rem !important;
    color: var(--fjc-muted) !important;
    margin: 12px 0 0 !important;
    text-align: right !important;
}

/* ── 1. Salary Pulse ─────────────────────────────────────────────────────── */

.fjc-salary-pulse {
    background: var(--fjc-dark) !important;
    border-radius: var(--fjc-radius) !important;
    padding: 32px 36px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.fjc-salary-pulse::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient( circle, rgba(0,208,132,.15), transparent 70% );
    pointer-events: none;
}

.fjc-pulse__label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: var(--fjc-muted) !important;
    margin-bottom: 8px !important;
}

.fjc-pulse__salary {
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    color: var(--fjc-green) !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
    letter-spacing: -.03em !important;
}

.fjc-pulse__meta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    font-size: 0.85rem !important;
    color: var(--fjc-muted) !important;
    flex-wrap: wrap !important;
}

.fjc-pulse__count { color: #94a3b8 !important; }

.fjc-trend--up   { color: var(--fjc-green) !important; font-weight: 600 !important; }
.fjc-trend--down { color: #f87171 !important; font-weight: 600 !important; }
.fjc-trend--flat { color: var(--fjc-muted) !important; }

.fjc-pulse__bar {
    height: 3px !important;
    background: var(--fjc-dark-3) !important;
    border-radius: 2px !important;
    margin-top: 24px !important;
    overflow: hidden !important;
}
.fjc-pulse__bar-fill {
    height: 100% !important;
    width: 0 !important;
    background: linear-gradient( 90deg, var(--fjc-green), var(--fjc-blue) ) !important;
    border-radius: 2px !important;
    transition: width 1.2s cubic-bezier(.25,.46,.45,.94) !important;
}

/* ── 2. Hot Categories ───────────────────────────────────────────────────── */

.fjc-hot-categories { margin: 28px 0 !important; }

.fjc-cats__grid {
    display: grid !important;
    grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) ) !important;
    gap: 14px !important;
}

@media ( max-width: 600px ) {
    .fjc-cats__grid { grid-template-columns: repeat( 2, 1fr ) !important; }
}

.fjc-cat-card {
    background: var(--fjc-dark) !important;
    border: 1px solid var(--fjc-dark-3) !important;
    border-radius: var(--fjc-radius) !important;
    padding: 20px 16px !important;
    text-align: center !important;
    cursor: default !important;
    transition: transform .2s, box-shadow .2s, border-color .2s !important;
    position: relative !important;
    overflow: hidden !important;
}
.fjc-cat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--cat-color, var(--fjc-blue));
}
.fjc-cat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
    border-color: var(--cat-color, var(--fjc-blue)) !important;
}

.fjc-cat-card__icon {
    font-size: 2rem !important;
    display: block !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}
.fjc-cat-card__name {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--fjc-white) !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}
.fjc-cat-card__count {
    font-size: 0.75rem !important;
    color: var(--cat-color, var(--fjc-green)) !important;
    font-weight: 600 !important;
}
.fjc-cat-card__bar {
    height: 2px !important;
    background: var(--fjc-dark-3) !important;
    border-radius: 1px !important;
    margin-top: 10px !important;
    overflow: hidden !important;
}
.fjc-cat-card__bar-fill {
    height: 100% !important;
    background: var(--cat-color, var(--fjc-blue)) !important;
    border-radius: 1px !important;
    transition: width 1s ease !important;
}

/* ── 3. Top Companies ────────────────────────────────────────────────────── */

.fjc-top-companies {
    background: var(--fjc-dark) !important;
    border-radius: var(--fjc-radius) !important;
    padding: 28px 28px !important;
    margin: 28px 0 !important;
}
.fjc-top-companies .fjc-ins__section-title { color: var(--fjc-white) !important; }

.fjc-companies__list { display: flex !important; flex-direction: column !important; gap: 12px !important; }

.fjc-company-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.fjc-company-row__rank {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    color: var(--fjc-muted) !important;
    width: 20px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}

.fjc-company-row__body {
    flex: 1 !important;
    min-width: 0 !important;
}

.fjc-company-row__name {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--fjc-white) !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fjc-company-row__bar-wrap {
    height: 4px !important;
    background: var(--fjc-dark-3) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

.fjc-company-row__bar {
    height: 100% !important;
    background: linear-gradient( 90deg, var(--fjc-blue), var(--fjc-green) ) !important;
    border-radius: 2px !important;
    transition: width 1s ease !important;
}

.fjc-company-row__count {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--fjc-green) !important;
    flex-shrink: 0 !important;
    min-width: 60px !important;
    width: auto !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.fjc-top-companies .fjc-ins__footnote { color: var(--fjc-muted) !important; }

/* ── 4. Salary by Region ─────────────────────────────────────────────────── */

.fjc-salary-region { margin: 28px 0 !important; }
.fjc-region__list  { display: flex !important; flex-direction: column !important; gap: 10px !important; }

.fjc-region-row {
    display: grid !important;
    grid-template-columns: 180px 1fr 90px !important;
    align-items: center !important;
    gap: 12px !important;
}
@media ( max-width: 600px ) {
    .fjc-region-row { grid-template-columns: 1fr 60px !important; }
    .fjc-region-row__bar-wrap { display: none !important; }
}

.fjc-region-row__loc {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--fjc-dark) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fjc-region-row__bar-wrap {
    height: 6px !important;
    background: #e2e8f0 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.fjc-region-row__bar {
    height: 100% !important;
    background: linear-gradient( 90deg, var(--fjc-blue), var(--fjc-green) ) !important;
    border-radius: 3px !important;
    transition: width 1s ease !important;
}

.fjc-region-row__sal {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    text-align: right !important;
}

/* ── 5. Market Ticker ────────────────────────────────────────────────────── */

.fjc-ticker {
    display: flex !important;
    align-items: center !important;
    background: var(--fjc-dark) !important;
    overflow: hidden !important;
    height: 44px !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
    gap: 0 !important;
}

.fjc-ticker__label {
    flex-shrink: 0 !important;
    padding: 0 16px !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: var(--fjc-green) !important;
    white-space: nowrap !important;
    border-right: 1px solid var(--fjc-dark-3) !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.fjc-ticker__track-wrap {
    flex: 1 !important;
    overflow: hidden !important;
    position: relative !important;
    height: 100% !important;
    /* fade edges */
    mask-image: linear-gradient( 90deg, transparent, black 3%, black 97%, transparent ) !important;
    -webkit-mask-image: linear-gradient( 90deg, transparent, black 3%, black 97%, transparent ) !important;
}

.fjc-ticker__track {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    animation: fjc-ticker-scroll linear infinite !important;
    width: max-content !important;
    height: 100% !important;
}

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

.fjc-ticker__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 20px 0 0 !important;
    font-size: 0.8rem !important;
}

.fjc-ticker__term   { font-weight: 700 !important; color: var(--fjc-white) !important; }
.fjc-ticker__sep    { color: var(--fjc-dark-3) !important; }
.fjc-ticker__salary { color: var(--fjc-green) !important; font-weight: 600 !important; }
.fjc-ticker__count  { color: var(--fjc-muted) !important; }
.fjc-ticker__divider {
    color: var(--fjc-dark-3) !important;
    padding: 0 16px !important;
    font-size: 0.5rem !important;
}

/* ── 6. Email Hero ───────────────────────────────────────────────────────── */

.fjc-email-hero {
    border-radius: var(--fjc-radius) !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin: 28px 0 !important;
    position: relative !important;
}

.fjc-email-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient( ellipse at top right, rgba(59,130,246,.2), transparent 60% ),
                radial-gradient( ellipse at bottom left, rgba(0,208,132,.15), transparent 60% );
    pointer-events: none;
}

.fjc-hero__inner {
    position: relative !important;
    z-index: 1 !important;
    padding: 52px 48px 32px !important;
    text-align: center !important;
}

@media ( max-width: 640px ) {
    .fjc-hero__inner { padding: 36px 24px 24px !important; }
}

.fjc-hero__badge {
    display: inline-block !important;
    background: rgba(0,208,132,.15) !important;
    color: var(--fjc-green) !important;
    border: 1px solid rgba(0,208,132,.3) !important;
    border-radius: 100px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    padding: 5px 14px !important;
    margin-bottom: 20px !important;
}

.fjc-hero__title {
    font-size: clamp( 1.6rem, 4vw, 2.8rem ) !important;
    font-weight: 900 !important;
    color: var(--fjc-white) !important;
    line-height: 1.15 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    letter-spacing: -.02em !important;
    border: none !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.fjc-hero__subtitle {
    font-size: 1.05rem !important;
    color: #94a3b8 !important;
    margin: 0 auto 32px !important;
    max-width: 520px !important;
    line-height: 1.6 !important;
    padding: 0 !important;
}

.fjc-hero__form { max-width: 480px !important; margin: 0 auto !important; }

.fjc-hero__input-row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.fjc-hero__input {
    flex: 1 !important;
    min-width: 200px !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    border: 1px solid var(--fjc-dark-3) !important;
    background: rgba(255,255,255,.07) !important;
    color: var(--fjc-white) !important;
    font-size: 0.95rem !important;
    outline: none !important;
    transition: border-color .15s, background .15s !important;
}
.fjc-hero__input::placeholder { color: var(--fjc-muted) !important; }
.fjc-hero__input:focus {
    border-color: var(--fjc-green) !important;
    background: rgba(255,255,255,.1) !important;
    box-shadow: 0 0 0 3px rgba(0,208,132,.2) !important;
}

.fjc-hero__btn {
    padding: 14px 24px !important;
    background: var(--fjc-green) !important;
    color: #0a1f0a !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .15s, transform .1s !important;
    box-shadow: none !important;
}
.fjc-hero__btn:hover {
    background: #00b872 !important;
    transform: translateY(-1px) !important;
}
.fjc-hero__btn:disabled {
    opacity: .6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.fjc-hero__feedback {
    min-height: 22px !important;
    margin-top: 12px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}
.fjc-hero__feedback.fjc-success { color: var(--fjc-green) !important; }
.fjc-hero__feedback.fjc-error   { color: #f87171 !important; }
.fjc-hero__feedback.fjc-info    { color: #94a3b8 !important; }

.fjc-hero__disclaimer {
    font-size: 0.72rem !important;
    color: var(--fjc-muted) !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
}

.fjc-hero__stats {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 20px 48px !important;
    border-top: 1px solid var(--fjc-dark-3) !important;
    position: relative !important;
    z-index: 1 !important;
    flex-wrap: wrap !important;
}

.fjc-hero__stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 32px !important;
}

.fjc-hero__stat-num {
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    color: var(--fjc-white) !important;
    line-height: 1 !important;
}

.fjc-hero__stat-label {
    font-size: 0.7rem !important;
    color: var(--fjc-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    margin-top: 4px !important;
    font-weight: 600 !important;
}

.fjc-hero__stat-divider {
    width: 1px !important;
    height: 36px !important;
    background: var(--fjc-dark-3) !important;
    flex-shrink: 0 !important;
}

@media ( max-width: 500px ) {
    .fjc-hero__stat-divider { display: none !important; }
    .fjc-hero__stats { gap: 8px !important; }
}