:root {
  --primary-bg: #fff9f0; /* Very light warm cream */
  --hero-accent-bg: #fbe5d5; /* Light pastel peach/orange for diagonal */
  --header-bg: #fcf5eb; /* Slightly off-white for header */
  --text-primary: #6b4f4b; /* Dark warm brown */
  --text-secondary: #8e746b;
  --accent-color-main: #d4a373; /* Warm tan/brown for buttons and accents */
  --accent-color-secondary: #a3b8b1; /* Muted pastel teal/blue-grey for "Service tree" button */
  --border-color: #e0d3c0; /* Light warm grey/beige for borders */
  --white: #ffffff;
  --black: #333333;

  --font-primary: "Playfair Display", serif;
  --font-secondary: "Montserrat", sans-serif;

  --container-width: 1200px;
  --padding-large: 40px;
  --padding-medium: 20px;
  --padding-small: 10px;

  --generation-line-spacing: 120px; /* Spacing for generation guide lines */
  --generation-line-color: rgba(
    0,
    0,
    0,
    0.08
  ); /* Color for generation guide lines */
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-secondary);
  color: var(--text-primary);
  background-color: var(--primary-bg);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#app {
  flex-grow: 1;
  width: 100%;
  display: flex; /* Ensure #app is a flex container for main */
  flex-direction: column; /* Stack header and main vertically */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--padding-medium);
}

/* Custom Scrollbar Styles */

/* For WebKit-based browsers (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 10px; /* Width of vertical scrollbar */
  height: 10px; /* Height of horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: var(--primary-bg);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--text-secondary);
  border-radius: 5px;
  border: 2px solid var(--primary-bg); /* Creates padding around thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-primary);
}

/* For Firefox */
html, /* For the main page scrollbar */
main#main-content-container,
textarea,
pre,
#nodeEditModal .modal-content,
.person-file-list,
.family-tree-canvas,
.json-viewer-container,
#jsonViewerPre {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: var(--text-secondary) var(--primary-bg); /* thumb track */
}

main#main-content-container {
  flex-grow: 1; /* Allows main to take up remaining vertical space */
  display: flex;
  flex-direction: column; /* Stacks page sections vertically */
  overflow-y: auto; /* If content within a page section overflows */
}

/* Ensure active page sections can also grow if they are flex containers */
#main-content-container > .page-section[style*="display: block"],
#main-content-container > .page-section[style*="display: flex"] {
  flex-grow: 1; /* Allows the visible page section to fill main */
}

.main-header {
  background-color: var(--header-bg);
  padding: var(--padding-small) 0;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-icon {
  font-size: 1.8rem;
  color: var(--accent-color-main);
  margin-right: 8px;
}

.logo-text {
  font-family: var(--font-primary);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
}

.main-nav ul {
  display: flex;
  align-items: center;
}

.main-nav li {
  margin-left: var(--padding-medium);
}

.main-nav a {
  font-size: 0.95rem;
  color: var(--text-secondary);
  padding: var(--padding-small) 0;
  position: relative;
  transition:
    color 0.3s ease,
    border-bottom-color 0.3s ease;
  font-weight: bold; /* Made items bold */
  border-bottom: 2px solid transparent; /* For active state underline */
}

.main-nav a:hover {
  /* Added hover state */
  color: var(--accent-color-main);
}

.main-nav a.active {
  /* Added active state */
  color: var(--accent-color-main);
  border-bottom-color: var(
    --accent-color-main
  ); /* Underline for active state */
}

/* Added for centering main navigation links */
.main-nav {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

.nav-buttons {
  display: flex;
  align-items: center;
  position: relative; /* Added for positioning search dropdown */
  gap: var(--padding-small); /* Added gap for spacing children */
  flex-shrink: 0; /* Prevent nav-buttons from shrinking */
}

.nav-button {
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-family: var(--font-secondary);
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent; /* Base border */
  /* margin-left: var(--padding-small); Removed, using gap on parent .nav-buttons */
}
.nav-button-home {
  background-color: var(--primary-bg);
  color: var(--accent-color-main);
  border: 1px solid var(--accent-color-main);
}

.nav-button-home:hover {
  background-color: var(--accent-color-main);
  color: var(--white);
}

.nav-button-login {
  background-color: var(--accent-color-main);
  color: var(--white);
  border: 1px solid var(--accent-color-main);
}

.nav-button-login:hover {
  background-color: #c08a57;
}

.nav-search-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1rem; /* Smaller icon */
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1; /* Ensure icon is centered if it has intrinsic line height */
}

.nav-search-icon-btn:hover {
  color: var(--accent-color-main);
}

.nav-search-input-area {
  position: relative; /* For the dropdown */
  display: flex; /* To contain the input field */
  align-items: center;
  width: 0;
  opacity: 0;
  /* overflow: hidden; /* REMOVED: This was clipping the dropdown */
  transition:
    width 0.3s ease-in-out,
    opacity 0.3s ease-in-out 0.1s,
    margin-left 0.3s ease-in-out;
  margin-left: 0; /* Initially no margin */
  pointer-events: none; /* Prevent interaction when hidden */
}

.nav-search-input-area.active {
  width: 180px; /* Expanded width */
  opacity: 1;
  margin-left: 5px; /* Space between icon and input area when active */
  pointer-events: auto; /* Allow interaction when visible */
}

.nav-search-field {
  padding: 10px 15px; /* Vertical padding always, horizontal when active */
  border-radius: 20px;
  font-size: 0.9rem;
  font-family: var(--font-secondary);
  font-weight: 500;
  background-color: var(--accent-color-secondary);
  color: var(--white);
  border: 1px solid var(--accent-color-secondary);
  box-sizing: border-box;
  width: 100%; /* Fill parent .nav-search-input-area */
  /* Transitions for opacity or other properties if needed, but width is on parent */
  transition: opacity 0.3s ease; /* Example if opacity changes with parent */
}

.nav-search-field:focus {
  outline: none;
  /* Focus styles remain, but border-color might be handled by parent's active state if border is on parent */
  box-shadow: 0 0 0 2px rgba(163, 184, 177, 0.5);
}

/* Placeholder color for the new input field */
.nav-search-field::placeholder {
  color: rgba(255, 255, 255, 0.75);
  opacity: 1;
}

.nav-search-field:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.nav-search-field::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

/* Hide the clear (X) button in search inputs */
.nav-search-field::-webkit-search-decoration,
.nav-search-field::-webkit-search-cancel-button,
.nav-search-field::-webkit-search-results-button,
.nav-search-field::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

.nav-search-field::-moz-search-cancel-button {
  /* For Firefox */
  display: none;
}

.nav-search-field::-ms-clear {
  /* For IE/Edge */
  display: none;
  width: 0;
  height: 0;
}

.nav-search-field::placeholder {
  color: rgba(255, 255, 255, 0.75);
  opacity: 1;
}

.nav-search-field:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.nav-search-field::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.nav-search-wrapper {
  position: relative; /* For positioning the dropdown if it were a direct child */
  display: flex;
  align-items: center;
}

.nav-search-results-dropdown {
  position: absolute;
  top: 100%; /* Position below the nav-search-input-area */
  left: 0;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  width: 100%; /* Make dropdown same width as nav-search-input-area */
  min-width: 180px; /* Match expanded input area width */
  max-height: 300px;
  overflow-y: auto;
}

.nav-search-results-dropdown a {
  display: block;
  padding: 10px 15px;
  color: var(--text-primary);
  text-decoration: none;
  /* font-size: 0.9rem; Will be set by children or inherited */
  border-bottom: 1px solid var(--border-color);
  /* Removed white-space, overflow, text-overflow for parent <a> */
}

.nav-search-results-dropdown a:last-child {
  border-bottom: none;
}

.nav-search-results-dropdown a:hover {
  background-color: var(--primary-bg);
  color: var(--accent-color-main);
}

.nav-search-results-dropdown .no-results {
  padding: 10px 15px;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.9rem;
}

.search-dropdown-page-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px; /* Space between title and snippet */
}

