/* SafeBrowz RTL stylesheet — paired with the existing English styles
   already inlined in each English page. Arabic pages link this file
   AFTER the inlined styles to override directional properties. */

/* Tajawal — clean modern Arabic typeface, free Google Font.
   @import must be first non-comment statement. */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

/* Base RTL — flips text direction, anchors flow start/end correctly */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: "Tajawal", "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Letters in RTL text but content is technical: keep numbers, code, URLs LTR */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .ltr,
html[dir="rtl"] [dir="ltr"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
}

/* Flip flexbox row direction so headers, nav, button rows mirror */
html[dir="rtl"] .nav,
html[dir="rtl"] .nav-right,
html[dir="rtl"] .container,
html[dir="rtl"] header > div,
html[dir="rtl"] .row,
html[dir="rtl"] .footer-grid {
    direction: rtl;
}

/* Margin/padding that was left/right specific needs to flip */
html[dir="rtl"] .nav-right { margin-left: 0; margin-right: auto; }

/* Logo — "SafeBrowz" is a Latin brand name, keep it rendered LTR even on the
   RTL Arabic page. This matches the English layout exactly (shield SVG on
   the left, brand text on the right) and avoids bidi rendering quirks that
   pushed the SVG below the text. */
html[dir="rtl"] .brand {
    direction: ltr;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    align-items: center;
    flex-shrink: 0;
    min-width: max-content;
}
html[dir="rtl"] .brand svg {
    flex-shrink: 0;
    vertical-align: middle;
    display: block;
    /* Tight pull — matches the English source's `.brand svg{margin-right:-1px;}` */
    margin-right: -1px;
    margin-left: 0;
}
html[dir="rtl"] .brand-text {
    white-space: nowrap;
    flex-shrink: 0;
    direction: ltr;
    /* Latin brand name — explicitly use the same font as the English page
       so cap-height + baseline match the shield SVG. Without this it inherits
       Tajawal (set on body) and the Latin glyphs sit too low next to the SVG. */
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Hero — Tajawal Arabic glyphs are taller than the Latin defaults, so the
   line-height: 1.02 set on H1 in the English source clips into the hero-tag
   above it. Bump line-height to 1.25 and add breathing room between elements. */
html[dir="rtl"] .hero-content {
    padding-top: 12px;
}
html[dir="rtl"] .hero-tag {
    margin-bottom: 36px;
    line-height: 1.5;
    /* Long Arabic translation may exceed inline-flex box; allow text to wrap inside. */
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}
html[dir="rtl"] .hero h1 {
    line-height: 1.25;
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 28px;
}
html[dir="rtl"] .hero p.sub {
    line-height: 1.7;
}

/* Lists: bullet point appears on the right side */
html[dir="rtl"] ul, html[dir="rtl"] ol {
    padding-right: 1.5em;
    padding-left: 0;
}

/* Blockquote border flips to right side */
html[dir="rtl"] blockquote {
    border-right: 4px solid #10b981;
    border-left: none;
    padding-right: 1rem;
    padding-left: 0;
}

/* Language toggle pill — top right of header in RTL becomes top left */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.15s;
}
.lang-toggle:hover { background: rgba(16, 185, 129, 0.2); }