:root {
    --primary-color: #0056b3;
    --background-color: #f4f4f4;
    --text-color: #333;
}

/* General Styles */
section {
  padding: 0;
  margin: 0;
  text-align: left;
}

body {
  max-width: min(1000px, 70ch); /* Limits width for readability but caps at 1000px */
  margin: 0 auto; /* Centers content horizontally */
  padding: 1rem; /* Adds breathing room */
  font-family: Arial, sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem); /* Responsive font sizing */
  line-height: 1.6; /* Comfortable line spacing */
  text-align: left; /* Ensures left alignment */
  color: var(--text-color);
  background-color: var(--background-color);
}

/* Headings */
/* --- General/Base Typography & Spacing --- */

/* Default margins for common block elements */
/* This acts as a global baseline for spacing */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, address, blockquote, pre, table, figure, fieldset {
    margin-top: 1em;
    margin-bottom: 1em;
}


/* --- Heading Specific Styles --- */

/* H1 Styles */
h1 {
    font-family: Arial, sans-serif;
    font-size: 3em;
    text-align: left; /* Ensure H1s are left-aligned by default */
    color: var(--primary-color, #333); /* Use fallback color if --primary-color isn't defined */
    /*
        The margins here will override the general 'h1' rule above because this rule is more specific to H1 itself,
        and if this rule appears *after* the general rule in your CSS.
        So, you can remove the generic h1 margin from the top rule if you define it specifically here.
        However, if the general rule is intended as a minimum, keep it.
        For clarity, let's keep specific margins with specific headings.
    */
    margin-top: 1em;
    margin-bottom: 0.5em; /* A slightly smaller bottom margin for H1s */
}

.name {
  color: #222;
}

/* H2, H3, H4 Styles */
h2, h3, h4 {
    font-family: Arial, sans-serif;
    /* Other common styles for H2-H4 could go here, e.g., font-weight, line-height */
}

/* --- Contextual Overrides (e.g., within sidebar, main content) --- */

/* Specific margin for H2s within the main content area */
/* This rule has higher specificity than the general H2 rule,
   and if it comes after it, it will override the bottom margin. */


.content h2 {
    margin-bottom: 20px; /* Adjust this value for space below H2s */
}

.conflict-title {
  font-family: 'Georgia', serif; /* Use a classic, archival-style font */
  text-transform: uppercase;
  letter-spacing: 2px;
  border-left: 8px solid #347383; /* A military olive or navy blue */
  padding-left: 15px;
  margin-bottom: 5px;
}

.service-subtitle {
  font-style: italic;
  color: #666;
  margin-top: 0;
  margin-left: 23px; /* Aligns with the text above, not the border */
}

.larger-text {
  font-size: 1.2em; /* Example for the <big> tag */
}

.bio-section p {
  line-height: 1.75;
}

/* Breadcrumbs for top of page*/
.breadcrumbs {
  font-size: 0.85em; /* Slightly smaller than body text */
  color: #777; /* A muted gray color */
  margin: 10px 20px; /* Add some spacing around the breadcrumbs */
}

.breadcrumbs a {
  color: var(--primary-color); /* Use your primary link color */
  text-decoration: none; /* Remove underlines for a cleaner look */
}

.breadcrumbs a:hover {
  text-decoration: underline; /* Add underline on hover for interaction feedback */
}

.breadcrumbs .current {
  font-weight: bold; /* Optionally bold the current page's name */
  color: #333; /* Use your main text color */
}

/* New Banners as of May 2026 */
/* Banner Section Container */
.person-banner {
display: flex;
    align-items: center;    /* Keeps the name vertically centered with the photo */
    justify-content: flex-start; /* Forces the name to stay close to the image */
    gap: 8px;              /* This is the EXACT distance between image and name */
    padding: 10px 0;
    max-width: fit-content; /* This prevents the banner from stretching across the whole screen */
  text-decoration: none !important;
}

/* The John Thomas Stancil Circle */
.person-banner img {
  width: 60px;  /* Matches the smaller scale in the JPG */
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(100%);
  /* Added a slight shadow to the circle like the original */
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2); 
}

/* The Name - Mimicking the JPG style */
.person-banner .name {
  margin: 0;
    padding: 0;
    line-height: 1;
    text-align: left;  
  font-family: "Arial Narrow", sans-serif; /* Mimics the condensed JPG look */
  font-size: 2.6rem; /* Big and bold */
  font-weight: bold;
  color: #000000; /* Your exact Navy Blue */
  margin: 0;
  letter-spacing: -0.5px; /* Tighter letter spacing like the JPG */
  
  /* THIS IS THE SECRET SAUCE: The Drop Shadow */
  /* This adds the subtle gray lift */
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); 
}

/* Credit */
.credit {
  font-style: italic;
  font-size: 0.75em;
  font-weight: bold;
  display: block;
  margin-top: 15px;
  text-align: right;
  color: #555;
}

*, *::before, *::after {
  box-sizing: border-box; /* Ensures padding/border are included in width */
}

/* Homepage */

/* Center the top photo */
.homepage-top-photo {
  width: 100%;
  max-width: 1000px; /* Adjust this to how wide you want the photo */
  margin: 0 auto 30px auto; /* Centers it and adds space below */
  text-align: center;
}

.homepage-top-photo img {
  width: 100%; /* Tells the image to fill the 1000px container */
  height: auto;
  border: 1px solid #ddd;
}

/* Smaller bio portrait at top of page */

.bio-portrait-wrapper {
  float: right;
  margin: 0 0 20px 20px;
  max-width: 200px;
  text-align: center;
}

