/**
 * Haseef Reader Legal Documentation Stylesheet
 *
 * Provides visual tokens, typography hierarchies, reading progress indicators,
 * custom scrollbars, section anchor tooling, and print stylesheets.
 */

:root {
  --haseef-navy: #131E36;
  --haseef-navy-light: #1B2A4A;
  --haseef-sand: #FAD796;
  --haseef-sand-dark: #E0BC75;
  --haseef-petroleum: #184B61;
  --haseef-teal: #005B52;
  --haseef-surface-dark: #0D1424;
  --haseef-card-dark: #15213B;
  --haseef-border-dark: #22345B;

  font-family: 'Noto Sans Arabic', 'Inter', system-ui, -apple-system, sans-serif;
}

html[lang="en"] {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Reading Progress Indicator */
#reading-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--haseef-petroleum), var(--haseef-sand));
  z-index: 50;
  transition: width 0.1s ease-out;
}

.dark #reading-progress {
  background: linear-gradient(90deg, var(--haseef-sand), var(--haseef-sand-dark));
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: rgba(19, 30, 54, 0.05);
}

.dark ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(19, 30, 54, 0.25);
  border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(250, 215, 150, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(19, 30, 54, 0.45);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(250, 215, 150, 0.5);
}

/* Section Heading Anchor Link Tools */
.heading-anchor {
  opacity: 0;
  margin-inline-start: 0.5rem;
  font-size: 0.85em;
  color: var(--haseef-petroleum);
  text-decoration: none;
  transition: opacity 0.15s ease-in-out;
  cursor: pointer;
}

.dark .heading-anchor {
  color: var(--haseef-sand);
}

h2:hover .heading-anchor,
h3:hover .heading-anchor {
  opacity: 1;
}

/* Toast Notification for Clipboard Copy */
#copy-toast {
  position: fixed;
  bottom: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 60;
  transform: translateY(150%);
  opacity: 0;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  pointer-events: none;
}

#copy-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Floating Back-to-Top Button */
#back-to-top {
  position: fixed;
  bottom: 1.5rem;
  inset-inline-start: 1.5rem;
  z-index: 40;
  transform: scale(0.8);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

#back-to-top.visible {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Status Indicator Dot Pulse */
.pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  margin-inline-end: 6px;
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Table of Contents Active Item */
.toc-link.active {
  color: var(--haseef-petroleum);
  font-weight: 700;
  border-inline-start: 2px solid var(--haseef-petroleum);
  background-color: rgba(24, 75, 97, 0.06);
}

.dark .toc-link.active {
  color: var(--haseef-sand);
  border-inline-start: 2px solid var(--haseef-sand);
  background-color: rgba(250, 215, 150, 0.08);
}

/* Standalone Prose & Semantic Content Styling */
.legal-prose h1 {
  font-size: 2rem;
  line-height: 1.35;
  margin-bottom: 1.25rem;
  font-weight: 800;
  color: var(--haseef-navy);
}

.dark .legal-prose h1 {
  color: var(--haseef-sand);
}

.legal-prose h2 {
  font-size: 1.375rem;
  line-height: 1.4;
  margin-top: 2.25rem;
  margin-bottom: 0.85rem;
  font-weight: 700;
  color: var(--haseef-navy);
  scroll-margin-top: 5rem;
}

.dark .legal-prose h2 {
  color: var(--haseef-sand);
}

.legal-prose h3 {
  font-size: 1.15rem;
  line-height: 1.45;
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
  color: var(--haseef-navy);
  scroll-margin-top: 5rem;
}

.dark .legal-prose h3 {
  color: #f8fafc;
}

.legal-prose p {
  font-size: 1.0625rem;
  line-height: 1.85;
  margin-bottom: 1.15rem;
  color: #334155;
}

.dark .legal-prose p {
  color: #f1f5f9;
}

.legal-prose ul,
.legal-prose ol {
  margin-bottom: 1.25rem;
  padding-inline-start: 1.5rem;
}

.legal-prose li {
  font-size: 1.0625rem;
  margin-bottom: 0.6rem;
  line-height: 1.8;
  color: #334155;
}

.dark .legal-prose li {
  color: #f1f5f9;
}

.legal-prose strong,
.legal-prose b {
  font-weight: 700;
  color: var(--haseef-navy);
}

.dark .legal-prose strong,
.dark .legal-prose b {
  color: #ffffff;
}

.legal-prose code {
  font-size: 0.9em;
  padding: 0.2em 0.4em;
  border-radius: 0.375rem;
  background: rgba(19, 30, 54, 0.06);
  color: var(--haseef-petroleum);
}

.dark .legal-prose code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--haseef-sand);
}

.legal-prose blockquote {
  border-inline-start: 4px solid var(--haseef-sand);
  background: rgba(250, 215, 150, 0.14);
  padding: 0.85rem 1.15rem;
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 1.35rem 0;
  font-style: normal;
  font-size: 1.025rem;
  line-height: 1.8;
  color: #334155;
}

.dark .legal-prose blockquote {
  background: rgba(250, 215, 150, 0.08);
  color: #f8fafc;
}

/* No-Script Static Alert Banner */
.noscript-banner {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}

.dark .noscript-banner {
  background: #451a03;
  border-color: #78350f;
  color: #fde68a;
}

/* Print Stylesheet Directives */
@media print {
  header,
  footer,
  #reading-progress,
  #theme-toggle,
  #sidebar-toc,
  #back-to-top,
  #copy-toast,
  .no-print {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
  }

  main {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .legal-prose h2,
  .legal-prose h3 {
    page-break-after: avoid;
  }

  .heading-anchor {
    display: none !important;
  }
}