/* **************************************** */
/*          GAP UNDER H3                    */
/* **************************************** */

section.content article[class*="icon"] h3, 
section.content h3[class*="icon"], 
section.content article div[class*="icon"] h3 {
  padding-bottom: 10px;
}

/* **************************************** */
/*          PARAS AFTER H3                  */
/* **************************************** */
/*
section.content article[class*="icon"] h3, 
section.content h3[class*="icon"], 
section.content article div[class*="icon"] h3
*/

article[class*="icon"] h3 ~ p,              /* P following an H3 */
article h3[class*="icon"] ~ p,
article div[class*="icon"] h3 ~ p {
  padding-left: var(--indent-width);
}
article[class*="icon"] h3 ~ h4 {            /* H4 following an H3 */
  padding-left: var(--indent-width);
}
article[class*="icon"] h4 ~ p {             /* P following an H4 */   /* Not sure we need this */
  /*padding-left: var(--indent-width);*/    /* It causes Ps to jump in inside a highlight box */
}
article[class*="icon"] h3 ~ h4 ~ p {        /* P following an H4 which is following an H3 */
  padding-left: var(--indent-width);
}
article[class*="icon"] h3 ~ ul,             /* UL following an H3 (needs an extra 10px) */
article h3[class*="icon"] ~ p ~ ul,         /* UL following a P following an H3 (needs an extra 10px) */
article div[class*="icon"] h3 ~ p ~ ul {    /* UL following a P following an H3 (needs an extra 10px) */
  padding-left: calc( var(--indent-width) + 10px );
}
article[class*="icon"] h3 ~ ol {            /* OL following an H3 (needs an extra 20px) */
  padding-left: calc( var(--indent-width) + 20px );
}


article[class*="icon"] h3 ~ h4 {    /* When a H4 is indented, take off its underline */
  border-bottom: none;
}

                                            /* Highlight box following a P which is following an H3 */
article[class*="icon"] h3 ~ div.highlight-box {
  margin-left: var(--indent-width);
}
article[class*="icon"] div:first-of-type.highlight-box {
  margin-top: 10px;
}
article[class*="icon"] h3 ~ p ~ div.highlight-box {
  margin-left: var(--indent-width);
}

article div[class*="icon"] ~ div.core-exp {             /* Expandable following a DIV with an icon */
  margin-left: var(--indent-width);
}
article div[class*="icon"] h3 ~ div.highlight-box, 
article div[class*="icon"] h3 ~ p ~ div.highlight-box {
  margin-left: var(--indent-width);
}
article div[class*="icon"] ~ ul.resource {              /* PDF list following a DIV with an icon */
  margin-left: var(--indent-width);
}
article div[class*="icon"] ~ .faq-item-container {      /* FAQ list following a DIV with an icon */
  margin-left: var(--indent-width);
}
article div[class*="icon"] ~ .timeline-item-container { /* Timeline list following a DIV with an icon */
  margin-left: var(--indent-width);
}