/* Basic CSS Reset for consistency */
*, *::before, *::after {
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0; /* Light background */
    color: #333; /* Dark text */
}

header {
    background-color: #a0522d; /* Sienna - Earthy tone, can represent both cultures */
    color: white;
    padding: 20px;
    text-align: center;
}

nav {
    background-color: #d2b48c; /* Tan - Blends well with sienna */
    padding: 10px;
    text-align: center;
}

nav a {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333; /* Dark text for contrast */
}

nav a:hover {
    background-color: #c09563; /* Lighter tan on hover */
}

/* New styles for the main content wrapper */
main {
    max-width: 80%; /* Limits the width of your main content */
    margin: 20px auto; /* Centers the main content horizontally and adds vertical space */
    padding: 20px; /* Adds padding inside the main content area */
}

/* Common styling for main content sections */
.main-content, .person-profile, .parent-couple-profile {
    background-color: white; /* Give content a white background */
    padding: 20px;
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
    margin-bottom: 20px; /* Adds space below the content block */
}

section {
    margin-bottom: 20px; /* Adds space between sections */
}

h1 {
    color: #d2b48c; /* Darker brown for headings */
}

h2, h3 {
    color: #5f3c22; /* Darker brown for headings */
}

/* About Us section using Flexbox for layout (from index.html) */
.about-us .about-content {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    gap: 20px; /* Adds space between the image and the text */
}

.about-us .about-image img {
    width: 250px; /* Fixed width as requested */
    height: auto; /* Maintains the image's aspect ratio */
    display: block; /* Removes any extra space below the image */
    border: 0;
}

.about-us .about-text {
    flex: 1; /* Allows this div to grow and take up available space */
}

/* Contact email styling */
.contact-email, .google-photos-link { /* Apply this style to both email and Google Photos link text */
    color: #a0522d; /* Sienna color */
    font-weight: bold; /* Makes the text bold */
}

/* Styles for Family Tree links and Photo Album links */
.tree-link, .album-link {
    display: inline; /* Keep links inline by default */
    text-decoration: none; /* Remove underline */
    color: #a0522d; /* Sienna color for the links */
    font-weight: bold; /* Bold text for links */
    padding: 0 2px; /* Small horizontal padding for spacing around text */
}

.tree-link:hover, .album-link:hover {
    text-decoration: underline; /* Underline on hover */
    color: #5f3c22; /* Slightly darker on hover */
}

/* Specific styles for `mnt.html` (Image Above Text) */
.person-profile {
    display: flex;
    flex-direction: column; /* Stacks image above details */
    align-items: center; /* Centers items horizontally within the column */
    text-align: center; /* Centers text within details */
}

.person-profile .person-image-container img {
    max-width: 100%; /* Ensure image scales down */
    width: 250px; /* Desired fixed width for images if space allows */
    height: auto;
    display: block; /* Remove extra space below image */
    margin-bottom: 15px; /* Space between image and text */
    border: 0; /* Ensures no default image border */
}

.person-details p {
    margin-bottom: 8px; /* Spacing between detail lines */
    line-height: 1.4; /* Improve readability */
}

.detail-label {
    font-weight: bold;
    color: #5f3c22; /* Darker brown for labels */
}

/* Styles for two-column parent profile (`tbt.html`) */
.parent-couple-profile {
    /* Main container for the two people's profiles */
    /* This will contain the names/photos row and the details grid */
}

/* Section for names and photos - uses Flexbox */
.names-and-photos-row {
    display: flex;
    justify-content: space-around; /* Distribute space evenly */
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 20px; /* Space before details grid */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 20px; /* Space between person info blocks */
}

.person-info {
    text-align: center;
    flex: 1; /* Allows it to take up space */
    min-width: 250px; /* Minimum width before wrapping */
}

/* Ensure the person's name (h3) is always centered */
.person-name {
    color: #660000; /* Original color from <font> tag */
    font-size: 1.4em; /* Larger size for names */
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center; /* Force center alignment for the name */
}

.person-image-container img { /* Applies to both mnt.html and tbt.html images within this container */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px auto; /* Center image and add bottom margin */
    border: 0;
}

