/*
 * Theme Name:   Magbet
 * Theme URI:    http://magbet.com/
 * Description:  Jannah Child Theme modified by Arzumanyan.ca for Magbet.com. Custom styles for the home page, single post template, and various UI elements across the site.
 * Author:       Artak Arzumanyan
 * Author URI:   https://Arzumanyan.ca
 * Template:     jannah
 * Version:      1.0.0
 * License:      license purchased
 * License URI:  http://themeforest.net/licenses/regular_extended
 * Tags:         two-columns, buddypress, left-sidebar, right-sidebar, custom-menu,
 *               editor-style, featured-images, full-width-template, microformats,
 *               rtl-language-support, sticky-post, threaded-comments, translation-ready
 * Text Domain:  jannah-child
 *
 * TABLE OF CONTENTS
 * -----------------
 * 0.  Design Tokens (CSS Custom Properties)
 * 1.  Global / Shared Styles
 *     1a. Jannah Tabs UI
 * 2.  Post Template — Inner Sections
 *     2a. Related Partners
 *     2b. Related Events
 * 3.  Home Page
 *     3a. Featured Posts Block
 *     3b. Latest Most Viewed Posts Blocks
 *     3c. Sponsor / Directory Block (WPBDP)
 *     3d. Interview (50% Width) Block
 *     3e. Upcoming Events Block
 *     3f. Custom Sliders
 *     3g. Newsletter Subscribe Widget
 *     3h. Partner News Block
 * 4.  Sidebar
 * 5.  Single Post
 * 6.  Header Navigation
 * 7.  Footer
 * 8.  Utility
 * 9.  Archive page - Overlay Loop
 * 10.  Industry page - Directory Listings
 */

/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand */
  --color-brand-red: #f30004;
  --color-brand-blue: #0077ff;
  --color-brand-orange: #ff9d00;
  --color-brand-green: #06cb5b;
  --color-brand-purple: #bc00eb;

  /* Neutrals */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey-text: #7a7a7a;
  --color-grey-text-alt: #c3c3c3;
  --color-grey-nav: #919191;
  --color-grey-nav-hover: #7e7e7e;
  --color-grey-border: #8e8e8e;
  --color-grey-light: #cccccc;
  --color-grey-dark: #262626;
  --color-grey-lighter: #dedede;
  --color-grey-bg: #f5f5f5;

  /* UI surfaces */
  --color-card-bg: #363636;
  --color-card-bg-hover: #777777;
  --color-dark-bg: #1f2024;

  /* Alphas */
  --color-divider: rgba(0, 0, 0, 0.1);
  --color-overlay-dark: rgba(0, 0, 0, 0.07);
  --color-overlay-light: rgba(255, 255, 255, 0.07);
  --color-badge-bg: rgba(17, 139, 232, 0.12);

  /* Border radii */
  --radius-sm: 3px;
  --radius-md: 7px;
  --radius-lg: 16px;

  /* Shared sizes */
  --size-thumb-float: 110px;
  --size-share-btn: 26px;
}

/* ============================================================
   1. GLOBAL / SHARED STYLES
   ============================================================ */

/* --- 1a. Jannah Tabs UI ---
   Overrides default tab line-height, text colour, and active-tab
   background to match the site brand colour.                      */

.thumb-overlay:after,
.first-post-gradient li:first-child .post-thumb:after,
.scroll-2-box .post-thumb:after {
  height: 100%;
  transition: opacity 0.2s;
  background-image: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.95)
  );
}
.tabs-wrapper {
  ul.tabs {
    margin-bottom: 0;

    li {
      width: 50%;
      a {
        line-height: 3.5rem;
        color: var(--color-grey-text);

        &:hover {
          color: var(--color-black);
        }
      }

      &.active {
        background-color: var(--color-brand-red);

        a {
          color: var(--color-white) !important;
        }
      }
    }
  }
  .tab-content {
    padding: 30px 20px;
    @media screen and (max-width: 768px) {
      padding: 20px 15px;
    }
  }
}

