/* ===================================================================
   mk-blog.css

   Companion stylesheet for the natively-rebuilt blog index.

   The toolbar, the card grid and the newsletter band are emitted by
   shortcodes as the source site's own markup, so /css/style.css already
   draws them and nothing is repeated here. What this file carries is:

     - the hero photograph, absolutely placed with its scrim
     - the clamp() sizes the Elementor controls cannot express
     - the gradient-clipped closing heading and its gold rule
     - the geometry that turns the WPForms newsletter form back into the
       single inline row the source had

   Every rule is scoped to an .mk-* class set in the Elementor panel
   under Advanced > CSS Classes, so editing content in the builder never
   detaches the styling.
   =================================================================== */

/* ---------- 0. Reset the theme's own block margins ----------------- */

.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; }

/* The shortcode widget must not introduce a box of its own: the grid and
   the band measure themselves against .wrap. */
.mk-blog-body .elementor-widget-container,
.mk-news-wrap .elementor-widget-container { margin: 0; padding: 0; }

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

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

.mk-bh-photo {
  position: absolute !important;
  inset: 0 0 0 42%;
  /* the container's own width control would otherwise stretch it to 100%
     of the section from the 42% offset, pushing it off the right edge */
  width: 58% !important;
  z-index: 0;
  padding: 0 !important;
  pointer-events: none;
}
.mk-bh-photo .elementor-widget-image,
.mk-bh-photo .elementor-widget-container,
.mk-bh-photo figure { height: 100%; margin: 0; }
.mk-bh-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-bh-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #041634 0%, rgba(4, 22, 52, .92) 26%,
    rgba(4, 22, 52, .34) 68%, rgba(4, 22, 52, .34) 100%);
}
.mk-bh-inner { position: relative; z-index: 2; }
.mk-bh-copy { max-width: 560px; }

.mk-crumbs-bar {
  position: absolute !important;
  top: clamp(18px, 3vw, 30px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0 !important;
}
.mk-crumbs { margin: 0 !important; }
.mk-crumbs .elementor-button { padding: 0; background: transparent; }
.mk-crumbs .elementor-button:hover { color: #fff; }
.mk-crumb-sep .elementor-heading-title { opacity: .55; }

/* ---------- 2. Fluid type ------------------------------------------ */

.mk-h-xl-f .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-f .elementor-heading-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em !important;
}
.mk-bh-sub .elementor-heading-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  line-height: 1.24 !important;
}

/* ---------- 2b. Inherited line height ------------------------------ */

/* The source sets body { line-height: 1.65 } unitless, so every element
   that does not declare its own scales that ratio against its own font
   size. The theme resolves the same ratio to an absolute 26.4px, which
   then inherits unchanged and makes the pill, the date row and the read
   link several pixels too tall each. Restoring the unitless value on the
   three shortcode blocks hands the ratio back. */
.mk-blog-body .blog-toolbar,
.mk-blog-body .blog-grid,
.mk-news-wrap .news-band { line-height: 1.65; }

/* Elementor's button widget draws no border; .btn carries a transparent
   1px one, which is 2px of the hero button's height and width. */
.mk-bh-copy .elementor-button { border: 1px solid transparent; }

/* ---------- 3. Toolbar --------------------------------------------- */

/* The source toolbar always carried an "Add Blog" button, and its 45px
   height set the row's. Here the button is only drawn for someone who
   can write a post, so the row keeps that height either way and the
   filter tabs sit at the same baseline for every visitor. */
.mk-blog-body .blog-toolbar { min-height: 51px; }

/* ---------- 4. Newsletter form ------------------------------------- */

/* The source form is one flex row: an email field that takes the slack
   and a fixed Subscribe button. WPForms wraps each field in two extra
   boxes, so those are flattened rather than restyled. */
.mk-news-form .wpforms-container { margin: 0 !important; padding: 0; width: 100%; }
.mk-news-form .wpforms-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mk-news-form .wpforms-head-container,
.mk-news-form .wpforms-field-description { display: none !important; }
.mk-news-form .wpforms-field-container { display: contents; }
.mk-news-form .wpforms-field {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}
/* the label stays for a screen reader, as it does in the source */
.mk-news-form .wpforms-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mk-news-form .wpforms-form input[type="email"],
.mk-news-form .wpforms-form input[type="text"] {
  width: 100% !important;
  max-width: none !important;
  height: 55px !important;
  padding: 12px 15px !important;
  border: 1px solid #ccd6e8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 14.72px !important;
  line-height: 1.65 !important;
  color: #0d1f42 !important;
}
.mk-news-form .wpforms-form input::placeholder { color: #33456e; }
.mk-news-form .wpforms-form input:focus-visible {
  outline: 2px solid #b9995a;
  outline-offset: 1px;
}
.mk-news-form .wpforms-submit-container {
  flex: 0 0 auto;
  padding: 0 !important;
  margin: 0 !important;
}
.mk-news-form .wpforms-form button.wpforms-submit {
  height: 55px;
  padding: 14px 28px !important;
  /* .btn's transparent hairline is 2px of the button's width */
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: #062b6f !important;
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 15.2px !important;
  font-weight: 600 !important;
  line-height: 25.08px !important;
  box-shadow: 0 8px 20px -10px rgba(6, 43, 111, .55) !important;
  transition: background .2s ease, box-shadow .2s ease;
}
.mk-news-form .wpforms-form button.wpforms-submit:hover {
  background: #013c80 !important;
  box-shadow: 0 12px 26px -10px rgba(6, 43, 111, .6) !important;
}
/* WPForms' own messages take the source note's slot under the row */
.mk-news-form .wpforms-error,
.mk-news-form .wpforms-confirmation-container-full {
  flex: 1 0 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 13.12px;
  line-height: 1.6;
  color: #33456e;
}

/* ---------- 5. Closing card ---------------------------------------- */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mk-h-lg-f .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-f .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(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%);
}

.mk-closing-card {
  position: relative;
  overflow: hidden;
  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);
}
.mk-closing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 63.5H64M63.5 0V64' stroke='%239ec5e8' stroke-width='1' opacity='0.20'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(160deg, rgba(0,0,0,.85), rgba(0,0,0,.25) 62%, transparent);
          mask-image: linear-gradient(160deg, rgba(0,0,0,.85), rgba(0,0,0,.25) 62%, transparent);
}
.mk-closing-photo, .mk-closing-copy { position: relative; z-index: 1; }
.mk-closing-copy { padding: clamp(30px, 4vw, 52px) !important; }

/* ---------- 6. Responsive ------------------------------------------ */

@media (max-width: 860px) {
  .mk-blog-hero { padding-top: clamp(76px, 14vw, 110px) !important; }
  /* below the split the photograph fills the whole band behind the copy */
  .mk-bh-photo { inset: 0; width: 100% !important; }
  .mk-bh-photo::after {
    background: linear-gradient(180deg, rgba(4, 22, 52, .9), rgba(4, 22, 52, .82));
  }
  .mk-bh-copy { max-width: none; }
  .mk-blog-body .blog-toolbar { min-height: 0; }
  .mk-news-form .wpforms-form { width: 100%; }
}

@media (max-width: 620px) {
  .mk-closing-card { flex-wrap: wrap; }
  .mk-closing-card > .e-con { flex: 1 1 100% !important; width: 100% !important; }
  .mk-closing-photo { min-height: 200px; }
  .mk-closing-copy { padding: 32px 24px !important; }
  .mk-cta-actions .elementor-widget-button,
  .mk-cta-actions .elementor-button { width: 100%; justify-content: center; }
}