/* Social sharing */
.social-sharing {
	display: flex;
	flex-wrap: wrap;
 	gap: 10px;
}

.social-sharing a.gb-button {
	display: inline-flex;
 	align-items: center;
  	justify-content: center;
  	font-size: 14px;
  	padding: 8px;
  	border-radius: 50%;
  	border: 1px solid var(--contrast-4);
  	background-color: var(--base);
  	color: var(--contrast-3);
	transition: color .1s ease-in-out,background-color .1s ease-in-out;
}

.social-sharing a.gb-button:hover {
	color: var(--contrast-2);
}

.social-sharing a.gb-button .gb-icon {
	line-height: 0;
	font-size: 14px;
	color: var(--contrast-3);
}

.social-sharing a.gb-button .gb-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.social-sharing a.gb-button.x:hover {
	background-color: var(--contrast);
} 

.social-sharing a.gb-button.facebook:hover .gb-icon,
.social-sharing a.gb-button.whatsapp:hover .gb-icon,
.social-sharing a.gb-button.telegram:hover .gb-icon,
.social-sharing a.gb-button.reddit:hover .gb-icon,
.social-sharing a.gb-button.email:hover .gb-icon,
.social-sharing a.gb-button.copy-URL:hover .gb-icon {
	color: var(--base-2);
}

.social-sharing a.gb-button.x:hover .gb-icon {
	color: #FFFFFF;
}

[data-theme=dark] .social-sharing a.gb-button.x:hover .gb-icon {
	color: var(base-2);
}

.social-sharing a.gb-button.facebook:hover {
	background-color: #3b5998;
}

.social-sharing a.gb-button.whatsapp:hover {
	background-color: #25d366;
}

.social-sharing a.gb-button.telegram:hover {
	background-color: #0088cc;
}

.social-sharing a.gb-button.reddit:hover {
	background-color: #ff4500;
}

.social-sharing a.gb-button.email:hover {
	background-color: #319324;
}

.social-sharing a.gb-button.copy-URL:hover {
	background-color: #816B5B;
}

/* Comments */
.comments-area {
	padding: 20px;
    background-color: var(--base-2);
	border: 1px solid var(--contrast-4);
    border-radius: 10px;
}

.comments-area #comment-nav-above {
	margin-bottom: 0;
}

.comments-area #comment-nav-below {
	margin-bottom: 1em;
}

.comments-area ol.comment-list li:first-child:not(.parent) {
	margin-bottom: -2em;
}

.comments-area .comment-content {
	border-radius: 10px;
	background-color: var(--base);
}

.comments-area .comment-list .reply a {
	padding: 6px 10px;
	border: 1px solid var(--contrast-4);
	text-decoration: underline;
	border-radius: 10px;
	background-color: var(--base-2);
}

.comments-area .comment-list ul.children {
	border-radius: 10px;
}

.comments-area .comment-form .logged-in-as a,
.comments-area .forum-comments-footer a {
	text-decoration: underline;
	text-underline-offset: 0.1578em;
}

.comments-area .comment-form .logged-in-as a:hover,
.comments-area .forum-comments-footer a:hover {
	text-decoration: none;
}

.comments-area .comment-form .comment-form-comment textarea,
.comments-area .comment-form .form-submit .submit {
	border-radius: 3px;
}

.comments-area .forum-comments .forum-comment {
    border-bottom-color: var(--contrast-4);
}

.forum-comment-user {
	display: flex;
	align-items: center;
}

.forum-comment-user > .forum-comment-attribution {
	flex-grow: 1;
    text-align: right;
	margin-top: -4px;
}

.forum-comment-user > .forum-comment-byline {
	margin-top: -4px;
}

.forum-comment-user .forum-comment-byline a.forum-comment-date,
.forum-comment-user .forum-comment-attribution a.forum-comment-count {
	color: var(--contrast-3);
}

.forum-comments .forum-comments-footer {
	background-color: var(--base-2);
	border: 1px solid var(--contrast-4);
	border-radius: 10px;
}

.forum-comments .forum-comments-more button {
	background-color: var(--accent-2);
}

.forum-comments .forum-comments-more button:hover {
	background-color: var(--accent);
}

.forum-comments .forum-comments-list blockquote {
	border-left-color: var(--contrast-4);
}

.forum-comments .forum-comments-more button,
.forum-comments .forum-comments-more button.xfwp-loading {
	color: var(--base-2);
}

.forum-comments .forum-comment-actions {
	margin-top: 20px;
	margin-bottom: 20px;
}

.comment-body > .comment-content > p > a,
.forum-comment-text blockquote > p > a {
	color: var(--contrast-2);
}

/* Table of Contents */
div#ez-toc-container.ez-toc-custom.ez-toc-container-direction {
	width: 100%;
	font-size: 90%;
	padding: 20px 20px 12px 20px;
	background: var(--base);
	border-color: var(--contrast-4);
}

#ez-toc-container.ez-toc-custom.ez-toc-container-direction .ez-toc-title,
#ez-toc-container.ez-toc-custom.ez-toc-container-direction ul li a {
	color: var(--contrast-2);
}

#ez-toc-container.ez-toc-custom.ez-toc-container-direction .ez-toc-title {
	font-weight: 700;
}

#ez-toc-container.ez-toc-custom.ez-toc-container-direction .ez-toc-title-toggle a label {
	border-color: var(--contrast-3);
}

#ez-toc-container.ez-toc-custom.ez-toc-container-direction span.ez-toc-icon-toggle-span svg {
	fill: var(--contrast-3) !important;
	color: var(--contrast-3) !important;
}

#ez-toc-container.ez-toc-custom.ez-toc-container-direction ul li a {
	margin-bottom: 8px;
}

/* Blockquote & Quote */
.single.single-post blockquote {
	background-color: var(--base);
	border-left-color: var(--contrast-4);
	border-radius: 10px;
	padding: 30px 50px;
}

.single.single-post blockquote > p {
	font-size: smaller;
}

.single.single-post blockquote::before {
	content: "";
	position: absolute;
    top: 4%;
    left: 2%;
    width: 35px;
    height: 35px;
    background: url('/wp-content/themes/bap_framework/img/quote.svg') top left no-repeat;
    background-size: contain;
    z-index: 1;
}

@media (max-width: 480px) {
	.single.single-post blockquote {
		padding: 60px 20px 20px;
	}
	.single.single-post blockquote::before {
		top: 3%;
    	left: 44%;
	}
	.single.single-post .forum-comment-text blockquote::before {
        top: 12%;
    }
}

.single.single-post blockquote cite {
	font-size: small;
}

.single.single-post .wp-block-pullquote {
	padding: 0;
}

/* Copy button */
.notification {
    position: fixed;
	font-size: 16px;
    bottom: 0;
    right: 20px;
    background-color: var(--contrast-2);
    color: var(--base-2);
    padding: 10px 16px;
    border-radius: 5px 5px 0 0;
    display: none;
    animation: slideIn 0.5s, slideOut 0.5s 2.5s forwards;
	z-index: 100;
}

@keyframes slideIn {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}