/* ==========================================================
   Gaeta–Esparza Wedding — Styles
   Color palette from invitation:
     cream     #f5f0e8
     burgundy  #6b1d2a
     gold      #c4952b
     dark text #3a2a2a
     light     #fdfbf7
   ========================================================== */

/* ── Reset & base ────────────────────────────────────────── */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   font-size: 16px;
}

body {
   font-family: "Cormorant Garamond", Georgia, serif;
   background: #f5f0e8;
   color: #3a2a2a;
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

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

a {
   color: #6b1d2a;
   text-decoration: none;
   transition: color 0.3s ease;
}
a:hover,
a:focus-visible {
   color: #c4952b;
}

/* ── Container ───────────────────────────────────────────── */
.container {
   width: 90%;
   max-width: 960px;
   margin: 0 auto;
   padding: 0 1rem;
}

/* ── Section titles ──────────────────────────────────────── */
.section-title {
   font-family: "Playfair Display", Georgia, serif;
   font-weight: 700;
   font-size: clamp(1.8rem, 4vw, 2.6rem);
   color: #6b1d2a;
   text-align: center;
   margin-bottom: 2.5rem;
   letter-spacing: 0.02em;
}

/* ── Reveal animation (Intersection Observer) ────────────── */
.reveal {
   opacity: 0;
   transform: translateY(30px);
   transition:
      opacity 0.8s ease,
      transform 0.8s ease;
}
.reveal.is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.hero__overlay {
   position: absolute;
   inset: 0;
   background: rgba(245, 240, 232, 0.35);
   z-index: 1;
}

.hero__picture {
   position: absolute;
   inset: 0;
   z-index: 0;
}
.hero__picture img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hero__inner {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: 2rem;
   width: 90%;
   max-width: 1100px;
   padding: 3rem 0;
}

.hero__content {
   text-align: left;
}

.hero__photo {
   display: flex;
   justify-content: center;
}
.hero__photo img {
   width: 100%;
   max-width: 420px;
   height: auto;
   border-radius: 10px;
   box-shadow: 0 8px 40px rgba(58, 42, 42, 0.18);
   object-fit: cover;
}

.hero__invitation {
   font-family: "Cormorant Garamond", Georgia, serif;
   font-size: clamp(1rem, 2.5vw, 1.3rem);
   font-weight: 400;
   color: #6b1d2a;
   margin-bottom: 0.5rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

.hero__title {
   font-family: "Playfair Display", Georgia, serif;
   font-size: clamp(3rem, 7vw, 5.5rem);
   font-weight: 700;
   font-style: italic;
   color: #6b1d2a;
   line-height: 1.1;
   margin-bottom: 1.5rem;
}

.hero__names {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.2rem;
   margin-bottom: 1.5rem;
}

.hero__name {
   font-family: "Playfair Display", Georgia, serif;
   font-size: clamp(1.5rem, 3.5vw, 2.2rem);
   font-weight: 400;
   color: #3a2a2a;
   letter-spacing: 0.04em;
}

.hero__ampersand {
   font-family: "Cormorant Garamond", Georgia, serif;
   font-size: clamp(1.2rem, 3vw, 1.8rem);
   font-style: italic;
   color: #c4952b;
   padding-left: 1rem;
}

.hero__date {
   font-family: "Playfair Display", Georgia, serif;
   font-size: clamp(1.2rem, 3vw, 1.6rem);
   font-style: italic;
   color: #c4952b;
   letter-spacing: 0.06em;
}

@media (max-width: 768px) {
   .hero__inner {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 6rem 0 3rem;
   }
   .hero__content {
      text-align: center;
      order: 1;
   }
   .hero__photo {
      order: 2;
   }
   .hero__names {
      align-items: center;
   }
   .hero__ampersand {
      padding-left: 0;
   }
   .hero__photo img {
      max-width: 300px;
   }
}

/* ============================================================
   EVENT DETAILS
   ============================================================ */
.details {
   padding: 5rem 0;
   background: #fdfbf7;
   content-visibility: auto;
   contain-intrinsic-size: auto 500px;
}

.details__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
}

.details__card {
   text-align: center;
   padding: 2.5rem 1.5rem;
   border: 1px solid #e6d9c6;
   border-radius: 8px;
   background: #f5f0e8;
}

.details__heading {
   font-family: "Playfair Display", Georgia, serif;
   font-size: 1.5rem;
   font-style: italic;
   color: #6b1d2a;
   margin-bottom: 1rem;
}

.details__time {
   font-size: 1.15rem;
   font-weight: 600;
   color: #c4952b;
   margin-bottom: 0.5rem;
}

.details__venue {
   font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: 0.25rem;
}

.details__address {
   font-style: normal;
   color: #6b6057;
   margin-bottom: 1rem;
   line-height: 1.5;
}

.details__map-link {
   display: inline-block;
   font-size: 0.95rem;
   font-weight: 600;
   color: #6b1d2a;
   border-bottom: 1px solid #6b1d2a;
   padding-bottom: 2px;
   transition:
      color 0.3s ease,
      border-color 0.3s ease;
}
.details__map-link:hover,
.details__map-link:focus-visible {
   color: #c4952b;
   border-color: #c4952b;
}

@media (max-width: 700px) {
   .details__grid {
      grid-template-columns: 1fr;
      gap: 2rem;
   }
}

/* ============================================================
   RSVP
   ============================================================ */
.rsvp {
   padding: 5rem 0;
   content-visibility: auto;
   contain-intrinsic-size: auto 600px;
}

.rsvp__layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
   align-items: center;
}