.tabs-multicolor {
  .tabs-wrapper {
    ul.tabs li {
      &.active {
        background-color: var(--color-brand-blue);

        a {
          color: var(--color-white);
        }
      }

      &:last-child.active {
        background-color: var(--color-brand-orange);
      }
    }

    .tab-content {
      /* padding-bottom: 0; */
      padding: 10px 20px 0 20px;
      @media screen and (max-width: 768px) {
        padding: 0px 15px;
      }

      .tab-content-wrap .shortc-button {
        background-color: var(--color-grey-lighter);
        border: 1px solid var(--color-grey-border);
        color: var(--color-black);
        border-radius: var(--radius-md);
        font-size: 14px;
        padding: 7px 15px;
        margin-top: 1rem;
        width: 100%;
        font-weight: 500;

        &:hover {
          background-color: var(--color-brand-blue);
          border-color: var(--color-brand-blue);
          color: var(--color-white);
        }
      }

      &:nth-of-type(2) .tab-content-wrap .shortc-button:hover {
        background-color: var(--color-brand-orange);
        border-color: var(--color-brand-orange);
        color: var(--color-white);
      }
    }
  }
}

#tie-container .post-title,
#content .post-title,
#content {
  a:not(.button, .post-cat, .focus-post-title) {
    background-image: none;
    &:hover {
      text-decoration: none !important;
      color: #424242;
      background-image: none;
    }
  }
}

#content a.post-title,
#tie-container a.post-title {
  background-image: none;
  &:hover {
    text-decoration: none !important;
    color: #424242;
    background-image: none;
  }
}

.main-nav .menu .current-post-ancestor > a {
  color: var(--main-nav-primary-color);
}

.special-class {
  @media (min-width: 1200px) {
    #content {
      max-width: 800px;
    }
  }
  #go-to-content {
    display: none;
  }

  #tie-container #tie-wrapper {
    /* Clear default background color from Jannah to apply dark skin colors */
    background-color: var(--tie-dark-skin-bg, #27292d);
  }
  /* .post-cat:not(.tie-cat-36){
    display: none;
  } */
  .post-cat-wrap {
    display: none;
  }
}
a.post-cat {
  background-color: var(--color-grey-nav);
  color: var(--color-white);
  margin-bottom: 0.25rem;
  &:hover {
    background: var(--color-grey-dark);
  }
}
/* ============================================================
   2. POST TEMPLATE — INNER SECTIONS
   ============================================================ */

/* --- 2a. Related Partners ---
   Flex row of partner logos rendered as icon-only links. font-size: 0
   hides any fallback text while keeping the <img> visible.        */
.related-entities {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.magbet-linked-entity {
  .mag-box-title {
    &.the-global-title {
      h3 {
        margin-bottom: 0;
      }
      &.color-green:before {
        background: var(--color-brand-green);
      }
      &.color-purple:before {
        background: var(--color-brand-purple);
      }
    }
  }
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    li {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 1rem;
      @media screen and (max-width: 768px) {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
      }
      a.image-thumbnail {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-white);
        border-radius: var(--radius-md);
        overflow: hidden;
        min-width: 12rem;
        padding: 1rem;
        img {
          width: 12rem;
          height: auto;
        }
        @media screen and (max-width: 768px) {
          /* margin-left: -1rem;
          margin-right: -1rem;
          border-radius: 0; */
          width: 100%;
        }
      }
      .entity-details {
        width: 100%;
        .entity-name {
          font-size: 1.25rem;
          font-weight: 600;
          margin: 0 0 0.5rem 0;
          color: var(--color-white);
        }
        .entity-description {
          font-size: 1rem;
          font-weight: 300;
          color: var(--color-grey-text-alt);
          margin: 0;
          line-height: 1.25;

          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          div {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            span {
              &.fas {
                display: flex;
                align-items: flex-start;
                justify-content: center;
                color: #888888;
                min-width: 1.5rem;
              }
            }
          }
        }
      }
    }
  }
}
.linked-companies .magbet-related-header {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

ul.magbet-related-partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 1rem;

  li {
    margin: 0;
    padding: 0;
    list-style: none;
    a {
      background: rgba(204, 204, 204, 0.31);
      display: inline-block;
      font-size: 0; /* hide alt/fallback text */
      padding: 0.5rem;

      img {
        height: 2.5rem;
        width: auto;
      }
    }
  }
}

