html, body {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: Calibri, Verdana, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    color: #333;
}

/* --- General Layout & Typography --- */
header {
    background-color: #336699; /* Union blue */
    color: white;
    padding: 20px;
    text-align: center;
	margin-bottom: 0 !important;
}

.header-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

h1, h2, p {
    margin: 0; /* Base margin reset for elements */
    padding: 0;
    text-align: center;
}

/* --- Core Image and Text Styling --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: scale-down;
}

.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Removes any default top margin on the section below the form */
section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Custom fix for the horizontal rule spacing */
.section-divider {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Optional: You can control the thickness/color here too if needed */
    /* border-top: 1px solid #ccc; */
}

/* Removes top margin from the header inside the section */
.centered-content h2 {
    margin-top: 0 !important; 
}

/* === HEADER FONT SIZE DEFINITIONS (Restored) === */
.header-line1 {
    font-size: 2.1rem;
    font-weight: 500;
}

.header-line2 {
    font-size: 2.9rem !important; /* Larger and bolder for the main title */
    font-weight: 700 !important;
}

.header-line3 {
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 4px; /* Adds a bit of elegance to the dates */
    margin-top: 0.3rem;
}

/* ========================================= */
/* === ACTION BOXES SECTION (Restored) ==== */
/* ========================================= */
.action-box {
    background-color: #fff; /* White background */
    padding: 30px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect: Lifts the box up slightly when you put your mouse on it */
.action-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: #336699; 
}

/* Custom highlight style for one action box */
.action-box-highlight {
    /* Softer Blue Background: A pale, inviting blue */
    background-color: #e3f2fd !important; /* light blue */
    
    /* Heavier Border */
    border: 3px solid #1e88e5; /* A strong, medium-blue border */
    
    /* Optional: Add a shadow to make it pop even more */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Custom highlight style for the Celebration action box (Red Scheme) */
.celebration-box-highlight {
    /* Softer Red Background: A pale, inviting pinkish red */
    background-color: #fcebeb !important; /* Very light red/pink */
    
    /* Heavier Red Border */
    border: 3px solid #cc0000; /* Strong red border (matches your h1 color) */
    
    /* Keep the shadow for consistent pop-out effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Ensure the link text stands out against the red background (Optional) */
.celebration-box-highlight .action-link {
    color: #cc0000; /* Make the link text red too */
    font-weight: bold;
}

/* ============================ */
/* 3-Column Homepage Layout FIX */
/* ============================ */
.main-flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 15px;
}

/* Center the Cresswell brothers image specifically */
.left-column img[src*="Cresswell-brothers"] {
    display: block;
    margin: 0 auto 15px auto; /* Centers horizontally and adds vertical space */
}

/* ============================ */
/* 4. Table Styling             */
/* ============================ */
table {
    table-layout: fixed;
    width: 100% !important;
    max-width: 7in;
    border-collapse: collapse;
    margin: 0 auto;
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f0f0f0;
}

/* 3. 'LEARN MORE' BUTTON (Restored) */
.btn-learn-more {
    background-color: #336699; /* Union Blue */
    color: #fff !important;
    padding: 12px 30px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #336699;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
}

.btn-learn-more:hover {
    background-color: #fff;
    color: #336699 !important;
}

/* Styling for the Subscribe Button (Restored) */
.subscribe-btn {
    background-color: #28a745; /* Green */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.subscribe-btn:hover {
    background-color: #218838; /* Darker green on hover */
}

/* --- Aggressive Global Reset for Main Content Container --- */
main { 
    margin-top: 0 !important; 
    margin-bottom: 0 !important; 
	
}

/* === WELCOME BANNER & GAP FIXES === */
main .welcome-banner {
    background-color: #ffffff;
    width: 90%;
    max-width: 600px !important;
    margin: 30px auto 50px auto !important; /* Top margin is now 0, centered, 50px bottom margin */
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-bottom: 5px solid #336699;
    text-align: center;
    position: relative;
    z-index: 100;
    display: block;
}

/* Fix margins inside the Welcome Banner */
main .welcome-banner h1,
main .welcome-banner p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* 📱 RESPONSIVE: MOBILE LAYOUTS 📱 */
@media (max-width: 768px) {
    .main-flex-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px;
        padding: 10px;
    }

    .middle-column,
    .left-column,
    .right-column {
        flex-basis: auto !important;
        width: 100% !important;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
	
	/* Reorder visually using margin trick (works perfectly, no JS needed) */
    .middle-column {
        order: 1;                    
        margin-bottom: 20px;         
    }
    .left-column {
        order: 2;                    
    }
    .right-column {
        order: 3;                    
    }
}

/* ========================================= */
/* === CAROUSEL & SLIDER STYLING (CLEANED) = */
/* ========================================= */

/* 1.1 Carousel Container Sizing & GAP FIX - AGGRESSIVE HEIGHT RESET */
#heroCarousel {
    height: auto !important;
    max-height: unset !important;
    margin-top: 0 !important;            /* ← keep this as the base */
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.5;
    font-size: 1rem;
}

