/* main.css */
/* =============================
   Page/layout
   ============================= */
html, body { height: 100%; overflow-x: hidden; }
body { padding-top: 70px; }                    /* match your navbar height */

/* The scrollable/pannable viewport for the tree */
.tree-container {
  width: 100%;
  height: calc(100vh - 70px);                  /* 70px = body padding-top */
  overflow: auto;
  cursor: grab;
  border-top: 1px solid #ddd;
  background-color: #D9D9D9;
}
.tree-container.grabbing { cursor: grabbing; }

/* =============================
   Theme utilities (colors, misc)
   ============================= */
.bg-lightblue{background-color:#D4E2ED;} .fg-lightblue{color:#D4E2ED;}
.bg-tan{background-color:#A4917D;} .fg-tan{color:#A4917D;}
.bg-gray{background-color:#919180;} .fg-gray{color:#919180;}
.bg-darkgreen{background-color:#104861;} .fg-darkgreen{color:#00C000;}
.bg-deepred{background-color:#92362A;} .fg-deepred{color:#92362A;}
.bg-purple{background-color:#6A6673;} .fg-purple{color:#6A6673;}
.bg-lavendar{background-color:#59495D;} .fg-lavendar{color:#59495D;}
.bg-navy{background-color:#393F4E;} .fg-navy{color:#393F4E;}
.bg-olive{background-color:#0E7C5F;} .fg-olive{color:#0E7C5F;}
.bg-brown{background-color:#544634;} .fg-brown{color:#544634;}
.bg-charcoal{background-color:#494C4D;} .fg-charcoal{color:#494C4D;}
.bg-black{background-color:#1C1E1F;} .fg-black{color:#1C1E1F;}
.bg-white{background-color:#ffffff;} .fg-white{color:#ffffff;}
.fg-orange{color:#ff9C00;} .bg-orange{background-color:#ff9C00;}
.fg-aqua{color:#006EAB;} .bg-aqua{background-color:#006EAB;}

.form-select { font-size: 14px; }

/* Banner + small helpers (unchanged) */
.banner {
  position: fixed; left: 50%; bottom: -50px; transform: translateX(-50%);
  background: #0E7C5F; color: #fff; padding: 10px 20px; font-size: 96px;
  border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,.1); transition: bottom .5s ease-out;
  z-index: 1000;
}
.banner-container { display: inline-block; text-align: center; }

.clickable-button { border: none; background: none; padding: 0; cursor: pointer; }
.clickable-button:active img {
  transform: scale(0.95); filter: brightness(0.8);
  transition: transform .1s ease, filter .1s ease;
}

/* Optional animated text utility */
.anime-text { display:inline-block; font-size:24px; animation: expand 5s ease-in-out forwards; }
@keyframes expand { 0%{transform:scale(0)} 50%{transform:scale(6)} 100%{transform:scale(0)} }

/* =============================
   Tree layout
   ============================= */
.tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px clamp(6000px, 75vw, 6000px);
}

/* Each person column: keep contents centered even when children row is wider */
/*.person {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
*/


/* kill old connector elements if they still get inserted */
.connector-vertical,
.connector-horizontal{ display:none !important; }

/* =============================
   Card (scoped to the tree)
   ============================= */
:root {
  --card-w: 250px;
  --card-wx2: 400px;
  --icon-gutter: 0px;
  --avatar-size: 100px;
  --avatar-offset: 20px; /* set to 0 for truly edge-flush */
}

.tree .tcard {
  box-sizing: border-box;
  width: var(--card-w);
  min-width: var(--card-w);
  max-width: var(--card-w);
  max-height:150px;
  min-height:150px;
  flex: 0 0 var(--card-w);
  margin: 0 auto;

  position: relative; z-index: 1;
  border: 1px solid #555; border-radius: 8px;
  background: #12501A; box-shadow: 0 1px 2px rgba(0,0,0,.06);
  font-size:12px; color:white;

  /* top/left padding is minimal; right/bottom keep icons/toggle clear */
  padding: 10px var(--icon-gutter) 36px 10px;
  
  --text-left-pad: calc(var(--avatar-offset) + var(--avatar-size) + 10px);
}

/* Avatar flush-ish to the top-left */
.tree .tcard .avatar {
  position: absolute;
  top: var(--avatar-offset);
  left: var(--avatar-offset);
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
}

.avatar {
  position: absolute;
  top: var(--avatar-offset);
  left: var(--avatar-offset);
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
}

/* Initials fallback bubble styled like the photo */
.tree .tcard .avatar.initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: #0B7A2A;
  color: #fff;
}

.avatar.initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: #0B7A2A;
  color: #fff;
}

.tree .tcard .name-row {
  display: block;
  min-height: calc(var(--avatar-size) - var(--avatar-offset));
  padding-left: var(--text-left-pad);     /* keep room for the avatar */
  text-align: center;                     /* center in the box… */
  transform: translateX(calc(-0.5 * var(--text-left-pad))); /* …but counter-shift so it’s centered in the card */
}


/* Name text */
.tree .tcard .person-name {
  display: inline-block;
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  margin-top: 25px;                        /* keep your small top gap */
}


/* Lifespan line */
.tree .tcard .lifespan {
  padding-left: var(--text-left-pad);
  text-align: center;
  transform: translateX(calc(-0.5 * var(--text-left-pad)));
  font-size: 12px;
  opacity: .9;
  margin-top: 10px;
}


.tree .tcard strong {
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere; /* keeps long names from pushing width */
}

/* Burger/menu (top-left) */
.tree .tcard .tcard-menu { position: absolute; top: 6px; left: 8px; z-index: 3; }
.tree .tcard .tcard-menu .btn { padding: 2px 6px; line-height: 1; }

/* Info button (top-right) */
.info-btn {
  position: absolute; top: 6px; right: 8px;
  width: 18px; height: 18px; line-height: 18px; font-size: 12px; text-align: center;
  border-radius: 50%; background: #e6f0ff; border: 1px solid #5577cc; color: #224499;
  cursor: pointer; user-select: none;
}
.info-btn:hover { background: #dce8ff; }

/* Dropdown stacking (above neighboring cards) */
.tree .tcard.menu-open { z-index: 4000; }
.tree .tcard .dropdown-menu { z-index: 4100; }


/* =============================
   Custom modal (non-Bootstrap)
   ============================= */
.genea-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1060; }
.genea-modal {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; width:min(720px, 92vw); max-height:80vh; overflow:auto;
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.2); padding:16px 20px;
}
.genea-modal h2 { margin:0 0 8px; font-size:18px; }
.genea-modal .section { margin:8px 0; }
.genea-modal .chips { display:flex; flex-wrap:wrap; gap:8px; }
.genea-modal .chip { padding:4px 8px; border-radius:999px; background:#f2f2f7; border:1px solid #e4e4ea; font-size:12px; }
.genea-close { position:absolute; top:8px; right:10px; cursor:pointer; background:#f5f5f5; border:1px solid #ccc; border-radius:6px; padding:2px 8px; }

/* FORCE shrink-wrap on each person column */
.person{ position:relative; display:inline-flex !important; flex-direction:column; align-items:center; width:max-content !important; text-align:center; }

/* place both relation rows as horizontal inline-flex strips */
.person > .parents-row,
.person > .children-row{
  position:relative;
  display:inline-flex !important;
  width:max-content !important;
  align-self:center !important;
  gap:60px;
}

/* CHILDREN row sits below the card */
.person > .children-row{ margin-top:22px; padding-top:22px; }
/* H bar across children; V tick down from parent card */
.person > .children-row::before{
  content:""; position:absolute; top:0;
  left: var(--line-x, 0px); width: var(--line-w, 0px); height:2px; background:#555;
}
.person > .children-row::after{
  content:""; position:absolute; top:-22px;
  left: var(--parent-center, 50%); transform:translateX(-50%);
  width:2px; height:22px; background:#555;
}

/* PARENTS row sits above the card */
.person > .parents-row{ margin-bottom:22px; padding-bottom:22px; }
/* H bar across parents; V tick down into the card */
.person > .parents-row::before{
  content:""; position:absolute; bottom:0;
  left: var(--line-x, 0px); width: var(--line-w, 0px); height:2px; background:#555;
}
.person > .parents-row::after{
  content:""; position:absolute; bottom:-22px;
  left: var(--parent-center, 50%); transform:translateX(-50%);
  width:2px; height:22px; background:#555;
}


/* When a spouse exists, render this .person as a 2-column grid:
   [ Mom card ]   [ Dad card ]
   Parents-row spans both columns above; children-row spans both columns below. */
.person.couple{
  display: grid !important;
  grid-template-columns: var(--card-w) var(--card-w);
  column-gap: var(--card-wx2);
  align-items: start;
  justify-items: center;
  width: max-content !important;
}

/* tighter couple spacing only in the 3rd row (children level) */
.tree .person > .children-row .person.couple{
  column-gap: 80px;   /* try 70–100px to taste */
}


/* Spouse slot goes in column 2, middle row */
.person.couple > .spouse-row{
  grid-column: 2; grid-row: 2;
  display: block; margin: 0; gap: 0;
}

/* Parents above both; children below both */
.person.couple > .parents-row{  grid-column: 1 / -1; grid-row: 1; }
.person.couple > .children-row{ grid-column: 1 / -1; grid-row: 3; }

/* (Remove/override any old spouse-row inline-flex styles) */
.person > .spouse-row{
  position: static;                 /* ensure not absolute */
}


/* toggle button */
.toggle-btn .chev{
  width:15px; height:15px; display:block;
  transition: transform .15s ease;
}

/* Position the top chevron centered over the card */
/* TOP chevron now sits inside the card */
.toggle-btn-top{
  position:absolute;
  top:3px;                 /* inside the card, like the bottom arrow */
  left:50%;
  transform:translateX(-50%);
  cursor:pointer;
  z-index:3;               /* above avatar */
}

/* default directions */
.toggle-btn-top .chev     { transform: rotate(0deg); }     /* up */
.toggle-btn-bottom .chev  { transform: rotate(180deg); }   /* down */


/* Expand/collapse toggle (bottom-center) */
.toggle-btn-bottom {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  cursor:pointer;
  /*width: 22px; height: 22px; line-height: 22px; font-size: 14px; text-align: center;
  border-radius: 6px; background: #eee; border: 1px solid #bbb; color: #333;
  cursor: pointer; user-select: none;*/
}
.toggle-btn-bottomx:hover { background: #e6e6e6; }

/* when open, flip */
.toggle-btn[aria-expanded="true"].toggle-btn-top .chev    { transform: rotate(180deg); } /* down */
.toggle-btn[aria-expanded="true"].toggle-btn-bottom .chev { transform: rotate(0deg);   } /* up */
.tree .tcard.ghost-under-parents { display: none; }


.site-footer {
        background-color: #000;
        color: #fff;
        padding: 5px 0;
        position: fixed; /* Stays at bottom even when scrolling */
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    .toc { position: sticky; top: 1rem; }
    .code-block { background:#0f172a; color:#e2e8f0; padding:1rem; border-radius:.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
    .badge-kb { background:#eef2ff; color:#3730a3; }
    .hero { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }
    .callout { border-left: .25rem solid #0d6efd; padding-left:1rem; }
    .smallcaps { font-variant: small-caps; letter-spacing: .02em; }
    .screenshot { border:1px solid #dee2e6; border-radius:.5rem; }
    .btn-row .btn { min-width: 7.5rem; }
    .kbd { background:#f8f9fa; border:1px solid #dee2e6; border-radius:.2rem; padding:.1rem .35rem; font-family: ui-monospace, monospace; }

/* Only smooth when we explicitly add the class */
.tree-container.smooth {
  scroll-behavior: smooth;
}

  /* keep the action buttons on one line and aligned */
  .event-actions { white-space: nowrap; }
  .event-actions .btn { white-space: nowrap; }


/* make the couple bar sit above any row connector lines */
.person .couple-link,
.parents-row > .couple-link{
  position: absolute;
  height: 2px;
  background: #666;     /* slightly lighter so it stands out */
  z-index: 1000;        /* <- force on top */
  pointer-events: none;
}

/* parents strip must be a positioning context for its bar */
.tree .person > .parents-row{ position:relative; }

/* spouse switcher (single button) */
.spouse-switch{
  position: absolute; top: 6px; right: 8px;
  display: flex; gap: 6px; align-items: center;
  z-index: 20;
}
.spouse-switch button{
  border: 0; width: 24px; height: 24px; border-radius: 999px;
  font-size: 14px; font-weight: 700; line-height: 24px;
  background: #eee; color: #222; cursor: pointer;
}
.spouse-switch .count{ font-size: 12px; opacity: .9; }

/* The card should be a positioning context */
.tree .person .tcard { position: relative; }

/* Your big anchor shouldn't sit above utility controls */
.tree .person .tcard > a { position: relative; z-index: 1; }

.tree .person { position: relative; }

/* Center person's card lives in column 1, middle row of the 2-col couple grid */
.person.couple > .tcard{
  grid-column: 1;
  grid-row: 2;
}

.tree-container.rendering .tree { visibility: hidden; }

/* Fullscreen image viewer */
.iv-canvas{ position:relative; width:100%; height:100%; background:#000; overflow:hidden; cursor:grab; }
.iv-canvas.grabbing{ cursor:grabbing; }
.iv-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) translate(var(--tx,0px), var(--ty,0px)); }
#ivImage{ display:block; max-width:none; max-height:none; transform:scale(var(--scale,1)); transform-origin:center center; }

.child-wrapper { display: contents; }

.person > .children-row { align-items: flex-start; }

/* Keep row connector bars behind the cards */
.person > .children-row,
.person > .parents-row { position: relative; z-index: 0; }
.person > .children-row::before,
.person > .children-row::after,
.person > .parents-row::before,
.person > .parents-row::after { z-index: 0; }
.tree .tcard { position: relative; z-index: 2; }


.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#f8f9fa;display:block}
.avatar-initials{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:28px;color:#fff;background:#6c757d}