/* =========================================================
WEDDING SCRIPT FONT
========================================================= */

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


:root {

  /* =====================================================
     WEDDING COLOR SYSTEM
     White • Champagne • Dusty Coral • Antique Gold
     ===================================================== */

  /* Main backgrounds */
  --ivory: #F7F6F1;
  --ivory-dark: #EFEED3;
  --white: #FFFFFF;

  /* Soft floral / champagne accents */
  --blush: #7C5D26;
  --blush-light: #f4dbaa;

  /* Antique gold / typography accent */
  --rose: #7C5D26;
  --rose-dark: #6B4F20;

  /* Main typography */
  --ink: #3F382F;
  --ink-light: #665D52;
  --muted: #8C8478;

  /* Borders */
  --border: #E5DED2;
  
  /* =====================================================
     ENVELOPE PAGE
     Premium white / champagne gradient
    ===================================================== */
--envelope-page-white: #FFFFFF;
--envelope-page-soft: #FAF8F4;
--envelope-page-champagne: #F2EEE7;

  --envelope-glow: rgba(255, 255, 255, 0.75);
  --envelope-champagne-glow: rgba(244, 219, 170, 0.10);
  --envelope-gold-glow: rgba(124, 93, 38, 0.06);

  --envelope-shadow: rgba(50, 35, 30, 0.16);

  /* Envelope / stationery colors */
--envelope-light: #FBFAF5;
--envelope-mid: var(--ivory);
--envelope-dark: #E8DFC8;


  /* =====================================================
     TYPOGRAPHY
     ===================================================== */

--font-display: "Cormorant Garamond", Georgia, serif;
--font-body: "Segoe UI", Arial, sans-serif;

  /* =====================================================
     MOTION
     ===================================================== */

  --ease: cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
RESET
========================================================= */

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: var(--ivory);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}

button,
a {
font: inherit;
}

button {
border: 0;
}

a {
color: inherit;
}

img {
max-width: 100%;
display: block;
}

/* =========================================================
PAGE
========================================================= */

.wedding-page {
width: 100%;
min-height: 100vh;
overflow: hidden;
flex-direction: column;
align-items: center;
}

/* =========================================================
HERO
========================================================= */

.hero {
position: relative;

min-height: 100vh;

display: flex;
align-items: center;
justify-content: center;

padding: 80px 30px;

text-align: center;

 background:
    linear-gradient(
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.90) 8%,
      rgba(255, 255, 255, 0.55) 70%,
      rgba(255, 255, 255, 0.38) 100%
    ),
    url("assets/images/bg-flower.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-bottom: 0px solid var(--border);
};


/* Decorative frame */

.hero::before {
content: "";

position: absolute;

inset: 28px;

border: 0px solid rgba(185, 120, 128, .28);

pointer-events: none;
}

/* Inner decorative frame */

.hero::after {
content: "";

position: absolute;

inset: 40px;

border: 0px solid rgba(185, 120, 128, .10);

pointer-events: none;
}

.hero-overlay {
position: absolute;

inset: 0;

pointer-events: none;

background:
radial-gradient(
circle at center,
transparent 35%,
rgba(61, 52, 50, .025)
);
}

.hero-content {
  animation: heroReveal 1.4s ease both;

}


@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
  
}

/* =========================================================
HERO TYPOGRAPHY
========================================================= */



.names {
display: flex;

flex-direction: column;

align-items: center;

color: var(--ink);

font-family: var(--font-display);

font-size: clamp(76px, 12vw, 150px);

font-weight: 500;

line-height: .72;

letter-spacing: -.035em;
}

.groom-name,
.bride-name {
display: block;
}

.ampersand {
margin: 35px 0 2px;

color: var(--rose);

font-family: var(--font-display);

font-size: .34em;

font-style: regular;

line-height: 1;
}