/* 1. ROTATING SLIDER IMAGES - UPDATED FOR 1200x600 ASPECT */
.carousel-item {
    height: 600px; /* Set the new desktop height */
    background-color: #000;
}

.carousel-item img {
    object-fit: cover; /* Ensures 1200x600 image fills the 600px tall box */
    height: 100%;
    width: 100%;
    opacity: 0.9;
}

/* 1.4 Image Wrapper and Image Sizing */
.slide-content-wrapper {
    height: 600px; /* Fixed height for the image area (leaving 200px for caption) */
    position: relative;
    overflow: hidden;
    margin: 0 !important; /* Kills ALL margins on image wrapper */
}

.slide-content-wrapper img {
    object-fit: contain !important;
    height: 100%;
    width: 100%;
}

/* 1.5 NEW CAPTION POSITIONING (Below the Image) */
.carousel-caption-below {
    /* Resets Bootstrap's absolute positioning */
    position: static;
    
    /* Centering and Box Size */
    /* This centers the block element when it's less than 100% width */
    margin-left: auto;
    margin-right: auto;
    
    padding: 10px 20px;
    width: 100%;
    max-width: 600px;

    /* Box Appearance and Gap Fix */
    background: rgba(0, 0, 0, 0.65);
    color: white;
    border-radius: 5px;
    text-align: center;
    
    /* Overlap and Stacking Fix */
    position: relative;
    z-index: 10;
	
	min-height: 100px; 
    
    /* *** CRITICAL FIX HERE: Use the negative value to pull it up *** */
    /* Adjust this value if you want more or less overlap */
    margin-top: -100px; 
}

/* Keep these text rules, they are good for eliminating internal gaps */
.carousel-caption-below p,
.carousel-caption-below h3 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
	line-height: 1.2 !important; /* to fix the height "Sacrifice" slider to make it consistent */
}

/* --- Desktop Menu Taller Text --- */
.navbar-nav .nav-link {
    /* Increase font size for better visibility/readability */
    font-size: 1.15rem; 
    
    /* Increase vertical padding to make the link stand "taller" */
    padding-top: 12px !important; 
    padding-bottom: 12px !important; 
    
    /* Ensure the color is white/light against the dark blue background */
    color: #ffffff !important; 
}

/* --- Final Height Constraint Fix --- */
/* Target the wrapper that holds the horizontal menu */
.navbar-collapse {
    /* Ensures the element does not reserve extra height beyond its content */
    height: fit-content !important; 
}

/* Removes any leftover bottom margin/padding on the main navigation bar */
.navbar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* --- Global Reset for Main Content Position --- */
main {
    margin-top: 0 !important;
    padding-top: 0 !important;


/* Optional: Adjust the spacing (gap) between menu items */
.navbar-nav {
    /* Increase the spacing between menu items on desktop for a more spread-out look */
    gap: 1.5rem !important;
}

@media (max-width: 768px) {
    
    /* 1. Aggressive Global Vertical Resets (Combined) */
    main,
    body,
    #heroCarousel {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 2. Header and Navbar Bottom Margin Reset */
    .site-header,
    .navbar,
    .navbar-expand-lg {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 3. Mobile-Specific Component Adjustments */
    .carousel-caption-below {
        /* Adjusts the overlap of the banner over the slider */
        margin-top: -50px !important;
    }

    .slide-content-wrapper {
        /* Reduces the physical height of the image area on mobile */
        height: 400px !important;
    }
}

/* ============================ */
/* Contact Form Styling         */
/* ============================ */
#contact-form {
    max-width: 600px; /* Limits form width */
    margin: 20px auto; /* Centers the form */
    padding: 25px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Style the labels */
#contact-form label {
    display: block; /* <-- CRITICAL: Forces labels onto their own line */
    margin-bottom: 8px; /* Space below the label */
    font-weight: bold;
    color: #333;
}

/* Style all text input fields and the textarea */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="phone"], 
#contact-form textarea {
    width: 100%; /* <-- CRITICAL: Forces input to span the full width */
    padding: 12px;
    margin-bottom: 15px; /* <-- CRITICAL: Adds vertical space below the field */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    font-size: 1em; 
}

/* === Google Calendar Styling === */
.google-calendar-iframe {
    border: solid 1px #777;
    width: 100%;
    height: 600px;
    frameborder: 0;
    scrolling: no;
}

.calendar-container {
    width: 100%;
}

/* Keep image caption text slightly smaller, but still readable */
.centered-content .caption {
    font-size: 1.1rem;
    font-style: italic;
    color: #555;
    margin-bottom: 15px;
}

/* Keep the special introductory line large */
.larger-text-32 {
    font-size: 1.5rem !important; 
    line-height: 1.4;
}

/* Override the special large paragraph for the introductory line */
.larger-text-32 {
    font-size: 1.5rem !important; /* Make this line pop */
    line-height: 1.4;
}

/* Center image within the middle-column */
.middle-column p img[src*="CurtinAndrew"] {
    display: block;
    margin: 0 auto;
}

