/* ============================================================
   DARK THEME OVERRIDE
   Palette based on mostafa-taher-ahmed.dev source:
   background #050505 / panels #0d0d0d / text #fafafa
   accent #8B0000 / gold #D4AF37
   Loaded after app.css on the portfolio entry.
   ============================================================ */

html { background: #050505; }

body {
  background: #050505 !important;
  color: #fafafa;
}

::selection { background: #8B0000; color: #fafafa; }

a { color: #fafafa; }
a:hover { color: #fafafa; }

button { color: #fafafa; }

/* ---- map links ---- */
.link { stroke: #3a3a3a; }
.link.connected-link { stroke: #555; }

/* ---- node labels / nodes ---- */
.node-label h2 { background: #050505; color: #fafafa; }
.node-label h3 { background: #050505; color: #8a8a8a; }
.node.connected-node .number { color: #8a8a8a; }
.node.connected-node .node-label { color: #8a8a8a; }

/* ---- hide node numbers ---- */
.node .number { display: none !important; }

.node.information-node .node-inner { border: 1px solid #fafafa; background: #fafafa; }
.current-node.information-node .node-inner { background: #fafafa; }
.node.information-node:not(.current-node) .node-inner:after { background: #050505; }
.node.information-node.current-node .node-inner:after { color: #050505; }

.node.highlighted-node:not(.current-node) .node-inner:after { background: #fafafa; }
.node.highlighted-node.connected-node:not(.current-node) .node-inner:after { background: #8a8a8a; }

.node.visited:not(.current-node) h2 { text-decoration-color: #fafafa; }
.node.visited:not(.current-node) h3,
.node.connected-node.visited:not(.current-node) h2 { text-decoration-color: #8a8a8a; }

/* ---- date slider ---- */
.date-slider::-webkit-slider-thumb { background: #D4AF37; }
.slider-mark { background: #fafafa; }
.slider-mark:after { border: 1px solid #050505; }
.mark-active { background: #D4AF37; }
.slider-mark-background { background: #fafafa; }
.slider-mark-background:after { border: 1px solid #050505; }
.mark-date { background: #0d0d0d; color: #fafafa; }

.map-play-button:after { border-left-color: #fafafa; }
.map-playing .map-play-button:after { background: #fafafa; }

/* ---- page / panels ---- */
.page-container:after {
  display: none;
}
.main-content { background-color: #0d0d0d; }
.header-content { background-color: #0d0d0d; }
.group { background-color: #0d0d0d; }

/* the panel card: same material language as the site header pill */
.main-content,
.header-content {
  border: 1px solid #3a3a3a;
  border-radius: 14px;
  
}

.page-main-title h3,
.page-main-title h4 { color: #8a8a8a; }
.page-main-title .email a,
.page-main-title .telephone a { color: #8a8a8a; }
.email:before,
.telephone:before { color: #8a8a8a; }

.tab-titles,
.page-titles-type { border-bottom: 1px dashed #3a3a3a; }
.tab-open .tab-content { border-top: 1px dashed #3a3a3a; }

/* ---- tab indicators: authored chevrons (replaces the engine's text glyphs) ---- */
.tab-icon { flex: none; }

/* the panel's "Index" bar is an engine leftover: it only appeared when a page
   was open and read as a home element. The engine page already has its own
   title bar (back + close), and the site header house closes pages too.
   Keep the element in the DOM (the engine measures it), just never show it. */
.page-open .header-content {
  display: none;
}

/* the home icon: real house glyph, centered at the icon system's size */
.icon-home,
.header-content .icon-home {
  background-position: center;
  background-size: 12px 12px;
}

/* the home node is the synthetic "/" anchor ("Mostafa Taher Ahmed"): the engine
   paints it with a rotating orange flower, which reads as "selected" whenever
   the map collapses onto a child page (e.g. clicking Information). Replace it
   with the same quiet dark disc as the other anchor nodes. */
.node.home-node .node-inner::before {
  background: #0d0d0d;
  border: 1px solid #3a3a3a;
  border-radius: 50%;
  animation: none;
}

/* engine page chrome: back / close buttons */
.back-page,
.close-page {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-inline-start: 8px;
  border: 1px solid #3a3a3a;
  border-radius: 7px;
  background: transparent;
  color: #8a8a8a;
  cursor: pointer;
  transition: border-color 200ms, background 200ms, color 200ms;
}

.back-page:hover,
.close-page:hover {
  border-color: #D4AF37;
  background: rgba(212, 175, 55, 0.07);
  color: #D4AF37;
}

.back-page::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: auto;
  border-left: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

[dir="rtl"] .back-page::after {
  border-left: 0;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.close-page::before,
.close-page::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  background: currentColor;
}

.close-page::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-page::after { transform: translate(-50%, -50%) rotate(-45deg); }

.tab-indicator,
.index-indicator {
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: 0;
  margin-inline-start: auto;
  color: #8a8a8a;
}

.tab-indicator:after,
.index-indicator:after {
  content: "";
  position: static;
  top: auto;
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 250ms ease-out, color 200ms ease-out;
}

/* silence every engine glyph state */
.tab-titles:hover .tab-indicator:after,
.tab-open .tab-indicator:after,
.tab-open .tab-titles:hover .tab-indicator:after { content: ""; }

/* a table-of-contents row: the whole row lights when reached for */
.tab-titles:hover {
  background: rgba(212, 175, 55, 0.05);
  margin-inline: -12px;
  padding-inline: 12px;
  border-radius: 6px;
  border-bottom-color: rgba(212, 175, 55, 0.4);
}

.tab-titles:hover .tab-indicator,
.tab-titles:hover .tab-title { color: #D4AF37; }

/* the open tab reads as a lit node: gold label, chevron turns up */
.tab-open .tab-indicator,
.tab-open .tab-title { color: #D4AF37; }
.tab-open .tab-indicator:after { transform: rotate(-135deg); }
.tab-open .tab-titles:hover .tab-indicator:after { transform: rotate(-135deg); }

/* the Index bar: a back chevron that flips with direction */
.index-indicator:after {
  border-right: 0;
  border-bottom: 0;
  border-left: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

[dir="rtl"] .index-indicator:after {
  border-left: 0;
  border-top: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.header-content:hover .index-indicator,
.header-content:hover .page-titles-type .tab-title { color: #D4AF37; }

li.year-group { color: #fafafa; }
.meta-title,
.link-address { color: #8a8a8a; }
.item-title h3 { color: #8a8a8a; }

.item-id.highlighted:after,
.index-link:hover .item-id:after { color: #fafafa; }

.index-link.visited h2 { text-decoration-color: #fafafa; }
.index-link.visited h3 { text-decoration-color: #8a8a8a; }

p a,
p a:hover,
p button span,
p button:hover span { text-decoration-color: #fafafa; }

.website-credit { color: #8a8a8a; border-top: 1px dashed #3a3a3a; }

.media-item a { background-color: rgba(5, 5, 5, 0.9); color: #fafafa; }
.media-item a:hover { background-color: #111; }

/* ---- accessibility ---- */
:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}

:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- site header: the floating anime pill (fixed, centered) ---- */
.site-header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.site-header-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  background: rgba(5, 5, 5, 0.55);
  border: 1px solid rgba(250, 250, 250, 0.14);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: header-enter 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes header-enter {
  from {
    opacity: 0;
    transform: translateY(-22px);
  }
}

/* one pill-shaped item: link, button, or the language wrapper */
.site-header-item {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: rgba(250, 250, 250, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms, background 200ms;
  -webkit-tap-highlight-color: transparent;
}

.site-header-item:hover,
.site-header-item:focus-visible {
  background: rgba(250, 250, 250, 0.08);
  color: #fafafa;
}

.site-header-item:active {
  transform: scale(0.94);
}

.site-header-item .item-label {
  white-space: nowrap;
}

/* the active item's breathing gold glow + the sweeping shine */
.item-glow {
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.16);
  box-shadow: 0 0 16px 2px rgba(212, 175, 55, 0.24),
    0 0 36px 8px rgba(212, 175, 55, 0.16),
    0 0 56px 16px rgba(212, 175, 55, 0.09);
  overflow: hidden;
  animation: glow-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

.item-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%,
    rgba(212, 175, 55, 0.32) 50%, transparent 70%);
  transform: translateX(-110%);
  animation: item-shine 3s ease-in-out infinite;
}

@keyframes item-shine {
  0% {
    transform: translateX(-110%);
  }
  55%, 100% {
    transform: translateX(110%);
  }
}

/* the language dropdown rides the same pill language */
.site-header-lang {
  position: relative;
}

.site-header-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  width: 100%;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.site-header-lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 150px;
  padding: 6px;
  background: rgba(13, 13, 13, 0.96);
  border: 1px solid rgba(250, 250, 250, 0.14);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-origin: top right;
}

[dir="rtl"] .site-header-lang-menu {
  transform-origin: top left;
}

.site-header-lang.open .site-header-lang-menu {
  display: block;
  animation: mta-lang-open 160ms ease-out;
}

@keyframes mta-lang-open {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.97);
  }
}

.site-header-lang-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #fafafa;
  font-size: 14px;
  text-align: start;
  cursor: pointer;
  transition: color 200ms, background 200ms;
}

.site-header-lang-menu button.current::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #D4AF37;
}

.site-header-lang-menu button:not(.current)::before {
  content: "";
  width: 5px;
  height: 5px;
}

.site-header-lang-menu button:hover,
.site-header-lang-menu button.current {
  background: rgba(212, 175, 55, 0.1);
  color: #D4AF37;
}

.site-header-lang-toggle.pulse {
  animation: mta-lang-pulse 600ms ease-out;
}

@keyframes mta-lang-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55);
  }
  100% {
    box-shadow: 0 0 0 11px rgba(212, 175, 55, 0);
  }
}

/* mobile: icon-only pill items */
@media (max-width: 768px) {
  .site-header {
    top: 10px;
  }

  .site-header-nav {
    padding: 5px;
    gap: 2px;
  }

  .site-header-item {
    width: 40px;
    padding: 0;
    gap: 0;
  }

  .site-header-lang-toggle {
    padding: 0;
    gap: 0;
  }

  .item-label {
    display: none;
  }
}

/* keep the engine panel clear of the fixed header on narrower screens */
@media (min-width: 769px) and (max-width: 1200px) {
  .page-container {
    padding-top: 72px;
  }
}


/* keep the standalone page content clear of the fixed header */
body.sections-standalone {
  padding-top: 80px;
}

/* ---- base typography: the brand font everywhere, not just headings ---- */
body,
button,
input,
textarea,
select,
.site-header,
.site-header-nav,
.site-header-about,
.site-header-lang-menu button {
  font-family: "Brunswick Grotesque", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---- readable floor for the engine's 11px microtext ---- */
.tab-title,
.node-label h3,
.node .number,
.mark-date,
.website-credit,
.page-main-title h4,
.tab-description,
li.year-group,
.item-id,
.meta-title,
.link-address,
.item-title h3,
.media-item a {
  font-size: 12px;
}

/* ---- mobile: the map is the experience here too ---- */
@media (max-width: 768px) {
  /* roomier touch targets on the map */
  .node {
    width: 44px;
    height: 44px;
  }

  /* labels stay legible on small screens: titles only */
  .node-label {
    display: block;
    width: 110px;
  }

  .node .node-label h3 {
    display: none;
  }
}

/* ---- the timeline date slider is not part of this portfolio ---- */
.slider-container {
  display: none;
}

/* ---- no scrollbar on the page panel (content still scrollable) ---- */
.main-content::-webkit-scrollbar {
  display: none;
}
.main-content {
  scrollbar-width: none;
}

/* ---- visually hidden headings for document structure ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Arabic (RTL) ---- */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] .page-container,
html[lang="ar"] .site-header,
html[lang="ar"] .site-header-nav,
html[lang="ar"] .site-header-about,
html[lang="ar"] .site-header-lang-menu button {
  font-family: "Segoe UI", Tahoma, "Noto Kufi Arabic", "Noto Naskh Arabic", sans-serif;
}