.hero-divider {
display: flex;

align-items: center;

justify-content: center;

gap: 14px;

width: min(250px, 70%);

margin: 48px auto 24px;

color: var(--rose);

font-family: var(--font-display);

font-size: 18px;
}

.hero-divider span:first-child,
.hero-divider span:last-child {
flex: 1;

height: 1px;

background: var(--border-dark);
}

.hero-date {
margin: 10px 0 10px;

color: var(--ink);

font-size: 13px;
font-weight: 600;

letter-spacing: .20em;
}

.hero-location {
margin: 0;

color: var(--muted);

font-size: 13px;

letter-spacing: .08em;

text-transform: uppercase;
}

.invitation-text {
margin: 10px 0 20px;


color: var(--rose-dark);

font-size: 12px;
font-weight: 600;

letter-spacing: .25em;

text-transform: uppercase;
white-space: pre-line;
line-height: 2.5;

}

/* =========================================================
HERO BUTTON
========================================================= */

.hero-button {
display: inline-flex;

align-items: center;
justify-content: center;

min-width: 190px;
min-height: 48px;

margin-top: 36px;

padding: 0 26px;

border: 1px solid var(--rose-dark);

background: var(--rose-dark);

color: var(--white);

font-size: 11px;
font-weight: 600;

letter-spacing: .14em;

text-decoration: none;

transition:
background .2s var(--ease),
transform .2s var(--ease),
box-shadow .2s var(--ease);
}

.hero-button:hover,
.hero-button:focus-visible {
background: var(--ink);

transform: translateY(-2px);

box-shadow:
0 8px 24px rgba(61, 52, 50, .15);
}

.hero-button:focus-visible {
outline: 2px solid var(--rose);

outline-offset: 4px;
}

/* =========================================================
INTRO
========================================================= */

.intro {
padding: 130px 30px;

text-align: center;

background: var(--white);
}

.section-label {
margin: 0 0 18px;

color: var(--rose-dark);

font-size: 10px;
font-weight: 700;

letter-spacing: .25em;

text-transform: uppercase;
}

.intro h1 {
margin: 0;

color: var(--ink);

font-family: var(--font-display);

font-size: clamp(48px, 7vw, 78px);

font-weight: 500;

line-height: .95;
}

.intro-text {
max-width: 520px;

margin: 28px auto 0;

color: var(--muted);

font-size: 14px;

line-height: 1.9;
}

/* =========================================================
DETAILS
========================================================= */

.details {
padding: 90px 30px;

background: var(--ivory);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

.details-header {
max-width: 800px;
margin: 0 auto 65px;
text-align: center;
}

.details-header h2 {
margin: 0;

color: var(--ink);


line-height: .95;
}


/* =========================================================
DETAIL CONTENT
========================================================= */
.detail-content {

  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:28px;

  background: transparent;
  border: 0;

}

/* VENUE CARDS */

.detail-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  min-width: 0;
  min-height: 0;
  padding: 0;

  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);

  text-align: center;
  box-shadow: 0 8px 28px rgba(63, 56, 47, 0.06);
  animation: panelIn 0.5s var(--ease) both;
  border-radius: 8px;
}

/* VENUE PHOTO */

.venue-image-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.venue-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

}

/* soft white overlay, */

.venue-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.50) 0%,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
}

/* VENUE INFORMATION */

.venue-information {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 30px 28px 32px;
}

