/**
 * Contact modal form.
 *
 * Styles the Contact Form 7 form embedded in the fixed-link modal, following the
 * "Contact" frame of the Tech That Cares design file.
 *
 * Sizes are in px on purpose: this theme sets the root font-size to 20px, so rem
 * values do not line up with the design's 16/18/14px type scale.
 *
 * The accent colour is scoped here on purpose. The design uses #2bbbe5 for the
 * field dividers and the checkbox, but the front-end --secondary-40 token
 * resolves to #089AC8. css/admin.css declares the design value under that same
 * token name, so the two disagree. Correcting the global token would restyle the
 * six other components that consume it (faqs, whatwedo, regular_grid, how_grid,
 * numbers), which is out of scope here.
 */

/* Backdrop --------------------------------------------------------------- */

/* Reuses the previously orphaned #modal-backdrop from footer.php: it carried an
   id, while the only rule in the theme targets the .modal-backdrop class (which
   exists solely to neutralise Bootstrap's own backdrop z-index). It sits outside
   #page, so nothing traps its stacking context. */
#modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--black-alpha);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

#modal-backdrop.is-active {
    opacity: 1;
    pointer-events: all;
}

/* Above the backdrop, and above the header's z-index: 999.
 *
 * Set on the base state, not on .is-active, on purpose: --transition is
 * `all 900ms`, so a changing z-index gets interpolated like any other number.
 * Going 3 -> 1001 left the panel underneath the backdrop for the first ~600ms,
 * which read as the modal appearing dimmed and then clearing up. The closed
 * panel can sit at this level safely: it is transparent, pointer-events: none
 * and inert. */
.contactModal {
    z-index: 1001;
}

/* Scroll lock while the dialog is open. The slider's mousewheel module is
   disabled from animations.js; overflow alone would not stop it. */
body.has-modal-open {
    overflow: hidden;
}

.contactModal {
    --contact-accent: #2bbbe5;
    --contact-surface: #f6f8fa;
    /* Design spec is a flat 80px; it collapses on shorter viewports so the whole
       form fits without scrolling. */
    --contact-gap: clamp(16px, 3vh, 80px);

    /* header.css caps this at 100vh - 200px, which left 620px of room for ~710px
       of form on a 820px-tall window. The panel is anchored 110px from the
       bottom (just clear of the floating button, which sits between 40px and
       93px), so the extra room has to come off the top: 130px of reserve leaves
       a 20px top margin. dvh keeps it honest under mobile browser chrome. */
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);

    width: min(800px, calc(100% - 32px));
    padding: var(--contact-gap) clamp(24px, 3vw, 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The bar is hidden, not the scrolling: it overlays the right edge of the
       form on viewports under ~900px tall. Wheel, touch, arrow keys and Tab all
       still reach the rest of the form. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.contactModal::-webkit-scrollbar {
    display: none;
}

/* The closed modal is kept out of the tab order and the accessibility tree with
   the inert attribute, toggled in animations.js. visibility would be the usual
   choice, but --transition is `all 900ms`, so visibility animates and the fields
   stay unfocusable for most of a second after opening. */

/* Focus lands on the container when the dialog opens, as the dialog pattern
   requires. It is not an interactive control, so it needs no focus ring. */
.contactModal:focus {
    outline: none;
}

/* Close button ----------------------------------------------------------- */

.contactModal__head {
    display: flex;
    justify-content: flex-end;
    margin-block-end: var(--contact-gap);
}

.contactModal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--contact-surface);
    color: var(--primary);
    cursor: pointer;
    transition: var(--transition);
}

.contactModal__close:hover {
    background: var(--primary);
    color: var(--white);
}

.contactModal__close svg {
    width: 24px;
    height: 24px;
}

/* Form ------------------------------------------------------------------- */

.contactModal .wpcf7-form p {
    margin: 0;
}

/* wpcf7_autop turns the newlines inside each wrapper into <br>. */
.contactModal .basetis-field br,
.contactModal .basetis-checks br,
.contactModal .basetis-submit br {
    display: none;
}

.contactModal .basetis-field,
.contactModal .basetis-checks {
    margin-block-end: var(--contact-gap);
}

/* wpcf7_autop wraps the contents of each wrapper div in a <p>, so that <p> ends
   up being the only flex item and the layout has to live on it. Both levels are
   styled because the wrapper is not always autop'd. */
.contactModal .basetis-field,
.contactModal .basetis-field > p {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contactModal .basetis-field label {
    font-family: var(--font-regular);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary);
}

.contactModal .basetis-field .wpcf7-form-control-wrap {
    display: block;
}

.contactModal .basetis-field input {
    width: 100%;
    height: 36px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--contact-accent);
    border-radius: 0;
    background: transparent;
    color: var(--primary);
    font-family: var(--font-regular);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

.contactModal .basetis-field input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

/* Acceptance checkbox ---------------------------------------------------- */

.contactModal .basetis-checks .wpcf7-list-item {
    margin: 0;
}

.contactModal .basetis-checks label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-regular);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    color: var(--primary);
    cursor: pointer;
}

.contactModal .basetis-checks input[type="checkbox"] {
    appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--contact-accent);
    border-radius: 4px;
    background: var(--white) no-repeat center;
    cursor: pointer;
}

.contactModal .basetis-checks input[type="checkbox"]:checked {
    background-color: var(--contact-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.6 8.8 10 3.4' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contactModal .basetis-checks input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Submit ----------------------------------------------------------------- */

.contactModal .basetis-submit,
.contactModal .basetis-submit > p {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* CF7's spinner is an inline-block: in a line box next to the 56px button it
   pushed the row to 89px even while invisible. As a centred flex item it costs
   nothing and still shows during submission. */
.contactModal .wpcf7-spinner {
    margin: 0;
}

/* The submit input carries .button .button--blue from the form markup; the
   design asks for a slightly taller pill than the shared button. */
.contactModal .basetis-submit input[type="submit"] {
    min-width: 230px;
    height: 56px;
    text-align: center;
    cursor: pointer;
}

/* Validation and response ------------------------------------------------ */

.contactModal .wpcf7-not-valid-tip {
    margin-block-start: 8px;
    color: var(--error);
    font-size: 14px;
    line-height: 1.43;
}

.contactModal .basetis-field input.wpcf7-not-valid {
    border-bottom-color: var(--error);
}

.contactModal .wpcf7-response-output {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--contact-accent);
    border-radius: 4px;
    color: var(--primary);
    font-size: 14px;
    line-height: 1.43;
}

.contactModal .wpcf7-form.invalid .wpcf7-response-output,
.contactModal .wpcf7-form.unaccepted .wpcf7-response-output,
.contactModal .wpcf7-form.failed .wpcf7-response-output {
    border-color: var(--error);
    color: var(--error);
}