/* Default typography for user guide (content-single)(scoped to wrapper) */

.guide-typography {
      font-size: 15px !important;
      line-height: 28px;
      margin: auto;
    }
  
    .guide-typography p, .guide-typography ul, .guide-typography ol {
      font-weight: 500;
      letter-spacing: 0.01em;
      margin-bottom: 16px;
      font-size: 15px !important;
      line-height: 1.8;
    }

    /* Reset top margins for one-sided spacing */
    .guide-typography h1,
    .guide-typography h2,
    .guide-typography h3,
    .guide-typography h4,
    .guide-typography h5,
    .guide-typography p,
    .guide-typography ul,
    .guide-typography ol,
    .guide-typography pre,
    .guide-typography table,
    .guide-typography blockquote {
      margin-top: 0;
    }
  

    /* Headings with tuned bottom margins to equalize gaps */
    .guide-typography h1,
    .guide-typography .h1 {
      font-size: 23px;
      line-height: 1.2em; /* ≈60px */
      margin-bottom: 26px;
      font-weight: 800;
    }
  
    .guide-typography h2,
    .guide-typography .h2 {
      font-size: 19px; 
      line-height: 1.2em; /* ≈48px */
      margin-bottom: 22px;
      font-weight: 800;
    }
  
    .guide-typography h3,
    .guide-typography .h3 {
      font-size: 19px;
      line-height: 1.8em; /* ≈40px */
      margin-bottom: 12px;
    }
  
    .guide-typography h4,
    .guide-typography .h4 {
      font-size: 15px;
      line-height: 32px;
      margin-bottom: 16px;
    }
  
    .guide-typography h5,
    .guide-typography .h5 {
      font-size: 15px;
      line-height: 32px;
      margin-bottom: 16px;
    }
  
    /* Paragraphs & lists: fixed 30px gap */
    .guide-typography p,
    .guide-typography ul,
    .guide-typography ol,
    .guide-typography pre,
    .guide-typography table,
    .guide-typography blockquote {
      font-size: 15px !important;
      font-weight: 500;
      letter-spacing: 0.01em;
      margin-bottom: 16px; /* 30 minus overshoot 32 − 18 = 14px */
    }
  
    /* Nested lists: no extra vertical gaps */
    .guide-typography ul ul,
    .guide-typography ol ol,
    .guide-typography ul ol,
    .guide-typography ol ul {
      margin-bottom: 0;
    }
  
    /* Alignments & misc */
    .guide-typography hr,
    .guide-typography .hr {
      border: 1px solid #0026610d;
      margin-bottom: 30px;
      margin-bottom: 30px;
    }
  
    .guide-typography a,
    .guide-typography b,
    .guide-typography i,
    .guide-typography strong,
    .guide-typography em,
    .guide-typography small,
    .guide-typography code {
      line-height: normal;
    }
  
    /* Subscript / Superscript */
    .guide-typography sub,
    .guide-typography sup {
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    .guide-typography sup { top: -0.5em; }
    .guide-typography sub { bottom: -0.25em; }
  
    /* No trailing gap at the end of article */
    .guide-typography > :last-child {
      margin-bottom: 0;
    }
  
    .guide-typography img {
      border-radius: 40px;
    }
 
    
  .guide-typography p, .guide-typography ul, .guide-typography ol {
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    font-size: 15px !important;
    line-height: 1.8;
  }


  /* button etc.styles */

  /* Gutenberg preview of userguide buttons */
span.userguide-btn {
  font-weight: 700;
  border-radius: 3px;
  padding: 2px 8px;
  text-transform: uppercase;
  display: inline-block;
  margin: 0 2px;
}

/* Filled styles */
.userguide-btn.orange-btn { background: #ff7d2d; color: #fff; }
.userguide-btn.blue-btn   { background: #0070f3; color: #fff; }
.userguide-btn.red-btn    { background: #e53935; color: #fff; }
.userguide-btn.grey-btn   { background: #e0e0e0; color: #000; }

/* Outlined styles */
.userguide-btn.border-orange {
  border: 1px solid #ff7d2d;
  color: #ff7d2d;
  background: none;
}

.userguide-btn.border-blue {
  border: 1px solid #0070f3;
  color: #0070f3;
  background: none;
}