/* --- 2b. Related Events ---
   3-column grid per row: date badge | title + meta | thumbnail.
   Each item except the last gets a subtle bottom divider.         */
.linked-events .magbet-related-header {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

ul.magbet-related-events-list {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    margin: 0 0 0.5rem;
    padding: 0;

    &:not(:last-child) {
      border-bottom: 1px solid var(--color-divider);
    }

    .magbet-event-datetime {
      min-width: 3rem;

      time {
        background-color: var(--color-black);
        padding: 6px 9px;
        color: var(--color-white);
        border-radius: var(--radius-sm);
        display: grid;
        justify-content: center;
        text-align: center;
      }
    }

    .magbet-event-details a {
      color: var(--color-black);
    }

    .magbet-event-thumb {
      max-width: 5rem;
      height: 100%;
      width: auto;
      display: block;
    }
  }
}

.share-links a {
  width: var(--size-share-btn);
  height: var(--size-share-btn);

  .share-btn-icon {
    width: var(--size-share-btn);
    height: var(--size-share-btn);
    line-height: 27px;

    &::before {
      line-height: var(--size-share-btn);
    }
  }
}

/* ============================================================
   3. HOME PAGE
   ============================================================ */

/* --- 3a. Featured Posts Block ---
   Custom fixed-height hero item with a gradient overlay on the
   first post so the white title stays readable on any photo.     */
.magbet-featured-posts-block {
  ul:has(.magbet-featured-posts-item) {
    column-count: 2;
    list-style: none;
    margin: 0 0 0 -6px; /* offset padding on children for consistent gutter */
    padding: 0;

    li {
      float: none !important;
      width: 100% !important;

      &.featured-post-item {
        display: block !important;
        margin-top: 0;

        &:first-child {
          margin-bottom: 1rem;
        }

        &.magbet-regular-posts-block {
          margin-bottom: 0.875rem;
        }
      }

      &:nth-child(2) {
        break-after: column;
      }
    }

    /* "See all" footer button stretches to full width */
    li.featured-block-footer.magbet-featured-posts-block-footer {
      display: flex;
      justify-content: center;
      margin-top: 3rem;
      @media screen and (max-width: 768px) {
        margin-top: 1rem;
      }

      a {
        flex-grow: 1;
        background-color: var(--color-grey-lighter);
        color: var(--color-black);
        text-align: center;
        border: 1px solid var(--color-grey-border);
        border-radius: var(--radius-md);
        font-size: 14px;
        padding: 7px 15px;
        margin: 0;
        &:hover {
          background-color: var(--color-brand-red);
          border-color: var(--color-brand-red);
          color: var(--color-white);
        }
      }
    }

    @media screen and (max-width: 768px) {
      column-count: unset;

      li {
        width: 100% !important;
      }
    }
  }

  .featured-post-item.post-item.magbet-featured-posts-item {
    .big-thumb-left-box-inner {
      height: 250px;

      a.post-thumb {
        float: none;
        margin-right: 0;
      }
    }
    @media screen and (max-width: 768px) {
      margin-bottom: 1rem;
    }
  }

  /* Bottom gradient + overlaid title for the lead (first) featured post */
  li.magbet-featured-posts-item.post-item {
    .post-thumb::after {
      content: "";
      position: absolute;
      z-index: 1;
      left: 0;
      right: 0;
      bottom: 0;
      height: 50%;
      transition: opacity 0.2s;
      background-image: linear-gradient(
        to bottom,
        transparent,
        rgba(0, 0, 0, 0.8)
      );
      backface-visibility: hidden;

      @media screen and (max-width: 768px) {
        height: 75%;
      }
    }

    .post-content {
      width: 100%;
      padding: 12px 20px;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    .post-title {
      font-size: 1.25rem;
      line-height: 1.2;
      margin: 5px 0;

      @media screen and (max-width: 768px) {
        font-size: 1rem;
        line-height: 1.125;
      }

      a {
        color: var(--color-white);
        text-decoration: none;
        background: none;

        &:hover {
          text-decoration: none;
          background: none;
        }
      }
    }

    .thumb-meta .post-meta {
      color: var(--color-white);
    }
  }

  /* Clamp all post-listing titles to 3 lines to keep card heights
     consistent across varied headline lengths.                    */
  li.post-item .post-details .post-title {
    min-height: 3.125rem;

    a {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      line-height: 1;
      background: none;
    }
  }
}

/* --- 3b. Latest Most Viewed Posts Blocks ---
   Both blocks share identical layout (float thumb + text), so they
   are combined into a single ruleset to avoid duplication.         */
.sc-latest-posts.posts-items,
.most-viewed-posts.posts-items {
  li {
    /* float: left; */
    margin-top: 24px;
    padding: 0 2%;
    list-style: none;

    &:first-child {
      margin-top: 0;
    }

    .post-title {
      font-size: 16px;
      line-height: 1.25;

      a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        background: none;
      }
    }

    .post-thumb {
      float: left;
      margin-right: 15px;

      img {
        max-width: var(--size-thumb-float);
      }
    }
  }
}

