/* Global CSS */
body.post-type-archive-docs,
body.tax-docs_category,
body.single-docs {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.post-type-archive-docs main,
body.tax-docs_category main,
body.single-docs main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Administrator styles */
body.admin-bar.post-type-archive-docs,
body.admin-bar.tax-docs_category,
body.admin-bar.single-docs {
  min-height: calc( 100vh - 32px);
}

@media (max-width: 782px) {
  body.admin-bar.post-type-archive-docs,
  body.admin-bar.tax-docs_category,
  body.admin-bar.single-docs {
    min-height: calc( 100vh - 46px);
  }
}

/* Typography & COLORS STYLING */
.pfd-wrapper {
  /* TEXT */
  color: var(--pfd-text-color);
  /* HEADINGS */
  /* LINKS */
  /* INPUTS, TEXTAREA */
  /* PRIMARY BUTTONS */
  /* SECONDARY BUTTONS */
  /* TOGGLE BUTTONS */
  /* SCROLLBAR */
}

.pfd-wrapper,
.pfd-wrapper * {
  box-sizing: border-box;
}

.pfd-wrapper h1,
.pfd-wrapper h2,
.pfd-wrapper h3,
.pfd-wrapper h4,
.pfd-wrapper h5,
.pfd-wrapper h6 {
  font-weight: 600;
}

.pfd-wrapper h1,
.pfd-wrapper h1 *,
.pfd-wrapper h2,
.pfd-wrapper h2 *,
.pfd-wrapper h3,
.pfd-wrapper h3 *,
.pfd-wrapper h4,
.pfd-wrapper h4 *,
.pfd-wrapper h5,
.pfd-wrapper h5 *,
.pfd-wrapper h6,
.pfd-wrapper h6 * {
  color: var(--pfd-heading-color);
}

.pfd-wrapper a {
  text-decoration: none;
}

.pfd-wrapper a,
.pfd-wrapper a * {
  color: var(--pfd-link-color);
}

.pfd-wrapper a:hover, .pfd-wrapper a:focus {
  text-decoration: none;
  outline: none;
}

.pfd-wrapper a:hover,
.pfd-wrapper a:hover *, .pfd-wrapper a:focus,
.pfd-wrapper a:focus * {
  color: var(--pfd-link-hover-color);
}

.pfd-wrapper a:active,
.pfd-wrapper a:active *, .pfd-wrapper a.active,
.pfd-wrapper a.active *, .pfd-wrapper a.pfd-active,
.pfd-wrapper a.pfd-active * {
  color: var(--pfd-link-active-color);
}

.pfd-wrapper a:focus-visible {
  outline-width: thin;
  outline-color: inherit;
  outline-style: dotted;
}

.pfd-wrapper input[type="checkbox"],
.pfd-wrapper input[type="color"],
.pfd-wrapper input[type="date"],
.pfd-wrapper input[type="email"],
.pfd-wrapper input[type="number"],
.pfd-wrapper input[type="password"],
.pfd-wrapper input[type="radio"],
.pfd-wrapper input[type="reset"],
.pfd-wrapper input[type="search"],
.pfd-wrapper input[type="tel"],
.pfd-wrapper input[type="text"],
.pfd-wrapper input[type="time"],
.pfd-wrapper input[type="url"],
.pfd-wrapper select,
.pfd-wrapper textarea {
  color: var(--pfd-input-text-color);
  background: var(--pfd-input-background);
  border-color: var(--pfd-input-border-color);
  border-width: 1px;
  border-style: solid;
}

.pfd-wrapper input[type="checkbox"]:hover,
.pfd-wrapper input[type="color"]:hover,
.pfd-wrapper input[type="date"]:hover,
.pfd-wrapper input[type="email"]:hover,
.pfd-wrapper input[type="number"]:hover,
.pfd-wrapper input[type="password"]:hover,
.pfd-wrapper input[type="radio"]:hover,
.pfd-wrapper input[type="reset"]:hover,
.pfd-wrapper input[type="search"]:hover,
.pfd-wrapper input[type="tel"]:hover,
.pfd-wrapper input[type="text"]:hover,
.pfd-wrapper input[type="time"]:hover,
.pfd-wrapper input[type="url"]:hover,
.pfd-wrapper select:hover,
.pfd-wrapper textarea:hover {
  color: var(--pfd-input-text-hover-color, var(--pfd-input-text-color));
  background: var(--pfd-input-hover-background, var(--pfd-input-background));
  border-color: var(--pfd-input-border-hover-color, var(--pfd-input-border-color));
}

.pfd-wrapper input[type="checkbox"]:focus,
.pfd-wrapper input[type="color"]:focus,
.pfd-wrapper input[type="date"]:focus,
.pfd-wrapper input[type="email"]:focus,
.pfd-wrapper input[type="number"]:focus,
.pfd-wrapper input[type="password"]:focus,
.pfd-wrapper input[type="radio"]:focus,
.pfd-wrapper input[type="reset"]:focus,
.pfd-wrapper input[type="search"]:focus,
.pfd-wrapper input[type="tel"]:focus,
.pfd-wrapper input[type="text"]:focus,
.pfd-wrapper input[type="time"]:focus,
.pfd-wrapper input[type="url"]:focus,
.pfd-wrapper select:focus,
.pfd-wrapper textarea:focus {
  color: var(--pfd-input-text-active-color, var(--pfd-input-text-color));
  background: var(--pfd-input-active-background, var(--pfd-input-background));
  border-color: var(--pfd-input-border-active-color, var(--pfd-input-border-color));
  border-style: solid;
  outline: none;
}

.pfd-wrapper input[type="checkbox"]::placeholder,
.pfd-wrapper input[type="color"]::placeholder,
.pfd-wrapper input[type="date"]::placeholder,
.pfd-wrapper input[type="email"]::placeholder,
.pfd-wrapper input[type="number"]::placeholder,
.pfd-wrapper input[type="password"]::placeholder,
.pfd-wrapper input[type="radio"]::placeholder,
.pfd-wrapper input[type="reset"]::placeholder,
.pfd-wrapper input[type="search"]::placeholder,
.pfd-wrapper input[type="tel"]::placeholder,
.pfd-wrapper input[type="text"]::placeholder,
.pfd-wrapper input[type="time"]::placeholder,
.pfd-wrapper input[type="url"]::placeholder,
.pfd-wrapper select::placeholder,
.pfd-wrapper textarea::placeholder {
  color: inherit;
  opacity: 0.45;
}

.pfd-wrapper button,
.pfd-wrapper .pfd-primary-button {
  color: var(--pfd-primary-button-text-color);
  background: var(--pfd-primary-button-background);
  border-width: 1px;
  border-style: solid;
  border-color: var(--pfd-primary-button-border-color);
}

.pfd-wrapper button:hover, .pfd-wrapper button:focus,
.pfd-wrapper .pfd-primary-button:hover,
.pfd-wrapper .pfd-primary-button:focus {
  color: var(--pfd-primary-button-text-hover-color, var(--pfd-primary-button-text-color));
  background: var(--pfd-primary-button-hover-background, var(--pfd-primary-button-background));
  border-color: var(--pfd-primary-button-border-hover-color, var(--pfd-primary-button-border-color));
}

.pfd-wrapper button:active, .pfd-wrapper button.active,
.pfd-wrapper .pfd-primary-button:active,
.pfd-wrapper .pfd-primary-button.active {
  color: var(--pfd-primary-button-text-active-color, var(--pfd-primary-button-text-color));
  background: var(--pfd-primary-button-active-background, var(--pfd-primary-button-background));
  border-color: var(--pfd-primary-button-border-active-color, var(--pfd-primary-button-border-color));
  outline: none;
}

.pfd-wrapper .pfd-secondary-button {
  color: var(--pfd-secondary-button-text-color);
  background: var(--pfd-secondary-button-background);
  border-width: 1px;
  border-style: solid;
  border-color: var(--pfd-secondary-button-border-color);
}

.pfd-wrapper .pfd-secondary-button:hover, .pfd-wrapper .pfd-secondary-button:focus {
  color: var(--pfd-secondary-button-text-hover-color, var(--pfd-secondary-button-text-color));
  background: var(--pfd-secondary-button-hover-background, var(--pfd-secondary-button-background));
  border-color: var(--pfd-secondary-button-border-hover-color, var(--pfd-secondary-button-border-color));
}

.pfd-wrapper .pfd-secondary-button:active, .pfd-wrapper .pfd-secondary-button.active {
  color: var(--pfd-secondary-button-text-active-color, var(--pfd-secondary-button-text-color));
  background: var(--pfd-secondary-button-active-background, var(--pfd-secondary-button-background));
  border-color: var(--pfd-secondary-button-border-active-color, var(--pfd-secondary-button-border-color));
  outline: none;
}

.pfd-wrapper .pfd-toggle-button {
  color: var(--pfd-toggle-button-text-color);
  background: var(--pfd-toggle-button-background);
  border-width: 1px;
  border-style: solid;
  border-color: var(--pfd-toggle-button-border-color);
}

.pfd-wrapper .pfd-toggle-button:hover, .pfd-wrapper .pfd-toggle-button:focus {
  color: var(--pfd-toggle-button-text-hover-color, var(--pfd-toggle-button-text-color));
  background: var(--pfd-toggle-button-hover-background, var(--pfd-toggle-button-background));
  border-color: var(--pfd-toggle-button-border-hover-color, var(--pfd-toggle-button-border-color));
}

.pfd-wrapper .pfd-toggle-button:active, .pfd-wrapper .pfd-toggle-button.active {
  color: var(--pfd-toggle-button-text-active-color, var(--pfd-toggle-button-text-color));
  background: var(--pfd-toggle-button-active-background, var(--pfd-toggle-button-background));
  border-color: var(--pfd-toggle-button-border-active-color, var(--pfd-toggle-button-border-color));
  outline: none;
}

.pfd-wrapper ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.pfd-wrapper ::-webkit-scrollbar-thumb {
  background: #e8e8ed;
  border-radius: 10px;
  visibility: hidden;
}

.pfd-wrapper :hover::-webkit-scrollbar-thumb {
  visibility: visible;
}

.pfd-wrapper ::-webkit-scrollbar-track {
  background: transparent;
}

/* Breadcrumb CSS */
.pfd-breadcrumb-wrapper {
  margin: 0 0 16px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.pfd-breadcrumb-wrapper * {
  margin: 0;
  padding: 0;
}

.pfd-breadcrumb-wrapper a {
  color: var(--pfd-text-color);
  white-space: nowrap;
  text-decoration: none !important;
}

.pfd-breadcrumb-wrapper .pfd-breadcrumb-home {
  color: var(--pfd-text-color);
  line-height: 16px;
  height: 16px;
}

.pfd-breadcrumb-wrapper .pfd-breadcrumb-home svg path {
  stroke: currentcolor;
}

.pfd-breadcrumb-wrapper a,
.pfd-breadcrumb-wrapper a *,
.pfd-breadcrumb-wrapper .pfd-breadcrumb-home,
.pfd-breadcrumb-wrapper .pfd-breadcrumb-home * {
  color: var(--pfd-text-color);
}

.pfd-breadcrumb-wrapper .pfd-breadcrumb-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #64748b;
}

@media (max-width: 544px) {
  .pfd-breadcrumb-wrapper {
    width: 100%;
    overflow: auto;
  }
  .pfd-breadcrumb-wrapper .pfd-breadcrumb-title {
    overflow: visible;
    text-wrap: nowrap;
  }
}

/* Typography CSS */
.pfd-wrapper h1,
.pfd-wrapper h1 * {
  font-size: 1.875em;
  line-height: 36px;
}

.pfd-wrapper h2,
.pfd-wrapper h2 * {
  font-size: 28px;
  line-height: 32px;
}

.pfd-wrapper h3,
.pfd-wrapper h3 * {
  font-size: 24px;
  line-height: 28px;
}

.pfd-wrapper h4,
.pfd-wrapper h4 * {
  font-size: 20px;
  line-height: 26px;
}

.pfd-wrapper h5,
.pfd-wrapper h5 * {
  font-size: 18px;
  line-height: 24px;
}

.pfd-wrapper,
.pfd-wrapper *,
.pfd-wrapper h6,
.pfd-wrapper h6 * {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.pfd-wrapper h6,
.pfd-wrapper h6 *,
.pfd-wrapper strong,
.pfd-wrapper b {
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .pfd-wrapper h1,
  .pfd-wrapper h1 * {
    font-size: 28px;
    line-height: 32px;
  }
  .pfd-wrapper h2,
  .pfd-wrapper h2 * {
    font-size: 24px;
    line-height: 28px;
  }
  .pfd-wrapper h3,
  .pfd-wrapper h3 * {
    font-size: 22px;
    line-height: 26px;
  }
  .pfd-wrapper h4,
  .pfd-wrapper h4 * {
    font-size: 18px;
    line-height: 24px;
  }
  .pfd-wrapper h5,
  .pfd-wrapper h5 * {
    font-size: 16px;
    line-height: 22px;
  }
  .pfd-wrapper *,
  .pfd-wrapper h6,
  .pfd-wrapper h6 * {
    font-size: 16px;
    line-height: 24px;
  }
}

.pfd-archive-header-container,
.pfd-secondary-header-container {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* SVG Icon */
.pfd-svg-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.25s ease-in-out;
}

.pfd-svg-icon:hover, .pfd-svg-icon:focus {
  background-color: var(--pfd-secondary-color);
}

.pfd-svg-icon:focus-visible {
  outline-width: thin;
  outline-color: inherit;
  outline-style: dotted;
}

/* Visibility Classes */
.pfd-hide {
  display: none !important;
}

@media (max-width: 544px) {
  .pfd-hide-mobile {
    display: none;
  }
}

@media (min-width: 545px) and (max-width: 768px) {
  .pfd-hide-tablet {
    display: none;
  }
}

@media (min-width: 769px) {
  .pfd-hide-desktop {
    display: none;
  }
}

/* Loading Skeleton */
.pfd-skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 0;
  overflow: hidden;
}

.pfd-skeleton-container .pfd-skeleton-row {
  position: relative;
  height: 20px;
  padding: 6px 8px;
  background: var(--pfd-skeleton-color);
  border-radius: 99px;
  /* Add the shining effect */
}

.pfd-skeleton-container .pfd-skeleton-row::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  animation: shine 1s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* PFD Loading Spinner */
.pfd-spinner svg {
  display: none;
}

.pfd-spinner svg::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 3px solid var(--pfd-border-color);
  border-bottom-color: revert;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}