/* The talent pool section and its application modal on the careers page.
   These rules used to sit in a <style> block at the end of careers.html. They
   are unchanged, and this file is linked after enhance.css so that they keep
   the place in the cascade they had there. Several of the selectors are shared
   with the rest of the page (.benefit-card, .form-group, .stat-number), so
   loading this file any earlier changes how those look. */

/* ============================================
   TALENT POOL SECTION - IMMERSIVE DESIGN
   ============================================ */

.talent-pool {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: linear-gradient(135deg, #0f1419 0%, #1a1f3a 50%, #0f1419 100%);
}

.talent-pool-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 3000;
    overflow-y: auto;
    padding: 40px 20px;
}

.talent-pool-modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.talent-pool-modal-content {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.talent-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3001;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(74, 144, 226, 0.4);
    color: white;
    font-size: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}

.talent-modal-close:hover {
    background: rgba(74, 144, 226, 0.3);
}

body.talent-modal-open {
    overflow: hidden;
}

.talent-pool-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.talent-pool-gradient {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.1) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    border-radius: 50%;
    animation: float 15s ease-in-out infinite;
}

.talent-pool-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border: 2px solid rgba(74, 144, 226, 0.1);
    border-radius: 50%;
}

.shape-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 5%;
    animation: rotate 20s linear infinite;
}

.shape-2 {
    width: 150px;
    height: 150px;
    bottom: 15%;
    right: 10%;
    animation: rotate 25s linear infinite reverse;
}

.shape-3 {
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: scale 18s ease-in-out infinite;
}

.talent-pool-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.talent-pool-container {
    position: relative;
    z-index: 1;
}

/* Header */
.talent-pool-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge {
    display: inline-block;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.talent-pool-title {
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    font-family: 'Orbitron', sans-serif;
    line-height: 1.2;
}

.talent-pool-title .gradient-text {
    background: linear-gradient(135deg, #4a90e2 0%, #85c1e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.talent-pool-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Content Layout */
.talent-pool-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
}

/* Benefits Column */
.talent-pool-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.benefits-title {
    grid-column: 1 / -1;
    font-size: 28px;
    color: white;
    margin-bottom: 20px;
    font-weight: 600;
}

.benefit-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 144, 226, 0.2);
    padding: 25px;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.benefit-card:hover {
    background: rgba(74, 144, 226, 0.1);
    border-color: rgba(74, 144, 226, 0.5);
    transform: translateY(-5px);
}

.benefit-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: white;
}

.benefit-icon svg {
    width: 24px;
    height: 24px;
}

.benefit-card h4 {
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
}

.benefit-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.5;
}

/* Form Column */
.talent-pool-form-container {
    display: flex;
    align-items: center;
}

.form-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.form-header {
    margin-bottom: 30px;
    text-align: center;
}

.form-header h3 {
    color: white;
    font-size: 26px;
    margin-bottom: 10px;
    font-weight: 600;
}

.form-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* Form Sections */
.form-section {
    margin-bottom: 30px;
}

.form-section:not(:last-of-type) {
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(74, 144, 226, 0.1);
}

