/* Start rules for Header tags on proper-width-[blog]articles */
/* Note: This clobbers Header resizing specifieed by `@media (max-width: 767px)` in `main.css` */
.single article.proper-width-article h1,
.single article.proper-width-article h2,
.single article.proper-width-article h3,
.single article.proper-width-article h4,
.single article.proper-width-article h5,
.single article.proper-width-article h6 {
  margin-bottom: var(--encore-paragraph-margin-size);
}

.single article.proper-width-article h3 {
  font-size: 28px;
}
.single article.proper-width-article h4 {
  font-size: 24px;
}
.single article.proper-width-article h5 {
  font-size: 20px;
}
/* End rules for Header tags on proper-width-[blog]articles */

/* Margins */
.right-margin-0,
.single .entry-meta a.right-margin-0 {
  margin-right: 0px;
}

/* Colours */
.encore-background-purple,
.mce-content-body a.encore-background-purple,
.mpt-block-container a.encore-background-purple,
.entry-content p a.encore-background-purple {
  background: linear-gradient(to top right, rgb(51, 29, 91), rgb(69, 38, 121));
  color: white;
}

a.encore-background-purple:hover,
.mpt-block-container a.encore-background-purple:hover,
.entry-content p a.encore-background-purple:hover {
  background: linear-gradient(to top right, rgb(61, 39, 101), rgb(79, 48, 131));
  color: white;
}
/* End Colours */

/* Margins */
.margin-bottom-standard {
  margin-bottom: var(--encore-paragraph-margin-size);
}
/* End Margins */

/* Buttons */
.josh-button-medium-rounded,
.entry-content p a.josh-button-medium-rounded {
  display: inline-block;

  min-width: 268px;
  height: 63px;
  padding-top: 2px; /* Bring text down to be more centred */
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 18.5px;

  text-decoration: none;
  font-size: 20px;
  text-align: center;
  line-height: 63px; /* Matches the height for vertical centering */
}

.josh-button-medium-rounded:hover,
.entry-content p a.josh-button-medium-rounded:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/** Collapsible buttons **/
/*** From dist/styles/page-javascript-calculator.css ***/
/* Classes for collapsibles, modified from w3schools, */
/* I set this background to transparent in order to overcome a user agent stylesheet (at least for chrome)*/
.collapsible-button {
  cursor: pointer;
  padding: 1px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  margin-bottom: 0px;
  margin-top: 10px;
  font-weight: 500;
  color: var(--encore-darkgrey);
  background-color: transparent;
}

/* Style the collapsible content. Note: hidden by default */
.collapsible-content-inner {
  margin-bottom: -10px;
  display: none;
  overflow: visible;
}



/* Begin Mike's experimental new collapsible classes for collapsible faqs.*/

/*the collapsible notice, when expanded */
.collapsible-button.plusminus.active:before {
  content: "-";
}

.collapsible-button.plusminus:after {
  content: ""; /* Otherwise poulates with "See Details" */
}


/*** End from dist/styles/page-javascript-calculator.css ***/


.collapsible-button.plusminus.active::before {
  content: "-";
  display: inline-block;
  width: 22px;
  padding-left: 5px;
}

.collapsible-button.plusminus::before {
  content: "+";
  display: inline-block;
  font-weight: normal;
  float: center;
  width: 22px;
  margin-right: 5px;
}
/** End collapsible buttons **/
/* End Buttons */


/* FAQs */
/* Another helpful selector: `details[open]` */

div.faq-item .h3like,
details.faq-item .h3like {
  margin-bottom: 0px;
}

div.faq-item,
details.faq-item {
 margin-bottom: 20px;
}

/* Bugfix for where WordPress adds p tags between the button and the inner text */
div.faq-item > p,
details.faq-item > p {
  all: unset;
}
/* End Bugfix for where WordPress adds p tags between the button and the inner text */

/* The Question */
.faq-item > button,
.faq-item summary {
  font-size: 22px;
  color: var(--encore-purple);
  font-weight: 100;
  margin-bottom: 0px;
  display: block;
  cursor: pointer;
}

.faq-item summary {
  /* list-style: none; /* Removes default arrow */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.faq-item .active,
.faq-item .collapsible-button:hover {
  background-color: #ccc;
}


/* The Answer */
.faq-item > .collapsible-content-inner,
.faq-item > .answer-content {
  padding-top: 20px;
}

/* WordPress sometimes adds a <p> to the answer */
.faq-item > .collapsible-content-inner > p,
.faq-item > .answer-content > p {
  /* padding-bottom: 0px; */
}
/* End The Answer */

/* End FAQs */