html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  background-color: #f5f0e1; /* parchment beige */
  color: #2c2c2c; 
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ✅ Tree + Preview Wrapper */
.tree-wrapper {
  display: flex;
  flex-wrap: nowrap;       /* keep side by side */
  justify-content: center; /* center whole row */
  align-items: flex-start;
  gap: 20px;
}

#Tree {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;          /* take full row width */
  min-height: 400px;    /* ensure enough vertical space */
  box-sizing: border-box;
}

#Tree svg {
  width: 100%;
  height: auto;
  min-height: 600px;   /* ensures enough vertical space */
  max-height: 900px;   /* caps it so it doesn’t grow endlessly */
}


#youtubePreview {
  flex: 0 0 300px;         /* fixed width column */
  background: #f9f9f9;
  padding: 1rem;
}
#youtubePreview img{
    width: 140px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;    
    border: 4px solid lightsteelblue;
}
p.note{
  width: 400px;
  text-wrap: auto;
}
header, footer {
  background-color: #704214; /* sepia brown */
  color: #d4af37;            /* gold accents */
}
.node text {
  font-size: 18px;       /* desktop default */
           /* charcoal gray */
  font-family: 'Georgia', serif; /* historic serif style */
}

.node.child-label {
  opacity: 0;              /* invisible by default */
  transition: opacity 0.3s ease; /* smooth fade */
}

.node.child-label.visible {
  opacity: 1;              /* visible when expanded */
}
.parent{  
    
    color: darkblue;
    font-weight: bold;
    font-family: sans-serif;

}
.parent2{
  color: rgb(1, 1, 69);
  font-weight:bolder;
  font-family: sans-serif;
}
/* ✅ Responsive Adjustments */
@media (max-width: 768px) {
  .tree-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh; /* full screen height */
}
.node text {
    font-size: 16px;     /* mobile scaling */
  }
#Tree {
  flex: 1; /* tree takes available space */
  overflow: hidden;
}
#Tree svg {
    width: 100%;
    height: 200px;
    min-height: 600px;
    max-height: 900px;
    margin-bottom: -100px;
}
#youtubePreview {
  flex: 400px; /* fixed height for preview */
  width:390px;
  overflow-y: auto;
}
p.note{
  width: 365px;
}
}