.rsvp__photo img {
   width: 100%;
   height: auto;
   border-radius: 10px;
   box-shadow: 0 8px 40px rgba(58, 42, 42, 0.15);
   object-fit: cover;
}

.rsvp__content .section-title {
   text-align: left;
}

.rsvp__subtitle {
   font-size: 1.15rem;
   color: #6b6057;
   margin-top: -1.5rem;
   margin-bottom: 2.5rem;
}

.rsvp__form {
   max-width: 480px;
}

@media (max-width: 768px) {
   .rsvp__layout {
      grid-template-columns: 1fr;
      gap: 2rem;
   }
   .rsvp__photo {
      order: -1;
   }
   .rsvp__photo img {
      max-width: 400px;
      margin: 0 auto;
   }
   .rsvp__content .section-title {
      text-align: center;
   }
   .rsvp__subtitle {
      text-align: center;
   }
   .rsvp__form {
      margin: 0 auto;
   }
}

/* Honeypot — visually hidden but accessible to bots */
.rsvp__honey {
   position: absolute;
   left: -9999px;
   height: 0;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
}

.rsvp__field {
   margin-bottom: 1.5rem;
}

.rsvp__label {
   display: block;
   font-family: "Playfair Display", Georgia, serif;
   font-size: 1.05rem;
   font-weight: 600;
   color: #6b1d2a;
   margin-bottom: 0.4rem;
}

.rsvp__input {
   width: 100%;
   padding: 0.75rem 1rem;
   font-family: "Cormorant Garamond", Georgia, serif;
   font-size: 1.1rem;
   color: #3a2a2a;
   background: #fdfbf7;
   border: 1px solid #d4c8b8;
   border-radius: 6px;
   transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
}
.rsvp__input:focus {
   outline: none;
   border-color: #6b1d2a;
   box-shadow: 0 0 0 3px rgba(107, 29, 42, 0.12);
}
.rsvp__input.is-invalid {
   border-color: #b83232;
}

.rsvp__error {
   display: block;
   font-size: 0.85rem;
   color: #b83232;
   min-height: 1.2em;
   margin-top: 0.3rem;
}

.rsvp__submit {
   display: block;
   width: 100%;
   padding: 0.9rem 2rem;
   font-family: "Playfair Display", Georgia, serif;
   font-size: 1.15rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   color: #fdfbf7;
   background: #6b1d2a;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   transition:
      background 0.3s ease,
      transform 0.2s ease;
   position: relative;
}
.rsvp__submit:hover {
   background: #862440;
}
.rsvp__submit:active {
   transform: scale(0.98);
}
.rsvp__submit:disabled {
   opacity: 0.7;
   cursor: not-allowed;
}

.rsvp__submit-loading {
   display: none;
}
.rsvp__submit.is-loading .rsvp__submit-text {
   display: none;
}
.rsvp__submit.is-loading .rsvp__submit-loading {
   display: inline;
}

/* Feedback message */
.rsvp__message {
   text-align: center;
   margin-top: 1.5rem;
   font-size: 1.05rem;
   min-height: 1.5em;
}
.rsvp__message.is-success {
   color: #2d6b3f;
}
.rsvp__message.is-error {
   color: #b83232;
}

/* ============================================================
   GUEST INFO
   ============================================================ */
.info {
   position: relative;
   padding: 5rem 0;
   overflow: hidden;
   content-visibility: auto;
   contain-intrinsic-size: auto 500px;
}

.info__backdrop {
   position: absolute;
   inset: 0;
   background: url("img/LaceBackDropwFlower.png") no-repeat center center;
   background-size: cover;
   opacity: 0.35;
   z-index: 0;
}

.info .container {
   position: relative;
   z-index: 1;
}

.info__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
}

.info__card {
   padding: 2rem 1.5rem;
   border-radius: 8px;
   background: #f5f0e8;
   border: 1px solid #e6d9c6;
}

.info__heading {
   font-family: "Playfair Display", Georgia, serif;
   font-size: 1.2rem;
   font-style: italic;
   color: #6b1d2a;
   margin-bottom: 0.75rem;
}

.info__card p {
   font-size: 1rem;
   color: #5a4d44;
   line-height: 1.65;
}
.info__card p + p {
   margin-top: 0.6rem;
}

@media (max-width: 800px) {
   .info__grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
   padding: 3rem 0;
   text-align: center;
   background: #6b1d2a;
   color: #f5f0e8;
}

.footer__names {
   font-family: "Playfair Display", Georgia, serif;
   font-size: 1.6rem;
   font-style: italic;
   margin-bottom: 0.3rem;
}

.footer__date {
   font-size: 1rem;
   opacity: 0.8;
}

/* ============================================================
   UTILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
   .reveal {
      opacity: 1;
      transform: none;
      transition: none;
   }
   html {
      scroll-behavior: auto;
   }
}