/* --- 3c. Sponsor / Directory Block (WPBDP) ---
   3-up card grid for business directory listings. Cards darken on
   hover to signal interactivity. Several native WPBDP UI elements
   are suppressed for a cleaner embed look.                         */

/* "Add listing" action button — top-right, above the grid */
.mag-box-container .magbox-industry-derectory-action {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.8rem;
  margin-top: -3rem;

  @media screen and (max-width: 768px) {
    margin-top: 0;
    margin-bottom: 1rem;

    a {
      width: 100%;
    }
  }

  .shortc-button {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-grey-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    padding: 7px 15px;
    margin: 0;

    &:hover {
      background-color: var(--color-brand-green);
      border-color: var(--color-brand-green);
    }
  }
}

/* Card grid */
.industry-directory-container {
  .wpbdp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;

    .wpbdp-listing {
      background-color: var(--color-card-bg);
      overflow: hidden;
      border-radius: var(--radius-md);

      &:hover {
        background-color: var(--color-card-bg-hover);
        cursor: pointer;
      }

      /* Logo thumbnail area */
      .listing-thumbnail {
        overflow: hidden;
        border: 1px solid var(--color-divider);

        a {
          background-color: var(--color-grey-bg);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 1rem;

          img {
            max-width: 65%;
          }
        }
      }

      /* Card text area */
      .listing-details {
        margin-top: 0.5rem;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 0 1rem 1rem;

        @media screen and (max-width: 768px) {
          padding: 0.75rem;
          padding-top: 0;
        }

        .wpbdp-field-title {
          font-weight: 600;
          font-size: 14px;
        }

        .wpbdp-field-excerpt {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          font-weight: 300;
          line-height: 1.25;
          font-size: 12px;
          color: var(--color-grey-light);

          .field-label {
            display: none;
          }
        }

        .wpbdp-field-category {
          background-color: var(--color-badge-bg);
          padding: 0.125rem 0.5rem;
          border-radius: 0.5rem;
          font-size: 0.875rem;
        }

        /* Suppressed WPBDP fields */
        .wpbdp-field-meta,
        .wpbdp-field-tags,
        .address-info,
        .wpbdp-field-category,
        .wpbdp-field-title .field-label {
          display: none;
        }
      }

      /* Suppressed at listing level */
      .listing-title,
      .listing-actions {
        display: none;
      }
    }

    .wpbdp-pagination {
      display: none;
    }

    /* Mobile: collapse to 2 columns */
    @media screen and (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 0.5rem;

      .wpbdp-listing {
        .listing-thumbnail a {
          padding: 0.25rem;
        }

        .listing-details {
          display: block;

          .wpbdp-field-title {
            font-weight: 600;
          }

          .wpbdp-field-category {
            text-align: center;
            padding: 0;
          }
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .wpbdp-main-box {
      margin-bottom: 1rem;
    }
  }
}

/* --- 3d. Interview (50% Width) Block ---
   Two side-by-side interview cards. The second card gets left padding
   so the gutter between them matches the grid. Category badge is
   repositioned to bottom-left of the thumbnail.                    */
.magbet-v50-featured-partner-posts-block {
  + script + .magbet-v50-featured-partner-posts-block {
    padding-left: 15px;
    padding-right: 0;
  }

  /* Category badge: bottom-left corner of thumbnail */
  .post-thumb-wrapper {
    position: relative;

    .post-cat-wrap {
      position: absolute;
      bottom: 10px;
      left: 10px;
      right: unset;
      margin-bottom: 0;

      .post-cat {
        margin-top: 10px;
      }
    }
  }

  .post-details {
    .post-excerpt {
      min-height: 4.25rem;
    }

    .wp-block-separator {
      margin: 1rem auto;
      width: 100% !important;
      height: 1px;
      border: none;
      border-top: 1px solid var(--color-grey-light);
    }

    .post-title {
      /* Interviewee name displayed as a secondary line below the title */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      .interviewee_name {
        font-weight: 400;
        display: block;
      }

      @media screen and (max-width: 768px) {
        font-size: 1.125rem !important;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
    .post-excerpt {
      @media screen and (max-width: 768px) {
        font-size: 1rem;
        line-height: 1.25;
        min-height: unset;
      }
    }
  }

  /* Hide post meta (date, author) from interview cards */
  .post-regular .post-meta {
    display: none;
  }
}

/* --- 3e. Upcoming Events Block ---
   Ensures the date badge column has a consistent minimum width
   so dates don't collapse on narrow viewports.                  */
.mc-event-list .list_preset_1 .mc-date-badge {
  min-width: 3rem;
}

.industry-events-container {
  .sidebar {
    .the-subtitle .widget-title-icon {
      display: none;
    }

    .posts-list-items .post-widget-body {
      display: flex;
      flex-direction: column-reverse;
      padding: 0;
    }
  }

  .main-content .the-global-title {
    margin-bottom: 0;
  }

  .upcoming-events {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;

    li {
      list-style: none;
      padding: 0;
      margin: 0;

      .magbet-event-card {
        background-color: var(--color-card-bg);
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: all 0.2s ease-in-out;

        a {
          display: flex;
          overflow: hidden;
          height: 200px;
          justify-content: center;
          align-items: center;
          background-color: var(--color-grey-bg);

          img {
            width: 100%;
            height: auto;
            transition: all 0.2s ease-in-out;
          }
        }

        &:hover {
          background-color: var(--color-card-bg-hover);
          cursor: pointer;
        }

        .magbet-event-details {
          display: flex;
          align-items: center;
          padding: 0.5rem 1rem;
          justify-content: space-between;
          font-size: 13px;
          font-weight: 600;

          .magbet-event-location .fas {
            margin-right: 0.25rem;
            color: #888888;
          }

          @media screen and (max-width: 768px) {
            flex-direction: column;
          }
        }
      }
    }
  }

  .mag-box-container .entry > p {
    display: flex;
    justify-content: flex-end;
    position: relative;

    .shortc-button {
      background-color: var(--color-card-bg);
      border: 1px solid var(--color-grey-border);
      border-radius: var(--radius-md);
      font-size: 14px;
      padding: 7px 15px;
      margin: 0;
      position: absolute;
      margin-top: -1.75rem;

      @media screen and (max-width: 768px) {
        width: 100%;
        margin-top: 1rem;
        position: relative;
      }

      &:hover {
        background-color: var(--color-brand-purple);
        border-color: var(--color-brand-purple);
      }
    }
  }
}

/* --- 3f. Custom Sliders ---
   Removes extra bottom margin from the slider wrapper and ensures
   the "previous" arrow is visible even when only one item shows.  */
.magbet-slider-area {
  margin-bottom: 0 !important;

  .main-slider {
    .slick-list {
      /* margin-left: -0.5rem;
      margin-right: -0.5rem; */
      .slide {
        gap: 1rem !important;
        &:not(.slick-active) {
          position: relative;
          &:after,
          &:before {
            content: "";
            width: 1rem;
            background-color: #fff;
            display: block;
            position: absolute;
            top: 0;
            height: 100%;
            right: 0;
            z-index: 1;
            @media screen and (max-width: 768px) {
              width: 0.5rem;
            }
          }
          &:before {
            left: 0;
            z-index: 1;
          }
        }

        @media screen and (max-width: 768px) {
          gap: 0.5rem !important;
        }

        .thumb-title .interviewee_name {
          font-weight: 400;
          display: block;
        }
      }
    }
  }
}

.two-columns-small-thumb .mag-box-options .slider-arrow-nav li:first-child {
  display: block;
}
.magbet-sliders-featured-partner-posts-block {
  .tie-slick-slider {
    .slide {
      @media screen and (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      &:not(:has(> .grid-item:nth-child(1):nth-last-child(2))) {
        .grid-item {
          grid-column: 1 / -1;
        }
      }
    }
  }
}

/* --- 3g. Newsletter Subscribe Widget ---
   Dark submit button, left-aligned subtitle, no decorative
   underline after subtitle text.                                */
.theiaStickySidebar .subscribe-widget {
  .the-global-title::before {
    background: var(--color-black);
  }

  .the-global-title .the-subtitle .widget-title-icon {
    display: none;
  }

  .subscribe-submit {
    background-color: var(--color-black);
    border-radius: var(--radius-md);
  }

  .subscribe-input {
    background-color: var(--color-white);
  }

  .subscribe-subtitle {
    text-align: left;
    padding-bottom: 0;
    margin-bottom: 0;

    &::after {
      content: none;
    }
  }
}

/* --- 3h. Partner News Block ---
   Reverses the order of meta and title.                          */
.partner-news-container .post-details {
  display: flex;
  flex-direction: column-reverse;
  padding-left: 0 !important;
}

/* ============================================================
   4. SIDEBAR
   ============================================================ */
.sidebar {
  /* Spacing below "Most Viewed" header widget */
  .container-wrapper:has(.most-viewed_header) {
    margin-bottom: 1.5rem;
  }

  .most-viewed_header {
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
  }

  /* News shortcode cards: subtle tinted background with rounded corners */
  .magbet-shortcode_sidebar-news .post-details {
    padding: 1rem;
    background-color: var(--color-overlay-dark);
    border-radius: var(--radius-lg);

    .post-title {
      font-size: 13px;
    }

    .post-excerpt {
      font-size: 12px;
    }
  }

  /* Tabs shortcode: remove horizontal padding */
  .sidebar-custom-tab .tabs-shortcode.container-wrapper {
    padding: 0 0 30px;

    @media screen and (max-width: 768px) {
      padding: 0 0 30px 0;
    }
    .tab-content {
      .tab-content-wrap {
        .posts-list-container {
          li {
            float: unset;
            @media screen and (max-width: 768px) {
              padding: 0;
            }
          }
        }
      }
    }
  }

  .widget_custom_html:has(.tabs-shortcode) {
    padding: 0 !important;

    .container-wrapper {
      border: none;
      padding: 0 0 30px;
    }
  }
  .the-global-title {
    .the-subtitle {
      font-size: 1.125rem;
    }
  }
}

/* Dark skin variant: lighten the card background instead of darkening */
.dark-skin .magbet-shortcode_sidebar-news .post-details {
  background-color: var(--color-overlay-light);
}

/* ============================================================
   5. SINGLE POST
   ============================================================ */

/* Pull the top share-button bar up so it sits flush with the
   post header rather than adding unwanted vertical space.     */
.magazine1:not(.has-builder):not(.error404) .main-content,
.magazine1:not(.has-builder):not(.error404) .related-posts-full-width,
.magazine1:not(.has-builder):not(.error404) .main-content,
.magazine1:not(.has-builder):not(.error404)
  .related-posts-full-width
  .tie-col-md-12,
.magazine1:not(.has-builder):not(.error404) .sidebar {
  /* padding-left: 15px;
  padding-right: 15px; */
}
article {
  &.post-content {
    .share-buttons.share-buttons-top {
      margin-top: -3rem;
      @media screen and (max-width: 768px) {
        margin-top: -1rem;
      }
    }
    .post-cat-wrap {
      a.post-cat {
        background: var(--color-grey-nav);
        &:hover {
          background: var(--color-grey-dark);
          color: var(--color-white);
        }
      }
    }
  }
  header {
    .post-title.entry-title {
      margin-top: 15px;
      margin-bottom: 20px;
      line-height: 1.1;
    }
    .single-post-meta {
      .meta-item {
        font-size: 15px;
      }
    }
  }
  .wp-block-image {
    img {
      border-radius: var(--radius-md);
    }
  }
  .tie-full-width-img {
    .wp-block-image {
      img {
        border-radius: 0;
      }
    }
  }
}

#related-posts {
  .related-posts-list {
    .related-item {
      .post-meta {
        display: none;
      }
    }
  }
}

/* Breadcrumb Navigation */
nav#breadcrumb {
  display: none;
}

/* Interviewee Name inside Interview posts */

.featured-area:not(#the-sticky-video) {
  .featured-area-inner {
    position: relative;
    .interviewee-name {
      position: absolute;
      bottom: 0;
      color: #fff;
      /* background: var(--color-brand-blue); */
      padding: 1rem 2rem;
      min-width: 35%;
      font-size: 2rem;
      font-weight: 500;
      text-transform: uppercase;
      @media screen and (max-width: 425px) {
        font-size: 1rem;
        padding: 0.75rem 1.25rem;
      }
    }
  }
}

.post-cat-interviews {
  .featured-area {
    .featured-area-inner {
      position: relative;
      .interviewee-name {
        background: var(--color-brand-blue);
      }
    }
  }
  .entry-header {
    .post-cat-wrap {
      display: none;
    }
  }
}

/* Interview layout fine-tuning */
.post-layout-2 {
  .entry-header-outer {
    padding-top: 0.25rem;
  }
}

.post-cat-odds-wisdom {
  .featured-area {
    .featured-area-inner {
      position: relative;
      .interviewee-name {
        font-size: 3rem;
        padding: 1rem 3rem;
        background: var(--color-brand-orange);
        @media screen and (max-width: 425px) {
          font-size: 1rem;
          padding: 0.5rem;
        }
      }
    }
  }
}

#story-highlights {
  float: unset;
  width: unset;
  margin: 0;
  max-width: unset;
  background-color: var(--color-grey-bg);
  line-height: 1.25;
  padding: 1rem;
  border-radius: var(--radius-md);
  ul {
    li:last-child {
      border: none;
    }
  }
}

.dark-skin #story-highlights {
  background-color: var(--color-grey-dark);
  ul {
    li {
      border-bottom-color: var(--color-grey-nav-hover);
    }
  }
}

/* ============================================================
   6. HEADER NAVIGATION
   ============================================================ */

/* Light-skin top nav: medium-grey bar, slightly darker on hover,
   and no visible border around the topbar wrapper.             */
.top-nav-light {
  .top-nav.header-nav {
    background-color: var(--color-grey-nav) !important;
  }

  #top-nav li a:hover {
    background-color: var(--color-grey-nav-hover);
  }

  .breaking-news-nav li {
    border-color: #a1a1a1;
  }

  &.top-nav-boxed #top-nav .topbar-wrapper {
    border: none;
  }
}

