/* =============================================================================
   THEME.CSS — Core stylesheet
   Sections:
     1.  Design tokens
     2.  Grid system
     3.  Content entries
     4.  Masonry layout
     5.  Card headers
     6.  Hero layouts (hero-1, hero-2)
     7.  Inner-container modern-3
     8.  Heading styles
     9.  Social sharing
    10.  Related posts
    11.  Load-more / pagination
    12.  AJAX comments
    13.  Widgets
    14.  Ad slots
    15.  Search (live search, search content, Google CSE)
    16.  Loaders (spinner, dot-loader, pulse, loading-area)
    17.  Load-more button
    18.  Social share bar
    19.  Footer fix
    20.  Dark-mode overrides
============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Fluid spacing */
  --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);

  /* Shape */
  --radius: 0.75rem;

  /* Breakpoints (reference only — used in comments & calc) */
  --bp-sm:  37.5rem;   /* 600 px */
  --bp-md:  48rem;     /* 768 px */
  --bp-lg:  64rem;     /* 1024 px */
  --bp-xl:  71.25rem;  /* 1140 px */
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. GRID SYSTEM  (mobile-first, 5 responsive grid variants)
   .grid3-container  → 1 → 2 → 3 columns
   .grid4-container  → 1 → 2 → 3 → 4 columns
   .grid5-container  → 1 → 2 → 3 → 4 → 5 columns
   .card2-container  → 1 → 2 columns
   .card3-container  → 1 → 2 → 3 columns
───────────────────────────────────────────────────────────────────────────── */

#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%;
}

/* ≥ 600 px — bump everything to 2-column baseline */
@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));
  }
}

/* 768 – 1023 px — grid4 / grid5 advance to 3 columns */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  #main-content .grid4-container,
  #main-content .grid5-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 1018 – 1139 px — grid5 advances to 4 columns */
@media (min-width: 63.6875rem) and (max-width: 71.25rem) {
  #main-content .grid5-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ≥ 1024 px — all grids reach their maximum column count */
@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)); 
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. CONTENT ENTRIES  (shared entry wrapper + per-grid typography)
───────────────────────────────────────────────────────────────────────────── */

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

/* Grid entry headers */
.content-entry-grid_3 header,
.content-entry-grid_4 header,
.content-entry-grid_5 header {
  padding: clamp(0.25rem, 1vw, 0.375rem) 0;
}

/* grid-4 / grid-5: strip category-pill styles — plain link */
.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;
}

/* Meta / title sizes */
.content-entry-grid_4 .metas,
.content-entry-grid_5 .metas {
  font-size: clamp(0.65rem, 0.6rem + 0.2vw, 0.7rem);
}

.grid3-container .entry-post-title {
  font-size:   clamp(0.8rem, 0.75rem + 0.4vw, 0.9em);
  line-height: 1.4;
}

.grid4-container .entry-post-title,
.grid5-container .entry-post-title {
  font-size:   clamp(0.7rem, 0.6rem + 0.5vw, 0.9rem);
  line-height: 1.4;
}

/* "Read more" link styles */
.content-entry-grid_3 .read-more a,
.content-entry-grid_4 .read-more a,
.content-entry-grid_5 .read-more a {
  border: none;
}

.content-entry-grid_3 .read-more::after {
  content:   "...";
  font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem);
}

/* Category offset inside cards */
.card2-container .ts-category,
.card3-container .ts-category {
  margin-left: -1rem;
}

/* Misc interactive element in top bar */
.top-extras .fa {
  display: inline-block;
  cursor:  pointer;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. MASONRY LAYOUT
───────────────────────────────────────────────────────────────────────────── */


.content-entry-masonry .featured-image img {
    width: 100%; 
    border-radius: 12px;
}

/* — Masonry inner content scaling — */
.content-entry-masonry .ts-post-header {
  padding:   var(--space-xs);
  font-size: clamp(0.875rem, 0.825rem + 0.3vw, 0.95rem);
}

.content-entry-masonry .metas:not(.meta-separator.metas),
.content-entry-masonry .ts-author-name { 
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.85rem); 
}

.content-entry-masonry .avatar { 
  max-width: 1.3rem; 
  margin: 0.3rem;
  border-radius: 50%;  
}

