/* =====================================================================
   site.css — shared components and responsive rules

   Loaded LAST on every page (after brand.css), so it is the single
   source of truth for:
   - components that used to be styled with inline style="" attributes
     repeated in every page and in every language;
   - responsive rules that make every page adapt to any screen size.

   Rules of thumb for this site (keep them when adding content):
   - never fix a height with height/max-height; use min-height so the
     block grows with its content and the page can always scroll;
   - no inline style="" in the HTML: add a class here instead;
   - breakpoints follow Webflow: 991px (tablet), 767px (phone
     landscape), 479px (phone).
   ===================================================================== */

/* ---------- Page skeleton ---------- */

/* Long words (or long translations) wrap instead of pushing the page sideways */
body {
  overflow-wrap: break-word;
}

/* ---------- Language selector ---------- */

.language-current-flag {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

.language-flag-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  object-fit: cover;
  border-radius: 9999px;
}

/* ---------- Color utilities ---------- */

.bg-beige {
  background-color: var(--background-color);
}

.bg-accent {
  background-color: var(--active-color);
}

.bg-light {
  background-color: #f5f5f5;
}

.text-light {
  color: #fff;
}

.text-primary {
  color: var(--text-primary);
}

/* ---------- Home ---------- */

/* Hero: at least 60% of the screen, grows if the content needs more */
.hero-center {
  height: auto;
  min-height: 60vh;
}

.consulting-image {
  width: 100%;
  padding: 5rem 0 0 0;
}

/* "Nossa consultoria": as many columns as fit, each at least 240px wide
   (room for the longest word in any language, e.g. "Accompagnement"):
   3 on desktop, 2 on tablets, 1 on phones */
#consulting > [role="list"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

#consulting > [role="list"] > div {
  min-width: 0;
}

@media screen and (max-width: 767px) {
  #consulting > [role="list"] {
    grid-template-columns: 1fr;
  }
}

/* Highlight banners: 2 x 2 on tablets, where 4 columns are too narrow */
.banners .w-layout-cell {
  min-width: 0;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .banners {
    flex-wrap: wrap;
  }

  .banners .w-layout-cell {
    flex: 1 1 50%;
  }
}

/* ---------- Mentoria: "A mentoria contempla" ---------- */

.contempla-heading {
  margin-bottom: 3rem;
  color: var(--text-primary);
}

.contempla-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contempla-icon {
  width: 56px;
  height: 56px;
  background-color: #f5ebe0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contempla-text {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: var(--text-secondary);
}

/* ---------- Call to action ---------- */

.cta-title {
  max-width: 80%;
}

/* On phones the title takes the full width and shrinks a little on very
   narrow screens, so long words (e.g. "accompagnement") still fit */
@media screen and (max-width: 767px) {
  .cta-title {
    max-width: 100%;
    font-size: clamp(24px, 9vw, 32px);
  }
}

/* ---------- Form pages: Newsletter and Fale conosco ----------

   Both pages share one layout and one form component:

   main.form-page > section.form-page-section > .form-page-layout
     .form-page-content   intro (title, lead, topics) + form + messages
     .form-page-visual    image (newsletter) or color stripes (contact)

   Desktop: two columns inside a centered 1200px container, vertically
   centered between header and footer. Phones: one column, visual last. */

.form-page {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto; /* body is a flex column: the page fills the screen */
}

/* The section has no vertical padding so the contact stripes can run from the
   header down to the footer; text, form and image get their space from
   --form-page-space instead */
.form-page-section {
  --form-page-space: clamp(2.5rem, 6vh, 5rem);
  display: flex;
  align-items: stretch;
  flex: 1 0 auto;
  padding-top: 0;
  padding-bottom: 0;
}

.form-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 530px);
  justify-content: space-between;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.form-page-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  padding: var(--form-page-space) 0;
}

.form-page-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-page-title {
  margin: 0;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3.25rem);
  line-height: 1.1;
  color: var(--text-secondary);
}

