/**
 * DESIGN SYSTEM - SLATE DIGITAL (REDISGN)
 */

:root {
    /* --- COLORS --- */
    --slate-primary: #5541EF;
    --slate-primary-hover: #4c3cd3;
    --slate-sky-blue: #00a3ff;
    --slate-accent: #d6320e;
    --slate-accent-hover: #B22C0E;
    --slate-black-bg: #000000;
    --slate-card-bg: #1A1A1A;
    --slate-card-overlay: linear-gradient(180deg, rgba(27, 29, 33, 0.00), rgb(27, 29, 33) 100%);
    --slate-text-white: #ffffff;
    --slate-text-grey: #757575;

    /* Header fixed offset (admin bar / announcement bar) */
    --sd-top-offset: 0px;

    /* --- TYPOGRAPHY --- */
    --slate-font-main: 'Inter', sans-serif;
    /*--slate-h1: 96px;*/
    /*--slate-h2: 80px;*/
    /*--slate-h3: 40px;*/
    /*--slate-h4: 20px;*/
    --slate-body: 16px;
    --slate-letter-spacing-h1: -4.8px;
    --slate-letter-spacing-h2: -4px;
    --slate-letter-spacing-h3: -1.28px;
    --slate-letter-spacing-h4: -0.4px;

    /* --- LAYOUT & SPACING --- */
    --slate-container-width: 1350px;
    --slate-small-container: 900px;
    --slate-radius-lg: 20px;
    --slate-radius-sm: 4px;

    /* --- TRANSITIONS --- */
    --slate-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --slate-transition: all 0.3s var(--slate-ease);
}

/* --- RESET & CONTEXT BASE --- */
.is-redesign {
    font-family: var(--slate-font-main);
    background-color: var(--slate-black-bg);
    color: var(--slate-text-white);
    -webkit-font-smoothing: antialiased;
}

.is-redesign h1, .is-redesign h2, .is-redesign h3 {
    font-weight: 600;
    margin-block-start: 0;
    margin-block-end: 0;
    line-height: 100%;
}

/*.is-redesign h1 {*/
/*    !*font-size: var(--slate-h1);*!*/
/*    letter-spacing: var(--slate-letter-spacing-h1);*/
/*}*/

/*.is-redesign .h2, .is-redesign h2 {*/
/*    !*font-size: var(--slate-h2);*!*/
/*    letter-spacing: var(--slate-letter-spacing-h2);*/
/*}*/

/*.is-redesign .h3, .is-redesign h3 {*/
/*    !*font-size: var(--slate-h3);*!*/
/*    letter-spacing: var(--slate-letter-spacing-h3);*/
/*}*/

/*.is-redesign .h4, .is-redesign h4 {*/
/*    !*font-size: var(--slate-h4);*!*/
/*    letter-spacing: var(--slate-letter-spacing-h4);*/
/*}*/

/* --- STANDARDS COMPONENTS  (Gutenberg) --- */

/* Cards (Plugins, Plans, etc.) */
.slate-card {
    background-color: var(--slate-card-bg);
    border-radius: var(--slate-radius-lg);
}

/*.slate-card:hover {*/
/*    border-color: var(--slate-primary);*/
/*}*/

.check-text {
    position: relative;
    padding-left: 32px;
}

.check-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 20px;   
    height: 20px;
    background-image: url('/wp-content/themes/salient-child/img/CheckFilled.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.cat-card {
    height: 256px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.blog-cards {
    gap: 2em;
}

.blog-cards img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.group-posts .wp-block-group,
.faq .wp-block-group,
.faq .wp-block-group .gb-accordion{
    max-width: 1350px;
}

/* Button Gutenberg */
.wp-block-button.is-style-slate-primary .wp-block-button__link {
    background-color: var(--slate-primary) !important;
    color: var(--slate-text-white) !important;
    border-radius: var(--slate-radius-sm) !important;
    padding: 14px 32px !important;
    font-weight: 600;
    transition: var(--slate-transition);
}

.wp-block-button.is-style-slate-primary .wp-block-button__link:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/*Text*/

.title-grey {
    color: var(--slate-text-grey);
}

/*Academy*/

.academy-section .academy-columns.wp-block-columns {
    align-items: center !important;
}

/*FAQ*/

.faq .gb-accordion .gb-text {
    color: var(--slate-text-white);
    font-size: 20px;
    line-height: 28px;
}
.faq .gb-accordion svg {
    color: var(--slate-text-white);
}
.faq .gb-accordion p {
    width: 98%;
    font-size: 18px;
    color: #B3B3B3;
    font-weight: 400;
    line-height: 28px;
}
.faq .gb-accordion a {
    color: var(--slate-text-white);
    text-decoration: none;
}

/*Problem on Firefox*/

.column-flex {
    display: flex;
    justify-content: flex-end;
}

/*PICK YOUR PLAN*/

@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes ocean-spin {
    to { --a: 360deg; }
}

.ocean{
    position: relative;
    overflow: hidden;
}

/* Animated border */
.ocean::before{
    content:"";
    position:absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(
            from var(--a),
            #cbb9e7,
            #2ccbfc,
            #388afa,
            #8227f5,
            #cbb9e7
    );
    animation: ocean-spin 5s linear infinite;
    -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* --- SCROLL ANIMATIONS --- */
.fade-in-left,
.fade-in-right,
.fade-in-top,
.fade-in-bottom {
    opacity: 0;
    transition: opacity 0.8s var(--slate-ease), transform 0.8s var(--slate-ease);
}

.fade-in-left {
    transform: translateX(-160px);
}

.fade-in-right {
    transform: translateX(160px);
}

.fade-in-top {
    transform: translateY(-160px);
}

.fade-in-bottom {
    transform: translateY(160px);
}

.fade-in-left.is-visible,
.fade-in-right.is-visible,
.fade-in-top.is-visible,
.fade-in-bottom.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* --- RESPONSIVE --- */

@media (max-width: 767px) {
    .is-redesign h1.h2 {
        /*font-size: var(--slate-h3);*/
    }
    .only-desktop {
        display: none;
    }
    .center-mobile {
        text-align: center;
    }
    .academy-section .academy-columns {
        flex-direction: column-reverse;
    }
    .academy-section .academy-columns a {
        display: flex;
    }
}