.bio-portrait-wrapper img {
  width: 100%;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.bio-portrait-caption {
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  margin-top: 5px;
}

/* Special photo format for middle of page */

.family-crossroads-photo {
  margin: 25px auto;
  max-width: 800px;
  background: #fff;
  padding: 15px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.family-crossroads-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.family-crossroads-caption {
  margin-top: 15px;
  font-family: sans-serif;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.6;
}

.family-crossroads-caption-title {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 5px;
  color: #111;
  text-align: center;
}

.family-crossroads-subcaption {
  display: block;
  text-align: center;
  font-style: italic;
  color: #666;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.family-crossroads-divider {
  border: 0;
  border-top: 1px solid #eee;
  margin-bottom: 10px;
}

.family-crossroads-list {
  margin: 5px 0 0 20px;
  padding: 0;
  color: #555;
}


/* HOMEPAGE LAYOUT  */
/* This keeps your two columns below the photo */
.homepage-layout {
  display: flex;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.homepage-left {
  flex: 1; /* Sidebar takes up about 1/3 */
    border-right: 1px solid #ccc;
}

.homepage-right {
  flex: 2; /* Content takes up about 2/3 */
}

/* Make the headshots sit side-by-side above the text */

.patriarch-heading {
  text-align: center;
  margin-top: 0; /* Keeps it aligned with the top of the Quick Links */
  margin-bottom: 20px;
  border-bottom: 2px solid #004a99; /* Optional: adds a nice underline to match your branding */
  padding-bottom: 10px;
  font-size: 1.5rem;
}

.homepage-featured-ancestors {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.featured-ancestor {
  text-align: center;
  flex: 1;
}

.featured-ancestor img {
  width: 100%;
  max-width: 200px; /* Keeps them from getting too huge */
  border-radius: 4px;
}



/* || Typography */
span.highlight {
  background-color: yellow;
    font-size: 1.05em;
  font-weight: bold;
}

/* Vital stats at top of each biography*/
.vital-stats {
  display: flex;
  flex-wrap: wrap; /* This is the "magic" for mobile-friendliness */
  gap: 15px 30px;
  background-color: #f9f9fb; /* A very light gray-blue to set it apart */
  border-left: 4px solid #3c3987; /* Your signature blue as an accent */
  padding: 15px;
  margin-bottom: 25px;
  font-size: 0.96rem;
  line-height: 1.55;
  border-radius: 0 4px 4px 0;
}

.stats-group strong {
  color: #3c3987;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  display: block; /* Puts the label on its own line for a cleaner look */
}

/* Story highlights -- sometimes used at tops of stories, would be under vital box*/
.story-highlights {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.story-highlights h3 {
  font-size: 1.2em;
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 10px;
}

.story-highlights ul {
  list-style-type: disc;
  padding-left: 20px;
}

.story-highlights li {
  line-height: 1.5;
  margin-bottom: 8px;
}

.story-highlights strong {
  font-weight: bold;
  color: #333;
}

/* FOR REFER AT TOP OF PAGES */
.section-lead {
  margin-top: 30px;
  font-weight: bold;
}


/* Links */
a {
    color: #0056b3; /* A deep blue for readability */
    text-decoration: none; /* Removes the default underline */
    font-weight: bold; /* Makes it stand out */
}

a:hover {
    text-decoration: underline; /* Adds an underline when hovered */
    color: #003366; /* Slightly darker blue for emphasis */
}

.read-more-link {
    text-align: center;
    margin-top: 15px; /* Space above link */
}
.read-more-link a {
    display: inline-block; /* Makes it behave like a block for padding/margin but stays in line */
    padding: 8px 15px;
    background-color: #007bff; /* A nice blue */
  color: white;              /* White text */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}
.read-more-link a:hover {
    background-color: #0056b3;
}

.refer-link {
    text-align: center;
    margin: 20px 0;
}

.refer-link a {
    font-weight: normal;      /* overrides global bold */
    font-size: 18px;
    color: #333;
    text-decoration: none;
}

.refer-link a:hover {
    text-decoration: underline;
}

/* Main-content */
.main-content, .content {
  width: 78%; /* Adjust as needed */
  margin-left: 20px; /* Creates space between sidebar and main content */
  margin-right: 20px; /* Creates space between sidebar and main content */
  padding: 15px; /* Adds internal spacing */
  flex-grow: 1; /* Allows it to take up remaining space */
}

.main-content-area {
  display: flex;
  flex-direction: row; /* Sidebar and text side by side */
  align-items: flex-start; /* Align them to the top */
  margin-top: 20px; /* Add some space above this section */
  margin-left: 20px; /* Adjust as needed for overall layout */
  margin-right: 20px; /* Adjust as needed for overall layout */
}

.main-content-wrapper {
  display: flex;
  flex-direction: row; /* Place main content and sidebar in a row */
  align-items: flex-start; /* Align them to the top */
}

.text-next-to-table {
  flex-grow: 1; /* Allow the text area to take up remaining width */
  padding-left: 0; /* Remove any existing left padding that might not be needed now */
}

.content {
    flex: 1;
    padding: 20px;
}

.content img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* Styles for the large photo within the main content */
.photo-section {
  margin-bottom: 20px; /* Add spacing below the photo section */
}

/* Containers */
/* Adjust the .container margin-left if you haven't already */
.container {
  display: flex;
  flex-direction: row; /* Arrange sidebar and main content horizontally */
  text-align: left;
  align-items: flex-start; /* Align items to the top */
  width: 90%;
  max-width: 1200px; /* Increased max-width for better viewing */
  margin: 20px auto; /* Center the container */
  margin-bottom: 40px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.table-and-text-container {
  display: flex;
  flex-direction: row; /* Items side by side */
  align-items: flex-start; /* Align items to the top */
  margin-bottom: 1em; /* Add some space below this section */
}

.next-to-table { /* New class for the paragraph */
  float: left;
  width: auto; /* Adjust width as needed */
  margin-left: 20px; /* Add some space between the table and text */
}

.text-next-to-table {
  flex-grow: 1; /* Allows the text to take up remaining space */
  padding-left: 15px;
  max-width: 70%;
}

.family-box {
  background-color: #fcfcfc;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin: 20px 0;
}

.family-box ol {
  line-height: 1.6;
}

.family-box li {
  margin-bottom: 12px;
}

/* Images */

.headshot-row {
  display: flex;
  gap: 1rem; /* Adds space between the two headshots */
  flex-wrap: wrap; /* Allows stacking on smaller screens */
  justify-content: flex-start; /* Aligns them to the left */
}

.headshot.obit-photo {
  width: 100%;
  height: auto;
  border-radius: 4px; /* Optional: softens corners */
}

.headshot-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.headshot-right {
  float: right;
  margin: 0 0 15px 20px;
  max-width: 100px;
}

.headshot-left {
  float: left;
  margin: 0 0 15px 20px;
  max-width: 100px;
}

.obit-photo {
  width: 100%;
  height: auto; /* To maintain aspect ratio */
}

.obit-info {
  max-width: 200px; /* Optional: controls figure width */
  width: 90px;
  float: left;
  margin-right: 15px;
  text-align: center;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.obit-info:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.obit-info_2 {
  width: 100px;
  float: right;
  margin-right: 15px;
  text-align: center;
}

.headshot_2 {
  width: 160px;
    float: right;
  height: auto;
  display: block;
  margin: 0 auto 5px auto;
  border-radius: 0;
}

.headshot {
  width: 80px;
  height: auto;
  display: block;
  margin: 0 auto 5px auto;
  border-radius: 0;
}

.obit-name {
  font-weight: bold;
  font-size: 0.85em;
  line-height: 1.2;
  margin-bottom: 2px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.photo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Keeps everything aligned to the left */
max-width: 800px; /* Match the max-width of the .container for alignment */
margin-left: auto; /* Let the left margin be determined by the container */
margin-right: auto; /* Center the photo container */
}

.bio-photo {
  max-width: 150px;     /* or whatever size looked best before */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;   /* optional: softens corners */
}

.main-photo {
width: 100%; /* Make it responsive within its container */
height: auto; /* Maintain aspect ratio */
  display: block; /* Makes sure the image does not cause extra spacing */
  margin: 0; /* Removes extra spacing */
 float: right; /* Changed from left to right */
}



/* Hero Section */
.hero-section {
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: center; /* Center horizontally */
    gap: 30px; /* Space between photo and text */
    padding: 30px 20px;
    background-color: #f8f8f8; /* Light background for the section */
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Soft shadow for depth */
    flex-wrap: wrap; /* Allows content to wrap on smaller screens */
}

.hero-photo {
    width: 200px; /* Fixed size for consistency */
    height: 200px;
    border-radius: 50%; /* Makes the image round */
    object-fit: cover;
    border: 5px solid #fff; /* White border */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Shadow for the photo */
}

.hero-text {
    max-width: 600px; /* Limits width of text for readability */
    text-align: center; /* Center text within its container */
}

.hero-text h1 {
    font-size: 3em; /* Larger, more impactful heading */
    color: #333;
    margin-bottom: 5px;
    font-family: 'Georgia', serif; /* A more elegant font */
}

.hero-text .dates {
    font-size: 1.2em;
    color: #555;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: bold;
}

.hero-text .intro-text {
    font-size: 1.1em;
    line-height: 1.6;
    color: #666;
}

/* Biography content styling */
.biography-content {
    max-width: 900px; /* Max width for main content */
    margin: 0 auto; /* Center the content */
    padding: 0 20px;
    line-height: 1.6;
    color: #333;
    font-family: 'Arial', sans-serif;
}

.biography-content h2 {
    font-size: 2em;
    color: #1a4f72; /* A strong, but not harsh, blue/green */
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-top: 40px;
    margin-bottom: 25px;
    text-align: center;
}

.biography-content p {
    margin-bottom: 1em;
}

/* Quote Block Styling */
.quote-block {
    background-color: #f0f8ff; /* Light blue background */
    border-left: 5px solid #a8d0e6; /* Blue border */
    padding: 15px 25px;
    margin: 30px 0;
    font-style: italic;
    color: #444;
    font-size: 1.1em;
    line-height: 1.5;
}

.quote-block p {
    margin: 0; /* Remove default paragraph margin within blockquote */
}

blockquote {
    font-style: italic;
    border-left: 3px solid #ccc;
    padding-left: 15px;
    margin: 20px 0;
    color: #555;
}

cite {
    display: block;
    font-style: normal;
    font-weight: bold;
    margin-top: 5px;
    color: #3c3987; /* Tying it back to your signature blue */
}

/* List for Tributes */
.biography-content ul {
    list-style-type: disc; /* Or 'none' if you prefer custom icons */
    margin-left: 20px;
    margin-bottom: 20px;
}

.biography-content ul li {
    margin-bottom: 10px;
    font-size: 1.1em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .hero-text h1 {
        font-size: 2.5em;
    }
    .hero-photo {
        width: 150px;
        height: 150px;
    }
}

/* General image styles */

/* --- General Photo Display Styles --- */

.photo-display-extra-large {
  display: block; /* Ensures it behaves like a block element */
  margin: 2em auto; /* Top/bottom margin, and auto left/right for centering */
  border-radius: 25px; /* Optional: Adds rounded corners */
  max-width: 800px; /* Adjust max-width as needed for your images. A percentage like 80% could also work */ 
  margin-left: auto; /* Centers the table if width is less than 100% */

      /* Optional: Add a subtle border or shadow to frame each photo */
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    background-color: #fff; /* White background for the frame */
    padding: 10px; /* Padding inside the border */
}

.photo-display-extra-large img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 8px auto;
}

.photo-display {
    /* To center the entire photo block on the page */
    display: block; /* Ensures it behaves like a block element */
    margin: 2em auto; /* Top/bottom margin, and auto left/right for centering */
    max-width: 600px; /* Adjust max-width as needed for your images. A percentage like 80% could also work */
    
    /* Optional: Add a subtle border or shadow to frame each photo */
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    background-color: #fff; /* White background for the frame */
    padding: 10px; /* Padding inside the border */
}

.photo-display figure {
    margin: 0; /* Remove default browser margin for figure */
    padding: 0; /* Remove default browser padding for figure */
}

.photo-display img {
    max-width: 100%; /* Ensures images never overflow their container */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes extra space below image often caused by inline-block */
    margin: 0 auto 10px auto; /* Centers image within its frame and adds space below */
}

.photo-display figcaption {
    font-family: Arial, sans-serif; /* You can adjust this font */
    font-size: 0.9em; /* Adjust caption font size */
    color: #555; /* Muted color for captions */
    line-height: 1.4; /* Good line spacing */
    text-align: left;
    padding: 0 5px; /* A little padding inside the caption area if needed */
}

.photo-display figcaption p {
    margin: 0 0 5px 0; /* Remove default paragraph margins and add small space below */
    padding: 0;
}

.photo-display .photo-credit {
  font-size: 0.7em;
  color: gray;
  text-align: left;
  margin-top: 5px;
  font-style: italic;
}

/* Medium variation: around 400px */
.photo-display-medium {
  max-width: 400px;
  margin: 2em auto;
  border: 1px solid #ddd;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 10px;
}

.photo-display-medium img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px auto;
}

/* Small variation: around 200px, ideal for sidebars or inline layout */
.photo-display-small {
  max-width: 200px;
  margin: 1em auto;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 8px;
  font-size: 0.85em; /* Optional: slightly smaller font */
}

.photo-display-small img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 8px auto;
}



.photo-placeholder {
  width: 100%;
  max-width: 200px;
  height: 250px;
  background: #e9e9e9;
  border: 1px dashed #bbb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.photo-placeholder-icon {
  font-size: 2rem;
  color: #888;
}

.photo-placeholder-text {
  font-size: 0.8rem;
  color: #666;
  margin-top: 10px;
  line-height: 1.3;
}



/* RECORDS GALLERY */

.records-gallery {
  margin: 30px 0;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.records-gallery h3 {
  margin-bottom: 20px;
}

.records-grid {
  display: grid;
  /* Adjust 250px higher or lower depending on how wide you want document thumbnails to be */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 25px;
}

.document-display {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Keeps download buttons perfectly aligned at the bottom */
}

.document-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid #ddd;
  border-radius: 4px;
}







/* === Archival Gallery Section === */
#document-section {
    margin-top: 40px;
    border-top: 2px solid #eee;
    padding-top: 20px;
}

/* Grid layout */
.document-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Individual document card */
.document-display {
    margin: 0;
    text-align: center;
    flex: 1;
    min-width: 130px;
    max-width: 160px;
}

/* Thumbnail image */
.document-display img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Caption styling */
.document-display figcaption {
    margin-top: 12px;
    font-size: 0.8rem;
    color: #555;
}

.document-caption-text {
    display: block;
    font-weight: bold;
}

.document-credit {
    display: block;
    font-size: 0.7rem;
    color: #777;
    font-style: italic;
}

/* Download link */
.download-button {
    font-size: 0.7rem;
    color: #0066cc;
    text-decoration: none;
}

.download-button:hover {
    text-decoration: underline;
}

.archival-transcription {
  margin-top: 40px;
  border-top: 2px solid #eee;
  padding-top: 20px;
}

.transcription-box {
  background: #fafafa;
  border: 1px solid #ddd;
  padding: 20px;
  line-height: 1.5;
  font-size: 0.95rem;
  color: #444;
  border-radius: 4px;
}


.loss-entry {
  background: #faf8f6;
  padding: 15px 15px 15px 20px;
  border-left: 4px solid #b3a492;
  border-radius: 4px;
}

.loss-entry .name {
  font-family: 'Georgia', serif;
  margin: 0 0 5px 0;
  color: #4a3b32;
  font-size: 1.2rem;
}

.loss-entry .details {
  font-family: 'Georgia', serif;
  font-size: 0.95em;
  color: #555;
  margin: 0;
  line-height: 1.4;
}

.loss-entry .details span {
  font-style: italic;
  font-size: 0.9em;
  color: #777;
}






/* PHOTO GALLERY */

.photo-gallery {
  display: grid;
  /* This automatically calculates how many columns fit based on the screen size */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
}

.gallery-item {
  margin: 0; /* Keeps standard browser margins from pushing the grid wide */
}

.gallery-item img {
  width: 100%;
  max-width: 100%; /* Ensures the image NEVER expands past its grid slot */
  height: auto;
  border-radius: 4px;
  display: block;  /* Removes extra inline whitespace beneath the image */
}

/* For sections where you have two images side-by-side, we'll need a different wrapper */

.family-photos-grid {
    display: flex; /* Use flexbox for side-by-side layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
    justify-content: center; /* Center the items if they don't fill the row */
    gap: 20px; /* Space between the photo blocks */
    margin: 2em auto; /* Center the entire grid container */
    max-width: 900px; /* Adjust max-width for this section if photos are wider */
}

.family-photo-item {
    flex: 1 1 calc(50% - 20px); /* Two columns: each takes 50% minus gap. Adjust 20px for gap */
    min-width: 250px; /* Minimum width before wrapping to single column */
    box-sizing: border-box; /* Include padding and border in width calculation */

    /* Inherit styling similar to photo-display for consistency */
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    background-color: #fff;
    padding: 10px;
    text-align: left;
}

.family-photo-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
}

.family-photo-item h3 { /* For "Doug's family" and "Kathleen's family" headings */
    font-size: 1.2em;
    color: brown; /* From your original col style */
    margin-top: 0;
    margin-bottom: 10px;
}

.family-photo-item figcaption {
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    color: #555;
    line-height: 1.4;
    text-align: left;
    padding: 0 5px;
}

.family-photo-item figcaption p {
    margin: 0 0 5px 0;
    padding: 0;
}

.family-photo-item .photo-credit {
    font-weight: italics;
    font-size: 0.7em; /* Slightly smaller font size */
    color: #888; 
    margin-top: 5px; /* Space above the credit text */
    text-align: left; /* Aligns the credit text to the left */
}

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

.float-img {
    width: 30%;
    max-width: 150px;
    height: auto;
    float: right;
    margin-left: 10px;
}

.image-container {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
}

/* Photo captions */

.photo-caption {
  font-size: 0.9em;
  color: #444;
  margin-top: 0.5em;
  display: block;
  line-height: 1.4;
  text-align: left; /* Ensures caption stays aligned */
  margin: 5px; /* Adds space around the caption */
}

figcaption {
    margin-top: 0.5em;
}

.photo-credit {
  font-size: 0.7em;
  color: #888;
  text-align: left;
  margin-top: 5px;
  font-style: italic;
}

/* This replaces all those old "Photo Tables" */
.main-photo {
    margin: 20px auto;
    max-width: 800px; /* Or whatever width you prefer */
    text-align: center;
}

.main-photo img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1); /* Adds a nice professional touch */
}

