/* --- 1. Fonts & Reset --- */
@font-face {
    font-family: 'sarafontravi';    font-style: normal;    font-weight: 400;    src: url("../fonts/RaviFaNum-Regular.woff2") format("woff2");    font-display: swap;}
@font-face {
    font-family: 'sarafontravi';    font-style: normal;    font-weight: 700;    src: url("../fonts/RaviFaNum-Bold.woff2") format("woff2");    font-display: swap;}
:root{
    --e-global-color-1: #F2D701;
    --e-global-color-2: #3CA200;
    --e-global-color-3: #E8F5D3;
    --e-global-color-4: #F4F6F0;
    --e-global-color-5: #FFFFFF;
    --e-global-color-6: #000000;
    --e-global-color-7: #0000001A;
    --e-global-color-8: #00000099;
    --e-global-color-9: #f4f3ef;
    --e-global-color-10: #000000;
    --e-global-color-gradin:linear-gradient(220deg, var( --e-global-color-2 ) 0%, var( --e-global-color-3 ) 60%) ;
    --e-global-color-gradin-2:linear-gradient(180deg, var(--e-global-color-3) 0%, var(--e-global-color-9) 100%);
    --e-global-color-radial-gradin: radial-gradient(circle,rgba(164, 212, 127, 1) 0%, rgba(232, 245, 211, 1) 100%);
    --e-global-color-radial-gradin-top-left:linear-gradient(150deg, var( --e-global-color-2 ) 20%, var( --e-global-color-3 ) 100%);
    --fs-h1: 28px;
    --fs-h2: 26px;
    --fs-h3: 24px;
    --fs-h4: 22px;
    --fs-h5: 20px;
    --fs-h6: 18px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-caption: 12px;
    --fs-button: 16px;
    --fs-menu: 16px;
    --fs-input: 16px;
}
    * {
    margin: 0;    padding: 0;    box-sizing: border-box;    font-family: 'sarafontravi', sans-serif;}
