:root {
  --space-xs: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.4vw, 1rem);
  --space-md: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);

  --radius: 0.75rem;
}

/* =========================================================
   GRID SYSTEM (Mobile First)
========================================================= */

/* Default: 1 column on small screens */
#main-content .grid3-container,
#main-content .grid4-container,
#main-content .grid5-container,
#main-content .card2-container,
#main-content .card3-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md) var(--space-sm);
  max-width: 100%;
}

/* Tablet: 2 columns where needed */
@media (min-width: 37.5rem) {    
    #main-content .grid3-container,
    #main-content .grid4-container,
    #main-content .grid5-container,
    #main-content .card2-container,
    #main-content .card3-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop */
@media (min-width: 64rem) {
  #main-content .card2-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #main-content .grid3-container,
  #main-content .card3-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #main-content .grid4-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #main-content .grid5-container {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* =========================================================
   REMOVE FIXED HEIGHTS (Intrinsic Layout)
========================================================= */

.content-entry {
  display: flex;
  flex-direction: column;
}

/* =========================================================
   MASONRY (STRUCTURE PRESERVED)
========================================================= */

.masonry-container {
  position: relative;
  width: 100%;
  min-height: clamp(22rem, 30vw, 28rem);
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.masonry-container.is-ready {
  opacity: 1;
}

.content-entry-masonry {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--radius);
  overflow: hidden;
  visibility: hidden;
  will-change: transform;
  transition:
    transform 0.6s cubic-bezier(.165,.84,.44,1),
    opacity 0.4s ease;
}

.masonry-container.is-ready .content-entry-masonry {
  visibility: visible;
}

.content-entry-masonry .ts-post-header {
  padding: var(--space-xs);
  font-size: 0.95rem;
}

.content-entry-masonry .ts-meta-info {
  font-size: 0.85rem;
}

.content-entry-masonry .avatar {
  max-width: 75%;
  margin: 0.125rem;
}

/* Shimmer */
.masonry-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.4),
    transparent
  );
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

.masonry-container.is-ready .masonry-item::before {
  display: none;
}

/* =========================================================
   CARD HEADER (Heights Controlled Safely)
========================================================= */

.card2-container header,
.card3-container header {
  background-color: #fff;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2),
        0 0.375rem 1.25rem rgba(0,0,0,0.19);
  padding: 0 10px;      
}

/* Optional: preserve approximate visual height without hard-locking */
.card2-container header {
  min-height: clamp(13rem, 18vw, 15.5rem);
}

.card3-container header {
  min-height: clamp(11rem, 15vw, 15.5rem);
}

/* =========================================================
   HERO SYSTEM (No Negative Margins)
========================================================= */

.ts-single-boxed [class*="ts-single-hero-"] {
  padding: var(--space-md) var(--space-sm) 0;
}

.ts-single-boxed header {
    padding-left: 0 !important;
}

.ts-single-hero-1,
.ts-single-hero-2 {
  margin-inline: auto;
  max-width: 100%;
}

/* HERO 1 */

.ts-single-hero-1 {
  position: relative;
  margin-bottom: 2rem;
}

.ts-single-hero-1 .featured-image img,
.ts-single-hero-2 .featured-image img {
  max-height: 90vh;
  object-fit: cover;
  filter: brightness(.55);
}

.ts-single-hero-2 header {
    padding-left: 10px;
}

.ts-single-hero-1 .ts-post-header {
  width: min(95%, var(--bansta-site-content-size));
  margin: calc(-4rem) auto var(--space-md);
  position: absolute;
  bottom: 1rem;
  left: 3rem;
}
.ts-single-hero-1 .entry-post-title,
.ts-single-hero-2 .entry-post-title {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
  line-height: 1.5;
}
.ts-single-hero-1 .entry-post-title {
    color: #fff !important;
}
.ts-single-hero-1 .ts-meta-info,
.ts-single-hero-2 .ts-meta-info {
    margin-top: 10px;
    margin-bottom: 10px;
}
.ts-single-hero-1 .metas,
.ts-single-hero-2 .metas {
    padding-top: 0.4rem;
}
.ts-single-hero-1 .metas,
.ts-single-hero-1 .ts-post-comments .fa {
  color: #c0c0c0;
  font-weight: 500;
}

