/**
 * SEJA FIDC — design refresh overlay
 * Loaded after app.css. Keeps brand colors; modernizes spacing, type, forms.
 * Version: 1.1.4
 */

:root {
  --seja-primary: #29567f;
  --seja-secondary: #a27c28;
  --seja-dark: #404041;
  --seja-muted: #6b7280;
  --seja-border: #d1d5db;
  --seja-surface: #ffffff;
  --seja-soft: #f4f7fa;
  --seja-focus: rgba(41, 86, 127, 0.22);
  --seja-radius: 12px;
  --seja-radius-sm: 8px;
  --seja-control-h: 44px;
  --seja-space: 8px;
  --seja-shadow: 0 8px 30px rgba(41, 86, 127, 0.08);
  --seja-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  /* Total height of header1 + header2; JS measures and overrides */
  --seja-header-stack: 120px;
  --seja-nav-sticky: 80px;
}

/* ---------- Typography & base rhythm ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--seja-dark);
}

main h1,
.formulario h1,
.indexForHeader h1 {
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 700;
}

main h2 {
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 0.35em;
}

main h3 {
  letter-spacing: -0.01em;
  font-weight: 600;
  line-height: 1.3;
}

main p,
.sectionProducts p {
  line-height: 1.65;
}

/*
 * Native hash scroll-margin was leaving ~30% of the hero visible.
 * JS scroll-past-hero handles anchors; keep margin 0 so CSS doesn't fight it.
 */
section#produtos,
section#investimento,
section#contato {
  scroll-margin-top: 0;
}

/* Less dead white under the jump target */
@media (min-width: 960px) {
  #produtos.padding-top-120,
  section#produtos .padding-top-120,
  #produtos > .container > .padding-top-120,
  #produtos .text-primary.padding-top-120 {
    padding-top: 2.75rem !important;
  }

  #produtos .sectionProducts.margin-top-60 {
    margin-top: 1.75rem !important;
  }
}

/* ---------- Header: thin TOP row only; menu row = original theme size ---------- */
@media (min-width: 960px) {
  /* Contact strip (email / phone / LinkedIn) — as thin as possible */
  header .header1 {
    border-bottom: 1px solid rgba(191, 191, 191, 0.35);
    font-size: 0.7rem;
    line-height: 1.1;
  }

  header .header1 .container > .pt-4,
  header .header1 .pt-4,
  header .header1 .bg-white {
    padding-top: 0.08rem !important;
    padding-bottom: 0.06rem !important;
  }

  header .header1 .gap-74 {
    gap: 0.85rem !important;
  }

  header .header1 .text-paragraphsAndItems,
  header .header1 span {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
  }

  header .header1 svg,
  header .header1 i {
    font-size: 0.68rem !important;
  }

  header .header1 a,
  header .header1 .d-flex {
    line-height: 1.1 !important;
  }

  /* Kill dead space under contact strip (theme uses pb-4 on header1) */
  header .header1.pb-4,
  header .header1 {
    padding-bottom: 0 !important;
  }

  /*
   * Main nav row (logo, menus, Cadastro, Portal):
   * keep logo/link/button sizes; only remove TOP padding so it sits flush.
   */
  header .header2 {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--seja-shadow-sm);
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.97) !important;
  }

  header .header2.py-4,
  header .header2 {
    padding-top: 0 !important;
    /* leave padding-bottom from theme py-4 for breathing room under logo */
  }

  header .header2 .navbar-nav .nav-link {
    font-weight: 500;
    transition: color 0.15s ease;
  }

  header .header2 .navbar-nav .nav-link:hover,
  header .header2 .navbar-nav .nav-link:focus {
    color: var(--seja-primary) !important;
  }

  /* HQ logo: keep sharp on retina; natural aspect from srcset assets */
  header .seja-logo--header {
    display: block;
    height: 40px;
    width: auto;
    max-height: 40px;
    image-rendering: auto;
    -webkit-user-drag: none;
  }
}

/* Logo also outside media query for mobile brand */
.seja-logo--mobile {
  display: block;
  height: 33px;
  width: auto;
  max-height: 33px;
}

