/* ================================================================
   Yasser Alrajeh Portfolio — Unified Project Design System
   Change this file once to update all project pages consistently.
   ================================================================ */

:root {
  --project-azure: #0078d4;
  --project-azure-dark: #005a9e;
  --project-azure-soft: #eaf5ff;
  --project-page-bg: #f5f7fa;
  --project-surface: #ffffff;
  --project-text: #242424;
  --project-muted: #5f6b7a;
  --project-border: #dfe5ec;
  --project-code-bg: #f7f9fc;
  --project-code-text: #17324d;
  --project-radius: 10px;
  --project-content-width: 1040px;
  --project-image-width: 820px;
  --project-wide-image-width: 980px;
  --project-reading-size: 17px;
  --project-reading-line: 1.72;
  --project-section-gap: 42px;
}

body.project-page {
  margin: 0 !important;
  color: var(--project-text) !important;
  background: var(--project-page-bg) !important;
  font-family: "Segoe UI", SegoeUI, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  line-height: var(--project-reading-line) !important;
  color-scheme: light !important;
}

body.project-page header {
  position: relative !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--project-border) !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .035) !important;
}

body.project-page header nav {
  width: min(92%, 1120px) !important;
  min-height: 68px !important;
  margin-inline: auto !important;
}

body.project-page header a,
body.project-page .back-link {
  color: #4d5966 !important;
  text-decoration: none !important;
}
body.project-page header a:hover,
body.project-page .back-link:hover { color: var(--project-azure) !important; }

body.project-page main.doc {
  padding: 44px 0 72px !important;
  background: var(--project-page-bg) !important;
}

body.project-page main.doc > .container,
body.project-page main.doc .container {
  width: min(92%, var(--project-content-width)) !important;
  max-width: var(--project-content-width) !important;
  margin-inline: auto !important;
}

body.project-page .doc,
body.project-page .doc p,
body.project-page .doc li,
body.project-page .doc td,
body.project-page .doc th {
  font-family: "Segoe UI", SegoeUI, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-size: var(--project-reading-size) !important;
  line-height: var(--project-reading-line) !important;
}

body.project-page .doc p {
  margin: 0 0 18px !important;
  color: var(--project-text) !important;
}
body.project-page .doc ul,
body.project-page .doc ol {
  margin: 0 0 24px !important;
  padding-left: 28px !important;
}
body.project-page .doc li { margin: 7px 0 !important; color: var(--project-text) !important; }
body.project-page .doc strong { color: #111827 !important; }
body.project-page .doc a { color: var(--project-azure) !important; text-underline-offset: 3px !important; }

body.project-page .doc h1,
body.project-page .doc h2,
body.project-page .doc h3,
body.project-page .doc h4 {
  color: var(--project-azure-dark) !important;
  font-family: "Segoe UI", SegoeUI, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-weight: 650 !important;
  letter-spacing: -.018em !important;
  line-height: 1.25 !important;
}
body.project-page .doc h1 { margin: var(--project-section-gap) 0 16px !important; font-size: clamp(1.75rem, 3vw, 2.2rem) !important; }
body.project-page .doc h2 { margin: 34px 0 14px !important; font-size: clamp(1.45rem, 2.5vw, 1.8rem) !important; }
body.project-page .doc h3 { margin: 28px 0 11px !important; font-size: 1.28rem !important; }
body.project-page .doc h4 { margin: 24px 0 9px !important; font-size: 1.1rem !important; }

/* Consistent opening block */
body.project-page .project-hero {
  width: 100% !important;
  max-width: var(--project-content-width) !important;
  margin: 0 auto 44px !important;
  padding: 0 !important;
  text-align: left !important;
  background: transparent !important;
}
body.project-page .project-main-title,
body.project-page .project-hero > h1:first-child {
  margin: 0 0 22px !important;
  color: #1f2937 !important;
  font-size: clamp(2.15rem, 4.8vw, 3.25rem) !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
}
body.project-page .project-subtitle {
  margin: -8px 0 25px !important;
  color: var(--project-muted) !important;
  font-size: 1rem !important;
}
body.project-page .project-cover-wrap {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto 28px !important;
}
body.project-page .project-cover-image,
body.project-page .project-hero > img:not(.doc-img) {
  display: block !important;
  width: auto !important;
  max-width: min(100%, 760px) !important;
  max-height: 430px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  border: 1px solid var(--project-border) !important;
  border-radius: var(--project-radius) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(31, 41, 55, .08) !important;
}

/* Summary / information tables */
body.project-page .doc table,
body.project-page .project-summary-table {
  width: 100% !important;
  margin: 24px 0 30px !important;
  border: 1px solid var(--project-border) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--project-radius) !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(31, 41, 55, .035) !important;
}
body.project-page .doc th,
body.project-page .doc td,
body.project-page .project-summary-table th,
body.project-page .project-summary-table td {
  padding: 13px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--project-border) !important;
  text-align: left !important;
  vertical-align: top !important;
  background: #fff !important;
  color: var(--project-text) !important;
}
body.project-page .doc th,
body.project-page .project-summary-table th {
  width: 30% !important;
  color: #174a72 !important;
  font-weight: 650 !important;
  background: var(--project-azure-soft) !important;
}
body.project-page .doc tr:last-child th,
body.project-page .doc tr:last-child td { border-bottom: 0 !important; }