/* =========================================================
   CEREMONY — CALARUEGA CHURCH SKETCH
   ========================================================= */


  /* ceremony RECEPTION LABELS */


  .panel-label {
    margin: 0 0 12px;
    color: var(--blush);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }


  /* VENUE NAMES */

  .detail-panel h3 {
    margin:  0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.25;
  
  }

  /* decorative divier */

  .venue-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 18px 0;

    color: var(--blush);
    font-size: 0.85rem;
  }

  .venue-divider::before,
  .venue-divider::after {
    content: "";
    display: block;
    width: 42px;
    height: 1px;
    background: var(--border);
  }

  /* TIME */

  .panel-primary {
    margin: 0 0 12px;
    color: var(--blush);
    font-family: var(--font-display);
        font-size: 1.5rem;
  }


  /* address */
  
  .panel-description {
    margin: 0;
    color: var(--ink);
        font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1.8;
  }

  /* VIEW LOCATION LINK */

  .map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 24px;
    padding-bottom: 5px;
    color: var(--blush);
    border-bottom: 1px solid var(--blush);

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;

    transition: 
      color 0.5s ease,
      border-color 0.25s ease;
  }


  /* MAP LINK */

  .map-link:hover {
    color: var(--rose-dark);
    border-color: var(--rose-dark);
  }


  /* CARD ENTRANCE ANIMATION HERE*/
  
  @keyframes panelIn {
    from {
      opacity: 0;
      transform: translateY(12px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/* RESPONSIVE LAYOUT */

@media (max-width: 768px) {
  .detail-content {
    grid-template-columns: 1fr;
    max-width: 560px;
    gap:24px;
  }
}



/* =========================================================
DETAIL ICON
========================================================= */

.detail-icon {
width: 52px;
height: 52px;

display: flex;

align-items: center;
justify-content: center;

margin-bottom: 28px;

border: 1px solid var(--blush);

border-radius: 50%;

background: var(--blush-light);

color: var(--rose-dark);

font-family: var(--font-display);

font-size: 22px;
}

.venue-image-wrapper {
  height: 280px;
}

.venue-information {
  padding: 26px 22px 30px;
}

.detail-panel h3 {
  font-size: 1.75rem;
}

@media (max-width: 480px) {
  .detail-content {
    gap: 20px;
  }

  .venue-image-wrapper {
    height: 230px;
  }

  .venue-information {
    padding: 24px 18px 28px;
  }
}


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

.rsvp-button {
display: inline-flex;

align-items: center;
justify-content: center;

min-width: 160px;

min-height: 46px;

margin-top: 30px;

padding: 0 24px;

background: var(--rose-dark);

color: var(--white);

font-size: 12px;

font-weight: 700;

letter-spacing: .15em;

text-decoration: none;

transition:
background .2s var(--ease),
transform .2s var(--ease),
box-shadow .2s var(--ease);
}

.rsvp-button:hover {
background: var(--ink);

transform: translateY(-2px);

box-shadow:
0 8px 20px rgba(61, 52, 50, .15);
}

/* =========================================================
ATTIRE
========================================================= */
.attire {
  text-align: center;
  padding: 80px 40px;

}

.attire-header {
  margin-bottom: 50px
}

.attire-header .section-label {
  margin-bottom: 15px;
}

.attire-header h2 {
  margin: 0;
  

}

/* HEADER */

.attire-column {
  text-align: center;
  padding: 0 35px;
}

.attire-column + .attire-column {
  border-left: 0px solid rgba(80, 70, 60, 0.15);
}

/* THREE SIDE BY SIDE COLUMNS */

.attire-columns {
  max-width: none;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

}

.attire-columns {
  text-align: center;
}

.attire-column h3 {
  margin: 0 0 15px;

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
}

.attire-column p {
    margin: 0 auto;

    max-width: 260px;

    font-size: 16px;
    line-height: 1.6;
}


/* ATTIRE IMAGES */

.attire-image {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.attire-image img {
  width: 100%;
  max-width: 240px;
  height: 230px;

  object-fit: contain;

  display: block;
}


/* =========================================================
MOBILE ATTIRE
============================================================ */

@media (max-width: 700px) {

  .attire {
    padding: 60px 25px;
  }

  .attire-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
}

/* =========================================================
REMINDERS
========================================================= */
.reminder {
  text-align: center;
  padding: 80px 40px;
  border-bottom: 1px solid var(--border);

}

.reminder-header {
  margin-bottom: 50px
}

.reminder-header .section-label {
  margin-bottom: 15px;
}

.reminder-header h2 {
  margin: 0;
  

}

/* HEADER */

.reminder-column {
  text-align: center;
  padding: 0 35px;
}

.reminder-column + .reminder-column {
  border-left: 0px solid rgba(80, 70, 60, 0.15);
}



/* TWO SIDE BY SIDE COLUMNS FOR REMINDERS */

.reminder-columns {
  max-width: none;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

}

.reminder-columns {
  text-align: center;
}

.reminder-column h3 {
  margin: 0 0 15px;

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
}

.reminder-column p {
    margin: 0 auto;

    max-width: 260px;

    font-size: 16px;
    line-height: 1.6;
}


/* REMINDER IMAGES */

.reminder-image {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reminder-image img {
  width: 100%;
  max-width: 240px;
  height: 230px;

  object-fit: contain;

  display: block;
}


/* =========================================================
MOBILE REMINDERS
============================================================ */

@media (max-width: 700px) {

  .reminder {
    padding: 60px 25px;
  }

  .reminder-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
}


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

/* RSVP + COUNTDOWN
LEFT: WEDDING INFO
RIGHT: RSVP FORMS

======================= */


/* BASE */

.rsvp-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 110px 5vw;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 450px), 1fr)
  );
  align-items: center;
  gap: 80px;
  text-align:center;
  background: var(--ivory);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}



/* LEFT COUNTDOWN AND TEXT */

/* =========================================================
CLOSING LEFT SIDE
========================================================= */



/* RSVP SEAL JAY AND JAN*/
.rsvp-seal {
  width: 82px;
  height: 82px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--blush);
  border-radius: 50%;
  background: var(--blush-light);

  box-shadow: 
    0 4px 10px rgba(50,35,30,0.10);
  position: relative;
}

