/* ============================================================
   hr-contact-form.css
   "I need HR assistance" contact form - new marketing disposition.

   The page is published through an iframe inside the "Contact us"
   accordion of TP.com, so only the form itself is styled here: the
   accordion chrome (header, toggle, panel) belongs to the host page.

   Every rule is namespaced under .fa-* to keep the isolation
   contract of the marketing delivery (form-accordion.html) and to
   avoid collisions with bootstrap.min.css and tp_2018.css, which
   are still loaded by the page.

   Desktop first. Breakpoints: 1024px (tablet) and 767px (mobile).
   ============================================================ */


/* =========================================================
   BRAND FONT
   The .ttf files already ship with the project (css/fonts).
   ========================================================= */

@font-face {
    font-family: 'TP Sans';
    src: url('fonts/TPSans-ExtraLight.ttf') format('truetype');
    font-weight: 200 275;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TP Sans';
    src: url('fonts/TPSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TP Sans';
    src: url('fonts/TPSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TP Sans';
    src: url('fonts/TPSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   DESIGN TOKENS
   Values taken from the marketing delivery (form-accordion.html)
   and from the TP.com host tokens it references.
   ========================================================= */

:root {
    /* Background */
    --fa-bg-form: #f4f6f8;
    --fa-bg-default: #ffffff;
    --fa-bg-primary-strong: #8051ff;
    --fa-bg-secondary-strong: #4d3293;

    /* Text */
    --fa-title-default: #010101;
    --fa-title-inverse: #ffffff;
    --fa-body-default: #3e4854;

    /* Borders */
    --fa-border-neutral-subtle: #d7dee4;
    --fa-border-primary-strong: #5318bf;
    --fa-border-active: #646c76;

    /* Icons */
    --fa-icon-default: #3e4854;

    /* Feedback */
    --fa-danger: #d0021b;
    --fa-success-bg: #d4edda;
    --fa-success-border: #c3e6cb;
    --fa-success-text: #155724;
    --fa-error-bg: #f8d7da;
    --fa-error-border: #f5c6cb;
    --fa-error-text: #721c24;

    /* Typography */
    --fa-font-sans: 'TP Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fa-fw-extralight: 275;
    --fa-fw-light: 300;
    --fa-fw-regular: 400;
    --fa-fs-14: 14px;
    --fa-fs-16: 16px;
    --fa-fs-18: 18px;
    --fa-fs-24: 24px;
    --fa-lh-16: 16px;
    --fa-lh-24: 24px;

    /* Motion */
    --fa-t-fast: 180ms;
    --fa-t-base: 260ms;
    --fa-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --fa-content-max: 1360px;
    --fa-row-gap: 16px;
}


/* =========================================================
   SECTION
   The form carries its own surface, so the iframe is filled
   edge to edge and no strip of the host shows through.
   ========================================================= */

html,
body {
    margin: 0;
    background: var(--fa-bg-form);
}

.fa {
    width: 100%;
    background: var(--fa-bg-form);
    padding: 0 0 32px;
    font-family: var(--fa-font-sans);
    color: var(--fa-body-default);
}

.fa *,
.fa *::before,
.fa *::after {
    box-sizing: border-box;
}

.fa__inner {
    width: 100%;
    padding-inline-start: 20px;
    padding-inline-end: 0;
}

/* The field labels are localized from TP Client and act as the placeholder of
   the control, so they are hidden visually but kept for assistive technology. */
.fa-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =========================================================
   FORM
   ========================================================= */

.fa-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--fa-row-gap);
}

/* ASP.NET writes the view state in blocks of zero height. They are still flex
   items, so the gap counted them and left an empty row above the first field. */
.fa-form > .aspNetHidden {
    display: none;
}

.fa-form__grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--fa-row-gap);
}


/* =========================================================
   ROW
   Two fields per row on desktop, stacked on mobile.
   ========================================================= */

.fa-row {
    width: 100%;
    display: flex;
    gap: var(--fa-row-gap);
}

.fa-row > .fa-field {
    flex: 1 1 0;
    min-width: 0;
}

/* A single field with no pair spans the two columns of the grid */
.fa-row > .fa-field--full {
    flex: 1 1 100%;
}


