/*
Theme Name: Gondin
Theme URI: https://lyon.dev/
Description: Tema desenvolvido para Gondin
Author: Lyon.dev_
Author URI: https://lyon.dev/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   Utilities
   ========================================================================== */

.filter-white { filter: brightness(0) invert(1); }
.text-balance { text-wrap: balance; }

/* ==========================================================================
   Contact Form 7 – Form principal (cf7-wrap)
   CSS Nesting nativo.
   ========================================================================== */

.wpcf7 {
  form.wpcf7-form {
    .cf7-wrap {
      --cf7-gap: 22px;
      --cf7-row-gap: 14px;
      --cf7-field-h: 40px;
      --cf7-check-gap: 18px;
      --cf7-label-gap: 18px;

      font-family: var(--e-global-typography-text-font-family, "Inter");
      font-size: var(--e-global-typography-primary-font-size, 1rem);
      font-weight: var(--e-global-typography-primary-font-weight, 400);
      color: var(--e-global-color-text, #fff);

      /* Reset do markup que o CF7 injeta */
      p { margin: 0; padding: 0; }
      .wpcf7-form-control-wrap { display: block; }

      /* Linha “Quero saber mais sobre” */
      .cf7-interest {
        display: flex;
        align-items: center;
        gap: var(--cf7-label-gap);
        margin-bottom: 16px;

        /* CF7 pode envolver em <p> dependendo do template */
        > p,
        .cf7-interest__options > p {
          display: flex;
          align-items: center;
        }
      }

      .cf7-interest__label {
        color: var(--e-global-color-text, #fff);
        font-style: italic;
        line-height: 1;
        white-space: nowrap;
      }

      .cf7-interest__options {
        display: flex;
        align-items: center;
      }

      /* Checkboxes inline */
      .cf7-check {
        display: flex;
        align-items: center;
        gap: var(--cf7-check-gap);

        @media (width <= 768px){
          flex-wrap: wrap;
        }

        .wpcf7-list-item {
          margin: 0;
          padding: 0;

          > label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            line-height: 1;
            color: var(--e-global-color-text, #fff);
            font-style: italic;
            font-family: var(--e-global-typography-text-font-family, "Inter");
            font-size: 0.95em;
          }
        }

        input[type="checkbox"] {
          width: 16px;
          height: 16px;
          accent-color: var(--e-global-color-secondary, #1EA0BE);
        }
      }

      /* Grid de campos */
      .cf7-row {
        display: flex;
        gap: var(--cf7-gap);
        margin-bottom: var(--cf7-row-gap);

        .cf7-col { flex: 1; }
      }

      /* Inputs */
      input[type="text"],
      input[type="email"],
      input[type="tel"] {
        width: 100%;
        height: var(--cf7-field-h);
        padding: 10px 12px;
        box-sizing: border-box;
        border-radius: 0;
        outline: none;

        background: var(--e-global-color-accent, #E4DCD5);
        border: 1px solid rgba(255,255,255,.25);

        @supports (background: color-mix(in srgb, #000 50%, transparent)) {
          background: color-mix(in srgb, var(--e-global-color-accent, #E4DCD5) 82%, transparent);
          border-color: color-mix(in srgb, var(--e-global-color-text, #fff) 22%, transparent);
        }

        color: var(--e-global-color-primary, #492222);
        font-family: var(--e-global-typography-text-font-family, "Inter");
        font-size: var(--e-global-typography-primary-font-size, 1rem);
        font-weight: var(--e-global-typography-primary-font-weight, 400);

        &::placeholder {
          @supports (color: color-mix(in srgb, #000 50%, transparent)) {
            color: color-mix(in srgb, var(--e-global-color-primary, #492222) 55%, transparent);
          }
          @supports not (color: color-mix(in srgb, #000 50%, transparent)) {
            color: rgba(73,34,34,.55);
          }
          font-style: italic;
        }

        &:focus {
          border-color: var(--e-global-color-secondary, #1EA0BE);
          @supports (box-shadow: 0 0 0 2px color-mix(in srgb, #000 50%, transparent)) {
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--e-global-color-secondary, #1EA0BE) 25%, transparent);
          }
          @supports not (box-shadow: 0 0 0 2px color-mix(in srgb, #000 50%, transparent)) {
            box-shadow: 0 0 0 2px rgba(30,160,190,.25);
          }
        }
      }

      /* Ações / botão: abaixo da coluna da direita (markup atual sem <p>) */
      .cf7-actions {
        margin-top: 12px;
        width: calc(50% - (var(--cf7-gap) / 2));
        margin-left: auto;

        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;

        position: relative; /* referência do spinner */

        /* Fallback caso o CF7 embrulhe em <p> */
        > p {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 10px;
          margin: 0;
        }

        input.wpcf7-submit.cf7-submit {
          -webkit-appearance: none;
          appearance: none;

          width: auto;
          min-width: 120px;
          height: var(--cf7-field-h);
          padding: 0 22px;

          background-color: var(--e-global-color-secondary, #1EA0BE);
          color: var(--e-global-color-text, #FFFFFF);

          border: 0;
          border-radius: 0;

          font-family: var(--e-global-typography-primary-font-family, "Inter");
          font-size: var(--e-global-typography-primary-font-size, 1rem);
          font-weight: 600;
          line-height: 1;

          box-shadow: none;
          cursor: pointer;

          &:hover { filter: brightness(0.95); }
          &:focus {
            outline: none;
            @supports (box-shadow: 0 0 0 2px color-mix(in srgb, #000 50%, transparent)) {
              box-shadow: 0 0 0 2px color-mix(in srgb, var(--e-global-color-secondary, #1EA0BE) 25%, transparent);
            }
            @supports not (box-shadow: 0 0 0 2px color-mix(in srgb, #000 50%, transparent)) {
              box-shadow: 0 0 0 2px rgba(30,160,190,.25);
            }
          }
        }

        /* Spinner ao lado do botão */
        > .wpcf7-spinner,
        > p > .wpcf7-spinner {
          position: absolute;
          margin: 0;
        }
      }

      @media (max-width: 768px) {
        .cf7-interest {
          flex-direction: column;
          align-items: flex-start;

          .cf7-interest__label { white-space: normal; }
        }

        .cf7-row { flex-direction: column; }

        .cf7-actions {
          width: 100%;
          margin-left: 0;
          justify-content: flex-end;
        }
      }
    }
  }
}

/* ==========================================================================
   Contact Form 7 – Mini form (newsletter) (cf7-mini-wrap)
   (mantém fallback flat + nested)
   ========================================================================== */

/* 1) Fallback FLAT (sempre aplicado) */
.wpcf7 form.wpcf7-form .cf7-mini-wrap p{ margin:0; padding:0; }
.wpcf7 form.wpcf7-form .cf7-mini-wrap .cf7-mini{ width:100%; }

.wpcf7 form.wpcf7-form .cf7-mini-wrap .cf7-mini__row,
.wpcf7 form.wpcf7-form .cf7-mini-wrap .cf7-mini > p{
  display:flex;
  align-items:stretch;
  width:100%;
  position:relative;
}

.wpcf7 form.wpcf7-form .cf7-mini-wrap .wpcf7-form-control-wrap{
  display:block;
  flex:1 1 auto;
  min-width:0;
}

.wpcf7 form.wpcf7-form .cf7-mini-wrap input[type="email"].cf7-mini__input{
  -webkit-appearance:none;
  appearance:none;

  width:100%;
  height:44px;
  padding:0 16px;

  background: var(--e-global-color-accent, #E4DCD5);
  border: 1px solid rgba(255,255,255,.18);
  border-right: 0;
  border-radius: 0;

  font-family: var(--e-global-typography-text-font-family, "Inter");
  font-size: var(--e-global-typography-primary-font-size, 1rem);
  font-weight: var(--e-global-typography-primary-font-weight, 400);
  color: var(--e-global-color-primary, #492222);

  outline:none;
  box-shadow:none;
}

.wpcf7 form.wpcf7-form .cf7-mini-wrap input[type="email"].cf7-mini__input::placeholder{
  color: rgba(73,34,34,.55);
  font-style: italic;
}

.wpcf7 form.wpcf7-form .cf7-mini-wrap input[type="email"].cf7-mini__input:focus{
  border-color: var(--e-global-color-secondary, #1EA0BE);
  box-shadow: 0 0 0 2px rgba(30,160,190,.25);
}

.wpcf7 form.wpcf7-form .cf7-mini-wrap input[type="submit"].cf7-mini__btn{
  -webkit-appearance:none;
  appearance:none;

  flex:0 0 150px;
  height:44px;

  background-color: var(--e-global-color-secondary, #1EA0BE);
  color: var(--e-global-color-text, #FFFFFF);

  border: 1px solid rgba(255,255,255,.18);
  border-left: 0;
  border-radius: 0;

  padding: 0 22px;
  margin: 0;

  font-family: var(--e-global-typography-primary-font-family, "Inter");
  font-size: var(--e-global-typography-primary-font-size, 1rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1;

  cursor: pointer;
  box-shadow:none;
  text-decoration:none;
}

.wpcf7 form.wpcf7-form .cf7-mini-wrap input[type="submit"].cf7-mini__btn:hover{ filter: brightness(0.95); }

.wpcf7 form.wpcf7-form .cf7-mini-wrap .wpcf7-spinner{
  position:absolute;
  right:-26px;
  top:50%;
  transform:translateY(-50%);
  margin:0;
}

@media (max-width:520px){
  .wpcf7 form.wpcf7-form .cf7-mini-wrap .cf7-mini__row,
  .wpcf7 form.wpcf7-form .cf7-mini-wrap .cf7-mini > p{ flex-direction:column; }

  .wpcf7 form.wpcf7-form .cf7-mini-wrap input[type="email"].cf7-mini__input{
    border-right: 1px solid rgba(255,255,255,.18);
  }

  .wpcf7 form.wpcf7-form .cf7-mini-wrap input[type="submit"].cf7-mini__btn{
    flex-basis:auto;
    width:100%;
    border-left: 1px solid rgba(255,255,255,.18);
  }

  .wpcf7 form.wpcf7-form .cf7-mini-wrap .wpcf7-spinner{ right: 10px; }
}

/* 2) Versão NESTED (progressive enhancement) */
@supports selector(&) {
  .wpcf7 {
    form.wpcf7-form {
      .cf7-mini-wrap {
        p { margin: 0; padding: 0; }

        .cf7-mini { width: 100%; }

        .cf7-mini__row,
        .cf7-mini > p {
          display: flex;
          align-items: stretch;
          width: 100%;
          position: relative;
        }

        .wpcf7-form-control-wrap {
          display: block;
          flex: 1 1 auto;
          min-width: 0;
        }

        input[type="email"].cf7-mini__input {
          -webkit-appearance: none;
          appearance: none;

          width: 100%;
          height: 44px;
          padding: 0 16px;

          background: var(--e-global-color-accent, #E4DCD5);
          border: 1px solid rgba(255,255,255,.18);
          border-right: 0;
          border-radius: 0;

          font-family: var(--e-global-typography-text-font-family, "Inter");
          font-size: var(--e-global-typography-primary-font-size, 1rem);
          font-weight: var(--e-global-typography-primary-font-weight, 400);
          color: var(--e-global-color-primary, #492222);

          outline: none;
          box-shadow: none;

          &::placeholder {
            color: rgba(73,34,34,.55);
            font-style: italic;
          }

          &:focus {
            border-color: var(--e-global-color-secondary, #1EA0BE);
            box-shadow: 0 0 0 2px rgba(30,160,190,.25);
          }
        }

        input[type="submit"].cf7-mini__btn {
          -webkit-appearance: none;
          appearance: none;

          flex: 0 0 150px;
          height: 44px;

          background-color: var(--e-global-color-secondary, #1EA0BE);
          color: var(--e-global-color-text, #FFFFFF);

          border: 1px solid rgba(255,255,255,.18);
          border-left: 0;
          border-radius: 0;

          padding: 0 22px;
          margin: 0;

          font-family: var(--e-global-typography-primary-font-family, "Inter");
          font-size: var(--e-global-typography-primary-font-size, 1rem);
          font-weight: 600;
          font-style: italic;
          line-height: 1;

          cursor: pointer;
          box-shadow: none;
          text-decoration: none;

          &:hover { filter: brightness(0.95); }
        }

        .wpcf7-spinner {
          position: absolute;
          right: -26px;
          top: 50%;
          transform: translateY(-50%);
          margin: 0;
        }

        @media (max-width: 520px) {
          .cf7-mini__row,
          .cf7-mini > p { flex-direction: column; }

          input[type="email"].cf7-mini__input { border-right: 1px solid rgba(255,255,255,.18); }

          input[type="submit"].cf7-mini__btn {
            flex-basis: auto;
            width: 100%;
            border-left: 1px solid rgba(255,255,255,.18);
          }

          .wpcf7-spinner { right: 10px; }
        }
      }
    }
  }
}

/* ==========================================================================
   CF7 – Mensagens e validação (funciona nos 2 forms)
   - some quando não existe mensagem
   - cores por status (sent/invalid/failed/spam)
   ========================================================================== */

.wpcf7 form.wpcf7-form {
  /* por padrão some; só aparece em estados */
  .wpcf7-response-output {
    display: none;

    margin: 16px 0 0;
    padding: 12px 14px;

    font-family: var(--e-global-typography-text-font-family, "Inter");
    font-size: var(--e-global-typography-primary-font-size, 1rem);
    line-height: 1.35;

    background: transparent;
    color: var(--e-global-color-text, #fff);
    border: 1px solid rgba(255,255,255,.35);
  }

  &.sent .wpcf7-response-output,
  &.invalid .wpcf7-response-output,
  &.failed .wpcf7-response-output,
  &.aborted .wpcf7-response-output,
  &.spam .wpcf7-response-output {
    display: block;
  }

  &.sent .wpcf7-response-output {
    border-color: var(--e-global-color-secondary, #1EA0BE);
    @supports (background: color-mix(in srgb, #000 50%, transparent)) {
      background: color-mix(in srgb, var(--e-global-color-secondary, #1EA0BE) 18%, transparent);
    }
    @supports not (background: color-mix(in srgb, #000 50%, transparent)) {
      background: rgba(30,160,190,.18);
    }
  }

  &.invalid .wpcf7-response-output,
  &.failed .wpcf7-response-output,
  &.aborted .wpcf7-response-output {
    border-color: #FF5A5F;
    @supports (background: color-mix(in srgb, #000 50%, transparent)) {
      background: color-mix(in srgb, #FF5A5F 16%, transparent);
    }
    @supports not (background: color-mix(in srgb, #000 50%, transparent)) {
      background: rgba(255,90,95,.16);
    }
  }

  &.spam .wpcf7-response-output {
    border-color: #F6C343;
    @supports (background: color-mix(in srgb, #000 50%, transparent)) {
      background: color-mix(in srgb, #F6C343 16%, transparent);
    }
    @supports not (background: color-mix(in srgb, #000 50%, transparent)) {
      background: rgba(246,195,67,.16);
    }
  }

  /* Erro por campo */
  .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 0.95em;
    line-height: 1.2;
    color: #FF5A5F;
  }

  /* Campo inválido (classe no próprio input) */
  .wpcf7-not-valid {
    border-color: #FF5A5F;
    @supports (box-shadow: 0 0 0 2px color-mix(in srgb, #000 50%, transparent)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, #FF5A5F 20%, transparent);
    }
    @supports not (box-shadow: 0 0 0 2px color-mix(in srgb, #000 50%, transparent)) {
      box-shadow: 0 0 0 2px rgba(255,90,95,.20);
    }
  }
}