/* ===================================================================
   mk-contact.css

   Companion stylesheet for the natively-rebuilt Contact page. Same
   principle as mk-native.css: Elementor's controls carry everything they
   can express, and this file carries only what they cannot — the hero's
   absolutely-placed photograph, the gold rule under each heading, the
   card washes, and the styling of the WPForms booking form so it matches
   the original form field for field.
   =================================================================== */

/* ---------- 1. Hero ------------------------------------------------ */

.mk-contact-hero { position: relative; overflow: hidden; }

/* The photograph sits flush to the right edge behind the copy. */
.mk-contact-hero-photo {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62% !important;
  pointer-events: none;
}
.mk-contact-hero-photo .elementor-widget-image,
.mk-contact-hero-photo .elementor-widget-container,
.mk-contact-hero-photo figure { height: 100%; margin: 0; }
.mk-contact-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}
.mk-contact-hero-inner { position: relative; z-index: 1; }
.mk-contact-hero-copy { max-width: 470px; }

/* The breadcrumb sits absolutely at the top of the hero in the original, so
   it takes no vertical space in the flow. It is placed against the section,
   not the copy column, so it lines up with the container gutter. */
.mk-crumbs-bar {
  position: absolute !important;
  top: clamp(18px, 3vw, 30px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0 !important;
}
.mk-crumbs { margin: 0 !important; }
.mk-crumbs .elementor-button { padding: 0; background: transparent; }
.mk-crumbs .elementor-button:hover { color: #062b6f; }

/* Fluid heading sizes, copied from the source. */
.mk-h-xl-c .elementor-heading-title {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em !important;
}
.mk-h-lg-c .elementor-heading-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em !important;
}

/* ---------- 2. Section headings ------------------------------------ */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mk-h-lg-c .elementor-heading-title {
    background-image: linear-gradient(96deg, #062b6f 0%, #013c80 44%, #005b9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .mk-h-lg-light .elementor-heading-title {
    background-image: none;
    -webkit-text-fill-color: #fff;
  }
}
.mk-h-lg-c .elementor-heading-title::after {
  content: "";
  display: block;
  width: 78px;
  height: 2px;
  margin-top: 17px;
  border-radius: 2px;
  -webkit-text-fill-color: initial;
  background: linear-gradient(90deg,
    rgba(125, 106, 46, 0) 0%, rgba(125, 106, 46, .85) 26%,
    #a58f4c 50%, rgba(125, 106, 46, .85) 74%, rgba(125, 106, 46, 0) 100%);
}
.mk-section-head-c .mk-h-lg-c .elementor-heading-title::after,
.mk-sec-note .mk-h-lg-c .elementor-heading-title::after {
  margin-left: auto;
  margin-right: auto;
}
.mk-h-lg-light .elementor-heading-title::after {
  background: linear-gradient(90deg,
    rgba(201, 171, 99, 0) 0%, rgba(201, 171, 99, .9) 26%,
    #efdca8 50%, rgba(201, 171, 99, .9) 74%, rgba(201, 171, 99, 0) 100%);
}

/* ---------- 3. Help cards ------------------------------------------ */

.mk-help-card { flex-basis: calc((100% - 44px) / 3) !important; max-width: 409px; }
.mk-help-card, .mk-help-card .elementor-widget { text-align: center; }
.mk-help-ico .elementor-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid #007cc2;
}
.mk-help-link .elementor-button-wrapper { text-align: center; }
.mk-help-link .elementor-button { font-weight: 700; }
/* The link sits on the card's floor, so all three line up however long the
   description above it runs. The wrapper's line height is zeroed because a
   button widget is 2px taller than the original's inline link. */
.mk-help-link { margin-top: auto; }
.mk-help-link, .mk-help-link .elementor-button-wrapper { line-height: 0; }
.mk-help-link .elementor-button { line-height: 23.76px; }

/* ---------- 4. Reach cards ----------------------------------------- */

/* Elementor renders an icon inline-block, so the line box around it adds
   descender space the original's inline-flex span does not have. */
.mk-reach-ico { line-height: 0; }
.mk-reach-ico .elementor-icon { display: block; margin: 0 auto; }


.mk-reach-card, .mk-reach-card .elementor-widget { text-align: center; }
.mk-reach-card { flex-basis: calc(100% / 3) !important; max-width: 424px; }
.mk-reach-link .elementor-button-wrapper { text-align: center; }
.mk-reach-link .elementor-button { font-weight: 700; }
.mk-reach-card .mk-reach-p { margin-bottom: 14px; }

/* ---------- 5. Booking column -------------------------------------- */

.mk-book-card-p a { color: #004e8e; font-weight: 600; text-decoration: none; }
.mk-book-card-p a:hover { text-decoration: underline; }

/* ---------- 6. The WPForms booking form ---------------------------- */

/* The form is a real WPForms form, restyled to match the original's
   fields exactly: same label, control, radius, fill and spacing. */
/* WPForms sets these against the form's id, which outranks a class. */
.mk-booking-form .wpforms-container { margin: 0 !important; }
.mk-booking-form .wpforms-form .wpforms-field {
  padding: 0;
  margin: 0 0 18px;
}
.mk-booking-form .wpforms-form .wpforms-field-label {
  display: block;
  margin: 0 0 7px;
  font-family: Inter, sans-serif;
  font-size: 13.6px;
  font-weight: 600;
  line-height: 22.44px;
  color: #062b6f;
}
.mk-booking-form .wpforms-form .wpforms-required-label { color: #005b9e; font-weight: 600; }
.mk-booking-form .wpforms-form input[type="text"],
.mk-booking-form .wpforms-form input[type="email"],
.mk-booking-form .wpforms-form input[type="tel"],
.mk-booking-form .wpforms-form input[type="date"],
.mk-booking-form .wpforms-form input[type="time"],
.mk-booking-form .wpforms-form select,
.mk-booking-form .wpforms-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 15px;
  border: 1px solid #dae1ee;
  border-radius: 8px;
  background: #f0f3f8;
  font-family: Inter, sans-serif;
  font-size: 15.36px;
  color: #0d1f42;
  box-shadow: none;
}
.mk-booking-form .wpforms-form textarea { min-height: 108px; resize: vertical; }
.mk-booking-form .wpforms-form input:focus,
.mk-booking-form .wpforms-form select:focus,
.mk-booking-form .wpforms-form textarea:focus {
  outline: none;
  border-color: #005b9e;
  box-shadow: 0 0 0 3px rgba(0, 91, 158, .14);
  background: #fff;
}
.mk-booking-form .wpforms-form .wpforms-field-container > .wpforms-field:last-of-type { margin-bottom: 0; }
.mk-booking-form .wpforms-form .wpforms-field-description {
  margin: 6px 0 0;
  font-family: Inter, sans-serif;
  font-size: 13.28px;
  line-height: 20.58px;
  color: #0d1f42;
}

/* Field geometry, matched to the original field for field. WPForms sets
   most of this against the form's id, so these need !important to land.
   The original reserves a 23px error slot under every required field and a
   4px one under the optional ones, which is what makes the two columns of
   the booking section line up. */
.mk-booking-form .wpforms-form .wpforms-field { padding: 0 0 4px !important; margin: 0 0 18px !important; }
.mk-booking-form .wpforms-form .mkf-name,
.mk-booking-form .wpforms-form .mkf-phone,
.mk-booking-form .wpforms-form .mkf-email,
.mk-booking-form .wpforms-form .mkf-service,
.mk-booking-form .wpforms-form .mkf-location,
.mk-booking-form .wpforms-form .mkf-address { padding-bottom: 23px !important; }
.mk-booking-form .wpforms-form .mkf-message { padding-bottom: 8px !important; }
/* When the address field is not needed its contents are removed but the
   row keeps its place, exactly as the original's empty field does. */
.mk-booking-form .wpforms-form .mkf-hidden { height: 0; padding: 0 !important; overflow: hidden; }
.mk-booking-form .wpforms-form .mkf-hidden > * { display: none; }
.mk-booking-form .wpforms-form .wpforms-field-container { padding-top: 4px; }
.mk-booking-form .wpforms-form input[type="text"],
.mk-booking-form .wpforms-form input[type="email"],
.mk-booking-form .wpforms-form input[type="tel"],
.mk-booking-form .wpforms-form input[type="date"],
.mk-booking-form .wpforms-form input[type="time"] { height: 45px !important; }
.mk-booking-form .wpforms-form select { height: 47px !important; }
.mk-booking-form .wpforms-form textarea { height: 108px !important; min-height: 108px !important; }
.mk-booking-form .wpforms-form button.wpforms-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
}

/* The "a second choice is optional" hint spans the whole row in the
   original. Here it belongs to the alternate-time field, which is only half
   the width, so it is placed across both columns and the field reserves its
   height. */
.mk-booking-form .wpforms-form .mkf-alttime { position: relative; padding-bottom: 55px !important; }
.mk-booking-form .wpforms-form .mkf-alttime .wpforms-field-description {
  position: absolute;
  top: 84px;
  left: 0;
  width: calc(200% + 16px);
  margin: 0;
}

/* Date and time sit two to a row, as in the original. */
.mk-booking-form .wpforms-form .mkf-half { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
.mk-booking-form .wpforms-form .mkf-phone,
.mk-booking-form .wpforms-form .mkf-date,
.mk-booking-form .wpforms-form .mkf-altdate { margin-right: 16px; }

/* Submit button matches .btn-gold on a light ground: navy gradient. */
.mk-booking-form .wpforms-form .wpforms-submit-container { padding: 0; margin: 20px 0 0; }
.mk-booking-form .wpforms-form button.wpforms-submit {
  display: block;
  width: 100%;
  padding: 14px 28px !important;
  border: 1px solid transparent;
  border-radius: 999px;
  background-image: linear-gradient(135deg, #062b6f 0%, #013c80 52%, #00558f 100%);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 15.2px;
  font-weight: 600;
  line-height: 25.08px;
  box-shadow: 0 10px 24px -12px rgba(6, 43, 111, .55),
              inset 0 0 0 1px rgba(201, 171, 99, .3);
  cursor: pointer;
}
.mk-booking-form .wpforms-form button.wpforms-submit:hover { filter: brightness(1.06); }

.mk-booking-form .wpforms-form .wpforms-error {
  font-size: 13.28px;
  color: #b3261e;
}
.mk-booking-form .wpforms-form input.wpforms-error,
.mk-booking-form .wpforms-form select.wpforms-error,
.mk-booking-form .wpforms-form textarea.wpforms-error { border-color: #b3261e; }
.mk-booking-form .wpforms-confirmation-container-full {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid #ccd6e8;
  border-radius: 14px;
  background: #e6ecf5;
  color: #0d1f42;
}

/* ---------- 7. Travel cards ---------------------------------------- */

.mk-travel-card {
  background-image: linear-gradient(152deg, rgba(0, 91, 158, .086) 0%, rgba(0, 91, 158, 0) 46%) !important;
  border-top-color: #062b6f !important;
  box-shadow: 0 18px 40px -30px rgba(6, 43, 111, .45);
}
.mk-travel-ico .elementor-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #e6ecf5;
  box-shadow: inset 0 0 0 1px rgba(201, 171, 99, .45);
}
.mk-travel-link .elementor-button-wrapper { text-align: left; }
.mk-travel-link .elementor-button {
  padding: 0;
  background: transparent;
  justify-content: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- 8. Closing card and note -------------------------------- */

.mk-closing-card {
  background-color: #062b6f !important;
  background-image: linear-gradient(150deg,
    #06265f 0%, #062b6f 22%, #082f78 48%, #004e8e 72%, #013c80 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 171, 99, .34);
  overflow: hidden;
}
.mk-sec-note, .mk-sec-note .elementor-widget { text-align: center; }
.mk-note-legal .elementor-button-wrapper { text-align: center; }
.mk-note-legal .elementor-button {
  padding: 0;
  background: transparent;
  color: #062b6f;
  font-size: 16px;
  font-weight: 400;
  line-height: 26.4px;
}
.mk-note-legal .elementor-button:hover { text-decoration: underline; }

/* ---------- 9. Shared with the home page ---------------------------- */

.e-con .elementor-widget-heading .elementor-heading-title { margin: 0; }
.e-con .elementor-widget-text-editor p { margin-top: 0; }
.e-con .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.e-con .elementor-icon svg { fill: none !important; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mk-eyebrow { line-height: 26.4px; }
.mk-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 8px; }
.mk-eyebrow .elementor-heading-title::before {
  content: ""; display: inline-block; width: 18px; height: 1px; background: #7d6a2e;
}

/* ---------- 10. Responsive ------------------------------------------ */

@media (max-width: 1040px) {
  .mk-contact-hero-photo { display: none !important; }
  .mk-contact-hero-copy { max-width: none; }
  .mk-help-card { flex-basis: calc((100% - 22px) / 2) !important; }
  .mk-book-layout > .e-con { flex: 1 1 100% !important; width: 100% !important; }
}

@media (max-width: 860px) {
  .mk-travel-cards > .e-con { flex: 1 1 100% !important; }
  .mk-reach-card { flex-basis: 100% !important; max-width: none; }
}

@media (max-width: 620px) {
  .mk-help-card { flex-basis: 100% !important; max-width: none; }
  .mk-closing-card { flex-wrap: wrap; }
  .mk-closing-card > .e-con { flex: 1 1 100% !important; width: 100% !important; }
  .mk-closing-photo { min-height: 220px; }
  .mk-closing-copy { padding: 32px 24px !important; }
  .mk-booking-form .wpforms-form .mkf-half { display: block; width: 100%; margin-right: 0; }
  .mk-cta-actions .elementor-widget-button,
  .mk-cta-actions .elementor-button { width: 100%; justify-content: center; }
  .mk-note-legal { flex-wrap: wrap; }
}

/* ==== Booking form grid fix: two equal columns, 16px gap, hint stays inside the card ==== */
.mk-booking-form .wpforms-form .wpforms-field-container { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: start; }
.mk-booking-form .wpforms-form .wpforms-field-container > .wpforms-field { grid-column: 1 / -1; min-width: 0; }
.mk-booking-form .wpforms-form .wpforms-field-container > .mkf-half { grid-column: auto; display: block !important; width: auto !important; margin-right: 0 !important; }
.mk-booking-form .wpforms-form .mkf-alttime .wpforms-field-description { left: calc(-100% - 16px); width: calc(200% + 16px); max-width: none; }
@media (max-width: 620px) {
  .mk-booking-form .wpforms-form .wpforms-field-container { grid-template-columns: minmax(0, 1fr); }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-half { grid-column: 1 / -1; }
  .mk-booking-form .wpforms-form .mkf-alttime { padding-bottom: 4px !important; }
  .mk-booking-form .wpforms-form .mkf-alttime .wpforms-field-description { position: static; left: auto; width: auto; margin: 6px 0 0; }
}

/* ==== Compact booking form: tighter spacing, service + location side by side ==== */
.mk-booking-form .wpforms-form .wpforms-field { margin-bottom: 12px !important; }
.mk-booking-form .wpforms-form .wpforms-field-label { margin-bottom: 4px; line-height: 20px; }
.mk-booking-form .wpforms-form .mkf-name,
.mk-booking-form .wpforms-form .mkf-phone,
.mk-booking-form .wpforms-form .mkf-email,
.mk-booking-form .wpforms-form .mkf-service,
.mk-booking-form .wpforms-form .mkf-location,
.mk-booking-form .wpforms-form .mkf-address { padding-bottom: 19px !important; }
.mk-booking-form .wpforms-form input[type="text"],
.mk-booking-form .wpforms-form input[type="email"],
.mk-booking-form .wpforms-form input[type="tel"],
.mk-booking-form .wpforms-form input[type="date"],
.mk-booking-form .wpforms-form input[type="time"] { height: 42px !important; padding-top: 9px; padding-bottom: 9px; }
.mk-booking-form .wpforms-form select { height: 44px !important; padding-top: 9px; padding-bottom: 9px; }
.mk-booking-form .wpforms-form textarea { height: 76px !important; min-height: 76px !important; }
.mk-booking-form .wpforms-form .wpforms-submit-container { margin-top: 14px; }
@media (min-width: 621px) {
  .mk-booking-form .wpforms-form .wpforms-field-container > .wpforms-field { order: 20; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-name { order: 1; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-phone { order: 2; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-email { order: 3; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-service { order: 4; grid-column: auto; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-location { order: 5; grid-column: auto; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-date { order: 6; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-time { order: 7; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-altdate { order: 8; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-alttime { order: 9; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-address { order: 10; }
  .mk-booking-form .wpforms-form .wpforms-field-container > .mkf-message { order: 11; }
}
/* Even vertical rhythm */
#wpforms-form-213 .wpforms-field-container > .wpforms-field{padding-bottom:10px !important;margin-bottom:12px !important;}
#wpforms-form-213 .wpforms-field-container > .wpforms-field.mkf-hidden{padding-bottom:0 !important;margin-bottom:0 !important;}