.rsvp-seal::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--blush);
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
}

.rsvp-seal img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

.closing {
width: 100%;
min-width: 0;
padding: 80px 20px;
text-align: center;
background: var(--ivory);
}

.closing h2 {
margin: 0;

color: var(--ink);

font-family: var(--font-display);

font-size: clamp(58px, 9vw, 100px);

font-weight: 500;

line-height: .9;
}

.closing-date {
margin: 28px 0 0;

color: var(--rose-dark);

font-size: 11px;

font-weight: 600;

letter-spacing: .22em;
}


/* CLOSING COUNTDOWN */

.wedding-date {
  margin-top: 45px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 42px;
  color: var(--rose-dark);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .22em;

}

.countdown {
  margin-top: 45px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 42px;
  color: var(--rose-dark);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .22em;

}

.countdown-unit {
  display:flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}

.countdown-unit span {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
}

.countdown-unit small {
  margin-top: 18px;
  color: var(--rose-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
}




/* RIGHT RSVP FORMS */

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


/* =========================================================
RSVP FORM RIGHT SIDE
========================================================= */

.rsvp-form {
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: center;
  text-align: center;
  
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow:
    0 2px 6px rgba(1, 1, 1, 0.04),
    0 8px 24px rgba(1, 1, 1, 0.05);

  padding: 30px;
  box-sizing: border-box;

}


.rsvp-form h2 {
  margin: 0 0 10px;
  color: var(--rose-dark);
}

.rsvp-form p {
  margin: 0 0 24px;
  color: var(--ink);
}

/*confirm dialog in the rsvp form*/

.rsvp-form .ms-font-m {
  max-width: 500px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

.rsvp-form .ms-font-m + .ms-font-m {
  margin-top: 2px;
}



.form-field {
  margin-bottom: 22px;
  text-align: left;
}


.ms-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  margin: 20px 0;
    color: var(--ink);
    letter-spacing: 0.01em;

}

.ms-TextField-field {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #c8c6c4;
  border-radius: 6px;

  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;

  outline: none;
  margin-bottom: 20px;

    transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;


}

/* Placeholder for text field */

.ms-TextField-field::placeholder {
  color: #8a8886
}

/* Hover */

.ms-TextField-field:hover {
  border-color: var(--rose-dark);
}

.ms-TextField-field:focus {
  border-color: var(--rose-dark);

  box-shadow: 
  0 0 0 1px var(--rose-dark),
  0 2px 6px rgba(1,1,1,0.04);

}



/* Toggle control */

.ms-Toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 18px 0;
}