.ts-single-hero-1 .avatar,
.ts-single-hero-2 .avatar {
    margin: 0.2rem 0;
}

/* HERO 2 */

.ts-single-hero-2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (min-width: 1024px) {
  .ts-single-hero-2 {
    flex-direction: row;
  }

  .ts-single-hero-2 .ts-post-header { width: 40%; }
  .ts-single-hero-2 .featured-image { width: 60%; }
}

/* =========================================================
   SOCIAL
========================================================= */

[class*="single-wide-"] {
  margin-block: 0 !important;
}

[class*="single-wide-"] .social-share > div {
  width: 100%;
}

[class*="single-wide-"] .share-nodes {
  width: 30% !important;
}

.single-wide-1 .share-nodes .fa,
.single-wide-2 .share-nodes .fa {
  font-size: 1.5rem;
}

/* =========================================================
   INNER MODERN CONTAINER
========================================================= */

.inner-container-modern-3 .ts-post-header {
  padding: var(--space-md) var(--space-sm) !important;
  margin: calc(-3rem) var(--space-md) var(--space-sm);
  background-color: var(--bansta-primary-color);
  border-radius: var(--radius);
}

.inner-container-modern-3 .entry-post-title {
  color: #fff !important;
}

.inner-container-modern-3 .metas,
.inner-container-modern-3 .ts-post-author-name a,
.inner-container-modern-3 .ts-post-comments .fa {
  color: #ccc;
}

/* =========================================================
   CATEGORY OFFSET
========================================================= */

.card2-container .ts-category,
.card3-container .ts-category {
  margin-left: -1rem;
}

/* =========================================================
   READ MORE
========================================================= */

.content-entry-grid_3 .read-more a,
.content-entry-grid_4 .read-more a,
.content-entry-grid_5 .read-more a {
  border: none;
}

/* =========================================================
   LOAD MORE / READ MORE
========================================================= */

.content-entry-grid_3 .read-more::after {
    content: "...";
    font-size: 0.75rem; /* 12px */
}

.bansta-loadmore-link {
    display: block;
    text-align: center;
}

.bansta-lodmore-txt {
    border: 0.0625rem solid #fff;
    padding: 0.125rem 3.125rem 0.3125rem; /* 2px 50px 5px */
    font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
    font-weight: 600;
    border-radius: 0.9375rem; /* 15px */
    background-color: var(--bansta-primary-color);
    color: #fff;
    box-shadow: 0 0.0625rem 0.5rem rgba(0,0,0,0.6);
}

/* =========================================================
   GRID HEADERS
========================================================= */

.content-entry-grid_3 header,
.content-entry-grid_4 header,
.content-entry-grid_5 header {
    padding: 0.375rem 0; /* 6px */
}

.content-entry-grid_4 .ts-category a,
.content-entry-grid_4 .ts-category-2 a,
.content-entry-grid_5 .ts-category a,
.content-entry-grid_5 .ts-category-2 a {
    background: none;
    color: var(--bansta-link-color);
    padding: 0;
    text-transform: capitalize;
}
.content-entry-grid_4 .ts-category a:hover,
.content-entry-grid_4 .ts-category-2 a:hover,
.content-entry-grid_5 .ts-category a:hover,
.content-entry-grid_5 .ts-category-2 a:hover {
    background: none;
}
.content-entry-grid_4 .metas,
.content-entry-grid_5 .metas {
    font-size: 0.7rem;
}
.grid3-container .entry-post-title,
.grid4-container .entry-post-title,
.grid5-container .entry-post-title {
    line-height: 1.4;
    font-size: clamp(0.7rem, 0.6rem + 0.5vw, 0.9rem);
}

/* =========================================================
   HEADING STYLES
========================================================= */

.heading-style-2 {
    border-bottom: 0.25rem solid var(--bansta-link-color);
    display: inline;
    padding-bottom: 0.5rem;
}

.heading-style-3 {
    border-bottom: 0.0625rem solid;
}

.heading-style-4 {
    display: block;
    background-color: #eeeeee;
    border-left: 0.375rem solid var(--bansta-link-color);
    padding-left: 0.25rem;
}