body {
    line-height: 1.6;    color: #333;    background-color: var(--e-global-color-9);    min-height: 100vh;    display: flex;    flex-direction: column;    justify-content: space-between;}

h1{font-size: var(--fs-h1);line-height: 1.8;}
h2{font-size: var(--fs-h2);line-height: 1.8;}
h3{font-size: var(--fs-h3);line-height: 1.8;}
h4{font-size: var(--fs-h4);line-height: 1.8;}
h5{font-size: var(--fs-h5);line-height: 1.8;}
h6{font-size: var(--fs-h6);line-height: 1.8;}
body,p,span{font-size: var(--fs-body);}
button,.btn{font-size: var(--fs-button);}
input,textarea,select{font-size: var(--fs-input);}
nav a{font-size: var(--fs-menu);}
small{font-size: var(--fs-small);}
.caption{font-size: var(--fs-caption);}
a {
    text-decoration: none;    color: var(--e-global-color-10);    font-weight: bold;}
img.attachment-large.size-large.wp-post-image {
    width: 100%;    height: auto;}
.image-size img{width:100%;}
.wp-block-custom-smart-flex {position: relative;}
/* --- 2. Layout & Containers --- */
.container {
    width: 100%;    max-width: 1400px;    margin: 0 auto;}

.gform_fields input,input {width: 100%;font-size: 16px !important;padding: 10px !important;border-radius: 15px !important;}
input[type="submit"] {background-color: var(--e-global-color-3) !important;color: var(--e-global-color-10)!important;border: 1px solid var(--e-global-color-2) !important;}
select {border: unset !important;border-radius: 15px !important;}
.gform_fields{gap: 10px !important;}
.alignwide {
    max-width: 1300px;    margin: 0 auto;}

.site-content {
    display: flex;    gap: 40px;}
.page-template-default.page main.site-content,.page-template-default.page .article-post,.home .site-content { margin: 0; }
.main-content { flex: 3; text-align: justify; }
.sidebar { flex: 1; }
.sidebar .wp-block-search__label { width: fit-content; }

/* --- 3. Header & footer & Navigation --- */
.site-header {position: sticky;    top: 0;    z-index: 100;}

.site-header .container {
    padding: 15px 0;    border-radius: 20px;}
li.menu-item {
    display: flex;    align-items: center;}
.main-navigation ul, .nav-menu-list {
    list-style: none;    display: flex;    gap: 30px;    justify-content: center;}
.custom-resp-nav .menu-container ul ul.sub-menu {
    display: none;    position: absolute;    background-color: #fff;    list-style: none;    border: 1px solid #ddd;    top: 110%;}
.menu-item-has-children{display: flex;}
.menu-item-has-children::after {content: '\eb75';display: block;font-family: 'iconsax' !important;font-size: 15px;}
.custom-resp-nav .menu-container ul ul.sub-menu a {display: block;padding: 10px 20px;width:max-content;}
.custom-resp-nav .menu-container li:hover ul {
    display: block;}
.main-navigation a, .nav-menu-list a {
    color: #333;    font-weight: 500;    padding: 5px 10px;    transition: 0.3s;    display: flex;    align-items: center;}
.main-navigation a:hover { color: #0073aa; }
.custom-resp-nav { display: flex; align-items: center; position: relative; }
.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; }
.menu-toggle .bar { width: 25px; height: 3px; background-color: #333; }
/* --- 4. Posts & Archive --- */
.article-post { margin-bottom: 40px; }
.post-thumbnail, .archive-posts img.wp-post-image { width: 100%; height: auto; border-radius: 5px; line-height: 0;}
.post-meta .post-thumbnail img.wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.post-meta-info {display: flex;flex-direction: column;justify-content: center;gap: 10px;padding: 10px;}
.post-meta  .post-thumbnail,.post-meta-info{width: 50% !important;}
.archive-posts {
    display: grid;    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));    gap:40px 15px;}

.archive-posts article { position: relative; }
.archive-posts img.wp-post-image { object-fit: cover; border-radius: 30px; }
.post-meta {
    margin-block: 20px;
    display: flex;
    gap: 10px;
    flex-direction: row;
    border-radius: 25px;
    background-color: #fff;
    overflow: hidden;
}
.post-aside-sticky {
    position: sticky;    top: 110px;}
.post-footer {margin: 20px 0;background: var(--e-global-color-gradin-2);padding: 15px;border-radius: 25px;}
.comments-section .comment-respond {
    display: flex;    flex-direction: column;    width: 100%;    margin-top: 25px;gap: 10px;background-color: var(--e-global-color-5);border-radius: 25px; padding: 15px;}
.comments-section form#commentform {
    display: flex;    flex-direction: column;    gap: 10px;}
.comments-section ul.comment-list {
    display: flex;    flex-direction: column;    list-style-type: none;    gap: 10px;}
.comments-section ul.comment-list li.comment {
    border: 1px solid #ddd;    padding: 15px;background: var(--e-global-color-5);border-radius: 25px;}
.comments-section .comment-body footer.comment-meta {
    display: flex;    justify-content: space-between;    align-items: center;}
.comments-section .comment-body .comment-content {
    background: #eee;    padding: 10px;    margin: 10px 0;    border-radius: 10px;}
.comments-section ul.children {
    margin-right: 15px;    list-style-type: unset;    margin-top: 15px;}
.comments-section hr.comment-separator {
    margin: 20px 0;}
.submit-button.btn.btn-primary,.btn.btn-primary{background-color: #000;color: #fff;padding: 15px 20px;  display: inline-block; margin-top: 15px;}
form#commentform textarea#comment,form#commentform input#author,form#commentform input#email,form#commentform input#phone {
    width: 100% !important;    border: 1px solid #ddd;    padding: 10px;    border-radius: 0;}
.error-404 {
    display: flex;    flex-direction: column;    align-items: center;    margin: 50px 0;    text-align: center;}
/* فهرست مطالب */
.table-of-contents {padding: 10px;margin: 20px 0;background: #fff;border-radius: 25px;}
.table-of-contents, .table-of-contents ul {
    list-style: none;}
/* --- 5. Pagination --- */
.nav-links { margin: 25px auto; display: block; width: fit-content; }
.page-numbers {
    background: #000;    color: #fff;    padding: 10px 15px;    min-width: 41px;    display: inline-block;    text-align: center;    border: 1px solid transparent;}
.page-numbers:hover, span.page-numbers.current { color: #000; background: #fff; border-color: #000; }

/* --- 6. Slick Slider & Animations --- */
.multi-carousel-container article.mini-card {
    display: block;}
.multi-carousel-container article.mini-card img {border-radius: 5px;}
.slick-slider { width: 100%; display: grid; position: relative; }
.slick-dots { 
    list-style: none; display: flex; justify-content: center; 
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); 
}
.slick-dots li { margin: 0 5px; }
.slick-dots button { 
    font-size: 0; width: 12px; height: 12px; border-radius: 3px; 
    border: none; background: #ccc; transition: 1s ease-out; 
}
.slick-dots li.slick-active button { background: #fff; width: 100px; }

.slick-prev, .slick-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; cursor: pointer; }
.slick-next { right: 0; }
.slick-prev { left: 0; }
.slick-prev svg, .slick-next svg { background: #fff; width: 40px; height: 40px; padding: 5px; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.05); }
.mini-card-content a.btn.btn-primary {padding: 10px 25px;border-radius: 100px;background-color: #ffffff; color: #000;}
.mini-card-content .btn-author-box {display: flex;justify-content: space-between;align-items: center;background: #fff;border-radius: 50px;margin-top: 19px;}
.mini-card-content .btn-author-box p, .mini-card-content .btn-author-box a {padding: 10px 25px;margin: 0;}
/* Animation */
.mini-anime .wp-block-cover__image-background, 
.mini-anime-res .wp-block-cover__image-background { transition: 4s ease-out; }
.mini-anime-res .wp-block-cover__image-background,
.slick-active .mini-anime .wp-block-cover__image-background { transform: scale(1.05); }
.slick-active .mini-anime-res .wp-block-cover__image-background { transform: none; }
/* --- 7. Footer --- */
.site-footer { padding: 20px; }
.site-footer ul{list-style-type: none;}
/* .footer-content .footer-widget {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;} */
/*--------------- blocks -----------------------*/

article.mini-card.grid-item.horizontal {display: flex;gap: 20px;flex-direction: row;align-items: center;}
article.mini-card.grid-item.horizontal .mini-card-content {width: 100%;}
article.mini-card.grid-item.horizontal a.permalink-post-image {width: 25%;}
article.mini-card.grid-item.vertical {
    display: flex;
    gap: 20px;
    flex-direction: column;
}
article.mini-card.grid-item img {
    width: 100%;
    height: auto;
    box-shadow: 5px 5px 0px #ededed ,-5px -5px 0px #ededed;
    border-radius: 10px;
}
/* --- 8. Responsive (Media Queries) --- */
@media (max-width:1400px) {
    .container,.main-content { max-width: 96vw; }
}
@media (max-width: 992px) {
    :root{
        --fs-h1: 28px;
        --fs-h2: 26px;
        --fs-h3: 24px;
        --fs-h4: 22px;
        --fs-h5: 19px;
        --fs-h6: 17px;
        --fs-body: 16px;
        --fs-small: 14px;
        --fs-caption: 12px;
        --fs-button: 16px;
        --fs-menu: 15px;
        --fs-input: 16px;
    }
    ul.products {grid-template-columns: repeat(2,auto);}
    .site-content{flex-direction: column;}
    .archive-posts { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));}
}
 
@media (max-width: 768px) {
    :root{
        --fs-h1: 28px;
        --fs-h2: 26px;
        --fs-h3: 24px;
        --fs-h4: 20px;
        --fs-h5: 18px;
        --fs-h6: 16px;
        --fs-body: 16px;
        --fs-small: 14px;
        --fs-caption: 12px;
        --fs-button: 16px;
        --fs-menu: 15px;
        --fs-input: 16px;
    }
    .site-content,.product-header { flex-direction: column; }
    .sidebar, .main-content,.product-thumbnail, .product-header-meta { width: 100%; }
    .menu-toggle { display: flex; }
    .menu-container { 
        display: none; position: absolute; top: 100%; right: 0; left: 0; 
        background: #fff; z-index: 999; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 30px;}
    .menu-item-has-children {display: block;}
    .menu-item-has-children::after {content:none;}
    .menu-container.active {display: block;width: 70vw;max-height: 70vh;position: fixed;top: 50%;right: 50%;z-index: 999;transform: translate(50%,-50%);overflow: scroll;text-align: center;}
    .custom-resp-nav .menu-container.active ul ul.sub-menu{display: block;position: unset;border: none;}
    .custom-resp-nav .menu-container.active ul ul.sub-menu::before {content: "";display: block;width: 16%;border-top: 5px dotted #aeaeae;margin: 8px auto 0px;}
    .menu-container li.menu-item {flex-direction: column;}
    .nav-menu-list { flex-direction: column; padding: 15px; gap: 10px; }
    .single-product-header-box,.product-container-content {flex-direction: column;margin: 10px;}
    .shop-content-wrapper, .sarath-category-page {flex-direction: column;}
    ul.products {grid-template-columns: repeat(1,auto);}
	header.site-header nav {order: 1;}
	header.site-header .wp-block-buttons {width: 80%;justify-content: flex-end;}
	.footer-content .footer-widget {grid-template-columns: repeat(2, 1fr);}
	.footer-widget div:nth-child(1) {grid-column: 1 / span 2;text-align: center;}
    .post-meta {flex-direction: column;}
    .post-meta  .post-thumbnail, .post-meta-info {width: 100% !important;}
}