/**
 * Blog Single Post — RTL Overrides
 * Theme: astra-child
 *
 * Loaded after blog-detail.css when the site language direction is RTL
 * (e.g. Arabic via Polylang). Only overrides properties that need to
 * flip — logical spacing, text alignment, and directional icons/arrows.
 */

.blog-detail-page[dir="rtl"],
html[dir="rtl"] .blog-detail-page {
    direction: rtl;
    text-align: right;
}

/* --------------------------------------------------------------------
   Hero
-------------------------------------------------------------------- */

html[dir="rtl"] .blog-hero__meta {
    flex-direction: row;
}

/* --------------------------------------------------------------------
   Article Body
-------------------------------------------------------------------- */

html[dir="rtl"] .blog-article {
    text-align: right;
}

html[dir="rtl"] .blog-article ul,
html[dir="rtl"] .blog-article ol {
    padding-left: 0;
    padding-right: 24px;
}

html[dir="rtl"] .blog-article blockquote {
    border-left: none;
    border-right: 3px solid var(--color-accent, #994F67);
}

/* --------------------------------------------------------------------
   Tags
-------------------------------------------------------------------- */

html[dir="rtl"] .blog-tags {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

html[dir="rtl"] .blog-tags__label {
    margin-right: 0;
    margin-left: 8px;
}

/* --------------------------------------------------------------------
   Share
-------------------------------------------------------------------- */

html[dir="rtl"] .blog-share {
    flex-direction: row-reverse;
}

html[dir="rtl"] .blog-share__list {
    flex-direction: row-reverse;
}

/* --------------------------------------------------------------------
   Related Products / Slider
-------------------------------------------------------------------- */

html[dir="rtl"] .slider {
    flex-direction: row-reverse;
}

html[dir="rtl"] .product-title {
    flex-direction: row-reverse;
}

html[dir="rtl"] .product-button {
    align-self: flex-end;
}

/* --------------------------------------------------------------------
   Navigation (Previous / Next)
   In RTL reading order, "next" logically sits on the left and
   "previous" on the right — mirror the row and re-flip each card's
   internal alignment so image/text order still reads correctly.
-------------------------------------------------------------------- */

html[dir="rtl"] .blog-navigation__wrapper {
    flex-direction: row-reverse;
}

html[dir="rtl"] .blog-navigation__item {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .blog-navigation__next {
    flex-direction: row;
    text-align: left;
}

html[dir="rtl"] .blog-navigation__prev .blog-navigation__label::before,
html[dir="rtl"] .blog-navigation__next .blog-navigation__label::before {
    content: none;
}

/* Arrow glyphs in the PHP output are literal "←" / "→" characters;
   mirror them visually since the semantic meaning (prev/next) flips
   with reading direction. */
html[dir="rtl"] .blog-navigation__label {
    display: inline-block;
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------
   Related Articles
-------------------------------------------------------------------- */

html[dir="rtl"] .related-article-content {
    text-align: right;
}

html[dir="rtl"] .related-meta {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

html[dir="rtl"] .related-article-read {
    flex-direction: row-reverse;
}

/* --------------------------------------------------------------------
   General logical-property safety net
   (covers any Gutenberg block output inside .blog-article that
   ships hard-coded left/right margins)
-------------------------------------------------------------------- */

html[dir="rtl"] .blog-article .alignleft {
    float: right;
    margin: 0 0 24px 24px;
}

html[dir="rtl"] .blog-article .alignright {
    float: left;
    margin: 0 24px 24px 0;
}
/* ==========================================================================
   SINGLE CATEGORY NAVIGATION
   Exact Figma Desktop Dimensions + RTL Support
   ========================================================================== */

.single-category-navigation {
    width: 100%;
    padding: 0;
    margin: 0;
}


/* ==========================================================================
   Container
   ========================================================================== */

.single-category-navigation .container {
    width: 1250px;
    max-width: 1250px;

    padding: 0;
    margin: 0 auto;

    box-sizing: border-box;
}


/* ==========================================================================
   Card Wrapper

   Figma:
   width: 1250px;
   height: 248.16px;
   gap: 8.07px;
   ========================================================================== */

.single-category-navigation__grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    width: 1250px;
    height: 248.16px;

    padding: 0;
    margin: 0;

    gap: 8.07px;

    box-sizing: border-box;
}


/* ==========================================================================
   Category Card

   Figma:
   width: 306.45px;
   height: 247.85px;
   padding: 4.03252px 4.03252px 8.06504px;
   gap: 8.07px;
   ========================================================================== */

.single-category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    flex: none;

    width: 306.45px;
    height: 247.85px;

    padding:
        4.03252px
        4.03252px
        8.06504px;

    margin: 0;

    gap: 8.07px;

    box-sizing: border-box;

    background: transparent;

    border: 0;

    border-radius: 2.01626px;

    color: #333333;

    text-decoration: none;

    overflow: hidden;
}


/* ==========================================================================
   Active Category

   Figma:
   background: #F2E8E8;
   ========================================================================== */

.single-category-card.is-active {
    background: #f2e8e8;
}


/* ==========================================================================
   Category Image

   Figma:
   width: 298.39px;
   height: 209.69px;
   ========================================================================== */

.single-category-card__image {
    box-sizing: border-box;

    flex: none;

    width: 298.39px;
    height: 209.69px;

    padding: 0;
    margin: 0;

    overflow: hidden;

    background: #ffffff;

    border:
        0.504065px solid
        rgba(51, 51, 51, 0.4);

    border-radius: 1.00813px;
}


/* ==========================================================================
   Category Image Element
   ========================================================================== */

.single-category-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;

    object-fit: cover;
    object-position: center;

    border: 0;

    border-radius: inherit;
}


/* ==========================================================================
   Empty Image Placeholder
   ========================================================================== */

.single-category-card__placeholder {
    width: 100%;
    height: 100%;

    background: #eeeeee;
}


/* ==========================================================================
   Headline Wrapper

   Figma:
   width: 298.39px;
   height: 18px;
   padding: 0px 8.06504px 0px 0px;
   ========================================================================== */

.single-category-card__headline {
    display: flex;
    flex-direction: row;

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

    flex: none;

    width: 298.39px;
    height: 18px;

    padding:
        0
        8.06504px
        0
        0;

    margin: 0;

    gap: 5.04px;

    box-sizing: border-box;
}


/* ==========================================================================
   Category Heading
   ========================================================================== */

.single-category-card__headline h3 {
    flex: none;

    width: 290.32px;
    height: 18px;

    padding: 0;
    margin: 0 auto;
 

    font-style: normal;

    font-weight: 600;

    font-size: 16.1301px;

    line-height: 112%;

    letter-spacing: -0.02em;

    color: #333333;

    text-decoration: none;

    text-align: left;
}


/* ==========================================================================
   Active Heading
   ========================================================================== */

.single-category-card.is-active
.single-category-card__headline h3 {
    color: #994f67;
}


/* ==========================================================================
   Prevent Astra Link Defaults
   ========================================================================== */

.single-category-card,
.single-category-card:hover,
.single-category-card:focus,
.single-category-card:visited {
    text-decoration: none;
}

.single-category-card:hover
.single-category-card__headline h3 {
    color: #333333;
}

.single-category-card.is-active:hover
.single-category-card__headline h3 {
    color: #994f67;
}


/* ==========================================================================
   RTL SUPPORT
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| RTL Card Direction
|--------------------------------------------------------------------------
|
| When HTML has:
|
| <html dir="rtl">
|
| the first card starts on the right.
|
*/

html[dir="rtl"]
.single-category-navigation {
    direction: rtl;
}


/*
|--------------------------------------------------------------------------
| Card Wrapper
|--------------------------------------------------------------------------
*/

html[dir="rtl"]
.single-category-navigation__grid {
    flex-direction: row;
    direction: rtl;
}


/*
|--------------------------------------------------------------------------
| Category Card
|--------------------------------------------------------------------------
*/

html[dir="rtl"]
.single-category-card {
    direction: rtl;
    align-items: flex-start;
}


/*
|--------------------------------------------------------------------------
| Headline Wrapper
|--------------------------------------------------------------------------
|
| Mirror the Figma padding:
|
| LTR:
| padding-right: 8.06504px;
|
| RTL:
| padding-left: 8.06504px;
|
*/

html[dir="rtl"]
.single-category-card__headline {
    padding:
        0
        0
        0
        8.06504px;

    direction: rtl;
}


/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

html[dir="rtl"]
.single-category-card__headline h3 {
    text-align: right;
    direction: rtl;
}


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

@media screen and (max-width: 1280px) {

    .single-category-navigation .container {
        width: 100%;
        max-width: 100%;

        padding-left: 20px;
        padding-right: 20px;
    }

    .single-category-navigation__grid {
        width: 100%;
        max-width: 1250px;

        height: auto;

        overflow-x: auto;

        padding-bottom: 8px;

        scrollbar-width: thin;
    }

    .single-category-card {
        flex: 0 0 306.45px;
    }

}


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

@media screen and (max-width: 767px) {

    .single-category-navigation .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .single-category-navigation__grid {
        gap: 8px;
    }

    .single-category-card {
        flex: 0 0 240px;

        width: 240px;
        height: 205px;

        padding:
            4px
            4px
            8px;

        gap: 8px;
    }

    .single-category-card__image {
        width: 232px;
        height: 165px;
    }

    .single-category-card__headline {
        width: 232px;
        height: 18px;

        padding-right: 6px;
    }

    .single-category-card__headline h3 {
        width: 226px;

        font-size: 16px;
    }

    html[dir="rtl"]
    .single-category-card__headline {
        padding-right: 0;
        padding-left: 6px;
    }

}

/* ==========================================================================
   Shop Staples — RTL Support
   ========================================================================== */

html[dir="rtl"] .shop-staples {
    direction: rtl;
}

html[dir="rtl"] .shop-staples__title {
    text-align: right;
    padding-left: 0;
    padding-right: 10px;
}

html[dir="rtl"] .shop-staples__products {
    direction: rtl;
}

html[dir="rtl"] .staple-product__content {
    direction: rtl;
}

html[dir="rtl"] .staple-product__name {
    text-align: center;
}