/* ── Theme FOUC prevention ──────────────────────────────────────────────
   The head preload script sets an inline style on <html> ONLY when the user
   has chosen light mode (via localStorage). This rule makes <body> match that
   state immediately — before the body-start script adds the class — so the
   page never briefly flashes dark on navigation.
   This is a blocking stylesheet so it applies before the first paint.
   ─────────────────────────────────────────────────────────────────────── */
html[style*="background"] body:not(.shoug-light-mode) {
  background-color: #f8f6ff !important;
  color: #21152f !important;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/*
 * Course pages use body padding to clear the fixed header, while their sticky
 * sidebars also use `top: 68px`. Move the two-column layout back to the page
 * origin, then restore header clearance only on the main-content column. This
 * removes the duplicated blank row without weakening sticky sidebar behavior.
 */
@media (min-width: 761px) {
  body:has(.app-layout),
  body:has(.layout-wrapper) {
    overflow-y: visible !important;
  }

  body:has(.app-layout) .app-layout,
  body:has(.layout-wrapper) .layout-wrapper {
    margin-top: -68px !important;
  }

  body:has(.app-layout) .app-layout > .academic-sidebar,
  body:has(.layout-wrapper) .layout-wrapper > .academic-sidebar {
    top: 68px !important;
  }

  body:has(.app-layout) .app-layout > .main-wrapper,
  body:has(.app-layout) .app-layout > .sys-main,
  body:has(.layout-wrapper) .layout-wrapper > .main-wrapper,
  body:has(.layout-wrapper) .layout-wrapper > .sys-main,
  body:has(.layout-wrapper) .layout-wrapper > .content-area {
    padding-top: 68px !important;
  }
}

@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

.layout-wrapper,
.app-layout,
.content-area,
.page-content,
.content-scroll-area,
.embed-area-wrapper,
.embed-container,
main,
section,
article {
  max-width: 100%;
  min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

.shoug-header-menu-btn,
.shoug-directory-btn {
  min-width: 34px;
  height: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184, 41, 234, 0.45);
  background: rgba(184, 41, 234, 0.08);
  color: #f8f7fb;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.shoug-header-menu-btn:hover,
.shoug-directory-btn:hover {
  border-color: rgba(184, 41, 234, 0.7);
  background: rgba(184, 41, 234, 0.16);
}

body.shoug-light-mode .shoug-header-menu-btn,
body.shoug-light-mode .shoug-directory-btn {
  color: #16111f;
  background: rgba(255, 255, 255, 0.72);
}

.shoug-header-backdrop {
  display: none;
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: none;
  }

  body {
    position: relative;
  }

  /* Keep deeply nested course navigation inside the mobile drawer. Several
     generated course pages add fixed desktop indents at every tree level;
     on a narrow viewport those indents compound until the active link is
     pushed underneath the drawer edge. */
  .academic-sidebar {
    width: min(320px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    flex-basis: auto !important;
  }

  .academic-sidebar .file-tree {
    overflow-x: hidden !important;
  }

  .academic-sidebar .tree-children,
  .academic-sidebar .section-children,
  .academic-sidebar .item-children {
    max-width: 100% !important;
    margin-left: 12px !important;
    padding-left: 6px !important;
  }

  /* Individual viewer pages cap each nested list and make it independently
     scrollable. Inside the already-scrollable mobile drawer that hides the
     remaining chapter links behind a second scroll region. */
  .academic-sidebar .item-children {
    max-height: none !important;
    overflow: visible !important;
  }

  .academic-sidebar .tree-item,
  .academic-sidebar .tree-file,
  .academic-sidebar .tree-course-link {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .academic-sidebar .tree-item {
    padding-left: 10px !important;
    padding-right: 12px !important;
  }

  .academic-sidebar .tree-file,
  .academic-sidebar .tree-course-link {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #__next,
  .md-container,
  .md-main,
  .md-main__inner,
  .md-content,
  .md-content__inner,
  .shoug-site-header,
  .shoug-header-inner,
  .shoug-site-footer,
  .shoug-footer-grid {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  p,
  li,
  dd,
  blockquote,
  figcaption,
  .hero-meta,
  .opening-statement,
  .text-section,
  .rule-text,
  .notice-list,
  .notice-list li,
  .dir-title,
  .dir-path,
  .course-name,
  .ch-title {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .shoug-site-header {
    min-height: 68px !important;
    height: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body.mobile-nav-open .shoug-site-header,
  body.sidebar-open .shoug-site-header,
  body.profile-open .shoug-site-header {
    overflow: visible !important;
  }

  .shoug-header-inner {
    width: calc(100% - 28px) !important;
    min-height: 68px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }

  .shoug-header-logo {
    max-width: 38vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.12em !important;
  }

  .shoug-header-menu-btn {
    display: inline-flex !important;
  }

  body:has(.academic-sidebar) .shoug-directory-btn {
    display: inline-flex !important;
  }

  .shoug-header-actions {
    gap: 6px !important;
    margin-left: auto !important;
  }

  .shoug-icon-btn,
  .shoug-lang-btn,
  .shoug-theme-btn {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }

  .shoug-contact-btn {
    height: 32px !important;
    padding-inline: 10px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.12em !important;
  }

  .shoug-header-nav {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: 74px !important;
    z-index: 10020 !important;
    width: auto !important;
    max-height: calc(100vh - 96px) !important;
    max-height: calc(100dvh - 96px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    overflow: auto !important;
    padding: 10px !important;
    border: 1px solid rgba(184, 41, 234, 0.38) !important;
    background: rgba(5, 5, 8, 0.98) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.62) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    transition:
      opacity 160ms ease,
      transform 160ms ease !important;
  }

  body.mobile-nav-open .shoug-header-nav {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  body.shoug-light-mode .shoug-header-nav {
    background: rgba(246, 244, 251, 0.98) !important;
  }

  /* User account dropdown — anchor to viewport instead of the small avatar
     button, otherwise its right:0 + min-width pushes it off-screen left. */
  .shoug-user-dropdown {
    position: fixed !important;
    top: 74px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - 96px) !important;
    max-height: calc(100dvh - 96px) !important;
    overflow: auto !important;
    z-index: 10020 !important;
  }

  .shoug-header-nav a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 0.76rem !important;
  }

  .shoug-header-nav a:last-child {
    border-bottom: 0 !important;
  }

  .shoug-header-backdrop {
    position: fixed;
    inset: 68px 0 0;
    z-index: 10010;
    background: rgba(0, 0, 0, 0.54);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  body.mobile-nav-open .shoug-header-backdrop,
  body.sidebar-open .shoug-header-backdrop {
    display: block;
  }

  .layout-wrapper,
  .app-layout {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .content-area,
  .page-content,
  .content-scroll-area {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .main-wrapper,
  .sys-main,
  .primary-content,
  .secondary-content,
  .page-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .page-container {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .top-bar,
  .content-topbar,
  .breadcrumb {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .page-header,
  .content-header,
  .content-section,
  .embed-area-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .embed-container {
    width: 100% !important;
    overflow: hidden !important;
  }

  .embed-container iframe,
  .embed-frame {
    width: 100% !important;
    min-height: 72vh !important;
    height: 72vh !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: clamp(72px, 18vh, 132px) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    overflow: hidden !important;
  }

  .hero-bg-glow {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .ticker-wrap {
    max-width: 100vw !important;
    overflow: hidden !important;
    contain: paint;
  }

  .ticker-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-ctas,
  .action-buttons,
  .filter-bar,
  .sub-nav,
  .content-tabs {
    flex-wrap: wrap !important;
  }

  .work-grid,
  .projects-grid,
  .project-grid,
  .explore-grid,
  .panels-grid,
  .proof,
  [class*="cards-grid"],
  [class*="card-grid"] {
    grid-template-columns: 1fr !important;
  }

  .work-card,
  .project-card,
  .card,
  [class*="-card"] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  /* About page: display-name ("SHOUG FAWAZ" at 4rem = 64px) overflows on narrow screens */
  .display-name {
    font-size: clamp(2rem, 9vw, 4rem) !important;
    word-break: break-word !important;
  }

  /* Hero ghost text: clip so it never overflows on narrow screens */
  .hero-ghost {
    white-space: nowrap;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Workshops dossier-card: switch from 3-col grid to single-column flex */
  .dossier-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 24px !important;
  }

  .card-badge-container {
    width: 64px !important;
    height: 64px !important;
  }

  /* Academics hub grid: stack to single column */
  .hub-grid {
    grid-template-columns: 1fr !important;
  }

  .hub-grid::after {
    display: none !important;
  }

  .track-card {
    padding: 2rem !important;
    min-height: auto !important;
  }

  .card-title {
    font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
    max-width: 100% !important;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  .shoug-header-logo {
    max-width: 32vw !important;
  }

  .shoug-header-actions a[aria-label="GitHub"],
  .shoug-header-actions a[aria-label="LinkedIn"],
  .shoug-header-actions a[aria-label="جيت هب"],
  .shoug-header-actions a[aria-label="لينكدإن"] {
    display: none !important;
  }
}

/* ── Course sidebar nesting (all widths) ────────────────────────────────
   Course pages embed a fixed indent per tree level (54px for the section
   list, 72px for each item list) and give every nested list its own 360px
   scroll box. Three levels deep — STUDY MATERIAL > MINDMAPS > Chapter N —
   that pushes the links past the edge of the 273px tree, so they compute to
   zero width and the level renders as an empty column. These rules carry one
   extra class of specificity so they win over the embedded page styles.
   ─────────────────────────────────────────────────────────────────────── */
.academic-sidebar .file-tree .section-children {
  margin-left: 26px;
}

.academic-sidebar .file-tree .item-children {
  margin-left: 20px;
  max-height: none;
  overflow: visible;
}

.academic-sidebar .file-tree .item-children .item-children {
  margin-left: 14px;
}

/* ── Course tab bars (all tracks) ───────────────────────────────────────
   Section hubs (Slide Breakdowns, Slides, Study Material, Exams) use a
   .content-tabs bar in the display font, while course overviews use the
   bracketed mono sub-nav ("[ OVERVIEW ]"). Give the hub tabs the same
   bracketed mono labels. One extra class of specificity beats the embedded
   page styles; the active colour follows each page's --brand-purple (red in
   the cybersecurity track).
   ─────────────────────────────────────────────────────────────────────── */
.content-tabs {
  gap: 4px;
}

.content-tabs .tab {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim, var(--text-secondary));
  padding: 14px 10px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition:
    color 160ms ease,
    border-color 160ms ease;
}

.content-tabs .tab::before {
  content: "[ ";
}

.content-tabs .tab::after,
.content-tabs .tab.active::after {
  content: " ]";
  position: static;
  height: auto;
  background: none;
  box-shadow: none;
}

.content-tabs .tab:hover {
  color: var(--text-primary);
}

.content-tabs .tab.active {
  color: var(--brand-purple);
  border-bottom-color: var(--brand-purple);
}