/*
 * albakry Theme — RTL Overrides
 * Redirects spacing, margins, and alignment using CSS Logical Properties.
 * WordPress auto-loads this file when is_rtl() returns true.
 *
 * Convention: Logical Properties already baked into theme.css handle most
 * RTL cases transparently. This file adds overrides only for properties that
 * need explicit RTL flipping where browsers or older code use physical values.
 *
 * @package albakry
 * @since   1.0.0
 */

/* ==========================================================================
   1. Document Direction & Base Typography
   ========================================================================== */

html,
body {
	direction: rtl;
}

body {
	/* Cairo renders well in RTL, no font swap needed */
	font-family: 'Cairo', sans-serif;
	text-align:  start; /* resolves to right in RTL */
}

/* ==========================================================================
   2. Lists — flip default browser indentation
   ========================================================================== */

ul,
ol {
	/* Overrides the padding-inline-start set in theme.css to ensure it
	   resolves correctly in all browsers (belt-and-suspenders). */
	padding-inline-start: 0;
	padding-inline-end:   2rem; /* visual indentation on the right side in RTL */
}

/* ==========================================================================
   3. Blockquote — flip left border to right
   ========================================================================== */

blockquote {
	border-inline-start: none;
	border-inline-end:   4px solid var(--color-accent);
	padding-inline-start: 0;
	padding-inline-end:   1rem;
}

/* ==========================================================================
   4. Tables — text alignment
   ========================================================================== */

th,
td {
	text-align: start; /* resolves to right in RTL */
}

/* ==========================================================================
   5. Skip Link — position on the right in RTL
   ========================================================================== */

.skip-link {
	inset-inline-start: auto;
	inset-inline-end:   1rem;
}

/* ==========================================================================
   6. WP Alignment helpers (physical overrides for old block styles)
   ========================================================================== */

/* alignfull already uses logical margin in theme.css; keep symmetrical */
.alignfull {
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end:   calc(50% - 50vw);
}

/* ==========================================================================
   7. Buttons — icon / gap direction
   ========================================================================== */

.albakry-btn {
	/* flex-direction stays row; gap is direction-agnostic — no override needed */
	/* Any icon inside should be flipped via transform if needed per component */
}

/* ==========================================================================
   8. Block Editor — RTL adjustments for editor-style.css
   ========================================================================== */

.editor-styles-wrapper {
	direction:  rtl;
	text-align: start;
}

.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
	padding-inline-start: 0;
	padding-inline-end:   2rem;
}

.editor-styles-wrapper blockquote {
	border-inline-start: none;
	border-inline-end:   4px solid var(--color-accent);
	padding-inline-start: 0;
	padding-inline-end:   1rem;
}

/* ==========================================================================
   9. Gutenberg Block — RTL physical property overrides
   ========================================================================== */

/* Core paragraph block */
.wp-block-paragraph {
	text-align: start;
}

/* Core image captions */
.wp-block-image figcaption {
	text-align: center; /* captions stay centred regardless of direction */
}

/* Core separator */
.wp-block-separator {
	margin-inline: auto;
}

/* Core navigation items */
.wp-block-navigation__container {
	/* logical gap already handles RTL order */
	gap: 0.5rem;
}

/* Core list block */
.wp-block-list {
	padding-inline-start: 0;
	padding-inline-end:   1.5rem;
}

/* ==========================================================================
   10. Form Elements — RTL label / input alignment
   ========================================================================== */

label,
input,
textarea,
select {
	text-align: start;
}

/* Input icons / adornments placed with padding-inline */
.input-with-icon {
	padding-inline-start: 1rem;
	padding-inline-end:   2.5rem; /* icon sits on the left side in RTL */
}

/* ==========================================================================
   11. Utility Classes — RTL flips
   ========================================================================== */

/* Text alignment helpers */
.text-start {
	text-align: start; /* right in RTL */
}

.text-end {
	text-align: end; /* left in RTL */
}

/* Margin helpers using logical properties */
.ms-auto {
	margin-inline-start: auto;
}

.me-auto {
	margin-inline-end: auto;
}

/* Flex row — direction is preserved; items appear right-to-left naturally */
.flex-row-rtl {
	flex-direction: row; /* logical flow handles order */
}

/* ==========================================================================
   12. Responsive RTL — ensure logical properties at breakpoints
   ========================================================================== */

@media (max-width: 768px) {
	/* Navigation hamburger icon swaps sides */
	.albakry-header__hamburger {
		margin-inline-start: auto;
		margin-inline-end:   0;
	}

	/* Stacked elements still align to start */
	.albakry-container,
	.albakry-surface {
		text-align: start;
	}
}