.heading-style-5 {
    padding: 0.375rem;
}

.heading-style-5,
.heading-style-7 {
    background-color: var(--bansta-primary-color);
    color: #ffffff;
}

.heading-style-6,
.heading-style-7 {
    display: flex;
    white-space: nowrap;
    line-height: 2;
}

.heading-style-6 div {
    display: inline;
    width: 100%;
    border: 0.0625rem solid;
    margin: auto 0 auto 0.375rem;
}

.heading-style-7 {
    position: relative;
    padding-left: 0.375rem;
}

.heading-style-7 div {
    border-width: 1.375rem; /* 22px */
    border-style: solid;
    border-color: transparent transparent transparent var(--bansta-primary-color);
    background-color: var(--bansta-link-color);
    width: 100%;
    margin-left: 0.75rem;
}

/* Fix pseudo usage */
.heading-style-2::after {
    border-bottom: solid transparent;
}

.heading-style-2::after,
.heading-style-3 {
    width: 100%;
    display: block;
    content: "";
    padding-bottom: 0.5rem;
}

/* =========================================================
   RELATED POSTS
========================================================= */

[class*="single-wide-"] .related-post-container,
.single-modern-3 .related-post-container {
    padding: 1.25rem 0; /* 20px */
}

[class*="single-wide-"] .related-post-container .entry-post-title a,
[class*="single-wide-"] .ts-related-article-title,
[class*="single-wide-"]:not(.single-wide-2) .ts-meta-info a,
.single-modern-3 .related-post-container .entry-post-title a,
.single-modern-3 .ts-related-article-title {
    color: #ffffff;
}

[class*="single-wide-"] .related-post-container .metas,
[class*="single-wide-"] .related-post-container .ts-post-comments .fa,
.single-modern-3 .related-post-container .metas,
.single-modern-3 .related-post-container .ts-post-comments a {
    color: #ccc;
    font-size: 0.82em;
}

[class*="single-wide-"] .related-post-container .metas a,
.single-modern-3 .related-post-container .metas a {
    color: var(--bansta-link-color);
}

[class*="single-wide-"] .related-articles,
.single-modern-3 .related-articles {
    background-color: var(--bansta-primary-color);
    padding: 1.25rem;
}

.single-modern-3 {
    margin-bottom: 0;
}

/* =========================================================
   PAGINATION LOADING
========================================================= */

.deferred-loading-container {
    position: relative;
}

.ts-pagin-loading-wrapper {
    position: absolute;
    inset: 0;
    z-index: 99;
}

.ts-pagin-loading-wrapper .bs-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* =========================================================
   AJAX COMMENTS
========================================================= */

.ajaxified-comments-container {
    margin: 1.25rem 0;
    border: 0.0625rem solid #ccc;
    background: #f6f7f9;
    padding: 1.125rem;
    text-align: center;
    color: #1d1d1d;
    border-radius: 0.1875rem;
    font-size: 1rem;
    font-weight: bolder;
}

.comment-ajaxified-placeholder {
    color: #3b3b3b;
}

.comment-ajaxified-placeholder .fa {
    color: #454545 !important;
    margin: 0 0.3125rem;
}

/* =========================================================
   WIDGETS
========================================================= */

.card2 .widget,
.card3 .widget {
    padding: 0.75rem;
    box-shadow:
        0 0.25rem 0.5rem rgba(0,0,0,0.2),
        0 0.375rem 1.25rem rgba(0,0,0,0.19);
    margin-bottom: 0.625rem;
    background-color: #fff;
}

.widget_Bansta_Widget_Popular_Post li,
.widget_ts_widget_recent_post li {
    display: flex;
}

.widget_Bansta_Widget_Popular_Post h4,
.widget_ts_widget_recent_post h4 {
    line-height: 1.2 !important;
    font-size: clamp(0.7rem, 0.6rem + 2vw, 0.8rem);
}

/* =========================================================
   ADS SLOTS
========================================================= */

.ts-slot-wide,
.ts-slot-content,
.ts-slot-loop {
    display: block;
    margin: auto;
    max-width: fit-content;
    word-break: break-word;
    background-color: #f5f5f5;
    min-height: 3.75rem; /* 60px */
}

.ts-slot-content {
    margin-bottom: 0.625rem;
}

