/* NailKnowledge Custom Styles
 * Use this file to override styles from style.css
 * This file loads after the main stylesheet.
 */

/* =================================================================
   Self-hosted DM Sans (variable weight, latin)
   ================================================================= */

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/dm-sans-latin-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Playlist Script";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/playlist-script.woff2") format("woff2");
}

@media only screen and (max-width: 959.999px) {
	.desktop-only {
		display: none !important;
	}
}

@media only screen and (min-width: 960px) {
	.mobile-only {
		display: none;
	}
}

.has-playlist-script-font-family {
	font-family: "Playlist Script", cursive;
}

body {
	color: #3e3e3c;
	font-family: "DM Sans", sans-serif;
}

.site-header {
	border-bottom: 3px solid;
	border-image: linear-gradient(to right, #b7a5ec, #897d9e) 1;
}

h1,
h2 {
	font-weight: bold;
}

a {
	color: #849a86;
}

a:focus,
a:hover,
.genesis-nav-menu a:focus,
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	color: #849a86;
}

.genesis-nav-menu .menu-item a {
	font-weight: 700;
	vertical-align: middle;
}

.menu-toggle:focus,
.menu-toggle:hover,
.sub-menu-toggle:focus,
.sub-menu-toggle:hover {
	color: #849a86;
}

.entry-content ol,
.entry-content ul {
	text-align: left;
}

/* =================================================================
   Social Media Icons
   ================================================================= */

li.nk-social-icons {
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
}

li.nk-social-icons a {
	display: inline-flex;
	color: #3e3e3c;
	text-decoration: none;
	padding: 0 5px !important;
}

li.nk-social-icons a:hover,
li.nk-social-icons a:focus {
	color: #849a86;
}

div.nk-social-icons {
	display: flex;
	align-items: center;
	gap: 12px;
}

div.nk-social-icons a {
	display: inline-flex;
	text-decoration: none;
	color: inherit;
}

div.nk-social-icons svg {
	width: 1em;
	height: 1em;
}

div.nk-social-icons a:hover,
div.nk-social-icons a:focus {
	color: #849a86;
}

/* =================================================================
   Mobile Header Layout
   ================================================================= */

@media only screen and (max-width: 959px) {
	.site-header .wrap {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		position: relative;
	}

	.site-header .nav-primary {
		flex-basis: 100%;
	}

	.site-header {
		padding: 0 15px;
	}

	.title-area {
		float: none;
		padding: 10px 0;
	}

	.wp-custom-logo .title-area {
		max-width: 250px;
		padding: 5px 0;
	}

	.menu-toggle {
		position: absolute;
		right: 0px;
		top: 5px;
		float: none;
		margin: 0;
		padding: 10px 0;
		font-size: 0;
		line-height: 0;
		order: 2;
	}

	.nk-social-icons {
		justify-content: center;
		padding: 10px 0;
	}

	.alignfull {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
	padding-left: 0;
	padding-right: 0;
}

@media only screen and (min-width: 960px) {
	li.nk-social-icons {
		margin-left: auto;
	}
}

/* =================================================================
   CSS Icon Replacements (eliminates dashicons font dependency)
   ================================================================= */

/* Hamburger menu icon — replaces dashicons-menu \f333 */
.menu-toggle.dashicons-before::before {
	content: "" !important;
	display: inline-block;
	width: 28px;
	height: 20px;
	background:
		linear-gradient(currentColor, currentColor) top center / 100% 3px no-repeat,
		linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat,
		linear-gradient(currentColor, currentColor) bottom center / 100% 3px no-repeat;
	font-size: 0;
	vertical-align: middle;
}

/* X close icon — replaces dashicons \f335 */
.menu-toggle.activated.dashicons-before::before {
	content: "" !important;
	width: 28px;
	height: 28px;
	border: 0;
	padding: 0;
	background:
		linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat,
		linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat;
	transform: rotate(45deg);
}

/* Sub-menu toggle arrow — replaces dashicons-arrow-down-alt2 \f347 */
.sub-menu-toggle.dashicons-before::before {
	content: "" !important;
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	font-size: 0;
	vertical-align: middle;
	margin-top: -2px;
}

.sub-menu-toggle.activated.dashicons-before::before {
	transform: rotate(225deg);
	margin-top: 2px;
}

/* FAQ chevron down — replaces dashicons \f132 */
.gs-faq__question::after {
	content: "" !important;
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	font-family: inherit !important;
	float: right;
	margin-top: 6px;
}

/* FAQ chevron up — replaces dashicons \f460 */
.gs-faq__question.gs-faq--expanded::after {
	content: "" !important;
	transform: rotate(225deg);
	margin-top: 10px;
}

/* WooCommerce active tab minus — replaces dashicons \f147 */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
	content: "" !important;
	display: inline-block;
	width: 12px;
	height: 0;
	border-top: 2px solid currentColor;
	font-family: inherit !important;
	float: right;
	margin-top: 10px;
}

/* =================================================================
   Performance: Remove fade-in animation (causes CLS)
   ================================================================= */

