/* =====================================================================
   rtl.css  -  Right-to-left overrides for the Arabic (/ar/) version.
   Loaded from _Layout.cshtml only when the current route language is "ar".
   Layered on top of bootstrap.min.css + style.css.
   ===================================================================== */

body {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', Tahoma, 'Tajawal', 'Cairo', Arial, sans-serif;
}

/* ---- Header / navigation -------------------------------------------- */
/* Bootstrap 3 floats the nav and brand to the left; mirror them. */
.navbar-header { float: right; }
.navbar-brand  { float: right; }
.navbar-nav    { float: right; }
.navbar-nav > li { float: right; }

/* The top "Download / iOS" group sits opposite the nav in RTL. */
.right     { float: left; }
.top-links { float: right; }

.lang-switch > a { font-weight: 700; }

/* ---- Grid mirroring -------------------------------------------------- */
/* Reverse the visual order of Bootstrap columns so image/text pairs and
   multi-column feature rows read correctly right-to-left. */
.row > [class*="col-"] { float: right; }

/* ---- Text blocks ----------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt,
.summary, .page-title,
.wrapper, .contact-section {
    text-align: right;
}

/* Things that should stay centred regardless of direction. */
.text-center,
.modal-center,
.modal-heading,
.modal-help,
.login-logo {
    text-align: center;
}

/* ---- Footer ---------------------------------------------------------- */
.copyright    { text-align: right; }
.footer-links { text-align: left; }

/* ---- Bootstrap helper flips ----------------------------------------- */
.pull-left  { float: right !important; }
.pull-right { float: left  !important; }

/* Breadcrumb separators/lists read from the right. */
.breadcrumb-list { text-align: left; }

/* ---- Small screens: let the stacked nav flow naturally -------------- */
@media (max-width: 767px) {
    .navbar-nav,
    .navbar-nav > li,
    .row > [class*="col-"] {
        float: none;
    }
}

/* Issue #3 - mirror the hamburger to the start (left) side in RTL; the base
   rule floats it right with left margin, so flip both. */
@media (max-width: 767px) {
	.navbar-toggle {
		float: left;
		margin: 12px 12px 12px 0;
	}
}

/* --------------------------------------------------------------------------
   FlexSlider is not RTL-aware: under direction:rtl its track is positioned
   off-screen, leaving the hero (and the transparent header over it) blank
   white. Keep the slider mechanics in LTR; re-align only the caption text.
   -------------------------------------------------------------------------- */
.slider,
.flexslider,
.flex-viewport,
.slider .slides,
.slider .slides > li,
.flex-control-nav {
	direction: ltr;
}
.slider .slide_text,
.slider .caption {
	direction: rtl;
	text-align: right;
}

/* Mirror the hero images for RTL so the composition faces the Arabic reading
   direction. Flip the <picture> wrapper (image only) rather than the <img>,
   so FlexSlider's Ken Burns transform animations on the active <img> still
   run — and the caption (a sibling of <picture>) is not mirrored. */
.slider .slides picture {
	transform: scaleX(-1);
}