/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import url("https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap");
@import "actiontext";

:root {
  --ink: #0f172a;
  --muted: #475569;
  --brand: #0f766e;
  --brand-strong: #115e59;
  --accent: #d97706;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
}

body {
  font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", serif;
  color: var(--ink);
}

body.site-body {
  color: var(--ink);
  background-color: var(--surface-soft);
  background-image:
    radial-gradient(900px circle at 90% -10%, rgba(15, 118, 110, 0.12), transparent 60%),
    radial-gradient(700px circle at 10% 0%, rgba(217, 119, 6, 0.08), transparent 60%);
  min-height: 100vh;
}

.site-title {
  font-family: "Aref Ruqaa", "IBM Plex Sans Arabic", serif;
  letter-spacing: 0.02em;
}

.site-nav {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(148, 163, 184, 0.35);
  backdrop-filter: blur(8px);
}

.nav-link {
  color: var(--ink);
}

.nav-link:hover {
  color: var(--brand);
}

.text-link {
  color: var(--brand);
}

.text-link:hover {
  color: var(--brand-strong);
}

.admin-body {
  background-color: #f1f5f9;
  background-image:
    radial-gradient(600px circle at 15% -20%, rgba(15, 118, 110, 0.08), transparent 55%),
    radial-gradient(520px circle at 85% 0%, rgba(217, 119, 6, 0.06), transparent 55%);
}

.admin-nav {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(148, 163, 184, 0.45);
  backdrop-filter: blur(10px);
}

.admin-title {
  font-family: "Aref Ruqaa", "IBM Plex Sans Arabic", serif;
  letter-spacing: 0.01em;
}

trix-toolbar .trix-button--icon-attach {
  display: none;
}

@keyframes rise-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-fade {
  animation: rise-fade 0.6s ease both;
}

.stagger > * {
  animation: rise-fade 0.6s ease both;
}

.stagger > *:nth-child(1) { animation-delay: 0.02s; }
.stagger > *:nth-child(2) { animation-delay: 0.05s; }
.stagger > *:nth-child(3) { animation-delay: 0.08s; }
.stagger > *:nth-child(4) { animation-delay: 0.11s; }
.stagger > *:nth-child(5) { animation-delay: 0.14s; }
.stagger > *:nth-child(6) { animation-delay: 0.17s; }

@media print {
  body.site-body {
    background: #ffffff;
    background-image: none;
  }

  .site-nav,
  footer,
  .print-hidden {
    display: none !important;
  }

  .prose,
  .prose * {
    color: #0f172a !important;
  }
}