/**
1.0  Normalize
2.0  Common
3.0  Header
      3.1 Top Header 
      3.2 Header Main 
        3.2.1 header--layout-one
4.0  Home Page
      4.1 Introduction Section
      4.2 Tags Categories Group Section
      4.3 Main Banner Section
      4.4 Featured Blogs 
      4.5 Latest Blogs Wrapper
      4.6 Latest Blogs 
      4.7 Pagination
      4.8 Sidebar 
      4.9 You may have missed 
5.0  Footer
6.0  Single Page
      6.1 Breadcrumb
      6.2 Blog Item
      6.3 Post Navigation d
      6.4 Comments
      6.5 Related Posts Missed Section
      6.6 Single Layout Two
7.0  Category Page
8.0  No Results Page
9.0  404 Page
10.0 Theme mode toggle
11.0 Back to top button
**/

/*
=========================================
1.0 Normalize
=========================================
*/
@media (max-width: 1024px) {
  body.site-boxed {
    padding: 50px;
  }

  #content {
    gap: var(--ink-site-vertical-gap-tab);
  }
}

@media (max-width: 768px) {
  body.site-boxed {
    padding: 40px;
  }

  #content {
    gap: var(--ink-site-vertical-gap-mob);
  }
}

@media (max-width: 480px) {
  body.site-boxed {
    padding: 20px;
  }

  #content {
    gap: var(--ink-site-vertical-gap-sm);
  }
}

