/* Color Variables */
:root {
    --primary: #0a2338;
    --secondary: #E0FBFC;
    --accent: #BF391E;
    --white: #ffffff;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    color: var(--primary);
    line-height: 1.6;
}

a {
    font-family: "Oswald", sans-serif;
}

a:hover,
button:hover,
label.el-radio.cog-checkable__item.cog-choice-option:hover {
    cursor: pointer;
}

h1, h2, h3, h4,
html .cog-cognito--styled .cog-header h1, 
:root:root:root:root:root .cog-cognito--styled .cog-header h1 {
  font-family: "Great Vibes", cursive !important;
  font-weight: 400;
  font-style: normal;
}

/* Top Menu */
.top-menu {
    width: 100%;
    position: fixed;
    z-index: 999;
    margin: 0;
    background: #fff;
    background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.75) 75%, rgba(255, 255, 255, 0) 100%);
    text-align: center;
    padding: 10px 20px;
}

.top-menu ul li {
    display: inline-block;
    list-style-type: none;
}

.top-menu ul li a {
    text-decoration: none;
    color: var(--primary);
    margin: 0px 5px;
    padding: 5px 10px;
    
}

/* Hero Section */
.hero {
    background: url('images/rsvp-hero.jpg') no-repeat scroll right center;
    background-size: cover;
    padding: 10vw 20px 10vw;
    text-align: center;
    border-bottom: 4px solid var(--accent);
}

.hero-inner {
    max-width: 50%;
    margin-left: 25%;
    text-align: left;
    padding: 2rem 0rem 2rem 3rem;
    background: linear-gradient(90deg, rgb(255 255 255) 0%, rgb(255 255 255 / 16%) 80%, rgb(255 255 255 / 0%) 100%);
}

.hero-inner h1 {
    font-size: 5rem;
    letter-spacing: 1px;
    line-height: 1;
}

.wedding-date {
    margin-top: 5px;
    font-size: 2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.rsvp-deadline {
    margin-top: 5px;
    font-size: 1.75rem;
    margin-bottom: 25px;
}

.rsvp-deadline span {
    color: var(--accent);
    font-weight: bold;
}

.rsvp-button {
    background: var(--accent);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    text-decoration: none;
}

.rsvp-button:hover {
    background: #184063;
    cursor: pointer;
}

/* ── Countdown Widget ─────────────────────────────────── */
    #countdown {
        position: relative;
        text-align: center;
    }

    .countdown-widget {
      position: relative;
      margin: 0 auto;
      text-align: center;
      padding: 25px 50px;
      background: var(--primary);
      max-width: 100%;
      box-shadow: 0px 0px 10px 2px #222;
    }
    
    /* divider line + diamond */
    .divider {
      position: relative;
      margin: 16px auto 20px;
      width: 160px;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--accent), transparent);
    }
    .divider::after {
      content: '◆';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--accent);
      font-size: 8px;
      background: var(--primary);
      padding: 0 6px;
    }

    /* heading */
    .countdown-eyebrow {
      font-family: "Great Vibes", cursive;
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: #fff;
    }
    .countdown-title {
      font-family: "Great Vibes", cursive;
      font-size: clamp(28px, 5vw, 40px);
      font-weight: 300;
      font-style: italic;
      color: #fff;
      line-height: 1.15;
      margin-top: 6px;
    }

    /* ── number grid ─────────────────────────── */
    .countdown-grid {
      display: flex;
      justify-content: center;
      gap: clamp(10px, 2.5vw, 24px);
      margin-top: 28px;
      flex-wrap: wrap;
    }

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

    .countdown-number {
      font-family: 'Cinzel', serif;
      font-size: clamp(38px, 7vw, 60px);
      font-weight: 600;
      color: #fff;
      line-height: 1;
      transition: color .4s;
      position: relative;
    }

    /* strikethrough — two lines that scale with the number */
    .countdown-number .strike {
      display: none;
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .countdown-number .strike::before,
    .countdown-number .strike::after {
      content: '';
      position: absolute;
      left: -4px;
      right: -4px;
      height: 3px;
      background: var(--accent);
      border-radius: 2px;
    }
    .countdown-number .strike::before { top: 35%; }
    .countdown-number .strike::after  { top: 60%; }

    .countdown-label {
      font-family: 'Cinzel', serif;
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #fff;
      margin-top: 8px;
    }

    /* separator dots */
    .countdown-sep {
      font-family: 'Cinzel', serif;
      font-size: clamp(30px, 5vw, 48px);
      font-weight: 600;
      color: var(--accent);
      align-self: flex-start;
      margin-top: 4px;
      line-height: 1;
    }

    /* ── wedding-day state ───────────────────── */
    .wedding-day-msg {
      display: none;
      margin-top: 22px;
      font-family: "Great Vibes", cursive;
      font-size: clamp(22px, 4.5vw, 34px);
      font-style: italic;
      color: #fff;
      animation: fadeRise .9s ease forwards;
    }
    .wedding-day-msg .hearts {
      font-style: normal;
      font-size: .85em;
      letter-spacing: .1em;
    }

    @keyframes fadeRise {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* when JS adds .is-wedding-day */
    .countdown-widget.is-wedding-day .countdown-number {
      color: #fff;
    }
    .countdown-widget.is-wedding-day .countdown-number .strike {
      display: block;
      animation: strikeIn .5s ease forwards;
    }
    @keyframes strikeIn {
      from { opacity: 0; transform: scaleX(0); }
      to   { opacity: 1; transform: scaleX(1); }
    }
    .countdown-widget.is-wedding-day .wedding-day-msg {
      display: block;
    }

    /* ── date line ───────────────────────────── */
    .countdown-date {
      margin-top: 20px;
      font-family: 'Cinzel', serif;
      font-size: 11px;
      letter-spacing: .2em;
      color: #fff;
    }

/*ROWS AND COLUMNS */
#ceremony .row {
    display: block;
    margin: 0 auto;
    min-height: 100px;
    box-sizing: border-box;
    padding: 20px;
    max-width: 50%;
    margin-left: 25%;
    position: relative;
}

#ceremony .row .col-half {
    width: 50%;
    margin: 0;
    float: left;
    position: relative;
}