.ms-Toggle-input {
  display: none;
}

.ms-Toggle-label {
  position: relative;
  width: 90px;
  height: 34px;

  align-items: center;
  justify-content: space-between;
  min-width:  88px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  background: #e1dfdd;
  color: var(--ink);
  padding: 0px 11px;

  box-sizing: border-box;
  border: 1px solid #c8c6c4;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 600;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}


/* TOGGLE KNOB */

.ms-Toggle-label::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 
    0 2px 5px rgba(50, 35, 30, 0.18);

  transition:
    transform 0.25s cubic-bezier(.2,.8,.2,1);
}

/* TOGGLE LABELS AFTER*/

.ms-Toggle-label::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* TOGGLE HOVER */

.ms-Toggle-label:hover {
  border-color: var(--rose-dark);
  box-shadow: 
    0 2px 7px rgba(50, 35, 30, 0.08);
}


/* TOGGLE ON STATE*/

.ms-Toggle-input:checked + .ms-Toggle-label {
  background: var(--blush);
  border-color: var(--rose-dark);
  color: #fff;

  box-shadow: 
    0 2px 7px rgba(50,35,30,0.12);

}

/* MOVE KNOB TOGGLE TO THE RIGHT WHEN CLICKED */
.ms-Toggle-input:checked + .ms-Toggle-label::before {
  transform: translateX(56px);
}

/* Radio choices control */

.radio-group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin: 18px 0;

}

.radio-option {
  display: flex;
  align-items:  center;
  gap: 8px;
  cursor:pointer;
  font-size: 14px;
  color: var(--ink);
  transition: color 0.15s ease;
}

.radio-option:hover {
  color: var(--rose-dark)
}

.radio-option input {
  display: none;
}

.radio-circle {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--rose-dark);
  border-radius: 50%;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  transition: 
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

/* Hover */

.radio-option:hover .radio-circle {
  border-color: var(--rose-dark);
}

/* Selected */

.radio-option input:checked + .radio-circle {
  border-color: var(--rose-dark);
  box-shadow:
    0 0 0 2px rgba(1,1,1,0.03);
}

.radio-option input:checked + .radio-circle::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--rose-dark);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

/* CONDITIONAL PLUS ONE FIELDS radio buttons */

#plusOneField[hidden] {
  display: none !important;
}

#plusOneField {
    animation: panelIn 0.3s var(--ease);
}


/* Buttons styling */

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 16px;
  margin-top: 60px
}


.ms-Button {
  min-width: 90px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 6px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: 
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;

}

.ms-Button--default {
  background-color: #fff;
  color: var(--ink);

  border-color: #c8c6c4;
}

/* Hover */

.ms-Button--default:hover {
  background: var(--ivory-dark);
  border-color:  var(--rose-dark);

  box-shadow: 
    0 2px 5px rgba(1,1,1,0.06);
}


.ms-Button:hover {
  opacity: 0.9;
}


/* PRIMARY */

.ms-Button--primary {
  background-color: var(--blush-light);
  color: #fff;

  border-color: var(--blush-light);
}

.ms-Button--primary:hover {
  background: var(--rose-dark);
  border-color: var(--rose-dark);
  box-shadow:
        0 2px 6px rgba(1, 1, 1, 0.08);

}

/* BUTTON PRESS */

.ms-Button:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* KEYBOARD FOCUS */

.ms-Button:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 2px var(--ivory),
    0 0 0 4px var(--rose-dark);
}


