@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bellefair&family=Forum&display=swap');
@font-face {
    font-family: 'BDS';
    src: url('fonts/BDScript-Bold.ttf') format('opentype');
}

*, *::before, *::after { 
    box-sizing: border-box; margin: 0; padding: 0; 
}

:root {
    --pink:           #f38fbb;
    --lightpink:      #f8bbd5;
    --whitepink:      #fce2ed;
    --orange:         #f89b4d;
    --lightorange:    #faaa6d;
    --green:          #67be5c;
    --lightgreen:     #8dca7f;
    --turquoise:      #67c8c7;
    --lightturquoise: #8cd2cf;
    /* Banner height scales with screen width so it stays a strip on phones */
    --banner-height:  clamp(110px, 30vw, 400px);
}

html { 
    scroll-behavior: smooth; 
}

.banner-header {
  width: 100vw;         
  height: var(--banner-height);
  overflow: hidden;     
  position: relative;
  background: #ffffff;    
}

.banner-image {
  position: absolute;
  top: 50%;
  left: 50%;  
  width: var(--banner-height);
  height: 100vw;        
  
  transform: translate(-50%, -50%) rotate(-90deg);
  object-fit: cover;   
  object-position: left center; 
}

.banner {
    width:100%;
    height:350px;
    object-fit: cover;
    object-position: 50% 90%;
    display: block;
}

body {
    background-color: var(--whitepink);
    color: var(--text);    
    font-family: 'Bellefair', sans-serif;
}


@media (min-width: 640px) {
    body {
        font-weight: 300;
        overflow-x: hidden;
        position: relative;
        min-height: 100vh;
    }

    /* Side banners: same image, left shows its center, right shows its right side */
    body::before,
    body::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: calc((100vw - clamp(75vw, 1100px, 100vw)) / 2);
        background-image: url('images/banner2.png');
        background-repeat: repeat;
        z-index: -1;
    }

    body::before {
        left: 0;
        background-position: center center;
    }

    body::after {
        right: 0;
        background-position: right center;
    }
}

/* ===== NAVBAR ===== */

.navbar {
    background: var(--pink);
    padding: 0rem 0rem;
}

/* Break out of .site-wrap so the navbar spans the full screen */
@media (min-width: 640px) {
    .navbar {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    /* Keep the buttons within the content column, between the side banners */
    .navbar ul {
        max-width: clamp(75vw, 1100px, 100vw);
    }
}

.navbar ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    gap: 0;
}

.navbar li {
    flex: 1;
}

.navbar a {
    color: black;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    display: block;
    width: 100%;
    text-align: center;
    padding: 1vw 0;
    letter-spacing: .20vw;
    font-family: 'Forum', sans-serif;
}

.navbar a:hover {
    background-color: var(--lightpink);
    transition: background-color 0.2s ease;
}

h1{
    text-align: center;
    padding-top: 2vw;
    padding-bottom: 2vw;
    font-family: 'Bellefair', serif;
    font-size: clamp(1rem, 2.5vw, 2.5rem);
}

.site-wrap {
    max-width: clamp(75vw, 1100px, 100vw);
    margin: 0 auto;
    position: relative;
    z-index: 1; 
    background-color: var(--whitepink);
}

