/* Remove old read time widget */
.read-time-placeholder {
  display: none;
}

/* Body and Header text sitewide */
body {
	font-family: 'Lato';
	font-size: 16px;
	color: #555555;
}

.page h1 {
	font-family: 'Montserrat';
	font-size: 23px;
	font-weight: 300;
	transform: uppercase;
	letter-spacing: 1;
	color: #4E0B44;
	line-height: 1.3em;
}

.page h2 {
	font-family: 'Nunito', sans-serif;
  font-size: 28px;
	font-weight: 600;
	color: #555555;
	line-height: 1.3em;
}

.page h3 {
	font-size: 23px;
	font-family: 'Lato';
	font-weight: 600;
	color: #812373;
	line-height: 1.3em;
}

.page h4 {
  font-size: 20px;
	font-family: 'Lato';
	font-weight: 600;
	color: #812373;
	line-height: 1.3em;
}

.page h5 {
  font-size: 18px;
	font-family: 'Lato';
	font-weight: 600;
	color: #A03592;
	line-height: 1.3em;
}

.page h6 {
  font-size: 18px;
	font-family: 'Lato';
	font-weight: 600;
	color: #C050B2;
	line-height: 1.3em;
}

/* Headers on posts ONLY */

.single-post h2 {
	font-size: 24px;
	font-family: 'Lato';
	font-weight: 600;
	color: #812373;
	line-height: 1.3em;
}

.single-post h3 {
	font-size: 22px;
	font-family: 'Lato';
	font-weight: 600;
	color: #812373;
	line-height: 1.3em;
}

.single-post h4 {
  font-size: 20px;
	font-family: 'Lato';
	font-weight: 600;
	color: #812373;
	line-height: 1.3em;
}

.single-post h5 {
  font-size: 18px;
	font-family: 'Lato';
	font-weight: 600;
	color: #A03592;
	line-height: 1.3em;
}

.single-post h6 {
  font-size: 18px;
	font-family: 'Lato';
	font-weight: 600;
	color: #C050B2;
	line-height: 1.3em;
}

/* Tutorial Headings ONLY */

.elementor-widget-betterdocs-content  h2 {
	font-family: 'Nunito', sans-serif;
  font-size: 28px;
	font-weight: 600;
	color: #812373;
	line-height: 1.3em;
}

.elementor-widget-betterdocs-content  h3 {
	font-family: 'Nunito', sans-serif;
  font-size: 26px;
	font-weight: 600;
	color: #a03592;
	line-height: 1.3em;
}

.elementor-widget-betterdocs-content  h4 {
	font-family: 'Nunito', sans-serif;
  font-size: 24px;
	font-weight: 600;
	color: #a03592;
	line-height: 1.3em;
}

.elementor-widget-betterdocs-content  h5 {
	font-family: 'Nunito', sans-serif;
  font-size: 22px;
	font-weight: 600;
	color: #a03592;
	line-height: 1.3em;
}

.elementor-widget-betterdocs-content  h6 {
	font-family: 'Nunito', sans-serif;
  font-size: 20px;
	font-weight: 600;
	color: #a03592;
	line-height: 1.3em;
}

/* Tutorial Headings - Mobile Only */
@media (max-width: 767px) {
  .elementor-widget-betterdocs-content h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 25px;
    font-weight: 600;
    color: #812373;
    line-height: 1.3em;
  }

	/*tabs only */ .e-n-tab-title h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 20px !important;
    font-weight: 600;
    color: #812373;
    line-height: 1.3em;
  }
	
  .elementor-widget-betterdocs-content h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 23px !important;
    font-weight: 600;
    color: #a03592;
    line-height: 1.3em;
  }

  .elementor-widget-betterdocs-content h4 {
    font-family: 'Nunito', sans-serif;
    font-size: 21px !important;
    font-weight: 600;
    color: #a03592;
    line-height: 1.3em;
  }

  .elementor-widget-betterdocs-content h5 {
    font-family: 'Nunito', sans-serif;
    font-size: 19px !important;
    font-weight: 600;
    color: #a03592;
    line-height: 1.3em;
  }

  .elementor-widget-betterdocs-content h6 {
    font-family: 'Nunito', sans-serif;
    font-size: 19px !important;
    font-weight: 600;
    color: #a03592;
    line-height: 1.3em;
  }
}


