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

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}


/* ==================================================
   DAY 2 COLOUR PALETTE

   Terracotta / Burnt Rust  #A9341C
   Deep Warm Brown          #62351F
   Antique Gold             #A87528
   Warm Taupe               #8A6852
   Cream                    #FFF9EF
================================================== */


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

body {
  font-family: "Cormorant Garamond", serif;

  background-color: #FFF9EF;

  background-image:
    url("assets/background Image.png");

  background-position:
    top center;

  background-size:
    100% auto;

  background-repeat:
    no-repeat;

  background-attachment:
    scroll;

  color: #62351F;

  text-align: center;

  margin: 0;

  padding:
    245px
    20px
    80px;

  min-height: 100vh;
}


/* ==================================================
   MAIN WEDDING CONTENT
================================================== */

.wedding-content {
  width: 100%;
  margin: 0 auto;
}


/* ==================================================
   WELCOME TO
================================================== */

.eyebrow {
  font-family:
    "Cormorant Garamond",
    serif;

  color: #62351F;

  font-size: 1.15rem;

  font-weight: 600;

  letter-spacing: 8px;

  line-height: 1;

  text-transform: uppercase;

  margin:
    0
    0
    12px;
}


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

h1 {
  font-family:
    "Luxurious Script",
    cursive;

  color: #A9341C;

  font-size:
    clamp(
      4.0rem,
      8vw,
      7rem
    );

  font-weight: 300;

  line-height: 0.95;

  margin:
    0
    auto
    25px;

  text-shadow:
    0 1px 1px
    rgba(98, 53, 31, 0.08);
}


/* ==================================================
   HEART DIVIDER
================================================== */

.flourish-divider {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 330px;

  max-width: 75vw;

  margin:
    0
    auto
    31px;

  color: #A87528;
}


.flourish-divider::before,
.flourish-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background-color: #A87528;
}


.flourish-divider span {
  padding:
    0
    18px;

  color: #A87528;

  font-family:
    Georgia,
    serif;

  font-size: 1.7rem;

  line-height: 1;
}


/* ==================================================
   WELCOME MESSAGE
================================================== */

.find-heading {
  font-family:
    "Cormorant Garamond",
    serif;

  color: #62351F;

  font-size: 1.05rem;

  font-weight: 500;

  letter-spacing: 0.5px;

  line-height: 1.2;

  margin:
    0
    auto
    7px;

  width: 90%;

  max-width: 320px;
}


/* ==================================================
   SEARCH INSTRUCTION
================================================== */

.search-instruction {
  font-family:
    "Cormorant Garamond",
    serif;

  color: #8A6852;

  font-size: 1.10rem;

  font-weight: 500;

  font-style: italic;

  line-height: 1.15;

  margin:
    0
    0
    24px;
}


/* ==================================================
   SEARCH AREA
================================================== */

.search-area {
  width: 100%;

  max-width: 700px;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin:
    0
    auto;
}


/* ==================================================
   SEARCH INPUT
================================================== */

input {
  display: block;

  width:
    min(
      520px,
      72vw
    );

  height: 60px;

  margin:
    0
    auto;

  padding:
    0
    28px;

  border:
    2px solid
    #A87528;

  border-radius:
    40px;

  background:
    rgba(
      255,
      249,
      239,
      0.78
    );

  color: #62351F;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.25rem;

  font-weight: 500;

  font-style: italic;

  text-align: center;

  outline: none;

  box-shadow:
    0 4px 14px
    rgba(168, 117, 40, 0.14);

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


input::placeholder {
  color: #8A6852;

  opacity: 0.85;

  font-family:
    "Cormorant Garamond",
    serif;

  font-style: italic;
}


input:focus {
  border-color: #A87528;

  box-shadow:
    0 0 0 3px
    rgba(168, 117, 40, 0.12),

    0 5px 18px
    rgba(168, 117, 40, 0.18);
}


/* ==================================================
   FIND YOUR TABLE BUTTON
================================================== */

button {
  display: block;

  width:
    min(
      380px,
      62vw
    );

  min-height: 60px;

  margin:
    20px
    auto
    0;

  padding:
    14px
    30px;

  border:
    2px solid
    #A87528;

  border-radius:
    40px;

  background: #A9341C;

  color: #FFF9EF;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.25rem;

  font-weight: 500;

  letter-spacing: 4px;

  text-transform: uppercase;

  cursor: pointer;

  box-shadow:
    0 7px 18px
    rgba(169, 52, 28, 0.22);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 10px 22px
    rgba(169, 52, 28, 0.28);
}


button:active {
  transform:
    translateY(0);
}


/* ==================================================
   RESULT AREA
================================================== */

#result {
  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;
}


