/* Contact block (home + contact page), ported from the staging Elementor
   containers: home [85ea32b] > [12165be], contact page [5761487] > [c59f9a5]. */

.contact-section {
    --self: center;
}

.contact-row {
    --mt: 5%;
    --mb: 5%;
    --pt: 20px;
    --pr: 20px;
    --pb: 20px;
    --pl: 20px;
    --self: center;
}

.contact-section-page .contact-row {
    --mt: 0px;
    --mb: 0px;
}

/* [0545e3b] */
.contact-info {
    --justify: space-evenly;
    --align: flex-start;
    --pt: 40px;
    --pr: 40px;
    --pb: 40px;
    --pl: 40px;
    background-color: var(--bg-secondary);
}

.contact-heading {
    align-self: flex-start;
    font-size: var(--fs-h2);
    color: var(--color-primary);
}

/* Divider [63740c6]: 4px line at a third of the panel. */
.contact-divider {
    width: 100%;
    padding: 0;
}

.contact-divider span {
    width: 33%;
    margin: 2px 0;
    border-top: 4px solid var(--color-primary);
}

.contact-intro {
    margin: 10px 0;
    text-align: start;
}

/* Icon list [e09793a] */
.contact-details {
    align-self: flex-start;
    margin: 0 20px 0 0;
    padding: 10px;
    list-style: none;
    font-size: var(--fs-body);
}

.contact-details li {
    display: flex;
    align-items: center;
}

.contact-details li:not(:last-child) {
    padding-block-end: calc(1em / 2);
}

.contact-details li:not(:first-child) {
    margin-block-start: calc(1em / 2);
}

.contact-details svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    padding-inline-end: 18px;
    box-sizing: content-box;
    color: var(--color-primary);
}

.contact-details span {
    align-self: center;
    padding-inline-start: 5px;
    font-size: var(--fs-text);
    color: var(--text-secondary);
}

/* Google Maps widget [6f920ee] */
.contact-map {
    align-self: stretch;
    padding: 10px;
    line-height: 0;
}

.contact-map iframe {
    width: 100%;
    height: 300px;
    border: 0;
}

/* Form panel [b8c463c]: photo under a 50% blue overlay. */
.contact-panel {
    --overlay-color: var(--color-primary);
    --overlay-opacity: 0.5;
    --pt: 40px;
    --pr: 40px;
    --pb: 40px;
    --pl: 40px;
    overflow: hidden;
    color: var(--nd-white);
}

/* Home crops the photo with background-size: cover at -455px 0; the
   contact page shows it at full size from -589px -211px. */
.contact-panel-bg {
    object-fit: cover;
    object-position: -455px 0;
}

.contact-section-page .contact-panel-bg {
    width: 2560px;
    height: 1709px;
    object-fit: none;
    object-position: 0 0;
    inset: auto;
    top: -211px;
    left: -589px;
}

/* Staging uses an <h1> here on every page, so it keeps line-height 1 even
   on phones, where the kit gives h2 1.2em. */
.contact-panel .contact-panel-title {
    line-height: 1;
}

.contact-panel-title {
    text-align: start;
    font-size: var(--fs-primary);
    font-weight: 600;
    color: var(--nd-white);
}

/* Form widget [e39f5d0] */
.contact-form {
    flex: 0 0 auto;
    width: 98.93%;
    max-width: 98.93%;
    margin: 20px 0;
    padding: 12px 0;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form .form-group:last-of-type {
    margin-bottom: 0;
}

.contact-form .form-group input,
.contact-form .form-group textarea {
    display: block;
    width: 100%;
    min-height: 59px;
    padding: 7px 20px;
    font-family: var(--font-accent);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--nd-white);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--nd-white);
    border-radius: 0;
}

.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {
    color: var(--nd-white);
    opacity: 0.6;
}

.contact-form .form-group textarea {
    resize: vertical;
}

.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus {
    outline: none;
    box-shadow: none;
    border-bottom-width: 2px;
}

.contact-form .form-submit .btn-send {
    min-height: 40px;
}

/* Errors sit above their field; empty slots take no space. */
.contact-form .field-error {
    margin: 0 0 var(--space-xs);
    font-weight: 600;
    color: #FFE3E3;
}

.contact-form .field-error[data-has-error="false"] {
    min-height: 0;
    margin: 0;
}

/* Invalid fields get a heavier line as well as the message (not colour alone). */
.contact-form .form-group [aria-invalid="true"] {
    border-bottom: 3px solid #FFE3E3;
}

.error-summary {
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border: 2px solid var(--nd-white);
    background-color: rgba(17, 17, 34, 0.35);
}

.error-summary-title {
    margin: 0 0 var(--space-sm);
    font-size: 20px;
    color: var(--nd-white);
}

.error-summary ul {
    margin: 0;
    padding-left: 1.1em;
}

.error-summary a {
    font-weight: 600;
    text-decoration: underline;
    color: var(--nd-white);
}

/* Sending: the label is replaced by a spinner after 200ms; the button keeps
   its width. */
.contact-form button[type="submit"] {
    position: relative;
}

.contact-form.htmx-request button[type="submit"] {
    color: transparent;
}

.contact-form.htmx-request button[type="submit"]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 1.1em;
    height: 1.1em;
    margin: auto;
    border: 2px solid var(--color-primary);
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
    animation: contact-spin 0.8s linear infinite, contact-reveal 0s linear 0.2s forwards;
}

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

@keyframes contact-reveal {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-form.htmx-request button[type="submit"]::after {
        animation: contact-reveal 0s linear 0.2s forwards;
    }
}

.contact-sent {
    margin: 20px 0;
    padding: var(--space-xl);
    background-color: rgba(255, 255, 255, 0.12);
}

.contact-sent-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--nd-white);
}

@media (min-width: 768px) {
    .contact-row { --width: 80%; }
    .contact-info, .contact-panel { --width: 50%; }
}

@media (max-width: 1024px) {
    .contact-row {
        --min-height: 0px;
        --dir: column;
        --justify: flex-start;
        --row-gap: 0px;
        --col-gap: 0px;
        --pt: 0px;
        --pr: 0px;
        --pb: 0px;
        --pl: 0px;
    }

    .contact-info {
        --pt: 20px;
        --pr: 20px;
        --pb: 20px;
        --pl: 20px;
    }

    .contact-details li:not(:last-child) { padding-block-end: calc(2em / 2); }
    .contact-details li:not(:first-child) { margin-block-start: calc(2em / 2); }
    .contact-panel-bg { object-position: center center; }
    .contact-form { width: 100%; max-width: 100%; }

    .contact-section-page .contact-panel-bg {
        top: 0;
        left: 0;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .contact-row { --width: 90%; }
    .contact-info, .contact-panel { --width: 100%; }
}

@media (max-width: 767px) {
    .contact-panel-bg { object-position: -344px 0; }
}