.search-dropdown-page-snippet {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.3;
  max-height: 2.6em; /* Approx 2 lines */
  overflow: hidden;
  white-space: normal; /* Allow wrapping */
}

.search-dropdown-page-snippet b {
  font-weight: bold;
  color: var(--text-primary); /* Make bolded text stand out a bit more */
}

.mobile-menu-toggle {
  display: none; /* Hidden by default, shown in media query */
  flex-direction: column;
  justify-content: space-around; /* Distributes space for hamburger lines */
  width: 30px;
  height: 22px; /* Adjusted height for better proportion */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001; /* Above navigation wrapper if it's part of header flow, same level as header children */
  order: 3; /* Ensure it's typically to the right or as desired in flex flow */
}

.mobile-menu-toggle .hamburger-line {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--text-primary);
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

/* Animation to X when active */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg); /* Adjusted for new height */
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg); /* Adjusted for new height */
}

.navigation-wrapper {
  display: flex;
  align-items: center;
  flex-grow: 1; /* Allow wrapper to take available space */
  justify-content: space-between; /* Space out main-nav and nav-buttons */
  /* On desktop, this wrapper groups main-nav and nav-buttons.
     The parent .main-header .container handles overall alignment. */
}

.header-logo-image {
  height: 50px; /* Adjust as needed for visual balance */
  width: auto; /* Maintain aspect ratio */
  display: block;
  margin-right: 10px; /* Added space between image and text */
}

.hero-section {
  padding: var(--padding-large) 0;
  position: relative;
  overflow: hidden;
  background-image: url("https://sites.webprompter.ai/laura-site-1/images/hero-banner.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 450px;
}

.hero-section .container {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1; /* Keep content above background */
}

.hero-text-content {
  max-width: 40%; /* Allow text content to take up to 40% of available space */
  padding-right: 0; /* Removed padding that was for the image */
}

.hero-title-line {
  display: flex;
  align-items: center;
  margin-bottom: var(--padding-medium);
}

.hero-title-icon {
  font-size: 2.5rem;
  color: var(--accent-color-main);
  margin-right: var(--padding-small);
  font-family: serif;
}

.hero-text-content h1 {
  font-family: var(--font-primary);
  font-size: 3.2rem;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 0;
}

.hero-text-content .subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: var(--padding-medium);
}

.hero-buttons {
  margin-top: var(--padding-medium);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--padding-small);
}

.hero-button-primary {
  background-color: var(--accent-color-main);
  color: var(--white);
  padding: 12px 25px;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.hero-button-primary:hover {
  background-color: #c08a57;
}

.hero-button-secondary {
  background-color: transparent;
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: 25px;
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.hero-button-secondary:hover {
  border-color: var(--accent-color-main);
  color: var(--accent-color-main);
}

.content-section {
  padding: var(--padding-large) 0;
  background-color: var(--primary-bg);
}

.content-section .container {
  text-align: center;
}

.content-section h2 {
  font-family: var(--font-primary);
  font-size: 2.5rem;
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
}

.content-section .section-intro {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto var(--padding-large) auto;
}

.illustrations-grid {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--padding-medium);
}

.illustration-item {
  flex-basis: calc(33.333% - var(--padding-medium));
  min-width: 280px;
  background-color: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--padding-medium);
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.illustration-item img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--padding-small);
  border-radius: 4px 4px 0 0;
}

.illustration-item-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #efebe9;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--padding-small);
  border-radius: 4px 4px 0 0;
  color: var(--text-secondary);
  font-style: italic;
}

.illustration-item h3 {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
}

.illustration-item p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  flex-grow: 1;
}

.service-item h3 {
  font-family: var(--font-primary);
  font-size: 1.4rem; /* Consistent with illustration-item h3 */
  color: var(--text-primary);
  margin-bottom: 0; /* Moved to .service-item-title-container */
}

.service-item p {
  font-size: 0.95rem; /* Consistent with illustration-item p */
  color: var(--text-secondary);
  line-height: 1.6; /* Increased slightly for readability */
  flex-grow: 1; /* Ensures items in a row have same height if content differs */
}

.service-item-title-container {
  display: flex;
  align-items: center;
  margin-bottom: var(--padding-small);
}

.service-icon {
  font-size: 1.6rem; /* Slightly larger than h3 */
  margin-right: 10px;
  color: var(--accent-color-main);
  line-height: 1; /* Ensure icon aligns well */
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--padding-medium);
  margin-top: var(--padding-large);
  text-align: left;
}

.service-item {
  background-color: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--padding-medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.services-grid .service-item:nth-child(1) {
  background-color: #fcf5eb;
}
.services-grid .service-item:nth-child(2) {
  background-color: #fbf2e7;
}
.services-grid .service-item:nth-child(3) {
  background-color: #fdf7f0;
}
.services-grid .service-item:nth-child(4) {
  background-color: #faefe3;
}

.pricing-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--padding-medium);
  margin-top: var(--padding-large);
}

.pricing-card {
  background-color: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--padding-medium);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.pricing-card h3 {
  font-family: var(--font-primary);
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
}

.pricing-card .hero-button-primary {
  margin-top: auto;
  width: 100%;
  padding: 12px 20px;
}

.pricing-card .price-tag {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent-color-main);
  margin-bottom: var(--padding-medium);
  line-height: 1.2;
}

.pricing-card .price-tag .currency {
  font-size: 1.3rem;
  vertical-align: super;
  margin-right: 2px;
}

.pricing-card .price-tag .term {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-secondary);
  display: block;
  margin-top: -5px;
}

.pricing-card .features-list {
  list-style: none;
  margin-bottom: var(--padding-medium);
  padding: 0;
  text-align: left;
  flex-grow: 1;
}

.pricing-card .features-list li {
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding-left: 25px;
  position: relative;
  line-height: 1.4;
}

.pricing-card .features-list li::before {
  content: "✔";
  color: var(--accent-color-secondary);
  position: absolute;
  left: 0;
  font-weight: bold;
  font-size: 1.1em;
}

.pricing-card.popular {
  border: 2px solid var(--accent-color-main);
  position: relative;
  transform: scale(1.02);
}

.popular-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-color-main);
  color: var(--white);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.pricing-card .deposit-info {
  /* Increased specificity */
  font-size: 0.9rem; /* Changed from 0.375rem to 0.9rem */
  color: var(--text-secondary);
  margin-top: var(--padding-small);
  margin-bottom: var(--padding-small);
  font-weight: bold; /* Added bold */
  font-style: italic;
  line-height: 1.3;
}

