/* Define CSS variables for colors and fonts */
:root {

    --primary-color: #456773; /* Main text and border color */
    --secondary-color: #EDE7EF; /* Background and highlight color */
    --secondary-font-color: #381643;
    --secondary-color-trans: rgba(237, 231, 239, 0.6);
    --font-primary: 'Baskerville-libre', serif; /* Primary font */
    --font-secondary: 'Arial', sans-serif; /* Fallback font */

    /* Dimensions for the arch */
    --arch-width: 2359px; /* Width of the arch */
    --arch-height: 1292px; /* Height of the arch */

    /* Percentages for positioning */
    --header-pct-dist-from-side-of-arch: 22%; /* Header distance from the side of the arch */
    --main-pct-dist-from-side-of-arch: 18%; /* Main content distance from the side of the arch */
    --pct-dist-from-top-of-arch: 0.29; /* Distance from the top of the arch for background positioning */
    --last-updated-bar-height: 39px; /* Height of the last updated bar */  
    --aspect-ratio:  0.54768969902; /* arch-height / arch-width */

    --nav-width-thresh: 1371px;
}

@media (max-width: 1371px) {
    :root {
        --header-bar-height:55px;
    }
}
@media (min-width: 1371px) {
    :root {
        --header-bar-height:0px;
    }
}

html, body {
    height: 100%; /* Ensure the body takes up the full height of the viewport */
    width: 100%; /* Ensure the body takes up the full width of the viewport */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margins */
}

body {
    margin: 0px; /* Remove default browser margins */
    padding: 0;
    width: 100%; /* Ensure the body spans the full width */
    height: 100%; /* Ensure the body spans the full height */
    text-align: center; /* Center block-level elements inside */
    color: var(--primary-color);
    box-sizing: border-box;
    background: url("../images/arch_final.png") no-repeat center top, var(--secondary-color); /* Ensure the image is not repeated */
    background-size: 100% auto; /* Make the image span 100% width and adjust height proportionally */
    background-position: center calc(var(--header-bar-height) + var(--last-updated-bar-height)); /* Move the background down */
    background-color: var(--secondary-color); /* Fallback background color */
    
}

.wrapper {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    min-height: 100vh; /* Ensure the wrapper takes up the full height of the viewport */
}

main {
    position: relative; /* Ensure it stays in the document flow */
    padding: 0;
    margin: 0 auto; /* Center the content initially */
    width: auto; /* Allow dynamic width adjustment */
    margin: 20px;
    margin-left: var(--main-pct-dist-from-side-of-arch); /* Use the main content distance percentage */
    margin-right: var(--main-pct-dist-from-side-of-arch);
    flex: 1; /* Push the footer to the bottom by taking up remaining space */
}

.top-of-content {
    position: relative;
    padding: 0;
    margin: 0;
    height: calc(
        var(--aspect-ratio)
        * var(--pct-dist-from-top-of-arch)
        * 100vw
    );
}

.names-title {
    text-align: center; /* Center-align the text */
    font-family: var(--font-primary); /* Use the primary font */
    font-size: clamp(1rem, 4vw, 3.5rem);
    color: var(--primary-color); /* Set the text color */
    background: none; /* Ensure no background color */
    z-index: 1; /* Ensure it appears above the flower-arch */
    margin: 0 0 0.5vw 0;
    letter-spacing: 0.1em;
}

.nav-names-title {
    text-align: center; /* Center-align the text */
    font-family: var(--font-primary); /* Use the primary font */
    font-size: clamp(1rem, 2vw, 2rem);
    color: var(--primary-color); /* Set the text color */
    background: none; /* Ensure no background color */
    z-index: 1; /* Ensure it appears above the flower-arch */
    margin: 0 0 0.5vw 0;
    letter-spacing: 0.1em;
}

.subtitle {
    text-align: center;
    font-family: var(--font-primary);
    margin: 0 0 0.5vw 0;
    font-size: clamp(0.6rem, 2.2vw, 1.9rem);
}

