/* =========================================================
   CORE STYLES
   Purpose:
   Base styling for layout, typography, components,
   and general UI elements used across the theme.
   ========================================================= */

@layer bricks.reset {
  .card-sec__img,
  .card-blog__img {
    position: relative;
    padding-top: 46%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tc-latest-slider .tc-news-slider .card-blog .card-blog__img {
    padding-top: 66%;
  }

  .tc-topnews > .card-blog:nth-child(3) .card-blog__img {
    padding-top: 54%;
  }

  .news-list__img a {
    position: relative;
    display: block;
    padding-top: 66%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card-sec__img img,
  .card-blog__img img,
  .news-list__img img {
    position: absolute !important;
    top: 0;
    left: 0;
  }

  .splide {
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
  }

  .splide.is-initialized {
    visibility: visible;
    opacity: 1;
    height: auto;
    overflow: visible;
  }

  .splide {
    height: 0;
    transition:
      height 0.4s ease,
      opacity 0.3s ease;
  }

  .splide.is-initialized {
    height: auto;
  }
}

.card-sec {
  border-bottom: 0.2rem solid var(--clr-ent);
  transition: box-shadow 0.3s ease;
}

::-webkit-scrollbar {
  width: 0.6rem;
  height: 0.6rem;
}

::-webkit-scrollbar-track {
  background: #fff;
  box-shadow: inset 0 0 0.3rem rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
  background: #aaa;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border-radius: 50px;
}

.tc-news-slider {
  opacity: 1;
  transform: translateY(0);
  max-height: 100rem;
  overflow: hidden;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    max-height 0.4s ease;
}

.tc-news-slider[data-element="hide"] {
  opacity: 0;
  transform: translateY(-2rem);
  max-height: 0;
  pointer-events: none;
}

.has-link-icon::after {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.2rem;
  background-image: url("../images/icons/link-ico.svg");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-top: 0.6rem;
}

.card-sec__meta::after,
.card-blog__meta::after {
  filter: brightness(0);
}

/* Category Pages */
.tc-ent {
  --clr-primary: var(--clr-ent) !important;
  --clr-primary-l-8: var(--clr-ent) !important;
  --clr-primary-l-9: var(--clr-ent) !important;
  --clr-primary-alt: var(--clr-ent) !important;
  --text-primary: var(--clr-ent-l-1) !important;
  --border-tertiary: var(--clr-ent-l-2) !important;
  --title-bg: var(--clr-ent-l-3) !important;
  --cat-bg: var(--clr-ent-l-4) !important;
  --clr-primary-l-10: var(--clr-ent-l-5) !important;
  --clr-primary-l-6: var(--clr-ent-l-6) !important;
  --topbar-bg: var(--clr-ent-l-7) !important;
  --clr-primary-l-4: var(--clr-ent-l-8) !important;
}

.tc-sports {
  --clr-primary: var(--clr-sports) !important;
  --clr-primary-l-8: var(--clr-sports) !important;
  --clr-primary-l-9: var(--clr-sports) !important;
  --clr-primary-alt: var(--clr-sports) !important;
  --text-primary: var(--clr-sports-l-1) !important;
  --border-tertiary: var(--clr-sports-l-2) !important;
  --title-bg: var(--clr-sports-l-3) !important;
  --cat-bg: var(--clr-sports-l-4) !important;
  --clr-primary-l-10: var(--clr-sports-l-5) !important;
  --clr-primary-l-6: var(--clr-sports-l-6) !important;
  --topbar-bg: var(--clr-sports-l-7) !important;
  --clr-primary-l-4: var(--clr-sports-l-8) !important;
}

.tc-national {
  --clr-primary: var(--clr-national) !important;
  --clr-primary-l-8: var(--clr-national) !important;
  --clr-primary-l-9: var(--clr-national) !important;
  --clr-primary-alt: var(--clr-national) !important;
  --text-primary: var(--clr-national-l-1) !important;
  --border-tertiary: var(--clr-national-l-2) !important;
  --title-bg: var(--clr-national-l-3) !important;
  --cat-bg: var(--clr-national-l-4) !important;
  --clr-primary-l-10: var(--clr-national-l-5) !important;
  --clr-primary-l-6: var(--clr-national-l-6) !important;
  --topbar-bg: var(--clr-national-l-7) !important;
  --clr-primary-l-4: var(--clr-national-l-8) !important;
}

.tc-crime {
  --clr-primary: var(--clr-crime) !important;
  --clr-primary-l-8: var(--clr-crime) !important;
  --clr-primary-l-9: var(--clr-crime) !important;
  --clr-primary-alt: var(--clr-crime) !important;
  --text-primary: var(--clr-crime-1) !important;
  --border-tertiary: var(--clr-crime-l-2) !important;
  --title-bg: var(--clr-crime-l-3) !important;
  --cat-bg: var(--clr-crime-l-4) !important;
  --clr-primary-l-10: var(--clr-crime-l-5) !important;
  --clr-primary-l-6: var(--clr-crime-l-6) !important;
  --topbar-bg: var(--clr-crime-l-7) !important;
  --clr-primary-l-4: var(--clr-crime-l-8) !important;
}

.tc-global {
  --clr-primary: var(--clr-global) !important;
  --clr-primary-l-8: var(--clr-global) !important;
  --clr-primary-l-9: var(--clr-global) !important;
  --clr-primary-alt: var(--clr-global) !important;
  --text-primary: var(--clr-global-l-1) !important;
  --border-tertiary: var(--clr-global-l-2) !important;
  --title-bg: var(--clr-global-l-3) !important;
  --cat-bg: var(--clr-global-l-4) !important;
  --clr-primary-l-10: var(--clr-global-l-5) !important;
  --clr-primary-l-6: var(--clr-global-l-6) !important;
  --topbar-bg: var(--clr-global-l-7) !important;
}

.tc-business {
  --clr-primary: var(--clr-business) !important;
  --clr-primary-l-8: var(--clr-business) !important;
  --clr-primary-l-9: var(--clr-business) !important;
  --clr-primary-alt: var(--clr-business) !important;
  --text-primary: var(--clr-business-l-1) !important;
  --border-tertiary: var(--clr-business-l-2) !important;
  --title-bg: var(--clr-business-l-3) !important;
  --cat-bg: var(--clr-business-l-4) !important;
  --clr-primary-l-10: var(--clr-business-l-5) !important;
  --clr-primary-l-6: var(--clr-business-l-6) !important;
  --topbar-bg: var(--clr-business-l-7) !important;
}

.tc-tech {
  --clr-primary: var(--clr-tech) !important;
  --clr-primary-l-8: var(--clr-tech) !important;
  --clr-primary-l-9: var(--clr-tech) !important;
  --clr-primary-alt: var(--clr-tech) !important;
  --text-primary: var(--clr-tech-l-1) !important;
  --border-tertiary: var(--clr-tech-l-2) !important;
  --title-bg: var(--clr-tech-l-3) !important;
  --cat-bg: var(--clr-tech-l-4) !important;
  --clr-primary-l-10: var(--clr-tech-l-5) !important;
  --clr-primary-l-6: var(--clr-tech-l-6) !important;
  --topbar-bg: var(--clr-tech-l-7) !important;
}

.tc-newsletters {
  --clr-primary: var(--clr-newsletter) !important;
  --text-primary: var(--clr-newsletter-l-1) !important;
  --title-bg: var(--clr-newsletter-l-2) !important;
  --cat-bg: var(--clr-newsletter-l-3) !important;
}

.tc-ent .site-logo,
.tc-ent .nav-close,
.tc-ent .nav-open,
.tc-ent .offcanvas-open,
.tc-ent .offcanvas-close {
  filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(4346%)
    hue-rotate(329deg) brightness(75%) contrast(132%);
}

.tc-sports .site-logo,
.tc-sports .nav-close,
.tc-sports .nav-open,
.tc-sports .offcanvas-open,
.tc-sports .offcanvas-close {
  filter: brightness(0) saturate(100%) invert(21%) sepia(89%) saturate(2390%)
    hue-rotate(9deg) brightness(100%) contrast(102%);
}

.tc-national .site-logo,
.tc-national .nav-close,
.tc-national .nav-open,
.tc-national .offcanvas-open,
.tc-national .offcanvas-close {
  filter: brightness(0) saturate(100%) invert(32%) sepia(80%) saturate(619%)
    hue-rotate(106deg) brightness(95%) contrast(102%);
}

.tc-business .site-logo,
.tc-business .nav-close,
.tc-business .nav-open,
.tc-business .offcanvas-open,
.tc-business .offcanvas-close {
  filter: brightness(0) saturate(100%) invert(10%) sepia(94%) saturate(5321%)
    hue-rotate(352deg) brightness(87%) contrast(110%);
}

.tc-tech .site-logo,
.tc-tech .nav-close,
.tc-tech .nav-open,
.tc-tech .offcanvas-open,
.tc-tech .offcanvas-close {
  filter: brightness(0) saturate(100%) invert(42%) sepia(80%) saturate(486%)
    hue-rotate(145deg) brightness(91%) contrast(98%);
}

.tc-crime .site-logo,
.tc-crime .nav-close,
.tc-crime .nav-open,
.tc-crime .offcanvas-open,
.tc-crime .offcanvas-close {
  filter: brightness(0) saturate(100%) invert(17%) sepia(11%) saturate(1624%)
    hue-rotate(177deg) brightness(89%) contrast(99%);
}

.tc-global .site-logo,
.tc-global .nav-close,
.tc-global .nav-open,
.tc-global .offcanvas-open,
.tc-global .offcanvas-close {
  filter: brightness(0) saturate(100%) invert(21%) sepia(59%) saturate(3009%)
    hue-rotate(217deg) brightness(87%) contrast(102%);
}

.tc-newsletters .site-logo,
.tc-newsletters .nav-close,
.tc-newsletters .nav-open,
.tc-newsletters .offcanvas-open,
.tc-newsletters .offcanvas-close {
  filter: brightness(0) saturate(100%) invert(13%) sepia(70%) saturate(4321%)
    hue-rotate(345deg) brightness(100%) contrast(103%);
}

.search-bar input,
.header-search input {
  padding-left: 4.5rem;
  height: 4rem;
  background-image: url("../images/icons/search-dark.svg");
  background-repeat: no-repeat;
  background-position: 1.2rem center;
  background-size: 2rem 2rem;
}

.wpf-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
}

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.admin-bar .site-wrapper {
  min-height: calc(100vh - 32px);
}

/* ===== POST CONTENT ===== */
.post-content {
  .wp-block-table .has-fixed-layout {
    table-layout: unset !important;
    overflow: hidden;
  }

  iframe {
    margin: 0 auto !important;
    border-radius: var(--radius-md) !important;
  }

  .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  video {
    width: 100% !important;
    border-radius: var(--radius-md);
  }

  table tbody tr:nth-child(even) {
    background-color: var(--clr-primary-l-2);
  }

  table tbody tr:hover {
    background-color: var(--clr-primary-l-3);
  }

  b,
  strong {
    font-weight: 700;
  }

  .wp-block-list {
    margin-top: 0;
  }

  blockquote {
    border-left-color: var(--clr-primary);
    background: var(--cat-bg);
    font-size: var(--text-m);
    padding-block: 0.3rem;
    padding-left: 1rem;
  }

  .wp-block-table thead,
  table th {
    border-bottom: none;
    background: var(--clr-primary);
  }

  .wp-block-table td,
  .wp-block-table th {
    border-color: var(--border-tertiary);
  }

  .wp-block-table .has-fixed-layout th {
    white-space: nowrap;
    min-width: 10rem;
    color: var(--clr-light);
  }

  .wp-block-image img,
  iframe {
    border-radius: var(--radius-md);
  }

  .wp-block-image,
  .wp-block-embed-twitter {
    width: auto !important;
    margin: 1rem auto;
  }
}

.live-search-results .news-list__title {
  color: var(--clr-dark);
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-search-results .news-list {
  flex-wrap: nowrap !important;
  padding-bottom: 0rem !important;
  border-bottom: none;
}

.live-search-results .news-list__img {
  width: 12rem !important;
  border-radius: 1rem !important;
}

.live-search-results .news-list__body {
  width: calc(100% - 1.6rem) !important;
}

#sliding-header-menu {
  position: fixed;
  top: -10rem;
  left: 0;
  right: 0;
  transition: top 0.4s ease;
  z-index: 1000;
  width: 100%;
  align-items: center;
  margin: 0 auto;
  border-bottom: 0.1rem solid var(--border-primary);
}

.comment-bar-wrap {
  display: none;
}

.comment-bar-wrap:has(.comments-form-single) {
  display: block;
}

.next-post-loading #infinite-loader {
  display: block !important;
}

