/*
 * assets/css/contact.css
 * Styles for contact.php ("Contact CBAM Advisory").
 *
 * EVERY rule starts with ".contact-page", so nothing here can change any other page.
 * Same plain, institutional look as the rest of the site (european-union.europa.eu):
 * flat colours, thin grey borders, thin yellow accent lines, blue links and buttons.
 * No animations.
 *
 * Colours used (all in the fixed set in design-system.css):
 *   EC Blue #4073AF, EC Yellow #FFDE39, EC Grey #CFCFCF, #255D9D (button hover),
 *   text #262626 / #444444, light grey #F4F4F4, field border #767676 (v37),
 *   pale yellow #FFF6C2 (notice) and #B00020 (error red, the same as the Filing Obligations form).
 * The site variables (--blue, --yellow, --grey, --light, --text, --white) come from style.css.
 *
 * EQUAL EDGES: the form box, the card groups, the address panel and the notice are all
 * direct children of the same column and are 100% wide, so their left and right edges
 * line up in one straight column at every screen width.
 *
 * v37 (chat 12g): from 1000px "Write to us" (left, about 60%) and "Who to contact" (right, about 40%)
 * sit in two columns inside the wrapper .cp-layout; below 1000px everything is one column in the
 * same order. The form box is a Panel (grey, 4px yellow top line, 4px blue left bar).
 *
 * Contents: basics / layout / titles / form box / fields / errors / button / sent box /
 *           cards / address / tablet / phones
 */

/* The "hidden" attribute must always win inside this page */
.contact-page [hidden] {
    display: none !important;
}

/* Space between the big blocks (64px rhythm) */
.contact-page .cp-block + .cp-block,
.contact-page .cp-block + .cp-layout,
.contact-page .cp-layout + .cp-block {
    margin-top: 64px;
}

/* Two columns from 1000px: form left (about 60%), contact cards right (about 40%).
   Below 1000px the wrapper is a plain block, so the two sections stack in the same order. */
@media (min-width: 1000px) {

    .contact-page .cp-layout {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        column-gap: 32px;
        align-items: stretch;
    }

    .contact-page .cp-layout > .cp-block + .cp-block {
        margin-top: 0;
    }

    /* The right column is as tall as the form; the three cards share that height */
    .contact-page .cp-layout > .cp-block {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .contact-page .cp-layout .cp-contact-cards {
        flex: 1 1 auto;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 1fr;
    }
}

/* ---------- Titles and text ---------- */

/* Section titles */
.contact-page h2 {
    margin: 0 0 6px 0;
    font-size: 1.65rem;
    font-weight: bold;
    line-height: 1.25;
    color: var(--text);
    overflow-wrap: break-word;
    scroll-margin-top: 16px;
}

/* Blue lead line under the page title (same as the other pages) */
.contact-page .cp-lead {
    margin: 0 0 24px 0;
    max-width: 760px;
    color: var(--blue);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

/* Comfortable line length for plain text (boxes stay full width) */
.contact-page .cp-text {
    max-width: 760px;
    margin: 0 0 16px 0;
}

/* ---------- The form box (Panel look: grey, 4px yellow top line, 4px blue left bar, 28px padding) ---------- */

.contact-page .cp-form-box {
    width: 100%;
    margin: 20px 0 0 0;
    padding: 28px;
    background: var(--light);
    border-top: 4px solid var(--yellow);
    border-left: 4px solid var(--blue);
    scroll-margin-top: 16px;
}

.contact-page .cp-form {
    margin: 0;
}

/* Two fields side by side on wide screens */
.contact-page .cp-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

/* ---------- Fields ---------- */

.contact-page .cp-field {
    margin: 0 0 18px 0;
    min-width: 0;
}

.contact-page .cp-field label {
    display: block;
    margin: 0 0 6px 0;
    font-weight: bold;
    line-height: 1.35;
}

.contact-page .cp-star {
    color: var(--text);
}

.contact-page .cp-form input[type="text"],
.contact-page .cp-form input[type="email"],
.contact-page .cp-form select,
.contact-page .cp-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    padding: 8px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text);
    background: var(--white);
    border: 1px solid #767676;
    border-radius: 0;
}