/* Links sitewide */
.elementor-widget-theme-post-content a:not(.elementor-button-link):not(.elementor-button):not(.eael-creative-button) {
  background-color: transparent;
	font-weight: 600;
	font-size: 16px;
	text-decoration: underline;
  color: #3b9dab;
}

a {
  background-color: transparent;
	font-weight: 600;
	font-size: 16px;
  color: #3b9dab;
}

a:hover, a:active {
  color: #50b2c0;
}


/* ============================================================
   TUTORIAL TOC
   ============================================================ */

.toc-inner {
  background-color: #FFFFFF;
  border-radius: 15px;
  padding: 20px;
}

.toc-hidden {
  justify-content: center;
}

/* Toggle — div acting as button, Elementor won't apply button styles to a div */
.toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 10px 0;
  cursor: pointer;
}

.toc-title {
  color: #812373;
  font-family: "Nunito", Sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

/* Chevron — hidden on desktop, visible on mobile */
.toc-chevron {
  color: #812373;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  display: none;
}

/* Main list */
.toc-list {
  list-style: none;
  padding: 0 0 0 10px;
  margin: 0;
  border-left: 5px solid #ECD1EC;
  position: relative;
}

/* Sub list (h3s nested under h2s) */
.toc-sublist {
  list-style: none;
  padding: 0 0 0 10px;
  margin: 0;
  border-color: #ECD1EC;
}

/* List items */
.toc-item {
  display: table;
  font-size: 14px;
  font-weight: 400;
  margin: 5px 0 0 0;
}

/* Links */
.toc-item a {
  font-family: "Nunito", Sans-serif;
  font-size: 14px;
  word-wrap: normal;
  color: #555555;
  text-decoration: none;
}

.toc-item a:hover,
.toc-item a:focus {
  color: #812373;
  text-decoration: underline;
}

.toc-item a.active {
  color: #812373;
}

.toc-item--h2 a {
  font-weight: 600;
}

/* h3 items slightly muted vs h2 */
.toc-item--h3 a {
  color: #555555;
  font-weight: 400;
}

.toc-item--h3 a:hover,
.toc-item--h3 a:focus,
.toc-item--h3 a.active {
  color: #812373;
}


/* ============================================================
   TOC MOBILE COLLAPSIBLE
   ============================================================ */

@media (max-width: 767px) {

  .toc-chevron {
    display: block;
  }

  /* List hidden by default on mobile */
  .toc-list {
    display: none;
    margin-top: 8px;
  }

  /* Expanded state */
  .toc-list.toc-list--open {
    display: block;
  }

  /* Rotate chevron when open */
  .toc-toggle[aria-expanded="true"] .toc-chevron {
    transform: rotate(180deg);
  }

  /* Remove bottom padding from toggle when list is collapsed */
  .toc-toggle[aria-expanded="false"] {
    padding-bottom: 0;
  }

}


/* ============================================================
   TUTORIAL META PILLS (category, read time, last updated)
   ============================================================ */

.pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.read-time-pill,
.last-updated-pill {
  background-color: #f0f0f0;
  padding: 10px 15px;
  border-radius: 40px;
  font-family: "Montserrat", Sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  color: #555555;
  line-height: 1.2em;
  height: 41px;
}

.read-time-pill svg,
.last-updated-pill svg {
  flex-shrink: 0;
}

.category-pill a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1ecf1;
  border-radius: 40px;
  padding: 10px 15px 10px 15px;
  font-family: "Montserrat", Sans-serif;
  font-weight: 400;
  font-size: 12px;
	text-transform: uppercase;
  color: #74416C;
  text-decoration: none;
  text-align: center;
	line-height: 1.2em;
  height: 41px;
}

.category-pill a:hover,
.category-pill a:active {
  background-color: #f8eff8;
  color: #96698F;
}

/* Wrapper for category pills — shrink to fit contents, sit flush
   alongside the read-time / last-updated pills in the same row */
.category-pills {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: auto;
}