/* =========================================================
   FIELD (label as placeholder + underline)
   ========================================================= */

.fa-field {
    position: relative;
    display: flex;
    flex-direction: column;
}

.fa-field__input {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--fa-border-neutral-subtle);
    padding: 12px 0;
    font-family: var(--fa-font-sans);
    font-weight: var(--fa-fw-light);
    font-size: var(--fa-fs-18);
    line-height: var(--fa-lh-24);
    letter-spacing: 1px;
    color: var(--fa-body-default);
    transition: border-color var(--fa-t-fast) var(--fa-ease),
                border-width var(--fa-t-fast) var(--fa-ease);
}

/* The placeholder plays the role of the label, so it keeps the value colour */
.fa-field__input::placeholder {
    color: var(--fa-body-default);
    opacity: 1;
}

/* Focused and filled share the same treatment: the underline keeps its single
   pixel and only turns darker.
   The filled state is driven by the .is-filled class instead of by
   :placeholder-shown: the placeholders are written by the page script once
   the localized labels are available, and a <select> is never "placeholder
   shown", so the pseudo class cannot describe the state of every field. */
.fa-field__input:focus {
    outline: none;
    border-bottom: 2px solid var(--fa-border-primary-strong);
}

.fa-field__input.is-filled {
    outline: none;
    border-bottom-color: var(--fa-border-neutral-subtle);
}

/* Chrome paints its own background over an autofilled field. The inset shadow
   covers it with the surface of the form, so the control stays plain. */
.fa-field__input:-webkit-autofill,
.fa-field__input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--fa-body-default);
    box-shadow: 0 0 0 1000px var(--fa-bg-form) inset;
    border-bottom-color: var(--fa-border-neutral-subtle);
}

.fa-field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--fa-body-default);
    box-shadow: 0 0 0 1000px var(--fa-bg-form) inset;
    border-bottom: 2px solid var(--fa-border-primary-strong);
}

/* Additional information: opens with three lines so the box invites writing,
   and grows with the content up to a limit (see autoGrowTextarea). */
.fa-field__input--area {
    min-height: 88px;
    max-height: 240px;
    overflow-y: auto;
    resize: none;
}


/* =========================================================
   SELECT
   ========================================================= */

.fa-field--select .fa-field__input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-left: 8px;
    padding-right: 20px;
    font-weight: var(--fa-fw-regular);
    color: var(--fa-body-default);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%233E4854' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 12px 12px;

    /* Browsers that expose the select list scrollbar allow matching TP purple tone. */
    scrollbar-width: thin;
    scrollbar-color: #4d3293 transparent;
}

.fa-field--select .fa-field__input option {
    padding-left: 8px;
    text-indent: 2px;
    font-weight: var(--fa-fw-regular);
    color: var(--fa-body-default);
}

/* Browsers that expose the select list scrollbar allow matching TP purple tone. */
.fa-field--select .fa-field__input::-webkit-scrollbar {
    width: 8px;
}

.fa-field--select .fa-field__input::-webkit-scrollbar-track {
    background: transparent;
}

.fa-field--select .fa-field__input::-webkit-scrollbar-thumb {
    background-color: #4d3293;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}


/* =========================================================
   FIELDSET (status question)
   ========================================================= */

.fa-fieldset {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.fa-fieldset__legend {
    display: block;
    padding: 0;
    font-family: var(--fa-font-sans);
    font-weight: var(--fa-fw-light);
    font-size: var(--fa-fs-18);
    line-height: var(--fa-lh-24);
    color: var(--fa-body-default);
}


/* =========================================================
   RADIO GROUP
   The RadioButtonList is rendered with RepeatLayout="Flow", so the
   markup is a flat sequence of <input type="radio"> + <label>.
   The native input is restyled instead of being cloned by script.
   ========================================================= */

.fa-radio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 16px;
}

.fa-radio-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--fa-border-neutral-subtle);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: border-color var(--fa-t-fast) var(--fa-ease), border-width var(--fa-t-fast) var(--fa-ease);
}

.fa-radio-group input[type="radio"]:hover {
    border-color: var(--fa-bg-primary-strong);
}