.about-page-content {
  padding: var(--padding-large) 0;
  text-align: center;
}
.about-page-content h1 {
  font-family: var(--font-primary);
  font-size: 2.5rem;
  margin-bottom: var(--padding-medium);
}
.about-page-content p {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto var(--padding-medium) auto;
  line-height: 1.7;
}

.faq-section {
  margin-top: var(--padding-large);
  padding-top: var(--padding-medium);
  border-top: 1px solid var(--border-color);
  text-align: left; /* Override parent text-align center */
  max-width: 800px; /* Match paragraph width on about page */
  margin-left: auto;
  margin-right: auto;
}

.faq-section h2 {
  font-family: var(--font-primary);
  font-size: 2rem; /* Slightly smaller than page title */
  color: var(--text-primary);
  margin-bottom: var(--padding-medium);
  text-align: center; /* Center FAQ title */
}

.faq-item {
  background-color: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: var(--padding-small);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.faq-question {
  font-weight: 500;
  padding: var(--padding-small) var(--padding-medium);
  cursor: pointer;
  display: block; /* To allow full width click */
  color: var(--text-primary);
  position: relative; /* For custom marker */
}

.faq-question:hover {
  background-color: #f8f0e6; /* Slightly darker than header-bg */
}

.faq-question::marker {
  content: ""; /* Remove default marker if using custom */
}
.faq-question::after {
  /* Custom marker */
  content: "▼";
  font-size: 0.8em;
  position: absolute;
  right: var(--padding-medium);
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease-in-out;
}

.faq-item[open] .faq-question::after {
  transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
  padding: 0 var(--padding-medium) var(--padding-medium) var(--padding-medium);
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
}

.story-entry {
  background-color: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--padding-medium);
  margin-bottom: var(--padding-large);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.story-entry .story-title {
  font-family: var(--font-primary);
  font-size: 1.8rem;
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
}

.story-entry .story-meta {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--padding-medium);
  font-style: italic;
}

.story-entry .story-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
}

.story-entry .story-content p:last-child {
  margin-bottom: 0;
}

.story-entry .story-content .story-image-individual {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: var(--padding-medium) auto; /* Centered if block, or adjust as needed */
  display: block; /* To allow auto margins for centering */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.story-entry .story-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padding-small);
  margin: var(--padding-medium) 0;
}

.story-entry .story-gallery .story-gallery-image {
  flex: 1 1 150px; /* Grow, shrink, base width of 150px */
  max-height: 180px; /* Max height for gallery images */
  width: auto;
  object-fit: cover; /* Cover the area, might crop */
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.stories-page-content {
  padding: var(--padding-large) 0;
  text-align: left; /* Default to left for blog posts */
}

.stories-page-content .container {
  max-width: 800px; /* Consistent width for readable blog content */
  margin: 0 auto;
}

.stories-page-content h1 {
  font-family: var(--font-primary);
  font-size: 2.5rem;
  margin-bottom: var(--padding-medium);
  text-align: center; /* Center the main page title */
}

.stories-page-content .section-intro {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto var(--padding-large) auto;
  text-align: center; /* Center the intro paragraph */
}

footer {
  background-color: var(--text-primary);
  color: var(--primary-bg);
  text-align: center;
  padding: var(--padding-medium) 0;
  font-size: 0.9rem;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-content {
  background-color: var(--primary-bg);
  padding: var(--padding-large);
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  width: 90%;
  max-width: 400px;
  color: var(--text-primary);
}

.modal-close-btn {
  position: absolute;
  top: var(--padding-small);
  right: var(--padding-small);
  font-size: 1.8rem;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
}

.modal-content h2 {
  font-family: var(--font-primary);
  margin-bottom: var(--padding-medium);
  text-align: center;
}

.form-group {
  margin-bottom: var(--padding-medium);
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
  /* Added email type */
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 1rem;
}

.modal-content .hero-button-primary {
  /* Re-use button style */
  width: 100%;
  margin-top: var(--padding-small);
}

.auth-error-message {
  color: red;
  margin-top: 10px;
  font-size: 0.9em;
  text-align: center;
}

#authModalMessageArea {
  display: none; /* Initial state, JS will toggle */
  text-align: center;
  padding: 20px;
  background-color: #f2f5f8; /* Light grey-blue background */
  border: 1px solid #dde2e7; /* Softer border */
  border-radius: 6px;
  margin-top: 20px; /* Space from modal top or elements above */
  margin-bottom: 20px; /* Space from modal bottom or elements below */
}

#authModalMessageText {
  margin-bottom: 15px;
  line-height: 1.6;
  font-size: 1rem;
  color: var(--text-primary); /* Default/Info color */
}

#authModalMessageText.success {
  color: var(
    --accent-color-main
  ); /* Success color (can be changed to green if preferred) */
}

#authModalMessageText.error {
  color: red; /* Error color */
}

#authModalMessageContinueBtn {
  /* This is a .hero-button-primary */
  margin-top: 15px; /* Spacing for the continue button */
  /* Other styles inherited from .hero-button-primary */
}

.forgot-password-link:hover {
  color: var(--accent-color-main);
}

/* Node Edit Modal Styles */
#nodeEditModal .modal-content {
  max-width: 900px; /* Increased width for two columns */
  max-height: 85vh; /* Ensure modal is not taller than viewport */
  overflow-y: auto; /* Allow scrolling if content exceeds max-height */
  display: flex; /* Added to help manage internal layout better with scrolling */
  flex-direction: column; /* Stack title, form, actions vertically */
}

#nodeEditModalTitle {
  font-family: var(--font-primary);
  margin-bottom: var(--padding-medium);
  text-align: center;
  flex-shrink: 0; /* Prevent title from shrinking */
}

#nodeEditForm {
  flex-grow: 1; /* Allow form to take available space, helps with scrolling */
  /* overflow-y: auto; /* If form itself needs to scroll (less likely with modal-content scrolling) */
  /* padding-right: 5px; /* Space for potential scrollbar in the form itself, if needed */
  /* margin-right: -5px; /* Counteract padding for layout */
  display: flex;
  flex-wrap: wrap; /* Allows columns to wrap and actions to go full width */
}

.node-edit-modal-columns-wrapper {
  display: flex;
  width: 100%;
  gap: var(--padding-medium);
  margin-bottom: var(--padding-medium); /* Space before modal-actions */
}

.node-edit-modal-left-column,
.node-edit-modal-right-column {
  flex: 1;
  min-width: 300px; /* Prevent columns from becoming too narrow */
  display: flex;
  flex-direction: column; /* Stack elements vertically within each column */
}

.node-edit-modal-right-column .person-files-section {
  margin-bottom: var(--padding-medium);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: var(--padding-medium);
  background-color: var(--header-bg); /* Light background for contrast */
  flex-grow: 1; /* Allow file list section to grow if space allows */
  min-height: 150px; /* Ensure some minimum height for the list area */
  display: flex;
  flex-direction: column;
}

.node-edit-modal-right-column .person-files-section h4 {
  font-family: var(--font-primary);
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
  padding-bottom: var(--padding-small);
  border-bottom: 1px solid var(--border-color);
}

.person-file-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1; /* Allow list to take available space */
  overflow-y: auto; /* Scroll if many files */
  /* max-height: 200px; /* Removed: Limit height of file list itself */
}

