/* IRANYekanX fonts are considered a proprietary software.
To gain information about the laws regarding the use of these fonts, please visit www.fontiran.com

This set of fonts are used in this project under the license: (RCA7X9GU)

''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .content_container ul {
    list-style: inherit;
    margin-right: 32px;
  }

  .content_container ol {
    list-style: decimal;
  }

  .wrapper {
    width: 100%;
  }

  .wp-block-table {
    overflow-x: auto;
  }

  .wp-block-table a{
    color: #0088ff !important;
  }

  .wp-block-table td,
  .wp-block-table th {
    border: 0 !important;
  }

  table {
    min-width: 600px;
    margin: 24px 0;
    width: 100%;
    border-collapse: collapse !important;
    border: none !important;
  }

  table tbody tr:first-child {
    font-size: 16px;
    font-weight: 500;
    background-color: #6f49e8 !important;
    color: #fff !important;
  }

  table tbody tr:first-child a, table tbody tr:first-child strong {
    color: #fff !important;
  }

  tbody tr:first-child th:first-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
  }

  tbody tr:first-child th:last-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
  }

  thead th {
    padding: 9px 24px;
  }

  tbody td:last-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
  }

  tbody td:first-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
  }

  tbody {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1d2939 !important;
  }

  tbody td {
    padding: 12px 24px !important;
    text-align: center;
  }

  tbody tr:nth-child(odd) {
    background-color: #f2f4f7 !important;
  }

  .custom-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
    display: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s;
  }

  @font-face {
    font-family: 'IRANYekanXVFaNumVF';
    src: url('https://cdn.ghasedak24.com/static/content/shared/webfonts/IranYekan/IRANYekanXVFaNumVF.woff2')
    format('woff2-variations');
    src: url('https://cdn.ghasedak24.com/static/content/shared/webfonts/IranYekan/IRANYekanXVFaNumVF.woff')
    format('woff-variations');

    src: url('https://cdn.ghasedak24.com/static/content/shared/webfonts/IranYekan/IRANYekanXVFaNumVF.woff2')
    format('woff2') tech('variations');
    src: url('https://cdn.ghasedak24.com/static/content/shared/webfonts/IranYekan/IRANYekanXVFaNumVF.woff')
    format('woff') tech('variations');

    font-weight: 100 1000;
    font-display: swap;
  }

  body {
    @apply bg-[#F7FAFF];
    font-family: IRANYekanXVFaNumVF !important;
  }

  html {
    font-family: IRANYekanXVFaNumVF !important;
    direction: rtl;
  }

  .customScrollbar::-webkit-scrollbar {
    width: 5px;
  }

  .customScrollbar::-webkit-scrollbar-track {
    background-color: #e4e7ec;
  }

  .customScrollbar::-webkit-scrollbar-thumb {
    background-color: #0275d8;
    border-radius: 16px;
  }
}

.page-numbers {
  width: 2rem;
  height: 2rem;
  font-size: 16px;
  font-weight: 400;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgb(29 41 57 / var(--tw-text-opacity));
  background: white;

  @apply w-8 h-8 text-sm16 shadow-xs rounded-md pt-1 flex items-center justify-center cursor-pointer text-gray-800 bg-white mx-1 hover:text-white hover:bg-purple-primary;
  transition: all 0.3s ease;
}

.page-numbers:hover,
.current {
  background: #0275d8;
  box-shadow: none;
  color: white;
  border: 1px solid #0275d8;
}

@layer components {
  .share {
    float: left;
    overflow: hidden;
    margin-top: -60px;
  }
  .share-social {
    float: right;
    padding-right: 0;
    margin-top: 20px;
    margin-bottom: 0;
  }
  .share-social li {
    display: inline-block;
    padding-left: 10px;
  }
  .share-social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f5f5fb !important;
    font-size: 16px;
    color: #323232;
    text-decoration: none;
    border: 1px solid #f1f1f1 !important;
    transition: all 0.3s ease;
    box-sizing: border-box;
  }
  .share-social a:hover {
    color: #353535;
    background: #f8f8f8;
    border: 1px solid #f8f8f8;
  }

  .categoryContainer h1 {
    @apply text-lg26;
  }

  .categoryContainer h2 {
    @apply text-lg22;
  }

  .categoryContainer h3 {
    @apply text-lg16;
  }

  .categoryContainer p {
    @apply font-bold;
  }

  /* start style of swiper */
  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-pagination {
    top: -2em !important;
  }
  .swiper-pagination-bullet {
    background: #fff !important;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .swiper-button-next,
  .swiper-button-prev {
    color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .swiper-button-next:hover,
  .swiper-button-prev:hover {
    color: #ededed;
  }
  /* end style of swiper */

  .notHoveredBg {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, #000000 100%);
  }

  .hoveredBg {
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0.14%,
            rgba(0, 0, 0, 0.872741) 63.63%,
            #000000 99.86%
    );
  }

  .menuItem {
    @apply relative px-4 mx-2 h-full flex items-center cursor-pointer text-sm14 text-gray-700 pb-5 lg:pb-0;
  }

  .sub-menu {
    display: none;
    /* padding: 0.75rem 0 !important; */
  }

  /* start styling of the nested header on mobile */
  @media screen and (max-width: 992px) {
    .clickedSubMenu {
      width: 100%;
      background-color: #f2f4f7;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      gap: 1rem;
      flex-direction: column;
      padding-left: 0;
      padding-right: 0;
      margin-top: 20px !important;
    }

    .clickedSubMenu > li {
      padding-bottom: 8px;
      border-bottom: 1px solid #e4e7ec;
    }

    .clickedSubMenu li:last-child {
      padding-bottom: 0 !important;
      border-bottom: none !important;
    }

    .menu-item-has-children {
      margin-bottom: 20px;
      width: 100%;
      display: flex;
      flex-direction: column !important;
    }

    .menu-item-has-children > a {
      position: absolute;
      right: 20px;
    }

    .collapseIcon {
      position: absolute;
      right: 0;
      padding-left: 0.75rem;
    }
  }
  /* end styling of the nested header on mobile */

  /* start styling of the nested header on desktop */
  @media screen and (min-width: 992px) {
    .collapseIcon {
      display: none;
    }

    li > ul.sub-menu {
      position: absolute;
      display: flex;
      visibility: hidden;
      flex-direction: column;
      gap: 1.5rem;
      min-width: max-content;
      top: 100%;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 3px 8px 0px #4f4f4f1a;
      font-size: 14px;
      opacity: 0;
      font-weight: 400;
      color: #475467;
      border-bottom: 1px solid #f2f4f7;
      padding-top: 1rem;
      padding-bottom: 1rem;
      transition: opacity 0.2s ease-in;
      z-index: 100;
      width: 220px;
    }

    li:hover > ul.sub-menu {
      visibility: visible;
      opacity: 1 !important;
    }
  }
  /* end styling of the nested header on desktop */

  .paginationButton {
    @apply w-8 h-8 text-sm16 shadow-xs rounded-md pt-1 flex items-center justify-center cursor-pointer text-gray-800 bg-white mx-1 hover:text-white hover:bg-purple-primary;
  }

  .purpleTextHover {
    @apply hover:text-blue-900 transition duration-300 ease-linear;
  }

  .arrowIconHover {
    @apply group-hover:stroke-blue-900 transition duration-300 ease-linear;
  }

  .boxHover {
    @apply hover:shadow-md transition duration-300 ease-linear;
  }

  .textHover {
    @apply hover:text-purple-primary transition duration-300 ease-linear;
  }

  .buttonHover {
    @apply hover:bg-white hover:border hover:shadow-none hover:border-purple-primary hover:text-purple-primary transition duration-300 ease-linear;
  }

  .singlePage h1 {
    @apply text-lg26 text-gray-900 leading-[40.27px] pt-6;
  }

  .singlePage h2 {
    @apply text-lg22 text-gray-800 leading-[34.08px] pt-6;
  }

  .singlePage h3 {
    @apply text-lg20 text-gray-800 leading-[30.98px] pt-6;
  }

  .singlePage h4 {
    @apply text-lg18 text-gray-800 leading-[27.88px] pt-6;
  }

  .singlePage h5 {
    @apply text-lg18 text-gray-800 leading-[27.88px] pt-6;
  }

  .singlePage h6 {
    @apply text-lg16 text-gray-800 leading-[24.78px] pt-6;
  }

  .singlePage #table-of-content li {
    height: 2rem;
    max-height: 2rem !important;
  }

  .singlePage h1 + ol,
  .singlePage h1 + ul,
  .singlePage h2 + ol,
  .singlePage h2 + ul,
  .singlePage h3 + ol,
  .singlePage h3 + ul,
  .singlePage h4 + ol,
  .singlePage h4 + ul,
  .singlePage h5 + ol,
  .singlePage h5 + ul,
  .singlePage h6 + ol,
  .singlePage h6 + ul,
  .singlePage ol + p,
  .singlePage ul + p,
  .singlePage p + ul,
  .singlePage p + ol,
  .singlePage figcaption {
    @apply pt-2;
  }

  .singlePage figcaption {
    color: #667085 !important;
    text-align: center;
    @apply text-sm14 leading-[25.2px];
  }

  .singlePage p:not(.introduce-post-component p) {
    @apply pt-2 text-sm16 text-gray-800 leading-[32.8px];
    text-align: justify;
  }

  .singlePage b {
    @apply text-lg16 text-gray-800 leading-[28.8px];
  }

  .singlePage strong {
    @apply text-lg16 text-gray-800 leading-[28.8px];
  }

  .singlePage a:not(.introduce-post-component a) {
    @apply underline text-md16 text-purple-primary leading-[28.8px] cursor-pointer;
  }

  .singlePage ul a:not(.introduce-post-component a) {
    @apply no-underline text-md14 text-purple-primary leading-8;
  }

  .singlePage ul {
    @apply text-sm16 text-gray-600 leading-[28.8px] pt-6;
  }

  .singlePage ol {
    @apply text-sm16 text-gray-600 leading-[28.8px] px-8 pt-6;
  }

  .singlePage img:not(.introduce-post-component img) {
    margin-top: 24px !important;
    border-radius: 8px !important;
    margin: auto;
  }

  .singlePage .introduce-post-component #readMore {
    padding-bottom: 8px;
  }

  .singlePage blockquote {
    margin: 24px 0 !important;
    background-image: none,
    url('../icons/editSweeter.svg');
    background-repeat: no-repeat;
    background-position: 32px 50%, calc(100% - 32px) 50%;
    background-color: #f2f4f7 !important;
    padding: 16px !important;
    @apply rounded-lg col-span-12;
    display: flex;
    justify-content: start;
  }

  .singlePage blockquote > p {
    color: #1d2939 !important;
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    padding-right: 60px !important;
    @apply leading-[25.2px];
    max-width: 90%;
  }

  @media screen and (max-width: 992px) {
    .singlePage blockquote {
      background-position: 8px 50%, calc(100% - 20px) 50%;
    }
    .singlePage blockquote > p {
      text-align: right !important;
    }
  }

  .singlePage .tableOfContent p {
    padding-top: 0 !important;
  }

  .singlePage .tableOfContent ul {
    padding-top: 16px !important;
  }

  .singlePage #faq-component .max-h-0 {
    padding-top: 0;
  }

  .headerShadow {
    box-shadow: 0px 3px 8px 0px rgba(79, 79, 79, 0.1);
  }

  .navItem {
    @apply h-full cursor-pointer flex items-center justify-center text-sm14 lg:h-[72px] px-6;
  }

  .navItem > a {
    @apply whitespace-nowrap;
  }

  .truncate {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal !important;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .hideScrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .hideScrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* aspect ratio of images */
  .oneXone {
    aspect-ratio: 1 / 1;
  }

  .twoXone {
    aspect-ratio: 2 / 1;
  }

  .threeXtwo {
    aspect-ratio: 3 / 2;
  }

  .fourXthree {
    aspect-ratio: 4 / 3;
  }

  .sixXfour {
    aspect-ratio: 6 / 4;
  }

  .sixteenXnine {
    aspect-ratio: 16 / 9;
  }
  /* end of image aspect ratios */
}