/* =============================================================================
   Ho Store — Legal pages
   Document typography + language toggle + navbar "Legal" dropdown.
   Relies on the --pub-* tokens defined on body.ho-public in home-pro.css.
   ============================================================================= */

/* ---- Page shell ---------------------------------------------------------- */
.ho-legal-main { padding: 120px 0 96px; min-height: 70vh; }
.ho-legal-container { max-width: 820px; }

.ho-legal { position: relative; }

/* ---- Language toggle ----------------------------------------------------- */
.ho-legal-lang {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    margin: 0 0 32px;
    background: var(--pub-surface-2);
    border: 1px solid var(--pub-hairline-2);
    border-radius: 999px;
}
.ho-legal-lang-btn {
    font: 500 13px/1 'Inter', 'Tajawal', system-ui, sans-serif;
    color: var(--pub-text-soft);
    background: transparent;
    border: 0;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}
.ho-legal-lang-btn:hover { color: var(--pub-text); }
.ho-legal-lang-btn.is-active {
    color: #05130d;
    background: var(--pub-accent);
    font-weight: 600;
}

/* ---- Rendered document --------------------------------------------------- */
.ho-legal-doc { color: var(--pub-text-soft); font-size: 15.5px; line-height: 1.85; }
.ho-legal-doc[dir="rtl"] { font-family: 'Tajawal', 'Inter', system-ui, sans-serif; text-align: right; }

.ho-legal-doc h1 {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.2;
    color: var(--pub-text);
    margin: 0 0 24px;
    letter-spacing: -0.02em;
    font-weight: 800;
}
.ho-legal-doc h2 {
    font-size: 22px;
    color: var(--pub-text);
    margin: 44px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pub-hairline);
    font-weight: 700;
}
.ho-legal-doc h3 { font-size: 18px; color: var(--pub-text); margin: 30px 0 10px; font-weight: 600; }
.ho-legal-doc h4 { font-size: 15.5px; color: var(--pub-text); margin: 24px 0 8px; font-weight: 600; }
.ho-legal-doc p { margin: 0 0 18px; }
.ho-legal-doc ul, .ho-legal-doc ol { margin: 0 0 18px; padding-inline-start: 26px; }
.ho-legal-doc li { margin: 6px 0; }
.ho-legal-doc a { color: var(--pub-accent); text-decoration: none; border-bottom: 1px solid var(--pub-accent-line); }
.ho-legal-doc a:hover { border-bottom-color: var(--pub-accent); }
.ho-legal-doc strong { color: var(--pub-text); }
.ho-legal-doc hr { border: 0; border-top: 1px solid var(--pub-hairline); margin: 36px 0; }
.ho-legal-doc blockquote {
    margin: 0 0 18px;
    padding: 4px 18px;
    border-inline-start: 3px solid var(--pub-accent-line);
    color: var(--pub-text-muted);
}
.ho-legal-doc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    background: var(--pub-surface-2);
    border: 1px solid var(--pub-hairline);
    border-radius: 5px;
    padding: 1px 6px;
}
.ho-legal-doc pre {
    background: var(--pub-bg-soft);
    border: 1px solid var(--pub-hairline);
    border-radius: 10px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 0 0 18px;
}
.ho-legal-doc pre code { background: none; border: 0; padding: 0; }
.ho-legal-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    display: block;
    overflow-x: auto;
}
.ho-legal-doc th, .ho-legal-doc td {
    border: 1px solid var(--pub-hairline);
    padding: 10px 14px;
    text-align: start;
}
.ho-legal-doc th { background: var(--pub-surface-2); color: var(--pub-text); font-weight: 600; }

/* Mobile: tighten the top padding (nav "Legal" dropdown styles live in
   home-pro.css since the dropdown renders on every page). */
@media (max-width: 900px) {
    .ho-legal-main { padding-top: 96px; }
}