/* ===== HEADER ===== */
.headerbox{
    background-color: var(--lightpink);
    background-image: url('images/keely_javi_logo.png');
    background-size: 30%;
    background-position: center;
    background-repeat: no-repeat;
    height: clamp(10vw, 100px, 200px);     
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.headerbox p{
    font-family: 'Forum', serif;
    font-size: clamp(1rem, 6vw, 5rem);    
}

.headerbox p.line-left {
  text-align: left;
  font-size: clamp(1rem, 1vw, 2rem);
  padding-left: 1vw;  
  padding-top: 0.5vw;
  margin: 0;
}

.headerbox p.line-right {
  text-align: right;
  font-size: clamp(1rem, 1vw, 2rem);
  padding-right: 1vw;
  padding-top: 0.5vw;
  margin: 0;
}

/* ===== INDEX ===== */

.infobox{
    background-color: var(--lightpink);
    text-align: center; 
    padding: 2vw 0;
}

.infobox img {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .navbar a {
        font-size: 3vw;
    }
    .navbar li {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .headerbox p.line-left {
        text-align: left;
        font-size: 2vw;
        padding-left: 1vw;
    }
    .headerbox p.line-right {
        text-align: right;
        font-size: 2vw;
        padding-right: 1vw;
    }
    h1 {
        font-size: 3.5vw;
    }
}

.infobox2{
    background-color: white;
    box-sizing: border-box;
    text-align: center; 
    padding: 5vw 5vw;
    width: 100%;
    height: 100%;
}

.infobox2 p{
    font-family: 'Forum', serif;
    font-size: clamp(1rem, 1.5vw, 1.75rem);    
    text-align: center;
}

.index-left-column {
    min-width: 0;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.index-right-column {
    min-width: 0;
}

/* Photos always fill their column, so they scale with the screen */
.index-right-column img,
.wedding-left-column img {
    display: block;
    width: 100%;
    height: auto;
}

.page-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    align-items: center;
    padding: 0 2.5vw;
}

/* ===== OUR WEDDING ===== */

.wedding-info {
    background-color: var(--whitepink);
    text-align: center;
    /* Side padding grows on wide screens so the text column stays narrow enough to run the length of the photo */
    padding: 2vw max(5vw, calc((100% - 1000px) / 2));
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}
.wedding-info h1 {
    text-align: left;
    font-size: clamp(1rem, 2.5vw, 2.5rem);
    padding-bottom: 1vw;
}

.wedding-info p {
    text-align: left;
}

.wedding-info img {
    float: right;
    margin-left: 2vw;
    width: clamp(25vw, 45vw, 500px);
    height: auto;
}

.note-infobox {
    clear:both;
    margin-top: clamp(5vw, 10vw, 20vw);
    background-color: var(--pink);
    text-align: center;  
}

.note-infobox p {
    font-family: 'Forum', serif;
    font-size: clamp(1.25rem, 2.2vw, 2rem);    
    text-align: center;
    padding-top: 0;
    padding-bottom: clamp(1vw, 2vw, 3vw);
    padding-left: clamp(10vw, 15vw, 20vw);
    padding-right: clamp(10vw, 15vw, 20vw);
}

@media (max-width: 640px) {
    .note-infobox p {
        padding-bottom: clamp(6vw, 8vw, 10vw);
    }
}

.note-infobox h1 {
    font-family: 'BDS', serif;
    font-size: clamp(3rem, 7vw, 10rem);
    text-align: center;
    margin: 0;
    padding: 0;
}

.checkback-infobox {
    background-color: var(--lightpink);
    border: 4px solid var(--pink);
    margin: 2.5vw 5vw 0;
    padding: clamp(1.25rem, 2.5vw, 2.5rem) 5vw;
    text-align: center;
}

.checkback-infobox p {
    font-family: 'Forum', serif;
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    letter-spacing: 0.05em;
}

.checkback-infobox-itinerary {
    background-color: var(--lightpink);
    border: 4px solid var(--pink);
    margin: 2.5vw 3.75vw 0;
    padding: clamp(0.5rem, 0.75vw, 0.75rem);
    text-align: center;
}
/* .cruise-text prefix is needed to beat the 1em bottom margin from ".cruise-text p" */
.cruise-text .checkback-infobox-itinerary p {
    margin: 0;
    font-family: 'Forum', serif;
    font-size: clamp(0.75rem, 1.25vw, 1.25rem);
    letter-spacing: 0.05em;
}

.wedding-page-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    align-items: center;
    padding: 2.5vw 2.5vw 0;
}

.wedding-left-column {
    min-width: 0;
}

.wedding-right-column {
    min-width: 0;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.blue-infobox {
    background-color: var(--lightturquoise);
    text-align: center;        
    width: 65%;
    max-width: 600px;
    padding: 4.5vw;
    border-radius: 30px;
    margin: 2.5vw auto;
}

.left-infobox {
    display: flex;
    justify-content: flex-start;
    background-color: transparent;
    border: 10px solid transparent;
    box-sizing: border-box;      
    width: clamp(210px, 45vw, 500px);
    height: auto;
    aspect-ratio: 2/3;
    overflow: hidden;
    margin: 0 0 0 5vw;
}

.left-infobox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 63% 0%;
}

.page-columns2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    justify-items: center;
    align-items: center;
    margin: 2vw 0;
}

.left-infobox1 {
    background-color: var(--lightorange);
    border: 10px solid transparent;
    width: clamp(210px, 45vw, 500px);
    height: auto;
    border-radius: 30px;
    text-align: left;
}

.left-infobox2 {
    background-color: var(--lightpink);
    border: 10px solid transparent;
    width: clamp(210px, 45vw, 500px);
    height: auto;
    border-radius: 30px;
}

.right-infobox1 {
    background-color: var(--lightturquoise);
    border: 10px solid transparent;
    width: clamp(210px, 45vw, 500px);
    height: auto;
    border-radius: 30px;
}

.right-infobox2 {
    background-color: var(--lightgreen);
    border: 10px solid transparent;
    width: clamp(210px, 45vw, 500px);
    height: auto;
    border-radius: 30px;
}

.right-infobox3 {
    background-color: yellow;
    border: 10px solid transparent;
    width: clamp(210px, 45vw, 500px);
    height: auto;
    border-radius: 30px;
}

.date {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    text-align: left;
}

.location {

}

.description {

}

.times {
    
}

.hexagon {
    width: 400px;
    height: 555px;
    background-color: var(--lightpink);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    margin: 0 auto;

}

/* ===== CRUISE ===== */

.cruise-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
    align-items: center;
    padding: 0 5vw;
}

/* No page heading above the columns, so they need their own top spacing */
.navbar + .cruise-columns {
    padding-top: 2vw;
}

