/* =========================================================
   HEALTHWISE CATEGORY PAGES
   food.html
   health.html
   supplements.html
========================================================= */


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{
    margin:0;
    background:#f7faf9;
    color:#18342d;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    line-height:1.6;
}


body,
button,
input,
textarea{
    font-family:inherit;
}


img{
    display:block;
    max-width:100%;
}


a{
    color:inherit;
    text-decoration:none;
}


button{
    border:0;
    background:none;
    cursor:pointer;
}


.category-container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding-left:24px;
    padding-right:24px;
}


/* =========================================================
   PAGE LOADER
========================================================= */

.category-loader{
    position:fixed;
    inset:0;
    z-index:99999;

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

    background:#ffffff;

    opacity:1;
    visibility:visible;

    transition:
        opacity .45s ease,
        visibility .45s ease;
}


.category-loader.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


.category-loader-logo{
    width:58px;
    height:58px;

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

    border-radius:16px;

    background:#0b6b53;
    color:#ffffff;

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

    box-shadow:
        0 12px 30px rgba(11,107,83,.20);

    margin-bottom:20px;
}


.category-loader-spinner{
    width:30px;
    height:30px;

    border:3px solid #dcebe6;
    border-top-color:#0b6b53;

    border-radius:50%;

    animation:
        categoryLoaderSpin .8s linear infinite;
}


.category-loader p{
    margin-top:14px;

    color:#6b7f79;

    font-size:13px;
    font-weight:600;
}


@keyframes categoryLoaderSpin{

    to{
        transform:rotate(360deg);
    }

}



/* =========================================================
   HEADER
========================================================= */

.category-header{
    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(255,255,255,.96);

    border-bottom:1px solid #e5eeeb;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    transition:
        box-shadow .25s ease,
        background .25s ease;
}


.category-header-inner{
    width:100%;
    max-width:1240px;
    min-height:78px;

    margin:0 auto;
    padding:0 24px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}


/* =========================================================
   LOGO
========================================================= */

.category-logo{
    display:flex;
    align-items:center;
    gap:11px;

    flex-shrink:0;
}


.category-logo-icon{
    width:43px;
    height:43px;

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

    border-radius:12px;

    background:#0b6b53;
    color:#ffffff;

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

    line-height:1;

    box-shadow:
        0 8px 20px rgba(11,107,83,.16);
}


.category-logo-text{
    display:flex;
    flex-direction:column;

    line-height:1.1;
}


.category-logo-text strong{
    color:#123d33;

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

    letter-spacing:-.4px;
}


.category-logo-text small{
    margin-top:4px;

    color:#7b8d88;

    font-size:9px;
    font-weight:600;

    letter-spacing:.35px;
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.category-desktop-nav{
    display:flex;
    align-items:center;
    gap:7px;
}


.category-desktop-nav a{
    position:relative;

    padding:11px 15px;

    color:#526861;

    font-size:14px;
    font-weight:650;

    border-radius:9px;

    transition:
        color .2s ease,
        background .2s ease;
}


.category-desktop-nav a:hover{
    color:#0b6b53;
    background:#edf7f3;
}


.category-desktop-nav a.active{
    color:#0b6b53;
    background:#edf7f3;
}


.category-desktop-nav a.active::after{
    content:"";

    position:absolute;

    left:15px;
    right:15px;
    bottom:3px;

    height:2px;

    border-radius:10px;

    background:#0b6b53;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.category-menu-button{
    width:44px;
    height:44px;

    display:none;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    border:1px solid #dce8e4;
    border-radius:11px;

    background:#ffffff;
}


.category-menu-button span{
    width:20px;
    height:2px;

    border-radius:10px;

    background:#183e35;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.category-menu-button.active span:nth-child(1){
    transform:
        translateY(7px)
        rotate(45deg);
}


.category-menu-button.active span:nth-child(2){
    opacity:0;
}


.category-menu-button.active span:nth-child(3){
    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

.category-mobile-nav{
    display:none;
}



/* =========================================================
   HERO
========================================================= */

.category-hero{
    position:relative;
    overflow:hidden;

    padding:72px 0 76px;

    background:
        linear-gradient(
            135deg,
            #eef8f4 0%,
            #f8fbfa 53%,
            #edf6f2 100%
        );
}


.category-hero::before{
    content:"";

    position:absolute;

    width:380px;
    height:380px;

    top:-210px;
    right:-130px;

    border-radius:50%;

    background:
        rgba(11,107,83,.055);

    pointer-events:none;
}


.category-hero::after{
    content:"";

    position:absolute;

    width:250px;
    height:250px;

    left:-160px;
    bottom:-160px;

    border-radius:50%;

    background:
        rgba(11,107,83,.045);

    pointer-events:none;
}


.category-hero .category-container{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:
        minmax(0,1.05fr)
        minmax(380px,.95fr);

    align-items:center;

    gap:65px;
}


.category-hero-content{
    max-width:650px;
}


.category-label{
    display:inline-flex;
    align-items:center;

    color:#0b6b53;

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

    letter-spacing:1.5px;
    text-transform:uppercase;
}


.category-label::before{
    content:"";

    width:25px;
    height:2px;

    margin-right:9px;

    border-radius:10px;

    background:#0b6b53;
}


.category-hero h1{
    margin-top:15px;

    color:#143e34;

    font-size:
        clamp(
            38px,
            5vw,
            64px
        );

    line-height:1.05;

    letter-spacing:-2.3px;

    font-weight:800;
}


.category-hero h1 span{
    display:block;

    color:#0b6b53;
}


.category-hero-content > p{
    max-width:610px;

    margin-top:22px;

    color:#60746e;

    font-size:17px;
    line-height:1.8;
}


.category-hero-image{
    position:relative;

    min-height:390px;

    border-radius:26px;

    overflow:hidden;

    box-shadow:
        0 25px 60px rgba(28,67,57,.14);
}


.category-hero-image::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 55%,
            rgba(0,40,30,.18)
        );

    pointer-events:none;
}