.main-photo figcaption {
    font-size: 0.9em;
    color: #666;
    margin-top: 8px;
    font-style: italic;
}

/* Obituary lists at top of obit pages */
.obituary-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 30px; /* row and column spacing */
  padding: 1em;
  max-width: 800px;
  margin: auto;
}

.obituary-list a {
  display: block;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
}

.obituary-list a:hover {
  color: #0055aa;
  border-bottom-color: #0055aa;
}

.lineage-break {
  border: none;
  border-top: 0.95px solid #ccc;
  margin: 1em 0;
  width: 100%;
}

.lineage-link {
  margin-bottom: 1rem;  
  background-color: #fdf6e3;
  padding: 0.5em;
  border-radius: 4px;
  font-size: 0.95em;
  font-family: Georgia, serif;
  text-align: center;
}

/* Obituary */

.obit-photo-table {
  float: left; /* Equivalent to align="left" */
  width: 25%;
  padding: 10px;
  border-spacing: 5px; /* Equivalent to cellspacing */
}

.obit-photo-table-right {
  float: right; /* Equivalent to align="right" */
  width: 25%;
  padding: 10px;
  border-spacing: 5px; /* Equivalent to cellspacing */
}

.obit-entry {
  text-align: center;
  padding: 5px;
}

.name a {
  font-weight: bold;
  color: #0056b3;
  text-decoration: none;
}

