@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --font-main:  'Playfair Display', serif;
  --font-heading:
  --accent: #b9975b;
  --bg:  #fbf3e6;
  --text: #0d1219;
  --green: #164221;
  --rsvp: #0d1219;
  --font-p: 1.2rem;
  --font-h4: 2.0rem;
  --font-button: 1.15rem;
  --font-clamp: clamp(2.5rem, 5vw + 1rem, 6rem);
  

}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-main);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-weight: 400;
}
h4{
  text-transform: uppercase;
  font-size: var(--font-h4);
}
p {
  font-size: var(--font-p);
}

/* Hero Section */
header.hero {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--text);
  padding: 1rem 1rem;
}
.hero-text {
  transform: translateY(-2.5rem); 
}

header.hero-image {
  height: 80vh;     
  margin: 0 auto;   
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url('images/cover.webp') center/cover no-repeat;
  padding: 1rem;
}

.hero-cta {

  display: flex;
  justify-content: center;
  margin: 6rem 2rem;        
}

.btn-rsvp {
  display: inline-block;
  padding: 0.85rem 2.25rem;
  font-family: var(--font-main);
  font-size: var(--font-button);
  font-weight: 600;
  text-decoration: none;
  color: white;
  background: var(--rsvp);
  /* border-radius: 8px; */
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  transition: background 0.2s ease, transform 0.1s ease;
}

.btn-rsvp:hover {
  background: #a07e45;
  transform: translateY(-2px);
}

header.hero h1 {
  font-size: var(--font-clamp);
  font-weight: 100;
  letter-spacing: 6px;
  text-transform: uppercase;
}
footer.hero{
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

footer.hero h1 {
  font-size: var(--font-clamp);
  font-weight: 100;
  letter-spacing: 6px;
  text-transform: uppercase;
}


header.hero p {
  /* font-size: 1.25rem; */
  font-weight: 500;
}
header.hero nav {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
header.hero nav a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s;
}
header.hero nav a:hover {
  opacity: 0.9;
}

.welcome-message {
  text-align: center;
  font-style: italic;
  font-weight: 400;
}

/* Schedule Blocks */
.schedule-block {
  padding: 2rem 1rem;
  text-align: center;
  font-family: var(--font-main);
  /* font-size: 1.2rem; */
  max-width: 800px;
  margin: 0 auto;
  /* border-bottom: 1px solid #ddd; */
}


.schedule-block.row-pair{
  display:grid;
  grid-template-columns: 110px 1fr; 
  column-gap:.75rem;
  width:100%;         
  margin:0 auto;     
  text-align:left;
  /* padding-left: 10%; */
  padding-right: 10%;
}

.schedule-block.row-pair {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: calc(var(--i, 0) * 250ms);
}

.schedule-block.row-pair.in-view {
  opacity: 1;
  transform: translateY(0);
}

.schedule-block h4 {
  /* font-size: 2.0rem; */
  font-weight: 500;
  color: var(--green);
  margin-bottom: 0.25rem;
}
.schedule-block p {
  margin-bottom: 0.5rem;
}

.schedule-block.with-image {
  display:flex; gap:1.75rem; align-items:flex-start;
  align-items: flex-start;      
  gap: 1.75rem;                  
  max-width: 1000px;
  position: relative;               
}

.schedule-block.with-image-left {
  position: relative;                
  max-width: 1000px;                 
}

.schedule-block.with-image-left .block-image {
  position: absolute;
  right: 100%;                    
  margin-right: 2rem;               
  width: 160px;
  height: auto;
  padding-bottom: 30%;
}


.schedule-block.row-pair p {
  margin: 0;
}

.venue-block.with-image {
  position: relative;       
}

.venue-block.with-image .block-image {
  position: absolute;
  left: 100%;              
  margin-left: 2rem;       
  width: 160px;
  height: auto;
}

.venue-block.with-image-left {
  position: relative;        
}

.venue-block.with-image-left .block-image {
  position: absolute;
  right: 100%;               
  width: 160px;
  height: auto;
}

.schedule-block.with-image .block-image {
  position: absolute;
  left: 100%;                       
  top: 0;
  margin-left: 2rem; 
  width: 160px;
  height: auto;
}

.winespacer{
  padding-bottom: 30%;
}


.block-text {
  flex: 1 1 0;
}
.block-text h3 {
  text-align: left;
}


.block-image {
  flex: 0 0 160px;             
  max-width: 160px;
  height: auto;
}

.celebrate {
  padding: 10rem 1rem;
  text-align: center;
  font-family: var(--font-main);
  /* font-size: 1.2rem; */
  max-width: 800px;
  margin: 0 auto;
}

.celebrate h4 {
  /* font-size: 2.0rem; */
  font-weight: 500;
  color: var(--green);
  margin-bottom: 0.25rem;
}

main {
  overflow-x: hidden;
}
section.panel {
  padding-left:1rem;
  padding-right:1rem;
  padding-top: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 80vw;  
  margin-inline: auto;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: calc(var(--i) * 250ms);
}
section.panel.in-view {
  opacity: 1;
  transform: translateY(0);
}
section.panel:nth-of-type(even) {
  /* background: #6b9f81; */
  background: var(--bg);
  /* color: white; */
  color: black;

}

/* Headings */
/* h2 {
  font-family: var(--font-main);
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
  font-weight: 500;
  text-align: center;
  color: var(--accent);
  letter-spacing: 2px;
  margin-bottom: 1rem;
  text-transform: uppercase;
} */

#rsvp-form {
  display: grid;
  grid-template-columns: 0.5fr 5fr;
  gap: 1.5rem;
  margin: 2rem auto;
  padding: 2rem;
  background: #08313a;
  /* border-radius: 12px; */
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  border: 1px solid #e0e0e0;
  white-space: nowrap;
}