/* The inner dot is painted with a thick border, so no pseudo element is needed */
.fa-radio-group input[type="radio"]:checked {
    border-width: 6px;
    border-color: var(--fa-border-primary-strong);
}

.fa-radio-group input[type="radio"]:focus-visible {
    outline: 2px solid var(--fa-border-primary-strong);
    outline-offset: 2px;
}

.fa-radio-group label {
    margin: 0 28px 0 0;
    font-family: var(--fa-font-sans);
    font-weight: var(--fa-fw-light);
    font-size: var(--fa-fs-18);
    line-height: var(--fa-lh-24);
    color: var(--fa-body-default);
    cursor: pointer;
}

.fa-radio-group label:last-of-type {
    margin-right: 0;
}


/* =========================================================
   FILE / ATTACHMENT
   ========================================================= */

.fa-attachments {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fa-field--file {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--fa-border-neutral-subtle);
    cursor: pointer;
    transition: border-color var(--fa-t-fast) var(--fa-ease);
}

.fa-field--file:hover {
    border-bottom-color: var(--fa-border-active);
}

.fa-field__file-icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--fa-icon-default);
}

.fa-field__file-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.fa-field__file-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--fa-font-sans);
    font-weight: var(--fa-fw-light);
    font-size: var(--fa-fs-18);
    line-height: var(--fa-lh-24);
    color: var(--fa-body-default);
}

/* Kept in the layout flow so the native picker can still be opened by
   clicking the label, but visually replaced by the icon and the text */
.fa-field__file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}


/* =========================================================
   CAPTCHA
   ========================================================= */

.fa-captcha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.fa-captcha .g-recaptcha {
    line-height: 0;
}


/* =========================================================
   CONSENT (optional terms and services)
   ========================================================= */

.fa-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 632px;
    margin: 0;
    cursor: pointer;
}

.fa-consent__box {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    border: 1px solid var(--fa-border-neutral-subtle);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.12);
    transition: background-color var(--fa-t-fast) var(--fa-ease), border-color var(--fa-t-fast) var(--fa-ease);
}

.fa-consent__box:hover {
    border-color: var(--fa-bg-primary-strong);
}

.fa-consent__box:checked {
    background: var(--fa-bg-primary-strong);
    border-color: transparent;
}

.fa-consent__box:focus-visible {
    outline: 2px solid var(--fa-border-primary-strong);
    outline-offset: 2px;
}

.fa-consent__text {
    font-family: var(--fa-font-sans);
    font-weight: var(--fa-fw-extralight);
    font-size: var(--fa-fs-14);
    line-height: var(--fa-lh-16);
    color: var(--fa-body-default);
}

.fa-consent__text a {
    color: inherit;
    font-weight: var(--fa-fw-light);
    text-decoration: underline;
    text-underline-position: from-font;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.fa-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.fa-required {
    font-family: var(--fa-font-sans);
    font-weight: var(--fa-fw-extralight);
    font-size: var(--fa-fs-14);
    line-height: var(--fa-lh-16);
    color: var(--fa-body-default);
}


/* =========================================================
   BUTTON
   ========================================================= */

.tp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    min-width: 120px;
    padding: 8px 16px;
    border: 0;
    background: var(--fa-bg-primary-strong);
    color: var(--fa-title-inverse);
    font-family: var(--fa-font-sans);
    font-weight: var(--fa-fw-light);
    font-size: var(--fa-fs-18);
    line-height: var(--fa-lh-24);
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
}

.tp-btn > * {
    position: relative;
    z-index: 2;
}

.tp-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Purple wipe from left to right on hover */
.tp-btn__accent {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--fa-bg-secondary-strong);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--fa-t-base) var(--fa-ease);
}

.tp-btn:not(:disabled):hover .tp-btn__accent,
.tp-btn:not(:disabled):focus-visible .tp-btn__accent {
    transform: scaleX(1);
}

.tp-btn__icon {
    flex: none;
    width: 24px;
    height: 24px;
    transition: transform var(--fa-t-base) var(--fa-ease);
}

.tp-btn__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tp-btn:not(:disabled):hover .tp-btn__icon,
.tp-btn:not(:disabled):focus-visible .tp-btn__icon {
    transform: rotate(-45deg);
}

