/* ===================================================================
   mk-faq.css

   Companion stylesheet for the natively-rebuilt FAQ page. The Elementor
   panel carries every colour, size, radius, border and gap it can
   express; this file carries only what it cannot:

     - the hero photograph, absolutely placed with its scrim
     - the accordion rows: the hairline between them and the round
       plus/minus button on the right, which is drawn with two
       pseudo-elements rather than an icon
     - the gradient-clipped closing heading and its gold rule
     - the clamp() sizes the original uses, which have no control

   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; }
.e-con .elementor-icon svg {
  fill: none !important;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

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

.mk-fh-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-fh-photo .elementor-widget-image,
.mk-fh-photo .elementor-widget-container,
.mk-fh-photo figure { height: 100%; margin: 0; }
.mk-fh-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-fh-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-fh-inner { position: relative; z-index: 2; }
.mk-fh-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; }

/* The hero call to action is the navy gradient pill. */
.mk-btn-navy-grad .elementor-button {
  background-image: linear-gradient(135deg, #062b6f 0%, #013c80 52%, #00558f 100%);
  border: 1px solid transparent;
  box-shadow: 0 10px 24px -12px rgba(6, 43, 111, .55),
              inset 0 0 0 1px rgba(201, 171, 99, .3);
}
.mk-btn-navy-grad .elementor-button:hover { filter: brightness(1.06); }

/* ---------- 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-fh-sub .elementor-heading-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  line-height: 1.24 !important;
}

/* ---------- 3. The accordion --------------------------------------- */

/* Each question is a 71px row with a hairline beneath it. Elementor's
   nested accordion draws its own borders and paddings, so they are reset
   here and rebuilt to the original's measurements. */
.mk-faq-list .e-n-accordion-item {
  border: 0;
  border-bottom: 1px solid #dae1ee;
  border-radius: 0;
  background: none;
}
.mk-faq-list summary.e-n-accordion-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  border: 0;
  background: none;
  font-family: Inter, sans-serif;
  font-size: 16.48px;
  font-weight: 600;
  line-height: 27.19px;
  color: #062b6f;
  cursor: pointer;
  transition: color .2s ease;
}
.mk-faq-list summary.e-n-accordion-item-title:hover { color: #7d6a2e; }
.mk-faq-list summary.e-n-accordion-item-title::marker,
.mk-faq-list summary.e-n-accordion-item-title::-webkit-details-marker { display: none; content: ""; }

/* The original's control is a bordered circle carrying a plus that loses
   its upright stroke when the row opens; Elementor's own chevron icon is
   replaced by it. */
.mk-faq-list .e-n-accordion-item-title-icon { display: none !important; }
.mk-faq-list summary.e-n-accordion-item-title::after {
  content: "";
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid #ccd6e8;
  border-radius: 50%;
  background-image:
    linear-gradient(#005b9e, #005b9e),
    linear-gradient(#005b9e, #005b9e);
  background-repeat: no-repeat;
  background-size: 10px 1.6px, 1.6px 10px;
  background-position: center center, center center;
  transition: background-size .2s ease, background-color .2s ease, border-color .2s ease;
}
.mk-faq-list .e-n-accordion-item[open] summary.e-n-accordion-item-title::after {
  background-size: 10px 1.6px, 1.6px 0;
  background-color: #f0f3f8;
  border-color: rgba(201, 171, 99, .75);
}
.mk-faq-list .e-n-accordion-item[open] summary.e-n-accordion-item-title { color: #005b9e; }
/* Elementor's nested-accordion script is not enqueued on this page, so the
   inline height it writes while animating is never released and the panel
   stays shut. Freeing the height lets <details> open natively; the keyframe
   stands in for the original's 260ms reveal. */
.mk-faq-list .e-n-accordion-item { height: auto !important; }
.mk-faq-list .e-n-accordion-item[open] > .e-con { animation: mk-faq-open .26s ease; }
@keyframes mk-faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.mk-faq-list .e-n-accordion-item > .e-con { border: 0; background: none; }
.mk-faq-a p { max-width: 68ch; }

/* ---------- 4. The legal note -------------------------------------- */

.mk-fnote-ico { line-height: 0; margin-top: 2px; }
.mk-fnote-ico .elementor-icon { display: block; }
.mk-fnote-p strong { color: #062b6f; font-weight: 700; }

/* ---------- 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-faq-hero { padding-top: clamp(76px, 14vw, 110px) !important; }
  /* below the split the photograph fills the whole band behind the copy */
  .mk-fh-photo { inset: 0; width: 100% !important; }
  .mk-fh-photo::after {
    background: linear-gradient(180deg, rgba(4, 22, 52, .9), rgba(4, 22, 52, .82));
  }
  .mk-fh-copy { max-width: none; }
  .mk-faq-list summary.e-n-accordion-item-title {
    gap: 14px;
    padding: 18px 2px;
    font-size: 15.68px;
  }
}

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