.cruise-image {
    min-width: 0;
    aspect-ratio: 2/3;
    overflow: hidden;
}

.cruise-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 63% 0%;
}

.cruise-text {
    min-width: 0;
    font-size: clamp(1rem, 1.75vw, 1.75rem);
}

.cruise-text p {
    margin-bottom: 1em;
    text-align: center;
}

.cruise-textblock {
    background-color: white;
    margin: 3vw 5vw 0;
    padding: 3vw 4vw;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.cruise-textblock h1,
.itinerary-block h1 {
    font-family: 'BDS', serif;
    font-size: clamp(3rem, 3.5vw, 5.25rem);
    text-align: center;
    margin: 0;
    padding: 0;
}

/* ===== ITINERARY ===== */

.itinerary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    margin-top: 3vw;
    padding: 0 5vw;
}

.itinerary-block {
    min-width: 0;
    background-color: white;
    padding: 2vw 3vw;
    padding-top: 0vw;
}

@media (max-width: 640px) {
    .itinerary-grid {
        grid-template-columns: 1fr;
    }
}

.cruise-textblock p + p {
    margin-top: 1em;
}

/* Same look as .checkback-infobox */
.cruise-button {
    display: block;
    width: fit-content;
    margin: 2vw auto 0;
    padding: clamp(0.75rem, 1.2vw, 1.1rem) clamp(1.5rem, 3vw, 2.75rem);
    background-color: var(--lightpink);
    border: 4px solid var(--pink);
    color: black;
    text-decoration: none;
    text-align: center;
    font-family: 'Forum', sans-serif;
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    letter-spacing: 0.1em;
    transition: background-color 0.2s ease;
}

.cruise-button:hover {
    background-color: var(--pink);
}

@media (max-width: 640px) {
    .cruise-columns {
        grid-template-columns: 1fr;
    }
}

/* ===== OUR STORY ===== */

.story-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
    align-items: center;
    padding: 0 5vw;
}

.story-block + .story-block {
    margin-top: 3vw;
}

.story-photo {
    min-width: 0;
}

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

.story-text {
    min-width: 0;
    font-size: clamp(1rem, 1.75vw, 1.75rem);
    text-align: center;
}

.story-text p + p {
    margin-top: 1em;
}

/* Used together with .cruise-textblock, which supplies the white box and script heading */
.memoriam-block {
    text-align: center;
}

/* Same markup as the left version; this just moves the photo to the second column */
.story-photo-right .story-photo {
    order: 2;
}

@media (max-width: 640px) {
    .story-block {
        grid-template-columns: 1fr;
    }

    .story-block + .story-block {
        margin-top: 10vw;
    }

    /* Stacked: photo always sits above its text */
    .story-photo-right .story-photo {
        order: 0;
    }
}

/* ===== RSVP ===== */

.rsvp-block {
    background-color: white;
    max-width: 700px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 4vw, 4rem);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

@media (max-width: 740px) {
    .rsvp-block {
        margin: 0 5vw;
    }
}

.rsvp-block > p {
    text-align: center;
    margin-bottom: 2em;
}

.rsvp-block > ul {
    padding-left: 1.5em;
    margin-bottom: 2em;
}

.rsvp-label {
    display: block;
    font-family: 'Forum', serif;
    letter-spacing: 0.1em;
    margin-bottom: 0.5em;
}

.rsvp-names {
    width: 100%;
    padding: 0.6em 0.8em;
    margin-bottom: 2em;
    border: 2px solid var(--lightpink);
    border-radius: 10px;
    font: inherit;
}

.rsvp-names:focus {
    outline: none;
    border-color: var(--pink);
}

.rsvp-options {
    border: none;
}

.rsvp-option {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.8em 1em;
    margin-bottom: 0.8em;
    background-color: var(--whitepink);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.rsvp-option:hover {
    background-color: var(--lightpink);
}

.rsvp-option:has(input:checked) {
    background-color: var(--lightpink);
    border-color: var(--pink);
}

.rsvp-option input {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    accent-color: var(--pink);
}

.rsvp-submit {
    display: block;
    margin: 2em auto 0;
    padding: 0.8em 2.5em;
    background-color: var(--pink);
    border: none;
    border-radius: 30px;
    color: black;
    font-family: 'Forum', sans-serif;
    font-size: inherit;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.rsvp-submit:hover {
    background-color: var(--lightpink);
}

.rsvp-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.rsvp-error {
    text-align: center;
    margin-top: 1em;
}

.rsvp-block > .rsvp-thanks {
    font-family: 'Forum', serif;
    font-size: 1.3em;
    margin-bottom: 0;
}

footer {
    text-align: center;
    padding: 1.5vw 0.5vw;
    background: var(--lightpink);
    color: black;
    font-family: 'Forum', serif;
    font-size: clamp(0.7rem, 0.8vw, 0.9rem);
    letter-spacing: 0.15em;
    margin-top: 3vw;
}

@media (max-width: 640px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .gallery-grid .tall { grid-row: span 1; }
}