.section-label {
    color: rgba(74, 144, 226, 0.8);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

/* Form Groups */
.form-group {
    margin-bottom: 15px;
    position: relative;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-family: 'Exo 2', sans-serif;
    transition: all 0.3s ease;
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: rgba(74, 144, 226, 0.1);
    border-color: rgba(74, 144, 226, 0.8);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.form-group label {
    position: absolute;
    left: 16px;
    top: -8px;
    background: #0f1419;
    padding: 0 8px;
    color: rgba(74, 144, 226, 0.8);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.form-group input:focus~label,
.form-group input:not(:placeholder-shown)~label,
.form-group select:focus~label,
.form-group select:not([value=""])~label,
.form-group textarea:focus~label,
.form-group textarea:not(:placeholder-shown)~label {
    opacity: 1;
}

/* File Upload */
.file-upload label {
    position: static;
    display: block;
    margin-bottom: 10px;
    background: none;
    color: rgba(255, 255, 255, 0.7);
}

.file-drop-zone {
    border: 2px dashed rgba(74, 144, 226, 0.5);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(74, 144, 226, 0.05);
}

.file-drop-zone:hover {
    background: rgba(74, 144, 226, 0.1);
    border-color: rgba(74, 144, 226, 0.8);
}

.file-drop-zone svg {
    width: 40px;
    height: 40px;
    color: rgba(74, 144, 226, 0.6);
    margin-bottom: 10px;
}

.file-drop-zone p {
    color: white;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.file-size {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    display: block;
}

/* Checkboxes */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}

.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #4a90e2;
}

.checkbox-group label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    position: static;
    background: none;
    padding: 0;
    top: auto;
}

.checkbox-group a {
    color: #4a90e2;
    text-decoration: none;
    font-weight: 500;
}

.checkbox-group a:hover {
    text-decoration: underline;
}

/* Submit Button */
.talent-submit {
    width: 100%;
    padding: 14px 32px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.talent-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(74, 144, 226, 0.3);
}

.talent-submit:active {
    transform: translateY(0);
}

.talent-submit svg {
    width: 20px;
    height: 20px;
}

.form-note {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin-top: 10px;
}

/* Stats Section */
.talent-pool-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
    padding-top: 60px;
    border-top: 1px solid rgba(74, 144, 226, 0.2);
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, #4a90e2 0%, #85c1e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* Animations */
@keyframes float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -30px);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes scale {

    0%,
    100% {
        transform: translateX(-50%) translateY(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) translateY(-50%) scale(1.1);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .talent-pool-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .talent-pool-benefits {
        grid-template-columns: 1fr;
    }

    .talent-pool-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .talent-pool {
        padding: 50px 0;
    }

    .talent-pool-title {
        font-size: 28px;
    }

    .talent-pool-subtitle {
        font-size: 16px;
    }

    .talent-pool-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .form-card {
        padding: 25px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .benefit-card {
        padding: 20px;
    }

    .stat-number {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .talent-pool-title {
        font-size: 24px;
    }

    .talent-pool-stats {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 15px;
    }
}

/* ── Form feedback (talent-pool-form-handler.js) ─────────────────────────────
   The reds and greens are the ones the site's notices use; the text versions
   are lighter so they stay readable on the dark form. */
.talent-pool-form .field-error {
    margin: 6px 0 0;
    color: #ff8a80;
    font-size: 13px;
    line-height: 1.4;
}

.talent-pool-form input[aria-invalid="true"],
.talent-pool-form select[aria-invalid="true"],
.talent-pool-form textarea[aria-invalid="true"] {
    border-color: rgba(244, 67, 54, 0.85);
}

.talent-pool-form input[aria-invalid="true"]:focus,
.talent-pool-form select[aria-invalid="true"]:focus,
.talent-pool-form textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
}

/* A consent box's message goes under its row, lined up with the label */
.talent-pool-form .checkbox-group + .field-error {
    margin: -8px 0 15px 32px;
}

.file-drop-zone:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 3px;
}

.file-drop-zone.is-dragover {
    background: rgba(74, 144, 226, 0.2);
    border-color: #4a90e2;
}

.file-drop-zone.has-file {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.5);
}

.file-drop-zone.has-file svg {
    color: rgba(76, 175, 80, 0.9);
}

.file-drop-zone.has-file p {
    overflow-wrap: anywhere;
}

.file-drop-zone[aria-invalid="true"] {
    background: rgba(244, 67, 54, 0.06);
    border-color: rgba(244, 67, 54, 0.85);
}

.file-remove {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 0;
    background: none;
    border: none;
    color: #4a90e2;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.file-remove:hover {
    text-decoration: underline;
}

.file-remove:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

.talent-submit[disabled] {
    opacity: 0.8;
    cursor: progress;
    transform: none;
    box-shadow: none;
}

.form-status {
    margin: -5px 0 10px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

.form-status:empty {
    display: none;
}

.form-status.is-error {
    color: #ff8a80;
}

.form-status.is-success {
    color: #81c784;
}

/* The field only bots fill in: off screen, never focused by people */
.talent-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The form inherits centred text; messages line up with their fields, and
   the one for the CV sits under the drop zone like the rest of that block */
.talent-pool-form .field-error {
    text-align: left;
}

.talent-pool-form .file-upload .field-error {
    text-align: center;
}