/*
Theme Name: Glitchy
Description: RTL stylesheet for Arabic Language Support
*/

/* RTL Direction Overrides */
body.rtl {
    direction: rtl;
    text-align: right;
    font-size: 16px;
}

/* Slightly larger Arabic typography */
body.rtl .main-navigation a,
body.rtl .btn,
body.rtl .shop-hero-desc,
body.rtl .woocommerce-result-count,
body.rtl .cat-card-name,
body.rtl .shop-promo-item span,
body.rtl .journal-card-body p {
    font-size: 0.92rem;
}

body.rtl .shop-hero-title,
body.rtl .shop-cats-carousel-title,
body.rtl .section-title,
body.rtl .shop-catalog-label {
    font-size: calc(1em + 0.12rem);
}

body.rtl .shop-hero-title {
    font-size: clamp(2.1rem, 4.5vw, 3.2rem);
}

body.rtl .hero-title {
    font-size: clamp(2.3rem, 5vw, 3.4rem);
}

body.rtl h1, body.rtl h2, body.rtl h3 {
    letter-spacing: 0;
}

/* Let the browser handle standard flex rows naturally in RTL. 
   Do NOT reverse them using row-reverse, otherwise it breaks the flow. */
body.rtl .header-inner,
body.rtl .main-navigation ul,
body.rtl .header-actions {
    flex-direction: row !important;
}

/* Margin/Padding flips */
body.rtl .brand-story-inner {
    direction: rtl;
}

body.rtl .footer-grid {
    direction: rtl;
}

/* Cart count */
body.rtl .cart-count {
    right: auto;
    left: -8px;
}

/* Account nav */
body.rtl .woocommerce-account .woocommerce-MyAccount-navigation {
    float: right;
    border-right: none;
    border-left: 1px solid var(--color-border);
    padding-right: 0;
    padding-left: 24px;
}

body.rtl .woocommerce-account .woocommerce-MyAccount-content {
    float: left;
}

/* Cart drawer */
body.rtl .offcanvas-cart {
    right: auto;
    left: -400px;
    transition: left 0.35s ease;
}

body.rtl .offcanvas-cart.is-open {
    left: 0;
    right: auto;
}

/* Product grid text */
body.rtl ul.products li.product {
    text-align: center;
}

/* Navigation underline */
body.rtl .main-navigation a::after {
    left: auto;
    right: 0;
}

/* Hero — align text to the far right in Arabic */
body.rtl .hero-section,
body.rtl .hero-section .hero-inner {
    justify-content: flex-start;
}

body.rtl .hero-content {
    margin-inline-start: 0;
    margin-inline-end: auto;
    text-align: right;
}

body.rtl .shop-hero-content {
    text-align: right;
    margin-inline-start: 0;
    margin-inline-end: auto;
}

body.rtl .page-inner-row,
body.rtl .contact-grid {
    direction: rtl;
}