/* =========================================
   GAMERFICIAL CATEGORY TAG
   VYRAL THEME
   ========================================= */

.cs-entry__post-meta .cs-meta-category .post-categories > li > a {
    background: linear-gradient(
        110deg,
        #f36f7e 0%,
        #f59a73 55%,
        #f2cf6b 100%
    ) !important;

    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 7px 11px !important;

    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;

    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Make sure Vyral's pseudo element doesn't cover our background */
.cs-entry__post-meta .cs-meta-category .post-categories > li > a::after {
    background: transparent !important;
    border: 0 !important;
}
/* =========================================
   GAMERFICIAL ARTICLE DATE
   ========================================= */

.cs-entry__post-meta .cs-meta-date {
    margin-left: 12px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #6f6f76 !important;
    line-height: 1.2 !important;
}

.cs-entry__post-meta {
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 16px !important;
}

@media (max-width: 767px) {

    .single-post .cs-site-content {
        margin-top: 12px !important;
    }

}

@media (max-width: 767px) {
    .single-post .entry-content {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }
}

/* =========================================
   GAMERFICIAL MOBILE ARTICLE TITLE
   ========================================= */

@media (max-width: 767px) {

    .single-post .cs-entry__header .cs-entry__title {
        font-size: 32px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.6px !important;
    }

}

/* =========================================
   GAMERFICIAL MOBILE LEAD PARAGRAPH
   ========================================= */

@media (max-width: 767px) {

    .single-post .entry-content > p:first-child {
        position: relative;
        font-size: 18px !important;
        line-height: 1.6 !important;

        padding-left: 16px !important;
        margin-bottom: 28px !important;
    }

    .single-post .entry-content > p:first-child::before {
        content: "";
        position: absolute;

        left: 0;
        top: 4px;
        bottom: 4px;

        width: 3px;
        border-radius: 10px;

        background: linear-gradient(
            180deg,
            #f36f7e 0%,
            #f59a73 55%,
            #f2cf6b 100%
        );
    }

}

/* =========================================
   GAMERFICIAL MOBILE ARTICLE H2
   ========================================= */

@media (max-width: 767px) {

    .single-post .entry-content h2 {
        position: relative;
        font-size: 25px !important;
        line-height: 1.18 !important;
        font-weight: 800 !important;
        letter-spacing: -0.4px !important;

        margin-top: 40px !important;
        margin-bottom: 22px !important;
        padding-bottom: 13px !important;
    }

    .single-post .entry-content h2::after {
        content: "";
        position: absolute;

        left: 0;
        bottom: 0;

        width: 38px;
        height: 3px;

        border-radius: 10px;

        background: linear-gradient(
            90deg,
            #f36f7e 0%,
            #f59a73 55%,
            #f2cf6b 100%
        );
    }

}

/* =========================================
   GAMERFICIAL MOBILE HEADER REFINEMENT
   ========================================= */

@media (max-width: 767px) {

    /* Keep Vyral's natural header dimensions */
    .cs-header__inner-mobile {
        height: auto !important;
        min-height: 0 !important;
        box-shadow: none !important;
        border-bottom: 1px solid #eeeeee !important;
    }

    /* Keep logo neatly centred */
    .cs-header__col.cs-col-center {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Prevent extra margins */
    .cs-logo-mobile,
    .cs-header__logo-mobile,
    .cs-header__burger-icon,
    .cs-search {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {

    .cs-header__search-toggle,
    .cs-header__search-toggle::before,
    .cs-header__search-toggle::after,
    .cs-header__toggle-icon,
    .cs-header__toggle-icon::before,
    .cs-header__toggle-icon::after {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

}

/* =========================================
   GAMERFICIAL MOBILE LOGO SIZE
   ========================================= */

@media (max-width: 767px) {

    .cs-header__logo-mobile img {
        width: 150px !important;
        max-width: 190px !important;
        height: auto !important;
    }

}

/* =========================================
   GAMERFICIAL CUSTOM MOBILE BURGER
   ========================================= */

@media (max-width: 767px) {

    .cs-header__burger-icon {
        position: relative !important;
        width: 30px !important;
        height: 24px !important;

        display: block !important;

        background: none !important;
        border: none !important;
        box-shadow: none !important;

        font-size: 0 !important;
    }

    /* Hide anything Vyral places inside the burger */
    .cs-header__burger-icon > * {
        display: none !important;
    }

    /* TOP LINE */
    .cs-header__burger-icon::before {
        content: "" !important;

        position: absolute !important;
        top: 5px !important;
        left: 0 !important;

        width: 28px !important;
        height: 3px !important;

        background: #111 !important;
        border-radius: 3px !important;

        transform: none !important;
        opacity: 1 !important;
    }

    /* BOTTOM LINE */
    .cs-header__burger-icon::after {
        content: "" !important;

        position: absolute !important;
        top: 14px !important;
        left: 9px !important;

        width: 19px !important;
        height: 3px !important;

        background: #111 !important;
        border-radius: 3px !important;

        transform: none !important;
        opacity: 1 !important;
    }

}

/* =========================================
   GAMERFICIAL MOBILE DRAWER REFINEMENT
   ========================================= */

@media (max-width: 767px) {

    /* Outer offcanvas stays full screen */
    .cs-offcanvas {
        width: 100% !important;
        max-width: none !important;
    }

    /* Actual drawer */
    .cs-offcanvas__sidebar {
        width: 78vw !important;
        max-width: 320px !important;
        min-width: 0 !important;

        background: #1e1e2b !important;
        color: #ffffff !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    /* Drawer header */
    .cs-offcanvas__header {
        background: #1e1e2b !important;
        border: 0 !important;

        padding: 18px 20px 8px !important;
    }

    /* Drawer inner */
    .cs-offcanvas__inner {
        width: 100% !important;

        padding: 18px 20px 24px !important;
        margin: 0 !important;

        background: #1e1e2b !important;
        box-sizing: border-box !important;
    }

    /* Gradient accent */
    .cs-offcanvas__inner::before {
        content: "" !important;

        display: block !important;

        width: 48px !important;
        height: 3px !important;

        margin: 0 0 20px 0 !important;

        border-radius: 10px !important;

        background: linear-gradient(
            90deg,
            #f36f7e 0%,
            #f59a73 55%,
            #f2cf6b 100%
        ) !important;
    }

    /* Menu */
    .cs-offcanvas #menu-mobile {
        margin: 0 !important;
        padding: 0 !important;
    }

    .cs-offcanvas #menu-mobile > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Main links */
    .cs-offcanvas #menu-mobile > li > a {
        min-height: 46px !important;

        padding: 7px 0 !important;

        display: flex !important;
        align-items: center !important;

        color: #ffffff !important;
        background: transparent !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        border: 0 !important;
    }

    /* Icons */
    .cs-offcanvas #menu-mobile li i,
    .cs-offcanvas #menu-mobile li svg {
        margin-right: 12px !important;
        color: #ffffff !important;
        fill: currentColor !important;
    }

    /* Dropdown arrows */
    .cs-offcanvas #menu-mobile .sub-menu-toggle,
    .cs-offcanvas #menu-mobile .cs-menu-toggle {
        margin-left: auto !important;
        color: #ffffff !important;
    }

    /* Submenus */
    .cs-offcanvas #menu-mobile .sub-menu {
        padding: 4px 0 8px 28px !important;
        margin: 0 !important;

        background: transparent !important;
    }

    .cs-offcanvas #menu-mobile .sub-menu a {
        padding: 6px 0 !important;

        font-size: 14px !important;
        font-weight: 500 !important;

        color: #b9bac3 !important;
    }

    /* Footer */
    .cs-offcanvas__footer {
        width: 78vw !important;
        max-width: 320px !important;

        background: #1e1e2b !important;

        border-top: 1px solid rgba(255,255,255,0.07) !important;

        padding: 12px 20px !important;
    }
}