.ts-slot-wide {
    margin-top: 0.625rem;
    padding-top: 0.625rem !important;
}

.dark-mode [class*="ts-slot-"] {
    background-color: inherit;
}

/* =========================================================
   LEADERBOARD
========================================================= */

.ts-leaderboard {
    max-width: 45.5rem; /* 728px */
    max-height: 5.625rem; /* 90px */
    width: 100%;
    overflow: hidden;
}

/* =========================================================
   GOOGLE SEARCH / LIVE SEARCH / LOAD MORE
   Enterprise Upgrade – Fluid + Safe
========================================================= */

/* =========================================================
   GOOGLE CSE CLEANUP
========================================================= */

table.gsc-search-box td.gsc-input,
table.gsc-search-box td {
    border: none !important;
}

.gsc-control-cse {
    background-color: transparent;
}

.gsc-input-box {
    border-color: #3B3B3B !important;
}

.gsc-search-button-v2 {
    padding: 0.625rem 1.6875rem !important; /* 10px 27px */
    background-color: var(--bansta-primary-color) !important;
    border-color: var(--bansta-primary-color) !important;
}

.gsc-search-button {
    margin-left: -1.375rem !important; /* -22px */
}

.gsc-search-button-v2 svg {
    height: 0.9rem;
    width: 0.875rem;
}

.search-no-results .gsc-control-cse {
    padding: 1em 0;
}

.search-no-results table.gsc-search-box td {
    width: auto;
}

table.gsc-search-box td.gsc-input {
    padding: 0.625rem !important; /* 10px */
}

.gsst_a .gscb_a {
    color: var(--bansta-red) !important;
}

.gsst_a {
    margin-left: -2.375rem !important; /* -38px */
}

.gsc-results .gsc-cursor-box .gsc-cursor-page,
.gsc-tabHeader.gsc-tabhInactive {
    color: var(--bansta-secondary-color) !important;
}

.gsc-tabHeader.gsc-tabhActive,
.gsc-refinementHeader.gsc-refinementhActive {
    color: var(--bansta-link-color) !important;
    border-color: var(--bansta-link-color) !important;
}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    color: var(--bansta-link-color) !important;
}


/* =========================================================
   LIVE SEARCH (FLUID VERSION – NO FIXED 400PX LOCK)
========================================================= */

.live-search-results {
    display: grid;
    gap: 0.625rem;
    position: absolute;
    right: 0;
    top: 6.125rem; /* 98px preserved */
    width: clamp(18rem, 30vw, 25rem); /* replaces 400px */
    max-height: clamp(20rem, 60vh, 30rem);
    background-color: #ffffff;
    border-top: 0.1875rem solid var(--bansta-primary-color);
    padding: 0.625rem;
    box-shadow: 0 0.25rem 0.1875rem rgba(0,0,0,0.15);
    overflow-y: auto;
}


/* =========================================================
   SEARCH CONTENT
========================================================= */

.search-content-entry .entry-post-title a {
    font-size: 0.8em;
}

.search-content-entry .featured-image {
    width: 30%;
    float: left;
}

.search-content-entry .ts-content-wrap {
    float: right;
    width: 70%;
}

.search-content-entry .metas {
    font-size: 0.7em;
}

.search-content-entry .entry-post-title {
    line-height: 1.2;
}


/* =========================================================
   SPINNER ICON
========================================================= */

.ts-spiner-icon {
    position: absolute;
    top: 4.75rem;  /* 76px */
    right: 4.6875rem; /* 75px */
    width: 1.5625rem;  /* 25px */
    height: 1.5625rem;
    border: 0.125rem solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
    pointer-events: none;
    animation: none;
}

.ts-spiner-icon.is-loading {
    opacity: 1;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}


/* =========================================================
   LOAD MORE BUTTON
========================================================= */

.load-more-wrapper {
    text-align: center;
}

.spinner {
    width: 1rem;
    height: 1rem;
    border: 0.125rem solid #ccc;
    border-top-color: #000;
    border-radius: 50%;
    display: none;
    animation: load 0.8s linear infinite;
}

