/* =========================================================
   JAN RIGGERT – CONTACT DESIGN
   Version 1.2
   ========================================================= */

/* Page / content canvas */
.page-id-11 .entry-header {
    display: none;
}

.page-id-11 .inside-article {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.page-id-11 .entry-content {
    margin: 0 auto !important;
    width: min(1240px, calc(100% - 48px));
}

/* ---------------------------------------------------------
   MAP
   Add class "jan-contact-map" to the Image block.
   --------------------------------------------------------- */
.page-id-11 .jan-contact-map {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    margin: 72px 0 72px !important;
    line-height: 0;
}

.page-id-11 .jan-contact-map img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
}

/* Gold map pin – centered over Hamburg for the supplied map */
.page-id-11 .jan-contact-map::after {
    content: "";
    position: absolute;
    left: 49.6%;
    top: 45.3%;
    width: 14px;
    height: 14px;
    background: #D9A514;
    border: 4px solid #ffffff;
    border-radius: 50%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    pointer-events: none;
}

.page-id-11 .jan-contact-map-attribution {
    margin-top: 8px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #999999;
}

/* ---------------------------------------------------------
   CONTACT AREA

   Works with the user's current Gutenberg structure:
   .wp-block-columns
   ├── first column 33.33%
   └── second column 66.66% + jan-contact-form

   No extra wrapper class is required.
   --------------------------------------------------------- */
.page-id-11 .entry-content > .wp-block-columns {
    width: 100%;
    margin: 0 0 88px !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr) !important;
    column-gap: 72px !important;
    align-items: start !important;
}

.page-id-11 .entry-content > .wp-block-columns > .wp-block-column {
    width: auto !important;
    flex-basis: auto !important;
    min-width: 0;
    margin: 0 !important;
}

/* ---------------------------------------------------------
   CONTACT HEADING
   "Contact Me" keeps the global typography class and gets
   the same gold underline treatment as our other main sections.
   --------------------------------------------------------- */
.page-id-11 .entry-content > .wp-block-columns > .wp-block-column:first-child .jan-section-heading {
    margin: 0 0 24px !important;
    font-family: "Roboto", Arial, Helvetica, sans-serif !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: #363638 !important;
}

.page-id-11 .entry-content > .wp-block-columns > .wp-block-column:first-child .jan-section-heading::after {
    content: "";
    display: block;
    width: 118px;
    height: 5px;
    margin-top: 20px;
    background: #E0AD22;
}

/* Contact copy */
.page-id-11 .entry-content > .wp-block-columns > .wp-block-column:first-child .jan-body,
.page-id-11 .entry-content > .wp-block-columns > .wp-block-column:first-child > p:not(.jan-section-heading) {
    font-family: "Roboto", Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: #888888 !important;
}

.page-id-11 .entry-content > .wp-block-columns > .wp-block-column:first-child a {
    color: #D9A514 !important;
    text-decoration: none;
}

.page-id-11 .entry-content > .wp-block-columns > .wp-block-column:first-child a:hover,
.page-id-11 .entry-content > .wp-block-columns > .wp-block-column:first-child a:focus {
    color: #363638 !important;
}

/* ---------------------------------------------------------
   CONTACT FORM 7 / GENERIC FORM STYLING
   --------------------------------------------------------- */
.page-id-11 .jan-contact-form form p {
    margin: 0;
}

.page-id-11 .jan-contact-form .wpcf7-form-control-wrap {
    display: block;
    margin: 0;
}

.page-id-11 .jan-contact-form input[type="text"],
.page-id-11 .jan-contact-form input[type="email"],
.page-id-11 .jan-contact-form input[type="url"],
.page-id-11 .jan-contact-form input[type="tel"],
.page-id-11 .jan-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid #dddddd;
    border-radius: 0;
    background: transparent;
    padding: 10px 0 12px;
    margin: 0 0 24px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #363638;
    box-shadow: none;
}

.page-id-11 .jan-contact-form textarea {
    min-height: 180px;
    resize: vertical;
}

.page-id-11 .jan-contact-form input[type="text"]:focus,
.page-id-11 .jan-contact-form input[type="email"]:focus,
.page-id-11 .jan-contact-form input[type="url"]:focus,
.page-id-11 .jan-contact-form input[type="tel"]:focus,
.page-id-11 .jan-contact-form textarea:focus {
    border-bottom-color: #D9A514;
    outline: 0;
}

.page-id-11 .jan-contact-form input::placeholder,
.page-id-11 .jan-contact-form textarea::placeholder {
    color: #999999;
}

.page-id-11 .jan-contact-form input[type="submit"] {
    border: 0;
    border-radius: 0;
    background: #E0AD22;
    color: #ffffff;
    padding: 13px 28px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease;
}


/* Send button aligned to the right, matching the old contact design. */
.page-id-11 .jan-contact-form input[type="submit"] {
    display: block;
    margin-left: auto;
}

.page-id-11 .jan-contact-form input[type="submit"]:hover,
.page-id-11 .jan-contact-form input[type="submit"]:focus {
    background: #363638;
    color: #ffffff;
}

/* Placeholder paragraph in the current editor structure */
.page-id-11 .jan-contact-form > p:first-child,
.page-id-11 .jan-contact-form .wp-block-paragraph:first-child {
    margin: 0 !important;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width: 800px) {
    .page-id-11 .entry-content {
        width: calc(100% - 36px);
    }

    .page-id-11 .jan-contact-map {
        margin: 48px 0 !important;
    }

    .page-id-11 .entry-content > .wp-block-columns {
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 48px !important;
        margin-bottom: 64px !important;
    }
}

@media (max-width: 560px) {
    .page-id-11 .entry-content {
        width: calc(100% - 30px);
    }

    .page-id-11 .jan-contact-map {
        margin: 36px 0 !important;
    }

    .page-id-11 .entry-content > .wp-block-columns {
        row-gap: 40px !important;
    }

    .page-id-11 .entry-content > .wp-block-columns > .wp-block-column:first-child .jan-section-heading {
        font-size: 25px !important;
    }
}