.person-file-item {
  display: flex;
  align-items: center; /* Vertically center items */
  justify-content: space-between; /* Push preview to the right */
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  /* gap: 8px; /* Removed, using space-between and internal margins */
}

.person-file-item:last-child {
  border-bottom: none;
}

.file-icon-details {
  display: flex;
  align-items: center; /* Vertically align icon with first line of text */
}

.file-icon {
  font-size: 1.2em;
  color: var(--text-secondary);
  margin-right: 10px;
  width: 20px; /* Fixed width for icon alignment */
  text-align: center;
}

.file-name-desc {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.file-name-link {
  /* Was .file-name, now specifically for the link */
  font-weight: 500;
  color: var(--accent-color-main);
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}
.file-name-link:hover {
  text-decoration: underline;
  color: #c08a57; /* Darker accent */
}

.file-description {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}

#nodeEditForm .form-group {
  margin-bottom: var(--padding-medium);
}

#nodeEditForm label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: var(--text-secondary);
}

#nodeEditForm input[type="text"],
#nodeEditForm input[type="date"],
#nodeEditForm input[type="file"],
#nodeEditForm select,
#nodeEditForm textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--font-secondary);
  box-sizing: border-box;
}

#nodeEditForm input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

#nodeEditForm textarea {
  resize: vertical;
  min-height: 60px;
}

#nodeEditModal .modal-actions {
  flex-basis: 100%; /* Make actions take full width */
  margin-top: var(
    --padding-medium
  ); /* Adjusted from large, as columns wrapper has margin-bottom */
  display: flex;
  justify-content: space-between; /* Changed from flex-end */
  align-items: center; /* Added for vertical alignment if buttons have different heights */
  flex-shrink: 0; /* Prevent actions area from shrinking */
  padding-top: var(
    --padding-medium
  ); /* Add some space above buttons if content scrolls close */
  border-top: 1px solid var(--border-color); /* Separator for clarity when scrolling */
}

#nodeEditModal .modal-actions-right-group {
  /* New style for grouping right buttons */
  display: flex;
  gap: var(--padding-small);
}

/* Ensure all buttons in nodeEditModal actions have consistent sizing */
#nodeEditModal .modal-actions button {
  width: auto;
  padding: 10px 20px;
  min-width: 120px;
  text-align: center;
}

#nodeEditModal .hero-button-secondary {
  background-color: var(--primary-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

#nodeEditModal .hero-button-secondary:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

/* Specific styling for delete button if modal-button-danger is not enough or needs override */
#nodeEditModal .modal-actions .modal-button-danger {
  /* Styles inherited from generic-modal-danger-button should apply */
  /* Example specific override if needed: */
  /* background-color: #dc3545; */
  /* color: white; */
}

/* File Management Fieldset Styles */
.file-management-fieldset {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: var(--padding-medium);
  /* margin-top: var(--padding-medium); /* Removed, as parent .modal-file-management-area handles spacing */
  margin-bottom: 0; /* No bottom margin if it's the last element in its column section */
}

.file-management-fieldset legend {
  font-weight: 500;
  color: var(--text-primary);
  padding: 0 8px; /* Gives some space around the legend text */
  font-size: 1.1em;
}

#nodeEditForm input[type="file"] {
  padding: 5px; /* Specific padding for file input for better appearance */
}

.file-upload-status-message {
  margin-top: 10px;
  font-size: 0.9em;
  padding: 8px;
  border-radius: 4px;
  display: none; /* Hidden by default */
}

.file-upload-status-message.success {
  background-color: #e6f9e6;
  color: #006400;
  border: 1px solid #b3e6b3;
  display: block;
}

.file-upload-status-message.error {
  background-color: #f9e6e6;
  color: #a80000;
  border: 1px solid #e6b3b3;
  display: block;
}

.file-upload-status-message.info {
  background-color: #e6f2f9;
  color: #005a8d;
  border: 1px solid #b3d9f2;
  display: block;
}

.file-info-container {
  display: flex; /* To align icon and text block horizontally */
  align-items: center; /* Vertically center icon with text block */
  flex-grow: 1; /* Allow it to take available space on the left */
  margin-right: 10px; /* Space before the preview image, applied if preview exists */
  overflow: hidden; /* Handles potential overflow of long file names/descriptions */
}

.file-preview-container {
  flex-shrink: 0; /* Prevent preview from shrinking */
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  background-color: #f9f9f9;
}

.file-preview-container a {
  display: block;
  width: 100%;
  height: 100%;
}

.file-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-portrait-area {
  margin-bottom: var(--padding-medium);
  position: relative; /* For overlay positioning */
  /* Ensure enough space for the icon if it's positioned outside the portrait display */
  padding-bottom: 15px; /* Add some padding if icon is at the very bottom */
}

#modalPortraitDisplayContainer {
  width: 150px; /* Target width: Changed from 120px */
  height: 180px; /* Target height: Changed from 150px */
  border-radius: 50%; /* Oval shape */
  border: 3px solid var(--accent-color-main);
  margin: 0 auto var(--padding-small) auto;
  position: relative; /* For positioning the icon relative to this (if it were a child) */
  overflow: hidden;
  background-color: #f0f0f0; /* Placeholder background */
  display: flex;
  align-items: center;
  justify-content: center;
}

#modalPortraitImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#modalPortraitUploadIcon {
  position: absolute;
  /* Position near bottom right, outside the oval, relative to modal-portrait-area */
  /* Portrait is 180px high. Icon is 30px high. */
  /* To place bottom of icon (30px) slightly below portrait bottom (180px): top = 180 - 30 + 5 = 155px */
  top: 155px;
  /* Portrait is 150px wide and centered. Its right edge is at 50% + 75px. */
  /* To place left of icon (0px) slightly to the right of portrait right edge: left = 50% + 75px + 5px */
  left: calc(50% + 80px); /* 75px (half portrait) + 5px (gap) */

  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: 1px solid white;
  z-index: 1;
}

#modalPortraitUploadIcon:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

#modalPortraitUploadIcon i {
  font-size: 0.9rem;
}

.modal-section-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    240,
    240,
    240,
    0.85
  ); /* Light semi-transparent overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 5; /* Above the content it covers, below modal controls */
  border-radius: 6px; /* Match fieldset or container */
  padding: var(--padding-small);
  box-sizing: border-box;
}

.modal-lock-message {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Specific overlay for portrait upload icon if it's separate */
/* #modalPortraitLockOverlay might need specific positioning if it only covers the icon */
/* For now, assuming it covers the #modalPortraitDisplayContainer if icon is disabled */
/* If #modalPortraitUploadIcon is simply hidden/disabled, this overlay might cover the whole portrait area */

/* Ensure fieldset is a stacking context if overlay is inside it */
.modal-file-management-area {
  /* Wrapper for fieldset and its overlay */
  position: relative;
}

/* Create New Tree Modal Styles */
#createNewTreeModal .create-tree-modal-content {
  /* More specific selector */
  max-width: 450px; /* Consistent with node edit modal */
}

#createNewTreeModal .modal-actions {
  margin-top: var(--padding-medium); /* Adjusted from large */
  display: flex;
  justify-content: flex-end;
  gap: var(--padding-small);
}

#createNewTreeModal .modal-actions .hero-button-primary,
#createNewTreeModal .modal-actions .hero-button-secondary {
  width: auto;
  padding: 10px 20px;
  min-width: 120px; /* Added for consistency */
  text-align: center; /* Added for consistency */
}