#rsvp-form label {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  color: #fbf3e6;
}

input {
  font-family: var(--font-main);
  /* font-size: 1.1rem; */
  padding: 0.75rem;
  width: 100%;
  max-width: 100%;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  /* border-radius: 6px; */
  background-color: #fff;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}

#rsvp-form button {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 0.75rem 2rem;
  background: var(--accent);
  color: white;
  border: none;
  /* border-radius: 6px; */
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#rsvp-form button:hover {
  background: #a07e45;
  transform: translateY(-1px);
}

section.panel #rsvp {
 --text: #fbf3e6;
}

#form-response {
  grid-column: 1 / -1;
  margin-top: 1rem;
  font-style: italic;
  color: #fbf3e6;

} 

#guest-names {
  display: contents;
} 

/* Utility */
.hidden {
  display: block;
}

.schedule-block.logistics {
  padding: 2.5rem 1.5rem;    /* a little extra vertical breathing room */
}

.schedule-block.logistics h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
}

.schedule-block.logistics p {
  margin-bottom: 1rem;
  line-height: 1.7;
  text-align: left;
}

/* Style the airports list */
.schedule-block.logistics ul {
  list-style: none;
  margin-left: 1vw; 
  padding-left: 0;
}

.schedule-block.logistics ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  text-align: left;
  line-height: 1.6;
  /* font-size: 1.1rem; */
}

.schedule-block ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  text-align: left;
}


/* colored bullet via ::marker (modern browsers) */
.schedule-block.logistics ul li::marker {
  color: var(--accent);
  /* font-size: 1.3rem; */
  content: '•';
}

.scroll-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--bg);  backdrop-filter: blur(8px);
  display: flex;
  justify-content: space-between; 
  align-items: center;
  flex-wrap: nowrap;
  padding: 0.5rem 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  z-index: 999;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.scroll-nav.show {
  transform: translateY(0);
  opacity: 1;
}

.scroll-nav a {
  flex: 1 1 0%;               
  text-align: center;
  padding: 1rem 0.5rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}

.scroll-nav a:hover {
  border-color: var(--accent);
}

.scroll-nav::before,
.scroll-nav::after {
  content: "";
  flex: 0 0 60px;
  height: 60px;
  background: url('images/hearts.png') center/contain no-repeat;
  margin: 0 0.5rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 1rem;                      
  max-width: 800px;
  margin: 0 auto;               
  padding: 10rem 1rem;
}

.photo-grid img {
  width: 100%;
  height: auto;
  /* border-radius: 0.5rem;         */
  object-fit: cover;
}


.hearts {

  margin: 0 auto;
  display: flex;
  justify-content: center; 
}

.hearts img {
  
  display: block;
  max-width: 100%;
  height: auto;
}
.katie {

  margin: 0 auto;
  display: flex;
  justify-content: center; 
}

.katie img {
  
  display: block;
  width: 200px;
  height: auto;
}

