/* Careers form, styled like the rest of coyotegroup.org and like
   jobs.coyotegroup.org: big gradient title, pill fields, orange accent. */

.cjf-wrap {
    --cjf-accent: var(--ab-main-color, #EC944A);
    --cjf-gradient: linear-gradient(90deg, #f8a45c, #ae541b);
    max-width: 1080px;
    padding: 0 0 24px;
    margin: 0 auto;
    box-sizing: border-box;
}
@media (max-width: 480px) {
    .cjf-wrap { padding: 0 0 16px; }
}

.cjf-head { text-align: center; margin-bottom: 48px; }
.cjf-wrap .cjf-title {
    font-size: clamp(56px, 11vw, 140px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -3px;
    text-transform: uppercase;
    margin: 0;
    background: var(--cjf-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cjf-season {
    margin: 18px 0 0;
    font-size: clamp(15px, 2vw, 20px);
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #fff;
}
.cjf-subtitle { color: rgba(255,255,255,0.5); font-size: 15px; margin: 14px 0 0; }
@media (max-width: 640px) {
    .cjf-wrap .cjf-title { letter-spacing: -1.5px; }
    .cjf-season { letter-spacing: 4px; }
}

.cjf-form { display: flex; flex-direction: column; gap: 28px; }
.cjf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 560px) {
    .cjf-row { grid-template-columns: 1fr; }
}
.cjf-field { display: flex; flex-direction: column; gap: 6px; }

.cjf-field > label,
.cjf-group legend {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    line-height: 1.2;
    margin: 5px 0 0;
    padding: 0;
}
.cjf-req { color: var(--cjf-accent); }
.cjf-hint { font-size: 12px; color: rgba(255,255,255,0.45); margin: 2px 0 0; }

.cjf-form input[type="text"],
.cjf-form input[type="email"],
.cjf-form input[type="tel"],
.cjf-form textarea {
    width: 100%;
    background: rgb(0 0 0 / 50%);
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 50px;
    color: #fff;
    padding: 12px 20px;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 300;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.cjf-form textarea { border-radius: 20px; resize: vertical; padding: 14px 20px; }
.cjf-form input:focus,
.cjf-form textarea:focus { border-color: var(--cjf-accent); }
.cjf-form input::placeholder,
.cjf-form textarea::placeholder { color: rgba(255,255,255,0.35); font-size: 14px; }
.cjf-form .cjf-invalid { border-color: #e76f51 !important; }

/* Position and venue pickers: a grid of tick boxes, any number can be on. */
.cjf-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.cjf-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.cjf-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255,255,255,0.8);
}
.cjf-checks .cjf-check {
    align-items: center;
    background: rgb(0 0 0 / 50%);
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 50px;
    padding: 12px 18px;
    font-size: 15px;
    transition: border-color 0.2s, background 0.2s;
}
.cjf-checks .cjf-check:hover { border-color: rgb(255 255 255 / 35%); }
.cjf-checks .cjf-check:has(input:checked) {
    border-color: var(--cjf-accent);
    background: rgb(236 148 74 / 12%);
    color: #fff;
}
.cjf-checks .cjf-check > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The theme colours spans inside form labels red; option names stay white. */
.cjf-form .cjf-check > span { color: inherit !important; }
.cjf-checks .cjf-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    display: grid;
    place-content: center;
}
.cjf-checks .cjf-check input[type="checkbox"]:checked { border-color: var(--cjf-accent); background: var(--cjf-gradient); }
.cjf-checks .cjf-check input[type="checkbox"]:checked::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
}
.cjf-subgroup { margin-top: 16px; }
.cjf-subgroup-label {
    margin: 0;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cjf-accent);
}
.cjf-check input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--cjf-accent);
    cursor: pointer;
}
.cjf-check small { color: rgba(255,255,255,0.5); font-size: 13px; margin-left: 4px; }
.cjf-gdpr { font-size: 13px; color: rgba(255,255,255,0.6); }
.cjf-gdpr a { color: var(--cjf-accent); text-decoration: none; }
.cjf-gdpr a:hover { text-decoration: underline; }

.cjf-file { position: relative; }
.cjf-file input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.cjf-file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgb(0 0 0 / 50%);
    border: 1px dashed rgb(255 255 255 / 25%);
    border-radius: 20px;
    color: rgba(255,255,255,0.55);
    padding: 12px 20px;
    font-size: 14px;
    transition: border-color 0.2s, color 0.2s;
}
.cjf-file:hover .cjf-file-label,
.cjf-file.cjf-has-file .cjf-file-label { border-color: var(--cjf-accent); color: #fff; }
.cjf-file-text { color: var(--cjf-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cjf-submit {
    background: linear-gradient(90deg, #ec944a, #c05a01, #ec944a);
    background-size: 200% 100%;
    border: none;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 18px 30px;
    width: 100%;
    transition: background-position 0.5s ease, opacity 0.2s;
}
.cjf-submit:hover { background-position: 100% 0; }
.cjf-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.cjf-error {
    background: rgb(215 106 35 / 15%);
    border: 1px solid rgba(215,106,35,0.4);
    border-radius: 10px;
    color: #f4a261;
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 16px;
}
.cjf-error-text { color: #f4a261; font-size: 14px; }

.cjf-success {
    text-align: center;
    padding: 24px 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.cjf-success svg { color: #06D6A0; }
.cjf-success p { color: rgba(255,255,255,0.85); font-size: 16px; margin: 0; }

.cjf-hp { position: absolute; left: -9999px; opacity: 0; }

/* The flex rules above would otherwise override the hidden attribute. */
.cjf-wrap [hidden] { display: none !important; }