@font-face {
    font-family: 'Baskerville-libre'; /* A name you choose to use later in your CSS */
    src: url('fonts/LibreBaskerville-Regular.ttf') format('truetype'); /* Path to your font file, relative to the CSS file */
    font-weight: normal; /* Define the weight of this specific font file */
    font-style: normal; /* Define the style of this specific font file */
    font-display: swap; /* Controls how the font renders while loading */
}

.footer {
    text-align: center;
    padding: 1em 0; /* Optional: Add padding */
    display: flex;
    gap: 1em; /* Add spacing between the divs */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}

.footer div {
    display: inline-block; /* Shrink the div to fit its content */
    text-align: center; /* Center-align the text inside the div */
    margin: 0; /* Center the div itself */
}

.footer-flower {
    max-height: 100px;
    width:auto;
    /* width: 50px; Adjust the size of the flower image */
    /* height: auto; Maintain the aspect ratio of the image */
    margin: 0 1em; /* Add horizontal spacing around the image */
}

.footer div:first-child {
    display: flex;
    justify-content: flex-end; /* Align the first flower to the right */
    /* width: 50%; Take up half the footer width */
}

.footer div:last-child {
    display: flex;
    justify-content: flex-start; /* Align the second flower to the left */
    /* width: 50%; Take up half the footer width */
}

.footer div hr {
    width: 120%; /* Slightly wider than the text */
    margin: 0 auto; /* Center the <hr> */
    border: 1px solid var(--primary-color); /* Customize the <hr> style */
    transform: translateX(-10%); /* Adjust the <hr> to center it */
}

.footer h1 {
    font-family: var(--font-primary);
    font-size: clamp(1.4rem, 4vw, 3.5rem);
    margin: 0; /* Remove default margins */
}


.nav-header h1 {
    font-family: var(--font-primary);
    font-size: clamp(1.4rem, 4vw, 3.5rem);
    margin: 0; /* Remove default margins */
}

.nav-header hr {
    width: 100%; /* Slightly wider than the text */
    margin: 0 auto; /* Center the <hr> */
    border: 1px solid var(--primary-color); /* Customize the <hr> style */
    /* transform: translateX(-10%); Adjust the <hr> to center it */
}

.footer h2 {
    font-family: var(--font-primary);
    font-size: clamp(0.6rem, 2.3vw, 2rem);
    margin: 0.1em; /* Remove default margins */
}

p {
    text-align: justify;
}

td {
    text-align: left;
}

a:link {
    color: var(--primary-color); /* Color of an unvisited link */
  }
  
  a:visited {
    color: var(--secondary-font-color); /* Color of a visited link */
  }

table {
    border-collapse: collapse; /* Merges borders into a single line */
    width: 100%;
}
table, th, td {
    border: 1px solid var(--primary-color); /* Sets a 1px solid black border */
    padding: 8px; /* Adds space between content and border */
    text-align: left;
}

.last-updated-bar {
    text-align: center; /* Center the text inside the bar */
    color: var(--secondary-color); /* Set the text color to white for contrast */
    background-color: var(--primary-color); /* Set the background color to teal */
    padding: 10px 0; /* Add padding for better spacing */
    width: 100%; /* Ensure the bar spans the full width of the page */
    box-sizing: border-box; /* Include padding in the width calculation */
    position: relative; /* Ensure it stays in the normal document flow */
}

.flower-container {
    position: relative; /* Make this the positioning context for the title */
    width: 100%; /* Ensure the container spans the full width */
    height: auto; /* Adjust height based on the image */
}

.flower-arch {
    width: 100%; /* Make the image span the full width of the page */
    height: auto; /* Maintain the aspect ratio of the image */
    display: block; /* Ensure the image behaves like a block element */
}

.header-content {
    position: relative; /* Ensure it stays in the document flow */
    padding: 0;
    margin: 0 auto; /* Center the content initially */
    width: auto; /* Allow dynamic width adjustment */
    margin-left: var(--header-pct-dist-from-side-of-arch); /* Use the header distance percentage */
    margin-right: var(--header-pct-dist-from-side-of-arch);
}