.load-more {
    border: 0.0625rem solid #fff;
    padding: 0.125rem 3.125rem 0.3125rem;
    font-size: 0.9em;
    font-weight: 600;
    border-radius: 0.9375rem;
    background-color: var(--bansta-primary-color);
    color: #fff;
    box-shadow: 0 0.0625rem 0.5rem rgba(0,0,0,0.6);
    min-width: 11.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.load-more:hover:not(:disabled) {
    background: var(--bansta-link-color);
}

.load-more:disabled,
.load-more.no-more {
    background: #ccc;
    color: #555;
    cursor: not-allowed;
    opacity: 0.8;
}

.loading-text {
    font-size: 0.9375rem;
    color: white;
}

/* Button state logic */

.load-more .btn-text {
    transition: opacity 0.25s ease;
}

.load-more.loading .btn-text {
    opacity: 0;
    position: absolute;
}

.load-more.loading .loading-area {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
}

.load-more .loading-area.hidden {
    display: none;
}


/* =========================================================
   LOADING ANIMATION – PULSE
========================================================= */

.loading-circle {
    width: 1.25rem;
    height: 1.25rem;
    border: 0.25rem solid #0073aa;
    border-radius: 50%;
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

.loading-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #555;
    font-size: 1.1rem;
    font-style: italic;
}

.loading-text {
    color: #333;
}


/* =========================================================
   END MESSAGE
========================================================= */

.end-message {
    text-align: center;
    color: #777;
    font-size: 1.15rem;
    border-top: 0.0625rem solid #eee;
    max-width: 37.5rem;
}


/* =========================================================
   LOAD MORE COMMENTS
========================================================= */

#ts-load-more-comments {
    padding: 0.1875rem 1.875rem;
    background-color: var(--bansta-primary-color);
    color: #fff;
    border-radius: 1.5625rem;
    font-size: 0.8em;
    margin: 1.5625rem auto;
    display: block;
}

#ts-load-more-comments.loading .spinner {
    display: inline-block;
}

#ts-load-more-comments.loading .btn-text {
    opacity: 0.6;
}

@keyframes load {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   COMMENTS / LOADER / RESPONSIVE / SOCIAL
   Enterprise Upgrade – Fluid + Clean
========================================================= */

/* =========================================================
   COMMENTS WRAPPER
========================================================= */

.comments-template {
	position: relative;
	min-height: 3rem; /* 48px */
}

.comment {
    opacity: 0;
    transform: translateY(10px);
    animation: commentFadeIn 0.3s ease forwards;
}

@keyframes commentFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   DEFERRED LOADING
========================================================= */

.deferred-loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.deferred-loading-container.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.deferred-loading-container.is-hiding {
	opacity: 0;
	transform: translateY(-0.75rem);
}

/* Respect reduced motion */

@media (prefers-reduced-motion: reduce) {
	.deferred-loading-container {
		transition: none;
	}
}

/* =========================================================
   DOT LOADER
========================================================= */

.ts-loading {
	display: inline-flex;
	gap: 0.3125rem; /* 5px */
}

.ts-loading div {
	width: 0.375rem;  /* 6px */
	height: 0.375rem;
	background: currentColor;
	border-radius: 50%;
	animation: ts-bounce 1.2s infinite ease-in-out both;
}

.ts-loading div:nth-child(1) { animation-delay: -0.32s; }
.ts-loading div:nth-child(2) { animation-delay: -0.16s; }

@keyframes ts-bounce {
	0%, 80%, 100% { transform: scale(0); }
	40% { transform: scale(1); }
}

/* =========================================================
   MOBILE GRID RESET
========================================================= */

/* Small screens → stack everything */
@media (max-width: 599px) {

	.masonry-container {
		height: auto !important;
		display: flex;
		flex-direction: column;
		gap: 1.25rem; /* 20px */
	}

	.content-entry-masonry {
		position: relative !important;
		transform: none !important;
		width: 100% !important;
		left: 0 !important;
		margin-bottom: 0;
	}

	/* Shimmer */
	.content-entry-masonry::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			90deg,
			#f0f0f0 25%,
			#f8f8f8 50%,
			#f0f0f0 75%
		);
		background-size: 200% 100%;
		animation: loading-shimmer 1.5s infinite;
		z-index: 1;
	}

	.masonry-container.is-ready .content-entry-masonry::before {
		display: none;
	}

	.masonry-container.is-ready .content-entry-masonry {
		background: transparent;
	}

	@keyframes loading-shimmer {
		0% { background-position: 200% 0; }
		100% { background-position: -200% 0; }
	}

	.ts-single-hero-1 .ts-post-header {
		bottom: 2.5rem;
	}

	.ts-single-hero-1 .entry-post-title {
		font-size: 90%;
	}

	.inner-container-modern-3 .ts-post-header {
		margin-right: 0;
	}
}