.form-page-lead {
  margin: 0;
  font-family: Poppins, Arial, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.5;
  color: var(--text-secondary);
}

.form-page-topics {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.25rem;
  font-family: Poppins, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.form-page-topics li::marker {
  color: var(--active-color);
}

.form-page-visual {
  min-width: 0;
  padding: var(--form-page-space) 0;
}

.form-page-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Contact visual: the brand stripes fill the whole height between the header
   and the footer (touching both, never on top of them) */
.form-page-visual.is-stripes {
  display: flex;
  align-self: stretch;
  padding: 0;
}

.form-page-stripes {
  display: flex;
  justify-content: space-between;
  gap: 4%;
  width: 100%;
  min-height: 320px;
}

.form-page-stripes .vertical-line {
  flex: 1 1 0;
  width: auto;
  height: auto;
}

@media screen and (max-width: 991px) {
  .form-page-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .form-page-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

@media screen and (max-width: 767px) {
  .form-page-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .form-page-layout {
    grid-template-columns: minmax(0, 1fr);
    align-content: space-between; /* text at the top, visual resting on the footer */
    gap: 40px;
  }

  /* one column: the gap separates text and visual, the last block keeps the space */
  .form-page-content {
    padding-bottom: 0;
  }

  .form-page-visual {
    width: 100%;
    max-width: 530px;
    margin: 0 auto;
    padding-top: 0;
  }

  /* on phones the stripes become a band under the form, resting on the footer */
  .form-page-visual.is-stripes {
    max-width: none;
  }

  .form-page-stripes {
    min-height: 0;
    height: 96px;
  }
}

/* ---------- Form component (both form pages) ---------- */

.site-form-wrapper {
  margin: 0;
}

.site-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin: 0;
}

.site-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-form-label {
  margin: 0;
  font-family: Poppins, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-secondary);
}

.site-form-optional {
  font-weight: 400;
  color: var(--text-primary);
}

/* 16px text: phones do not zoom in when the field gets focus */
.site-form-input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  font-family: Poppins, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  background-color: #fff;
  border: 1px solid #c8cfd1;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-form-input:hover {
  border-color: var(--text-primary);
}

.site-form-input:focus {
  outline: none;
  border-color: var(--text-secondary);
  box-shadow: 0 0 0 3px rgba(50, 88, 97, 0.2);
}

textarea.site-form-input {
  min-height: 144px;
  resize: vertical;
}

.site-form-submit {
  width: 100%;
  min-height: 48px;
  margin: 4px 0 0;
  padding: 12px 24px;
  font-family: Poppins, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-secondary);
  background-color: transparent;
  border: 1px solid var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-form-submit:hover,
.site-form-submit:focus-visible {
  color: #fff;
  background-color: var(--text-secondary);
}

.site-form-submit:focus-visible {
  outline: 2px solid var(--text-secondary);
  outline-offset: 3px;
}

/* Anti-spam field: invisible to people (and screen readers), bots fill it */
.site-form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-form-submit:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* Messages: main.js shows/hides them (display), the look is ours */
.site-form-message {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-family: Poppins, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  border-radius: 8px;
}

.site-form-message.is-success {
  color: var(--text-secondary);
  background-color: #e7f0ee;
}

.site-form-message.is-error {
  color: var(--active-color);
  background-color: #fbeceb;
}

/* Contact: after sending, the thank-you text takes the form's place */
.site-form-success {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
  text-align: left;
  background-color: transparent;
}

.site-form-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-family: Poppins, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
}

.site-form-back-link:hover,
.site-form-back-link:focus-visible {
  text-decoration: underline;
}

/* Decorative stripes: the colors repeat every 4 lines */
.vertical-line:nth-child(4n + 1) {
  background-color: var(--primary-color);
}

.vertical-line:nth-child(4n + 2) {
  background-color: var(--secondary-color);
}

.vertical-line:nth-child(4n + 3) {
  background-color: var(--active-color);
}

.vertical-line:nth-child(4n + 4) {
  background-color: var(--alert-color);
}