/* =========================================================
   MOBILE
========================================================= */


/* MOBILE VIEW COUNTDOWN */

@media (max-width: 600px) {

  .rsvp-section {

    grid-template-columns: 1fr;

    padding: 80px 30px;

    gap: 70px;

  }

  .rsvp-form {

    max-width: 500px;
    width: 100%;

    justify-self: center;

  }

  .countdown {
    gap: 18px
  }

  .countdown-unit {
    min-width: 55px;
  }

  .countdown-unit span {
    font-size: 30px;
  }

  .countdown-unit small {
    font-size: 7px;
    letter-spacing: .14em;
  }
}




/* =========================================================
FOOTER
========================================================= */

footer {
padding: 25px;

background: var(--rose-dark);

color: var(--white);

text-align: center;
}

footer p {
margin: 0;

font-size: 10px;

font-weight: 500;

letter-spacing: .12em;
}


/* =========================================================
   WEDDING INVITATION OPENING
   ========================================================= */

/* FULL SCREEN LAYOUT */

.invitation-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      ellipse at center,
      var(--envelope-page-white) 0%,
      var(--envelope-page-white)  38%,
      var(--envelope-page-soft) 68%,
      var(--envelope-page-champagne)  100%
    );
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1s ease,
    visibility 1s ease;
}

/* paper texture */
.invitation-overlay::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 45%,
      var(--envelope-glow),
      transparent 42%
    ),
    radial-gradient(
      circle at 15% 20%,
      var(--envelope-champagne-glow),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 80%,
      var(--envelope-gold-glow),
      transparent 32%
    );
  z-index: 0;
}

/* ENVELOPE */

.envelope {
  position: relative;
  width: min(430px, 78vw);
  aspect-ratio: 1.55 / 1;
  transform-style: preserve-3d;
  filter:
    drop-shadow(
      0 22px 38px var(--envelope-shadow)
    );

  animation: envelopeFloat 4s ease-in-out infinite;
}

/* ENVELOPE BACK */

.envelope-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    linear-gradient(
      145deg,
      var(--envelope-light) 0%,
      var(--envelope-mid) 45%,
      var(--envelope-dark) 100%
    );

  border: 1px solid rgba(107,79,32,0.20);
  border-radius: 4px;
}

/* INVITATION CARD */

.invitation-card {
  position: absolute;
  z-index: 2;
  left: 8%;
  right: 8%;
  bottom: 4%;
  height: 88%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 20px;
  box-sizing: border-box;
  background: #fffdfb;
  border: 2px solid rgba(120,90,80, 0.15);
  box-shadow: 0 5px 15px rgba(50, 35, 30, 0.08);
  transform: translateY(0);

  transition:
    transform 1.1s cubic-bezier(.2,.8,.2,.1),
    box-shadow 1s ease;
}

/* SMALL HEADING */

.invitation-small {
  margin: 0 0 15px;
  color: var(--rose-dark);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .25em;
}

/* NAMES */
.invitation-script {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(42px, 8vw, 68px);
  font-weight: 400;
  line-height: .9;
}

/* DATE */
.invitation-date {
  margin: 18px 0;
  color: var(--rose-dark);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .25em;

}

/* DIVIDER */
.invitation-line {
  width: 45px;
  height: 1px;
  margin: 3px 0 15px;
  background: var(--rose-dark);
  opacity: .55;
}


/*LOCATION */
.invitation-location {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .18em;
}



/* ENVELOPE FLAP */

.envelope-flap {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: 
    linear-gradient(
      145deg,
      #fffdfb 0%,
      var(--ivory-dark) 100%
    );

  clip-path: polygon(
    0 0,
    50% 100%,
    100% 0
  );

  transform-origin: top center;

  transition:
    transform 1s cubic-bezier(.4,0,.2,1);

  filter:
    drop-shadow(
      0 2px 2px rgba(50, 35, 30, .08)
    );

}


