/* ===============================
   Fonts
================================== */

@font-face {
  font-family: "ParisienneLocal";
  src: url("../fonts/Parisienne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ===============================
   Page
================================== */

body {
  margin: 0;
  padding: 50px 20px 80px;
  min-height: 100vh;

  background:
    radial-gradient(circle at top,
      #ffffff 0%,
      #eef9ff 30%,
      #d8efff 100%);

  color: #536677;
  text-align: center;
  font-family: "Segoe UI", Arial, sans-serif;
}


/* ===============================
   Typography
================================== */

p {
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 17px;
}

strong {
  color: #5f86a4;
}

h1,
h2 {
  margin: 0;
  color: #6b93b3;
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 600;
}

h1 {
  font-size: 42px;
}

h2 {
  font-size: 28px;
  margin-bottom: 18px;
  letter-spacing: .3px;
}


/* ===============================
   Header
================================== */

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -50px;
}

.churchImg {
    width: 110px;
    height: auto;

    margin-bottom: -38px;
}

.title-curve {
    margin-bottom: -10px;
}

.title-curve text {
    font-family: "ParisienneLocal", cursive;
    font-size: 80px;
    fill: #6b93b3;
}

.dateP {
  color: #6f8fa7;
  font-size: 18px;
  line-height: 1.7;
}


/* ===============================
   Cards
================================== */

.sectionBox {

  width: min(520px, calc(100% - 20px));

  margin: 30px auto;

  padding: 34px;

  background: rgba(255,255,255,.96);

  border-radius: 28px;

  box-sizing: border-box;

  box-shadow:
      0 12px 35px rgba(90,140,180,.12);

  backdrop-filter: blur(8px);
}

.sectionBox p{
    padding:0;
}


/* ===============================
   Registry Button
================================== */

.registryButton{

    display:inline-block;

    margin-top:26px;

    padding:15px 34px;

    border-radius:999px;

    background:#8fcdf5;

    color:#fff;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

    box-shadow:
        0 10px 24px rgba(143,205,245,.35);

}

.registryButton:hover{

    background:#79bdea;

    transform:translateY(-3px);

    box-shadow:
        0 14px 30px rgba(121,189,234,.40);

}


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

.rsvpForm{

    margin-top:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.rsvpForm input{

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

    padding:15px 18px;

    border:2px solid #d8ebf8;

    border-radius:999px;

    background:white;

    color:#536677;

    font-family:"Segoe UI", Arial, sans-serif;
    font-size:16px;

    transition:.25s;

    box-sizing:border-box;

}

.rsvpForm input::placeholder{
    color:#98a7b5;
}

.rsvpForm input:focus{

    outline:none;

    border-color:#8fcdf5;

    box-shadow:
        0 0 0 5px rgba(143,205,245,.20);

}

.rsvpForm button{

    padding:15px 28px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    background:
        linear-gradient(180deg,
            #9bd8fb 0%,
            #7dc5ef 100%);

    color:white;

    font-family:"Segoe UI", Arial, sans-serif;
    font-size:16px;
    font-weight:600;

    box-shadow:
        0 8px 18px rgba(125,197,239,.35);

    transition:.25s;

}

.rsvpForm button:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(180deg,
            #8fcdf5 0%,
            #69b9e8 100%);

}


/* ===============================
   Language
================================== */

.lang-switch{

    position:absolute;

    top:22px;
    right:24px;

    display:flex;
    gap:10px;

}

.lang-switch a{

    padding:6px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.8);

    color:#6b93b3;

    text-decoration:none;

    font-size:14px;

    transition:.2s;

}

.lang-switch a:hover,
.lang-switch .active{

    background:white;

    box-shadow:
        0 5px 15px rgba(80,120,170,.15);

}


/* ===============================
   Footer
================================== */

footer{
    height:60px;
}


/* ===============================
   Mobile
================================== */

@media (max-width:600px){

body{
    padding:40px 12px 60px;
}

.title-curve text{
    font-size:58px;
}

.churchImg{
    width:90px;
    margin-bottom:-30px;
}

.sectionBox{
    padding:26px 22px;
    border-radius:22px;
}

h2{
    font-size:24px;
}

p{
    font-size:16px;
}

.dateP{
    font-size:16px;
}

.registryButton{
    width:100%;
    box-sizing:border-box;
}

.rsvpForm{
    flex-direction:column;
}

.rsvpForm input,
.rsvpForm button{
    width:100%;
}

}

/* ===============================
   Invitation access page
================================== */

.accessBox {
  margin-top: 80px;
}

.accessForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
}

.accessForm label {
  color: #536677;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.accessForm input {
  width: 100%;
  padding: 15px 18px;
  box-sizing: border-box;

  border: 2px solid #d8ebf8;
  border-radius: 999px;

  background: #ffffff;
  color: #536677;

  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  text-align: center;
}

.accessForm input:focus {
  border-color: #8fcdf5;
  outline: none;
  box-shadow: 0 0 0 5px rgba(143, 205, 245, 0.2);
}

.accessForm button {
  padding: 15px 28px;

  border: none;
  border-radius: 999px;

  background: linear-gradient(
    180deg,
    #9bd8fb 0%,
    #7dc5ef 100%
  );

  color: #ffffff;

  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;

  cursor: pointer;

  box-shadow: 0 8px 18px rgba(125, 197, 239, 0.35);

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

.accessForm button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(105, 185, 232, 0.4);
}

.formError {
  color: #b34d4d;
  font-size: 14px;
  line-height: 1.5;
}