/* ============================================================
   FOOTER
   Figma 8055:61937 — black ground, gutter --margin,
   padding 60 top / 30 bottom, gap 40, hairline rule,
   contact 16, newsletter label 12, input 240x44 radius 44.
   ============================================================ */

.masaar-footer {
  background: var(--masaar-black);
  color: var(--masaar-white);
  padding-block: 40px 30px;
  overflow: clip;
}

.masaar-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.masaar-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  align-items: flex-start;
}

.masaar-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.masaar-footer__logo {
  inline-size: 123px;
  block-size: auto;
}

.masaar-footer__contact {
  display: flex;
  /* Stacked below desktop: the mobile design puts each number on its own
     line with its icon. Side by side they filled the full 390 width and read
     as one run. The desktop master keeps them inline -- see the 1200 block. */
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.masaar-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--masaar-white);
  font-size: var(--fs-body-m);
  line-height: var(--lh-tight);
  text-decoration: none;
}

.masaar-footer__link:hover span,
.masaar-footer__link:focus-visible span {
  text-decoration: underline;
}

.masaar-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.masaar-footer__social img {
  inline-size: 35px;
  block-size: 34px;
}

/* --- Newsletter --------------------------------------------- */

.masaar-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.masaar-footer__signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.masaar-footer__input {
  inline-size: 240px;
  max-inline-size: 100%;
  block-size: var(--control-height);
  padding-inline: var(--space-20);
  padding-block: 13px;
  border: 1px solid var(--masaar-white);
  border-radius: 44px;
  background: transparent;
  color: var(--masaar-white);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
}

.masaar-footer__input::placeholder {
  color: var(--masaar-white);
  opacity: 0.8;
}

/* --- Rule + legal ------------------------------------------- */

.masaar-footer__rule {
  inline-size: 100%;
  block-size: 0;
  margin: 0;
  border: 0;
  border-block-start: 1px solid rgba(255, 255, 255, 0.25);
}

.masaar-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  font-size: var(--fs-cta);
  line-height: var(--lh-cta);
}

.masaar-footer__legal-links {
  display: flex;
  /* Stacked below desktop: the mobile design puts Terms and Privacy on their
     own lines (M3ID-22). The 1200 block returns them to a row. */
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.masaar-footer__legal a {
  color: var(--masaar-white);
  text-decoration: none;
}

.masaar-footer__legal a:hover,
.masaar-footer__legal a:focus-visible {
  text-decoration: underline;
}

.masaar-footer__copyright {
  color: var(--masaar-white);
}

@media (min-width: 1200px) {
  .masaar-footer__legal-links {
    flex-direction: row;
    align-items: center;
  }

  .masaar-footer__contact {
    flex-direction: row;
    align-items: center;
  }

  .masaar-footer {
    padding-block: 60px 30px;
  }

  .masaar-footer__inner {
    gap: var(--space-40);
  }

  .masaar-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .masaar-footer__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .masaar-footer__copyright {
    text-align: end;
  }
}

/* --- Shared signup form (Theme Settings shortcode) ----------- *
   CF7 wraps every field in its own <p>/<span>, so the flex row has to be
   re-established inside the wrapper and CF7's input and submit mapped onto the
   pill styling above. Only applies where the shared form is rendered; the
   fallback markup already carries the classes directly. */

/* The flex has to sit on .arada-footer-newsletter, not on the <form>: CF7
   wraps everything in a single .mc-field-group, so a flex on the form has one
   child and the label, input and submit two levels below it never become flex
   items. Without that the three sat flush against each other -- the label
   touching the input's border and the button touching its end (M3ID-22). */
.masaar-footer__signup--shared .wpcf7-form,
.masaar-footer__signup--shared form,
.masaar-footer__signup--shared .arada-footer-newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

/* The label takes its own line above the field, as the design shows.

   Descendant, not `>`: the label's DOM parent is a <p> whose box is removed by
   display:contents above, so a child combinator never matches it.

   position: static undoes the client's floating-label treatment
   (absolute, top:-22px), which pinned the label flush to the field's top
   border. In flow it becomes a full-width flex item and the row gap applies. */
.masaar-footer__signup--shared .arada-footer-newsletter label {
  position: static;
  flex: 1 0 100%;
  margin: 0;
}

/* The field takes the room left over; the button keeps its own width. */
/* Sized to the field, not greedy. flex:1 1 160px made the wrap grow to fill
   the row while the input inside stayed 240px, leaving ~160px of empty wrap
   between the field and the button -- the oversized gap Stefanny reported
   (M3ID-16). */
.masaar-footer__signup--shared .wpcf7-form-control-wrap {
  flex: 0 1 auto;
  min-inline-size: 0;
}

.masaar-footer__signup--shared input[type="submit"] {
  flex: none;
}

/* CF7 parks a spinner after the submit; left in flow it wrapped onto its own
   line and pushed the socials down. Taken out of flow -- with the wrapper
   made a containing block so it cannot escape to the page. */
.masaar-footer__signup--shared .arada-footer-newsletter {
  position: relative;
}

.masaar-footer__signup--shared .wpcf7-spinner {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
}

.masaar-footer__signup--shared p {
  margin: 0;
  display: contents;
}

.masaar-footer__signup--shared input[type="email"],
.masaar-footer__signup--shared input[type="text"] {
  inline-size: 240px;
  max-inline-size: 100%;
  block-size: var(--control-height);
  padding-inline: var(--space-20);
  padding-block: 13px;
  border: 1px solid var(--masaar-white);
  border-radius: 44px;
  background: transparent;
  color: var(--masaar-white);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
}

.masaar-footer__signup--shared input::placeholder {
  color: var(--masaar-white);
  opacity: 0.8;
}

.masaar-footer__signup--shared input[type="submit"] {
  min-block-size: var(--control-height);
  padding-inline: var(--space-24);
  border: 0;
  border-radius: 44px;
  background: var(--masaar-white);
  color: var(--masaar-black);
  font-family: var(--font-body);
  font-size: var(--fs-cta);
  cursor: pointer;
}

/* CF7's spinner sits inline and pushes the row wider once submitted. */
.masaar-footer__signup--shared .wpcf7-spinner {
  margin-inline-start: var(--space-8);
}