/* ==================================================
   GUEST RESULT CARD
================================================== */

.guest-card {
  width:
    min(
      440px,
      78vw
    );

  margin:
    0
    auto;

  padding:
    28px
    32px
    30px;

  background:
    rgba(
      255,
      249,
      239,
      0.96
    );

  border:
    2px solid
    #A87528;

  border-radius:
    22px;

  color: #62351F;

  box-shadow:
    0 10px 30px
    rgba(98, 53, 31, 0.18);

  opacity: 0;

  transform:
    translateY(20px);

  transition:
    opacity 0.6s ease,
    transform 0.6s ease;

  font-family:
    "Cormorant Garamond",
    serif;

  box-sizing: border-box;
}


.guest-card.show {
  opacity: 1;

  transform:
    translateY(0);
}


/* ==================================================
   RESULT CARD HEART DIVIDER
================================================== */

.result-decoration {
  width: 70%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin:
    0
    auto
    8px;
}


.result-decoration span {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #A87528
    );
}


.result-decoration span:last-child {
  background:
    linear-gradient(
      90deg,
      #A87528,
      transparent
    );
}


.result-heart {
  color: #A87528;

  font-family:
    Georgia,
    serif;

  font-size: 1.7rem;

  line-height: 1;
}


/* ==================================================
   RESULT - WELCOME
================================================== */

.welcome-text {
  font-family:
    "Luxurious Script",
    cursive;

  color: #A9341C;

  font-size: 3.4rem;

  font-weight: 400;

  line-height: 1;

  margin:
    5px
    0
    12px;
}


/* ==================================================
   GUEST NAME
================================================== */

.guest-name {
  color: #62351F;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.8rem;

  font-weight: 600;

  margin:
    5px
    0
    12px;
}


/* ==================================================
   RESULT CARD LEAF

   This is ONLY for the leaf inside the result card.
   The main-screen leaf has been removed.
================================================== */

.result-leaf-image {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin:
    10px
    auto
    14px;
}


.result-leaf-image img {
  display: block;

  width: 85px;

  max-width: 100%;

  height: auto;

  object-fit: contain;
}


/* ==================================================
   PLEASE TAKE YOUR SEAT AT
================================================== */

.seat-text {
  color: #62351F;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  margin:
    8px
    0;
}


/* ==================================================
   TABLE NUMBER
================================================== */

.table-number {
  color: #A9341C;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 3.7rem;

  font-weight: 600;

  letter-spacing: 3px;

  line-height: 1;

  margin:
    18px
    0;
}


/* ==================================================
   CELEBRATION TEXT
================================================== */

.celebration-text {
  color: #A9341C;

  font-family:
    "Luxurious Script",
    cursive;

  font-size: 2rem;

  font-weight: 400;

  line-height: 1.2;

  margin:
    8px
    0
    15px;
}


/* ==================================================
   SEAT CONFIRMATION
================================================== */

.seat-confirmation {
  margin-top: 18px;

  display: flex;

  justify-content: center;

  align-items: center;
}


.seat-confirm-label {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  cursor: pointer;

  color: #62351F;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 16px;

  letter-spacing: 1px;
}


.seat-confirm-checkbox {
  width: 16px;

  height: 16px;

  min-width: 16px;

  min-height: 16px;

  flex:
    0
    0
    16px;

  margin: 0;

  padding: 0;

  border:
    1.5px solid
    #A87528;

  border-radius: 2px;

  background: transparent;

  display: inline-block;

  box-sizing: border-box;
}


.seat-confirmed {
  margin: 0;

  color: #A9341C;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 16px;

  font-weight: 600;

  letter-spacing: 1px;
}


/* ==================================================
   NOT FOUND
================================================== */

.not-found {
  width:
    min(
      420px,
      78vw
    );

  margin:
    0
    auto;

  padding:
    22px
    25px;

  background:
    rgba(
      255,
      249,
      239,
      0.96
    );

  border:
    2px solid
    #A87528;

  border-radius:
    18px;

  color: #62351F;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.15rem;

  box-shadow:
    0 8px 24px
    rgba(98, 53, 31, 0.16);
}


.not-found p {
  margin:
    5px
    0;
}