.btn--primary,
.loadmore-btn,
.newsletter-form button,
.tc-bar .btn--sec,
.tc-tipform button,
.newsletter-block .btn--tertiary,
.tc-subscribe .btn--tertiary,
.tc-referral .btn--tertiary,
.search-bar button {
  position: relative;
  overflow: hidden;
}

.btn--primary::before,
.loadmore-btn::before,
.newsletter-form button::before,
.tc-bar .btn--sec::before,
.tc-tipform button::before,
.newsletter-block .btn--tertiary::before,
.tc-subscribe .btn--tertiary::before,
.tc-referral .btn--tertiary::before,
.search-bar button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transition: all 0.6s ease;
}

.btn--primary:hover::before,
.loadmore-btn:hover::before,
.newsletter-form button:hover::before,
.tc-bar .btn--sec:hover::before,
.tc-tipform button:hover::before,
.newsletter-block .btn--tertiary:hover::before,
.tc-subscribe .btn--tertiary:hover::before,
.tc-referral .btn--tertiary:hover::before,
.search-bar button:hover::before {
  left: 100%;
}

.btn--primary::before,
.loadmore-btn::before,
.tc-tipform button::before,
.tc-subscribe .btn--tertiary::before,
.tc-referral .btn--tertiary::before,
.search-bar button::before {
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
}

