/* --- 1. GLOBAL RESET --- */
*, *::before, *::after {
	box-sizing: border-box;
}

a, 
a:link, 
a:visited, 
a:hover, 
a:active {
  color: inherit;
}

html, body, p, h1, h2, h3 {
	margin: 0;
	padding: 0;
	color: #454140;
}

body {
	position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 1000;
	overflow-x: hidden; 
}

/* --- 2. LAYOUT CONTAINERS (The Hybrid Approach) --- */
.content-wrapper {
	width: 80%; 
	max-width: 65rem; /* Acts as the ceiling for ultrawide monitors */
	margin: 0 auto;
	padding: 0 5%; /* Creates the fluid 90% effect on mobile */
}

/* --- 3. TYPOGRAPHY --- */
h1 {
	font-size: 3rem;
	margin-bottom: 0.5rem;
}

h2 {
	font-size: 2rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

p {
	line-height: 1.6;
	margin-bottom: 1rem;
	font-size: 1.25rem;
}

#weddingheading h1 {
	font-size: 10rem;
}

/* --- 4. MEDIA QUERIES (Locked to px for reliable breakpoints) --- */
@media only screen and (min-width: 781px) {	
	#weddingheading {
		background-image: url("JessFC_LOGO/JessFC_banner_notext.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 100vh;
	}
}

/* --- 5. SECTIONS --- */
#weddingheading {
	position: fixed;
	z-index: -99;
	top: 0;
	width: 100%; 
	
	display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center;
}

#FCNJ {
	/* display: flex;
	gap: 0.7rem;
	justify-content: center;
	align-items: center; */
	font-size: 4rem;
	/* font-weight: 800;
	padding-top: 15%; */
}

#FCNJ h1 {
	margin-bottom: 0;
}

#subtext {
	margin-top: -10rem; 
	transform: translateX(-1rem);
}

#dress-code {
	text-align: center;
	background-color: white;
	min-height: 50vh;
	padding: 4rem 0; 
	
	/* 1. Add your images (e.g., sage leaves or floral graphics) */
	background-image: url("JessFC_LOGO/blomme_JessFC.png"), url("JessFC_LOGO/blomme_JessFC2.png");
	
	/* 2. Pin one to the left edge, one to the right edge, both centered vertically */
	background-position: left center, right center;
	
	/* 3. Stop them from tiling */
	background-repeat: no-repeat, no-repeat;
	
	/* 4. Set their size (e.g., taking up 15% of the screen width each) */
	background-size: 30vw auto, 30vw auto;
}

#accommodation-details {
	text-align: center;
	padding: 4rem 0 0 0;
	overflow: hidden;
}

#registry-container {
	text-align: center;
	background-color: white;
	min-height: 50vh;
}

/* --- 6. SVG CURVES (Locked to px to prevent sub-pixel gaps) --- */
.curved-separator {
	width: 100%;
	height: 100px; 
	display: block;
}

#top {
	margin-top: 100vh;
}
	
#flip {
	transform: scaleY(-1);
	margin-bottom: -100px;
	fill: #FFFFFF; 
}

/* --- 7. COLORS & SHAPES --- */
.gradient-text {
    /* 1. Set the gradient direction and your specific colors */
    background: linear-gradient(to right, rgb(130, 163, 122), rgb(204, 140, 115));
    
    /* 2. Clip the background to the text */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Make the actual text fill transparent to reveal the gradient */
    -webkit-text-fill-color: transparent;
    color: transparent; 
	padding: 1em 1em; 
    line-height: 1.2;
}

.green {
	background-color: rgb(101,139,88);
}

.green p {
	color: rgb(255, 255, 240);
}

.green .gradient-text {
    /* 1. Set the gradient direction and your specific colors */
    background: linear-gradient(to right, rgb(255, 255, 240), rgb(204, 140, 115));
	
	-webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Make the actual text fill transparent to reveal the gradient */
    -webkit-text-fill-color: transparent;
    color: transparent; 
	padding: 1em 1em; 
    line-height: 1.2;
}

.pink {
	background-color: rgb(194,126,101);
}

.pink p {
	color: rgb(255, 255, 240);
}

.pink .gradient-text {
    /* 1. Set the gradient direction and your specific colors */
    background: linear-gradient(to right, rgb(255, 255, 240), rgb(130, 163, 122));
	
	-webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Make the actual text fill transparent to reveal the gradient */
    -webkit-text-fill-color: transparent;
    color: transparent; 
	padding: 1em 1em; 
    line-height: 1.2;
}

.dot {
	height: 15rem;
	width: 15rem;
	border-radius: 50%;
	border: 1px solid black;
	display: inline-block;
	margin: 0 2%;
}

