/*
Theme Name: SmartMag Child
Theme URI: https://smartmag.theme-sphere.com/
Description: A child theme of SmartMag
Author: ThemeSphere
Author URI: https://theme-sphere.com
Template: smart-mag
Version: 1.1
*/


/* Dot before every main SmartMag menu item */
.navigation .menu > li > a::before {
    content: "•";
    color: #ffffff;
    font-size: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Active menu item - change dot to active link color */
.navigation .menu > li.current-menu-item > a::before,
.navigation .menu > li.current-menu-ancestor > a::before,
.navigation .menu > li.current-menu-parent > a::before {
    color: #ffa5a5;
}


/* Dots before footer menu items */
#menu-footer-links > li > a::before {
    content: "•";
    color: #ffffff;
    font-size: 14px;
    margin-right: 8px;
    vertical-align: middle;
}

/* =========================================================
   SMARTMAG - PREMIUM PREVIOUS / NEXT ARTICLE NAVIGATION
   ========================================================= */

section.navigate-posts {
    position: relative;
    display: flex;
    width: 100%;
    margin: 40px 0 45px;
    padding: 0;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.07);
}


/* =========================================================
   COMMON CARD STYLE
   ========================================================= */

section.navigate-posts .previous,
section.navigate-posts .next {
    position: relative;

    width: 50%;
    min-height: 175px;

    padding: 20px 68px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   PREVIOUS
   ========================================================= */

section.navigate-posts .previous {
    text-align: left;
    border-right: 1px solid #e5e5e5;
    background: #ffffff;
}


/* =========================================================
   NEXT
   ========================================================= */

section.navigate-posts .next {
    text-align: right;
    background: #fffafa;
}


/* =========================================================
   HIDE EMPTY PREVIOUS / NEXT
   ========================================================= */

/* Hide Previous if there is no article link */
section.navigate-posts .previous:not(:has(a)) {
    display: none !important;
}

/* Hide Next if there is no article link */
section.navigate-posts .next:not(:has(a)) {
    display: none !important;
}


/* =========================================================
   WHEN ONLY PREVIOUS EXISTS
   ========================================================= */

section.navigate-posts:not(:has(.next a)) .previous {
    width: 100%;
    border-right: none;
	padding-left: 70px;
}


/* =========================================================
   WHEN ONLY NEXT EXISTS
   ========================================================= */

section.navigate-posts:not(:has(.previous a)) .next {
    width: 100%;
	padding-left: 40px;
}


/* =========================================================
   TOP RED ACCENT
   ========================================================= */

section.navigate-posts .previous::after,
section.navigate-posts .next::after {
    content: "";

    position: absolute;
    top: 0;

    width: 75px;
    height: 4px;

    background: #d90000;

    transition: width 0.35s ease;
}


section.navigate-posts .previous::after {
    left: 0;
}


section.navigate-posts .next::after {
    right: 0;
}


/* =========================================================
   PREVIOUS / NEXT LABEL
   ========================================================= */

section.navigate-posts .previous::before,
section.navigate-posts .next::before {
    display: block;

    color: #d90000;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;
    line-height: 1;

    margin-bottom: 16px;

    transition: color 0.3s ease;
}


/* Previous label */

section.navigate-posts .previous::before {
    content: "PREVIOUS ARTICLE";
}


/* Next label */

section.navigate-posts .next::before {
    content: "NEXT ARTICLE";
}


/* =========================================================
   ARTICLE TITLE
   ========================================================= */

section.navigate-posts .previous a,
section.navigate-posts .next a {
    display: block;

    margin: 0;

    color: #222222;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.55;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   ARROW CIRCLES
   ========================================================= */

section.navigate-posts .previous a::before,
section.navigate-posts .next a::after {
    position: absolute;

    top: 50%;

    width: 40px;
    height: 40px;

    margin-top: -20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff0f0;

    color: #d90000;

    font-size: 20px;
    font-weight: 400;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   PREVIOUS ARROW
   ========================================================= */

section.navigate-posts .previous a::before {
    content: "←";
    left: 18px;
}


/* =========================================================
   NEXT ARROW
   ========================================================= */

section.navigate-posts .next a::after {
    content: "→";
    right: 18px;
}


/* =========================================================
   HOVER EFFECT
   ========================================================= */

section.navigate-posts .previous:hover {
    background: #fffafa;
}


section.navigate-posts .next:hover {
    background: #fff4f4;
}


/* Arrow hover */

section.navigate-posts .previous:hover a::before,
section.navigate-posts .next:hover a::after {
    background: #d90000;
    color: #ffffff;
}


/* Arrow movement */

section.navigate-posts .previous:hover a::before {
    transform: translateX(-4px);
}


section.navigate-posts .next:hover a::after {
    transform: translateX(4px);
}


/* Title hover */

section.navigate-posts .previous:hover a,
section.navigate-posts .next:hover a {
    color: #d90000;
}


/* Top line expands */

section.navigate-posts .previous:hover::after,
section.navigate-posts .next:hover::after {
    width: 110px;
}


/* =========================================================
   HIDE ORIGINAL SMARTMAG LABEL
   ========================================================= */

section.navigate-posts .previous > .main-color,
section.navigate-posts .next > .main-color {
    display: none !important;
}


/* =========================================================
   REMOVE UNWANTED DEFAULT SPACING
   ========================================================= */

section.navigate-posts .previous p,
section.navigate-posts .next p {
    margin-bottom: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    section.navigate-posts {
        display: block;
    }

    section.navigate-posts .previous,
    section.navigate-posts .next {
        width: 100%;
        min-height: 150px;
        border-right: none;
        padding: 25px 60px;
    }

    section.navigate-posts .previous {
        border-bottom: 1px solid #e5e5e5;
    }

}





/* =========================================================
   SMARTMAG CATEGORY PAGE - PREMIUM NEWS CARD DESIGN
   ========================================================= */

/* Category page post grid */
body.archive.category .loop-grid-base {
    gap: 35px 30px;
}


/* =========================================================
   POST CARD
   ========================================================= */

body.archive.category article.l-post.grid-base-post {
    position: relative;

    background: #ffffff;

    border: 1px solid #eeeeee;
    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* Card hover */

body.archive.category article.l-post.grid-base-post:hover {
    transform: translateY(-5px);

    border-color: #f0caca;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   IMAGE
   ========================================================= */

body.archive.category article.l-post.grid-base-post .media {
    position: relative;

    overflow: hidden;

    margin: 0;
}


/* Image itself */

body.archive.category article.l-post.grid-base-post .media img {
    width: 100%;

    display: block;

    transition:
        transform 0.5s ease,
        filter 0.4s ease;
}


/* Image hover */

body.archive.category article.l-post.grid-base-post:hover .media img {
    transform: scale(1.06);
}


/* =========================================================
   RED IMAGE OVERLAY
   ========================================================= */

body.archive.category article.l-post.grid-base-post .media::after {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(217, 0, 0, 0);

    pointer-events: none;

    transition: background 0.3s ease;
}


body.archive.category article.l-post.grid-base-post:hover .media::after {
    background: rgba(217, 0, 0, 0.05);
}


/* =========================================================
   CONTENT
   ========================================================= */

body.archive.category article.l-post.grid-base-post .content {
    padding: 18px 20px 22px;
}


/* =========================================================
   POST META
   ========================================================= */

body.archive.category article.l-post.grid-base-post .post-meta {
    margin-bottom: 8px;

    color: #888888;

    font-size: 12px;

    line-height: 1.5;
}


/* Author */

body.archive.category article.l-post.grid-base-post .post-meta a {
    color: #555555;

    text-decoration: none;
}


/* =========================================================
   POST TITLE
   ========================================================= */

body.archive.category article.l-post.grid-base-post h2.post-title {
    margin: 0 0 12px;

    font-size: 21px;

    line-height: 1.45;

    font-weight: 700;
}


/* Title link */

body.archive.category article.l-post.grid-base-post h2.post-title a {
    color: #222222;

    text-decoration: none;

    transition: color 0.25s ease;
}


/* Title hover */

body.archive.category article.l-post.grid-base-post:hover h2.post-title a {
    color: #d90000;
}


/* =========================================================
   EXCERPT
   ========================================================= */

body.archive.category article.l-post.grid-base-post .excerpt {
    color: #666666;

    font-size: 15px;

    line-height: 1.7;

    margin-top: 8px;
}


/* =========================================================
   SMALL RED TOP ACCENT
   ========================================================= */

body.archive.category article.l-post.grid-base-post::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 4px;

    background: #d90000;

    z-index: 5;

    transition: width 0.35s ease;
}


body.archive.category article.l-post.grid-base-post:hover::before {
    width: 80px;
}


/* =========================================================
   CATEGORY LABEL
   ========================================================= */

body.archive.category article.l-post.grid-base-post .media .cat-label,
body.archive.category article.l-post.grid-base-post .media .post-cat {
    background: #d90000 !important;

    color: #ffffff !important;

    font-size: 11px;

    font-weight: 700;

    padding: 5px 9px;

    border-radius: 3px;
}


/* =========================================================
   CATEGORY PAGE HEADING
   ========================================================= */

body.archive.category .archive-heading {
    position: relative;

    margin-bottom: 30px;

    padding-bottom: 14px;

    border-bottom: 1px solid #e5e5e5;
}


body.archive.category .archive-heading::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 65px;
    height: 3px;

    background: #d90000;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    body.archive.category .loop-grid-base {
        gap: 25px;
    }

    body.archive.category article.l-post.grid-base-post {
        border-radius: 9px;
    }

    body.archive.category article.l-post.grid-base-post .content {
        padding: 15px 16px 18px;
    }

    body.archive.category article.l-post.grid-base-post h2.post-title {
        font-size: 18px;

        line-height: 1.5;
    }

    body.archive.category article.l-post.grid-base-post .excerpt {
        font-size: 14px;

        line-height: 1.6;
    }
}