/* Consistent page margins across desktop, tablet and mobile.
   Loaded after styles.css so it overrides the theme's container widths. */
:root {
  --content-width: 1290px; /* width of the content itself, excluding side gutters */
  --gutter: 40px;
  --section-space: 100px;
}
@media (max-width: 1199px) {
  :root {
    --gutter: 32px;
    --section-space: 80px;
  }
}
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-space: 60px;
  }
}
@media (max-width: 575px) {
  :root {
    --gutter: 16px;
    --section-space: 50px;
  }
}

/* One content width for every section, header, top bar and footer,
   so left and right edges line up down the whole page */
.tf-container,
.tf-container.xl {
  width: 100%;
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-left: auto;
  margin-right: auto;
}
/* Header and top bar keep the theme's wider width so the menu fits on one line */
.tf-top-bar .wrap-top-bar,
#header-main.style-1 .header-inner-wrap {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
#header-main .main-menu .navigation > li > a {
  white-space: nowrap;
}
.tf-container.full {
  max-width: 100%;
}

/* Vertical rhythm between sections */
.tf-spacing-1,
.tf-spacing-2 {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}
/* Hero sits directly under the navbar: only a small top gap */
.hero-split {
  padding-top: calc(var(--section-space) * 0.4);
  padding-bottom: var(--section-space);
}

/* Guard against sideways scrolling on small screens */
html,
body {
  overflow-x: hidden;
}
#wrapper {
  width: 100%;
}