/* ENVELOPE FRONT */

.envelope-front {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: 
    linear-gradient(
      135deg,
      rgba(255,255,255,.25),
      transparent 50%
    ),
    var(--ivory);
  clip-path: polygon(
    0 0,
    50% 55%,
    100% 0,
    100% 100%,
    0 100%
  );
  border-radius: 4px;

}


/*JAY AND JAN LOGO SEAL */
.envelope-seal {
  position: absolute;
  z-index: 7;
  left:50%;
  top: 50%;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 1px solid var(--blush);
  border-radius: 50%;
  background: var(--blush-light);
  color: var(--rose-dark);
  box-shadow:
    0 4px 10px rgba(50, 35, 30, .12);
  overflow: hidden;
  animation: sealFloat 4s ease-in-out infinite;
  transition:
    transform .3s ease,
    box-shadow 3.s ease;  

}

/* Inner seal ring */

.envelope-seal::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--blush);
  border-radius: 50%;
  opacity: .55;
  pointer-events: none;
}

/* Logo container */

.envelope-seal-inner {
  position: relative;
  z-index: 2;
  width: 98px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}


/* Logo */

.envelope-seal img {
  width: 68%;
  height: 68%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}


/* OPEN BUTTON */
.open-invitation {
  position: absolute;
  bottom: 10vh;
  z-index: 10;

  top: 35%;
  left: 50%;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--rose-dark);
  cursor: pointer;
  font-family: var(--font-body);
  transform: translateX(-50%);
  transition:
    opacity .25s ease,
    transform .25s ease;

}

.open-invitation:hover {
  transform: 
    translateX(-50%)
    translateY(-3px);
}

/*additional hover animation */

.open-invitation:hover ~ .envelope-seal {
  box-shadow: 
    0 4px 12px rgba(50, 35, 30, .14),
    0 0 12px rgba(124, 93, 38, .12);
}


.open-label {
font-size: 10px;
font-weight: 600;
letter-spacing: .25em;
white-space: nowrap;

}

.open-arrow {
  font-size: 18px;
  line-height: 1;
  animation:
    invitationArrow 1.6s ease-in-out infinite;
}



/* OPENING ANIMATION */

/*stop floating*/
.invitation-overlay.is-opening .envelope {
  animation:none;
}

/*open flap*/
.invitation-overlay.is-opening .envelope-flap {
  transform: rotateX(-180deg);
  z-index: 1;
}

/*bring invitation upward*/
.invitation-overlay.is-opening .invitation-card {
  animation: cardReveal 1.2s cubic-bezier(.2,.8,.2,1) forwards;
  /*
  transform: translateY(-32%);
  box-shadow: 
    0 20px 35px rgba(50, 35, 30, 0.16);
    */
}

/*hide button*/
.invitation-overlay.is-opening .open-invitation {
  opacity: 0;
  pointer-events: none;
  transform: 
    translateX(-50%)
    translateY(10px);
}

/*fade entire invitation away*/
.invitation-overlay.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* ANIMATIONS */
@keyframes envelopeFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes sealFloat {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, calc(-50% - 8px));
  }
}