@media (min-width: 37.5rem) {
  .masonry-container {
    transition: height 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: height;
    overflow: hidden;
  }

  .content-entry-masonry {
      opacity: 0;
      transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .content-entry-masonry.is-ready {
    opacity: 1;
  }

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

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

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

/* If the screen is mobile, ignore what the JavaScript says */
@media (max-width: 599px) {
    .masonry-container {
        height: auto !important; /* Overrides the JS height */
        position: relative !important;
    }

    .content-entry-masonry {
        position: relative !important; /* Overrides absolute */
        transform: none !important;    /* Overrides translate */
        width: 100% !important;        /* Makes items full width */
        margin-bottom: 20px;           /* Adds gap manually */
    }
}



/* ─────────────────────────────────────────────────────────────────────────────
   5. CARD HEADERS
───────────────────────────────────────────────────────────────────────────── */

.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 clamp(0.5rem, 2vw, 0.625rem);
}

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

/* Narrower viewport adjustments for card2 */
@media (max-width: 63.6875rem) {
  .no-sidebar .card2-container header { height: clamp(12rem, 20vw, 13.75rem); }
  .card2-container .entry-post-title  { font-size: clamp(0.9rem, 0.85rem + 0.3vw, 0.98em); }
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. HERO LAYOUTS
───────────────────────────────────────────────────────────────────────────── */

/* Shared wrapper padding for single boxed layouts */
.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%;
}

/* Shared image constraint */
.ts-single-hero-1 .featured-image img,
.ts-single-hero-2 .featured-image img {
  max-height: 90vh;
  object-fit: cover;
}

/* Shared title scale */
.ts-single-hero-1 .entry-post-title,
.ts-single-hero-2 .entry-post-title {
  font-size:   clamp(1rem, 0.6rem + 1.5vw, 1.8rem);
  line-height: 1.5;
}

/* Shared avatar treatment */
.ts-single-hero-1 .avatar,
.ts-single-hero-2 .avatar {
  margin:        clamp(0.1rem, 0.4vw, 0.2rem) 0;
  border-radius: 50%;
}

/* Shared meta margin */
.ts-single-hero-1 .metas,
.ts-single-hero-2 .metas {
  padding-top: clamp(0.2rem, 0.8vw, 0.4rem);
}

/* ── Hero 1 ── */

.ts-single-hero-1 {
  position:      relative;
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
  overflow:      hidden;
}

.ts-single-hero-1 .ts-meta-info  { 
  margin-bottom: clamp(0.5rem, 2vw, 0.625rem); 
}
.ts-single-hero-1 .ts-post-header { 
  width: min(90%, var(--bansta-site-content-size)); 
}

@media (min-width: 37.5rem) {
  .ts-single-hero-1 .ts-post-header {
    position: absolute;
    bottom:   clamp(0.625rem, 2vw, 1rem);
    left:     clamp(1rem, 5vw, 3rem);
  }

  .ts-single-hero-1 .featured-image img { filter: brightness(0.55); }
  .ts-single-hero-1 .entry-post-title   { color: #fff !important; }

  .ts-single-hero-1 .metas,
  .ts-single-hero-1 .ts-post-comments .fa {
    color:       #c0c0c0;
    font-weight: 500;
  }
}

/* ── Hero 2 ── */

.ts-single-hero-2 {
  display:        flex;
  flex-direction: column-reverse; /* mobile: image above text */
  gap:            var(--space-md);
  margin-bottom:  var(--space-lg);
}

.ts-single-hero-2 header           { 
  padding-left: clamp(0.5rem, 2vw, 0.625rem); 
}
.ts-single-hero-2 .ts-post-header,
.ts-single-hero-2 .featured-image  { 
  width: 100%; 
}

.ts-single-hero-2 .ts-meta-info {
  margin-top:    clamp(0.5rem, 2vw, 0.625rem);
  margin-bottom: clamp(0.5rem, 2vw, 0.625rem);
}

.ts-single-hero-2 .entry-post-title {
  font-size:   clamp(1rem, 0.9rem + 0.8vw, 1.2em);
  line-height: 1.4;
}

/* Tablet: restore natural column order */
@media (min-width: 48rem) {
  .ts-single-hero-2              { flex-direction: column; }
  .ts-single-hero-2 .entry-post-title {
    font-size:   clamp(1.1rem, 1rem + 0.8vw, 1.4em);
    line-height: 1.4;
  }
}

/* Desktop: side-by-side (40/60 split) */
@media (min-width: 64rem) {
  .ts-single-hero-2              { flex-direction: row; }
  .ts-single-hero-2 .ts-post-header { width: 40%; }
  .ts-single-hero-2 .featured-image  { width: 60%; }
  .ts-single-hero-2 .entry-post-title {
    font-size:   clamp(1.2rem, 1rem + 1vw, 1.8rem);
    line-height: 1.5;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. INNER-CONTAINER MODERN-3
───────────────────────────────────────────────────────────────────────────── */

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

@media (min-width: 37.5rem) {
  .inner-container-modern-3 .ts-post-header { margin-right: var(--space-md); }
}

.inner-container-modern-3 .entry-post-title,
.inner-container-modern-3 .metas a,
.inner-container-modern-3 .ts-post-author-name a { color: #fff !important; }

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


/* ─────────────────────────────────────────────────────────────────────────────
   8. HEADING STYLES
───────────────────────────────────────────────────────────────────────────── */

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

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

.heading-style-2::after { border-bottom: solid transparent; }

/* Style 3 — thin full-width rule */
.heading-style-3 { border-bottom: 0.0625rem solid; }

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

/* Style 5 — filled pill */
.heading-style-5 { padding: clamp(0.25rem, 1vw, 0.375rem); }

/* Styles 5 & 7 — primary-color fill, white text */
.heading-style-5,
.heading-style-7 {
  background-color: var(--bansta-primary-color);
  color:            #fff;
}

/* Styles 6 & 7 — inline + full-width rule extension */
.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 clamp(0.25rem, 1vw, 0.375rem);
}

/* Style 7 — chevron extension */
.heading-style-7 {
  position:     relative;
  padding-left: clamp(0.25rem, 1vw, 0.375rem);
}

.heading-style-7 div {
  border-width:     1.375rem;
  border-style:     solid;
  border-color:     transparent transparent transparent var(--bansta-primary-color);
  background-color: var(--bansta-link-color);
  width:            100%;
  margin-left:      clamp(0.5rem, 2vw, 0.75rem);
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. SOCIAL SHARING (single-wide-* & modern-3 layouts)
───────────────────────────────────────────────────────────────────────────── */

[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: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. RELATED POSTS
───────────────────────────────────────────────────────────────────────────── */

[class*="single-wide-"] .related-post-container,
.single-modern-3 .related-post-container {
  padding: clamp(0.875rem, 3.5vw, 1.25rem) 0;
}

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

[class*="single-wide-"] .related-post-container .entry-post-title a,
[class*="single-wide-"] .ts-related-article-title,
.single-modern-3 .related-post-container .entry-post-title a,
.single-modern-3 .ts-related-article-title { color: #fff; }

@media (min-width: 37.5rem) {
  [class*="single-wide-"]:not(.single-wide-2) .ts-meta-info a { color: #fff; }
}

[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: clamp(0.78rem, 0.72rem + 0.2vw, 0.82em);
}

.single-modern-3 .related-post-container .metas a,
[class*="single-wide-"] .related-post-container .metas a { color: #fff; }

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


/* ─────────────────────────────────────────────────────────────────────────────
   11. LOAD-MORE / DEFERRED PAGINATION
───────────────────────────────────────────────────────────────────────────── */

.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;
  position:        relative;
}

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

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

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

.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%);
}

/* "Load more" link button */
.bansta-loadmore-link { display: block; text-align: center; }

.bansta-lodmore-txt {
  border:           0.0625rem solid #fff;
  padding:          clamp(0.0625rem, 0.5vw, 0.125rem) clamp(2rem, 6vw, 3.125rem) clamp(0.25rem, 1vw, 0.3125rem);
  font-size:        clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  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);
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. AJAX COMMENTS
───────────────────────────────────────────────────────────────────────────── */

.ajaxified-comments-container {
  margin:        clamp(0.875rem, 3.5vw, 1.25rem) 0;
  border:        0.0625rem solid #ccc;
  background:    #f6f7f9;
  padding:       clamp(0.875rem, 3.5vw, 1.125rem);
  text-align:    center;
  color:         #1d1d1d;
  border-radius: 0.1875rem;
  font-size:     clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  font-weight:   bolder;
}

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

.comment-ajaxified-placeholder .fa {
  color:  #454545 !important;
  margin: 0 clamp(0.25rem, 0.8vw, 0.3125rem);
}

/* Comments wrapper */
.comments-template {
  position:   relative;
  min-height: clamp(2.5rem, 5vw, 3rem);
}

/* Per-comment fade-in */
.comment {
  opacity:   0;
  transform: translateY(10px);
  animation: commentFadeIn 0.3s ease forwards;
}

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

/* Load more comments button */
#ts-load-more-comments {
  padding:          clamp(0.125rem, 0.75vw, 0.1875rem) clamp(1.25rem, 4vw, 1.875rem);
  background-color: var(--bansta-primary-color);
  border-color:     var(--bansta-primary-color);
  color:            #fff;
  border-radius:    1.5625rem;
  font-size:        clamp(0.75rem, 0.7rem + 0.3vw, 0.8em);
  margin:           clamp(1rem, 4vw, 1.5625rem) auto;
  display:          block;
}

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


/* ─────────────────────────────────────────────────────────────────────────────
   13. WIDGETS
───────────────────────────────────────────────────────────────────────────── */

.card2 .widget,
.card3 .widget {
  padding:          clamp(0.5rem, 2vw, 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:    clamp(0.375rem, 1.5vw, 0.625rem);
  background-color: #fff;
}

.ts-popular-posts li a {
  font-size:   clamp(0.8rem, 0.5rem + 1.8vw, 0.98rem) !important;
  line-height: 1.4 !important;
}

.widget_Bansta_Widget_Popular_Post li,
.widget_ts_widget_recent_post li,
.ts-popular-posts li,
.t-recent-posts 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);
}

.ts-popular-posts .entry-header,
.ts-recent-posts .entry-header {
  padding: clamp(0.2rem, 0.8vw, 0.34rem) 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. AD 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:       clamp(3rem, 6vw, 3.75rem);
}

.ts-slot-content { margin-bottom: clamp(0.375rem, 1.5vw, 0.625rem); }

.ts-slot-wide {
  margin-top:  clamp(0.375rem, 1.5vw, 0.625rem);
  padding-top: clamp(0.375rem, 1.5vw, 0.625rem) !important;
  max-height:  clamp(5.5rem, 10vw, 6.25rem); /* mobile cap */
}

@media (min-width: 48rem) {
  .ts-slot-wide { max-height: unset; }
}

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

/* Leaderboard ad */
.ts-leaderboard {
  max-width:  clamp(20rem, 70vw, 45.5rem);
  max-height: clamp(4rem, 8vw, 5.625rem);
  width:      100%;
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. SEARCH
───────────────────────────────────────────────────────────────────────────── */

/* Live search dropdown */
.live-search-results {
  display:          grid;
  gap:              clamp(0.375rem, 1.5vw, 0.625rem);
  position:         absolute;
  right:            0;
  top:              clamp(5rem, 8vw, 6.125rem);
  width:            clamp(16rem, 80vw, 25rem);
  max-height:       clamp(18rem, 55vh, 30rem);
  background-color: #fff;
  border-top:       0.1875rem solid var(--bansta-primary-color);
  padding:          clamp(0.375rem, 1.5vw, 0.625rem);
  box-shadow:       0 0.25rem 0.1875rem rgba(0, 0, 0, 0.15);
  overflow-y:       auto;
}

@media (min-width: 37.5rem) {
  .live-search-results {
    width: clamp(18rem, 30vw, 25rem);
    top:   clamp(5.5rem, 7vw, 6.125rem);
  }
}

/* Search result entry */
.search-content-entry .entry-post-title a {
  font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.8em);
}

.search-content-entry .featured-image {
  width: clamp(20%, 25vw, 30%);
  float: left;
}

.search-content-entry .ts-content-wrap {
  float: right;
  width: clamp(65%, 70vw, 70%);
}

.search-content-entry .metas           { font-size: clamp(0.65rem, 0.6rem + 0.2vw, 0.7em); }
.search-content-entry .entry-post-title { line-height: 1.2; }

/* Spinner overlay while searching */
.ts-spiner-icon {
  position:         absolute;
  top:              clamp(4rem, 7vw, 4.75rem);
  right:            clamp(3rem, 8vw, 4.6875rem);
  width:            clamp(1.25rem, 3vw, 1.5625rem);
  height:           clamp(1.25rem, 3vw, 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); }
}

/* Google CSE overrides */
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:          clamp(0.5rem, 1.5vw, 0.625rem) clamp(1.25rem, 3vw, 1.6875rem) !important;
  background-color: var(--bansta-primary-color) !important;
  border-color:     var(--bansta-primary-color) !important;
}

.gsc-search-button          { margin-left: -1.375rem !important; }
.gsst_a                     { margin-left: -2.375rem !important; }

.gsc-search-button-v2 svg {
  height: clamp(0.75rem, 1.5vw, 0.9rem);
  width:  clamp(0.75rem, 1.5vw, 0.875rem);
}

table.gsc-search-box td.gsc-input { padding: clamp(0.5rem, 1.5vw, 0.625rem) !important; }

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

.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; }

.search-no-results .gsc-control-cse        { padding: 1em 0; }
.search-no-results table.gsc-search-box td { width: auto; }


/* ─────────────────────────────────────────────────────────────────────────────
   16. LOADERS  (dot-loader, loading pulse, loading-area)
───────────────────────────────────────────────────────────────────────────── */

/* Dot loader */
.ts-loading {
  display: inline-flex;
  gap:     clamp(0.25rem, 0.8vw, 0.3125rem);
}

.ts-loading div {
  width:         clamp(0.3125rem, 0.8vw, 0.375rem);
  height:        clamp(0.3125rem, 0.8vw, 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); }
}