.details {
  color: gray;
  font-size: 0.9em;
}

.obituary-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.old-obituary {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  }

  .old-obituary h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
  }

  .old-obituary h2 {
    text-align: center;
    font-size: 18px;
    color: #555;
    margin-bottom: 5px;
  }

  .old-obituary p {
    font-size: 16px;
    line-height: 1.6;
  }
  
.old-obituary img {
    width: 75%;
    display: block;
    margin: auto;
}

/* --- Styles for displaying Newspaper Obituaries --- */

.obit-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

.obituary-display {
    /* Center the entire obituary block */
    display: block; /* Ensures it behaves like a block element */
    margin-left: auto; /* Centers horizontally */
    margin-right: auto; /* Centers horizontally */
    margin-bottom: 2em; /* Space below each obituary block */

    /* Max width to control size and prevent it from stretching too wide */
    max-width: 350px; /* Adjust this value as needed based on your obit image sizes */
    /* If your obits have varying sizes, you might want a percentage like max-width: 40%; */

    /* Add a subtle border or shadow to make it look like a framed article */
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    padding: 10px; /* Padding inside the border */
    background-color: #fff; /* White background for the frame */
    text-align: center; /* Center the image and caption within the figure */
}

.obituary-display img {
    max-width: 100%; /* Ensures the image scales down if the container is smaller */
    height: auto;    /* Maintains aspect ratio */
    display: block;  /* Removes extra space below image often caused by inline-block */
    margin: 0 auto 10px auto; /* Centers image and adds space below it */
}