/* Generic App Modal Styles */
#genericAppModal .generic-modal-content {
  max-width: 450px;
}

#genericAppModal .modal-actions button {
  width: auto;
  padding: 10px 20px;
  min-width: 120px; /* For consistency */
  text-align: center; /* For consistency */
  margin-left: 10px;
}
#genericAppModal .modal-actions button:first-child {
  margin-left: 0;
}

#genericAppModal .modal-actions .modal-button-danger {
  background-color: #e74c3c; /* Red */
  color: white;
}
#genericAppModal .modal-actions .modal-button-danger:hover {
  background-color: #c0392b; /* Darker red */
}

.modal-portal-link {
  color: var(--accent-color-main);
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
}

.modal-portal-link:hover {
  color: #c08a57; /* Darker shade of accent */
  text-decoration: none;
}

/* Styles for signupSuccessModal are largely covered by .modal-overlay and .modal-content */
/* No specific new styles needed if it reuses the existing modal structure and classes */

.family-tree-title-container {
  position: absolute;
  top: 120px; /* Align with controls */
  right: 40px; /* From the edge of family-tree-page */
  z-index: 10;
  background: rgba(
    252,
    245,
    235,
    0.9
  ); /* var(--header-bg) with some transparency */
  padding: 8px 16px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  font-family: var(--font-primary);
  font-size: 1.3rem;
  color: var(--text-primary);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.family-tree-page {
  padding: var(--padding-medium); /* This will apply padding on all sides */
  background-color: var(--primary-bg);
  max-width: none; /* Takes up all available horizontal space */
  margin: 0; /* No auto centering margin */
  position: relative; /* Added for positioning controls */
  display: flex; /* Make it a flex container for its children */
  flex-direction: column; /* Stack title and layout-wrapper vertically */
  flex-grow: 1; /* This ensures it takes available vertical space from its parent */
}

.family-tree-canvas {
  position: relative;
  max-height: 85vh;

  background-color: #fdfbf7;
  padding: var(--padding-small); /* Reduced internal padding */
  border: 1px solid #c5b8a5;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  overflow: auto; /* Changed from auto to hidden for transform-based pan, reverted to auto for scroll-based pan */
  flex-grow: 1; /* Takes up available space */
  flex-basis: 0; /* Allows it to shrink if needed, but grow primarily */
  min-width: 0; /* Allow shrinking below intrinsic width in flex context */
}

#treeContentWrapper {
  position: relative; /* Crucial for absolute positioning of nodes within */
  width: 5000px; /* Large fixed size for scrollable area */
  height: 5000px; /* Large fixed size for scrollable area */
  transform-origin: 0 0; /* Zoom from top-left corner */
  transition: transform 0.1s ease-out; /* Smooth zoom */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent calc(var(--generation-line-spacing) - 1px),
    var(--generation-line-color) calc(var(--generation-line-spacing) - 1px),
    var(--generation-line-color) var(--generation-line-spacing)
  );
  background-size: 100% var(--generation-line-spacing);
}

.family-tree-controls {
  position: absolute; /* Now relative to .family-tree-page */
  top: 40px; /* Changed from 90px */
  left: 40px; /* Changed from 10px */
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center; /* Align items vertically */
  gap: 5px;
}

.family-tree-controls button {
  background-color: var(--accent-color-secondary);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  height: 36px; /* Match typical input height */
  display: inline-flex; /* For aligning icon/text if any */
  align-items: center;
  justify-content: center;
}

.family-tree-controls button:hover {
  background-color: #8aabb3; /* Darker shade of accent-color-secondary */
}

/* Family Tree Search Styles */
#treeSearchInput {
  padding: 7px 10px; /* Adjusted padding to align height with buttons */
  border-radius: 4px;
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  background-color: var(--white);
  color: var(--text-primary);
  height: 36px; /* Match button height */
  box-sizing: border-box;
}

#treeSearchInput:focus {
  outline: none;
  border-color: var(--accent-color-main);
  box-shadow: 0 0 0 2px rgba(212, 163, 115, 0.3); /* Accent color main with alpha */
}

.tree-node-float.searched-node-highlight {
  box-shadow: 0 0 15px 5px var(--accent-color-main);
  border: 2px solid var(--accent-color-main);
  /* transform: scale(1.02); Optional: make it slightly bigger, can affect perceived position for lines */
  z-index: 10; /* Ensure it's on top of other nodes/lines if overlapping */
}

.family-tree-layout-wrapper {
  display: flex;
  gap: var(--padding-small); /* Reduced gap to accommodate button */
  align-items: stretch; /* Make canvas and viewer same height by default */
  margin-top: 0; /* Pushed down to clear absolute controls/title */
  flex-grow: 1; /* Allow this wrapper to grow */
  min-height: 0; /* Important for flex children in a flex column */
}

.json-viewer-container {
  flex-shrink: 0; /* Prevent shrinking by default, width controls size */
  width: 300px; /* Default width */
  min-width: 300px; /* Default min-width */
  background-color: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--padding-medium);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  overflow-y: auto; /* Scroll content if it overflows vertically */

  display: flex;
  flex-direction: column; /* Stack title and pre vertically */
  transition:
    min-width 0.3s ease-in-out,
    width 0.3s ease-in-out,
    padding 0.3s ease-in-out,
    opacity 0.3s ease-in-out,
    margin-left 0.3s ease-in-out;
}

.json-viewer-title {
  font-family: var(--font-primary);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
  padding-bottom: var(--padding-small);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0; /* Prevent title from shrinking */
}

#jsonViewerTextarea {
  white-space: pre;
  word-break: normal;
  font-size: 0.85rem;
  background-color: var(--primary-bg);
  padding: var(--padding-small);
  border-radius: 4px;
  border: 1px solid var(--border-color);
  flex-grow: 1;
  overflow: auto;
  color: var(--text-secondary);
  font-family: "Courier New", Courier, monospace;
  resize: vertical;
  min-height: 150px;
}

#jsonViewerTextarea:focus {
  outline: none;
  border-color: var(--accent-color-main);
  box-shadow: 0 0 0 2px rgba(212, 163, 115, 0.3);
}

.json-viewer-actions {
  margin-top: var(--padding-small);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.json-viewer-actions button {
  width: auto;
  padding: 8px 16px;
}

#toggleJsonViewerBtn {
  flex-shrink: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background-color: var(--accent-color-secondary);
  color: white;
  border: 1px solid var(--accent-color-secondary);
  padding: var(--padding-small) 2px; /* Narrow button */
  border-radius: 4px 0 0 4px; /* Rounded on the left side */
  cursor: pointer;
  font-size: 1rem;
  height: 100px; /* Example height, align as needed */
  align-self: center; /* Center vertically in the gap */
  margin-left: var(--padding-small); /* Space from canvas */
  margin-right: -1px; /* Overlap with viewer border slightly */
  z-index: 1; /* Ensure it's above viewer border if overlapping */
  transition: background-color 0.3s ease;
}

#toggleJsonViewerBtn:hover {
  background-color: #8aabb3; /* Darker shade */
}

.json-viewer-container.collapsed {
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  overflow: hidden;
  border-left: none; /* Hide border when collapsed */
  margin-left: 0; /* Remove margin when collapsed */
}