/* Images: balanced size, never stretched, architecture may be wider */
body.project-page .doc img.doc-img,
body.project-page .doc p > img.doc-img,
body.project-page .doc figure img:not(.project-cover-image),
body.project-page .doc .architecture-wrap img,
body.project-page .doc img.architecture-img {
  display: block !important;
  width: auto !important;
  max-width: min(100%, var(--project-image-width)) !important;
  height: auto !important;
  max-height: 680px !important;
  margin: 24px auto 12px !important;
  object-fit: contain !important;
  border: 1px solid var(--project-border) !important;
  border-radius: var(--project-radius) !important;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(31, 41, 55, .08) !important;
  cursor: zoom-in;
}
body.project-page .doc img.doc-img.is-wide,
body.project-page .doc figure.architecture-figure img,
body.project-page .doc .architecture-wrap img,
body.project-page .doc img.architecture-img {
  max-width: min(100%, var(--project-wide-image-width)) !important;
  max-height: 760px !important;
}
body.project-page .doc img.doc-img.is-portrait {
  max-width: min(100%, 650px) !important;
  max-height: 760px !important;
}
body.project-page .doc p:has(> img.doc-img) { margin: 28px 0 32px !important; text-align: center !important; }
body.project-page .doc figure { margin: 28px 0 34px !important; }
body.project-page .doc figcaption,
body.project-page .doc .architecture-caption {
  display: block !important;
  margin-top: 9px !important;
  color: var(--project-muted) !important;
  text-align: center !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
}

/* Code / commands */
body.project-page .doc pre,
body.project-page .doc pre.command-block,
body.project-page .doc .code-block {
  display: block !important;
  margin: 20px 0 26px !important;
  padding: 17px 19px !important;
  overflow-x: auto !important;
  border: 1px solid #cfd8e3 !important;
  border-left: 4px solid var(--project-azure) !important;
  border-radius: 8px !important;
  background: var(--project-code-bg) !important;
  color: var(--project-code-text) !important;
  box-shadow: none !important;
  white-space: pre !important;
  text-align: left !important;
}
body.project-page .doc pre code,
body.project-page .doc pre.command-block code {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--project-code-text) !important;
  font-family: Consolas, "Cascadia Code", "SFMono-Regular", monospace !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}
body.project-page .doc code:not(pre code) {
  padding: 2px 6px !important;
  border: 1px solid #d9e1ea !important;
  border-radius: 5px !important;
  background: #f3f6f9 !important;
  color: #174a72 !important;
}

/* Architecture tree */
body.project-page .doc .architecture-tree {
  margin: 22px 0 28px !important;
  padding: 20px 22px !important;
  overflow-x: auto !important;
  border: 1px solid #cfe3f6 !important;
  border-radius: var(--project-radius) !important;
  background: #f6fbff !important;
}
body.project-page .doc .architecture-tree .tree-label {
  background: #eaf5ff !important;
  border-color: #c7e2f7 !important;
  color: #174a72 !important;
}