/* Styles for details using CSS Grid for precise alignment */
.details-grid-container {
    display: grid;
    /* Define 3 columns: 1 for label, 2 for values */
    grid-template-columns: auto 1fr 1fr; /* auto for label width, 1fr for each person's value */
    gap: 10px 20px; /* Row gap, Column gap */
    align-items: start; /* Align items to the start of their grid areas */
    padding: 0 10px; /* Small padding to prevent text from hitting edges */
    font-size: 0.9em; /* Smaller font size like original */
    color: #000000; /* Black font color like original */
}

.grid-label {
    font-weight: bold;
    color: #5f3c22; /* Darker brown for labels */
    text-align: right; /* Align labels to the right */
}

.grid-value {
    text-align: left; /* Align values to the left */
}

/* Styles for the "Married", "Children", "Back one level" section */
.additional-details-section {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee; /* A subtle separator */
    font-size: 0.9em; /* Match font size */
    color: #000000; /* Match font color */
}

.additional-details-section p {
    margin-bottom: 8px; /* Space between paragraphs */
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery img {
    width: 200px;
    height: auto;
    margin: 10px;
    border: 5px solid white; /* White border for contrast */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

footer {
    background-color: #a0522d; /* Same as header */
    color: white;
    padding: 10px;
    text-align: center;
}

/* Welsh and Vietnamese inspired elements */
.cymru-dragon { /* Example: Welsh Dragon */
  width: 50px;
  height: auto;
  margin-right: 10px;
  vertical-align: middle; /* Align with text */
}
.non-la { /* Example: Vietnamese Conical Hat */
  width: 50px;
  height: auto;
  margin-left: 10px;
  vertical-align: middle; /* Align with text */
}

/* Styles for smaller screens (e.g., phones) */
@media (max-width: 768px) {  /* Adjust 768px as needed for your breakpoints */
    nav a {
        display: block; /* Stack navigation links vertically */
        width: 100%; /* Make them take full width */
        text-align: center; /* Center the text */
        margin: 5px 0; /* Add some spacing */
    }

    main {
        max-width: 95%; /* Adjust main content width for smaller screens */
        padding: 10px;
    }

    /* About Us section specifically for index.html */
    .about-us .about-content {
        flex-direction: column; /* Stack image and text vertically on small screens */
        align-items: center; /* Center stacked items */
    }
    .about-us .about-image img {
        width: 100%; /* Allows image to be responsive within column on small screens */
        max-width: 250px; /* But don't let it grow beyond the desired 250px width */
    }
    .about-text {
        min-width: unset; /* Remove min-width constraint when stacked */
        text-align: center; /* Center text when stacked */
    }

    /* Person profile pages (mnt.html, tbt.html) responsiveness */
    /* All person-related content (image, text) will stack vertically and be centered */
    .person-profile,
    .names-and-photos-row { /* Use this for tbt.html name/photo row */
        flex-direction: column;
        align-items: center;
    }
    .person-info { /* Applies to Terrence/Beryl info blocks */
        min-width: unset; /* Remove min-width when stacked */
    }

    .person-image-container img {
        width: 80%; /* Make images more responsive on small screens */
        max-width: 250px; /* Prevent single images from becoming too large */
    }

    /* For details grid on small screens, stack everything */
    .details-grid-container {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 5px; /* Adjust gap */
    }
    .grid-label, .grid-value {
        text-align: center; /* Center text on small screens */
    }

    .gallery img {
        width: 90%; /* Make images almost full width */
        margin: 10px auto; /* Center the images */
        display: block; /* Important for centering */
    }

    h1 {
        font-size: 1.8em; /* Example: make the main heading smaller */
    }
}

/* Styles for larger screens (e.g., tablets or desktops) */
@media (min-width: 769px) { /* Adjust 769px as needed */
    .gallery img { /* Example: Restore original image size */
        width: 200px;
    }

    /* Ensure mnt.html maintains image above text on larger screens */
    /* No change needed here, it's already flex-direction: column; by default */
    /* and align-items: center; to keep image/text centered over each other */
}