@media (max-width: 767px) {
  .category-pills {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   RELATED TUTORIALS — matches "Tutorial list item" loop card style
   ============================================================ */

.related-tutorials-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.related-tutorial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 15px;
  padding: 30px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.related-tutorial-card:hover,
.related-tutorial-card:focus {
  background-color: #FBF9FB;
}

/* Icon + title group */
.related-tutorial-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}

.related-tutorial-icon-wrap .icon {
  color: #E1CEE1;
  font-size: 40px;
  line-height: 1;
}

.related-tutorial-title {
  font-family: "Nunito", Sans-serif;
  color: #812373;
  line-height: 1.3em;
  font-size: 22px;
  padding-top: 20px;
  margin: 0;
}

/* Excerpt */
.related-tutorial-excerpt-wrap {
  padding-top: 20px;
}

.related-tutorial-excerpt,
.related-tutorial-card:hover .related-tutorial-excerpt,
.related-tutorial-card:focus .related-tutorial-excerpt {
  font-family: "Lato", Sans-serif;
  font-weight: 400;
  text-align: start;
  color: #555555;
  margin: 0;
}

/* Mobile */
@media (max-width: 767px) {
  .related-tutorials-list {
    grid-template-columns: 1fr;
  }

  .related-tutorial-title {
    font-size: 20px;
  }
}


/* ============================================================
   TUTORIAL VOTING
   ============================================================ */

.tutorial-vote {
  text-align: center;
  padding: 30px 0;
}

.tutorial-vote-question {
  font-family: "Nunito", Sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #555555;
  margin: 0 0 14px 0;
}

.tutorial-vote-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.tutorial-vote-yes,
.tutorial-vote-no {
  font-family: "Nunito", Sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 40px;
  border: 1px solid #E5E5E5;
  background-color: #FFFFFF;
  color: #555555;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.tutorial-vote-yes:hover,
.tutorial-vote-yes:focus {
  border-color: #812373;
  color: #812373;
}

.tutorial-vote-no:hover,
.tutorial-vote-no:focus {
  border-color: #993C1D;
  color: #993C1D;
}

.tutorial-vote-thanks {
  font-family: "Nunito", Sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #812373;
  margin: 0;
}


/* ============================================================
   CONTINUE TO NEXT SECTION
   ============================================================ */

.tutorial-continue-btn {
  display: block;
  margin: 30px auto 10px auto;
  font-family: "Nunito", Sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 40px;
  border: none;
  background-color: #812373;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tutorial-continue-btn:hover,
.tutorial-continue-btn:focus {
  background-color: #66145C;
}

/* Hidden on mobile — tab bar already sits below the content */
@media (max-width: 767px) {
  .tutorial-continue-btn {
    display: none;
  }
}

/* ===========================
   Base breadcrumb styling
   =========================== */
#tips-tricks .rank-math-breadcrumb,
#regs-guidance .rank-math-breadcrumb,
#account-management .rank-math-breadcrumb {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* ===========================
   Tips & Tricks
   =========================== */
#tips-tricks .rank-math-breadcrumb,
#tips-tricks .rank-math-breadcrumb a,
#tips-tricks .rank-math-breadcrumb .last {
  color: #611656;
}

#tips-tricks .rank-math-breadcrumb a {
  text-decoration: none;
  transition: color 0.2s ease;
}

#tips-tricks .rank-math-breadcrumb a:hover,
#tips-tricks .rank-math-breadcrumb a:focus {
  color: #9C2C8C;
  text-decoration: underline;
}

#tips-tricks .rank-math-breadcrumb .separator {
  padding: 0 0.4em;
  color: #611656;
  opacity: 0.7;
}

/* ===========================
   Regulations & Guidance
   =========================== */
#regs-guidance .rank-math-breadcrumb,
#regs-guidance .rank-math-breadcrumb a,
#regs-guidance .rank-math-breadcrumb .last {
  color: #1C4589;
}

#regs-guidance .rank-math-breadcrumb a {
  text-decoration: none;
  transition: color 0.2s ease;
}

#regs-guidance .rank-math-breadcrumb a:hover,
#regs-guidance .rank-math-breadcrumb a:focus {
  color: #456EB3;
  text-decoration: underline;
}