/* =========================================================
   TABLET BREAKPOINTS
========================================================= */

@media (max-width: 767px) {

	.ts-slot-wide {
		max-height: 6.25rem; /* 100px */
	}

	.ts-single-hero-2 {
		flex-direction: column-reverse;
	}

	.ts-single-hero-2 .ts-post-header,
	.ts-single-hero-2 .featured-image,
	.content-entry-masonry {
		width: 100%;
	}

	.ts-single-hero-2 .entry-post-title {
		font-size: 1.2em;
	}
}

/* Mid-size tablet grid tuning */

@media (min-width: 600px) and (max-width: 767px) {

	#main-content .grid3-container,
	#main-content .grid4-container,
	#main-content .grid5-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ts-single-hero-1 .entry-post-title {
		font-size: 94%;
	}
}

/* =========================================================
   MID SCREEN ADJUSTMENTS
========================================================= */

@media (max-width: 1018px) {

	.card2-container .entry-post-title {
		font-size: 98%;
	}

	.no-sidebar .card2-container header {
		height: 13.75rem; /* 220px */
	}
}

@media (min-width: 600px) and (max-width: 1018px) {

	#main-content .card3-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 1018px) {

	#main-content .grid4-container,
	#main-content .grid5-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ts-single-hero-1 .entry-post-title {
		font-size: 1.4em;
	}

	.grid3-container .entry-post-title {
		font-size: 90%;
	}

	.ts-single-hero-2 .entry-post-title {
		font-size: 1.4em;
		line-height: 1.4;
	}
}

@media (min-width: 1019px) and (max-width: 1140px) {

	#main-content .grid5-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========================================================
   SOCIAL LINKS
========================================================= */

.social-share {
	display: flex;
}

.social-share span {
	margin-top: 0.625rem;
	margin-right: 0.625rem;
}

.social-share > div {
	padding: 0.375rem;
	height: 2.6875rem;
	width: 3rem;
}

.social-share > div:not(.share-nodes) {
	cursor: pointer;
}

.social-share .fa,
.social-share svg {
	font-size: clamp(1.6rem, 1.7rem + 0.5vw, 1.8rem);
}

.share-nodes {
	font-size: 0.75rem;
}

.share-nodes p {
	font-size: 0.9em;
    word-break: keep-all;
}

.share-nodes .fa {
	color: #000;
	font-size: 1.4375rem;
	margin-top: -0.3125rem;
}

.social-share div:nth-child(2) { background-color: #1E1652; }
.social-share div:nth-child(3) { background-color: #0c0c0c; }
.social-share div:nth-child(4) { background-color: #FF0000; }
.social-share div:nth-child(5) { background-color: #13E72B; }

.social-share div:not(:first-child):hover {
	background-color: #ADADAD;
}

@media (max-width: 599px) {
	.social-share {
		height: auto;
	}
}

/* =========================================================
   FOOTER FIX
========================================================= */

[class*="single-wide-"] ~ #site-footer,
[class*="single-wide-"] ~ #site-footer .footer-widgets,
.single-modern-3 ~ #site-footer,
.single-modern-3 ~ #site-footer .footer-widgets {
	margin: 0 auto !important;
}

/* =========================================================
   DARK MODE
========================================================= */

.dark-mode .heading-style-4,
.dark-mode .content-entry-masonry {
	background-color: transparent;
}

.dark-mode .card2 .widget,
.dark-mode .card3 .widget,
.dark-mode .live-search-results {
	background-color: #0c0c0c;
	box-shadow:
		0 0.25rem 0.5rem rgba(250,250,250,0.2),
		0 0.375rem 1.25rem rgba(250,250,250,0.19);
}