.json-viewer-container.collapsed > * {
  visibility: hidden; /* Hide children content effectively */
}

.tree-node-float.source-node-for-connection {
  /* Changed class name */
  outline: 2px dashed var(--accent-color-main);
  box-shadow: 0 0 10px var(--accent-color-main); /* Adjusted shadow */
}

.connection-point {
  width: 16px;
  height: 16px;
  background-color: #e0e0e0; /* Lighter grey */
  border: 1px solid #a0a0a0; /* Darker border */
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.connection-point:hover {
  background-color: var(--accent-color-secondary);
  border-color: var(--accent-color-main);
}

.parent-connector {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.child-connector {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.partner-connector-left {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
}

.partner-connector-right {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
}

.connection-point.source-connector {
  background-color: var(--accent-color-main);
  border-color: var(--white);
  box-shadow: 0 0 5px var(--accent-color-main);
}

.tree-node-float {
  position: absolute;
  background-color: var(--header-bg);
  padding: var(--padding-small);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--accent-color-main);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: 180px;
  text-align: center;
  transition: box-shadow 0.2s ease-in-out;
  z-index: 1;
  cursor: grab;
}

.tree-node-float.dragging {
  cursor: grabbing;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.tree-node-float:hover {
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}

.follow-line-btn {
  background-color: var(--accent-color-secondary);
  position: absolute;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 3; /* Above connection points */
  border: 1px solid white;
}

.tree-node-float:hover .follow-line-btn,
.tree-node-float.line-source-node .follow-line-btn {
  display: flex;
}

.follow-line-btn:hover {
  background-color: #8aabb3;
}

.color-picker-palette {
  position: fixed; /* Relative to viewport */
  background-color: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2100; /* Above modal overlay */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.color-swatch {
  width: 25px;
  height: 25px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: transform 0.1s ease;
}

.color-swatch:hover {
  transform: scale(1.1);
  border-color: var(--text-primary);
}

.tree-node-float.line-highlight {
  /* Using a variable to set the color dynamically */
  border: 3px solid var(--line-highlight-color, var(--accent-color-main));
  box-shadow: 0 0 12px var(--line-highlight-color, var(--accent-color-main));
}

.node-name {
  font-weight: bold;
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 4px; /* Reduced margin to make space for dates */
  display: block;
  word-wrap: break-word;
}

.node-actions button {
  background-color: var(--accent-color-main);
  color: var(--white);
  padding: 6px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background-color 0.3s ease;
  margin: 2px;
  border: none;
}

.node-actions button:hover {
  background-color: #c08a57;
}

/* Removed .add-parent-btn and .add-child-btn specific styles as buttons are removed */

.node-actions .edit-info-btn {
  /* Was .add-info-btn, now generic edit */
  background-color: #e67e22;
}
.node-actions .edit-info-btn:hover {
  background-color: #d35400;
}

.node-actions .delete-node-btn {
  background-color: #e74c3c; /* Red for delete */
}
.node-actions .delete-node-btn:hover {
  background-color: #c0392b; /* Darker red */
}

.node-person-dates {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
  margin-bottom: 4px; /* Adjusted margin for locations */
  line-height: 1.3;
}

.node-person-dates div {
  /* Each date line */
  margin-bottom: 1px;
}

.node-person-locations {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
  margin-bottom: 8px; /* Space before actions */
  line-height: 1.3;
}

.node-person-locations div {
  /* Each location line */
  margin-bottom: 1px;
}

.node-portrait-container {
  width: 150px; /* Changed from 180px */
  height: 180px; /* Kept as 180px */
  border-radius: 50%; /* Changed from 8px */
  border: 3px solid var(--accent-color-main);
  margin: 0 auto 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8; /* Light background for the circle area */
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.node-portrait-container img.node-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.node-portrait-container span.node-portrait-unknown {
  font-size: 90px; /* Large question mark */
  color: var(--text-secondary);
  font-family:
    var(--font-primary), serif; /* Use a serif font for '?' if desired */
  font-weight: bold;
  line-height: 1;
  user-select: none; /* Prevent text selection of the question mark */
}

.tree-node-float.placeholder {
  border-style: dashed;
  border-color: var(--accent-color-secondary);
  background-color: #f9f9f9; /* Lighter background for placeholder */
}

.tree-node-float.placeholder .node-name {
  font-style: italic;
  color: var(--text-secondary);
}

#treeLinesSvg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allows clicks to pass through to nodes */
  z-index: 0; /* Behind nodes */
}

.connector-line {
  stroke: var(--text-secondary); /* Updated stroke color */
  stroke-width: 2px;
  fill: none;
}

.partnership-symbol {
  stroke: var(--accent-color-main);
  stroke-width: 1px;
  fill: var(--accent-color-main);
  font-size: 40px;
  font-family: var(--font-primary), serif;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: central;
}

.connection-delete-btn {
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #e74c3c; /* Red */
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5; /* Above lines (0), below nodes (1) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.connection-delete-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.connection-delete-btn:hover {
  transform: scale(1.1);
  background-color: #c0392b; /* Darker red */
}

/* Portal Layout Styles */
.portal-layout {
  display: flex;
  flex-grow: 1; /* Allows portal layout to fill remaining vertical space if #app is flex column */
  background-color: var(
    --primary-bg
  ); /* Match body background or specific portal bg */
  width: 100%; /* Ensure portal layout takes full width of its container */
}

.portal-main-content {
  flex-grow: 1;
  overflow-y: auto; /* Scroll main content if it overflows */
  /* Padding will be handled by .family-tree-page or other content wrappers */
}

.portal-sidebar {
  width: 240px;
  flex-shrink: 0;
  background-color: var(--header-bg);
  padding: var(--padding-medium);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition:
    width 0.3s ease,
    padding 0.3s ease; /* Added transition */
}

.portal-sidebar-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-small) 0;
  margin-bottom: var(--padding-medium);
  border-bottom: 1px solid var(--border-color);
  transition:
    padding 0.3s ease,
    margin-bottom 0.3s ease,
    border-bottom 0.3s ease; /* Added for smooth collapse */
}

.portal-sidebar-logo-container .logo-icon {
  font-size: 1.8rem;
  color: var(--accent-color-main);
  margin-right: 8px;
}

.portal-sidebar-logo-container .logo-text {
  font-family: var(--font-primary);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
}

.portal-sidebar h2 {
  font-family: var(--font-primary);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: var(--padding-medium);
  padding-bottom: var(--padding-small);
  border-bottom: 1px solid var(--border-color);
}

.portal-sidebar .portal-main-nav {
  /* Specific class for the main nav section that grows */
  flex-grow: 1;
}

.portal-sidebar nav ul {
  /* General styles for all navs in sidebar */
  list-style: none;
  padding: 0;
  margin: 0;
}

.portal-sidebar nav > ul > li {
  margin-bottom: var(--padding-small);
}

.portal-sidebar nav > ul > li > a {
  display: flex; /* Changed to flex */
  align-items: center; /* Align icon and text */
  padding: var(--padding-small) var(--padding-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    padding 0.3s ease; /* Added padding transition */
  font-size: 0.95rem;
  white-space: nowrap; /* Prevent text wrapping during transition */
  overflow: hidden; /* Hide text that overflows during transition */
  /* text-overflow: ellipsis; - Removed, might interfere with icon display */
}

.portal-sidebar nav > ul > li > a i {
  margin-right: 10px; /* Space between icon and text */
  font-size: 1.1em; /* Slightly larger icon */
  width: 20px; /* Ensure icon takes up consistent space */
  text-align: center; /* Center icon if it's narrower */
  transition: margin-right 0.3s ease;
}

.portal-sidebar nav > ul > li > a:hover {
  color: var(--accent-color-main);
  background-color: var(--primary-bg);
}

.portal-sidebar nav > ul > li > a.active-portal-link {
  color: var(--accent-color-main);
  background-color: #fbe5d5;
  font-weight: 500;
}

/* Styles for the dynamic list of family trees in the sidebar */
.sidebar-tree-list {
  list-style: none;
  padding-left: 20px; /* Indentation for the list */
  margin-top: 8px;
  margin-bottom: 8px;
  border-left: 2px solid var(--border-color);
  margin-left: 24px; /* Aligns border with the icon area of parent item */
  max-height: 25vh; /* Limit height to prevent long lists from breaking layout */
  overflow-y: auto;
}

.sidebar-tree-list li a {
  display: block;
  padding: 6px 12px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.sidebar-tree-list li a:hover {
  background-color: var(--primary-bg);
  color: var(--accent-color-main);
}

.sidebar-tree-list li a.active-tree-link {
  background-color: var(--primary-bg);
  color: var(--accent-color-main);
  font-weight: 500;
}

.portal-sidebar-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--padding-medium) 0; /* Space above and below */
}

.portal-sidebar-logout {
  display: flex; /* Changed to flex */
  align-items: center; /* Align icon and text */
  justify-content: flex-start; /* Align items to the start by default */
  width: 100%;
  padding: var(--padding-small) var(--padding-medium);
  margin-top: var(--padding-small); /* Adjusted for spacing */
  background-color: var(--accent-color-main);
  color: var(--white);
  border: 1px solid var(--accent-color-main);
  border-radius: 4px;
  text-align: left; /* Changed from center */
  font-size: 0.95rem;
  font-weight: 500;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    padding 0.3s ease; /* Added padding transition */
  white-space: nowrap; /* Prevent text wrapping during transition */
  overflow: hidden; /* Hide text that overflows during transition */
}

.portal-sidebar-logout i {
  margin-right: 10px; /* Space between icon and text */
  font-size: 1.1em; /* Slightly larger icon */
  width: 20px; /* Ensure icon takes up consistent space */
  text-align: center; /* Center icon if it's narrower */
  transition: margin-right 0.3s ease;
}

.portal-sidebar-logout:hover {
  background-color: #c08a57;
  border-color: #c08a57;
}

.portal-sidebar-image-logo {
  height: 45px;
  width: auto;
  display: block;
  margin-right: 10px; /* Added space between image and text */
}

.portal-sidebar-toggle-btn {
  background: var(--accent-color-secondary);
  color: white;
  border: none;
  padding: 8px var(--padding-small);
  width: 100%;
  text-align: center;
  cursor: pointer;
  font-size: 1.2rem; /* Adjusted for icon size */
  font-weight: bold;
  margin-bottom: var(--padding-medium);
  border-radius: 4px;
  transition: background-color 0.3s ease;
  line-height: 1.2; /* Adjusted for better icon vertical centering */
}

.portal-sidebar-toggle-btn:hover {
  background: #8aabb3; /* Darker shade */
}

.portal-sidebar.collapsed {
  width: 60px;
  padding-left: var(--padding-small);
  padding-right: var(--padding-small);
}

.portal-sidebar.collapsed .nav-text,
.portal-sidebar.collapsed .sidebar-tree-list {
  display: none;
}

.portal-sidebar.collapsed .portal-sidebar-image-logo {
  display: none; /* Hide the logo image */
}

.portal-sidebar.collapsed .portal-sidebar-logo-container {
  padding: var(--padding-small) 0; /* Reduce padding */
  margin-bottom: var(--padding-small);
  border-bottom: none; /* Hide border as content is minimal */
  min-height: 30px; /* Example: to maintain some space or for a tiny icon placeholder */
  justify-content: center; /* Center potential tiny icon */
}

.portal-sidebar.collapsed .portal-sidebar-divider {
  display: none;
}

/* Adjust links and logout button for icon-only view */
.portal-sidebar.collapsed .portal-main-nav > ul > li > a,
.portal-sidebar.collapsed .portal-account-nav > ul > li > a {
  padding: var(--padding-small) 0; /* Reduced padding for icon */
  justify-content: center; /* Center icon */
  text-align: center;
}
.portal-sidebar.collapsed .portal-main-nav > ul > li > a i,
.portal-sidebar.collapsed .portal-account-nav > ul > li > a i {
  margin-right: 0; /* Remove margin when collapsed */
  font-size: 1.3em; /* Slightly larger icon when collapsed */
}

.portal-sidebar.collapsed .portal-sidebar-logout {
  padding: var(--padding-small) 0; /* Reduced padding */
  justify-content: center; /* Center icon */
  text-align: center;
}
.portal-sidebar.collapsed .portal-sidebar-logout i {
  margin-right: 0; /* Remove margin when collapsed */
  font-size: 1.3em; /* Slightly larger icon when collapsed */
}

.family-trees-list-page {
  padding: var(--padding-large);
  text-align: center; /* Center title and intro paragraph */
}

.family-trees-list-page h1 {
  font-family: var(--font-primary);
  font-size: 2.2rem; /* Adjust as needed */
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
}

.family-trees-list-page p {
  /* For the intro paragraph */
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: var(--padding-large);
  max-width: 600px; /* Limit width of intro */
  margin-left: auto;
  margin-right: auto;
}

.family-trees-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* Responsive grid */
  gap: var(--padding-medium);
  text-align: left; /* Reset text-align for card content */
}

.tree-card {
  background-color: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--padding-medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column; /* Stack content vertically */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.tree-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.tree-card-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
}

.tree-card-description {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  flex-grow: 1; /* Pushes button to the bottom */
  margin-bottom: var(--padding-medium);
}

.tree-card-actions {
  display: flex;
  justify-content: space-between; /* Align "Open" and "Delete" */
  align-items: center;
  margin-top: auto; /* Pushes actions to the bottom of the card */
  padding-top: var(--padding-medium); /* Space above actions */
  gap: var(--padding-small); /* Space between buttons if side-by-side */
}

.tree-card-actions .tree-card-link {
  /* This is the "Open Tree" button, hero-button-primary is applied in HTML */
  /* No specific margin-top needed here as parent .tree-card-actions handles it */
  flex-grow: 1; /* Allow open button to take more space if needed, or set fixed widths */
}

.tree-card-actions .delete-tree-btn {
  /* hero-button-secondary is applied in HTML for base style */
  /* Additional class .delete-tree-btn-danger for color overrides */
  padding: 10px 15px; /* Slightly smaller padding for a secondary action button */
  font-size: 0.9rem;
  min-width: auto; /* Allow it to be smaller than primary action */
}

.delete-tree-btn-danger {
  /* Specific class for danger styling */
  color: #e74c3c !important;
  border-color: #e74c3c !important;
}
.delete-tree-btn-danger:hover {
  background-color: #e74c3c !important;
  color: var(--white) !important;
  border-color: #e74c3c !important;
}

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px; /* Or adjust as needed */
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.family-trees-list-page {
  padding: var(--padding-large);
  text-align: center; /* Center title and intro paragraph */
}

.family-trees-list-page h1 {
  font-family: var(--font-primary);
  font-size: 2.2rem; /* Adjust as needed */
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
}

.family-trees-list-page p {
  /* For the intro paragraph */
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: var(--padding-large);
  max-width: 600px; /* Limit width of intro */
  margin-left: auto;
  margin-right: auto;
}

.family-trees-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* Responsive grid */
  gap: var(--padding-medium);
  text-align: left; /* Reset text-align for card content */
}