#dot-container {
	padding: 2%;
}

#footer {
	width: 100%;
	background-color: rgb(255, 255, 240);
	margin: 0;
	text-align: center;
}

#footer .content {
	margin: 0;
	padding: 2rem;
	font-size: 0.95rem;
	line-height: 1.2;
}
/* --- 8. RSVP SHAPES --- */
#top-gn {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
	z-index: 10;
	height: 100%;
	min-height: 20vh;
}

#bottom-pk {
	margin-top: -5rem;
}

#body-pk {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

#head-bar {
    display: flex;             /* Use Flexbox */
    align-items: center;       /* Centers items vertically */
    justify-content: space-between; /* Pushes logo left, links right */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    background-color: rgba(101, 139, 88, 0.7);
}

#logo-left img {
    height: 3.5rem;              /* Control logo size */
    width: auto;
}

#header-right {
    display: flex;             /* Makes the links flex items */
    gap: 0.5rem;                 /* Proper spacing between links */
}

/* Remove floats and simplify link styling */
#head-bar a {
    display: inline-block;     /* Forces the browser to respect the padding height */
    text-decoration: none;
    border-radius: 1rem;
    padding: 0.75rem 1.25rem;  /* Generous vertical and horizontal padding */
    color: white;
    transition: all 0.3s ease;
	font-weight: bold;
}

#head-bar a:hover {
    background-color: rgb(80, 115, 68); 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(101, 139, 88, 0.4); 
}

/* --- 9. MOBILE RESPONSIVE LAYOUT (max-width: 780px) --- */
@media only screen and (max-width: 780px) {
    /* Stack the header to fit logo and links */
    #head-bar {
        flex-direction: column;
        height: auto;
        padding: 0.5rem 0;
        background-color: rgb(101, 139, 88); /* Solid background for legibility */
    }
    
    #logo-left img {
        height: 2.5rem;
        margin-bottom: 0.5rem;
    }
    
    #header-right {
        gap: 0.25rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    #head-bar a {
        padding: 0.5rem;
        font-size: 0.95rem;
    }

/* Bring the hero section into the document flow and add the mobile banner */
    #weddingheading {
        position: relative; 
        z-index: 1; 
        width: 100vw; 
        aspect-ratio: 1 / 1.4; 
        background-image: url("JessFC_LOGO/JessFC_bannerphone_notext.jpg");
        background-size: 100% auto; 
        background-position: center top; 
        background-repeat: no-repeat;
        height: auto; 
        display: flex; 
        flex-direction: column; 
        justify-content: flex-start; 
        padding-top: 10rem; /* Clears the stacked header */
        top: 0; 
        margin-top: 0;
        clip-path: polygon(0 0, 100% 0, 100% 92%, 0% 100%);
    }
    
    #weddingheading h1 {
        font-size: 4rem; /* Reduced from 10rem */
        padding-top: 1rem;
    }
    
    #subtext {
        font-size: 1.5rem;
        margin-top: 0;
        transform: none;
        padding: 0 1rem;
    }
    #weddingheading h1 {
	font-size: 4rem;
	margin-top: 30%;
}
    
    #subtext {
        font-size: 1.5rem;
        margin-top: 0;
        transform: none;
        padding: 0 1rem;
    }

    /* Standardize general text and padding sizes */
    h1 { font-size: 2.2rem; }
    h2.subheading { font-size: 1.6rem; }
    p.content { font-size: 1.1rem; }
    
    .content-wrapper {
        width: 100%;
        padding: 0 1.5rem;
    }

#dress-code {
        padding: 3rem 0;
        /* Pin the images to the top, offset by the 3rem padding so they sit next to the H1 */
        background-position: left top 3rem, right top 3rem; 
        /* Shrink them slightly more so they don't overlap the heading text */
        background-size: 25vw auto, 25vw auto; 
    }

    /* Shrink the massive color dots to fit side-by-side on narrow screens */
    .dot {
        height: 5rem;
        width: 5rem;
        margin: 0.5rem;
    }

    /* Compress the SVG curves and colored blocks */
   /* Compress the SVG curves and remove the massive desktop gap */
    .curved-separator {
        height: 30px; /* Slims down the curve height */
    }
    
    #top {
        margin-top: -1rem; /* Overrides the 100vh gap and tucks it under the banner */
        position: relative;
        z-index: 2;
    }
    
    #flip {
        margin-bottom: -30px; /* Matches the new height */
    }

    #top-gn {
        min-height: 10vh;
    }
    
    #bottom-pk {
        margin-top: -2rem;
    }
    
    #body-pk {
        padding-bottom: 3rem;
    }
}