/*
=========================================
2.0  Common
=========================================
*/
@media (max-width: 1024px) {
  .inkora-container,
  .main-banner-section.width-container {
    padding: 0px var(--ink-site-horizontal-padding-tab);
  }

  .main-wrapper .row {
    gap: 30px;
  }

  .breadcrumb-trail,
  .page-header {
    width: calc((100% - 30px) * 0.7);
  }

  .inkora-row {
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .inkora-container,
  .main-banner-section.width-container {
    padding: 0px var(--ink-site-horizontal-padding-mob);
  }

  .main-wrapper .row {
    flex-direction: column;
    gap: var(--ink-site-vertical-gap-mob);
  }

  .blog .main-wrapper .row,
  .archive .main-wrapper .row,
  .search-results .main-wrapper .row {
    margin-top: 40px;
  }

  .breadcrumb-trail,
  .page-header,
  .site-no-sidebar-compact .breadcrumb-trail,
  .site-no-sidebar-compact .page-header,
  .site-no-sidebar-full .breadcrumb-trail,
  .site-no-sidebar-full .page-header {
    width: 100%;
  }

  .page-header {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .inkora-container,
  .main-banner-section.width-container {
    padding: 0px var(--ink-site-horizontal-padding-sm);
  }
}

/*
=========================================
3.0 Header
=========================================
*/
@media (max-width: 1024px) {
  .site-header {
    margin-bottom: var(--ink-site-vertical-gap-tab);
  }
}

@media (max-width: 768px) {
  .site-header {
    margin-bottom: var(--ink-site-vertical-gap-mob);
  }
}

@media (max-width: 480px) {
  .site-header {
    margin-bottom: var(--ink-site-vertical-gap-sm);
  }
}

/*
=========================================
3.1 Top Header 
=========================================
*/
@media (max-width: 1024px) {
  .social-item-image img {
    height: var(--ink-social-item-image-height-tab);
    width: var(--ink-social-item-image-width-tab);
  }
}

@media (max-width: 768px) {
  .top-header-section .inkora-row,
  .site-footer .inkora-row,
  .site-footer .inkora-inner-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .top-navigation ul a,
  .social-item-title,
  .social-item-users,
  .site-info,
  .site-info a {
    font-size: var(--ink-top-menu-typo-font-size-mob);
  }

  .inkora-social-items {
    justify-content: flex-start;
  }

  .social-item-image img {
    height: var(--ink-social-item-image-height-mob);
    width: var(--ink-social-item-image-width-mob);
  }

  .social-item-title {
    display: none;
  }
}

@media (max-width: 480px) {
  .social-item-image img {
    height: var(--ink-social-item-image-height-sm);
    width: var(--ink-social-item-image-width-sm);
  }
}

/*
=========================================
3.2 Header Main Section
========================================= 
*/
@media (min-width: 1600px) {
  .header--float .header-main-section {
    width: calc(100% - (2 * var(--ink-site-horizontal-padding)));
  }
}

@media (max-width: 1024px) {
  .site-title a {
    font-size: var(--ink-site-title-typo-font-size-tab);
    line-height: var(--ink-site-title-typo-line-height-tab);
    letter-spacing: var(--ink-site-title-typo-letter-spacing-tab);
  }

  .site-description {
    font-size: var(--ink-site-tagline-typo-font-size-tab);
    line-height: var(--ink-site-tagline-typo-line-height-tab);
    letter-spacing: var(--ink-site-tagline-typo-letter-spacing-tab);
  }

  /* header off canvas css */
  .header-off-canvas {
    transition: all 0.3s linear;
  }

  .header-main-section .header-off-canvas,
  .header--layout-one
    .is-sticky
    .header-main-content
    .inkora-row.header-off-canvas {
    min-width: var(--ink-header-off-canvas-width-tab);
  }

  .offcanvas-toggle i {
    font-size: 28px;
  }

  /* floating header */
  .header--float .header-main-section {
    width: calc(100% - var(--ink-site-horizontal-padding-tab));
    padding: 0px var(--ink-site-horizontal-padding-tab);
    margin: var(--ink-site-vertical-gap-tab) 0px;
  }
}

@media (max-width: 768px) {
  .site-title a,
  .is-sticky .header-main-content .site-title a {
    font-size: var(--ink-site-title-typo-font-size-mob);
    line-height: var(--ink-site-title-typo-line-height-mob);
    letter-spacing: var(--ink-site-title-typo-letter-spacing-mob);
  }

  .site-description,
  .is-sticky .header-main-content .site-description {
    font-size: var(--ink-site-tagline-typo-font-size-mob);
    line-height: var(--ink-site-tagline-typo-line-height-mob);
    letter-spacing: var(--ink-site-tagline-typo-letter-spacing-mob);
  }

  .nav-menu li a {
    font-size: var(--ink-header-menu-item-typo1-font-size-mob);
  }

  .buy-coffee-button {
    padding: 10px 14px;
    font-size: 18px;
  }

  .offcanvas-toggle i {
    font-size: 26px;
  }

  /* header off canvas css */
  .offcanvas-close {
    top: 10px;
  }

  .header-main-section .header-off-canvas,
  .header--layout-one
    .is-sticky
    .header-main-content
    .inkora-row.header-off-canvas {
    min-width: var(--ink-header-off-canvas-width-mob);
    padding: 30px 20px 20px;
    gap: 20px;
  }

  .header--layout-one .header-main-section .inkora-row.header-off-canvas {
    gap: 20px;
  }

  /* When sticky */
  .header-main-section.is-sticky {
    position: unset;
    top: unset;
    background: var(--ink-site-header-bg);
    box-shadow: none;
  }

  /* floating header */
  .header--float .header-main-section {
    width: calc(100% - var(--ink-site-horizontal-padding-mob));
    padding: 0px var(--ink-site-horizontal-padding-mob);
    margin: var(--ink-site-vertical-gap-mob) 0;
  }
}

@media (max-width: 480px) {
  .header-main-content,
  .is-sticky .header-main-content {
    padding: 14px 0px;
  }

  .offcanvas-toggle i {
    font-size: 22px;
  }

  /* header off canvas css */
  .header-main-section .header-off-canvas,
  .header--layout-one
    .is-sticky
    .header-main-content
    .inkora-row.header-off-canvas {
    min-width: var(--ink-header-off-canvas-width-sm);
  }

  /* floating header */
  .header--float .header-main-section {
    width: calc(100% - var(--ink-site-horizontal-padding-sm));
    padding: 0px var(--ink-site-horizontal-padding-sm);
    margin: var(--ink-site-vertical-gap-sm) 0;
  }
}

/*
=========================================
4.0  Home Page
========================================= 
*/
@media (max-width: 1024px) {
  .section-title,
  .page-title {
    font-size: var(--ink-section-title-typo-font-size-tab);
  }
}

@media (max-width: 768px) {
  .section-header,
  .blog .page-header,
  .blog .main-wrapper header {
    padding-left: 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .section-title,
  .blog .page-title {
    padding-left: 20px;
    font-size: var(--ink-section-title-typo-font-size-mob);
  }

  .section-title,
  .page-title {
    font-size: var(--ink-section-title-typo-font-size-mob);
  }

  .sub-title,
  .inkora-dark-mode .sub-title {
    white-space: unset;
    max-width: 100%;
    opacity: 1;
    border-radius: 0px 50px 50px 0px;
    max-height: max-content;
    padding: 2px 14px 2px 20px;
  }
}

@media (max-width: 480px) {
  .section-title,
  .page-title {
    font-size: var(--ink-section-title-typo-font-size-sm);
  }
}

/*
=========================================
4.1 Introduction Section
========================================= 
*/
@media (max-width: 1024px) {
  .introduction-section .row {
    padding: 0px 120px;
  }

  .introduction-section .title {
    font-size: var(--ink-introduction-title-typo-font-size-tab);
    line-height: var(--ink-introduction-title-typo-line-height-tab);
    letter-spacing: var(--ink-introduction-title-typo-letter-spacing-tab);
  }

  .introduction-section .description {
    font-size: var(--ink-introduction-description-typo-font-size-tab);
    line-height: var(--ink-introduction-description-typo-line-height-tab);
    letter-spacing: var(--ink-introduction-description-typo-letter-spacing-tab);
  }
}

@media (max-width: 768px) {
  .introduction-section .row {
    padding: 0px 60px;
  }
}

@media (max-width: 480px) {
  .introduction-section .row {
    padding: 0px 20px;
  }

  .introduction-section .title {
    font-size: var(--ink-introduction-title-typo-font-size-mob);
    line-height: var(--ink-introduction-title-typo-line-height-mob);
    letter-spacing: var(--ink-introduction-title-typo-letter-spacing-mob);
  }

  .introduction-section .description {
    font-size: var(--ink-introduction-description-typo-font-size-mob);
    line-height: var(--ink-introduction-description-typo-line-height-mob);
    letter-spacing: var(--ink-introduction-description-typo-letter-spacing-mob);
  }
}

/*
=========================================
4.2 Tags Categories Group Section
========================================= 
*/
@media (max-width: 1024px) {
  .cats-tags-wrapper {
    padding: 0px 36px;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .cats-tags-wrapper {
    padding: 0px 28px;
    gap: 20px;
  }

  .cats-tags-wrapper .inkora-cat-item,
  .category-item-style-one .cats-tags-wrapper .inkora-cat-item,
  .category-item-style-two .cats-tags-wrapper .inkora-cat-item,
  .cats-tags-wrapper .inkora-tag-item,
  .cats-tags-wrapper .inkora-cat-item a,
  .cats-tags-wrapper .inkora-tag-item a {
    font-size: var(--ink-tags-list-item-typo-font-size-mob);
  }
}

@media (max-width: 480px) {
  .cats-tags-wrapper {
    padding: 0px 20px;
  }
}

/*
=========================================
4.3 Main Banner Section
========================================= 
*/
@media (min-width: 1600px) {
  .layout-two .ad-block,
  .slider-block,
  .layout-two .ad-block img,
  .slider-post-thumbnail-wrap img,
  .insta-images-swiper,
  .single-blog-layout-single-two.single .post-thumbnail-wrap .wp-post-image {
    height: 580px;
  }

  .site-wide .layout-two .ad-block,
  .site-wide .slider-block,
  .site-wide .layout-two .ad-block img,
  .site-wide .slider-post-thumbnail-wrap img,
  .site-wide .insta-images-swiper,
  .site-wide.single-blog-layout-single-two.single
    .post-thumbnail-wrap
    .wp-post-image {
    height: 680px;
  }
}

@media (max-width: 1024px) {
  .layout-three-full-width .post-content-wrap > * {
    width: calc(100% - (2 * var(--ink-site-horizontal-padding-tab)));
  }
}

@media (max-width: 768px) {
  .main-banner-section .row {
    flex-direction: column;
  }

  .layout-one-no-ad .slider-block,
  .layout-one-no-ad .insta-images-block,
  .layout-two .ad-block,
  .layout-two .slider-block,
  .layout-two .insta-images-block {
    width: 100%;
  }

  .layout-two .ad-block,
  .slider-block {
    height: 100%;
  }

  .layout-three-full-width .post-content-wrap > * {
    width: calc(100% - (2 * var(--ink-site-horizontal-padding-mob)));
  }

  .post-categories {
    gap: 6px;
  }

  .post-title a {
    font-size: var(--ink-archive-post-title-typo1-font-size-mob);
  }

  .insta-images-block .column-header {
    height: unset;
  }

  .insta-images-block .column-title {
    font-size: var(--ink-archive-post-title-typo1-font-size-mob);
  }
}

@media (max-width: 480px) {
  .layout-three-full-width .post-content-wrap > * {
    width: calc(100% - (2 * var(--ink-site-horizontal-padding-sm)));
  }
}

/*
=========================================
4.4 Featured Blogs 
========================================= 
*/
@media (max-width: 768px) {
  .featured-section .section-header {
    margin-bottom: var(--ink-content-vertical-gap-mob);
  }

  .post-caption {
    right: 10px;
    max-width: 70%;
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
  }

  .post-thumbnail-wrap .read-time,
  .featured-post-thumbnail-wrap .read-time {
    right: 10px;
    bottom: 10px;
  }
}

@media (max-width: 480px) {
  .featured-section .section-header {
    margin-bottom: var(--ink-content-vertical-gap-sm);
  }
}

/*
=========================================
4.5 Latest Blogs Wrapper
========================================= 
*/
@media (max-width: 768px) {
  .site-main,
  .widget-area,
  .site-no-sidebar-compact .site-main {
    width: 100%;
  }

  .site-left-sidebar .main-wrapper .row {
    flex-direction: column;
    gap: 20px;
  }
}

/*
=========================================
4.6 Latest Blogs 
========================================= 
*/
@media (max-width: 1024px) {
  .inkora-card-animate.is-visible .byline .avatar-wrap::after {
    clip-path: inset(0 0 0 0);
  }

  .inkora-card-animate.is-visible .tag-list,
  .inkora-card-animate.is-visible .read-more-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .inkora-card-animate.is-visible .read-more-btn::before,
  .inkora-card-animate.is-visible .read-more-btn::after {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .inner-post-wrap {
    gap: 60px;
  }

  .blog-post-item {
    flex-direction: column;
  }

  .blog-post-item .post-thumbnail-wrap,
  .blog-post-item .post-content-wrap {
    width: 100%;
  }

  .inner-post-wrap .no-thumbnail {
    margin-top: -20px;
  }

  .blog-post-item .post-thumbnail-wrap .read-time {
    bottom: 30px;
  }

  .blog-post-item .post-thumbnail-wrap .wp-post-image,
  .page .article-body .wp-post-image {
    width: calc(100% - 10px);
    height: 320px;
    top: -20px;
  }

  .sticky .post-thumbnail-wrap::before {
    top: -20px;
  }

  .sticky .post-thumbnail-wrap::after {
    top: -6px;
  }

  .blog-post-item .post-caption {
    top: -10px;
  }

  .blog-post-item .post-content-wrap {
    padding: 0px 10px 10px;
  }

  .blog-post-item.no-thumbnail .post-content-wrap {
    padding: 10px;
  }

  .blog-post-item .content-wrap {
    padding-bottom: 0px;
  }

  .blog-layout-grid-one .inner-post-wrap,
  .blog-layout-grid-mixed-one .grid-2-wrap {
    grid-template-columns: 1fr;
  }
}

/*
=========================================
4.7 Pagination
========================================= 
*/
@media (max-width: 1024px) {
  .pagination {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .pagination {
    margin-bottom: 14px;
  }

  .pagination li a,
  .pagination li span {
    padding: 8px 16px;
    font-size: var(--ink-breadcrumb-text-typo-font-size-mob);
  }
}

/*
=========================================
4.8 Sidebar 
========================================= 
*/
@media (max-width: 768px) {
  .widget-area {
    gap: 20px;
  }

  .widget li {
    padding-left: 24px;
  }

  .widget li::before {
    opacity: 1;
  }
}

/*
=========================================
4.9 You may have missed 
========================================= 
*/
@media (max-width: 768px) {
  .you-may-have-missed-section .inkora-container,
  .related-posts-missed-section {
    gap: 30px;
    margin-top: 15px;
  }

  .ymhm-posts-wrap,
  .related-posts-wrap {
    grid-template-columns: 1fr;
  }

  .ymhm-post-title a,
  .related-posts-title a {
    font-size: var(--ink-ymhm-title-typo1-font-size);
  }

  .inkora-post-title-truncate .ymhm-post-title a,
  .inkora-post-title-truncate .related-posts-title a {
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }
}

/*
=========================================
5.0  Footer
========================================= 
*/
@media (max-width: 1024px) {
  .site-footer {
    margin-top: var(--ink-site-vertical-gap-tab);
  }
}

@media (max-width: 768px) {
  .site-footer {
    margin-top: var(--ink-site-vertical-gap-mob);
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .site-footer {
    margin-top: var(--ink-site-vertical-gap-mob);
  }
}

/*
=========================================
6.0  Single Page
6.1 Breadcrumb
========================================= 
*/
@media (max-width: 768px) {
  .breadcrumb-trail .trail-items {
    font-size: var(--ink-breadcrumb-text-typo-font-size-mob);
  }
}

/*
=========================================
6.2 Blog Item
========================================= 
*/
@media (max-width: 1024px) {
  .single .entry-content-row,
  .page .article-body .entry-content {
    padding: 30px 20px;
  }
}

@media (max-width: 768px) {
  .single .blog-post-item .entry-meta,
  .page .page .entry-meta {
    flex-direction: column;
    gap: 4px;
  }

  .single .blog-post-item .entry-title,
  .page .page .entry-title {
    font-size: var(--ink-single-post-title-typo-font-size-mob);
  }

  .entry-footer-meta {
    padding: 14px;
  }

  .single-blog-layout-single-one.single .article-body,
  .page .article-body {
    margin-top: 30px;
  }

  .single-blog-layout-single-one.single
    .blog-post-item
    .thumbnail-has-caption
    .post-caption,
  .page .page .thumbnail-has-caption .post-caption,
  .single-blog-layout-single-one.single
    .blog-post-item.has-thumbnail
    .thumbnail-no-caption
    .entry-content-row,
  .page .page.has-thumbnail .thumbnail-no-caption .entry-content {
    margin-top: 310px;
  }

  .entry-content-row,
  .page .article-body .entry-content {
    padding: 20px;
  }

  .article-body .entry-content {
    gap: 20px;
  }

  .single.site-no-sidebar-full .article-body .entry-content-row,
  .single.site-no-sidebar-compact .article-body .entry-content-row,
  .page.site-no-sidebar-full .article-body .entry-content,
  .page.site-no-sidebar-compact .article-body .entry-content {
    width: 100%;
  }

  .wp-block-quote {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .entry-content-row .post-stats-column {
    display: none;
  }
}

/*
=========================================
6.3 Post Navigation
========================================= 
*/
@media (max-width: 1024px) {
  .post-navigation .nav-previous,
  .post-navigation .nav-next {
    max-width: calc(50% - 40px);
  }
}

@media (max-width: 768px) {
  .post-navigation .nav-previous,
  .post-navigation .nav-next {
    max-width: calc(50% - 30px);
  }

  .post-navigation .nav-links a {
    padding: 6px 10px;
    gap: 6px;
    font-size: var(--ink-breadcrumb-text-typo-font-size-mob);
  }

  .post-navigation .nav-title {
    font-size: 0; /* hides text */
  }

  .post-navigation .nav-links i {
    font-size: var(--ink-breadcrumb-text-typo-font-size-mob);
    /* restores icon size */
  }
}

@media (max-width: 480px) {
  .post-navigation .nav-previous,
  .post-navigation .nav-next {
    max-width: calc(50% - 20px);
  }
}

/*
=========================================
 6.4 Comments
========================================= 
*/
@media (max-width: 768px) {
  .comments-area {
    padding: 10px;
  }

  .comments-area .comment,
  .comment .comment-body {
    gap: 10px;
  }

  .comment .comment-meta {
    gap: 6px;
  }

  .comment-content {
    padding: 30px 20px 10px;
  }

  .comment.depth-1 > .children,
  .comment.depth-2 > .children {
    margin-left: 10px;
  }
}

/*
=========================================
6.5 Related Posts Missed Section
========================================= 
*/
@media (max-width: 768px) {
  .site-left-sidebar .related-posts-missed-section,
  .site-right-sidebar .related-posts-missed-section,
  .site-no-sidebar-compact .related-posts-missed-section {
    width: 100%;
  }
}

/*
=========================================
6.6 Single Layout Two
=========================================
*/
@media (max-width: 1024px) {
  .single-blog-layout-single-two.single .post-thumbnail-wrap .fig-meta-inner {
    flex-direction: column;
    padding: 10px var(--ink-site-horizontal-padding-tab);
  }
}

@media (max-width: 768px) {
  .single-blog-layout-single-two.single .post-thumbnail-wrap .wp-post-image {
    height: 300px;
  }
  .single-blog-layout-single-two.single .post-thumbnail-wrap .fig-meta {
    align-items: flex-start;
    bottom: 10px;
  }

  .single-blog-layout-single-two.single .post-thumbnail-wrap .fig-meta-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px var(--ink-site-horizontal-padding-mob);
  }

  .single-blog-layout-single-two.single
    .post-thumbnail-wrap
    .fig-meta-inner
    .post-caption {
    text-align: start;
  }
}

@media (max-width: 480px) {
  .single-blog-layout-single-two.single .post-thumbnail-wrap .fig-meta-inner {
    flex-direction: column;
    padding: 10px var(--ink-site-horizontal-padding-sm);
  }
}

/*
=========================================
7.0  Category Page
========================================= 
*/
@media (max-width: 1024px) {
  .archive-posts-stat {
    top: -30px;
  }
}

@media (max-width: 768px) {
  .archive-posts-stat {
    padding: 8px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .archive-posts-stat {
    font-size: 14px;
  }
}

/*
=========================================
8.0  No Results Page
========================================= 
*/

@media (max-width: 768px) {
  .search-form {
    width: 80%;
  }
}

@media (max-width: 480px) {
  .search-form {
    width: 100%;
  }
}

/*
=========================================
9.0  404 Page
========================================= 
*/
@media (max-width: 1024px) {
  .error-404 {
    gap: var(--ink-site-vertical-gap-tab);
  }
}

@media (max-width: 768px) {
  .error-404 {
    gap: var(--ink-site-vertical-gap-mob);
  }

  .useful-widgets-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .error-404 {
    gap: var(--ink-site-vertical-gap-sm);
  }
}

/*
=========================================
10.0 Theme mode toggle
========================================= 
*/
@media (max-width: 480px) {
  #inkora-theme-mode-toggle {
    right: 10px;
  }
}

/*
=========================================
11.0 Back to top button
=========================================
*/
@media (max-width: 480px) {
  #inkora-back-to-top {
    right: 10px;
  }
}