.obituary-display figcaption {
    font-family: Arial, sans-serif; /* Consistent font for caption */
    font-size: 0.85em; /* Smaller font size for captions */
    color: #555; /* Slightly muted color for caption text */
    line-height: 1.4; /* Improve line spacing */
}

.obituary-display .obit-date {
    display: block; /* Makes the date text go to a new line */
    margin-bottom: 0.2em; /* Small space between date and credit */
    font-weight: bold; /* Make the date stand out a bit */
    color: #333; /* Slightly darker for importance */
}

.obituary-display .obit-credit {
    display: block; /* Makes the credit text go to a new line */
    font-style: italic; /* Italicize the credit */
    font-size: 0.9em; /* Slightly smaller than obit-date */
}

/* Optional: Add hover effect for the link around the image */
.obituary-display a:hover img {
    opacity: 0.8; /* Slightly dim the image on hover */
    transition: opacity 0.3s ease; /* Smooth transition */
}


 /* Styling for the Donell's yield section */

.corn-champions-container {
  margin: 30px auto;
  max-width: 600px;
  text-align: center;
  font-family: inherit;
}
.corn-champions-title {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 20px;
}
.region-sub {
  display: block;
  font-size: 0.9rem;
  color: #666;
  font-weight: normal;
  margin-top: 4px;
}
.stat-cards-wrapper {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap; /* Crucial for mobile responsiveness */
}
.stat-card {
  background: #fdfdfd;
  border: 1px solid #e0e0e0;
  border-top: 3px solid #556b2f; /* A subtle dark olive green agricultural accent color */
  border-radius: 6px;
  padding: 15px;
  min-width: 130px;
  flex: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.stat-year {
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
  color: #666;
  margin-bottom: 5px;
}
.stat-yield {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: #222;
}
.stat-unit {
  display: block;
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


    /* Styling for the nickname section */

    .nickname-list {
  list-style: none;
  padding: 0;
  margin: 15px auto;
  max-width: 700px;
}

.nickname-list li {
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
}

.nickname-list li:last-child {
  border-bottom: none;
}

.nickname {
  font-weight: bold;
  color: #444;
}

.nickname-source {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
  color: #555;
}



    /* Styling for the pallbearers section */

    .pallbearers-list {
  text-align: center;
  margin-bottom: 25px;
}

.pallbearers {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 500px;
}

.pallbearers li {
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
}

.pallbearers li:last-child {
  border-bottom: none;
}

    .pallbearers-container {
        text-align: center;
        margin-bottom: 20px;
    }

    .pallbearers-heading {
        font-size: 22px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .pallbearers-subheading {
        font-size: 16px;
        font-style: italic;
        color: #555;
        margin-bottom: 15px;
    }

   

/* --- Styles for displaying death certificate & tombstone --- */

.record-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2rem 0;
}

.record-image {
  flex: 1 1 300px;
  max-width: 100%;
}

.record-image img {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.record-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #555;
}



/* =========================================
   Unified Document Display (Birth, Marriage, Death)
   ========================================= */

.document-display {
  display: block;
  margin: 2em auto; /* Centers the box */
  max-width: 450px;  /* Slightly wider for readability */
  border: 1px solid #ddd;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  padding: 12px;
  background-color: #fff;
  text-align: center;
}

.document-display img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 12px auto;
  border-bottom: 1px solid #eee; /* Subtle separator */
  padding-bottom: 10px;
}

.document-display figcaption {
  font-family: "Arial Narrow", Arial, sans-serif; /* Matches banner vibe */
  font-size: 0.9em;
  color: #555;
  line-height: 1.4;
}

.document-display .document-caption-text {
  display: block;
  margin-bottom: 0.3em;
  font-weight: bold;
  color: #333;
  font-size: 1.1em;
}

.document-display .document-credit {
  display: block;
  font-style: italic;
  font-size: 0.8em;
  color: #777;
}

/* Updated to your Signature Blue */
.document-display .download-button {
  display: inline-block;
  margin-top: 1.2em;
  padding: 8px 18px;
  background-color: #3c3987; /* YOUR SIGNATURE BLUE */
  color: #fff !important; /* Forces white text */
  text-decoration: none !important;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.document-display .download-button:hover {
  background-color: #2a2862; /* A slightly darker version for hover */
}

/* Subtle hover effect on the document itself */
.document-display a:hover img {
  opacity: 0.9;
}


.timeline-date {
  font-size: 1.25em;
  font-weight: 600;
  color: #2a4b7c; /* deep Air Force blue */
  margin: 30px 0 10px;
  padding-left: 5px;
  border-left: 4px solid #2a4b7c;
  letter-spacing: 0.5px;
}


/* News Page */
.news-archive {
  max-width: 800px;
  margin: 0 auto;
}

.news-intro img {
  display: block;
  margin-bottom: 10px;
}

.news-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.news-list li {
  margin: 0.7em 0;
  line-height: 1.4;
}

.news-list a {
  font-weight: bold;
  color: #0056b3;
  text-decoration: none;
}

.news-list a:hover {
  text-decoration: underline;
}

/* REUSABLE CARD STYLES */

/* === Archival Record Card === */
.archival-record-card {
    background-color: #f9f7f5;
      border: 1px solid #e6dfd5;
    border-left: 5px solid #a69685;
    padding: 20px;
    max-width: 325px;
    margin: 30px 0;
    font-family: 'Georgia', serif;
    color: #333;
    border-radius: 4px; 
}

/* Title */
.archival-record-card h4 {
   font-family: 'Georgia', serif;
  font-size: 1.1rem;  
  margin-top: 0;
    color: #5a4b3e;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid #dcd1c4;
    padding-bottom: 10px;
    font-size: 1.05em;
}

/* Table styling */
.archival-record-card table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #444;
}

.archival-record-card td {
    padding: 6px 0;
}

.archival-record-card table td:first-child {
  font-weight: bold;
  width: 35%;
  padding: 4px 0;
}

.archival-record-card table td:last-child {
  padding: 4px 0;
}

.archival-record-card .record-image {
  display: block;
  max-width: 100%;
  margin: 10px 0 15px 0;
  border: 1px solid #e0d8cf;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 3px;
}

.archival-record-card .record-thumb {
  display: block;
  max-width: 60%;
  margin: 10px auto 15px auto;
  border: 1px solid #e0d8cf;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 3px;
}

/* === Military Archival Record Card === */

.military-record-card {
  background: #fcfbfa;
  border: 1px solid #e6dfd5;
  border-left: 4px solid #556b2f; /* military olive green */
  padding: 15px 18px;
  margin: 25px 0;
  border-radius: 4px;
  max-width: 650px;
}

.military-record-card h4,
.military-record-card h5 {
  font-family: 'Georgia', serif;
  color: #3b3b3b;
  margin: 0 0 10px 0;
}

.military-record-card table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #444;
}