.site-container {
	animation: none;
}

/* =================================================================
   Performance: Tighten transition selectors
   ================================================================= */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	transition:
		color 0.2s ease-in-out,
		background-color 0.2s ease-in-out,
		border-color 0.2s ease-in-out;
}

input:focus,
textarea:focus {
	transition:
		border-color 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
}

.gallery img {
	transition: opacity 0.2s ease-in-out;
}

/* =================================================================
   Editor Colour Palette Utility Classes
   ================================================================= */

.has-sage-color {
	color: #849a86;
}
.has-sage-background-color {
	background-color: #849a86;
}

.has-cloud-dancer-color {
	color: #f0eee9;
}
.has-cloud-dancer-background-color {
	background-color: #f0eee9;
}

.has-clay-color {
	color: #e6ded9;
}
.has-clay-background-color {
	background-color: #e6ded9;
}

.has-dark-purple-color {
	color: #897d9e;
}
.has-dark-purple-background-color {
	background-color: #897d9e;
}

.has-light-purple-color {
	color: #b7a5ec;
}
.has-light-purple-background-color {
	background-color: #b7a5ec;
}

.has-deep-violet-color {
	color: #421e88;
}
.has-deep-violet-background-color {
	background-color: #421e88;
}

.has-warm-stone-color {
	color: #d1c7c1;
}
.has-warm-stone-background-color {
	background-color: #d1c7c1;
}

.has-soft-taupe-color {
	color: #b8ada6;
}
.has-soft-taupe-background-color {
	background-color: #b8ada6;
}

.has-ash-grey-color {
	color: #9a9a95;
}
.has-ash-grey-background-color {
	background-color: #9a9a95;
}

.has-charcoal-ink-color {
	color: #3e3e3c;
}
.has-charcoal-ink-background-color {
	background-color: #3e3e3c;
}

.has-muted-olive-color {
	color: #7f927f;
}
.has-muted-olive-background-color {
	background-color: #7f927f;
}

.has-muted-petal-color {
	color: #e0bfc1;
}
.has-muted-petal-background-color {
	background-color: #e0bfc1;
}

.has-lavender-grey-color {
	color: #b7b4c2;
}
.has-lavender-grey-background-color {
	background-color: #b7b4c2;
}

.has-pale-lilac-color {
	color: #f4edfb;
}
.has-pale-lilac-background-color {
	background-color: #f4edfb;
}

/* =================================================================
   CTA Pill Button (Gutenberg block style)
   ================================================================= */

.site-container .wp-block-button.is-style-cta-pill .wp-block-button__link,
.site-container .wp-block-button.is-style-cta-pill-colourful .wp-block-button__link,
.nk-cta-pill,
.fg-paging-container.fg-light .fg-load-more {
	position: relative;
	display: inline-block;
	background-color: #f0eee9;
	color: #3e3e3c;
	border: 1px solid #9fb7a9;
	border-radius: 999px;
	padding: 4px 40px;
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: 0 0 0 4px rgba(230, 222, 217, 0.5);
}

.site-container .wp-block-button.is-style-cta-pill.colourful .wp-block-button__link,
.site-container .wp-block-button.is-style-cta-pill-colourful .wp-block-button__link,
.nk-cta-pill.colourful {
	box-shadow: none;
}

