/*
Generated time: July 1, 2025 04:52
This file was created by the app developer. Feel free to contact the original developer with any questions. It was minified (compressed) by AVADA. AVADA do NOT own this script.
*/
.article-content{--element-margin-bottom:2em;--heading-margin-bottom:1.5em}.article-content blockquote,.article-content img,.article-content ol,.article-content p,.article-content ul{margin-bottom:var(--element-margin-bottom,2em)}.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6{margin-top:var(--heading-margin-bottom,1.5em)}.article-content img{padding-top:calc(2 * var(--space-unit));padding-bottom:calc(2 * var(--space-unit))}.article-content iframe{max-width:100%}.article__image--wider .media{width:calc(100% + var(--gutter) * 2);max-width:calc(100% + var(--gutter) * 2);margin-inline-start:calc(var(--gutter) * -1)}@media (max-width:767.98px){.article-content,.article-width{max-width:37em}}@media (min-width:768px) and (max-width:1023.98px){.article-content,.article-width{max-width:40em}}@media (min-width:768px){.article-content img{padding-top:calc(4 * var(--space-unit))}}

/* ==========================================================================
   Blog article redesign — scoped entirely to .article-content
   Safe: this class only renders inside sections/main-article.liquid
   ========================================================================== */

/* -- Section headings: use the theme's own fluid heading scale, so sizing
      is guaranteed consistent and correctly responsive at every breakpoint,
      the same way headings behave everywhere else on the site -- */
.article-content h2 {
  margin-top: 2.2em;
  margin-bottom: 0.7em;
  padding-top: 0.9em;
  border-top: 1px solid rgba(var(--text-color) / 0.12);
  font-size: var(--h2-font-size);
  line-height: 1.25;
}
.article-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.article-content h3 {
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  font-size: var(--h3-font-size);
  line-height: 1.3;
}
.article-content h4 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-size: var(--h4-font-size);
}
.article-content h5,
.article-content h6 {
  margin-top: 1.4em;
  margin-bottom: 0.4em;
  font-size: var(--h5-font-size);
}

/* -- Body copy: slightly larger, more readable line length/height -- */
.article-content > p,
.article-content li > p {
  font-size: 1.05em;
  line-height: 1.7;
}

/* -- Lead paragraph: the first paragraph reads like an intro/deck -- */
.article-content > p:first-of-type {
  font-size: 1.2em;
  line-height: 1.6;
  color: rgb(var(--text-color));
  opacity: 0.85;
}

/* -- Links inside body copy: brand-colored, clear underline on hover -- */
.article-content a {
  color: #f7a83f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: opacity 0.2s;
}
.article-content a:hover {
  opacity: 0.7;
}

/* -- Lists: brand-colored bullet dot, reliably aligned with the first
      line of text regardless of markup inside the <li> (plain text, a
      <span>, or — as in pasted content — a <p>). The base theme's bullet
      is inline-block + vertical-align:middle, which only centers correctly
      when it shares a line box with inline text; a block-level <p> child
      breaks that assumption and pushes the bullet onto its own line. This
      switches it to position:absolute against the <li>, which doesn't
      depend on what's nested inside at all. -- */
.article-content.rte ul li {
  position: relative;
}
.article-content.rte ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.5em;
  height: 0.5em;
  margin: 0;
  border-radius: 50%;
  background-color: rgb(var(--btn-bg-color, var(--heading-color)));
}
.article-content ol,
.article-content ul {
  margin-top: 0.25em;
}
.article-content li:not(:last-child) {
  margin-bottom: 0.5em;
}
.article-content ul li h1,
.article-content ul li h2,
.article-content ul li h3,
.article-content ul li h4,
.article-content ul li h5,
.article-content ul li h6 {
  margin: 0;
  line-height: inherit;
}

/* -- Blockquote: single clean editorial style (brand accent, quote mark).
      Font-size uses rem matching this theme's 62.5% root (1rem = 10px),
      so 2rem/2.8rem = 20px/28px — clearly larger than body copy. -- */
.article-content blockquote {
  position: relative;
  margin-top: 2em;
  margin-bottom: 2em;
  padding: 1.6em 1.8em 1.6em 3.2em;
  border-left: 3px solid rgb(var(--btn-bg-color, var(--heading-color)));
  border-radius: 0 8px 8px 0;
  background: rgba(var(--text-color) / 0.04);
  font-size: 2rem;
  font-style: italic;
  line-height: 1.4;
}
.article-content blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0.5em;
  top: 0.2em;
  font-size: 2.6rem;
  font-style: normal;
  line-height: 1;
  color: rgb(var(--btn-bg-color, var(--heading-color)));
  opacity: 0.35;
}
.article-content blockquote p:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .article-content blockquote {
    font-size: 2.8rem;
    line-height: 1.4;
  }
}

/* -- Tables: readable header row + row separators.
      IMPORTANT: the <table> itself keeps its native display/table-layout —
      forcing display:block on a <table> breaks the browser's column-sizing
      algorithm, which is what was crushing columns into single-word wraps.
      Instead we widen and scroll the *wrapper* the theme's own script
      already creates (.scrollable-table), and give the table a min-width
      so columns get real breathing room, scrolling horizontally on any
      screen too narrow to show that comfortably. -- */
.article-content table {
  width: 100%;
  min-width: 560px;
  margin-bottom: 0;
  border-collapse: collapse;
}
.article-content table th,
.article-content table td {
  padding: 0.9em 1.1em;
  border: 1px solid rgba(var(--text-color) / 0.15);
  text-align: start;
  vertical-align: top;
}
.article-content table th,
.article-content table tr:first-child td {
  background: rgba(var(--text-color) / 0.05);
  font-weight: 700;
}
.article-content table tr:nth-child(even) td {
  background: rgba(var(--text-color) / 0.02);
}
/* The theme wraps every article table in .scrollable-table via inline JS.
   On mobile (<768px) base CSS already makes it a horizontally-scrolling
   flex container — left alone. On tablet/desktop, base CSS only sets
   display:inline-block with no overflow handling, so a table wider than
   its content had nowhere to go.
   This keeps the wrapper at exactly 100% of its own column — NEVER wider
   — and scrolls horizontally inside that box if the table's min-width
   needs more room than the column provides. Because it's always capped
   at 100% of its own parent, it cannot spill past the viewport at any
   screen size, unlike a fixed em-based breakout. */
@media (min-width: 768px) {
  .article-content .scrollable-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* -- Images: soft rounded corners to match the rest of the site's card style -- */
.article-content img {
  border-radius: 8px;
}

/* -- Horizontal rules inside body copy, if any -- */
.article-content hr {
  margin: 2.5em 0;
  opacity: 0.5;
}

.article-content.rte ul li:last-child p{
  margin-bottom: 0px;
}