.tree-card {
  background-color: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--padding-medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column; /* Stack content vertically */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.tree-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.tree-card-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: var(--padding-small);
}

.tree-card-description {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  flex-grow: 1; /* Pushes button to the bottom */
  margin-bottom: var(--padding-medium);
}

.tree-card-actions {
  display: flex;
  justify-content: space-between; /* Align "Open" and "Delete" */
  align-items: center;
  margin-top: auto; /* Pushes actions to the bottom of the card */
  padding-top: var(--padding-medium); /* Space above actions */
  gap: var(--padding-small); /* Space between buttons if side-by-side */
}

.tree-card-actions .tree-card-link {
  /* This is the "Open Tree" button, hero-button-primary is applied in HTML */
  /* No specific margin-top needed here as parent .tree-card-actions handles it */
  flex-grow: 1; /* Allow open button to take more space if needed, or set fixed widths */
}

.tree-card-actions .delete-tree-btn {
  /* hero-button-secondary is applied in HTML for base style */
  /* Additional class .delete-tree-btn-danger for color overrides */
  padding: 10px 15px; /* Slightly smaller padding for a secondary action button */
  font-size: 0.9rem;
  min-width: auto; /* Allow it to be smaller than primary action */
}

.delete-tree-btn-danger {
  /* Specific class for danger styling */
  color: #e74c3c !important;
  border-color: #e74c3c !important;
}
.delete-tree-btn-danger:hover {
  background-color: #e74c3c !important;
  color: var(--white) !important;
  border-color: #e74c3c !important;
}