/* Comparison table SEJA column — HQ white logo on navy */
.seja-compare-logo {
  margin: 0;
  line-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seja-logo--compare {
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}

@media (min-width: 992px) {
  .seja-logo--compare {
    height: 52px;
    max-height: 56px;
  }
}

.headElement .seja-compare-logo img {
  filter: none;
}

/* Footer agency credit — similar footprint to old S3 mark (~38×34) */
.seja-footer-agency {
  margin: 0;
  line-height: 0;
}

.seja-footer-agency-logo {
  display: block;
  height: 34px;
  width: auto;
  max-height: 34px;
  object-fit: contain;
}

/*
 * Hero: fill ONLY remaining viewport.
 * Class is desktop-only in markup (d-none d-lg-block) — safe without media query.
 * Overrides app.css: min-height: 100vh; height: calc(100vh - 187px);
 */
.indexForHeader {
  min-height: 0 !important;
  height: calc(100dvh - var(--seja-header-stack)) !important;
  max-height: calc(100dvh - var(--seja-header-stack)) !important;
  overflow: hidden !important;
  background-position: center center !important;
  background-size: cover !important;
}

.indexForHeader > .container {
  height: 100% !important;
  max-height: 100%;
}

.indexForHeader > .container > .row {
  height: 100% !important;
  min-height: 0;
  align-items: center !important;
}

.indexForHeader h1 {
  font-size: clamp(1.65rem, 3vw, 2.6rem) !important;
  margin-bottom: 0.35rem;
}

.indexForHeader .formulario {
  max-width: 22rem;
  width: 100% !important;
}

.indexForHeader .formulario.w-75 {
  width: min(22rem, 100%) !important;
}

.indexForHeader .arrowDown {
  bottom: 0.55rem !important;
}

.indexForHeader .arrowDown .font-27 {
  font-size: 1.25rem !important;
}

/* ---------- Hero form card ---------- */
.formulario.bg-primary.rounded,
.formulario .bg-primary.rounded,
.indexForHeader .formulario {
  border-radius: var(--seja-radius) !important;
  box-shadow: var(--seja-shadow);
  overflow: hidden;
}

.formulario > .bg-primary.px-4,
.formulario .bg-primary.px-4.d-flex {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  gap: 0.5rem !important;
}

.formulario h4 {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.formulario .font-30 {
  font-size: 1.15rem !important;
}

.formulario .bg-white.rounded {
  border-radius: 0 0 var(--seja-radius) var(--seja-radius) !important;
}

/* ---------- Product cards ---------- */
.sectionProducts .border-15 {
  border-radius: 16px !important;
  box-shadow: var(--seja-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}

.sectionProducts .col-lg-4:hover .border-15 {
  transform: translateY(-3px);
  box-shadow: var(--seja-shadow);
}

.sectionProducts h3 {
  font-size: 1.25rem;
}

.sectionProducts a.text-white {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  opacity: 0.95;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 1px;
}

.sectionProducts a.text-white:hover {
  opacity: 1;
  border-bottom-color: #fff;
}

/* Slightly less top padding on Produtos so scroll-snap feels snappier */
@media (min-width: 992px) {
  .sectionProducts.margin-top-60 {
    margin-top: 2.5rem !important;
  }

  #produtos .padding-top-120 {
    padding-top: 4.5rem !important;
  }
}

/* ---------- CTAs (keep gold secondary) ---------- */
a.bg-secondary.rounded-pill,
.btn.btn-secondary,
.wpcf7-submit.btn-secondary {
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  box-shadow: 0 2px 8px rgba(162, 124, 40, 0.28);
}

a.bg-secondary.rounded-pill:hover,
.btn.btn-secondary:hover,
.wpcf7-submit.btn-secondary:hover {
  box-shadow: 0 4px 14px rgba(162, 124, 40, 0.35);
  transform: translateY(-1px);
}

a.bg-secondary.rounded-pill {
  display: inline-block;
  padding: 0.65rem 1.6rem !important;
}

/* ---------- Contact Form 7 — base (contact / jobs) ---------- */
.seja-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}

.seja-form--contact {
  padding: 0.5rem 0 0.25rem;
  max-width: 32rem;
  width: 100%;
  gap: 1.1rem;
}

.seja-form--jobs {
  padding: 0.5rem 0 1rem;
  gap: 1rem;
}

.seja-form__row {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 992px) {
  .seja-form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.seja-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem; /* clear space between label and input */
  width: 100%;
  margin: 0;
  text-align: left;
}

.seja-field label {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--seja-dark);
  letter-spacing: 0.02em;
  margin: 0 0 0.1rem;
  line-height: 1.25;
}