.category-hero-image img{
    width:100%;
    height:100%;
    min-height:390px;

    object-fit:cover;

    transition:
        transform .7s ease;
}


.category-hero-image:hover img{
    transform:scale(1.035);
}



/* =========================================================
   HERO VARIATIONS
========================================================= */

.food-hero{
    background:
        linear-gradient(
            135deg,
            #f0f8f2,
            #fbfcf9
        );
}


.health-hero{
    background:
        linear-gradient(
            135deg,
            #eef8f5,
            #f8fbfa
        );
}


.supplements-hero{
    background:
        linear-gradient(
            135deg,
            #f2f7f5,
            #fbfcfb
        );
}



/* =========================================================
   TRUST STRIP
========================================================= */

.category-trust{
    background:#ffffff;

    border-bottom:1px solid #e7efec;
}


.category-trust .category-container{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:0;
}


.category-trust-item{
    min-height:105px;

    display:flex;
    align-items:center;

    gap:14px;

    padding:20px 28px;

    border-right:1px solid #e7efec;
}


.category-trust-item:first-child{
    padding-left:0;
}


.category-trust-item:last-child{
    border-right:0;
    padding-right:0;
}


.category-trust-item > span{
    width:37px;
    height:37px;

    flex-shrink:0;

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

    border-radius:50%;

    background:#e7f5f0;
    color:#0b6b53;

    font-size:17px;
    font-weight:800;
}


.category-trust-item strong{
    display:block;

    color:#26483f;

    font-size:13px;
    font-weight:750;
}


.category-trust-item small{
    display:block;

    max-width:280px;

    margin-top:3px;

    color:#81918c;

    font-size:11px;
    line-height:1.55;
}



/* =========================================================
   POSTS SECTION
========================================================= */

.posts-section{
    padding:78px 0 80px;

    background:#f7faf9;
}


.posts-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:34px;
}


.posts-heading h2{
    margin-top:9px;

    color:#163e34;

    font-size:
        clamp(
            28px,
            4vw,
            40px
        );

    line-height:1.15;

    letter-spacing:-1.2px;

    font-weight:800;
}


.posts-heading > p{
    max-width:400px;

    color:#71827d;

    font-size:14px;
    line-height:1.7;

    text-align:right;
}



/* =========================================================
   AD SLOTS
========================================================= */

.ad-slot{
    width:100%;
    min-height:90px;

    margin:0 auto 38px;

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

    border:
        1px dashed #cbdad5;

    border-radius:12px;

    background:#ffffff;

    color:#a1ada9;

    font-size:10px;
    font-weight:600;

    letter-spacing:.8px;
    text-transform:uppercase;
}


.ad-slot span{
    opacity:.8;
}


.ad-bottom{
    margin-top:46px;
    margin-bottom:0;
}



/* =========================================================
   POSTS GRID
========================================================= */

.posts-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:24px;
}



/* =========================================================
   BLOG CARD
========================================================= */

