/*
 * TOHKSA - RTL layer (Arabic only).
 *
 * Loaded on top of style.css when Polylang resolves the request to 'ar'.
 * Scope: header, footer, and the shared primitives they depend on.
 *
 * The base sheet is written mostly in physical properties, so this layer
 * flips the pieces that carry direction rather than restating the design.
 */

/* ---------- type ---------- */
/*
 * IBM Plex Sans carries no Arabic glyphs, so Arabic text would otherwise
 * fall back to a system face. Lead with the Arabic family here; Latin
 * fragments inside Arabic copy still resolve to Plex Sans below.
 */
[dir="rtl"] body,
.thk-rtl,
.thk-rtl body {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}

/*
 * Arabic needs a little more leading than Latin at the same size: ascenders
 * and descenders in Plex Sans Arabic run deeper, and dotted glyphs collide
 * at the base line-heights.
 */
.thk-rtl .thk-nav a,
.thk-rtl .thk-footer__nav a,
.thk-rtl .thk-footer__legal {
  line-height: 1.9;
}

/*
 * Latin tracking hurts Arabic: it breaks the connected joins between
 * letterforms. Reset it everywhere the base sheet sets it.
 */
.thk-rtl .thk-nav a,
.thk-rtl .thk-footer__nav a,
.thk-rtl .thk-footer__legal,
.thk-rtl .thk-footer__brand {
  letter-spacing: normal;
}

/*
 * Arabic has no letter case, so uppercase transforms are inert at best.
 * The footer links are uppercased in the Latin design; drop it and lift
 * the size slightly so the Arabic reads at the same optical weight.
 */
.thk-rtl .thk-footer__nav a {
  text-transform: none;
  font-size: 15px;
}

/* ---------- header ---------- */
.thk-rtl .thk-header {
  left: 0;
  right: 0;
}

/*
 * The header inner is a flex row with space-between. Reversing it puts the
 * logo on the right and the nav pill on the left, mirroring the Arabic
 * board without touching the base layout rules.
 */
.thk-rtl .thk-header__inner {
  flex-direction: row-reverse;
}

.thk-rtl .thk-navbar {
  flex-direction: row-reverse;
}

/*
 * Nav items run right to left. The pill itself keeps its geometry; only
 * the running order of the labels flips.
 */
.thk-rtl .thk-nav {
  flex-direction: row-reverse;
}

.thk-rtl .thk-nav__lang {
  flex-direction: row-reverse;
}

/* ---------- footer ---------- */
/*
 * Footer top is space-between: reversing puts the link columns on the
 * right and the wordmark on the left, matching the Arabic board.
 */
.thk-rtl .thk-footer__top {
  flex-direction: row-reverse;
}

/*
 * The base sheet pushes the columns in from the left with a physical
 * margin. Move that inset to the right instead.
 */
.thk-rtl .thk-footer__nav {
  margin-left: 0;
  margin-right: 108px;
  direction: rtl;
}

.thk-rtl .thk-footer__bottom {
  flex-direction: row-reverse;
}

.thk-rtl .thk-footer__brand,
.thk-rtl .thk-footer__legal {
  text-align: right;
}

/* ---------- mirrored glyphs ---------- */
/*
 * The circled arrow is a directional glyph: it means "forward", which is
 * leftward in Arabic. Mirror it rather than shipping a second asset.
 * The logo and the globe are not directional and must not be flipped.
 */
.thk-rtl .thk-card__arrow,
.thk-rtl .thk-news__more img,
.thk-rtl .thk-btn img {
  transform: scaleX(-1);
}

/* ---------- responsive ---------- */
/*
 * Mirrors the English header's mobile behaviour at the same breakpoints:
 * the pill nav is replaced by a hamburger below 600px. Everything that is
 * pinned to one side in the Latin header is pinned to the opposite side here.
 */
.thk-global-mobile-menu {
  display: none;
}

@media (max-width: 900px) {
  /*
   * The header collapses to a stacked column on small screens, so the
   * row-reverse above no longer applies and must not fight the base rule.
   */
  .thk-rtl .thk-header__inner {
    flex-direction: column;
  }

  .thk-rtl .thk-nav {
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }

  .thk-rtl .thk-footer__nav {
    margin-right: 0;
  }

  .thk-rtl .thk-footer__top,
  .thk-rtl .thk-footer__bottom {
    flex-direction: column;
    align-items: flex-end;
  }
}

@media (max-width: 600px) {
  .thk-rtl .thk-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1000;
    height: 98px;
    color: #fff;
  }

  .thk-rtl.admin-bar .thk-header {
    top: 46px;
  }

  .thk-rtl .thk-header > .thk-wrap {
    position: relative;
    width: 100%;
    max-width: none;
    height: 98px;
    margin: 0;
    padding: 0;
  }

  .thk-rtl .thk-header__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 98px;
  }

  /* logo pins to the right in Arabic, where the English header pins left */
  .thk-rtl .thk-header__logo {
    position: absolute;
    top: 34px;
    right: 31px;
    z-index: 2;
  }

  .thk-rtl .thk-header__logo img {
    display: block;
    width: 70px;
    height: 51px;
    object-fit: contain;
  }

  .thk-rtl .thk-logo--dark {
    display: none;
  }

  .thk-rtl .thk-navbar,
  .thk-rtl .thk-header .thk-nav {
    display: none;
  }

  /* burger pins to the left, opposite the logo */
  .thk-rtl .thk-global-mobile-menu {
    position: absolute;
    top: 34px;
    left: 26px;
    z-index: 1001;
    display: block;
    color: #fff;
  }

  .thk-rtl .thk-global-mobile-menu summary {
    display: grid;
    width: 27px;
    height: 13px;
    padding: 0;
    align-content: space-between;
    cursor: pointer;
    list-style: none;
  }

  .thk-rtl .thk-global-mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .thk-rtl .thk-global-mobile-menu summary span {
    display: block;
    width: 27px;
    height: 3px;
    background: #fff;
  }

  /* panel opens from the left edge, mirroring the English right-edge panel */
  .thk-rtl .thk-global-mobile-menu nav {
    position: absolute;
    top: 28px;
    left: 0;
    width: 250px;
    padding: 18px;
    border-radius: var(--thk-r-md);
    background: var(--thk-deep);
    box-shadow: 0 18px 40px rgba(8, 13, 25, 0.3);
    text-align: right;
  }

  .thk-rtl .thk-global-mobile-menu nav a {
    display: block;
    padding: 10px 8px;
    color: #fff;
    font-size: 14px;
    line-height: 1.9;
    text-decoration: none;
  }

  .thk-rtl .thk-global-mobile-menu nav a:hover,
  .thk-rtl .thk-global-mobile-menu nav a:focus-visible {
    color: var(--thk-gold);
  }
}