/* Bottom navigation buttons */
body.project-page .btn,
body.project-page .button,
body.project-page .project-actions a,
body.project-page .project-nav-footer a {
  border-radius: 7px !important;
}
body.project-page .btn-primary,
body.project-page .button.primary {
  background: var(--project-azure) !important;
  border-color: var(--project-azure) !important;
  color: #fff !important;
}
body.project-page .btn-secondary,
body.project-page .button.secondary {
  background: #fff !important;
  border-color: #b9c5d1 !important;
  color: var(--project-azure-dark) !important;
}

@media (max-width: 700px) {
  :root { --project-reading-size: 16px; --project-section-gap: 34px; }
  body.project-page main.doc { padding: 30px 0 56px !important; }
  body.project-page main.doc > .container,
  body.project-page main.doc .container { width: min(92%, var(--project-content-width)) !important; }
  body.project-page .project-main-title,
  body.project-page .project-hero > h1:first-child { font-size: 2rem !important; }
  body.project-page .doc img.doc-img,
  body.project-page .doc img.doc-img.is-wide,
  body.project-page .doc img.doc-img.is-portrait,
  body.project-page .doc figure img,
  body.project-page .doc .architecture-wrap img,
  body.project-page .doc img.architecture-img {
    max-width: 100% !important;
    max-height: none !important;
  }
  body.project-page .doc table { display: block !important; overflow-x: auto !important; }
  body.project-page .project-summary-table th,
  body.project-page .project-summary-table td { display: table-cell !important; width: auto !important; }
}

/* ================================================================
   Azure Dark Reading Theme — project pages only
   ================================================================ */
:root {
  --project-page-bg: #081827;
  --project-surface: #0f2740;
  --project-surface-2: #12314f;
  --project-text: #f3f7fb;
  --project-muted: #b8c8d8;
  --project-border: #28445f;
  --project-code-bg: #0b2137;
  --project-code-text: #e8f3ff;
  --project-azure-soft: #153b5d;
}