.venue-header {
  padding: 2rem 1rem;
  text-align: center;
  font-family: var(--font-main);
  /* font-size: 1.2rem; */
  max-width: 800px;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
}
.venue-header h4 {
  /* font-size: 2.0rem; */
  font-weight: 500;
  color: var(--green);
  margin-bottom: 0.25rem;
}
.venue-block {
  padding: 2rem 1rem;
  font-family: var(--font-main);
  /* font-size: 1.2rem; */
  max-width: 800px;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
}
.venue-block h4 {
  /* font-size: 2.0rem; */
  font-weight: 500;
  color: var(--green);
  margin-bottom: 0.25rem;
  text-align: left;
}
.venue-block a {
  margin-bottom: 0.5rem;
  color: black;
}

.venue-block ul {
  list-style: none;
  margin-left: 0; 
  padding-top: 1vh;
  padding-left: 2vw;
}

.venue-block ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.venue-block ul li::marker {
  color: var(--accent);
  /* font-size: 1.3rem; */
  content: '•';
}

section.table{
  padding: 6rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
 

}

.guest-block,
#form-response,
#rsvp-form button {
  grid-column: 1 / -1; 
}

.guest-block {
  /* layout */
  display: grid;
  grid-template-columns:
  minmax(140px, 1.3fr)
  minmax(120px, 1fr)
  repeat(3, minmax(110px, 1fr));
  gap: 1rem;
  align-items: center;

  /* visual */
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.25rem;
  background: #08313a;
  /* border-radius: 6px; */
  overflow: hidden;
}

/* headings & general text colour */
.guest-block legend,
.guest-block label,
.guest-block .q,
.guest-block .q p,
.guest-block .radio-wrap label {
  color: #fbf3e6;
  font-size: .95rem;
}

/* legend styling */
.guest-block legend {
  grid-column: 1 / -1;
  margin: 0 0 .5rem 0;
  font-weight: 600;
}

.guest-block label span { 
  margin-bottom: .25rem; 
}

.guest-block label span {
  white-space: nowrap;     
  overflow: hidden;       
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%; 
}
.guest-block input[type=text] { width: 100%; }

.guest-block .q {
  display: flex;
  flex-direction: column;   
  justify-content: center;
}

.guest-block .radio-wrap {
  display: flex;
  flex-direction: row;
  gap: .75rem;
  flex-wrap: nowrap;           
}

.guest-block .radio-wrap label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.guest-block input[type=radio] {
  transform: scale(0.9);
}

.guest-block .q p {
  margin: 0 0 .35rem 0;        
  line-height: 1.35;
  word-break: break-word;     
}

.guest-block {
  grid-template-columns:
    minmax(160px, 1.0fr)      /* Name */
    minmax(200px, 1.4fr)   /* Dietary */
    repeat(3, minmax(100px, 1fr));  /* Questions */
}

.guest-block > .q {
  
  align-items: center;      
  text-align: center;      
}

.guest-block .radio-wrap {
  justify-content: center;  
}

.guest-block select {
  max-width: 100%;
  width: 100%;
  font-family: var(--font-main);
  font-size: 0.95rem;
  padding: 0.5rem;
  box-sizing: border-box;
}




/* ─────────────────────────────────────────────────────────────
   1.  PHONE  ( ≤ 640 px )
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ▸ mobile-menu toggle button */
  .mobile-menu-btn{
    position:fixed; top:.5rem; left:.5rem; z-index:1001;
    display:flex; flex-direction:column; align-items:center; gap:.2rem;
    background:transparent; border:0; padding:0; cursor:pointer;
  }
  .mobile-menu-btn img{width:36px;height:36px}
  .mobile-menu-btn span{
    font-family:var(--font-main); font-size:.7rem; letter-spacing:1px;
    text-transform:uppercase; color:var(--text);
  }

  /* ▸ off-canvas nav */
  .scroll-nav{
    position:fixed; inset:0 auto 0 0;
    display:flex; flex-direction:column; align-items:flex-start;
    width:75vw; max-width:300px; height:100vh;
    padding:4rem 1.5rem 2rem;
    background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
    transform:translateX(-100%); opacity:0;
    transition:transform .3s ease,opacity .3s ease;
    box-shadow:4px 0 10px rgba(0,0,0,.12);
  }
  .scroll-nav.open{transform:translateX(0);opacity:1}
  .scroll-nav a{width:100%;padding:.75rem 0;font-size:1.15rem;text-align:left;border:none}
  .scroll-nav::before,.scroll-nav::after{display:none}

  /* ▸ disable desktop “show” class */
  .scroll-nav.show{transform:translateX(-100%)!important;opacity:0!important}

  /* ▸ RSVP card – no side scroll, full width */
  .rsvp-scroll{width:100%;overflow-x:visible;padding:1rem 0;background:#08313a;
               border:1px solid #e0e0e0;box-shadow:0 8px 20px rgb(0 0 0 /12%)}

  #rsvp-form{display:block;width:100%;padding:0 1rem;white-space:normal;
             background:transparent;border:0;box-shadow:none}

  /* guests / email stack */
  #rsvp-form>label:nth-of-type(1) input{max-width:8ch}

  /* guest-block tweaks */
  .guest-block{display:grid;grid-template-columns:1fr;row-gap:1rem}

  .guest-block>label:nth-of-type(1),
  .guest-block>label:nth-of-type(2){max-width:100%;justify-self:start}

  /* question rows: Prompt | Yes | No */
  .guest-block .q{
    display:grid;grid-template-columns:1fr auto auto;
    align-items:center;column-gap:.75rem;margin:.5rem 0;text-align:left}
  .guest-block .radio-wrap{display:contents}
  .guest-block .radio-wrap label{display:inline-flex;align-items:center;gap:4px}

}
#rsvp-form button{
    display:block;       
    margin:1.25rem auto 0;
    border:2px solid #fff;
    box-shadow:0 0 0 1px #fff;  
  }