.blog-card{
    min-width:0;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:#ffffff;

    border:
        1px solid #e5eeeb;

    border-radius:18px;

    box-shadow:
        0 7px 25px rgba(31,65,56,.055);

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


.blog-card:hover{
    transform:translateY(-6px);

    border-color:#d5e6e0;

    box-shadow:
        0 18px 40px rgba(31,65,56,.11);
}



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

.blog-card-image{
    position:relative;

    display:block;

    width:100%;

    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#e9f1ee;
}


.blog-card-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .55s ease;
}


.blog-card:hover
.blog-card-image img{
    transform:scale(1.06);
}


.blog-category{
    position:absolute;

    left:12px;
    bottom:12px;

    padding:6px 9px;

    border-radius:7px;

    background:
        rgba(11,107,83,.94);

    color:#ffffff;

    font-size:9px;
    font-weight:750;

    letter-spacing:.7px;

    text-transform:uppercase;

    box-shadow:
        0 4px 14px rgba(0,0,0,.12);
}



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

.blog-card-content{
    display:flex;
    flex:1;

    flex-direction:column;

    padding:19px 19px 20px;
}


.blog-meta{
    display:flex;
    align-items:center;

    gap:6px;

    color:#8a9894;

    font-size:10px;
    font-weight:600;
}


.blog-card h3{
    margin-top:10px;

    color:#193f35;

    font-size:17px;
    line-height:1.3;

    letter-spacing:-.3px;

    font-weight:760;
}


.blog-card h3 a{
    transition:
        color .2s ease;
}


.blog-card h3 a:hover{
    color:#0b6b53;
}


.blog-card-content > p{
    margin-top:10px;

    color:#73837e;

    font-size:12px;
    line-height:1.7;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

    overflow:hidden;
}


.read-article{
    margin-top:auto;
    padding-top:17px;

    display:inline-flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    color:#0b6b53;

    font-size:12px;
    font-weight:750;

    border-top:
        1px solid #edf2f0;

    transition:
        color .2s ease;
}


.read-article span{
    font-size:17px;

    transition:
        transform .2s ease;
}


.read-article:hover{
    color:#084f3e;
}


.read-article:hover span{
    transform:translateX(4px);
}



/* =========================================================
   CTA
========================================================= */

.category-cta{
    padding:80px 0;

    background:#ffffff;
}


.category-cta-box{
    position:relative;

    overflow:hidden;

    padding:
        58px
        clamp(25px,5vw,70px);

    border-radius:26px;

    background:
        linear-gradient(
            120deg,
            #0b6b53,
            #084f3f
        );

    color:#ffffff;

    box-shadow:
        0 22px 50px rgba(11,107,83,.17);
}


.category-cta-box::before{
    content:"";

    position:absolute;

    width:330px;
    height:330px;

    top:-220px;
    right:-100px;

    border-radius:50%;

    border:
        55px solid rgba(255,255,255,.055);
}


.category-cta-box::after{
    content:"";

    position:absolute;

    width:200px;
    height:200px;

    bottom:-150px;
    left:-80px;

    border-radius:50%;

    background:
        rgba(255,255,255,.04);
}


.category-cta-box > *{
    position:relative;
    z-index:2;
}


.category-cta-box .category-label{
    color:#c9eee2;
}


.category-cta-box .category-label::before{
    background:#c9eee2;
}


.category-cta-box h2{
    max-width:720px;

    margin-top:13px;

    font-size:
        clamp(
            27px,
            4vw,
            43px
        );

    line-height:1.15;

    letter-spacing:-1px;
}


.category-cta-box p{
    max-width:650px;

    margin-top:14px;

    color:#d6ece6;

    font-size:15px;
    line-height:1.8;
}


.category-cta-buttons{
    display:flex;
    align-items:center;

    gap:12px;

    margin-top:27px;
}


.category-primary-button,
.category-secondary-button{
    min-height:46px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    padding:0 19px;

    border-radius:9px;

    font-size:12px;
    font-weight:750;

    transition:
        transform .2s ease,
        background .2s ease;
}


.category-primary-button{
    background:#ffffff;
    color:#0b6b53;
}


.category-secondary-button{
    border:
        1px solid rgba(255,255,255,.3);

    color:#ffffff;

    background:
        rgba(255,255,255,.08);
}


.category-primary-button:hover,
.category-secondary-button:hover{
    transform:translateY(-2px);
}


.category-primary-button span,
.category-secondary-button span{
    font-size:17px;
}



/* =========================================================
   DISCLAIMER / INFORMATION BOX
========================================================= */

.category-disclaimer{
    padding:0 0 80px;

    background:#ffffff;
}