.seja-field .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Default controls */
.seja-form .seja-input,
.seja-form .seja-select,
.seja-form input[type="text"],
.seja-form input[type="email"],
.seja-form input[type="tel"],
.seja-form input[type="number"],
.seja-form input[type="date"],
.seja-form input[type="file"],
.seja-form select,
.seja-form .wpcf7-text,
.seja-form .wpcf7-email,
.seja-form .wpcf7-tel,
.seja-form .wpcf7-number,
.seja-form .wpcf7-date,
.seja-form .wpcf7-select,
.wpcf7 .seja-input,
.wpcf7 input.wpcf7-text,
.wpcf7 input.wpcf7-email,
.wpcf7 input.wpcf7-tel,
.wpcf7 input.wpcf7-number,
.wpcf7 input.wpcf7-date,
.wpcf7 select.wpcf7-select {
  width: 100% !important;
  min-height: var(--seja-control-h) !important;
  height: auto !important;
  padding: 0.55rem 0.85rem !important;
  border: 1px solid var(--seja-border) !important;
  border-radius: var(--seja-radius-sm) !important;
  background-color: var(--seja-surface) !important;
  color: var(--seja-dark) !important;
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

.seja-form textarea,
.seja-form .seja-textarea,
.seja-form .wpcf7-textarea,
.wpcf7 textarea.wpcf7-textarea {
  width: 100% !important;
  min-height: 100px !important;
  padding: 0.65rem 0.85rem !important;
  border: 1px solid var(--seja-border) !important;
  border-radius: var(--seja-radius-sm) !important;
  background-color: var(--seja-surface) !important;
  color: var(--seja-dark) !important;
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  resize: vertical;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

.seja-form input:hover,
.seja-form select:hover,
.seja-form textarea:hover,
.wpcf7 input:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover {
  border-color: #9ca3af !important;
}

.seja-form input:focus,
.seja-form select:focus,
.seja-form textarea:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none !important;
  border-color: var(--seja-primary) !important;
  box-shadow: 0 0 0 3px var(--seja-focus) !important;
}

.seja-form input[type="file"] {
  padding: 0.45rem 0.65rem !important;
  font-size: 0.85rem !important;
}

.seja-form .seja-submit,
.seja-form input.wpcf7-submit,
.wpcf7 input.wpcf7-submit {
  width: 100% !important;
  min-height: var(--seja-control-h) !important;
  margin-top: 0.15rem !important;
  padding: 0.55rem 1.1rem !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.seja-form--jobs .seja-submit,
.seja-form--jobs input.wpcf7-submit {
  width: auto !important;
  min-width: 12rem;
  max-width: 100%;
}

/* =========================================================
   HERO BANNER FORM — compact (fits snap / indexForHeader)
   ========================================================= */
.seja-form--banner {
  padding: 0.65rem 0.85rem 0.7rem !important;
  gap: 0.4rem !important;
}

.seja-form--banner .seja-field {
  gap: 0;
  position: relative;
}

/*
 * Hero: keep labels for a11y but don't spend vertical space
 * (placeholders already name the fields). Contact/jobs keep visible labels.
 */
.seja-form--banner .seja-field label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.seja-form--banner .seja-input,
.seja-form--banner input.wpcf7-text,
.seja-form--banner input.wpcf7-email,
.seja-form--banner input.wpcf7-tel,
.seja-form--banner input[type="text"],
.seja-form--banner input[type="email"],
.seja-form--banner input[type="tel"] {
  min-height: 38px !important;
  padding: 0.35rem 0.7rem !important;
  font-size: 0.875rem !important;
  border-radius: 7px !important;
}

/* Must beat `.wpcf7 textarea.wpcf7-textarea { min-height: 100px }` */
.seja-form--banner textarea,
.seja-form--banner .seja-textarea,
.seja-form--banner .wpcf7-textarea,
.seja-form--banner textarea.wpcf7-textarea,
.wpcf7 .seja-form--banner textarea,
.wpcf7 .seja-form--banner textarea.wpcf7-textarea,
.indexForHeader .seja-form--banner textarea,
.indexForHeader textarea.wpcf7-textarea,
.formulario textarea.wpcf7-textarea {
  min-height: 64px !important;
  height: 64px !important;
  max-height: 80px !important;
  padding: 0.4rem 0.7rem !important;
  font-size: 0.875rem !important;
  border-radius: 7px !important;
}

.seja-form--banner .seja-submit,
.seja-form--banner input.wpcf7-submit {
  min-height: 40px !important;
  margin-top: 0.1rem !important;
  margin-bottom: 0 !important;
  padding: 0.4rem 1rem !important;
  font-size: 0.9rem !important;
}

/* CF7 response — don’t blow hero height */
.seja-form--banner + .wpcf7-response-output,
.formulario .wpcf7-response-output {
  margin: 0.4rem 0 0 !important;
  padding: 0.4rem 0.6rem !important;
  font-size: 0.8rem !important;
}

.formulario .wpcf7 {
  margin: 0;
}

.formulario .wpcf7-form p {
  margin: 0 !important;
}

/* CF7 sometimes wraps in <p> — collapse margins in banner */
.seja-form--banner p {
  margin: 0 !important;
}

/* Validation compact */
.wpcf7-not-valid {
  border-color: #dc2626 !important;
}

.wpcf7-not-valid-tip {
  font-size: 0.7rem;
  color: #dc2626;
  margin-top: 0.1rem;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
  border-radius: var(--seja-radius-sm);
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.85rem;
  font-size: 0.875rem;
}

.seja-form ::placeholder,
.wpcf7 ::placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* Contact panel on navy — restore side padding (lost when CF7 lost px-4 / padding-left-lg) */
#contato .formulario.bg-primary,
section#contato .formulario.bg-primary,
#contato .bg-primary.formulario,
#contato .bg-primary.paddingDesktop {
  color: #fff;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-bottom: 1.75rem !important;
  box-sizing: border-box;
}

#contato .seja-form--contact,
section#contato .seja-form--contact {
  margin-inline: auto;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  /* sides handled by parent panel so fields don't sit on the edge */
  padding: 0.75rem 0 0.5rem !important;
  gap: 1.15rem;
}

