/* Index page styles - JobRunr branded */
:root {
    --jobrunr-purple: #7c3aed;
    --jobrunr-blue: #3b82f6;
    --jobrunr-cyan: #06b6d4;
    --jobrunr-dark: #1e293b;
    --jobrunr-gray: #64748b;
    --color-primary: #744cbf;
    --color-secondary: #00F0B5;
    --color-tertiary: #744cbf;
    --color-quaternary: #f2f2f2;

    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-pink-200: oklch(89.9% 0.061 343.231);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-md: 28rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --tw-leading: 1.8em;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #1e293b;
}

.hero.is-primary {
    background-color: white;
    background-image: url('/img-background.png');
    background-size: cover;
    background-position: center;
}

.hero.is-primary .title,
.hero.is-primary .subtitle {
    color: var(--jobrunr-dark);
}

.hero.is-primary p {
    color: var(--jobrunr-gray);
}

.btn-primary {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    @media (hover: hover) {
        background-color: var(--color-secondary) !important;
        color: var(--jobrunr-dark) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 240, 181, 0.4);
    }
}

.btn-primary:hover .icon-wrapper {
    background-color: var(--jobrunr-dark);
}

.btn-primary:hover .icon-wrapper .icon {
    color: var(--color-secondary) !important;
}

.btn-primary-light {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 9999px !important;
    font-size: 1.125rem !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.btn-primary-light:hover {
    @media (hover: hover) {
        background-color: var(--color-secondary) !important;
        color: var(--jobrunr-dark) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 240, 181, 0.4);
    }
}

.btn-primary-light:hover .icon-wrapper {
    background-color: var(--jobrunr-dark);
}

.btn-primary-light:hover .icon-wrapper .icon {
    color: var(--color-secondary);
}

.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-secondary);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.btn:hover .icon-wrapper {
    transform: translateX(4px);
}

.icon-wrapper .icon {
    display: inline-flex;
    color: var(--jobrunr-dark);
    font-size: 1.25rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.icon-wrapper .icon:first-child {
    position: relative;
}

.icon-wrapper .icon:last-child {
    position: absolute;
    opacity: 0;
    transform: translateX(-100%);
}

.btn:hover .icon-wrapper .icon:first-child {
    opacity: 0;
    transform: translateX(100%);
}

.btn:hover .icon-wrapper .icon:last-child {
    opacity: 1;
    transform: translateX(0);
}

.icon-wrapper .icon svg {
    width: 1.25em;
    height: 1.25em;
}

.btn {
    display: inline-flex;
    cursor: pointer;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    column-gap: calc(var(--spacing) * 4);
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-block: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 8);
    line-height: var(--tw-leading, var(--text-base--line-height));
    font-size: var(--text-base);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-transform: capitalize;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--default-transition-timing-function);
    --tw-duration: 300ms;
    transition-duration: 300ms;
}

.card {
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    border-radius: 12px;
    border: none;
    background: #f8f9fa;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.15);
}

.card-header {
    border-bottom: none;
    background: transparent;
    border-radius: 12px 12px 0 0;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
}

.card-header-title {
    color: var(--jobrunr-dark);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.card-content {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.title {
    color: var(--jobrunr-dark);
}

a {
    color: var(--jobrunr-purple);
    transition: color 0.2s;
}

/* Hero description */
.hero-description {
    font-size: 1.25rem;
    color: var(--jobrunr-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Intro section */
.intro-section {
    max-width: 800px;
    margin: 0 auto 4rem auto;
    text-align: center;
}

.intro-tagline {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.intro-text {
    font-size: 1.125rem;
    color: var(--jobrunr-gray);
    line-height: 1.8;
}

/* Timeline styles */
.timeline-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding: 2rem 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-secondary) 100%);
    transform: translateX(-50%);
}

.timeline-act {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.timeline-act:last-child {
    margin-bottom: 0;
}

.timeline-act.act-left {
    justify-content: flex-start;
    padding-right: calc(50% + 2rem);
}

.timeline-act.act-right {
    justify-content: flex-end;
    padding-left: calc(50% + 2rem);
}

.timeline-marker-act {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 3rem;
    background: var(--color-primary);
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
    text-align: center;
    line-height: 3rem;
}

.act-icon {
    font-size: 1.25rem;
    filter: brightness(0) invert(1);
}

.act-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    width: 100%;
    transition: box-shadow 0.2s;
}

.act-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.act-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--jobrunr-dark);
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}

.act-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step-item {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.step-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.step-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--jobrunr-dark);
    flex: 1;
}

.step-challenge {
    font-size: 0.875rem;
    color: var(--jobrunr-gray);
    margin: 0;
    line-height: 1.5;
    padding-left: 2.25rem;
}

.step-time {
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 500;
    white-space: nowrap;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .timeline-line {
        left: 1.5rem;
    }

    .timeline-act.act-left,
    .timeline-act.act-right {
        padding-left: 4rem;
        padding-right: 0;
        justify-content: flex-start;
    }

    .timeline-marker-act {
        left: 1.5rem;
    }
}

/* Auth pages: apply brand colors to Bulma primary classes */
.button.is-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.button.is-primary:hover,
.button.is-primary:focus {
    background-color: var(--jobrunr-purple);
    border-color: var(--jobrunr-purple);
    color: #fff;
}

.has-text-primary {
    color: var(--color-primary) !important;
}