.accordion__item__header {
    padding: 10px 50px 10px 10px;
    cursor: pointer;
    position: relative;
    color: var(--primary-color);
    border-top: 1px solid var(--primary-color); /* Only apply a border on the top */
    border-left: none; /* Ensure no border on the left */
    border-right: none; /* Ensure no border on the right */
    border-bottom: none; /* Ensure no border on the bottom */
    transition: color 0.3s ease, transform 0.3s ease; /* Add smooth transitions */
    -webkit-transition: color 0.3s ease, transform 0.3s ease; /* Safari compatibility */
    text-align: left; /* Align text to the left */
}

@media screen and (max-width: 768px) {
    .accordion__item__header {
        border-top: 1px solid var(--primary-color); /* Slightly thicker border for better visibility */
    }
}

.accordion__item__header.active {
    background-color: var(--secondary-color);
    font-weight: bold; /* Make the open question bold */
    transition: color 0.3s ease, transform 0.3s ease; /* Ensure transitions are smooth */
    -webkit-transition: color 0.3s ease, transform 0.3s ease; /* Safari compatibility */
}

.accordion__item__header::before {
    height: 15px;
    width: 15px;
    content: "";
    position: absolute;
    right: 15px;
    top: 15px;
    transition: 0.5s all;
    transform: rotate(45deg);
    border-right: 1.5px solid var(--primary-color);
    border-bottom: 1.5px solid var(--primary-color);
}

.accordion__item__header.active::before {
    transform: rotate(-135deg);
    top: 23px;
    border-right: 2.5px solid var(--primary-color);
    border-bottom: 2.5px solid var(--primary-color);
}

.accordion__item__content {
    overflow-y: auto;
    padding: 10px 20px;
    display: none;
    text-align: left;
}

.our-story-text {
    text-align: justify;
}

.our-story-comment-container {
    display: flex; /* Use flexbox to align items horizontally */
    align-items: flex-start;
    gap: 1rem; /* Add spacing between the image and the text */
    margin-bottom: 1.5rem; /* Add spacing between comment sections */
}

/* Style the images */
.our-story-comment-container img {
    width: 4rem; /* Set a fixed width for the images */
    align-self: flex-start; /* Align the image to the top of the container */
}


/* Style the text */
.our-story-comment-container p {
    flex: 1; /* Allow the text to take up the remaining space */
    font-family: var(--font-primary); /* Use the primary font */
    /* font-size: 1rem; Adjust the font size */
    margin: 0; /* Remove default margins */
    text-align: justify;
}

.our-story-together-img {
    width: min(200px,100%);
    height: auto; /* Maintain the aspect ratio of the image */
    margin: 1.5rem 0; /* Add vertical spacing around the image */
}

.frosted-panel {
    position: fixed;
    top: 0;
    left: -100%; /* Start off-screen */
    width: 33%;/*calc(96px + 27px + 8px);  Adjust width as needed */
    height: 100%;
    background: var(--secondary-color-trans); /* Frosted glass effect */
    backdrop-filter: blur(8px); /* Apply the blur effect */
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2); /* Optional shadow */
    z-index: 1000; /* Ensure it appears above other elements */
    transition: left 0.3s ease; /* Smooth slide-in effect */
    padding: 2rem 1rem; /* Add padding for the links */
    overflow-y: auto; /* Ensure scrolling if content overflows */
    
}

.frosted-panel-top-padding {
    height: 55px;
    transition: height 0.3s ease; /* Smooth transition for height */
}


.frosted-panel.show {
    left: 0; /* Slide in from the left */
}

.navbar-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack links vertically */
    gap: 1rem; /* Add spacing between links */
    white-space: nowrap;
    font-size: clamp(1rem, 2.3vw, 1.4rem);
    /* font-size: clamp(0.6rem, 2.2vw, 1.3rem); */
}


.frosted-panel li {
    text-align: center;
}

.inline-nav li {
    text-align: center;
}

.navbar-links li {
    width: 100%; /* Ensure the <li> spans the full width */
}