.category-disclaimer-box{
    padding:30px 34px;

    border:
        1px solid #e1ebe7;

    border-left:
        4px solid #0b6b53;

    border-radius:12px;

    background:#f8fbfa;
}


.category-disclaimer-box h2{
    margin-bottom:9px;

    color:#25483f;

    font-size:18px;
    font-weight:750;
}


.category-disclaimer-box p{
    max-width:1000px;

    margin-top:8px;

    color:#70807b;

    font-size:12px;
    line-height:1.75;
}



/* =========================================================
   FOOTER
========================================================= */

.category-footer{
    background:#102f28;

    color:#ffffff;
}


.category-footer-inner{
    width:100%;
    max-width:1240px;

    margin:0 auto;
    padding:
        60px
        24px
        45px;

    display:grid;

    grid-template-columns:
        1.6fr
        1fr
        1fr
        1fr;

    gap:45px;
}


.category-footer .category-logo-text strong{
    color:#ffffff;
}


.category-footer .category-logo-text small{
    color:#9cb3ac;
}


.category-footer-brand > p{
    max-width:320px;

    margin-top:18px;

    color:#9aafa9;

    font-size:12px;
    line-height:1.8;
}


.category-footer-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}


.category-footer-column h3{
    margin-bottom:15px;

    color:#ffffff;

    font-size:13px;
    font-weight:750;
}


.category-footer-column a{
    margin-bottom:9px;

    color:#9aafa9;

    font-size:11px;

    transition:
        color .2s ease;
}


.category-footer-column a:hover{
    color:#ffffff;
}


.category-footer-bottom{
    width:100%;
    max-width:1240px;

    margin:0 auto;

    padding:
        18px 24px
        22px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    border-top:
        1px solid rgba(255,255,255,.09);

    color:#819891;

    font-size:10px;
}



/* =========================================================
   IMAGE ERROR STATE
========================================================= */

.image-load-error{
    background:#e7efec;

    object-fit:cover;
}


.image-load-error::after{
    content:"Image unavailable";
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px){

    .category-hero .category-container{
        grid-template-columns:
            minmax(0,1fr)
            minmax(320px,.8fr);

        gap:40px;
    }


    .category-hero h1{
        font-size:46px;
    }


    .posts-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:20px;
    }


    .category-footer-inner{
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap:35px;
    }


    .category-footer-brand{
        grid-column:1 / -1;
    }

}




/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width:820px){

    .category-header-inner{
        min-height:70px;
    }


    .category-desktop-nav{
        display:none;
    }


    .category-menu-button{
        display:flex;
    }


    .category-mobile-nav{
        position:absolute;

        top:70px;
        left:0;
        right:0;

        display:flex;
        flex-direction:column;

        padding:10px 18px 18px;

        background:#ffffff;

        border-bottom:
            1px solid #e3ece9;

        box-shadow:
            0 14px 25px rgba(20,55,46,.08);

        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s ease;
    }


    .category-mobile-nav.open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }


    .category-mobile-nav a{
        padding:13px 12px;

        border-radius:8px;

        color:#526861;

        font-size:14px;
        font-weight:650;
    }


    .category-mobile-nav a:hover{
        background:#edf7f3;
        color:#0b6b53;
    }


    .category-hero{
        padding:55px 0 60px;
    }


    .category-hero .category-container{
        grid-template-columns:1fr;
    }


    .category-hero-content{
        max-width:700px;
    }


    .category-hero-image{
        min-height:320px;
    }


    .category-hero-image img{
        min-height:320px;
    }


    .category-trust .category-container{
        grid-template-columns:1fr;
    }


    .category-trust-item,
    .category-trust-item:first-child,
    .category-trust-item:last-child{
        min-height:auto;

        padding:
            18px 0;

        border-right:0;

        border-bottom:
            1px solid #e7efec;
    }


    .category-trust-item:last-child{
        border-bottom:0;
    }


    .posts-heading{
        align-items:flex-start;
        flex-direction:column;

        gap:10px;
    }


    .posts-heading > p{
        text-align:left;
    }


    .posts-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:18px;
    }


    .category-footer-inner{
        grid-template-columns:
            repeat(2,1fr);
    }


    .category-footer-brand{
        grid-column:1 / -1;
    }

}



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