#ceremony .row .col-half.left {
    padding-right: 20px;
    padding-bottom: 50px;
}

#ceremony .row .col-half.right {
    padding-top: 40px;
    padding-left: 20px;
}

/* Ceremony */
#ceremony {
    padding: 2rem 5vw;
    display: block;
    position: relative;
}

#ceremony h3 {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 20px;
}

#ceremony p {
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.25;
}

#ceremony p strong {
    font-weight: 700;
}

#ceremony img {
    max-width: 300px;
}

#ceremony hr {
    margin: 20px 0px;
    color: var(--primary);
}

#ceremony a {
    text-decoration: none;
    font-weight: 700;
    font-family: "Oswald", sans-serif;
}

.text-orange,
.text-orange a {
    color: var(--accent) !important;
}

/* RSVP Section */
.rsvp-section {
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    background: #0a2338;
    clear: both;
    /*background: url('images/paper-bkgd.jpg') no-repeat scroll center;*/
    /*background-size: 150%;*/
}

.rsvp-container {
    max-width: 800px;
    width: 100%;
    text-align: center;
    /*margin-top: -20vw;*/
    background: #fff;
    /*background: #f8efe8;*/
    border: 1px solid #0a2338;
    outline: 1px solid #0a2338; /* Inner outline (color of the gap/second line) */
    outline-offset: -8px;
    padding: 20px;
    box-shadow: 0px 1px 15px -2px #585858;
}

.rsvp-container h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.rsvp-description {
    max-width: 600px;
    margin: 0 auto 15px auto;
    font-size: 1rem;
    color: #184063;
}

