/* ============================================
   Fidelidade Theme — Layout & Grid
   HubSpot grid system, DnD sections, forms
   ============================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 80px);
}

/* ── HubSpot Grid System ── */

.container-fluid {
  width: 100%;
}

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--breakpoint-gutter, 24px) / -2);
  margin-right: calc(var(--breakpoint-gutter, 24px) / -2);
}

.row-fluid::before,
.row-fluid::after {
  content: '';
  display: table;
}

.row-fluid::after {
  clear: both;
}

.row-fluid [class*='span'] {
  min-height: 1px;
  padding-left: calc(var(--breakpoint-gutter, 24px) / 2);
  padding-right: calc(var(--breakpoint-gutter, 24px) / 2);
}

.row-fluid .span12 {
  width: 100%;
}
.row-fluid .span11 {
  width: 91.6667%;
}
.row-fluid .span10 {
  width: 83.3333%;
}
.row-fluid .span9 {
  width: 75%;
}
.row-fluid .span8 {
  width: 66.6667%;
}
.row-fluid .span7 {
  width: 58.3333%;
}
.row-fluid .span6 {
  width: 50%;
}
.row-fluid .span5 {
  width: 41.6667%;
}
.row-fluid .span4 {
  width: 33.3333%;
}
.row-fluid .span3 {
  width: 25%;
}
.row-fluid .span2 {
  width: 16.6667%;
}
.row-fluid .span1 {
  width: 8.3333%;
}

@media (max-width: 767px) {
  .row-fluid [class*='span'] {
    width: 100%;
  }
}

/* ── DnD Section Layout ── */

.dnd-section {
  width: 100%;
  background-color: var(--neutral-white);
}

.dnd-section > .row-fluid {
  max-width: var(--breakpoint-viewport-size, 1440px) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--breakpoint-margin, 80px);
  padding-right: var(--breakpoint-margin, 80px);
}

.dnd-section[class*='force-full-width-section'] > .row-fluid {
  max-width: var(--breakpoint-viewport-size, 1440px) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--breakpoint-margin, 80px);
  padding-right: var(--breakpoint-margin, 80px);
}

/* ── Border Decorators — ensure overflow visible in wrapper chain ── */

.dnd-section {
  overflow: visible;
  --section-bg: var(--neutral-white);
}

.dnd-section > .row-fluid {
  overflow: visible;
}

/* ── Section Spacers ── */

.has-spacer-top,
.has-spacer-bottom {
  position: relative;
  z-index: 1;
}

.has-spacer-top {
  margin-top: -3.25rem;
}

.has-spacer-top::before {
  content: '';
  display: block;
  width: 100%;
  height: 3.25rem;
  background-color: inherit;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

.has-spacer-bottom {
  overflow: visible !important;
}

.has-spacer-bottom::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  height: 3.25rem;
  z-index: 3;
  background-color: var(--spacer-bottom-bg, inherit);
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}

/* ── Sticky Footer ── */

.coolseg-sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.body-wrapper--sticky-footer {
  padding-bottom: var(--footer-height, 300px);
}

/* ── Body Wrapper ── */

.body-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Widget Spans ── */

.widget-span {
  display: block;
}

/* ── Row Wrappers ── */

.row-fluid-wrapper {
  width: 100%;
}

/* ── HubSpot Forms ── */

.hs-form {
  max-width: 100%;
}

.hs-form .field {
  margin-bottom: var(--space-4);
}

.hs-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-b3);
  font-weight: 500;
  color: var(--neutral-neutral-700);
}

.hs-form .hs-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--neutral-neutral-300);
  border-radius: var(--radius-small);
  font-family: inherit;
  font-size: var(--font-size-b2);
  color: var(--neutral-neutral-800);
  background-color: var(--neutral-white);
  transition: border-color 0.2s ease;
}

.hs-form .hs-input:focus {
  outline: none;
  border-color: var(--brand-primary-500-main);
  box-shadow: 0 0 0 3px var(--brand-primary-100);
}

.hs-form .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-family: inherit;
  font-size: var(--font-size-b2);
  font-weight: 600;
  color: var(--text-light-background-on-primary);
  background-color: var(--buttons-light-background-primary-default);
  border: none;
  border-radius: var(--radius-small);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.hs-form .hs-button:hover {
  background-color: var(--buttons-light-background-primary-hover);
}

/* ── HubSpot Image Widget ── */

.hs-image-widget {
  display: block;
  max-width: 100%;
  height: auto;
}