.navbar-links a {
    display: block; /* Make the <a> behave like a block element */
    width: 100%; /* Make the <a> span the full width of the <li> */
    text-decoration: none;
    color: var(--primary-color);
    /* font-size: 1.2rem; Adjust font size */
    /* padding: 0.5rem 0; */
    transition: color 0.3s ease; /* Smooth hover effect */

}

.navbar-links a:hover {
   text-decoration: underline;
}

.mobileheaderbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: fit-content;
    background: var(--secondary-color);
    border-bottom: 2px solid var(--primary-color);
    z-index:1050;
    display: flex; /* Makes the container a flex container */
    justify-content: space-between; 
    padding: 0.3rem;
}

.mobileheaderbar-spacing {
    color: transparent;
    z-index: 1049;
    height: 55px;
    display: block;
    border-bottom: 2px solid transparent;
}

.headermnm {
    font-family: var(--font-primary);
    font-size: 1.5em;
    margin: 0; /* Remove default margins */
    padding: 0.5rem 0; /* Add vertical padding */
}

.mobileheader-elem {
    flex: 1; /* Each element takes up equal space */
    display: flex; /* Make each element a flex container */
    align-items: center; /* Center content vertically */
}

.mobileheader-elem:nth-child(2) {
    justify-content: center; /* Center the middle element horizontally */
}

/* Hamburger menu button */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1101; /* Ensure it appears above the frosted panel */
    transition: top 0.3s ease; /* Smooth transition for the top property */
}

.hamburger-menu.active {
    z-index: 1101; /* Keep the hamburger menu above the frosted panel */
}


.hamburger-menu span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: var(--primary-color);
    border-radius: 2px;
    transition: all 0.3s ease; /* Smooth transition */
}

header {
    position: relative; /* Ensure the sticky element is constrained to the header */
    z-index: 1000; /* Ensure the header stays above other elements */
}

/* When toggled, turn into an "X" */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(12.5px)
    rotate(45deg); /* Top bar rotates */
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0; /* Middle bar disappears */
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-12.5px)
    rotate(-45deg); /* Bottom bar rotates */
}



@media (max-width: 1371px) {
    .frosted-panel {
        display: block; /* Enable the frosted panel */
    }
    .inline-nav {
        display: none;
    }
    .mobileheaderbar {
        display: flex;
    }

    .mobileheaderbar-spacing {
        display: block;
    }
}

@media (min-width: 1371px) {
    .hamburger-menu {
        display: none; /* Hide the hamburger menu */
    }

    .frosted-panel {
        display: none; /* Disable the frosted panel */
    }

    .navbar-links {
        display: flex; /* Show the navbar links in a row */
        flex-direction: row; /* Ensure horizontal layout */
        justify-content: center; /* Center the links */
        align-items: center;
        gap: 1rem; /* Add spacing between links */
    }

    .inline-nav {
        display: block;
    }
    .mobileheaderbar {
        display: none;
    }

    .mobileheaderbar-spacing {
        display: none;
    }
}

table {
    width: fit-content;
    /* width: 100%; Make the table span the full width of its container */
    border-collapse: collapse; /* Merge borders into a single line */
    table-layout: auto; /* Allow columns to adjust based on content */
    margin: auto;
}


.masonry-gallery {
  column-count: 3;
  column-gap: 15px;
}

.masonry-gallery img {
  width: 100%;
  display: block;
  margin-bottom: 15px;
  break-inside: avoid;
}
.gallery {
  display: flex;
  gap: 15px;
    width: min(100%, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.gallery-column {
  flex: 1;
}

/* @media (max-width: 900px) {
  .gallery {
    flex-direction: column;
  }
} */


.gal {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 15px;
    align-items: center;
}

@media screen and (max-width: 900px) {
    .threecols {
        display: none;
    }
    .twocols {
        display: none;
    }
        .onecol {
            display: flex;
        }
}

@media screen and (min-width: 901px) and (max-width: 1300px) {
    .threecols {
        display: none;
    }
    .twocols {
        display: flex;
    }
        .onecol {
            display: none;
        }
}

@media screen and (min-width: 1301px) {
    .threecols {
        display: flex;
    }
    .twocols {
        display: none;
    }
        .onecol {
            display: none;
        }
}