/* ============================================================
   KNY News — Global RTL / LTR direction layer
   Loaded after main.css; uses html[dir] as the single source of truth.
   ============================================================ */

html[dir="rtl"],
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-family: var(--font-ar);
}

html[dir="ltr"],
html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
  font-family: var(--font-en);
}

/* Logical safe-area padding (replaces physical L/R on .container) */
.container,
.container-sm {
  padding-inline-start: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-inline-end: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Forms & tables inherit document alignment */
input,
textarea,
select,
.form-control,
.drawer-search-input,
.nav-search-input {
  text-align: start;
}

table {
  direction: inherit;
}

th,
td {
  text-align: start;
}

/* ── Compact site header (2026) ──────────────────────────────── */
html[dir="rtl"] .nav-cluster--start {
  flex-direction: row;
}

html[dir="ltr"] .nav-cluster--start {
  flex-direction: row;
}

.nav-logo {
  margin-inline-start: 0;
  justify-content: flex-start;
  align-items: flex-start;
}

html[dir="rtl"] .nav-search-dialog-form .btn {
  align-self: flex-start;
}

/* ── Navigation & chrome ─────────────────────────────────────── */
.nav-search-icon {
  inset-inline-start: 11px;
  inset-inline-end: auto;
  left: auto;
  right: auto;
}

.nav-search-input {
  padding-inline-start: 36px;
  padding-inline-end: 12px;
}

.mega-menu {
  inset-inline-end: 0;
  inset-inline-start: auto;
  left: auto;
  right: auto;
}

html[dir="ltr"] .mega-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

.nav-menu {
  justify-content: flex-end;
}

html[dir="ltr"] .nav-menu {
  justify-content: flex-start;
}

/* ── Breaking ticker ─────────────────────────────────────────── */
.breaking-label {
  border-inline-start: none;
}

html[dir="rtl"] .breaking-label::after {
  inset-inline-start: -10px;
  inset-inline-end: auto;
  left: -10px;
  right: auto;
  border-inline-start: 10px solid transparent;
  border-inline-end: none;
  border-left: 10px solid transparent;
  border-right: none;
}

html[dir="ltr"] .breaking-label::after {
  inset-inline-end: -10px;
  inset-inline-start: auto;
  left: auto;
  right: -10px;
  border-inline-end: 10px solid transparent;
  border-inline-start: none;
  border-right: 10px solid transparent;
  border-left: none;
}

html[dir="ltr"] .breaking-track,
html[dir="rtl"] .breaking-track {
  animation-name: breakingMarquee;
  animation-direction: normal;
}

/* Breaking label wedge removed — it overlapped the navbar above */
html[dir="rtl"] .breaking-label::after,
html[dir="ltr"] .breaking-label::after {
  display: none !important;
  content: none !important;
}

html[dir="rtl"] .knews-scroll {
  direction: rtl;
}

html[dir="ltr"] .knews-scroll {
  direction: ltr;
}

/* ── Hero carousel arrows ────────────────────────────────────── */
.hero-arrow-prev {
  inset-inline-end: 14px;
  inset-inline-start: auto;
  left: auto;
  right: auto;
}

.hero-arrow-next {
  inset-inline-start: 14px;
  inset-inline-end: auto;
  left: auto;
  right: auto;
}

.hero-stack-item::before {
  inset-inline-end: 0;
  inset-inline-start: auto;
  left: auto;
  right: auto;
}

html[dir="ltr"] .hero-stack-item::before {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

/* ── Cards & section labels ──────────────────────────────────── */
.card-cat-badge {
  inset-inline-end: 0;
  inset-inline-start: auto;
  left: auto;
  right: auto;
}

.card-breaking-badge {
  inset-inline-start: 0;
  inset-inline-end: auto;
  left: auto;
  right: auto;
}

html[dir="ltr"] .card-breaking-badge {
  inset-inline-end: 0;
  inset-inline-start: auto;
}

.sec-label-cat-icon {
  margin-inline-start: 4px;
}

.sec-label-more {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.section-header::after {
  inset-inline-end: 0;
  inset-inline-start: auto;
  left: auto;
  right: auto;
}

.widget-header::after {
  inset-inline-end: 0;
  inset-inline-start: auto;
  left: auto;
  right: auto;
}

.cat-tab::after {
  inset-inline-start: 50%;
  inset-inline-end: 50%;
  left: 50%;
  right: 50%;
}

.cat-tab.active::after,
.cat-tab:hover::after {
  inset-inline-start: 0;
  inset-inline-end: 0;
  left: 0;
  right: 0;
}

/* ── Article typography ────────────────────────────────────────── */
.article-subtitle {
  padding-inline-end: 14px;
  border-inline-end: 3px solid var(--red);
  border-inline-start: none;
  padding-inline-start: 0;
}

html[dir="ltr"] .article-subtitle {
  padding-inline-start: 14px;
  padding-inline-end: 0;
  border-inline-start: 3px solid var(--red);
  border-inline-end: none;
}

.article-body blockquote {
  border-inline-end: 4px solid var(--red);
  border-inline-start: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

html[dir="ltr"] .article-body blockquote {
  border-inline-start: 4px solid var(--red);
  border-inline-end: none;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.article-body ul,
.article-body ol {
  padding-inline-end: 24px;
  padding-inline-start: 0;
}

html[dir="ltr"] .article-body ul,
html[dir="ltr"] .article-body ol {
  padding-inline-start: 24px;
  padding-inline-end: 0;
}

.share-label {
  margin-inline-start: 4px;
}

/* ── Events & cards ────────────────────────────────────────────── */
.event-card {
  border-inline-end: 4px solid var(--red);
  border-inline-start: none;
}

html[dir="ltr"] .event-card {
  border-inline-start: 4px solid var(--red);
  border-inline-end: none;
}

html[dir="ltr"] .event-card:hover {
  transform: translateX(2px);
}

html[dir="rtl"] .event-card:hover {
  transform: translateX(-2px);
}

/* ── Toast & back-to-top ───────────────────────────────────────── */
.toast-container {
  inset-inline-end: max(22px, env(safe-area-inset-right, 0px));
  inset-inline-start: auto;
  left: auto;
  right: auto;
}

.toast {
  border-inline-end: 3px solid var(--red);
  border-inline-start: none;
}

html[dir="ltr"] .toast {
  border-inline-start: 3px solid var(--red);
  border-inline-end: none;
}

html[dir="ltr"] .toast {
  animation-name: toastSlideLTR;
}

.back-to-top {
  inset-inline-end: max(22px, env(safe-area-inset-right, 0px));
  inset-inline-start: auto;
  left: auto;
  right: auto;
}

html[dir="ltr"] .back-to-top {
  inset-inline-start: max(22px, env(safe-area-inset-left, 0px));
  inset-inline-end: auto;
}

/* ── Lightbox close ─────────────────────────────────────────────── */
html[dir="rtl"] .lightbox-close {
  inset-inline-start: max(18px, env(safe-area-inset-left, 0px));
  inset-inline-end: auto;
}

html[dir="ltr"] .lightbox-close {
  inset-inline-end: max(18px, env(safe-area-inset-right, 0px));
  inset-inline-start: auto;
}

/* ── Scroll reveal (direction-aware) ──────────────────────────── */
.reveal.from-right {
  transform: translateX(-32px);
}

.reveal.from-left {
  transform: translateX(32px);
}

html[dir="ltr"] .reveal.from-right {
  transform: translateX(32px);
}

html[dir="ltr"] .reveal.from-left {
  transform: translateX(-32px);
}

/* ── Page transition overlay ───────────────────────────────────── */
.page-transition-overlay {
  transform-origin: inline-end;
}

html[dir="ltr"] .page-transition-overlay {
  transform-origin: inline-start;
}

/* ── Hero stack borders (tablet) ──────────────────────────────── */
@media (max-width: 900px) {
  .hero-stack-item {
    border-inline-start: 1px solid var(--border);
    border-inline-end: none;
  }

  html[dir="rtl"] .hero-stack-item {
    border-inline-end: 1px solid var(--border);
    border-inline-start: none;
  }
}

/* ── Footer utilities ─────────────────────────────────────────── */
.footer-link i,
.footer-links a i {
  margin-inline-end: 6px;
}