/* Dentora website: shared fonts, tokens and base styles, used by the landing page, the legal pages and the 404 page.
   Light theme only. Logical properties throughout, so the same rules serve Arabic (RTL) and English (LTR).

   Classes other pages can reuse:
     .container                     centred column with side gutters
     .site-header .header-inner .brand .header-actions .lang-link
                                    the top bar (logo + "Dentora", actions at the inline end)
     .btn + .btn-primary | .btn-outline | .btn-wa | .btn-white | .btn-ghost-light, sizes .btn-sm | .btn-lg, .btn-block
     .page .prose                   a long text page (privacy, terms) or a short message page (404)
     .site-footer .footer-bottom    the bottom bar
     .skip-link .sr-only .ic        accessibility helpers, 24×24 inline SVG icons */

/* ---- fonts (self-hosted subsets of the app's own pairing: Inter for Latin and digits, Noto Kufi Arabic for Arabic) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin-wght.woff2) format('woff2-variations'), url(/fonts/inter-latin-wght.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/noto-kufi-arabic-wght.woff2) format('woff2-variations'), url(/fonts/noto-kufi-arabic-wght.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;
}

/* ---- tokens ---- */
:root {
  /* brand: the icon's gradient #14B8A6 → #0E8F86; -700 and darker carry white text at WCAG AA */
  --teal-50: #EEFBF8; --teal-100: #D4F5EE; --teal-200: #ABE9DD; --teal-300: #74D7C6; --teal-400: #3EBFAC;
  --teal-500: #14B8A6; --teal-600: #0E8F86; --teal-700: #0B7C74; --teal-800: #0A6660; --teal-900: #0B4F4B; --teal-950: #072F2D;
  --brand-grad: linear-gradient(135deg, #14B8A6 0%, #0E8F86 100%);
  --btn-grad: linear-gradient(135deg, #0C847C 0%, #0A6E68 100%);
  --btn-grad-hover: linear-gradient(135deg, #0A766F 0%, #095C57 100%);

  --ink: #0F172A; --ink-2: #334155; --ink-3: #5B6B80; --ink-4: #94A3B8;
  --line: #E6EAF0; --line-2: #D7DEE8;
  --bg: #FFFFFF; --bg-soft: #F6F9FB; --bg-mint: #F2FAF8;
  --wa: #15803D; --wa-hover: #116C33;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px; --r-full: 999px;
  --sh-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
  --sh-md: 0 8px 20px -8px rgba(15, 23, 42, .12), 0 2px 6px -2px rgba(15, 23, 42, .05);
  --sh-lg: 0 24px 48px -18px rgba(15, 23, 42, .20), 0 8px 16px -8px rgba(15, 23, 42, .07);
  --sh-teal: 0 10px 24px -10px rgba(14, 143, 134, .6);
  --sh-wa: 0 10px 24px -10px rgba(21, 128, 61, .55);

  --font: 'Inter', 'Noto Kufi Arabic', 'Segoe UI', Tahoma, system-ui, -apple-system, sans-serif;
  --container: 1200px;
  --gutter: 20px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (max-width: 400px) { :root { --gutter: 16px; } }

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:lang(ar) body, body:lang(ar) { line-height: 1.8; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 750; line-height: 1.2; text-wrap: balance; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { line-height: 1.5; font-weight: 700; }
p { margin: 0; }
p, li { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-700); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-900); }
bdi { unicode-bidi: isolate; }
/* solid teal-700 (5:1 on white; a focus ring needs 3:1) with a soft halo around it */
:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(14, 143, 134, .22); border-radius: 6px; }
::selection { background: var(--teal-100); color: var(--ink); }

.ic {
  width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* the page's <symbol>s: present for <use>, never drawn or laid out */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* arrows point the reading direction (the markup already picks left or right); nothing to mirror here */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; z-index: 100; inset-inline-start: 12px; top: -100px;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .7em 1.25em;
  border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-size: 1rem; font-weight: 650; line-height: 1.3; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn .ic { width: 1.25em; height: 1.25em; }
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } .btn:active { transform: none; } }
.btn-primary { color: #fff; background: var(--btn-grad); box-shadow: var(--sh-teal); }
.btn-primary:hover { color: #fff; background: var(--btn-grad-hover); }
.btn-outline { color: var(--ink); background: #fff; border-color: var(--line-2); box-shadow: var(--sh-sm); }
.btn-outline:hover { color: var(--teal-800); border-color: var(--teal-300); }
.btn-wa { color: #fff; background: var(--wa); box-shadow: var(--sh-wa); }
.btn-wa:hover { color: #fff; background: var(--wa-hover); }
.btn-white { color: var(--teal-800); background: #fff; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35); }
.btn-white:hover { color: var(--teal-900); background: #F0FDFA; }
.btn-ghost-light { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); }
.btn-ghost-light:hover { color: #fff; background: rgba(255, 255, 255, .16); border-color: #fff; }
.btn-sm { min-height: 40px; padding: .45em .95em; font-size: .9375rem; border-radius: 12px; }
.btn-lg { min-height: 56px; padding: .8em 1.5em; font-size: 1.0625rem; border-radius: 16px; }
.btn-block { display: flex; width: 100%; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  backdrop-filter: saturate(1.8) blur(14px);
  border-bottom: 1px solid rgba(215, 222, 232, .7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: #fff; } }
.header-inner { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--ink); text-decoration: none; font-weight: 750; font-size: 1.25rem; letter-spacing: -.01em;
}
.brand:hover { color: var(--ink); }
.brand img { width: 36px; height: 36px; }
.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.lang-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px;
  border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.lang-link:hover { background: var(--teal-50); color: var(--teal-800); }
.lang-link .ic { width: 18px; height: 18px; color: var(--teal-700); }
/* "العربية" on English pages: a system Arabic face, so that one word does not pull the 120 KB Arabic web font
   into a page that has no other Arabic text */
.lang-link[lang="ar"], .menu-lang[lang="ar"] { font-family: 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Sans Arabic', 'Noto Naskh Arabic', system-ui, sans-serif; }

/* ---- long text pages (privacy, terms) and short message pages (404) ---- */
.page { padding-block: clamp(40px, 6vw, 80px); }
.prose { max-width: 760px; margin-inline: auto; color: var(--ink-2); }
.prose h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin-bottom: .6em; letter-spacing: -.02em; }
:lang(ar) .prose h1 { letter-spacing: 0; }
.prose h2 { font-size: 1.375rem; margin-top: 2em; margin-bottom: .6em; }
.prose h3 { font-size: 1.125rem; margin-top: 1.6em; margin-bottom: .5em; }
.prose p, .prose ul, .prose ol, .prose table { margin-bottom: 1em; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: start; vertical-align: top; }
.prose th { background: var(--bg-soft); color: var(--ink); }
.prose code { font-size: .9em; padding: .1em .35em; border-radius: 6px; background: var(--bg-soft); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }

/* ---- footer ---- */
.site-footer {
  background: var(--bg-soft); border-top: 1px solid var(--line);
  padding-block: 56px 28px; font-size: .9375rem; color: var(--ink-3);
}
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
}
.site-footer a { color: var(--ink-3); text-decoration: none; }
.site-footer a:hover { color: var(--teal-700); }

@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
}
@media print {
  .site-header, .skip-link { position: static; backdrop-filter: none; }
}