/* Center image using the new class */
.middle-column .curtin-img {
    display: block;
    margin: 15px auto; /* Add vertical margin for spacing */
}

/* Ensure the wrapper respects line height for tight grouping */
.text-container.curtin-quote {
    line-height: 1.25;
}

/* Gallery settings */
.left-column h2, 
.right-column h2 {
    font-size: clamp(1.35rem, 2.8vw, 1.65rem) !important;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.left-column a,
.right-column a {
    font-size: clamp(1.2rem, 2.5vw, 1.45rem) !important;
    line-height: 1.45;
}

/* 2. Middle Column: Set general middle content (non-Curtin) to a slightly larger size */
.middle-column p,
.middle-column b,
.middle-column a {
    font-size: 1.2rem !important; /* Slightly larger than side columns */
    line-height: 1.5;
}
/* xxxxx */

/* 3. Curtin Quote: Set the specific quote to the largest size */
.text-container.curtin-quote b {
    font-size: 1.35rem !important; /* Force this text to be the largest and stand out */
    line-height: 1.2;
}

/* 4. Center the Curtin Text (We need to force center on the B tag) */
.text-container.curtin-quote,
.text-container.curtin-quote b {
    text-align: center !important; 
}

/* ============================ */
/* 3-Column Homepage Layout FIX */
/* ============================ */
.main-flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 15px;
}

/* MIDDLE COLUMN: Restore Sizing and Border */
.middle-column {
    flex-basis: 49%; /* Positioning Rule */
    text-align: center;
    border: 4px solid #696969; /* BORDER */
    padding: 25px;
    box-sizing: border-box;
}

/* LEFT and RIGHT COLUMNS: Restore Sizing and Border */
.left-column,
.right-column {
    flex-basis: 23%; /* Positioning Rule */
    text-align: center;
    border: 4px solid #002366; /* BORDER */
    padding: 15px;
    box-sizing: border-box;
}

/* Styling for the central celebration announcement block */
.celebration-announcement {
    /* Border Style */
    border: 4px solid #cc0000; /* Strong red border to match the h1 */
    border-radius: 8px;
    
    /* Box Appearance */
    background-color: #ffffff; /* White background to make the text pop */
    padding: 15px 25px 20px 25px; /* Space inside the border */
    margin: 20px auto 30px auto; /* Space outside the border, centers the box */
    
    /* Sizing */
    max-width: 650px; /* Limits the width for better readability */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adds shadow for depth */
}

/* Cleanup: Remove the extra <br> that caused vertical spacing issues */
.celebration-announcement br:first-child {
    display: none;
}

/* Soft gray highlight box for the opening statement in the middle column */
.middle-column > p:first-of-type {
	background-color: #f5f0e6;        /* warm parchment / aged paper tone */
    border-left: 6px solid #8b6914;   /* deep antique gold accent (looks great with tan) */
    
    /* background-color: #f5f5f5;  */      /* very light gray */
    /* border-left: 6px solid #336699;  */ /* subtle Union-blue accent on the left */
	
	/*	background-color: #f8f9fa; */   /* softer gray look, this line and next */
	/*  border-left: 5px solid #6c757d;  */  /* medium gray accent instead of blue */

    padding: 18px 22px;
    margin: 0 20px 25px 20px;         /* keeps it from touching the column borders */
    border-radius: 6px;
    font-size: 1.35rem !important;    /* optional: make it a touch larger */
    line-height: 1.55;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* === REMOVE THE GAP UNDER THE HORIZONTAL MENU === */
.navbar-dark.bg-navy-compact {
    padding-top: 0.5rem !important;    /* keeps a tiny bit of breathing room on top */
    padding-bottom: 0 !important;      /* ← THIS IS THE GAP KILLER */
    min-height: auto !important;
}

/* NUCLEAR FIX – kill the gap under the navy menu bar once and for all */
nav.navbar.navbar-expand-lg.navbar-dark.bg-navy-compact,
nav.navbar {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;     /* kills any hidden border */
    box-shadow: none !important;       /* kills any shadow that looks like a line */
    min-height: auto !important;
}

/* Make sure the collapse wrapper doesn’t add space either */
.navbar-collapse {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* FINAL – NO MORE GAP UNDER MENU – GUARANTEED */
.site-header {
    padding-bottom: 0 !important;
}

.navbar.navbar-expand-lg {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.bg-navy-compact {
    padding-bottom: 0 !important;
}

/* This is the actual magic line that removes the visible gap */
header .navbar {
    margin-bottom: -1px !important;   /* pulls it up exactly 1 pixel */
}

/* FORCE exact line breaks in the celebration box — no more mid-word wrapping */
.celebration-announcement h2,
.celebration-announcement i {
    white-space: normal !important;        /* allow normal flow */
}

.celebration-announcement h2 br,
.celebration-announcement i br {
    display: block !important;             /* force <br> to act like a real line break */
    content: "" !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Prevent "Pennsylvania" (or any word) from breaking away from the previous line */
.celebration-announcement .nobreak {
    white-space: nowrap !important;
}