/*******************************************************

    polo.gr contact page (inc/functions/polo-contact.php): company details,
    the Contact Form 7 form in a card, the map underneath. Header, links
    and page frame: css/polo.page.css. Loaded only on that page, after the
    legacy CSS, so .polo-contact-page wins over Storefront's form styles.

 *******************************************************/



    .polo-contact {
        --polo-contact-soft:   var( --polo-page-soft );
        --polo-contact-border: #d6d8da;
        --polo-contact-gap:    clamp( 28px, 4vw, 64px );
    }



    /* Two columns: details | form */

    .polo-contact__grid {
        display: grid;
        grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
        gap: var( --polo-contact-gap );
        align-items: start;
    }

    .polo-contact-page .polo-contact__company,
    .polo-contact-page .polo-contact__form-title {
        margin: 0;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.2;
        text-align: left;
        text-transform: none;
    }

    .polo-contact__role {
        margin: 6px 0 0;
        color: var( --polo-grey );
        font-size: 15px;
    }

    .polo-contact-page .polo-contact__details {
        margin: 28px 0 0;
        padding: 0;
        border-top: 1px solid var( --polo-line );
        list-style: none;
    }

    .polo-contact__detail {
        display: grid;
        grid-template-columns: 44px minmax( 0, 1fr );
        grid-template-rows: auto auto;
        column-gap: 14px;
        align-items: center;
        margin: 0;
        padding: 18px 0;
        border-bottom: 1px solid var( --polo-line );
    }

    .polo-contact__detail .polo-page-icon {
        grid-row: 1 / span 3;
        box-sizing: content-box;
        padding: 11px;
        border-radius: 50%;
        background-color: var( --polo-contact-soft );
        color: var( --polo-black );
    }

    .polo-contact__label {
        color: var( --polo-grey );
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .polo-contact-page .polo-contact__value {
        color: var( --polo-black );
        font-size: 17px;
        line-height: 1.4;
        overflow-wrap: anywhere;
        text-decoration: none;
    }

    .polo-contact-page a.polo-contact__value:hover,
    .polo-contact-page a.polo-contact__value:focus-visible {
        color: var( --polo-red );
    }

    .polo-contact-page .polo-contact__note {
        justify-self: start;
        margin-top: 4px;
        color: var( --polo-black );
        font-size: 13px;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .polo-contact-page .polo-contact__note:hover,
    .polo-contact-page .polo-contact__note:focus-visible {
        color: var( --polo-red );
    }

    /* Form card */

    .polo-contact__form {
        padding: clamp( 24px, 3vw, 44px );
        border-radius: 8px;
        background-color: var( --polo-contact-soft );
    }

    .polo-contact__form .wpcf7 {
        margin-top: 24px;
    }

    .polo-contact-page .polo-contact-cf7 p {
        margin: 0;
    }

    .polo-cf7-field {
        display: block;
        margin: 0 0 20px;
    }

    .polo-cf7-label {
        display: block;
        margin-bottom: 8px;
        color: var( --polo-black );
        font-size: 14px;
        font-weight: 500;
    }

    .polo-cf7-req {
        color: var( --polo-red );
    }

    .polo-contact-page .polo-contact-cf7 .wpcf7-form-control-wrap {
        display: block;
    }

    .polo-contact-page .polo-contact-cf7 input[type="text"],
    .polo-contact-page .polo-contact-cf7 input[type="email"],
    .polo-contact-page .polo-contact-cf7 textarea {
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 13px 14px;
        border: 1px solid var( --polo-contact-border );
        border-radius: 4px;
        background-color: var( --polo-white );
        box-shadow: none;
        color: var( --polo-black );
        font-family: var( --polo-font-roboto );
        font-size: 16px; /* 16px: no zoom on focus in iOS Safari */
        line-height: 1.4;
        transition: border-color 0.2s var( --polo-ease ), box-shadow 0.2s var( --polo-ease );
    }

    .polo-contact-page .polo-contact-cf7 textarea {
        min-height: 150px;
        resize: vertical;
    }

    .polo-contact-page .polo-contact-cf7 input[type="text"]:focus,
    .polo-contact-page .polo-contact-cf7 input[type="email"]:focus,
    .polo-contact-page .polo-contact-cf7 textarea:focus {
        border-color: var( --polo-black );
        outline: none;
        box-shadow: 0 0 0 3px rgba( 16, 18, 18, 0.12 );
    }

    .polo-contact-page .polo-contact-cf7 .wpcf7-not-valid {
        border-color: var( --polo-red );
    }

    .polo-contact-page .polo-contact-cf7 .wpcf7-not-valid-tip {
        margin-top: 6px;
        color: var( --polo-red );
        font-size: 13px;
    }

    .polo-cf7-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 4px;
    }

    .polo-cf7-note {
        color: var( --polo-grey );
        font-size: 13px;
    }

    .polo-contact-page .polo-contact-cf7 .polo-cf7-submit {
        min-width: 180px;
        margin: 0;
        padding: 14px 32px;
        border: 0;
        border-radius: 999px;
        background-color: var( --polo-black );
        color: var( --polo-white );
        font-family: var( --polo-font-gotham );
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: background-color 0.2s var( --polo-ease );
    }

    .polo-contact-page .polo-contact-cf7 .polo-cf7-submit:hover,
    .polo-contact-page .polo-contact-cf7 .polo-cf7-submit:focus-visible {
        background-color: var( --polo-red );
    }

    .polo-contact-page .polo-contact-cf7 .polo-cf7-submit:focus-visible {
        outline: 2px solid var( --polo-black );
        outline-offset: 3px;
    }

    /* Contact Form 7's spinner sits inside the button, on the right, so it takes no room. */
    .polo-cf7-foot {
        position: relative;
    }

    .polo-contact-page .polo-contact-cf7 .wpcf7-spinner {
        position: absolute;
        top: 50%;
        right: 12px;
        margin: -12px 0 0;
        background-color: rgba( 255, 255, 255, 0.85 );
    }

    .polo-contact-page .polo-contact-cf7 .wpcf7-response-output {
        margin: 20px 0 0;
        padding: 12px 14px;
        border-width: 1px;
        border-radius: 4px;
        background-color: var( --polo-white );
        font-size: 14px;
    }



    /* Map */

    .polo-contact__map {
        margin-top: var( --polo-contact-gap );
        overflow: hidden;
        border-radius: 8px;
        background-color: var( --polo-contact-soft );
    }

    .polo-contact__map iframe {
        display: block;
        width: 100%;
        height: clamp( 320px, 36vw, 460px );
        border: 0;
    }



    /* Tablet and phones: one column, form first after the details */

    @media ( max-width: 900px ) {

        .polo-contact__grid {
            grid-template-columns: minmax( 0, 1fr );
        }

    }

    @media ( max-width: 480px ) {

        .polo-contact-page .polo-contact-cf7 .polo-cf7-submit {
            width: 100%;
        }

    }

    @media ( prefers-reduced-motion: reduce ) {

        .polo-contact *,
        .polo-contact *::before,
        .polo-contact *::after {
            transition: none !important;
        }

    }