/* =========================================================================
   privacy-policy.css
   Companion stylesheet for the /En/Privacy/, /Fr/Privacy/ and /Ar/Privacy/
   pages. It does NOT redefine or override anything in style-website.css —
   it is loaded after it and reuses the same CSS custom properties
   (colors, fonts, spacing, easing) that already exist in :root there.
   This file only adds the extra rules needed for the policy content
   itself. Arabic typography needs nothing here: style-website.css swaps
   the font tokens to Tajawal on <html lang="ar">, and RTL is handled by
   the logical properties (inset-inline-*, padding-inline-*) used below.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Page intro / banner
   Sits inside the same gradient <header> background used on the homepage,
   right below the reused navbar.
   ------------------------------------------------------------------------- */
.policy-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-md) var(--space-lg) var(--space-xxl);
}

.policy-eyebrow {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-accent-text);
  margin-bottom: var(--space-sm);
}

.policy-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h1);
  color: var(--clr-text-dark);
  max-width: 700px;
  margin-bottom: var(--space-sm);
}

.policy-updated {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-p);
  color: var(--clr-text-body);
  max-width: 550px;
}

.policy-updated strong {
  color: var(--clr-primary);
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   Body content
   ------------------------------------------------------------------------- */
.policy-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-md) var(--space-xxl);
}

.policy-container {
  width: 100%;
  max-width: 820px;
  background: var(--clr-white);
  border: 1px solid var(--clr-black-10);
  box-shadow: 0 4px 30px var(--clr-black-10);
  border-radius: 24px;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
  margin-top: 15dvh;
}

.policy-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-p-lg);
  line-height: 1.7;
  color: var(--clr-text-body);
}

.policy-intro strong {
  font-weight: 500;

}

/* Page title, sitting directly above .policy-intro. Reuses the exact
   same typography/color tokens as .policy-section h2 for visual
   consistency, with a tighter negative margin so it reads as this
   paragraph's title rather than being pushed away by .policy-container's
   larger inter-block gap (used elsewhere to separate the TOC, sections,
   and contact block from one another). */
.policy-main-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h2-alt);
  color: var(--clr-primary);
  margin-bottom: calc(var(--space-sm) - var(--space-xxl));
}

/* Quick-jump table of contents */
.policy-toc {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--clr-primary-light-05);
  border: 1px solid var(--clr-primary-light-20);
  border-radius: 16px;
  padding: var(--space-lg);
}

.policy-toc h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: var(--clr-text-heading);
  margin-bottom: var(--space-xs);
}

.policy-toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: policy-toc-counter;
}

.policy-toc li {
  counter-increment: policy-toc-counter;
  font-family: var(--font-primary);
  font-size: 0.9rem;
}

.policy-toc a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--clr-text-body);
  transition: color var(--duration-medium) var(--ease-standard);
}

.policy-toc a::before {
  content: counter(policy-toc-counter) ".";
  color: var(--clr-accent);
  font-weight: 500;
  flex: none;
}

.policy-toc a:hover {
  color: var(--clr-primary);
}

/* Sections */
.policy-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  scroll-margin-top: 6rem;
}

.policy-section h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h2-alt);
  color: var(--clr-primary);
}

.policy-section h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-text-heading);
}

.policy-section p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-p);
  line-height: 1.75;
  color: var(--clr-text-body);
}

.policy-section ul, .policy-contact ul{
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.25rem 0;
}

.policy-section li, .policy-contact li {
  position: relative;
  font-family: var(--font-primary);
  font-size: var(--fs-p);
  line-height: 1.6;
  color: var(--clr-text-body);
  padding-inline-start: 1.1rem;
}

.policy-section li::before, .policy-contact li::before {
  content: "•";
  position: absolute;
  inset-inline-start: 0;
  color: var(--clr-accent);
  font-weight: 700;
}

.policy-section .custom-list li::before {
  color: var(--clr-text-heading);
  font-size: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.policy-section .custom-list li:nth-child(2):before {
  display: none;
}

.policy-section a.inline-link {
  color: var(--clr-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.policy-section strong, .policy-contact strong{
  font-weight: 500;
}

.policy-divider {
  height: 0;
  border-top: 0.25px solid #738999;
  opacity: 0.5;
}

.policy-contact {
  background: var(--clr-accent-05);
  border-radius: 16px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.policy-contact h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h2-alt);
  color: var(--clr-primary);
}

.policy-contact p,
.policy-contact a {
  font-family: var(--font-primary);
  font-size: var(--fs-p);
  color: var(--clr-text-body);
}

.policy-contact a {
  color: var(--clr-accent-text);
  font-weight: 500;
}

/* Back-to-home link, reused across all three languages */
.policy-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-primary);
  margin-bottom: var(--space-md);
  transition: color var(--duration-medium) var(--ease-standard);
}

.policy-back:hover {
  color: var(--clr-primary-dark);
}

.policy-back svg {
  width: 16px;
  height: 16px;
}

html[dir="rtl"] .policy-back svg {
  transform: scaleX(-1);
}

/* Note: the language switcher itself (desktop dropdown + mobile menu row)
   now lives in the shared assets/css/lang-switcher.css, loaded by this
   page alongside this stylesheet, so the exact same component is used
   here and on the main site. */

/* -------------------------------------------------------------------------
   Desktop
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .policy-hero {
    padding: var(--space-xxl) var(--space-lg) 4rem;
  }

  .policy-title {
    font-family: var(--font-primary);
    font-weight: 900;
  }

  .policy-container {
    padding: 3.5rem 4rem;
    border-radius: 32px;
  }

  .policy-intro {
    font-size: 1.05rem;
  }

  .policy-section h2 {
    font-size: 1.5rem;
  }

  .policy-main-heading {
    font-size: 1.5rem;
  }
}