/* Form Placeholder Box */
.form-placeholder {
    width: 100%;
    padding: 20px;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Optional subtle label inside placeholder */
/*.form-placeholder::after {*/
/*    content: "RSVP FORM WILL BE INSERTED HERE";*/
/*    font-size: 0.9rem;*/
/*    letter-spacing: 2px;*/
/*    color: var(--primary);*/
/*    opacity: 0.5;*/
/*}*/

/*Form Settings */
html .cog-form__container, :root:root:root:root:root .cog-form__container {
    background: transparent;
}

h1.cog-heading {
   display: none;
}

/* Footer */
footer {
    text-align: center;
    padding: 40px 20px 60px 20px;
    background: #0a2338;
}

.accent-line {
    width: 80px;
    height: 4px;
    background-color: var(--accent);
    margin: 0 auto 20px auto;
}

footer p {
    font-size: 0.9rem;
    color: #fff;
}

.fade-in-onload {
    opacity: 0;
  animation: fadeIn 3s forwards; /* Apply the fadeIn animation over 2 seconds */
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0; /* At the start of the animation (0%), opacity is 0 */
  }
  100% {
    opacity: 1; /* At the end of the animation (100%), opacity is 1 */
  }
}



/* Responsive */
@media (max-width: 1440px) {
    #ceremony h3 {
        font-size: 2.5rem;
    }
    
     #ceremony .row .col-half iframe {
         max-width: 100%;
     }
}

@media (max-width: 768px) {
    .hero {
        background: url(images/rsvp-hero.jpg) no-repeat scroll 88% center;
        background-size: cover;
    }
    
    .hero-inner {
        max-width: 100%;
        margin-left: 0;
        background: linear-gradient(90deg, rgb(255 255 255) 0%, rgb(255 255 255 / 16%) 90%, rgb(255 255 255 / 0%) 100%);
        padding: 1rem;
    }
    
    .hero-inner h1 {
        font-size: 2rem;
        line-height: 1;
    }
    
    .wedding-date {
        margin-top: 5px;
    }
    
    .rsvp-deadline {
        margin-top: 5px;
    }
    
    #countdown {
        text-align: left;
    }
    
    .countdown-widget {
        padding: 20px 30px;
        max-width: 100vw;
        position: relative;
    }
    
    .countdown-title {
        font-size: clamp(25px, 4vw, 45px);
    }
    
    .countdown-grid {
        gap: clamp(10px, 2vw, 24px);
    }
    
    .countdown-unit {
        min-width: 30px;
    }
    
    .countdown-number {
        font-size: clamp(25px, 4vw, 45px);
    }
    
    #ceremony {
        display: inline-block;
    }
    
    #ceremony .row {
        max-width: 90%;
        margin-left: auto;
    }
    
    #ceremony .row .col-half {
        width: 50%;
        display: inline-block;
        margin: 0;
        float: left;
        position: relative;
    }
    
    #ceremony h3 {
        font-size: 2rem;
    }
    
     #ceremony .row .col-half iframe {
         max-width: 100%;
     }
    
    .rsvp-section {
        padding: 30px 20px;
        display: block;
        max-width: 100vw;
    }
    
    .rsvp-container {
        margin-top: 0;
        max-width: 100vw;
    }

    .rsvp-container h2 {
        font-size: 1.6rem;
    }
}

@media (max-width: 642px) {
    .hero {
        padding: 90px 20px;
    }
    
    .hero-inner {
        padding: 0.5rem;
        margin-left: 0;
        background: linear-gradient(90deg, rgb(255 255 255) 0%,rgb(255 255 255/ 8%) 73%,  rgb(255 255 255 / 16%) 75%, rgb(255 255 255 / 0%) 100%);
    }
    
    .wedding-date,
    .rsvp-deadline {
        font-size: 1rem;
        lin-height: 1;
    }
    
    .rsvp-button {
        padding: 5px 15px;
        font-size: 0.85rem;
    }
    
    #ceremony {
        padding: 2rem;
    }
    
    #ceremony .row {
        max-width: 100%;
        margin-left: auto;
    }
    
    #ceremony .row .col-half {
        width: 100%;
        margin: 0;
        float: left;
        position: relative;
    }
    
    #ceremony .row .col-half.right br {
        display: none;
    }
     
    #ceremony .row .col-half.left {
        padding-bottom: 0px;
        padding-right: 5px;
    }
    
    #ceremony .row .col-half.right {
        padding-left: 0px;
    }
    
    #ceremony .row .col-half iframe {
        max-width: 50%;
        padding-right: 10px;
        margin: 0;
        float: left;
        position: relative;
    }
    
    #ceremony .row .col-half iframe:nth-child(2) {
        padding-left: 10px;
        padding-right: 0px;
    }
}