@keyframes invitationArrow {
  0%,
  100% {
    transform: translateY(0);
    opacity: .65;
  }

  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

@keyframes cardReveal {
  0% {
    transform: translateY(0);
  }

  70% {
    transform: translateY(-36%);
  }

  100% {
    transform: translateY(-32%);
  }
  
}

/* MOBILE */
@media (max-width: 600px) {
  .envelope {
    width: 82vw;
  }
  .invitation-card {
    padding: 20px 15px;
  }
  .invitation-small {
    font-size: 7px;
    letter-spacing: .18em;
  }
  .invitation-script {
    font-size: 48px;
  }
  .invitation-date {
    font-size: 8px
  }
  .invitation-location {
    font-size: 7px;
  }
  .open-invitation {
    bottom: 7%;
  }
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 768px) {

.hero {
min-height: 100svh;


padding: 70px 24px;


}

.hero::before {
inset: 18px;
}

.hero::after {
inset: 28px;
}


.invitation-text {
font-size: 9px;


letter-spacing: .14em;


}

.names {
font-size: clamp(72px, 22vw, 115px);
}

.hero-divider {
margin-top: 40px;
}

.intro {
padding: 90px 24px;
}

.details {
padding: 90px 18px;
}

.details-header {
margin-bottom: 45px;
}

.detail-tabs {
grid-template-columns: repeat(2, 1fr);
}

.detail-tab {
min-height: 75px;
}

.detail-tab:nth-child(2) {
border-right: 0;
}

.detail-tab:nth-child(-n + 2) {
border-bottom: 1px solid var(--border);
}

.detail-content {
min-height: 390px;
}

.detail-panel {
min-height: 390px;


padding: 65px 22px;


}

.quote {
padding: 100px 24px;
}

.closing {
padding: 100px 24px;
}
}

@media (max-width: 480px) {

.hero {
padding: 60px 20px;
}

.hero::before {
inset: 12px;
}

.hero::after {
inset: 20px;
}

.hero-date {
font-size: 10px;


letter-spacing: .13em;


}

.hero-location {
font-size: 9px;
}

.hero-button {
min-width: 175px;
}

.intro h1 {
font-size: 48px;
}

.tab-title {
font-size: 9px;


letter-spacing: .1em;


}

.detail-panel h3 {
font-size: 38px;
}

.quote p {
font-size: 34px;
}
}

/* =========================================================
ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
animation-duration: .01ms !important;


animation-iteration-count: 1 !important;

transition-duration: .01ms !important;


}
}



/* FLOATING RSVP BUTTON HERE */
.floating-rsvp {
  position: fixed;
  right: 24px;
  bottom: calc(26px + env(safe-area-inset-bottom));
  z-index: 10000;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 25px;
  border: 1px solid rgba(255, 244, 214, 0.38);
  border-radius: 999px;

background: linear-gradient(
  135deg,
  var(--rose-dark),
  #80612e 55%,
  var(--rose-dark)
);

color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.6px;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;


  box-shadow: 
    0 5px 18px rgba(47, 34, 17, 0.18),
    0 0 0 1px rgba(255, 244, 214, 0.08),
    0 0 16px rgba(201, 165, 93, 0.16);

  /* Hidden until the inviattion opens */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);  
  transition: 
    opacity 0.45s ease,
    visibility 0.45s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.35s ease,
    background 0.35s ease;
}


/* show after the envelope opens */

.floating-rsvp.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Elegant desktop interaction */
@media (hover: hover) and (pointer: fine) {
  .floating-rsvp:hover {
    background: linear-gradient(
      135deg,
      #80612e,
      #927344 55%,
      #80612e
    );

    box-shadow:
    0 8px 24px rgba(47, 34, 17, 0.22),
    0 0 0 1px rgba(255, 244, 214, 0.14),
    0 0 24px rgba(201, 165, 93, 0.3);

    transform: translateY(-3px) scale(1.015);
  }

  .floating-rsvp:hover::after {
    transform: translateY(3px);
  }
}

/*accessibility via keyboard only*/
.floating-rsvp:focus-visible {
  outline: 2px solid #c9a55d;
  outline-offset: 5px;
}

/* press feedback */
.floating-rsvp:active {
  transform: translateY(0) scale(0.98);
}


/* Mobile */
@media (max-width: 600px) {
  .floating-rsvp {
    right: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    padding: 13px 21px;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 1.3px;

    box-shadow: 
      0 4px 16px rgba(47, 34, 17, 0.2),
      0 0 15px rgba(201, 165, 93, 0.2);
  }
}

/* accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  .floating-rsvp,
  .floating-rsvp::after {
    transition: none;
  }
}