/**
 * Harabat Brand - RTL Adjustment CSS
 * Overwrites text alignments, floats, and font families for Arabic script layouts.
 */

/* 1. Typography Overwrite */
body, 
h1, h2, h3, h4, h5, h6, 
.font-serif,
.brand-logo-text,
.story-headline,
.cta-title {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
}

/* 2. Hero Balanced Image Overlays */
[dir="rtl"] .hero-comp-1 {
    left: auto;
    right: 5%;
}
[dir="rtl"] .hero-comp-2 {
    right: auto;
    left: 5%;
}

/* 3. Story Frame Overlays */
[dir="rtl"] .frame-1 {
    left: auto;
    right: 0;
}
[dir="rtl"] .frame-2 {
    right: auto;
    left: 0;
}

/* 4. CTA Composite Image Overlays */
[dir="rtl"] .cta-img-1 {
    left: auto;
    right: 0;
}
[dir="rtl"] .cta-img-2 {
    right: auto;
    left: 0;
}

/* 5. Hover and Spacing Overrides */
[dir="rtl"] .footer-link:hover {
    padding-left: 0;
    padding-right: 4px;
}

/* 6. Form elements adjustments */
[dir="rtl"] .form-select {
    background-position: left 0.75rem center;
}

/* 7. Icon offsets */
[dir="rtl"] .bi {
    display: inline-block;
}
[dir="rtl"] .me-1, [dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: .25rem !important;
}

/* 8. Offcanvas adjustments */
[dir="rtl"] .harabat-offcanvas {
    border-left: none;
    border-right: 1px solid rgba(201, 153, 47, 0.2);
}