/* ==========================================================================
 *  Magic Data — Contact Us + Footer
 *
 *  Loaded globally on all pages/posts via functions.php. Self-contained;
 *  deliberately does NOT depend on magicdata-home.css variables — instead
 *  declares its own small token set so it works on explorer, single-dataset
 *  and any regular WP page/post.
 *
 *  Prefix: md-contact__*, md-footer__*
 * ======================================================================== */

/* ============================  Tokens  ============================ */
:root {
  --mdcf-bg: #000000;
  --mdcf-text: #f4f1f7;
  --mdcf-muted: rgba(244, 241, 247, 0.62);
  --mdcf-muted-2: rgba(244, 241, 247, 0.42);
  --mdcf-border: rgba(255, 255, 255, 0.14);
  --mdcf-border-soft: rgba(255, 255, 255, 0.08);
  --mdcf-accent: #c4b5fd;
  --mdcf-accent-strong: #a78bfa;
  --mdcf-accent-rgb: 196, 181, 253;
  --mdcf-fire: rgb(255, 131, 127);
  --mdcf-fire-rgb: 255, 131, 127;
  --mdcf-radius-sm: 8px;
  --mdcf-radius-md: 12px;
  --mdcf-radius-pill: 999px;
  --mdcf-font-display: 'Ubuntu', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mdcf-font-body: 'Nunito Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --mdcf-shell: 1280px;
  --mdcf-pad-x: 32px;
}

/* ====================================================================
   CONTACT US SECTION
   ==================================================================== */

.md-contact {
  position: relative;
  overflow: hidden;
  padding: 100px 0 80px;
  background: var(--mdcf-bg);
  font-family: var(--mdcf-font-body);
  color: var(--mdcf-text);
}

/* ----------  Video background composite  ---------- */

.md-contact__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/*
 * Video composite positioning & edge-fade mask.
 *
 * Key values for future refinement:
 *   left   → horizontal position (12% = slightly right of left edge)
 *   top    → vertical anchor (50% + translateY(-50%) = vertically centred)
 *   width  → overall composite size (34% of section width)
 *   opacity → master transparency of the whole composite
 *
 * The mask uses three multiplied layers (mask-composite: intersect)
 * so all three must be opaque for a pixel to show:
 *   1. Top ↔ Bottom fade   (linear-gradient to bottom)
 *   2. Right-edge fade     (linear-gradient to left)
 *
 * Adjust the % stops to widen/narrow each fade band.
 */
.md-contact__video-wrap {
  position: absolute;
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: 28%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  opacity: 0.50;

  -webkit-mask-image:
    linear-gradient(to bottom, transparent 8%, black 12%, black 82%, transparent 94%),
    linear-gradient(to left,   transparent 8%, black 15%);
  -webkit-mask-composite: destination-in;

  mask-image:
    linear-gradient(to bottom, transparent 8%, black 12%, black 82%, transparent 94%),
    linear-gradient(to left,   transparent 8%, black 15%);
  mask-composite: intersect;
}

.md-contact__video {
  position: absolute;
  object-fit: contain;
}

.md-contact__video--fire {
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  z-index: 1;
}

/*
 * Smoke/sparks overlay — smaller and centred on the fire.
 *
 * Refinement knobs:
 *   top  → vertical offset (lower % = higher up;  current 8%)
 *   left → horizontal offset (current 20% centres it on fire)
 *   width / height → size relative to the fire layer
 */
.md-contact__video--sparks {
  width: 60%;
  height: 60%;
  top: 8%;
  left: 20%;
  mix-blend-mode: screen;
  z-index: 2;
}

/* ----------  Content shell  ---------- */

.md-contact__shell {
  position: relative;
  z-index: 1;
  max-width: var(--mdcf-shell);
  margin: 0 auto;
  padding: 0 var(--mdcf-pad-x);
}

.md-contact__body {
  margin: 0 auto;
  max-width: 54%;
  width: 100%;
}

.md-contact__title {
  font-family: var(--mdcf-font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  /* Figma picker: #FF8FC5 @ 0% → #DA2F5B @ 81% (horizontal). */
  background: linear-gradient(90deg, #ff8fc5 0%, #da2f5b 30%, #da2f5b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.md-contact__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mdcf-muted);
  margin: 0 0 32px;
  max-width: 520px;
}

/* ----------  Form  ---------- */

.md-contact__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.md-contact__input,
.md-contact__textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--mdcf-border);
  border-radius: var(--mdcf-radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mdcf-text);
  font-family: var(--mdcf-font-body);
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.md-contact__input::placeholder,
.md-contact__textarea::placeholder {
  color: var(--mdcf-muted-2);
}

.md-contact__input:focus,
.md-contact__textarea:focus {
  border-color: rgba(var(--mdcf-accent-rgb), 0.5);
  background: rgba(255, 255, 255, 0.06);
}

/* Prevent browser autofill from overriding the dark background */
.md-contact__input:-webkit-autofill,
.md-contact__input:-webkit-autofill:hover,
.md-contact__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mdcf-text);
  -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset;
  box-shadow: 0 0 0 1000px #0d0d0d inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--mdcf-text);
}

