/* ─────────────────────────────────────────────────────────────────────────────
   WINNERS OF TOMORROW — Main Stylesheet
───────────────────────────────────────────────────────────────────────────── */

/* ─── Smooth scrolling ───────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ─── Scroll-reveal animation ────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Staggered reveal delays ────────────────────────────────────────────── */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ─── Mobile menu hamburger → X animation ───────────────────────────────── */
#mobile-menu-btn.open .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#mobile-menu-btn.open .hamburger-line:nth-child(2) {
    opacity: 0;
}
#mobile-menu-btn.open .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ─── Flash message animation ────────────────────────────────────────────── */
.message-alert {
    animation: slideInRight 0.3s ease forwards;
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── Custom scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #FAF6EF; }
::-webkit-scrollbar-thumb { background: #C89B3C; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #F0C95E; }

/* ─── Gold underline effect ──────────────────────────────────────────────── */
.gold-underline { position: relative; display: inline-block; }
.gold-underline::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background-color: #C89B3C;
    transition: width 0.3s ease;
}
.gold-underline:hover::after { width: 100%; }

/* ─── Section divider ────────────────────────────────────────────────────── */
.section-divider {
    width: 60px; height: 3px;
    background-color: #C89B3C;
    border-radius: 2px;
    margin: 0 auto 1.5rem auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FORM STYLES
════════════════════════════════════════════════════════════════════════════ */

.form-input {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #E5E7EB;
    border-radius: 0.75rem;
    background-color: #ffffff;
    color: #1A1A1A;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.form-input:focus {
    border-color: #C89B3C;
    box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.15);
}
.form-input.error {
    border-color: #EF4444;
}
.form-input::placeholder {
    color: #9CA3AF;
}
textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

.form-file-input {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px dashed #C89B3C;
    border-radius: 0.75rem;
    background-color: #FAF6EF;
    color: #3D3D3D;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.form-file-input:hover {
    background-color: #F0E8D8;
}

.errorlist {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0 0;
}
.errorlist li {
    color: #EF4444;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.errorlist li::before {
    content: '⚠ ';
}

/* ─── Step indicator ─────────────────────────────────────────────────────── */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2.5rem;
}
.step-dot {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    border: 2px solid #E5E7EB;
    background-color: #ffffff;
    color: #9CA3AF;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.step-dot.active {
    background-color: #C89B3C;
    border-color: #C89B3C;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(200, 155, 60, 0.2);
}
.step-dot.completed {
    background-color: #C89B3C;
    border-color: #C89B3C;
    color: #ffffff;
}
.step-line {
    flex: 1;
    height: 2px;
    background-color: #E5E7EB;
    max-width: 80px;
    transition: background-color 0.3s ease;
}
.step-line.completed {
    background-color: #C89B3C;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BLOG ARTICLE CONTENT STYLES
   Applied to the div wrapping {{ post.content|linebreaksbr }}
   Makes raw text content look clean and readable
════════════════════════════════════════════════════════════════════════════ */

.prose-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #3D3D3D;
}

/* Paragraph spacing — each <br><br> block gets breathing room */
.prose-content br + br {
    display: block;
    content: '';
    margin-top: 1.2rem;
}

/* Bold text inside articles */
.prose-content strong {
    color: #1A1A1A;
    font-weight: 600;
}

/* Italic text */
.prose-content em {
    font-style: italic;
    color: #555;
}

/* Any links inside the article body */
.prose-content a {
    color: #C89B3C;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.prose-content a:hover {
    color: #F0C95E;
}
/* ─── Partner logo infinite scroll ──────────────────────────────────────── */
.logo-track-wrapper {
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

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

.logo-track:hover {
    animation-play-state: paused;
}

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


/* ─── Company timeline ───────────────────────────────────────────────────── */
.timeline-line {
    position: absolute;
    left: 1.25rem;
    top: 2.5rem;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #C89B3C, #C89B3C40);
}