@media (min-width: 992px) {
  #contato .formulario.bg-primary,
  #contato .bg-primary.formulario,
  #contato .bg-primary.paddingDesktop {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    padding-top: 0.35rem !important;
    padding-bottom: 2rem !important;
  }

  #contato .seja-form--contact {
    margin-inline: 0;
    max-width: 28rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

#contato .seja-form--contact .seja-field {
  gap: 0.5rem;
}

#contato .seja-form--contact .seja-field label,
section#contato .seja-form--contact .seja-field label,
.bg-primary .seja-form--contact .seja-field label,
#contato .wpcf7 label,
.bg-primary.formulario .seja-field label {
  color: #f3f6f9 !important; /* light on navy — readable */
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0;
  opacity: 0.95;
}

#contato .seja-form--contact .seja-input,
#contato .seja-form--contact input.wpcf7-text,
#contato .seja-form--contact input.wpcf7-email,
#contato .seja-form--contact input.wpcf7-tel,
#contato .seja-form--contact textarea,
#contato .seja-form--contact .wpcf7-textarea,
.bg-primary .seja-form--contact input,
.bg-primary .seja-form--contact textarea {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

#contato .seja-form--contact input:focus,
#contato .seja-form--contact textarea:focus,
.bg-primary .seja-form--contact input:focus,
.bg-primary .seja-form--contact textarea:focus {
  border-color: var(--seja-secondary) !important;
  box-shadow: 0 0 0 3px rgba(162, 124, 40, 0.35) !important;
}

#contato .seja-form--contact .seja-submit,
#contato .seja-form--contact input.wpcf7-submit {
  margin-top: 0.35rem !important;
  max-width: 16rem;
}

/* Gold header strip above contact form */
#contato .formulario .bg-secondary,
#contato .bg-secondary {
  letter-spacing: 0.01em;
}

/* ---------- Footer polish ---------- */
footer .bg-light {
  border-top: 1px solid rgba(191, 191, 191, 0.5);
}

footer p {
  font-size: 0.9rem;
  color: var(--seja-primary);
}

/* ---------- Focus visibility (a11y) ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--seja-primary);
  outline-offset: 3px;
}

/* ---------- Mobile hero — HQ background (same photo as desktop, smart crop) ---------- */
@media (max-width: 991.98px) {
  .seja-hero-mobile {
    /* Full-res featured image via template; position keeps face/subject in frame */
    background-size: cover !important;
    background-position: 62% center !important;
    background-repeat: no-repeat !important;
    /* Slightly better paint on mobile GPUs */
    -webkit-background-size: cover !important;
  }

  .seja-hero-mobile h1 {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- Mobile form under hero ---------- */
@media (max-width: 991.98px) {
  .formularioMobile {
    margin-top: -1.25rem;
    position: relative;
    z-index: 2;
  }

  .formularioMobile .bg-primary.rounded {
    box-shadow: var(--seja-shadow);
  }

  .seja-form--banner {
    padding: 0.85rem 0.9rem 0.9rem !important;
    gap: 0.55rem !important;
  }

  .seja-form--banner .seja-input,
  .seja-form--banner input.wpcf7-text,
  .seja-form--banner input.wpcf7-email,
  .seja-form--banner input.wpcf7-tel {
    min-height: 42px !important;
  }

  .seja-form--banner textarea,
  .seja-form--banner .wpcf7-textarea,
  .seja-form--banner textarea.wpcf7-textarea,
  .formularioMobile textarea.wpcf7-textarea {
    min-height: 72px !important;
    height: 72px !important;
    max-height: 96px !important;
  }
}

/*
 * Labels on navy panels: light text (NOT dark — that was unreadable).
 * Banner form (white card) keeps dark labels via .seja-form--banner rules.
 */
.bg-primary > .seja-form .seja-field label,
.bg-primary .seja-form--contact .seja-field label,
.formulario.bg-primary .seja-form--contact .seja-field label {
  color: #f3f6f9 !important;
}

/* White form cards (hero banner) keep dark labels */
.bg-white .seja-field label,
.formulario .bg-white .seja-field label {
  color: var(--seja-dark) !important;
}

/* “Como funciona” / navy sections — slightly clearer type */
.bg-primary h2 {
  letter-spacing: -0.02em;
}