.md-contact__textarea {
  resize: vertical;
  min-height: 110px;
}

.md-contact__submit {
  align-self: flex-start;
  padding: 12px 32px;
  border: 1px solid var(--mdcf-border);
  border-radius: var(--mdcf-radius-pill);
  background: transparent;
  color: var(--mdcf-text);
  font-family: var(--mdcf-font-body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.md-contact__submit:hover,
.md-contact__submit:focus-visible {
  border-color: rgba(var(--mdcf-accent-rgb), 0.6);
  background: rgba(var(--mdcf-accent-rgb), 0.1);
}

/* ====================================================================
   FOOTER
   ==================================================================== */

.md-footer {
  background: var(--mdcf-bg);
  font-family: var(--mdcf-font-body);
  color: var(--mdcf-text);
  padding: 72px 0 0;
  border-top: 1px solid var(--mdcf-border-soft);
}

.md-footer__shell {
  max-width: var(--mdcf-shell);
  margin: 0 auto;
  padding: 0 var(--mdcf-pad-x);
}

/* ----------  Grid  ---------- */

.md-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 56px;
}

/* ----------  Brand column  ---------- */

.md-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.md-footer__logo {
  display: inline-block;
  text-decoration: none;
}

.md-footer__logo svg {
  display: block;
  height: 20px;
  width: auto;
}

.md-footer__tagline {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--mdcf-muted-2);
  margin: 0;
  max-width: 260px;
}

/* ----------  Link columns  ---------- */

.md-footer__col-title {
  font-family: var(--mdcf-font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
  color: var(--mdcf-text);
}

.md-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.md-footer__links li {
  margin: 0;
  padding: 0;
}

.md-footer__links a,
.md-footer__links li {
  font-size: 14px;
  color: var(--mdcf-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.md-footer__links a:hover,
.md-footer__links a:focus-visible {
  color: var(--mdcf-text);
}

.md-footer__links--contact a {
  color: var(--mdcf-accent);
}

.md-footer__links--contact a:hover {
  color: var(--mdcf-accent-strong);
}

/* ----------  Social icons  ---------- */

.md-footer__social {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.md-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--mdcf-muted);
  transition: color 0.15s ease, background 0.15s ease;
}

.md-footer__social a:hover,
.md-footer__social a:focus-visible {
  color: var(--mdcf-text);
  background: rgba(255, 255, 255, 0.06);
}

/* ----------  Bottom bar  ---------- */

.md-footer__bottom {
  border-top: 1px solid var(--mdcf-border-soft);
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  text-align: center;
}

.md-footer__bottom-text {
  font-size: 12px;
  color: var(--mdcf-muted-2);
  letter-spacing: 0.02em;
}

.md-footer__bottom-text a {
  color: var(--mdcf-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.md-footer__bottom-text a:hover {
  color: var(--mdcf-text);
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */


   @media (min-width: 1500px) {

    .md-contact__video-wrap {
      left: 12%;
    }
    }

@media (max-width: 960px) {
  .md-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 48px;
  }

  .md-footer__brand {
    grid-column: 1 / -1;
  }

  .md-contact__body {
    max-width: 70%;
  }

  .md-contact__video-wrap {
    left: -7%;
    width: 40%;
    opacity: 0.35;
  }
}

@media (max-width: 720px) {
  .md-contact {
    padding: 64px 0 48px;
  }

  .md-contact__shell {
    padding: 0 20px;
  }

  .md-contact__body {
    max-width: 100%;
  }

  .md-contact__video-wrap {
    left: clamp(120px,12%,120px);
    width: clamp(150px,35%,150px);
    top: clamp(-10px,-10%,-10px);
    transform: none;
    opacity: 0.42;
  }

  .md-footer__shell {
    padding: 0 20px;
  }

  .md-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .md-footer__brand {
    grid-column: auto;
  }

  .md-footer {
    padding-top: 48px;
  }

  .md-footer__bottom {
    flex-direction: column;
    gap: 6px;
  }
}