@media (min-width: 993px) {
  /* Applies to screens wider than 992px (desktop) */
  .hero-section {
    max-height: 467px;
    background-size: contain;
    /* 
      Inherits:
      - background-image: url("https://sites.webprompter.ai/laura-site-1/images/hero-banner.png");
      - background-position: center center; (Base style, not overridden by tablet's right center)
      - background-repeat: no-repeat;
      - min-height: 450px;
      
      With background-size: contain and max-height: 467px, the image (1920x720) will be scaled:
      - Its height will not exceed 467px.
      - Its width will be 467px * (1920/720) = 1245.02px. This is less than the requested 1300px max width.
      - The image will be centered within the full-width hero section.
    */
    display: flex;
    align-items: center;
  }
}

.hero-banner-mobile-image {
  display: none; /* Hidden by default, shown in mobile media query */
  width: 100%;
  height: auto;
  margin-top: var(--padding-medium); /* Space between text and image */
}

@media (max-width: 992px) {
  .hero-section {
    background-position: right center; /* Align background to the right */
  }
  .hero-section .container {
    flex-direction: column;
    align-items: flex-start; /* Align text block to the left */
  }
  .hero-text-content {
    padding-right: 0;
    margin-bottom: var(--padding-medium); /* Adjusted spacing */
    width: 100%; /* Make text block full width */
    text-align: left; /* Align text within the block to the left */
  }
  .hero-title-line {
    justify-content: flex-start; /* Align icon and title to the left */
  }
  .hero-image-content img {
    max-width: 80%;
  }
  .hero-section::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    width: 100%;
    opacity: 0.7;
  }
  .illustrations-grid {
    justify-content: center;
  }
  .illustration-item {
    flex-basis: calc(50% - var(--padding-medium));
  }
}

@media (max-width: 768px) {
  .main-header .container {
    /* Default flex properties (row, space-between, align-center) from .main-header .container are fine.
       Height is determined by content (logo and toggle button). */
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .navigation-wrapper {
    display: none; /* Hidden by default on mobile */
    position: absolute;
    top: 100%; /* Position below the header bar */
    left: 0;
    right: 0;
    background-color: var(--header-bg);
    flex-direction: column;
    align-items: center; /* Center items in the dropdown */
    padding: var(--padding-medium);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    z-index: 999; /* Below modals, above page content */
  }

  .navigation-wrapper.active {
    display: flex;
  }

  /* Styles for items INSIDE the active mobile menu */
  .navigation-wrapper.active .main-nav {
    width: 100%;
    margin-top: 0;
  }
  .navigation-wrapper.active .main-nav ul {
    flex-direction: column;
    align-items: stretch; /* Stretch li to full width */
    width: 100%;
    gap: 0;
  }
  .navigation-wrapper.active .main-nav li {
    margin-left: 0;
    margin-bottom: 0; /* Remove bottom margin, use border or padding for spacing */
    width: 100%;
  }
  .navigation-wrapper.active .main-nav a {
    display: block;
    padding: var(--padding-medium) var(--padding-small);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
  }
  .navigation-wrapper.active .main-nav li:last-child a {
    border-bottom: none;
  }

  .navigation-wrapper.active .nav-buttons {
    width: 100%;
    margin-top: var(--padding-medium);
    flex-direction: column;
    align-items: center;
    gap: var(--padding-medium);
  }
  .navigation-wrapper.active .nav-button,
  .navigation-wrapper.active .nav-search-field {
    width: 100%;
    max-width: 300px; /* Max width for better appearance */
    margin-left: 0;
    margin-bottom: 0;
    text-align: center;
  }
  .navigation-wrapper.active .nav-search-field {
    /* Ensure placeholder is visible */
  }
}

@media (max-width: 768px) {
  .hero-section {
    background-image: none; /* Hide desktop background image on mobile */
    /* The min-height from base styles might still apply. If primary-bg is desired for any excess space: */
    /* background-color: var(--primary-bg); */
  }
  .hero-text-content {
    width: 100%; /* Ensure text container takes full available width */
    max-width: 100%; /* Override desktop max-width for mobile */
    text-align: center; /* Center text content */
    margin-bottom: var(--padding-medium); /* Space before mobile image */
  }
  .hero-text-content h1 {
    font-size: 2.5rem;
  }
  .hero-title-line {
    justify-content: center; /* Center icon and title line */
  }
  .hero-title-icon {
    font-size: 2rem;
  }
  .hero-banner-mobile-image {
    display: block; /* Show mobile-specific image */
  }
  .content-section h2 {
    font-size: 2rem;
  }
  .illustration-item {
    flex-basis: 100%;
  }
  .family-tree-page .tree-node {
    margin-left: var(--padding-small);
  }
  .family-tree-page .node-actions button {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  :root {
    --padding-large: 20px;
    --padding-medium: 15px;
  }
  .hero-text-content h1 {
    font-size: 2rem;
  }
  .hero-title-icon {
    font-size: 1.8rem;
  }
  .hero-button-primary,
  .hero-button-secondary {
    width: 100%;
    text-align: center;
  }
  .hero-icon-buttons {
    justify-content: center;
  }
  .modal-content {
    width: 90%;
    padding: var(--padding-medium);
  }
}