.contact-page .cp-form textarea {
    min-height: 180px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.contact-page .cp-form input[type="text"]:focus,
.contact-page .cp-form input[type="email"]:focus,
.contact-page .cp-form select:focus,
.contact-page .cp-form textarea:focus {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
    border-color: var(--text);
}

/* Short plain text under a field and under the form */
.contact-page .cp-hint {
    margin: 6px 0 0 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #444444;
}

.contact-page .cp-small {
    margin: 4px 0 20px 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #444444;
}

/* The robot trap: out of sight for people, still in the page for robots */
.contact-page .cp-trap {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Problems (same look as the Filing Obligations form: dark text, red line, plain message) ---------- */

.contact-page .cp-error-box {
    margin: 0 0 20px 0;
    padding: 16px 20px;
    background: #FFF6C2;
    border-left: 4px solid #B00020;
}

.contact-page .cp-error-box p {
    margin: 0 0 6px 0;
}

.contact-page .cp-error-box p:last-child {
    margin-bottom: 0;
}

.contact-page .cp-error-box ul {
    margin: 0;
    padding: 0 0 0 20px;
}

.contact-page .cp-error-box a {
    color: #B00020;
    overflow-wrap: anywhere;
}

.contact-page .cp-error {
    margin: 6px 0 0 0;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.4;
    color: #B00020;
}

.contact-page .cp-invalid > label {
    color: #B00020;
}

.contact-page .cp-invalid input[type="text"],
.contact-page .cp-invalid input[type="email"],
.contact-page .cp-invalid select,
.contact-page .cp-invalid textarea {
    border: 2px solid #B00020;
}

.contact-page .cp-invalid input[type="text"]:focus,
.contact-page .cp-invalid input[type="email"]:focus,
.contact-page .cp-invalid select:focus,
.contact-page .cp-invalid textarea:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 5px var(--text);
}

/* ---------- Button (same as the other pages) ---------- */

.contact-page .cp-btn {
    display: inline-block;
    max-width: 100%;
    min-height: 46px;
    padding: 12px 24px;
    border: 2px solid var(--blue);
    border-radius: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.contact-page .cp-btn-primary {
    background: var(--blue);
    color: var(--white);
}

.contact-page .cp-btn-primary:hover,
.contact-page .cp-btn-primary:focus {
    background: #255D9D;
    border-color: #255D9D;
    color: var(--white);
    text-decoration: none;
}

.contact-page .cp-btn:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
}

/* ---------- After a good send ---------- */

/* The thank-you box replaces the form box: same width. Note look (pale yellow, 4px yellow left bar) */
.contact-page .cp-sent {
    padding: 20px 24px;
    background: #FFF6C2;
    border-top: 0;
    border-left: 4px solid var(--yellow);
}

/* If the thank-you text is ever focused by a script (tabindex="-1"), it gets the standard focus ring */
.contact-page .cp-sent:focus,
.contact-page .cp-sent [tabindex]:focus {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
}

.contact-page .cp-sent p {
    max-width: 760px;
    margin: 0 0 10px 0;
}

.contact-page .cp-sent p:last-child {
    margin-bottom: 0;
}

.contact-page .cp-sent-title {
    font-weight: bold;
}

/* Only shown on the developer's own computer (the page decides) */
.contact-page .cp-local-notice {
    width: 100%;
    margin: 16px 0 0 0;
    padding: 12px 20px;
    background: #FFF6C2;
    border-left: 4px solid var(--yellow);
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.5;
}

/* ---------- Cards (plain grids, no arrows) ---------- */

/* One column on phones. Wider screens are set in the media queries below. */
.contact-page .cp-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
}

.contact-page .cp-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

/* The five link cards sit in a narrow 5-column row, so they keep the smaller padding of 12d */
.contact-page .cp-link-card {
    padding: 18px 20px;
}

.contact-page .cp-card h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.35;
    color: var(--blue);
    overflow-wrap: break-word;
}

.contact-page .cp-card p {
    flex: 1 1 auto;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

/* "Who to contact" cards: title, text (takes the spare height), email link, phone link.
   From 600px the cards sit side by side or stacked with equal heights and the phone row is
   always reserved (44px), so the email link of the General card (which has no phone) sits in
   the same place as the emails of the other two cards. On phones the cards are one under the
   other, so no row is reserved. */
.contact-page .cp-contact-cards .cp-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto;
}

@media (min-width: 600px) {

    .contact-page .cp-contact-cards .cp-card {
        grid-template-rows: auto 1fr auto minmax(44px, auto);
    }
}

.contact-page .cp-contact-cards .cp-card p {
    margin: 0 0 8px 0;
}

.contact-page .cp-contact-cards .cp-mail {
    justify-self: start;
}

/* The email link at the bottom of a contact card */
.contact-page .cp-mail {
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 0;
    font-weight: bold;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.contact-page .cp-mail:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
}

/* Link cards: the title is the link, and the link covers the whole card so it is easy to tap */
.contact-page .cp-link-card {
    position: relative;
}

.contact-page .cp-link-card p {
    margin-bottom: 0;
}

.contact-page .cp-link-card a {
    color: var(--blue-dark);
    text-decoration: underline;
}

.contact-page .cp-link-card a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.contact-page .cp-link-card:hover {
    border-color: var(--blue);
    border-top-color: var(--yellow);
}

.contact-page .cp-link-card a:hover,
.contact-page .cp-link-card a:focus {
    color: var(--blue-deep);
}

.contact-page .cp-link-card a:focus-visible {
    outline: none;
}

.contact-page .cp-link-card a:focus-visible::after {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
}

/* ---------- Registered address ---------- */

.contact-page .cp-address-panel {
    width: 100%;
    margin: 20px 0 0 0;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

.contact-page .cp-address-panel address {
    margin: 0 0 12px 0;
    font-style: normal;
    line-height: 1.6;
}

.contact-page .cp-address-panel p {
    max-width: 760px;
    margin: 0;
}

/* ---------- Tablet ---------- */

/* Medium screens: two columns. With three contact cards the last one spans the full row,
   so its right edge still lines up with everything else. */
@media (min-width: 600px) {

    .contact-page .cp-contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-page .cp-contact-cards .cp-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Link cards (five): 640 to 899px = two columns, the last (fifth) card spans both columns */
@media (min-width: 640px) {

    .contact-page .cp-link-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-page .cp-link-cards .cp-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Wide screens: three contact cards in one row; link cards three per row (3 + 2) */
@media (min-width: 900px) {

    .contact-page .cp-contact-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contact-page .cp-contact-cards .cp-card:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .contact-page .cp-link-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contact-page .cp-link-cards .cp-card:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* Very wide screens (1100px and up): the five link cards in one row */
@media (min-width: 1100px) {

    .contact-page .cp-link-cards {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ---------- Phones ---------- */

@media (max-width: 639px) {

    /* Fields one under the other */
    .contact-page .cp-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-page .cp-form-box {
        padding: 20px 16px;
    }

    .contact-page .cp-address-panel,
    .contact-page .cp-contact-cards .cp-card {
        padding: 20px 16px;
    }

    .contact-page .cp-block + .cp-block,
    .contact-page .cp-block + .cp-layout,
    .contact-page .cp-layout + .cp-block {
        margin-top: 40px;
    }

    .contact-page .cp-btn {
        width: 100%;
    }
}