/* Global CSS */
body.post-type-archive-docs,
body.tax-docs_category,
body.single-docs {
	-js-display: flex;
	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;
	-js-display: flex;
	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 20px;
	padding: 0;
	-js-display: inline-flex;
	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 {
	-js-display: flex;
	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 {
	-js-display: flex;
	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 );
	}
}