.military-record-card table td:first-child {
  font-weight: bold;
  width: 35%;
  padding: 4px 0;
}

.military-record-card table td:last-child {
  padding: 4px 0;
}

.military-record-card .citation-block {
  background: #f7f4f1;
  border: 1px solid #e0d8cf;
  padding: 10px 12px;
  border-radius: 3px;
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.4;
}

.military-record-card .citation-block strong {
  color: #4a3b32;
}

/* Citation block */
.citation-block {
    margin-top: 20px;
    font-size: 0.8em;
    color: #555;
    background-color: #efedeb;
    padding: 10px;
    border-radius: 3px;

    /* URL handling */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.citation-block p {
    margin: 0;
}

/* Newspaper Article Section */
.newspaper-article {
            background-color: #f9f9f9; /* Light background to make it stand out */
            border: 1px solid #e0e0e0;
            padding: 20px;
            margin: 2em 0;
            font-family: 'Georgia', serif; /* A classic font for newspaper feel */
            line-height: 1.6;
            color: #333;
        }

.newspaper-source {
            font-style: italic;
            color: #555;
            margin-bottom: 1em;
            font-size: 0.95em; /* Slightly larger for readability */
        }

.newspaper-article h3,
.newspaper-article h4,
.newspaper-article h5 {
            font-family: 'Arial', sans-serif; /* Clearer font for headlines */
            font-weight: bold;
            margin-bottom: 0.5em;
            color: #222;
        }

.newspaper-article h3 {
            font-size: 1.8em; /* Main article headline */
            text-align: center;
            margin-top: 0;
            margin-bottom: 0.7em;
        }

        .newspaper-article h4 {
            font-size: 1.4em; /* Sub-headline */
            text-align: center;
            margin-bottom: 0.5em;
        }

        .newspaper-article h5 {
            font-size: 1.1em; /* Another sub-headline */
            text-align: center;
            font-style: italic;
            color: #444;
        }

        .eyewitness-quote {
            border-left: 3px solid #a0a0a0; /* Slightly darker border */
            padding-left: 1.2em; /* More padding */
            margin: 1.5em 0;
            font-style: italic; /* Emphasize the quote */
            color: #444;
              border-left: 2px solid #007bff; /* A colored bar on the left */
}

.eyewitness-quote p {
            margin-bottom: 0; /* Remove extra space below quote text */
}

.eyewitness-quote cite {
            display: block;
            font-size: 0.7em; /* Slightly smaller */
            color: #666; /* Slightly darker */
            margin-top: 0.5em;
            text-align: right; /* Align cite to the right */
            font-style: normal; /* Override italic for cite */
}

.newspaper-credit {
            font-size: 0.7em; /* Slightly smaller */
            color: #555;
            text-align: right;
            margin-top: 1.5em; /* More space above credit */
}

.family-note {
            font-size: 0.7em; /* Consistent with credit */
            color: #777;
            margin-top: 1em;
            background-color: #f0f8ff; /* Light blue background for emphasis */
            padding: 10px;
            border-left: 4px solid #aaddff;
}

.newspaper-article ul {
            list-style-type: none; /* Remove bullet points */
            padding-left: 0;
            margin: 1em 0;
}

.newspaper-article ul li {
            margin-bottom: 0.5em;
}

.newspaper-article ul li b {
            font-size: 1.1em; /* Make names stand out */
}

.memorial-quote {
      background-color: #f4f6f9;
      border-left: 4px solid #1a365d;
      padding: 20px;
      margin: 30px 0;
      font-style: italic;
    }
    .quote-author {
      text-align: right;
      font-weight: bold;
      font-style: normal;
      color: #1a365d;
      margin-top: 10px;
    }

/* Lines */
.line {
            border-bottom: 2px solid #ccc;
            margin-top: 2px;
            width: 50%;
            margin: 1em auto; /* Center the line */
}

.section-divider {
width: 25%;             /* Sets the width */
margin: 2em auto;       /* Adds vertical space and centers it */
border: none;           /* Removes default HR border */
height: 1px;            /* Makes it visible */
background-color: #999; /* A medium gray color */

/* Add other styling for the hr if needed */
}

/* Lists */

.fact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fact-list li {
  padding: 6px 0;
  font-size: 1.1rem;
}

.two-column {
  columns: 2;
  column-gap: 40px;
}

.census-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 20px;
  padding: 10px 0;
  font-size: 1.05rem;
}

.census-grid div {
  padding: 4px 0;
}

ul {
  padding-left: 0;
margin-left: 0;
text-align: left;
  list-style-position: inside;
}

li {
  text-align: left;
}

/* Sidebar */

.sidebar {
  flex: 0 0 20%;
  min-width: 200px; /* ADD THIS: Prevents the sidebar from getting too skinny */
  padding: 1rem;
  background-color: #f8f9fa;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: 15px;
  /* Remove the word-break lines if you want to use the non-breaking hyphen trick */
}

.sidebar h2,
.sidebar h3 {
  margin-top: 0.5em;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.2;
}

.sidebar {
  text-align: left;
}

.sidebar img, .sidebar .bio-photo {
    border-radius: 10px;
  display: block; /* Remove any default inline spacing */
  width: 100%;    /* Make the image take up 100% of its parent's width */
    max-width: 200px;
  height: auto;   /* Maintain the image's aspect ratio */
  object-fit: contain; /* Ensure the image covers the area without distortion (may crop) */
  /* object-fit: contain; /* Alternative: scales the image to fit within the area (may have empty space) */
}

