/* ===================================================================
   mk-legal.css

   Companion stylesheet for the natively-rebuilt /terms/ and /privacy/
   pages. Both share one shape, so both share this file.

   The Elementor panel carries every colour, size, radius, border and
   margin it can express. What is left here is only what the controls
   cannot say:

     - the hero's tint, which in the original is an 18% navy wash with a
       4px backdrop blur laid over the paper ground, not a flat colour
     - the eyebrow's inline-flex box and the short gold rule before it
     - the clamp() headline size
     - the run of legal prose, which is one rich-text widget and needs
       the original's .legal-body rules to style the headings, lists and
       paragraphs inside it

   Every rule is scoped to an .mk-* class set in the Elementor panel
   under Advanced > CSS Classes, so editing the copy 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-legal-hero { position: relative; overflow: hidden; }

/* The original hero is transparent: .aurora-bg lies over the paper page
   ground and its ::after paints the wash. Reproducing it on the
   container's own ::before keeps the tint a real translucent layer, so
   the blur behaves the same way rather than being flattened into a hex
   value that would drift if the page ground ever changes. */
.mk-legal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(4, 22, 52, .18);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.mk-legal-hero-inner { position: relative; z-index: 2; }

.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: #062b6f; }
.mk-crumb-sep .elementor-heading-title { opacity: .6; }

/* The eyebrow is an inline-flex row carrying an 18px hairline before the
   label - the logo's flanking rule, in the deep gold used on light
   ground. Elementor's heading widget has no control for either. */
.mk-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mk-eyebrow .elementor-heading-title::before {
  content: "";
  width: 18px;
  height: 1px;
  background: #7d6a2e;
}

/* .hero-compact h1 */
.mk-h-legal .elementor-heading-title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.015em !important;
}
/* .hero .lede - the same 68ch measure the original states, rather than a
   pixel value, so it resolves against the same font and lands identically */
.mk-legal-lede p {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 2. The note card -------------------------------------- */

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

/* ---------- 3. The legal prose ------------------------------------ */

/* One rich-text widget holds the whole run of prose, so the original's
   .legal-body rules are restated here to style what is inside it. The
   margins are deliberately left to collapse exactly as they do in the
   original's block flow: 0.5em under a heading, 1em under a paragraph,
   36px above the next heading, and the larger of the pair between them. */
.mk-legal-prose h2 {
  margin: 36px 0 .5em;
  font-family: Fraunces, "Iowan Old Style", Georgia, serif;
  font-size: 20.8px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #062b6f;
}
.mk-legal-prose p,
.mk-legal-prose li {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15.52px;
  line-height: 1.65;
  color: #33456e;
  overflow-wrap: break-word;
}
.mk-legal-prose p { margin: 0 0 1em; }
/* The reset at the top of this file drops a trailing paragraph's margin,
   which is right inside a card but wrong here: in the original the last
   paragraph's 1em sits between the prose and the section's own padding
   rather than collapsing away, and it is 15px of the section's height. */
.e-con .elementor-widget-text-editor.mk-legal-prose p:last-child { margin-bottom: 1em; }
.mk-legal-prose ul {
  list-style: disc;
  margin: 0 0 1em;
  padding-left: 22px;
}
.mk-legal-prose li { margin-bottom: 6px; }
.mk-legal-prose li > a { display: inline; padding: 0; }
.mk-legal-prose a { color: inherit; }
.mk-legal-prose a:hover { color: #062b6f; }
/* the widget must not add a box of its own around that flow */
.mk-legal-prose .elementor-widget-container { margin: 0; padding: 0; }

/* ---------- 4. Responsive ----------------------------------------- */

@media (max-width: 860px) {
  /* .hero-compact at the narrow end, and the smaller headline step */
  .mk-legal-hero { padding: 62px 0 56px !important; }
  .mk-h-legal .elementor-heading-title { font-size: 2.15rem !important; }
  .mk-legal-lede p { font-size: 1.04rem; }
  .mk-note-card { padding: 18px !important; }
}