/* Main widget boxes: add top padding, rounded corners, and a faint
   border to visually separate content blocks from the page bg.   */
.container-wrapper {
  padding-top: 20px;
  border-radius: var(--radius-md);
  border-color: rgba(0, 0, 0, 0.13);
  overflow: hidden;
}

body:not(.home) {
  .container-wrapper {
    @media screen and (max-width: 425px) {
      &.post-content,
      &.has-extra-post,
      &.tabs-wrapper,
      &#related-posts,
      &.widget {
        border-radius: 0;
      }
    }
  }
}

/* ============================================================
   7. FOOTER
   ============================================================ */

/* Highlight footer nav links in yellow on hover for visibility
   against dark footer backgrounds.                             */
.footer-menu ul li a:hover {
  color: #ffff00;
}

/* ============================================================
   8. UTILITY
   ============================================================ */

/* "Back to top" button: neutral grey to stay unobtrusive */
a.go-to-top-button {
  background: var(--color-grey-nav);
}

/* ============================================================
   9. ARCHIVE PAGE - OVERLAY LOOP
   ============================================================ */
/* --- 9a. Overlay Loop ---
   Adds the interviewee name to the overlay loop.                */
.thumb-overlay {
  .thumb-content {
    .thumb-title {
      a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        @media screen and (max-width: 425px) {
          line-height: 1;
        }

        overflow: hidden;
        .interviewee_name {
          font-weight: 400;
          display: block;
        }
      }
    }
  }
}