.newsletter-form button::before,
.tc-bar .btn--sec::before,
.newsletter-block .btn--tertiary::before {
  background: linear-gradient(
    120deg,
    transparent,
    rgba(0, 0, 0, 0.08),
    transparent
  );
}

/* =========================================================
   RESPONSIVE STYLES
   Purpose:
   Media queries and layout adjustments for different
   screen sizes such as tablets, mobiles, and large displays.
   ========================================================= */

/* Card section image for screens smaller than 991px */
@media screen and (max-width: 767px) {
  .card-blog__img {
    padding-top: 54%;
  }

  .post-content {
    .wp-block-gallery {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 820px) {
  .news-grid {
    grid-template-columns: 1fr !important;
  }

  .card-sec .card-sec__img {
    padding-top: unset;
    height: clamp(15.2rem, 19.6vw + 8.928rem, 25rem);
  }
}

@media (max-width: 991px) {
  @layer bricks.reset {
    .card-sec__img {
      position: relative;
      padding-top: 56%;
      width: 100%;
      height: 100%;
    }
  }
}

/* For screens larger than or equal to 1280px */
@media (max-width: 1500px) {
  @layer bricks.reset {
    .card-sec__img {
      padding-top: 52%;
    }
  }
}

/* =========================================================
   THEME STYLES (LIGHT / DARK MODE)
   Purpose:
   Handles visual styling and overrides for both 
   light and dark themes.
   ========================================================= */

[data-brx-theme="dark"] {
  .site-logo,
  .tc-search,
  .tc-dark-toggle,
  .offcanvas-open,
  .tc-popup__icon,
  .creators-bar__icon,
  .comment-open {
    filter: brightness(0) saturate(100%) invert(96%) sepia(35%) saturate(4484%)
      hue-rotate(179deg) brightness(103%) contrast(104%);
  }

  .tc-crime .site-logo,
  .tc-crime .nav-close,
  .tc-crime .nav-open,
  .tc-crime .offcanvas-open,
  .tc-crime .offcanvas-close {
    filter: brightness(0) invert(1);
  }

  .tc-crime {
    .card-sec .card-sec__title,
    .card-sec .tc-meta .item,
    .card-sec .tc-meta .separator,
    .card-primary__title,
    .sec-title,
    .tc-popup__title {
      color: hsl(225, 100%, 94%) !important;
    }

    .card-primary .tc-meta .item:last-child {
      color: hsl(225, 100%, 94%) !important;
    }

    .card-sec,
    .card-primary--outlined,
    .news-list-wrap {
      border: 0.1rem solid#5e6573 !important;
    }
  }

  /* BUSINESS, CRIME */
  .tc-crime {
    .loadmore-btn {
      border: 1px solid var(--clr-crime-l-1) !important;
      color: var(--clr-crime-l-1) !important;
    }
    .loadmore-btn.isloading {
      color: transparent !important;
    }
  }

  .search-bar input,
  .header-search input {
    background-image: url("../images/icons/search-light.svg");
  }
}