.site-container .wp-block-button.is-style-cta-pill.colourful .wp-block-button__link::after,
.site-container .wp-block-button.is-style-cta-pill-colourful .wp-block-button__link::after,
.nk-cta-pill.colourful::after {
	content: "";
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border-radius: 999px;
	background: linear-gradient(90deg, #f2dee9, #c9bad5, #c3d2e7, #e8deea);
	padding: 4px;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.site-container .wp-block-button.is-style-cta-pill .wp-block-button__link:hover,
.site-container .wp-block-button.is-style-cta-pill .wp-block-button__link:focus,
.site-container .wp-block-button.is-style-cta-pill-colourful .wp-block-button__link:hover,
.site-container .wp-block-button.is-style-cta-pill-colourful .wp-block-button__link:focus,
.nk-cta-pill:hover,
.nk-cta-pill:focus,
.fg-paging-container.fg-light .fg-load-more:hover,
.fg-paging-container.fg-light .fg-load-more:focus {
	background-color: #e6ded9;
	color: #3e3e3c;
}

/* --- CTA Pill Era: matches #era-bubble-btn from era-chat --- */
.site-container .wp-block-button.is-style-cta-pill-era .wp-block-button__link,
.nk-cta-pill.era {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: #7f9a86;
	color: #ffffff;
	border: 0 solid #7f9a86;
	border-radius: 24px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.15s;
}

.site-container .wp-block-button.is-style-cta-pill-era .wp-block-button__link:hover,
.site-container .wp-block-button.is-style-cta-pill-era .wp-block-button__link:focus,
.nk-cta-pill.era:hover,
.nk-cta-pill.era:focus {
	background-color: #7f9a86;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* --- Button blocks: full width on mobile (except when centered) --- */
@media only screen and (max-width: 600px) {
	.wp-block-buttons:not(.is-content-justification-center) .wp-block-button,
	.wp-block-buttons:not(.is-content-justification-center) .wp-block-button__width-50 {
		width: 100% !important;
	}
}

/* =================================================================
   Search Block
   ================================================================= */

.wp-block-search__inside-wrapper {
	border: 1px solid #9fb7a9;
	border-radius: 999px;
	box-shadow: 0 0 0 4px rgba(230, 222, 217, 0.5);
	background-color: #f0eee9;
	overflow: hidden;
}

.wp-block-search__input {
	border: none;
	background-color: transparent;
	padding: 8px 20px !important;
	font-size: inherit;
	color: #3e3e3c;
}

.wp-block-search__input:focus {
	outline: none;
	border: 0px;
	box-shadow: none;
}

.wp-block-search__button {
	background-color: #f0eee9;
	color: #3e3e3c;
	border: none;
	border-left: 1px solid #9fb7a9;
	padding: 8px 30px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus {
	background-color: #e6ded9;
	color: #3e3e3c;
}

/* =================================================================
   Layout
   ================================================================= */

.site-inner {
	padding: 60px 0 10px;
}

@media only screen and (min-width: 960px) {
	.site-inner {
		max-width: 1200px;
		padding: 60px 0 0;
	}
}

.wp-block-group,
.full-width-content .entry-content > .alignwide {
	padding-left: 10px;
	padding-right: 10px;
}

@media only screen and (min-width: 960px) {
	.single-post .content-sidebar-wrap {
		max-width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	.full-width-content .entry-content > .alignwide {
		margin-left: 0px;
		margin-right: 0px;
		max-width: 100%; /* equals sum of left and right margin */
		width: auto;
	}
}

@media only screen and (min-width: 1200px) {
	.full-width-content .entry-content > .alignwide {
		margin-left: -30px;
		margin-right: -30px;
		max-width: calc(100% + 60px); /* equals sum of left and right margin */
		width: auto;
	}
}

@media only screen and (min-width: 1440px) {
	.full-width-content .entry-content > .alignwide {
		margin-left: -180px;
		margin-right: -180px;
		max-width: calc(100% + 360px); /* equals sum of left and right margin */
		width: auto;
	}
}

@media only screen and (min-width: 960px) {
	.after-entry,
	.archive-description,
	.author-box,
	.comment-respond,
	.entry,
	.entry-comments,
	.entry-pings {
		margin-bottom: 0px;
	}
}

/* =================================================================
   Footer CTA Section
   ================================================================= */

.nk-footer-cta {
	color: #ffffff;
	background-color: #7f7396;
	border-top: 3px solid;
	border-image: linear-gradient(to right, #b7a5ec, #897d9e) 1;
	padding: 40px 0 0 0;
}

.nk-footer-cta .wrap {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.nk-footer-cta-left {
	flex: 1;
}

.nk-footer-cta h2,
.nk-footer-cta h5 {
	color: #ffffff;
}

.nk-footer-cta-right {
	flex-shrink: 0;
}

@media only screen and (max-width: 768px) {
	.nk-footer-cta {
		padding: 30px 20px 0;
	}

	.nk-footer-cta .widget {
		margin: 0;
	}

	.nk-footer-cta .wrap {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.nk-footer-cta-left,
	.nk-footer-cta-right {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/* =================================================================
   Widgets
   ================================================================= */

.widget-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}

/* =================================================================
   Footer Widget Areas
   ================================================================= */

.nk-footer-widgets {
	padding: 0px 0 40px;
	background-color: #7f7396;
	color: #ffffff;
}

.nk-footer-widgets h4,
.nk-footer-widgets p {
	color: #ffffff;
}

.nk-footer-widgets a {
	color: #e6e1ed;
}

.nk-footer-widgets a:hover,
.nk-footer-widgets a:focus {
	color: #9fb6a1;
}

.nk-footer-widgets .wrap {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	gap: 30px;
}

.nk-footer-widgets .footer-widget-area {
	flex: 1;
}

.nk-footer-widgets .widget ul > li {
	margin: 0;
}

.tp-switcher-wrap {
	margin-top: 20px;
}

@media only screen and (max-width: 768px) {
	.tp-switcher-wrap {
		display: flex;
		justify-content: center;
	}
}

/* =================================================================
   Content Width Fix
   ================================================================= */

@media only screen and (min-width: 960px) {
	.full-width-content .content {
		width: 100%;
	}
}

.woocommerce-page .content,
.single-epkb_post_type_1 .entry,
.nk-kb-breadcrumbs,
.nk-kb-sidebar,
.nk-kb-block-wrap {
	padding-left: 20px;
	padding-right: 20px;
}

@media (max-width: 840px) {
	.nk-kb-article-wrap {
		flex-direction: column;
	}

	.nk-kb-sidebar {
		flex: none;
		order: 2;
		border-top: 1px solid #e6ded9;
		padding-top: 20px;
	}
}

@media only screen and (max-width: 768px) {
	.site-inner {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.woocommerce-page .content,
	.single-epkb_post_type_1 .entry,
	.nk-kb-breadcrumbs,
	.nk-kb-sidebar,
	.nk-kb-block-wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	.nk-footer-widgets {
		padding: 30px 20px;
	}

	.nk-footer-widgets .widget:last-child {
		margin: 0;
	}

	.nk-footer-widgets .wrap {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}
}

/* =================================================================
   Simple Post Block
   ================================================================= */
.spb-read-more {
	margin: 10px auto 0px;
}

.home .spb-read-more {
	margin: 10px auto 20px;
}

.spb-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

@media only screen and (max-width: 769px) {
	article.spb-post-item:not(:last-child) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	}
}

@media only screen and (min-width: 960px) {
	.spb-post-item.spb-layout-image-left .spb-post-image {
		flex: 0 0 50%;
	}

	.spb-post-item.spb-layout-image-right .spb-post-image {
		flex: 0 0 50%;
	}

	.spb-post-title {
		margin: 0 0 10px;
		/* font-size: 1.5em; */
		line-height: 1.3;
	}

	.spb-post-excerpt {
		margin-bottom: 10px;
	}

	.spb-read-more {
		margin: auto auto 0;
	}

	.home .spb-read-more {
		margin: auto 0 0 0;
	}
}

/* Image block – rounded corner styles */
.wp-block-image.is-style-rounded-sm img {
	border-radius: 8px;
}
.wp-block-image.is-style-rounded-md img {
	border-radius: 16px;
}
.wp-block-image.is-style-rounded-lg img {
	border-radius: 30px;
}
.wp-block-image.is-style-rounded-full img {
	border-radius: 50%;
}

/* =================================================================
   Entry Meta Row - Two Columns
   ================================================================= */

.entry-meta-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 15px;
	margin-bottom: 20px;
}

/* .entry-meta-left, */
.entry-meta-right {
	font-weight: bold;
	/* color: #848484; */
}

.entry-meta-left {
	flex: 1;
}

.entry-meta-right {
	flex-shrink: 0;
	text-align: right;
}

.entry-meta-left .entry-meta,
.entry-meta-left p,
.entry-meta-right p {
	margin: 0;
}

@media only screen and (max-width: 768px) {
	.entry-meta-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.entry-meta-right {
		text-align: left;
	}
}

/* =================================================================
	sidebar
================================================================= */

.sidebar .widget {
	margin-bottom: 20px;
}

/* =================================================================
	single-post
================================================================= */

.single-post .site-container {
	background-color: #efeded;
}

.single-post .site-inner {
	padding-top: 0px;
}

.single-post .content {
	margin-top: 20px;
}

.single-post .sidebar {
	background-color: #b2c5b3;
	border-radius: 0 0 20px 20px;
	padding: 20px;
}

.single-post .sidebar .widget:last-child {
	margin-bottom: 0px;
}

.post .entry-title {
	margin-top: 20px;
	border-bottom: 1px solid #3e3e3c;
	font-weight: bold;
}

.single-post .widget_media_image img {
	border-radius: 20px;
}

@media only screen and (max-width: 959.99px) {
	.post.entry {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* =================================================================
	NK Related Posts Widget
================================================================= */

.nk-related-posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nk-related-post {
	padding: 12px 0;
	border-bottom: 1px solid #3e3e3c;
}

.nk-related-post:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.nk-related-post-image {
	display: block;
	margin-bottom: 10px;
}

.nk-related-post-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px;
}

.nk-related-post-title {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 4px;
	line-height: 1.3;
}

.nk-related-post-title a {
	color: #3e3e3c;
	text-decoration: none;
}

.nk-related-post-title a:hover {
	color: #3e3e3c;
}

.nk-related-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.8rem;
	color: #3e3e3c;
	margin-bottom: 4px;
}

.nk-related-post-excerpt {
	font-size: 0.85rem;
	color: #3e3e3c;
	margin: 0 0 4px;
}

.nk-related-read-more {
	font-size: 0.85rem;
	color: #3e3e3c;
	text-decoration: underline;
}

.nk-related-read-more:hover {
	color: #3e3e3c;
}

/* =================================================================
	NK Related Posts Widget
================================================================= */

/* Ultmiate members / Gamipress / Gallery*/

.um {
	opacity: 1 !important;
}

.um-ajax-items {
	display: flex;
	flex-wrap: wrap;
}

.um-ajax-items .um-item {
	width: 49%;
	margin: 10px 0.5%;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member:nth-child(3n - 1) .um-member-cover {
	background-color: #f5e0e7;
}
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member:nth-child(3n) .um-member-cover {
	background-color: #efe9ec;
}
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member:nth-child(3n + 1) .um-member-cover {
	background-color: #e4daea;
}

@media (max-width: 767.9px) {
	.um-ajax-items .um-item {
		width: 100%;
	}
}

.main-header-menu .menu-item:hover > .sub-menu:last-child {
	right: 0;
	left: auto;
}

.gamipress-achievements-container .gamipress-achievement {
	border: 1px solid #999999 !important;
	border-radius: 10px;
	padding: 20px;
}

@media screen and (min-width: 768px) {
	.gamipress-achievements-container .gamipress-achievement {
		margin-right: 1%;
	}

	.gamipress-columns-3 > .gamipress-achievement,
	.gamipress-columns-3 > .gamipress-points,
	.gamipress-columns-3 > .gamipress-points-type,
	.gamipress-columns-3 .gamipress-rank {
		width: 32%;
	}
}

.gamipress-achievement-steps-heading {
	display: none;
}

.um-account-tab-downloads input,
.um-account-tab-achievements input {
	display: none;
}

.um-account-tab-downloads .button,
.um-account-tab-achievements .button {
	display: block;
}

.gamipress-achievement-image img {
	background: #5462a4;
	padding: 20px 40px;
	border-radius: 20px;
	text-align: center;
}

.single-achievement .gamipress-achievement-image {
	width: 25% !important;
	margin-bottom: 20px;
}

.single-achievement .gamipress-achievement-image img {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.single-achievement .gamipress-achievement-description {
	width: 75% !important;
}

@media screen and (max-width: 768px) {
	.single-achievement .gamipress-achievement-image,
	.single-achievement .gamipress-achievement-description {
		width: 100% !important;
	}
}

.gamipress-share-buttons-label {
	margin-bottom: 0 !important;
	font-size: 18px !important;
}

.gamipress-achievements-list .gamipress-achievement-title {
	margin-top: 6px;
	margin-bottom: 6px;
	width: 100%;
}

.gamipress-achieved-date {
	/* background-color: #ee6a1b; */
	padding: 0px 15px;
	border-radius: 20px;
	color: #fff;
	margin-top: 10px;
	display: inline-block;
}

p.gamipress-share-buttons-label {
	display: none;
}

.um-member-directory-search-row {
	display: none !important;
}

.um-cover .um-cover-e {
	background-color: #5462a4 !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
	border-radius: 10px !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-cover {
	border-radius: 10px 10px 0 0 !important;
	height: 128px !important;
	overflow: hidden !important;
	background-color: var(--random-color);
	position: relative;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-cover .um-member-cover-e img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: none;
	width: auto !important;
	height: auto;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member.with-cover .um-member-photo a img {
	width: 120px !important;
	height: 120px !important;
	top: -60px !important;
	margin-bottom: -70px !important;
}

.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .fi {
	font-size: 25px !important;
}

.um-main-meta .fi {
	font-size: 24px;
}

.um-meta .um-faicon-phone {
	color: #16b15b;
}

.um-meta .um-faicon-home {
	color: #678fc9;
}

.um-meta .um-faicon-building {
	color: #897d9e;
}

.artist-services {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	background-color: #fdc6e4;
}

.artist-services-title {
	margin: 20px 0;
	text-align: center !important;
	/* color: #c3527c !important; */
	width: 100%;
	font-family: "Lobster Two" !important;
	font-size: 50px !important;
}

.artist-services > div {
	width: 33%;
}

.artist-services > div > img {
	max-width: 100%;
}

.um-profile-body > p {
	line-height: 4rem;
}

.um-profile img.gamipress-achievement-thumbnail {
	margin: auto !important;
}

.um-meta span {
	color: #3a3a3a !important;
	font-size: 15px !important;
}

.artist-services-grouped {
	margin: 40px auto 0 !important;
	padding-top: 40px;
	border-top: solid 2px #eee;
}

.artist-services-grouped h3 {
	/* color: #ee6a1b !important; */
}

.nk-services-grid {
	margin-top: 1rem;
}

@media screen and (min-width: 768px) {
	.nk-services-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 3.5rem;
	}
}

.nk-service-card {
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: #897d9e;
	border-radius: 1rem;
	position: relative;
	padding: 1rem;
	margin-bottom: 3rem;
}

.nk-service-card h4 {
	margin: 0 !important;
	color: #ffffff !important;
	font-weight: 400 !important;
	font-size: 26px !important;
}

.nk-service-card ul {
	margin-left: 0;
	margin-bottom: 0;
	max-width: 70%;
	line-height: 1.5;
}

.nk-service-card li {
	font-weight: 400;
	font-size: 1.125rem;
	color: #fff;
}

@media screen and (min-width: 768px) {
	.nk-service-card li {
		font-size: 1.5rem;
	}
}

.nk-service-card img {
	border-radius: 9999px;
	max-width: 8rem;
	position: absolute;
	bottom: -1.25rem;
	right: -0.5rem;
	z-index: 10;
}

@media screen and (min-width: 768px) {
	.nk-service-card img {
		max-width: 13rem;
		bottom: -1.25rem;
		right: -2.5rem;
	}
}

@media screen and (max-width: 400px) {
	.nk-service-card ul {
		max-width: 55%;
	}
	.nk-service-card img {
		max-width: 40%;
	}
}

.artist-gallery h3 {
	/* color: #ee6a1b !important; */
}

.artist-gallery-slider figure.wp-block-image {
	position: relative;
}

.artist-gallery-slider figure.wp-block-image img {
	border-radius: 1rem;
}

.artist-gallery-slider figure.wp-block-image figcaption {
	background: linear-gradient(0deg, #000000b3, #0000004d 70%, #0000);
	bottom: 0;
	box-sizing: border-box;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	left: 0;
	margin-bottom: 0;
	max-height: 60%;
	overflow: auto;
	padding: 0 8px 8px;
	position: absolute;
	scrollbar-color: #0000 #0000;
	scrollbar-gutter: stable both-edges;
	scrollbar-width: thin;
	text-align: center;
	width: 100%;
	will-change: transform;
	border-radius: 0 0 1rem 1rem;
}

.um-profile.um-editing .um-cover-overlay {
	display: block !important;
}

@media screen and (max-width: 768px) {
	.um-profile .um-meta-text {
		text-align: left;
	}

	.um-meta > span {
		width: 100%;
		text-align: center;
		margin: 0px;
		font-size: 18px !important;
	}

	.um-meta .b {
		display: none;
	}

	.artist-gallery {
		padding: 20px;
	}

	.artist-gallery h3 {
		text-align: center;
	}

	.artist-services-grouped h3 {
		text-align: center;
	}

	.artist-services-grouped h4 {
		text-align: center;
		padding-right: 80px;
		font-size: 24px !important;
	}
}

.cmtt_related_linked_terms_wrapper {
	background: #e2e2e2;
	padding: 5px 20px;
}

.cmtt_related_terms {
	list-style: none;
	flex-wrap: wrap;
	display: inline-flex;
}
.cmtt_related_terms li {
	padding-left: 0px;
	padding-right: 10px;
	list-style: none;
	list-style-type: none;
}
.cmtt_related_terms li a {
	color: #2d2d49 !important;
	text-decoration: revert;
	font-size: 22px;
}

/* =================================================================
   Tailwind-style Spacing Utilities (margin & padding)
   Scale: 0=0, 1=0.25rem, 2=0.5rem, 3=0.75rem, 4=1rem, 5=1.25rem,
          6=1.5rem, 8=2rem, 10=2.5rem, 12=3rem, 16=4rem, 20=5rem
   ================================================================= */

/* --- gap --- */
.gap-0 {
	gap: 0 !important;
}

/* --- Text Align --- */

.text-center {
	text-align: center;
}

/* --- Margin all sides --- */
.m-0 {
	margin: 0;
}
.m-1 {
	margin: 0.25rem;
}
.m-2 {
	margin: 0.5rem;
}
.m-3 {
	margin: 0.75rem;
}
.m-4 {
	margin: 1rem;
}
.m-5 {
	margin: 1.25rem;
}
.m-6 {
	margin: 1.5rem;
}
.m-8 {
	margin: 2rem;
}
.m-10 {
	margin: 2.5rem;
}
.m-12 {
	margin: 3rem;
}
.m-16 {
	margin: 4rem;
}
.m-20 {
	margin: 5rem;
}
.m-auto {
	margin: auto;
}

/* --- Margin X (left + right) --- */
.mx-0 {
	margin-left: 0;
	margin-right: 0;
}
.mx-1 {
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}
.mx-2 {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}
.mx-3 {
	margin-left: 0.75rem;
	margin-right: 0.75rem;
}
.mx-4 {
	margin-left: 1rem;
	margin-right: 1rem;
}
.mx-5 {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}
.mx-6 {
	margin-left: 1.5rem;
	margin-right: 1.5rem;
}
.mx-8 {
	margin-left: 2rem;
	margin-right: 2rem;
}
.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

/* --- Margin Y (top + bottom) --- */
.my-0 {
	margin-top: 0;
	margin-bottom: 0;
}
.my-1 {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}
.my-2 {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
.my-3 {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}
.my-4 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.my-5 {
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
}
.my-6 {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
.my-8 {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* --- Margin top --- */
.mt-0 {
	margin-top: 0;
}
.mt-1 {
	margin-top: 0.25rem;
}
.mt-2 {
	margin-top: 0.5rem;
}
.mt-3 {
	margin-top: 0.75rem;
}
.mt-4 {
	margin-top: 1rem;
}
.mt-5 {
	margin-top: 1.25rem;
}
.mt-6 {
	margin-top: 1.5rem;
}
.mt-8 {
	margin-top: 2rem;
}
.mt-10 {
	margin-top: 2.5rem;
}
.mt-12 {
	margin-top: 3rem;
}
.mt-16 {
	margin-top: 4rem;
}
.mt-20 {
	margin-top: 5rem;
}

/* --- Margin right --- */
.mr-0 {
	margin-right: 0;
}
.mr-1 {
	margin-right: 0.25rem;
}
.mr-2 {
	margin-right: 0.5rem;
}
.mr-3 {
	margin-right: 0.75rem;
}
.mr-4 {
	margin-right: 1rem;
}
.mr-5 {
	margin-right: 1.25rem;
}
.mr-6 {
	margin-right: 1.5rem;
}
.mr-8 {
	margin-right: 2rem;
}

/* --- Margin bottom --- */
.mb-0 {
	margin-bottom: 0;
}
.mb-1 {
	margin-bottom: 0.25rem;
}
.mb-2 {
	margin-bottom: 0.5rem;
}
.mb-3 {
	margin-bottom: 0.75rem;
}
.mb-4 {
	margin-bottom: 1rem;
}
.mb-5 {
	margin-bottom: 1.25rem;
}
.mb-6 {
	margin-bottom: 1.5rem;
}
.mb-8 {
	margin-bottom: 2rem;
}
.mb-10 {
	margin-bottom: 2.5rem;
}
.mb-12 {
	margin-bottom: 3rem;
}
.mb-16 {
	margin-bottom: 4rem;
}
.mb-20 {
	margin-bottom: 5rem;
}

/* --- Margin left --- */
.ml-0 {
	margin-left: 0;
}
.ml-1 {
	margin-left: 0.25rem;
}
.ml-2 {
	margin-left: 0.5rem;
}
.ml-3 {
	margin-left: 0.75rem;
}
.ml-4 {
	margin-left: 1rem;
}
.ml-5 {
	margin-left: 1.25rem;
}
.ml-6 {
	margin-left: 1.5rem;
}
.ml-8 {
	margin-left: 2rem;
}
.ml-auto {
	margin-left: auto;
}

/* --- Padding all sides --- */
.p-0 {
	padding: 0;
}
.p-1 {
	padding: 0.25rem;
}
.p-2 {
	padding: 0.5rem;
}
.p-3 {
	padding: 0.75rem;
}
.p-4 {
	padding: 1rem;
}
.p-5 {
	padding: 1.25rem;
}
.p-6 {
	padding: 1.5rem;
}
.p-8 {
	padding: 2rem;
}
.p-10 {
	padding: 2.5rem;
}
.p-12 {
	padding: 3rem;
}
.p-16 {
	padding: 4rem;
}
.p-20 {
	padding: 5rem;
}

/* --- Padding X (left + right) --- */
.px-0 {
	padding-left: 0;
	padding-right: 0;
}
.px-1 {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}
.px-2 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.px-3 {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}
.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}
.px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.px-8 {
	padding-left: 2rem;
	padding-right: 2rem;
}
.px-10 {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}
.px-12 {
	padding-left: 3rem;
	padding-right: 3rem;
}

/* --- Padding Y (top + bottom) --- */
.py-0 {
	padding-top: 0;
	padding-bottom: 0;
}
.py-1 {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
.py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.py-3 {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.py-5 {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}
.py-6 {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
.py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.py-10 {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}
.py-12 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* --- Padding top --- */
.pt-0 {
	padding-top: 0;
}
.pt-1 {
	padding-top: 0.25rem;
}
.pt-2 {
	padding-top: 0.5rem;
}
.pt-3 {
	padding-top: 0.75rem;
}
.pt-4 {
	padding-top: 1rem;
}
.pt-5 {
	padding-top: 1.25rem;
}
.pt-6 {
	padding-top: 1.5rem;
}
.pt-8 {
	padding-top: 2rem;
}
.pt-10 {
	padding-top: 2.5rem;
}
.pt-12 {
	padding-top: 3rem;
}

/* --- Padding right --- */
.pr-0 {
	padding-right: 0;
}
.pr-1 {
	padding-right: 0.25rem;
}
.pr-2 {
	padding-right: 0.5rem;
}
.pr-3 {
	padding-right: 0.75rem;
}
.pr-4 {
	padding-right: 1rem;
}
.pr-5 {
	padding-right: 1.25rem;
}
.pr-6 {
	padding-right: 1.5rem;
}
.pr-8 {
	padding-right: 2rem;
}

/* --- Padding bottom --- */
.pb-0 {
	padding-bottom: 0;
}
.pb-1 {
	padding-bottom: 0.25rem;
}
.pb-2 {
	padding-bottom: 0.5rem;
}
.pb-3 {
	padding-bottom: 0.75rem;
}
.pb-4 {
	padding-bottom: 1rem;
}
.pb-5 {
	padding-bottom: 1.25rem;
}
.pb-6 {
	padding-bottom: 1.5rem;
}
.pb-8 {
	padding-bottom: 2rem;
}
.pb-10 {
	padding-bottom: 2.5rem;
}
.pb-12 {
	padding-bottom: 3rem;
}

/* --- Padding left --- */
.pl-0 {
	padding-left: 0;
}
.pl-1 {
	padding-left: 0.25rem;
}
.pl-2 {
	padding-left: 0.5rem;
}
.pl-3 {
	padding-left: 0.75rem;
}
.pl-4 {
	padding-left: 1rem;
}
.pl-5 {
	padding-left: 1.25rem;
}
.pl-6 {
	padding-left: 1.5rem;
}
.pl-8 {
	padding-left: 2rem;
}

/* =================================================================
   FooGallery Filter Dropdowns – horizontal scroll on mobile
   ================================================================= */

@media only screen and (max-width: 768px) {
	.fg-filtering-container .fg-tag-dropdown-wrap {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 8px;
		padding-bottom: 8px;
	}

	.fg-filtering-container .fg-tag-dropdown-wrap .fg-tag-dropdown {
		flex: 0 0 auto;
		width: auto;
	}
}

/* =================================================================
   chat bot
   ================================================================= */

@media only screen and (max-width: 480px) {
	body.era-open {
		overflow: hidden;
	}

	.era-open #era-bubble-panel {
		max-height: calc(100vh - 70px);
	}
}

/* =================================================================
   Archive Grid (SPB-style 3-column layout)
   ================================================================= */

/* Hide the Genesis article wrapper — the grid card is rendered inside */

/* Remove empty entry-header/entry-footer divs */
.blog .content .entry-header,
.blog .content .entry-footer,
.archive .content .entry-header,
.archive .content .entry-footer,
.search .content .entry-header,
.search .content .entry-footer {
	display: none;
}

/* Give the grid wrapper proper spacing */
.archive .content .spb-post-list,
.search .content .spb-post-list {
	max-width: 1200px;
	margin: 0 auto 40px;
}

/* Cycling column background colors */
.archive .spb-post-list article,
.search .spb-post-list article {
	border-radius: 10px;
	padding: 10px;
}

.archive .spb-post-list article:nth-child(3n + 1),
.search .spb-post-list article:nth-child(3n + 1) {
	background-color: #f5e0e7;
}

.archive .spb-post-list article:nth-child(3n + 2),
.search .spb-post-list article:nth-child(3n + 2) {
	background-color: #f0e9ec;
}

.archive .spb-post-list article:nth-child(3n + 3),
.search .spb-post-list article:nth-child(3n + 3) {
	background-color: #e6daea;
}

/* =================================================================
   Related Posts Carousel (single posts)
   ================================================================= */

.nk-related-carousel {
	margin: 40px 0 0;
	padding: 30px 0;
	border-top: 1px solid #e5e7eb;
}

.nk-related-carousel__title {
	font-size: 1.2em;
	margin: 0 0 20px;
	text-transform: uppercase;
}

.nk-related-carousel__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.nk-related-carousel__track::-webkit-scrollbar {
	display: none;
}

.nk-related-carousel__card {
	flex: 0 0 calc((100% - 40px) / 3);
	scroll-snap-align: start;
	min-width: 0;
}

.nk-related-carousel__card .spb-post-image img {
	border-radius: 8px;
}

.nk-related-carousel__card .spb-post-title {
	font-size: 1em;
	padding-bottom: 8px;
	border-bottom-width: 2px;
}

.nk-related-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Navigation bar: arrows + dots */
.nk-related-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
	padding: 12px 0;
}

.nk-related-carousel__arrow {
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	border: 2px solid #9fb7a1;
	background: transparent;
	color: #3e3e3c;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background 0.2s,
		border-color 0.2s,
		color 0.2s;
	flex-shrink: 0;
	padding: 0;
	line-height: 0;
}

.nk-related-carousel__arrow svg {
	display: block;
	width: 20px;
	height: 20px;
}

.nk-related-carousel__arrow:hover {
	background: #9fb7a1;
	border-color: #9fb7a1;
	color: #fff;
}

.nk-related-carousel__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nk-related-carousel__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #d1c7c1;
	border: none;
	padding: 0;
	cursor: pointer;
	transition:
		background 0.2s,
		transform 0.2s;
}

.nk-related-carousel__dot.is-active {
	background: #3e3e3c;
	transform: scale(1.3);
}

@media (max-width: 768px) {
	.nk-related-carousel {
		padding-left: 15px;
		padding-right: 15px;
	}

	.nk-related-carousel__card {
		flex: 0 0 85%;
	}
}

@media (max-width: 480px) {
	.nk-related-carousel__card {
		flex: 0 0 100%;
	}
}

/* =================================================================
   Search results header
   ================================================================= */

.nk-search-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.nk-search-form {
	display: flex;
	align-items: center;
	flex: 1 1 300px;
	max-width: 500px;
	border: 1px solid #d1c7c1;
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.nk-search-form input[type="search"] {
	flex: 1;
	border: none;
	padding: 10px 16px;
	font-size: 16px;
	outline: none;
	background: transparent;
	font-family: inherit;
}

.nk-search-form button {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	padding: 10px 14px;
	cursor: pointer;
	color: #3e3e3c;
}

.nk-search-form button:hover {
	color: #897d9e;
}

.nk-search-back {
	white-space: nowrap;
	font-size: 15px;
	font-weight: 500;
	color: #897d9e;
	text-decoration: none;
}

.nk-search-back:hover {
	color: #3e3e3c;
	text-decoration: underline;
}

@media (max-width: 600px) {
	.archive-description,
	.spb-post-list,
	.archive-pagination {
		padding: 0 15px;
	}
	.nk-search-header {
		/* flex-direction: column;
		align-items: stretch; */
	}

	.nk-search-form {
		max-width: none;
		flex: 1;
	}

	.nk-search-back {
		/* text-align: right;
		display: flex;
		align-items: center;
		justify-content: center; */
	}
}