.archive.wpbdp-view-taxonomy {
  article.container-wrapper {
    @media screen and (max-width: 768px) {
      padding: 0;
    }
  }
}

/* --- 9b. Category Title Section ---
   Adds the interviewee name to the overlay loop.                */

@media (max-width: 425px) {
  .magazine1 .masonry-with-spaces.masonry-with-spaces {
    padding: 0 15px;
  }
}

@media (max-width: 425px) {
  .magazine1:not(.has-builder):not(.error404) .sidebar {
    padding-left: 15px;
    padding-right: 15px;
    .container-wrapper.widget {
      border-radius: var(--radius-md);
    }
  }
}

.archive.category {
  #category-title-section {
    &.archive-title-wrapper {
      background-color: #e8e8e8;
      color: #fff;
      border-radius: 10px 10px 0 0;
      padding: 1rem 2rem 1rem 3rem;
      border: none;
      border-bottom: 2px solid #919191;
      h1.page-title {
        position: relative;
        font-weight: 400;
        font-size: 1.5rem;
        line-height: 1;
        color: #000;
        a.cat-parent {
          color: #000;
          opacity: 0.4;
          font-weight: 700;
          &:hover {
            color: #000;
            opacity: 1;
          }
        }
        .cat-title {
          font-weight: 700;
        }
        &:before {
          content: "";
          background: var(--brand-color);
          height: 1.25rem;
          width: 0.875rem;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          margin-left: -1.5rem;
        }
      }
    }

    @media screen and (max-width: 425px) {
      margin: 0 15px;
    }
    /* @media screen and (max-width: 768px) {
      margin: 0 2%;
    } */
  }
  &.category-news,
  &.category-betting,
  &.category-casino,
  &.category-bingo,
  &.category-e-sports,
  &.category-finance,
  &.category-gaming,
  &.category-latest-news,
  &.category-legal,
  &.category-legislation,
  &.category-lottery,
  &.category-online-games,
  &.category-poker,
  &.category-slots,
  &.category-sportsbook,
  &.category-technology,
  &.category-others {
    #category-title-section {
      &.archive-title-wrapper {
        h1.page-title {
          &:before {
            background: var(--color-brand-red);
          }
        }
      }
    }
  }
  &.category-interviews {
    #category-title-section {
      &.archive-title-wrapper {
        h1.page-title {
          font-weight: 700;
          &:before {
            background: var(--brand-color);
          }
        }
      }
    }
  }
  &.category-odds-wisdom {
    #category-title-section {
      &.archive-title-wrapper {
        h1.page-title {
          font-weight: 700;
          &:before {
            background: var(--color-brand-orange);
          }
        }
      }
    }
  }
}

/* ============================================================
   10. INDUSTRY PAGE - DIRECTORY LISTINGS
   ============================================================ */

.wpbdp-main-box {
}