/* by osmy — Newsletter.
   Brevo shortcode: [sibwp_form id=2]
   Requiere tokens.css.
*/

body.os-site .os-newsletter {
  background: var(--os-cream);
}


/* =========================================================
   LAYOUT
   ========================================================= */

body.os-site .os-newsletter__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(22rem, 0.8fr);

  gap: clamp(
    var(--os-space-7),
    7vw,
    var(--os-space-10)
  );

  align-items: center;
}


/* =========================================================
   CONTENT
   ========================================================= */

body.os-site .os-newsletter__content {
  max-width: 37rem;
}

body.os-site .os-newsletter__content h2 {
  max-width: 12ch;

  margin: 0 0 var(--os-space-5);
}

body.os-site .os-newsletter__content h2 em {
  color: var(--os-wine);

  font-style: italic;
  font-weight: var(--os-weight-regular);
}

body.os-site .os-newsletter__content p {
  max-width: 52ch;

  margin: 0;

  color: var(--os-color-text-secondary);

  font-size: var(--os-type-lead);
  line-height: 1.55;
}


/* =========================================================
   BREVO WRAPPER
   ========================================================= */

body.os-site .os-newsletter__form {
  width: 100%;
  min-width: 0;
}


/*
 * Brevo puede generar diferentes wrappers dependiendo
 * de la versión del plugin.
 *
 * No modificamos sus clases en el HTML.
 * Solamente controlamos su presentación desde este scope.
 */

body.os-site .os-newsletter__form form {
  width: 100%;

  margin: 0;
  padding: 0;
}


/* =========================================================
   BREVO LABELS
   ========================================================= */

body.os-site .os-newsletter__form label {
  display: block;

  margin: 0 0 var(--os-space-2);

  color: var(--os-ink);

  font-family: var(--os-font-body);
  font-size: var(--os-type-small);
  font-weight: var(--os-weight-medium);
}


/* =========================================================
   EMAIL FIELD
   ========================================================= */

body.os-site .os-newsletter__form input[type="email"] {
  display: block;

  width: 100%;
  min-height: 3.5rem;

  margin: 0;

  padding:
    0.9rem
    1rem;

  border: 1px solid rgb(29 26 24 / 32%);
  border-radius: var(--os-radius-sm);

  outline: none;

  background: var(--os-paper);

  color: var(--os-ink);

  font-family: var(--os-font-body);
  font-size: 1rem;
  font-weight: var(--os-weight-regular);
  line-height: 1.2;

  transition:
    border-color var(--os-motion-fast) var(--os-ease),
    box-shadow var(--os-motion-fast) var(--os-ease);
}

body.os-site .os-newsletter__form input[type="email"]::placeholder {
  color: var(--os-color-text-muted);

  opacity: 0.75;
}

body.os-site .os-newsletter__form input[type="email"]:focus {
  border-color: var(--os-wine);

  box-shadow: var(--os-focus-ring);
}


/* =========================================================
   BUTTON
   ========================================================= */

/*
 * Incluimos varios selectores porque Brevo puede renderizar
 * el submit como input o button según la configuración.
 */

body.os-site .os-newsletter__form .sib-default-btn,
body.os-site .os-newsletter__form button[type="submit"],
body.os-site .os-newsletter__form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 3.5rem;

  margin-top: var(--os-space-3);

  padding:
    0.9rem
    1.25rem;

  border: 1px solid var(--os-ink);
  border-radius: var(--os-radius-sm);

  cursor: pointer;

  background: var(--os-ink);

  color: var(--os-paper);

  font-family: var(--os-font-body);
  font-size: var(--os-type-button);
  font-weight: var(--os-weight-bold);
  line-height: 1.2;

  letter-spacing: 0.04em;

  transition:
    background-color var(--os-motion-fast) var(--os-ease),
    border-color var(--os-motion-fast) var(--os-ease),
    color var(--os-motion-fast) var(--os-ease);
}

body.os-site .os-newsletter__form .sib-default-btn:hover,
body.os-site .os-newsletter__form button[type="submit"]:hover,
body.os-site .os-newsletter__form input[type="submit"]:hover {
  border-color: var(--os-wine);

  background: var(--os-wine);

  color: var(--os-paper);
}


/* =========================================================
   BREVO FIELD CONTAINERS
   ========================================================= */

body.os-site .os-newsletter__form p,
body.os-site .os-newsletter__form .sib-email-area,
body.os-site .os-newsletter__form .sib-form-block {
  margin-top: 0;
}


/* =========================================================
   COMPLIANCE / CONSENT
   ========================================================= */

body.os-site .os-newsletter__form input[type="checkbox"] {
  width: 1rem;
  height: 1rem;

  margin: 0.15rem var(--os-space-2) 0 0;

  accent-color: var(--os-wine);
}

body.os-site .os-newsletter__form input[type="checkbox"] + label,
body.os-site .os-newsletter__form .sib-multi-lists,
body.os-site .os-newsletter__form .sib_opt_in {
  color: var(--os-color-text-muted);

  font-size: 0.78rem;
  line-height: 1.45;
}


/* =========================================================
   SUCCESS / ERROR MESSAGES
   ========================================================= */

body.os-site .os-newsletter__form .sib_msg_disp,
body.os-site .os-newsletter__form .sib-alert-message,
body.os-site .os-newsletter__form [class*="success"],
body.os-site .os-newsletter__form [class*="error"] {
  margin-top: var(--os-space-3);

  padding: 0;

  border: 0;

  background: transparent;

  font-family: var(--os-font-body);
  font-size: var(--os-type-small);
  line-height: 1.5;
}

body.os-site .os-newsletter__form .sib_msg_disp {
  color: var(--os-wine);
}


/* =========================================================
   PRIVACY NOTE
   ========================================================= */

body.os-site .os-newsletter__privacy {
  margin: var(--os-space-3) 0 0 !important;

  color: var(--os-color-text-muted);

  font-family: var(--os-font-body);
  font-size: 0.75rem;
  line-height: 1.45;
}


/* =========================================================
   REMOVE COMMON PLUGIN SPACING
   ========================================================= */

body.os-site .os-newsletter__form br:first-child,
body.os-site .os-newsletter__form > p:empty {
  display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  body.os-site .os-newsletter__inner {
    grid-template-columns: 1fr;

    gap: var(--os-space-7);
  }

  body.os-site .os-newsletter__content {
    max-width: none;
  }

  body.os-site .os-newsletter__content h2 {
    max-width: 14ch;
  }

}