body.project-page {
  background: var(--project-page-bg) !important;
  color: var(--project-text) !important;
  color-scheme: dark !important;
}
body.project-page header {
  background: #071522 !important;
  border-bottom-color: var(--project-border) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.24) !important;
}
body.project-page header a,
body.project-page .back-link { color: #d6e6f5 !important; }
body.project-page header a:hover,
body.project-page .back-link:hover { color: #71c5ff !important; }
body.project-page main.doc { background: var(--project-page-bg) !important; }

body.project-page .doc p,
body.project-page .doc li,
body.project-page .doc td,
body.project-page .doc th { color: var(--project-text) !important; }
body.project-page .doc strong { color: #ffffff !important; }
body.project-page .doc a { color: #79caff !important; }
body.project-page .doc h1,
body.project-page .doc h2,
body.project-page .doc h3,
body.project-page .doc h4 { color: #78c8ff !important; }
body.project-page .project-main-title,
body.project-page .project-hero > h1:first-child { color: #ffffff !important; }
body.project-page .project-subtitle { color: var(--project-muted) !important; }

body.project-page .doc table,
body.project-page .project-summary-table {
  background: var(--project-surface) !important;
  border-color: var(--project-border) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.16) !important;
}
body.project-page .doc th,
body.project-page .doc td,
body.project-page .project-summary-table th,
body.project-page .project-summary-table td {
  background: var(--project-surface) !important;
  border-bottom-color: var(--project-border) !important;
  color: var(--project-text) !important;
}
body.project-page .doc th,
body.project-page .project-summary-table th {
  background: var(--project-surface-2) !important;
  color: #8fd1ff !important;
}

body.project-page .doc pre,
body.project-page .doc pre.command-block,
body.project-page .doc .code-block {
  border-color: #31506d !important;
  border-left-color: #38a8f5 !important;
  background: var(--project-code-bg) !important;
  color: var(--project-code-text) !important;
}
body.project-page .doc pre code,
body.project-page .doc pre.command-block code { color: var(--project-code-text) !important; }
body.project-page .doc code:not(pre code) {
  border-color: #31506d !important;
  background: #102b46 !important;
  color: #a9dcff !important;
}
body.project-page .doc .architecture-tree {
  border-color: #31506d !important;
  background: #0d2439 !important;
}
body.project-page .doc .architecture-tree .tree-label {
  background: #153b5d !important;
  border-color: #31506d !important;
  color: #b8e2ff !important;
}
body.project-page .btn-secondary,
body.project-page .button.secondary {
  background: #102b46 !important;
  border-color: #3d5d79 !important;
  color: #dff1ff !important;
}

/* Keep screenshots/architecture diagrams visually faithful. */
body.project-page .project-cover-image,
body.project-page .project-hero > img:not(.doc-img),
body.project-page .doc img.doc-img,
body.project-page .doc figure img:not(.project-cover-image),
body.project-page .doc .architecture-wrap img,
body.project-page .doc img.architecture-img {
  background: #ffffff !important;
  border-color: #38546d !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
}

/* Lightbox: hidden until a screenshot is clicked. Prevents the empty
   lightbox image/alt text ("Project screenshot") appearing at page end. */
body.project-page .lightbox {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  background: rgba(3, 12, 22, .92) !important;
}
body.project-page .lightbox.open { display: flex !important; }
body.project-page .lightbox > img,
body.project-page #lightboxImage {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(94vw, 1500px) !important;
  max-height: 90vh !important;
  object-fit: contain !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.45) !important;
}
body.project-page .lightbox-close {
  position: fixed !important;
  top: 18px !important;
  right: 22px !important;
  z-index: 100000 !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 8px !important;
  background: rgba(9,30,49,.92) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  cursor: pointer !important;
}


/* === Unified v2: scrollbar + final project actions === */
/* Subtle Azure scrollbar: intentionally low contrast. */
html {
  scrollbar-width: thin;
  scrollbar-color: #2f86c7 #071522;
}
html::-webkit-scrollbar { width: 9px; height: 9px; }
html::-webkit-scrollbar-track { background: #071522; }
html::-webkit-scrollbar-thumb {
  background: #2f86c7;
  border: 2px solid #071522;
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover { background: #49a8e8; }

/* One canonical ending for every project page. */
body.project-page .project-end-actions,
body.project-page .project-bottom-nav,
body.project-page .project-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 48px auto 12px !important;
  padding: 0 !important;
  text-align: center !important;
}
body.project-page .project-end-actions a,
body.project-page .project-bottom-nav a,
body.project-page .project-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 10px 20px !important;
  border: 1px solid #3d6788 !important;
  border-radius: 9px !important;
  background: #102b46 !important;
  color: #e8f5ff !important;
  font-size: 15.5px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease !important;
}
body.project-page .project-end-actions a:first-child,
body.project-page .project-bottom-nav a:first-child,
body.project-page .project-actions a:first-child {
  border-color: #168ad8 !important;
  background: #0878c9 !important;
  color: #ffffff !important;
}
body.project-page .project-end-actions a:hover,
body.project-page .project-bottom-nav a:hover,
body.project-page .project-actions a:hover {
  transform: translateY(-1px) !important;
  border-color: #66c2ff !important;
  background: #174361 !important;
}
body.project-page .project-end-actions a:first-child:hover,
body.project-page .project-bottom-nav a:first-child:hover,
body.project-page .project-actions a:first-child:hover {
  background: #1294e8 !important;
}

/* Legacy one-button wrappers are hidden after the canonical pair is injected. */
body.project-page .cta.project-nav-legacy { display: none !important; }

@media (max-width: 520px) {
  body.project-page .project-end-actions,
  body.project-page .project-bottom-nav,
  body.project-page .project-actions { gap: 10px !important; }
  body.project-page .project-end-actions a,
  body.project-page .project-bottom-nav a,
  body.project-page .project-actions a {
    width: 100% !important;
    max-width: 300px !important;
  }
}