*{box-sizing:border-box}:root{--green:#073f2e;--green2:#0d5942;--gold:#c9a227;--line:#b49335;--cream:#f5f0df;--cream2:#ebe2c9;--ink:#263d32;--muted:#6c756b;--card:#fffdf6}
html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Georgia,'Times New Roman',serif;line-height:1.55}a{color:inherit}
.site-header{background:linear-gradient(120deg,var(--green),var(--green2));color:#fff9e9;border-bottom:4px solid var(--gold)}.header-inner{max-width:1500px;margin:auto;padding:22px 28px;display:flex;align-items:center;gap:16px}.logo-mark{width:54px;height:54px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:29px;font-weight:bold}.site-header h1{margin:0;font-size:30px}.site-header p{margin:2px 0 0;color:#e8dfc7}
.main-nav{background:#0a392b}.nav-inner{max-width:1500px;margin:auto;padding:0 28px;display:flex;flex-wrap:wrap;gap:4px}.nav-inner a{padding:13px 17px;color:#fff8e8;text-decoration:none}.nav-inner a:hover{background:#17563f;color:#f1d77b}
.search-strip{background:var(--cream2);padding:15px 24px;text-align:center;border-bottom:1px solid #d9cba8}.search-form{display:flex;justify-content:center;gap:8px;max-width:700px;margin:auto}.search-form input{flex:1;min-width:0;padding:12px 15px;border:1px solid #c5b58e;border-radius:5px;background:#fffdf7;font-size:15px}.search-form button{padding:0 22px;border:0;border-radius:5px;background:var(--green);color:white;font-weight:bold}.search-form :disabled{opacity:.72;cursor:not-allowed}.search-note{margin:5px 0 0;color:var(--muted);font:12px Arial,sans-serif}
.page-layout{max-width:1500px;margin:24px auto;padding:0 22px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;align-items:start}.sidebar{width:280px;background:#eee5cf;border:1px solid #d8c9a5;border-radius:8px;padding:21px;position:sticky;top:16px}.sidebar h2{margin:0 0 12px;color:var(--green);font-size:21px}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar li{border-bottom:1px solid #d8c9a5}.sidebar li a{display:block;padding:9px 2px;text-decoration:none}.sidebar-info{margin-top:22px;padding:14px;background:#f8f3e5;border-left:3px solid var(--gold)}.sidebar-info h3{margin:0 0 5px;font-size:16px}.sidebar-info p{margin:0;font-size:14px}
.main-content{min-width:0}.tree-section,.future-section{background:#fbf8ed;border:1px solid #dfd3b6;border-radius:8px;padding:24px;margin-bottom:22px}.section-heading{text-align:center;margin-bottom:24px}.eyebrow{color:#8c6c12;font:bold 11px Arial,sans-serif;letter-spacing:2px}.section-heading h2{color:var(--green);font-size:30px;margin:3px 0}.section-heading>p:last-child{color:var(--muted);margin:0}
.tree-scroll{overflow-x:auto;padding:12px 12px 40px;scroll-padding-left:12px}.tree-root{display:flex;justify-content:flex-start;min-width:max-content;width:max-content}.family-branch{display:flex;flex-direction:column;align-items:center;position:relative}.tree-person{position:relative;z-index:1;min-width:220px;max-width:360px;padding:12px 15px;background:var(--card);border:1px solid #c9b477;border-top:3px solid var(--gold);border-radius:7px;text-align:center;box-shadow:0 2px 7px rgba(45,54,34,.07)}.generation-label{display:block;color:#8a6b16;font:bold 10px Arial,sans-serif;letter-spacing:.7px;text-transform:uppercase;margin-bottom:5px}.person-name{display:block;color:var(--green);font-weight:bold;text-decoration:none;line-height:1.4;overflow-wrap:anywhere}.person-name:hover,.person-name:focus{color:#9b7410;text-decoration:underline}.person-note{display:block;margin-top:5px;color:#6c756b;font:11px/1.4 Arial,sans-serif}
.family-children{display:flex;justify-content:center;align-items:flex-start;gap:35px;margin-top:40px;padding-top:35px;position:relative}.family-branch>.tree-person+.family-children:before{content:'';position:absolute;left:50%;top:-40px;height:40px;border-left:2px solid var(--line)}.child-branch{display:flex;flex-direction:column;align-items:center;position:relative}.child-branch:before{content:'';position:absolute;left:50%;top:-35px;height:35px;border-left:2px solid var(--line)}.family-children>.child-branch:after{content:'';position:absolute;top:-35px;height:2px;background:var(--line);left:-17.5px;right:-17.5px}.family-children>.child-branch:first-child:after{left:50%;right:auto;width:calc(50% + 17.5px)}.family-children>.child-branch:last-child:after{left:-17.5px;right:auto;width:calc(50% + 17.5px)}.family-children>.child-branch:only-child:after{display:none}
.future-section h2{color:var(--green);margin-top:0}.ad-slot,.affiliate-section{display:none}.site-footer{background:var(--green);color:#e9dfc4;text-align:center;padding:18px;border-top:3px solid var(--gold)}.site-footer p{margin:0;font-size:13px}
@media(max-width:850px){.page-layout{grid-template-columns:1fr}.sidebar{width:100%;position:static}.sidebar ul{display:flex;flex-wrap:wrap;gap:8px 18px}.sidebar li{border:0}}
@media(max-width:560px){.header-inner{padding:18px 16px}.site-header h1{font-size:24px}.nav-inner{padding:0 8px}.nav-inner a{padding:11px 10px;font-size:13px}.search-strip{padding:12px}.search-form button{padding:0 14px}.page-layout{padding:0 10px;margin:14px auto}.tree-section,.future-section{padding:15px 10px}.tree-person{min-width:190px;max-width:270px;padding:10px}.family-children{gap:24px}}


/* Sidebar Information panel */
.sidebar-info {
  background: #f7f1df;
  border: 1px solid #c6a45b;
  border-radius: 10px;
  padding: 16px;
  color: #234b38;
  line-height: 1.65;
}
.sidebar-info h2 {
  color: #b18a3b;
  margin: 0 0 12px;
  font-size: 1.15rem;
  border-bottom: 1px solid #d8c28e;
  padding-bottom: 8px;
}
.sidebar-info p {
  margin: 0 0 12px;
  font-size: 0.92rem;
}
.sidebar-info p:last-child {
  margin-bottom: 0;
  font-weight: 600;
}


/* Start the genealogy at Generation 1 instead of centering the full-width tree */
.tree-scroll {
  direction: ltr;
  text-align: left;
}
.tree-root {
  justify-content: flex-start;
  margin-left: 0;
  margin-right: auto;
}


/* Keep the two Generation 2 names close together beneath Generation 1.
   The deep Ali lineage is allowed to extend below its fixed-width first-level column,
   so its descendants do not push Fatma to the far edge of the page. */
.tree-root > .family-branch > .family-children {
  display: grid;
  grid-template-columns: 260px 260px;
  justify-content: center;
  align-items: start;
  column-gap: 22px;
  width: 542px;
  min-width: 542px;
  margin-left: auto;
  margin-right: auto;
}
.tree-root > .family-branch > .family-children > .child-branch {
  width: 260px;
  min-width: 260px;
}
.tree-root > .family-branch > .family-children > .child-branch > .family-branch {
  width: 260px;
  min-width: 260px;
}
.tree-root > .family-branch > .family-children > .child-branch .family-children {
  width: max-content;
}


/* Version 6: make the family tree horizontally scrollable and the scrollbar visible */
.tree-section {
  min-width: 0;
  overflow: visible;
}
.tree-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: scroll !important;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  scrollbar-color: #9a7926 #e8dfc9;
  padding-bottom: 28px;
  touch-action: pan-x pan-y;
  cursor: grab;
}
.tree-scroll:active {
  cursor: grabbing;
}
.tree-scroll::-webkit-scrollbar {
  height: 16px;
  display: block;
}
.tree-scroll::-webkit-scrollbar-track {
  background: #e8dfc9;
  border: 1px solid #c9b477;
  border-radius: 10px;
}
.tree-scroll::-webkit-scrollbar-thumb {
  background: #9a7926;
  border: 3px solid #e8dfc9;
  border-radius: 10px;
}
.tree-scroll::-webkit-scrollbar-thumb:hover {
  background: #735814;
}
.tree-root {
  display: flex;
  width: max-content;
  min-width: max-content;
  max-width: none;
  justify-content: flex-start;
  align-items: flex-start;
}
.tree-root .family-branch,
.tree-root .child-branch {
  flex-shrink: 0;
}
.tree-root .family-children {
  flex-shrink: 0;
}


/* Version 7: constrain the scroll viewport to the content column.
   Keep the complete nested genealogy inside one genuine horizontal scroller. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.page-layout,
.main-content,
.tree-section {
  min-width: 0;
  max-width: 100%;
}
.tree-section {
  overflow: hidden;
}
.tree-scroll {
  display: block !important;
  position: relative;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 12px 18px 34px !important;
  margin: 0;
  direction: ltr;
  scrollbar-width: auto !important;
  scrollbar-color: #8a6b16 #e8dfc9 !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.tree-scroll::-webkit-scrollbar {
  height: 18px !important;
  display: block !important;
}
.tree-scroll::-webkit-scrollbar-track {
  background: #e8dfc9;
  border: 1px solid #b49335;
  border-radius: 9px;
}
.tree-scroll::-webkit-scrollbar-thumb {
  background: #8a6b16;
  border: 3px solid #e8dfc9;
  border-radius: 9px;
}
.tree-root {
  display: flex !important;
  flex: 0 0 auto;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  justify-content: flex-start !important;
  align-items: flex-start;
  margin: 0 !important;
  padding: 0 12px 12px 0;
}
.tree-root .family-branch,
.tree-root .child-branch {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
}
.tree-root .family-children {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  justify-content: center;
  align-items: flex-start;
}
.tree-root .tree-person {
  flex: 0 0 auto;
}


/* Cross-browser genealogy viewport correction */
.tree-scroll {
  position: relative;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100%;
  min-width: 0;
  scrollbar-gutter: stable;
}
.tree-root {
  position: relative;
  will-change: transform;
}
.tree-scroll, .tree-root, .family-branch, .child-branch {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
@media (max-width: 850px) {
  .tree-scroll { touch-action: pan-x pan-y; }
}

/* Generation 25 short family notes */
.person-note{display:block;font-size:.72rem;line-height:1.35;margin-top:5px;color:#6b6252;font-weight:400;max-width:220px}


/* Noor-ul-Ain biography tree: prevent ancestor and first Generation 25 cards from being clipped */
.noor-ul-ain-page .tree-scroll {
  padding-left: 36px !important;
  padding-right: 36px !important;
  scroll-padding-left: 36px;
}
.noor-ul-ain-page .tree-root .tree-person {
  box-sizing: border-box;
  min-width: 290px;
  max-width: 460px;
  width: 340px;
  overflow: visible;
}
.noor-ul-ain-page .tree-root .person-name {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.noor-ul-ain-page .person-note {
  max-width: 360px;
  white-space: normal;
}
@media (max-width: 560px) {
  .noor-ul-ain-page .tree-scroll { padding-left: 24px !important; padding-right: 24px !important; }
  .noor-ul-ain-page .tree-root .tree-person { min-width: 270px; width: 290px; max-width: 320px; }
  .noor-ul-ain-page .person-note { max-width: 270px; }
}


/* Final Noor-ul-Ain page-only correction: always expose the complete left edge
   and keep all five Generation 25 branches inside the horizontal scroll area. */
.noor-ul-ain-page .tree-section,
.noor-ul-ain-page .generation-tree-section {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.noor-ul-ain-page .tree-scroll {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-padding-inline-start: 28px;
  overflow-anchor: none;
  direction: ltr !important;
  scroll-behavior: auto !important;
}
.noor-ul-ain-page .tree-root {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-left: 8px !important;
  padding-right: 32px !important;
  transform: none !important;
}
.noor-ul-ain-page .tree-root > .family-branch {
  flex: 0 0 auto !important;
  min-width: max-content !important;
}
.noor-ul-ain-page .tree-root .family-children {
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
}
.noor-ul-ain-page .tree-root .child-branch {
  flex: 0 0 auto !important;
}
.noor-ul-ain-page .tree-root .tree-person {
  box-sizing: border-box !important;
  flex: 0 0 340px !important;
  width: 340px !important;
  min-width: 290px !important;
  max-width: 340px !important;
  overflow: visible !important;
}
.noor-ul-ain-page .tree-root .person-name {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.noor-ul-ain-page .tree-root .person-note {
  max-width: 300px !important;
  white-space: normal !important;
}
@media (max-width: 560px) {
  .noor-ul-ain-page .tree-scroll { padding-left: 18px !important; padding-right: 18px !important; }
  .noor-ul-ain-page .tree-root .tree-person {
    flex-basis: 290px !important; width: 290px !important;
    min-width: 270px !important; max-width: 310px !important;
  }
  .noor-ul-ain-page .tree-root .person-note { max-width: 260px !important; }
}