/* ================================================================
   RIYO STUDIO — Arabic (RTL) layer for the tool pages.
   Loaded after style.css and chrome.css on the -ar tool pages.
   ================================================================ */

@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/plex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/plex-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/plex-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/plex-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/amiri-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;}

/* Arabic glyphs come from Plex; Latin text and numbers fall through to Inter */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  font-family: 'IBM Plex Sans Arabic', 'Inter', -apple-system, 'Segoe UI', Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
}

/* Header */
html[dir="rtl"] body:not(.home) #main-nav .nav-links { margin-left: 28px; margin-right: auto; }
html[dir="rtl"] body:not(.home) #main-nav .nav-brand-tag { font-size: 11px; text-transform: none; }
@media (max-width: 960px) {
  html[dir="rtl"] body:not(.home) #main-nav .nav-links { gap: 18px; margin-left: 16px; }
}

/* Drawer slides in from the right */
html[dir="rtl"] .site-drawer {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(102%);
}
html[dir="rtl"] .site-drawer.open { transform: translateX(0); }
html[dir="rtl"] .nav-burger { margin-left: 0; margin-right: -6px; }
html[dir="rtl"] .drawer-group { font-size: 12.5px; text-transform: none; }
@media (max-width: 768px) {
  html[dir="rtl"] .drawer-nav .nav-inner { padding-left: 16px; padding-right: 14px; }
}

/* Tool page furniture */
html[dir="rtl"] .tool-header-title,
html[dir="rtl"] .tool-header-subtitle { text-align: right; }
html[dir="rtl"] .tool-header-subtitle { line-height: 1.8; }
html[dir="rtl"] .studio-hook h2 { font-weight: 600; line-height: 1.45 !important; }
html[dir="rtl"] .studio-hook-card {
  background:
    radial-gradient(600px circle at 100% 0%, rgba(16, 185, 129, 0.14), transparent 60%),
    #0A0E12;
}
html[dir="rtl"] .mobile-tool-fab { right: auto; left: 16px; }

/* Email, phone, web and code-like values keep their own direction */
html[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input.ltr { direction: ltr; text-align: right; }
html[dir="rtl"] input[type="email"]::placeholder,
html[dir="rtl"] input[type="url"]::placeholder,
html[dir="rtl"] input[type="tel"]::placeholder { text-align: right; }

/* Switches start on the reading side */
html[dir="rtl"] .toggle-slider::before { left: auto; right: 2px; }
html[dir="rtl"] .toggle-switch input:checked + .toggle-slider::before { transform: translateX(-20px); }

/* site-styles: Paper and Navy, written by scripts/site-styles.mjs; edit the rules above, then rerun */
@media screen {
html:where(.ab-alt)[dir="rtl"] .site-drawer { border-left: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
html:where(.ab-alt)[dir="rtl"] .studio-hook-card { background: radial-gradient(600px circle at 100% 0%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 60%),
    var(--bg-deep); }
}
/* /site-styles */