#regs-guidance .rank-math-breadcrumb .separator {
  padding: 0 0.4em;
  color: #1C4589;
  opacity: 0.7;
}

/* ===========================
   Account Management
   =========================== */
#account-management .rank-math-breadcrumb,
#account-management .rank-math-breadcrumb a,
#account-management .rank-math-breadcrumb .last {
  color: #08464E;
}

#account-management .rank-math-breadcrumb a {
  text-decoration: none;
  transition: color 0.2s ease;
}

#account-management .rank-math-breadcrumb a:hover,
#account-management .rank-math-breadcrumb a:focus {
  color: #1D707A;
  text-decoration: underline;
}

#account-management .rank-math-breadcrumb .separator {
  padding: 0 0.4em;
  color: #08464E;
  opacity: 0.7;
}

/* ===========================
   Responsive adjustments
   =========================== */
@media (max-width: 767px) {
  #tips-tricks .rank-math-breadcrumb,
  #regs-guidance .rank-math-breadcrumb,
  #account-management .rank-math-breadcrumb {
    font-size: 15px;
    letter-spacing: 0.5px;
  }
}

/* Content-only: BetterDocs + regular page/post content */
.elementor-widget-betterdocs-content ul > li:first-child,
.elementor-widget-betterdocs-content ol > li:first-child,
.elementor-widget-theme-post-content ul > li:first-child,
.elementor-widget-theme-post-content ol > li:first-child,
.page-content ul > li:first-child,
.page-content ol > li:first-child {
  padding-top: 5px;
}

.elementor-widget-betterdocs-content ul > li:last-child,
.elementor-widget-betterdocs-content ol > li:last-child,
.elementor-widget-theme-post-content ul > li:last-child,
.elementor-widget-theme-post-content ol > li:last-child,
.page-content ul > li:last-child,
.page-content ol > li:last-child {
  padding-bottom: 10px;
}

/* Force SVG size */
.elementor-button svg {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: middle;
}

.e-n-menu-dropdown-icon svg {
	width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: middle;
}

/* Tutorial Tab text default */
.e-n-tabs-heading .e-n-tab-title {
	border-radius: 40px;
}

.e-n-tab-title-text {
  color: #812373;
  font-weight: 500 !important;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  transition: color 0.3s ease;
}

.e-n-tab-title:hover .e-n-tab-title-text,
.e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
.e-n-tab-title.active .e-n-tab-title-text {
  color: #ffffff;
}

/* Images on single Learning Lab posts */
.single-post .elementor-widget-theme-post-content .elementor-widget-image {
  display: block;
	justify-content: center;
	height: auto;
	max-width: 80%;
}

.single-post .elementor-widget-theme-post-content .elementor-widget-image img {
	max-width: 80%;
}

.single-post .elementor-widget-theme-post-content .elementor-widget-image .elementor-widget-container {
  display: flex;
	justify-content: center;
	align-items: center;
} 

/*  Feature Images on single Learning Lab posts */
.single-post .elementor-widget-theme-post-featured-image .elementor-widget-container    {
  display: flex;
	justify-content: center;
  margin: auto;
  height: auto;
	max-width: 80%;
}

/* Hide thumbmail for posts before CSS kicks in */
.elementor-post__thumbnail {
	height:0;
	visibility:hidden;
}

/* Category badge colours */
.category-regulations-guidance .elementor-post__badge {
    background-color: #1C4589 !important;
}

.category-subscription-management .elementor-post__badge {
    background-color: #08464E !important;
}

/* Star svgs in summary points boxes */

.summary-points ul {
  list-style: none;
  padding-left: 0; /* Remove default indent */
}

.summary-points li {
  position: relative;
  padding: 0 0 0 30px !important; /* space for the icon - overrides 5px margin for li first child */
  margin-bottom: 10px; /* optional spacing */
}

.summary-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 16px;
  height: 16px;
  background-image: url(https://support.tapestry.info/wp-content/uploads/2025/06/blue-star-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

/* Tutorial images */
.docs-template-default img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .docs-template-default img {
    padding: 5px;
    border-radius: 15px;
  }
}

/* Hide search suggestions if results show */
.search-suggestion-box {
  display: none;
}

.search-suggestion-box.show-suggestions {
  display: block;
}