/* ==========================================================================
   STANDALONE PAGES STYLESHEET (ABOUT, PRIVACY, TERMS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global Font Stacks & Smoothing
   -------------------------------------------------------------------------- */
:root {
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force Brand Serif Typography */
.font-serif-title,
.header-brand-title,
.footer-brand-title {
  font-family: var(--font-serif) !important;
}

marhaba-header,
marhaba-footer {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------------------
   2. Markdown Content Typography (#markdown-content)
   -------------------------------------------------------------------------- */
#markdown-content {
  width: 100%;
  color: #334155;
  line-height: 1.8;
  overflow-wrap: break-word;
}

html.dark #markdown-content {
  color: #cbd5e1;
}

#markdown-content h1 {
  font-family: var(--font-serif);
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
  font-weight: 700 !important;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  color: #0f172a !important;
}

html.dark #markdown-content h1 {
  color: #ffffff !important;
}

#markdown-content h2 {
  font-size: 1.375rem !important;
  line-height: 1.75rem !important;
  font-weight: 700 !important;
  margin-top: 2.25rem !important;
  margin-bottom: 1rem !important;
  color: #0284c7 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 0.5rem !important;
}

html.dark #markdown-content h2 {
  color: #38bdf8 !important;
  border-bottom-color: #1e293b !important;
}

#markdown-content h3 {
  font-size: 1.125rem !important;
  line-height: 1.5rem !important;
  font-weight: 700 !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.75rem !important;
  color: #0f172a !important;
}

html.dark #markdown-content h3 {
  color: #f1f5f9 !important;
}

#markdown-content p {
  font-size: 0.9375rem !important;
  line-height: 1.8 !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  color: #334155 !important;
}

html.dark #markdown-content p {
  color: #cbd5e1 !important;
}

#markdown-content ul {
  list-style-type: disc !important;
  padding-left: 1.75rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1.5rem !important;
}

#markdown-content ol {
  list-style-type: decimal !important;
  padding-left: 1.75rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1.5rem !important;
}

#markdown-content li {
  margin-bottom: 0.625rem !important;
  line-height: 1.7 !important;
}

/* --------------------------------------------------------------------------
   3. Floating Scroll Button
   -------------------------------------------------------------------------- */
.mtt-standalone-scroll-btn {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 9999px !important;
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
  z-index: 90 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: opacity 0.25s ease, transform 0.2s ease, background-color 0.2s ease !important;
}

html.dark .mtt-standalone-scroll-btn {
  background-color: #1e293b !important;
  color: #38bdf8 !important;
}

.mtt-standalone-scroll-btn:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}