@media (max-width:600px){

    .category-container{
        padding-left:15px;
        padding-right:15px;
    }


    .category-header-inner{
        min-height:64px;

        padding:
            0 15px;
    }


    .category-logo{
        gap:9px;
    }


    .category-logo-icon{
        width:38px;
        height:38px;

        border-radius:10px;

        font-size:24px;
    }


    .category-logo-text strong{
        font-size:17px;
    }


    .category-logo-text small{
        font-size:8px;
    }


    .category-menu-button{
        width:40px;
        height:40px;
    }


    .category-mobile-nav{
        top:64px;
    }


    .category-hero{
        padding:
            43px 0
            45px;
    }


    .category-hero .category-container{
        gap:30px;
    }


    .category-hero h1{
        margin-top:12px;

        font-size:
            clamp(
                34px,
                10vw,
                44px
            );

        letter-spacing:-1.5px;
    }


    .category-hero-content > p{
        margin-top:17px;

        font-size:14px;

        line-height:1.7;
    }


    .category-hero-image{
        min-height:245px;

        border-radius:19px;
    }


    .category-hero-image img{
        min-height:245px;
    }


    .category-label{
        font-size:9px;
        letter-spacing:1.2px;
    }


    .category-label::before{
        width:19px;
        margin-right:7px;
    }


    .category-trust-item{
        gap:11px;
    }


    .category-trust-item > span{
        width:34px;
        height:34px;

        font-size:15px;
    }


    .category-trust-item strong{
        font-size:12px;
    }


    .category-trust-item small{
        font-size:10px;
    }


    .posts-section{
        padding:
            55px 0
            60px;
    }


    .posts-heading{
        margin-bottom:25px;
    }


    .posts-heading h2{
        font-size:28px;
        letter-spacing:-.8px;
    }


    .posts-heading > p{
        font-size:12px;
    }


    .ad-slot{
        min-height:75px;

        margin-bottom:25px;
    }


    .posts-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:12px;
    }


    .blog-card{
        border-radius:13px;
    }


    .blog-card-image{
        aspect-ratio:1 / .78;
    }


    .blog-category{
        left:7px;
        bottom:7px;

        padding:4px 6px;

        font-size:7px;
    }


    .blog-card-content{
        padding:
            12px 11px
            13px;
    }


    .blog-meta{
        gap:4px;

        font-size:8px;
    }


    .blog-card h3{
        margin-top:7px;

        font-size:13px;
        line-height:1.35;
    }


    .blog-card-content > p{
        margin-top:7px;

        font-size:10px;
        line-height:1.55;

        -webkit-line-clamp:3;
    }


    .read-article{
        padding-top:11px;

        font-size:9px;
    }


    .read-article span{
        font-size:14px;
    }


    .category-cta{
        padding:
            55px 0;
    }


    .category-cta-box{
        padding:
            38px 21px;

        border-radius:19px;
    }


    .category-cta-box h2{
        font-size:27px;

        letter-spacing:-.7px;
    }


    .category-cta-box p{
        font-size:12px;
        line-height:1.7;
    }


    .category-cta-buttons{
        align-items:stretch;
        flex-direction:column;

        gap:9px;
    }


    .category-primary-button,
    .category-secondary-button{
        width:100%;
    }


    .category-disclaimer{
        padding-bottom:55px;
    }


    .category-disclaimer-box{
        padding:
            22px 18px;
    }


    .category-disclaimer-box h2{
        font-size:16px;
    }


    .category-disclaimer-box p{
        font-size:10px;
    }


    .category-footer-inner{
        padding:
            45px 15px
            35px;

        grid-template-columns:
            repeat(2,1fr);

        gap:32px 20px;
    }


    .category-footer-brand{
        grid-column:1 / -1;
    }


    .category-footer-brand > p{
        font-size:10px;
    }


    .category-footer-column h3{
        font-size:12px;
    }


    .category-footer-column a{
        font-size:10px;
    }


    .category-footer-bottom{
        padding:
            16px 15px
            20px;

        align-items:flex-start;
        flex-direction:column;

        gap:5px;

        font-size:9px;
    }

}



/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:380px){

    .category-logo-text small{
        display:none;
    }


    .category-hero h1{
        font-size:32px;
    }


    .posts-grid{
        gap:9px;
    }


    .blog-card-content{
        padding:
            10px 9px
            11px;
    }


    .blog-card h3{
        font-size:12px;
    }


    .blog-card-content > p{
        font-size:9px;
    }


    .read-article{
        font-size:8px;
    }

}



/* =========================================================
   ACCESSIBILITY
========================================================= */

.category-desktop-nav a:focus-visible,
.category-mobile-nav a:focus-visible,
.category-logo:focus-visible,
.category-menu-button:focus-visible,
.blog-card a:focus-visible,
.category-primary-button:focus-visible,
.category-secondary-button:focus-visible{
    outline:
        3px solid rgba(11,107,83,.28);

    outline-offset:3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }


    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}