/* Shared visual layer for the ROMLI blog/article templates. */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
  color: #17191d;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
.romli-blog-page,
.romli-article-page {
  width: 100%;
  overflow: hidden;
}
.romli-blog-hero,
.romli-article-hero {
  position: relative;
}
.romli-blog-hero-in,
.romli-article-hero-in {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}
.romli-blog-grid {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 36px 0 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.romli-blog-card {
  min-width: 0;
}
.romli-blog-card h2 {
  word-break: break-word;
}
.romli-blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.romli-blog-empty {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 0 80px;
  text-align: center;
}
.romli-blog-empty strong {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
}
.romli-article-wrap {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  padding: 36px 0 80px;
}
.romli-article-card {
  min-width: 0;
}
.romli-article-card article {
  overflow-wrap: anywhere;
}
.romli-article-card article img {
  max-width: 100% !important;
  height: auto !important;
}
.romli-article-card article table {
  max-width: 100%;
  overflow: auto;
}
.romli-article-card article pre {
  max-width: 100%;
  overflow: auto;
}
.romli-back {
  color: inherit;
}
/* Sumá Nativas */
.suma-site-header {
  position: relative;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid rgba(24, 43, 62, 0.12);
}
.suma-nav-wrap {
  width: min(1180px, calc(100% - 40px));
  min-height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.suma-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.suma-brand img {
  display: block;
  width: auto;
  max-width: 190px;
  max-height: 58px;
  object-fit: contain;
}
.suma-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.suma-nav a {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: #233c55;
  font-size: 14px;
  font-weight: 650;
}
.suma-nav a:hover,
.suma-nav a[href="/pages/"] {
  background: #edf5f2;
  color: #3f6f18;
}
.suma-nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
}
.suma-nav-toggle span {
  display: block;
  width: 23px;
  height: 2px;
  background: #20384f;
  margin: 5px 0;
}
/* Shared simple site menus */
.site-header {
  position: relative;
  z-index: 50;
  background: #fff;
}
.site-header .header-inner {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header .brand {
  font-weight: 800;
  text-decoration: none;
}
.site-header .site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.site-header .site-nav a {
  display: inline-block;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
}
.site-header .site-nav a:hover,
.site-header .site-nav a[href="/pages/"] {
  background: #f1f3f5;
}
.site-header .nav-toggle {
  display: none;
}
.site-footer {
  clear: both;
}
/* Leanova */
.ln-nav {
  position: relative;
  z-index: 50;
}
.ln-nav-in {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ln-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.ln-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ln-links a {
  text-decoration: none;
  padding: 8px 11px;
  border-radius: 8px;
}
.ln-links .ln-cta {
  font-weight: 700;
}
/* Legacy CENTRES header */
.ce-site-header {
  position: relative;
  z-index: 50;
}
.ce-site-header .wrapper {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.ce-site-header #banner {
  position: relative;
}
.ce-site-header .description .txt,
.ce-site-header .tagline a {
  display: inline-block;
}
.ce-site-header #access ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ce-site-header #access a {
  text-decoration: none;
}
.ce-site-header .description a[href="/pages/"] {
  font-weight: 700;
}
/* ROMLI menus */
.romli-menu,
.romli-simple-menu {
  position: relative;
  z-index: 50;
}
.romli-menu-inner,
.romli-simple-menu-in {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}
.romli-menu nav,
.romli-simple-menu nav {
  min-width: 0;
}
.romli-menu nav a,
.romli-simple-menu nav a {
  white-space: normal;
}
.romli-generated-footer,
.romli-simple-menu + * {
  max-width: 100%;
}
/* Prevent inherited legacy blocks from blowing up the blog */
.romli-blog-page iframe,
.romli-article-page iframe {
  max-width: 100%;
}
.romli-blog-page input,
.romli-blog-page button,
.romli-article-page input,
.romli-article-page button {
  max-width: 100%;
}
@media (max-width: 900px) {
  .suma-nav-wrap,
  .site-header .header-inner,
  .ln-nav-in {
    width: min(100% - 28px, 1180px);
  }
  .suma-brand img {
    max-width: 160px;
    max-height: 52px;
  }
  .suma-nav {
    gap: 2px;
  }
  .site-header .site-nav {
    justify-content: flex-end;
  }
  .ln-links {
    justify-content: flex-end;
  }
}
@media (max-width: 700px) {
  .suma-nav-wrap {
    min-height: 68px;
  }
  .suma-nav-toggle {
    display: block;
  }
  .suma-nav {
    display: none;
    width: 100%;
    padding: 8px 0 14px;
    flex-direction: column;
    align-items: stretch;
  }
  .suma-nav.is-open {
    display: flex;
  }
  .suma-nav-wrap {
    flex-wrap: wrap;
  }
  .suma-nav a {
    width: 100%;
  }
  .site-header .header-inner {
    min-height: 68px;
    flex-wrap: wrap;
    padding: 12px 0;
  }
  .site-header .nav-toggle {
    display: block;
  }
  .site-header .site-nav {
    display: none;
    width: 100%;
    padding-bottom: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .site-header .site-nav.open {
    display: flex;
  }
  .ln-nav-in {
    min-height: 68px;
    flex-wrap: wrap;
    padding: 12px 0;
  }
  .ln-links {
    width: 100%;
    justify-content: flex-start;
  }
  .ce-site-header #banner {
    padding-left: 14px;
    padding-right: 14px;
  }
  .romli-menu-inner,
  .romli-simple-menu-in {
    width: min(100% - 28px, 1120px);
  }
}