/* hide toggle button on bigger screens */
@media (min-width:641px){.mobile-menu-btn{display:none}}

/* ─────────────────────────────────────────────────────────────
   2.  SMALL TABLET  ( 641 px – 1000 px )
   ───────────────────────────────────────────────────────────── */
@media (max-width:1000px) {

  /* ▸ keep off-canvas nav behaviour */
  .scroll-nav.show{transform:translateX(-100%)!important;opacity:0!important}
  .scroll-nav.open{transform:translateX(0)!important;opacity:1!important;
                   background:var(--bg);padding-top:15vh;width:auto}

  .guest-block>label:nth-of-type(1),
  .guest-block>label:nth-of-type(2){
    grid-column:1/-1;max-width:100%;justify-self:start;margin:0}

  #rsvp-form>label:nth-of-type(1),
  #rsvp-form>label:nth-of-type(2){grid-column:1/-1}
  #rsvp-form>label:nth-of-type(1) input{max-width:8ch}

  .guest-block .q{display:grid;grid-template-columns:1fr auto auto;
                  align-items:center;column-gap:.75rem;margin:.5rem 0}
  .guest-block .radio-wrap{display:contents}
  .guest-block .radio-wrap label{display:inline-flex;align-items:center;gap:4px}
}

/* ─────────────────────────────────────────────────────────────
   3.  LANDSCAPE PHONE  ( ≤1000 px & landscape )
   –  allow horizontal swipe *only if* the card is wider than
      the viewport (rare); otherwise behaves like portrait.
   ───────────────────────────────────────────────────────────── */
@media (max-width:1000px) and (orientation:landscape){
  .rsvp-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #rsvp-form{min-width:740px;width:max-content;padding:0 2rem}
}


@media (max-width: 640px) {
  .schedule-block.with-image {
    flex-direction: column;
    text-align: center; 
  }
  .block-image {
    margin: 1rem auto 0;        
  }
}
@media (max-width:640px) {
  .schedule-block.with-image {
    flex-direction:column; 
    text-align:center;
    padding-bottom: 1.5rem;    
  }
  .schedule-block.with-image .block-image {
    order:-1;                   
    margin:1.25rem auto 0;
    position: static;                
    display: block;
    margin: 1rem auto 0;
  }
}

@media (max-width:640px) {
  .schedule-block.with-image-left {
    text-align: center;
    padding-bottom: 1.5rem;
  }
  .schedule-block.with-image-left .block-image {
    position: static;

  }

  .venue-block.with-image-left {
    text-align: center;
    padding-bottom: 1.5rem;
  }
  .venue-block.with-image-left .block-image {
    position: static;

  }

  .winespacer{
  padding-bottom: 0%;
}

}

@media (max-width:640px) {
  .venue-block.with-image {
    text-align: center;
    padding-bottom: 1.5rem;  
  }
  .venue-block.with-image .block-image {
    position: static;          
    margin: 1.25rem auto 0;
  }

  #rsvp-form label {
 padding-bottom: 10%;
}
}
@media (max-width: 640px) {
  .venue-block a {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .schedule-block {
  padding: 0rem 0rem;
  
}

 section.panel {
    max-width: 100%;
    padding: 0 1rem;
    margin-inline: 0;
  }

  .venue-header {
    padding: 1 1rem;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }
    .venue-header h4 {
    text-align: center;

    
  }


.schedule-block.row-pair.in-view {
    padding: 1rem;
}


  .schedule-block h4 {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--green);
  margin-bottom: 0.25rem;
}

}