.not-found-heart {
  color: #A87528;

  font-family:
    Georgia,
    serif;

  font-size: 1.8rem;

  margin-bottom:
    8px;
}


.not-found-title {
  color: #62351F;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.35rem;

  font-weight: 600;

  margin-bottom:
    5px;
}


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

@media (max-width: 600px) {

  html,
  body {
    width: 100%;

    min-height: 200svh;

    margin: 0;
  }


  body {
    background-color: #FFF9EF;

    background-image:
      url("assets/background Image.png");

    /*
       Height remains AUTO so the background does
       NOT stretch when result cards appear.
    */

    background-size:
      120% auto;
    

    background-position:
      top center;

    background-repeat:
      no-repeat;

    padding:
      120px
      19px
      60px;
  }


  /* WELCOME TO */

    /* =========================================
     WELCOME BACK
     Bigger + slightly to the right
  ========================================= */

  .eyebrow {
    font-size: 1.05rem;
    letter-spacing: 6px;
    margin-bottom: 10px;

    position: relative;
    left: 22px;
  }


  /* =========================================
     "TO"
  ========================================= */

  .welcome-to {
    font-family: "Cormorant Garamond", serif;
    color: #62351F;

    font-size: 1.15rem;
    font-weight: 500;

    margin:
      0
      0
      12px;

    position: relative;
    left: 22px;
  }



  /* OUR WEDDING */

  h1 {
    font-size: 3rem;

    line-height: 1;

    white-space: nowrap;

    width: max-content;

    position: relative;
    left: 50%;
    transform: translateX(-50%);

    margin:
      0
      0
      14px;
  }


  /* HEART DIVIDER */

  .flourish-divider {
    width:
      230px;

    margin-bottom:
      12px;
  }


  .flourish-divider span {
    padding:
      0
      12px;

    font-size:
      1.3rem;
  }


  /* WELCOME MESSAGE */

  .find-heading {
    font-size:
      1.05rem;

    margin:
      0
      auto
      7px;

    width:
      90%;

    max-width:
      320px;
  }


  /* SEARCH INSTRUCTION */

  .search-instruction {
    font-size:
      1.05rem;

    margin-bottom:
      18px;
  }


  /* =========================================
     SEARCH AREA
     Move away from bottom-right flowers
  ========================================= */

  .search-area {
    width: 100%;

    margin:
      0
      auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    left: -24px;
  }

  /* SEARCH INPUT */

  input {
    display:
      block;

    width:
      78%;

    max-width:
      280px;

    height:
      48px;

    margin:
      0
      auto;

    padding:
      0
      16px;

    border:
      1.5px solid
      #A87528;

    border-radius:
      40px;

    background:
      rgba(
        255,
        249,
        239,
        0.76
      );

    color:
      #62351F;

    font-size:
      0.95rem;

    text-align:
      center;

    outline:
      none;
  }


  /* BUTTON */

  button {
    display:
      block;

    width:
      68%;

    max-width:
      235px;

    min-height:
      46px;

    margin:
      14px
      auto
      0;

    padding:
      9px
      14px;

    border:
      1.5px solid
      #A87528;

    border-radius:
      40px;

    background:
      #A9341C;

    color:
      #FFF9EF;

    font-size:
      0.82rem;

    letter-spacing:
      1.8px;

    white-space:
      nowrap;
  }


  /* RESULT CARD */

  .guest-card {
    width:
      88%;

    max-width:
      340px;

    margin:
      0
      auto;

    padding:
      24px
      18px
      26px;

    border:
      2px solid
      #A87528;

    border-radius:
      18px;
  }


  .result-decoration {
    width:
      75%;
  }


  .result-heart {
    font-size:
      1.4rem;
  }


  .welcome-text {
    font-size:
      2.8rem;
  }


  .guest-name {
    font-size:
      1.5rem;
  }


  /* RESULT CARD LEAF ONLY */

  .result-leaf-image {
    margin:
      8px
      auto
      11px;
  }


  .result-leaf-image img {
    width:
      68px;
  }


  .seat-text {
    font-size:
      0.85rem;

    letter-spacing:
      2px;
  }


  .table-number {
    font-size:
      2.9rem;

    letter-spacing:
      2px;

    margin:
      15px
      0;
  }


  .celebration-text {
    font-size:
      1.7rem;
  }


  .not-found {
    width:
      88%;

    max-width:
      320px;

    margin:
      0
      auto;

    font-size:
      1rem;
  }

}