/* Pulsing circle loader */
.loading-circle {
  width:         clamp(1rem, 2.5vw, 1.25rem);
  height:        clamp(1rem, 2.5vw, 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 wrapper */
.loading-area {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             clamp(0.375rem, 1vw, 0.5rem);
  color:           #555;
  font-size:       clamp(1rem, 0.9rem + 0.5vw, 1.1rem);
  font-style:      italic;
}

.loading-text { color: #333; }


/* ─────────────────────────────────────────────────────────────────────────────
   17. LOAD-MORE BUTTON  (spinner + button states)
───────────────────────────────────────────────────────────────────────────── */

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

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

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

.load-more {
  border:           0.0625rem solid #fff;
  padding:          clamp(0.0625rem, 0.5vw, 0.125rem) clamp(2rem, 6vw, 3.125rem) clamp(0.25rem, 1vw, 0.3125rem);
  font-size:        clamp(0.85rem, 0.8rem + 0.3vw, 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:        clamp(9rem, 20vw, 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: clamp(0.875rem, 0.825rem + 0.3vw, 0.9375rem); color: white; }
.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: clamp(0.5rem, 1.5vw, 0.75rem); }
.load-more .loading-area.hidden  { display: none; }

/* End-of-feed message */
.end-message {
  text-align: center;
  color:      #777;
  font-size:  clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
  border-top: 0.0625rem solid #eee;
  max-width:  min(37.5rem, 100%);
}


/* ─────────────────────────────────────────────────────────────────────────────
   18. SOCIAL SHARE BAR
───────────────────────────────────────────────────────────────────────────── */

.social-share {
  display: flex;
  height:  auto;
}

.social-share span {
  margin-top:   clamp(0.375rem, 1.5vw, 0.625rem);
  margin-right: clamp(0.375rem, 1.5vw, 0.625rem);
}

.social-share > div {
  padding: clamp(0.25rem, 1vw, 0.375rem);
  height:  clamp(2.25rem, 4vw, 2.6875rem);
  width:   clamp(2.5rem, 4.5vw, 3rem);
}

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

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

.social-share svg  { fill: #fff; }
.social-share .fa  { color: #f8f8f8; }

.share-nodes      { font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem); }
.share-nodes p    { font-size: clamp(0.82rem, 0.77rem + 0.3vw, 0.9em); word-break: keep-all; }

.share-nodes .fa {
  color:      #000;
  font-size:  clamp(1.25rem, 1.2rem + 0.3vw, 1.4375rem);
  margin-top: clamp(-0.25rem, -0.5vw, -0.3125rem);
}

/* Platform brand colours (positional — order matches markup) */
.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: #f00; }
.social-share div:nth-child(5) { background-color: #13e72b; }

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


/* ─────────────────────────────────────────────────────────────────────────────
   19. FOOTER FIX  (full-bleed single layouts need centred footer)
───────────────────────────────────────────────────────────────────────────── */

[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;
}


/* ─────────────────────────────────────────────────────────────────────────────
   20. DARK-MODE OVERRIDES
───────────────────────────────────────────────────────────────────────────── */

.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);
}