/* SANAD long-text pages: support, privacy, delete account. Linked from site_page,
   not through an Odoo asset bundle, like the home page and the business portal. */
:root {
    --site-bg: #0c0c0d;
    --site-surface: #161618;
    --site-raised: #1f1f22;
    --site-line: #2e2e32;
    --site-gold: #d4af37;
    --site-gold-hi: #f0cf65;
    --site-ink: #f4f1e8;
    --site-muted: #a8a396;
    --site-radius: 12px;
    --site-gutter: clamp(16px, 5vw, 72px);
    --site-expo: cubic-bezier(.16, 1, .3, 1);
    color-scheme: dark;
    scrollbar-color: #5c4d1e var(--site-bg);
    scrollbar-width: thin;
}

html, body { margin: 0; background: var(--site-bg); }
::selection { background: var(--site-gold); color: var(--site-bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--site-bg); }
::-webkit-scrollbar-thumb { background: #5c4d1e; border: 2px solid var(--site-bg); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--site-gold); }

.site {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    color: var(--site-ink);
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.85;
    text-align: start;
    -webkit-font-smoothing: antialiased;
}
.site-main { flex: 1 0 auto; padding: clamp(2rem, 7vh, 4.5rem) var(--site-gutter) clamp(3rem, 9vh, 5.5rem); }
.site-doc { max-width: 46rem; overflow-wrap: anywhere; }
.site-doc *, .site-doc *::before, .site-doc *::after { box-sizing: border-box; }

/* ---------- Title: the road line from the home page, drawn once ---------- */
.site-title {
    margin: 0;
    padding-block-end: .9rem;
    font-size: clamp(2.1rem, 6vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    text-wrap: balance;
    position: relative;
}
.site-title::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: var(--site-gold);
    opacity: .5;
    transform-origin: 100% 50%;
}
html[dir="ltr"] .site-title::after { transform-origin: 0 50%; }
.site-sub { margin: .9rem 0 0; color: var(--site-muted); font-size: 1.2rem; }
.site-title + :not(.site-sub), .site-sub + * { margin-block-start: 1.75rem; }

/* ---------- Text ---------- */
.site-doc h2 {
    margin: 2.75rem 0 .6rem;
    color: var(--site-gold);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
}
.site-doc h3 {
    margin: 1.75rem 0 .2rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
}
.site-doc p { margin: 0 0 .9rem; }
.site-doc ul, .site-doc ol { margin: 0 0 .9rem; padding-inline-start: 1.4rem; }
.site-doc li { margin-block-end: .4rem; }
.site-doc li::marker { color: var(--site-gold); font-weight: 700; }
.site-doc b { font-weight: 700; }
.site-doc a:not(.site-btn) {
    color: var(--site-gold-hi);
    text-decoration: underline;
    text-decoration-color: rgba(212, 175, 55, .55);
    text-underline-offset: .22em;
    transition: text-decoration-color .2s;
}
.site-doc a:not(.site-btn):hover { text-decoration-color: var(--site-gold-hi); }
.site-doc a:focus-visible {
    outline: 2px solid var(--site-gold-hi);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Support: how to reach us comes before the questions ---------- */
.site-contact {
    padding: 1.25rem clamp(1rem, 4vw, 1.75rem) .5rem;
    background: var(--site-surface);
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius);
}
.site-contact h2 { margin-block-start: 0; }
.site-contact p > b { display: block; color: var(--site-muted); font-size: .95rem; font-weight: 500; }
.site-doc .site-email { font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 700; }

/* ---------- Tables stay two columns: every cell here is short enough at 360px ---------- */
.site-table {
    width: 100%;
    margin: .75rem 0 1.25rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    font-size: 1rem;
    line-height: 1.65;
}
.site-table th, .site-table td {
    padding: .7rem .85rem;
    border-block-end: 1px solid var(--site-line);
    text-align: start;
    vertical-align: top;
}
.site-table th {
    background: var(--site-raised);
    color: var(--site-gold);
    font-size: .92rem;
    font-weight: 700;
}
.site-table th:first-child { border-start-start-radius: var(--site-radius); }
.site-table th:last-child { border-start-end-radius: var(--site-radius); }
.site-table td:first-child { width: 42%; }
.site-table tbody tr:last-child td { border-block-end: 0; }

/* ---------- The one action on the delete page ---------- */
.site-doc .site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin-block-start: .4rem;
    padding: .5rem 1.4rem;
    border-radius: var(--site-radius);
    background: var(--site-gold);
    color: var(--site-bg);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s, transform .2s var(--site-expo);
}
.site-btn:hover { background: var(--site-gold-hi); transform: translateY(-2px); }
.site-btn:active { transform: translateY(0) scale(.98); }

@media (max-width: 520px) {
    .site-doc .site-btn { display: flex; }
    .site-table th, .site-table td { padding: .6rem .65rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .site-title::after { animation: site-draw 1.3s var(--site-expo) both; }
}
@keyframes site-draw { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    .site-doc a, .site-btn { transition: none !important; }
}