.sidebar figure img {
  width: auto;
  max-width: 150px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar table {
  width: 100%;
}

.sidebar td {
  padding: 8px;
  text-align: left;
}

.sidebar td a {
  color: #0056b3;
  text-decoration: none;
}

.sidebar a {
  color: var(--primary-color);
}

.sidebar th {
  text-align: left;
  padding: 8px;
}

.sidebar .children-heading {
  font-size: 0.8em; 
  font-weight: bold;
  color: #007bff; /* Example: a blue color */
  margin-top: 15px; /* Add some spacing above */
  margin-bottom: 10px; /* Add some spacing below */
  padding: 8px; /* Add some padding around the text */
  background-color: #e9ecef; /* Light gray background */
  border-left: 5px solid #007bff; /* A colored blue bar on the left */
}

.child-entry {
  margin-bottom: 1rem;
  padding-left: 0.5rem;
  border-left: 3px solid #70d5ee;
}
.child-entry .name {
  font-weight: bold;
  font-size: 1rem;
}
.child-entry .details {
  font-size: 0.9rem;
  color: #666;
}

.military-entry {
  margin-bottom: 1rem;
  padding-left: 0.5rem;
  border-left: 3px solid #4b5320;
}
.military-entry .name {
  font-weight: bold;
  font-size: 1rem;
}
.military-entry .details {
  font-size: 0.9rem;
  color: #666;
}

/* --- Tom & Delaney's page styling --- */


/* --- Basic Page Layout / Content Wrapper --- */
.page-title {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 1.5em;
    font-family: 'Georgia', serif; /* Or your preferred heading font */
    color: #333;
}

.content-wrapper {
    max-width: 800px; /* Adjust this value to control the main content width */
    margin: 0 auto; /* Centers the content wrapper on the page */
    padding: 0 20px; /* Adds padding on the sides for smaller screens */
    line-height: 1.6;
    font-family: Arial, sans-serif; /* Your preferred body font */
    color: #444;
}

/* --- Styles for displaying Photos (similar to obituary-display, but generic) --- */
.photo-display {
    display: block;
    margin: 2em auto; /* Centers horizontally and adds space above/below */
    max-width: 450px; /* Default max-width for images. Adjust as needed. */
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    padding: 10px;
    background-color: #fff;
    text-align: center; /* Center the image and caption within the frame */
}

/* Specific styling for the marriage bond photo if it needs to be wider */
.photo-display.featured-photo {
    max-width: 600px; /* Make the marriage bond photo wider */
}

/* Specific styling for the log cabin photo if it needs to be narrower or align differently */
.photo-display.log-cabin-photo {
    max-width: 350px; /* Example: make log cabin photo narrower */
    /* If you wanted it to float right within the text: */
    /* float: right;
    margin-left: 20px;
    margin-bottom: 20px; */
}


.photo-display figure {
    margin: 0; /* Remove default browser margin */
    padding: 0;
}

.photo-display img {
    max-width: 100%; /* Ensures image scales down if container is smaller */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes extra space below image often caused by inline-block */
    margin: 0 auto 10px auto; /* Centers image and adds space below */
}

.photo-display figcaption {
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    color: #555;
    line-height: 1.4;
    text-align: left; 
    padding: 0 5px;
}

.photo-display figcaption p {
    margin: 0 0 5px 0; /* Adjust spacing for paragraphs inside caption */
}

.photo-display .photo-title {
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
    margin-bottom: 0.5em;
}

.photo-display .photo-credit {
    font-style: italic;
    font-size: 0.7em;
    color: #888;
    margin-top: 5px;
}

.photo-caption-title {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 4px;
  color: #222;
}

.photo-caption-subtitle {
  display: block;
  font-size: 0.9em;
  color: #555;
  margin-bottom: 10px;
}

.photo-caption-text {
  display: block;
  margin-bottom: 10px;
  line-height: 1.5;
}


/* Marriage box (specifically on John Archer page) */

.marriage-box {
  background: #fafafa;
  border: 1px solid #ddd;
  padding: 20px;
  margin: 20px 0;
  border-radius: 6px;
}

.marriage-record,
.marriage-ceremony {
  margin-bottom: 20px;
}

.marriage-record h3,
.marriage-ceremony h3 {
  margin-bottom: 10px;
  font-size: 1.2em;
}

.marriage-record-display {
  background-color: #fcfbfa;
  border: 1px solid #e6dfd5;
  border-left: 4px solid #a69685;
  padding: 15px;
  margin: 25px 0;
  max-width: 100%;
  border-radius: 4px;
}

.marriage-record-display figure {
  margin: 0;
}

.marriage-record-display a {
  display: block;
  text-align: center;
}

.marriage-record-display img {
  max-width: 100%;
  height: auto;
  border: 1px solid #eaeaea;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.marriage-record-display figcaption {
  font-family: 'Georgia', serif;
  font-size: 0.85em;
  color: #555;
  margin-top: 10px;
  line-height: 1.4;
}

.marriage-record-display .source {
  display: block;
  font-size: 0.8em;
  color: #888;
  margin-top: 4px;
}


/* Styling for the birth record box */

.birth-record-display {
  background-color: #fcfbfa;
  border: 1px solid #e6dfd5;
border-left: 4px solid #8bbf8f;
  padding: 15px;
  margin: 25px 0;
  max-width: 100%;
  border-radius: 4px;
}

.birth-record-display figure {
  margin: 0;
}

.birth-record-display a {
  display: block;
  text-align: center;
}

.birth-record-display img {
  max-width: 100%;
  height: auto;
  margin-bottom: 8px;
  border: 1px solid #eaeaea;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.birth-record-display figcaption {
  font-family: 'Georgia', serif;
  font-size: 0.85em;
  color: #555;
  margin-top: 10px;
  line-height: 1.4;
}

.birth-record-display .source {
  display: block;
  font-size: 0.8em;
  color: #888;
  margin-top: 4px;
}

/* Birth record card */

.birth-record-card {
  background: #fcfbfa;
  border: 1px solid #e6dfd5;
  border-left: 4px solid #8bbf8f; /* your birth-record green */
  padding: 15px 18px;
  margin: 25px 0;
  border-radius: 4px;
  max-width: 650px;
}

.birth-record-card h4,
.birth-record-card h5 {
  font-family: 'Georgia', serif;
  color: #3b3b3b;
  margin: 0 0 10px 0;
}

.birth-record-card table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  color: #444;
}

.birth-record-card table td:first-child {
  font-weight: bold;
  width: 35%;
  padding: 4px 0;
}

.birth-record-card table td:last-child {
  padding: 4px 0;
}

.birth-record-card .citation-block {
  background: #f7f4f1;
  border: 1px solid #e0d8cf;
  padding: 10px 12px;
  border-radius: 3px;
  font-family: 'Georgia', serif;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.4;
}

.birth-record-card .citation-block strong {
  color: #4a3b32;
}

/* Styling for the biography credit at the bottom */

.biography-credit-main {
    text-align: center;
    margin-top: 3em;
    margin-bottom: 2em;
    font-size: 0.75em;
    color: #666;
}

.biography-credit-main a {
    color: #007bff; /* Example link color */
    text-decoration: none;
}

.biography-credit-main a:hover {
    text-decoration: underline;
}

/* Ensure paragraph spacing is consistent */
.content-wrapper p {
    margin-bottom: 1em; /* Space between paragraphs */
}

.hero-text h1 {
    font-size: 3em; /* Larger, more impactful heading */
    color: #333;
    margin-bottom: 5px;
    font-family: 'Georgia', serif; /* A more elegant font */
}

/* --- In Remembrance Section Styling --- */

.letter-section .newspaper-name {
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 1em;
}

.biography-separator {
    border: none; /* Remove default border */
    border-top: 1px solid #ccc; /* Add a subtle top border */
    margin: 20px 0; /* Space above and below the separator */
}