.fa-submit {
    align-self: flex-start;
}


/* =========================================================
   VALIDATION MESSAGES
   Also used by the ASP.NET validators (CssClass="error-message").
   ========================================================= */

.error-message {
    display: block;
    margin-top: 8px;
    font-family: var(--fa-font-sans);
    font-weight: var(--fa-fw-light);
    font-size: var(--fa-fs-14);
    line-height: var(--fa-lh-16);
    color: var(--fa-danger);
}


/* =========================================================
   SUBMISSION FEEDBACK CARD
   ========================================================= */

#FormFeedbackCard {
    padding: 16px;
    border: 1px solid transparent;
}

#FormFeedbackCard.success {
    background-color: var(--fa-success-bg);
    border-color: var(--fa-success-border);
    color: var(--fa-success-text);
}

#FormFeedbackCard.error {
    background-color: var(--fa-error-bg);
    border-color: var(--fa-error-border);
    color: var(--fa-error-text);
}

#FormFeedbackMessage {
    margin: 0;
    font-family: var(--fa-font-sans);
    font-weight: var(--fa-fw-regular);
    font-size: var(--fa-fs-16);
    line-height: var(--fa-lh-24);
}


/* =========================================================
   VALIDATION MODAL
   Centred on the iframe viewport, which is what the host sees.
   It sits above the loading overlay (z-index 100000).
   ========================================================= */

.fa-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(1, 1, 1, 0.45);
}

.fa-modal.is-open {
    display: flex;
}

.fa-modal__dialog {
    width: 100%;
    max-width: 480px;
    max-height: 100%;
    overflow-y: auto;
    padding: 24px;
    background: var(--fa-bg-default);
    border-top: 4px solid var(--fa-border-primary-strong);
    font-family: var(--fa-font-sans);
    color: var(--fa-body-default);
}

.fa-modal__title {
    margin: 0;
    font-weight: var(--fa-fw-light);
    font-size: var(--fa-fs-18);
    line-height: var(--fa-lh-24);
    color: var(--fa-title-default);
}

.fa-modal__list {
    margin: 12px 0 0;
    padding-left: 20px;
    font-weight: var(--fa-fw-light);
    font-size: var(--fa-fs-16);
    line-height: var(--fa-lh-24);
    color: var(--fa-danger);
}

.fa-modal__list li + li {
    margin-top: 4px;
}

.fa-modal__actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}


/* =========================================================
   LOADING OVERLAY
   ========================================================= */

#overlayTPClient {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
}

#overlayTPClient.is-visible {
    display: flex;
}

/* Ring drawn with a border: one side takes the brand colour and the rotation
   leaves the gap that reads as progress, the same shape TP Client uses. */
.fa-spinner {
    flex: none;
    width: 56px;
    height: 56px;
    border: 5px solid var(--fa-border-neutral-subtle);
    border-top-color: var(--fa-border-primary-strong);
    border-radius: 50%;
    animation: fa-spin 900ms linear infinite;
}

@keyframes fa-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fa-spinner {
        animation-duration: 2400ms;
    }
}


/* =========================================================
   TABLET (<= 1024px)
   ========================================================= */

@media (max-width: 1024px) {
    :root {
        --fa-row-gap: 14px;
    }

    .fa-field__input,
    .fa-field__file-label,
    .fa-fieldset__legend,
    .fa-radio-group label {
        font-size: var(--fa-fs-16);
    }
}


/* =========================================================
   MOBILE (<= 767px)
   ========================================================= */

@media (max-width: 767px) {
    :root {
        --fa-row-gap: 12px;
    }

    .fa {
        padding: 0 0 24px;
    }

    .fa__inner {
        padding-inline-start: 4px;
        padding-inline-end: 0;
    }

    .fa-row {
        flex-direction: column;
    }

    /* One option per line, each input still paired with its own label */
    .fa-radio-group {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 12px;
        row-gap: 16px;
    }

    .fa-radio-group label {
        margin-right: 0;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .fa-field__input,
    .fa-field--file,
    .fa-consent__box,
    .fa-radio-group input[type="radio"],
    .tp-btn__accent,
    .tp-btn__icon {
        transition: none;
    }
}