.letter-section {
    background-color: #f9f9f9; /* Light background to set it apart */
    border: 1px solid #e0e0e0; /* Subtle border around the section */
    border-left: 5px solid #8e44ad; /* A prominent left border for emphasis (purple shade) */
    padding: 20px; /* Internal spacing */
    margin-bottom: 20px; /* Space below the section if followed by other content */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow for a lifted effect */
    border-radius: 5px; /* Slightly rounded corners */
}

.letter-section h3 {
    color: #333; /* Darker color for the heading */
    font-size: 1.4em; /* Slightly larger font for the heading */
    margin-bottom: 15px; /* Space below the heading */
    text-align: center; /* Center the heading */
    font-family: Georgia, serif; /* A more classic font for a "letter" feel */
}

.letter-introduction {
    font-style: italic; /* Italicize the intro */
    color: #555; /* Slightly muted color for the intro */
    margin-bottom: 10px; /* Space below the intro */
}

.letter-body p {
    line-height: 1.6; /* Improve readability for body text */
    margin-bottom: 10px; /* Space between paragraphs in the body */
    color: #333; /* Standard text color */
}

.letter-body p:last-child {
    margin-bottom: 0; /* No extra margin after the last paragraph in the body */
}
/* POEMS */
/* Container for the entire section */
.poem-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 25px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    border-left: 3px solid #70d5ee; /* Clean, modern vertical accent line */
}

/* The title of the poem */
.poem-title {
    font-family: "Georgia", serif;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

/* General poem text block */
.poem-body {
    font-family: "Georgia", serif;
    font-size: 18px;
    line-height: 1.8;
    color: #222;
}

/* Individual stanzas */
.poem-body p {
    margin-bottom: 25px; /* Creates clean spacing between stanzas */
}

/* The credit line underneath */
.poem-credit {
    display: block;
    font-size: 0.75em;
    line-height: 1.5;
    color: #666;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #eee; /* Light separation line */
}

.poem-author {
    font-weight: bold;
    font-style: italic;
    color: #444;
}

.name-variants-box {
  width: 75%;
  margin: 2rem auto;
  padding: 1rem 1.5rem;
  background: #faf7f2;
  border: 1px solid #d8c9a7;
  border-radius: 6px;
}

.name-variants-box h3 {
  text-align: center;
  margin-bottom: 1rem;
  color: #5a2a2a;
}

.name-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #e0d8c8;
}

.name-row:last-child {
  border-bottom: none;
}

.source {
  font-weight: 600;
}

.recorded {
  font-style: italic;
}


/* Family-Contributed Byline Styles */
.family-byline {
  font-style: italic;
  font-size: 0.95rem;
  color: #555;
  border-left: 3px solid #ccc;
  padding-left: 12px;
  margin: 30px 0 20px;
  line-height: 1.5;
}

.family-byline-sub {
  font-style: normal;
  font-size: 0.9rem;
  color: #666;
}

/* Food -- for Recipes -- see recipe-style.css */

.cornbread-highlight {
  background: #f3f6fa;
  border: 1px solid #c7d4e2;
  padding: 20px;
  margin: 30px 0;
  border-radius: 4px;
}

.cornbread-highlight h3 {
  margin-top: 0;
  color: #003366;
  font-size: 1.4rem;
  font-weight: 700;
}

.cornbread-highlight p {
  margin-bottom: 0;
}

.cornbread-highlight h3::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #c7d4e2;
  margin-top: 6px;
  border-radius: 2px;
}




/* Footer */

.footer img {
    width: 100%;
    max-width: 500px;
    height: auto;
}

.footer {
    background-color: #f5f5f5;
    color: #333;
    padding: 20px 10px;
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.footer-column {
    flex: 1;
    padding: 15px;
    text-align: center;
    width: 33%;
    max-width: 400px;
    box-sizing: border-box;
}

.footer-column h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.footer-column a {
    color: var(--primary-color); /* Using the variable */
    text-decoration: none;
}

.footer-column form button {
    background-color: #0056b3; /* Using the specific color */
    color: white;
    cursor: pointer;
}

.footer-column form button:hover {
    background-color: #004494; /* Using the specific color */
}

.footer-note {
  font-size: smaller;
  margin: 5px 0 10px 0;
}

.footer-section nav a {
    text-decoration: none;
    color: #ffffff;
    margin: 0 10px;
}

/* Styling for Obituary Print Buttons */
.print-obit-button {
    background-color: #007bff; /* A nice blue */
  color: #fff;                     /* White text */
  border: none;                    /* Remove default border */
  padding: 0.5em 1em;              /* Comfortable padding */
  font-size: 1.25em;                  /* Readable text size */
  cursor: pointer;                 /* Pointer on hover */
  border-radius: 5px;              /* Rounded corners */
  display: block;                  /* Block-level for centering */
  margin: 15px auto;               /* Center horizontally with spacing */
  min-width: 100px;                /* Prevent tiny buttons */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect */
.print-obit-button:hover {
  background-color: #0056b3;       /* Darker blue on hover */
}

/* Hide buttons in print view */
@media print {
  .print-obit-button {
    display: none;
  }
}

/* --- Styles for Download Buttons --- */
.download-button {
    display: inline-block; /* Makes it behave like a block but sit on one line */
    margin-top: 15px; /* Space above the button */
    padding: 8px 15px; /* Padding inside the button */
    background-color: #007bff; /* A nice blue color for the button */
    color: white; /* White text */
    text-decoration: none; /* Remove underline from link */
    border: none;
    border-radius: 5px; /* Slightly rounded corners */
    cursor: pointer; /* Indicate it's clickable */
    font-size: 0.8em; /* Slightly smaller font than body text */
    font-family: Arial, sans-serif; /* Consistent font */
    transition: background-color 0.5s ease; /* Smooth hover effect */
}

.download-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* If you put the button *inside* the figcaption, you might want to center it: */
.document-display figcaption .download-button {
    display: block; /* Make it a block to take full width and center */
    margin-left: auto;
    margin-right: auto;
}

/* Ads */
.ad {
    margin: 10px auto;
    text-align: center;
}

/* Responsive Design */

@media (max-width: 480px) {
  .photo-gallery {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 600px) {
  img {
    width: 100%;
  }

    .obituary-list {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    flex: none;
    width: 100%;
    order: 2;
    overflow: visible;
    height: auto;
  }

  .sidebar img {
    max-width: 150px;
  }

  .content {
    flex: none;
    width: 100%;
    order: 1;
    padding: 15px;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-column {
    width: 100%;
    margin-bottom: 20px;
    max-width: unset;
  }

  .newsletter iframe {
    height: 250px;
  }

  .bio-table td {
    color: var(--text-color) !important;
  }

  .quick-links-table {
    width: 100%;
    max-width: 300px;
    margin: auto;
  }

  .float-img {
    width: 80%;
    float: none;
    display: block;
    margin: auto;
    max-width: 300px;
  }
}