/* ==========================================================
   Christian Wedding Template 1 – white, beige, oyster & silky maroon
   Every selector is prefixed .ch- so nothing leaks into the editor.
   Each section carries its own background so the editor can recolour it.
   ========================================================== */
.ch-sec, .ch-top {
  --white: #FFFFFF;
  --ivory: #FBF8F3;
  --beige: #EADFCF;
  --beige-l: #F4EDE1;
  --oyster: #DCD5C8;
  --oyster-d: #C7BEAE;
  --maroon: #6D1A2C;
  --maroon-d: #4A0E1D;
  --maroon-l: #9A2C45;
  --champ: #B89B6A;
  --champ-l: #E4D3AE;
  --ink: #3B2A2F;
  --font-display: "Playfair Display", Georgia, serif;
  --font-script: "Allura", cursive;
  --font-body: "Jost", system-ui, sans-serif;
}
.ch-sec, .ch-sec *, .ch-sec *::before, .ch-sec *::after { box-sizing: border-box; }

/* ---------- Section shell ---------- */
.ch-sec {
  position: relative; overflow: hidden; padding: 96px 24px 84px;
  font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.8; color: var(--ink);
  background-color: var(--ivory);
}
.ch-sec.ch-ivory { background: linear-gradient(180deg, #FFFFFF, #FBF8F3); }
.ch-sec.ch-beige { background: radial-gradient(circle at 50% 0%, #F7F1E6 0%, transparent 70%), linear-gradient(180deg, #EADFCF, #E3D6C2); }
.ch-sec.ch-oyster { background: radial-gradient(circle at 50% 100%, #E8E3D8 0%, transparent 70%), linear-gradient(180deg, #DCD5C8, #D2CABB); }
.ch-sec.ch-maroon { background: radial-gradient(circle at 50% 0%, #8A2439 0%, transparent 65%), linear-gradient(180deg, #6D1A2C, #4A0E1D); color: #F6ECDD; }
.ch-sec p, .ch-sec h1, .ch-sec h2, .ch-sec h3 { margin: 0; }
.ch-sec img { max-width: 100%; }
.ch-sec a { color: var(--maroon); }
.ch-inner { position: relative; z-index: 2; max-width: 1060px; margin: 0 auto; }
.ch-center { text-align: center; }

/* ---------- Common type ---------- */
.ch-eyebrow { font-size: .8rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--champ); margin-bottom: 10px !important; }
.ch-maroon .ch-eyebrow { color: var(--champ-l); }
.ch-title { font-family: var(--font-display); font-weight: 600; color: var(--maroon); font-size: clamp(1.9rem, 4.8vw, 2.8rem); line-height: 1.25; }
.ch-flourish { display: block; width: min(260px, 60%); margin: 8px auto 16px; }
.ch-lead { font-size: clamp(1.02rem, 2.2vw, 1.2rem); max-width: 700px; margin: 0 auto !important; color: var(--ink); opacity: .88; }

/* ---------- Buttons ---------- */
.ch-btn {
  display: inline-block; cursor: pointer; font: 500 .86rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  padding: 17px 38px; color: #FFF6E6 !important; border: 1px solid var(--maroon-d);
  background: linear-gradient(180deg, #8A2439, #6D1A2C 55%, #4A0E1D); border-radius: 2px;
  box-shadow: 0 6px 16px rgba(74, 14, 29, .3), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s, box-shadow .2s;
}
.ch-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(74, 14, 29, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ch-btn.ch-btn-light { background: transparent; color: #F6ECDD !important; border-color: var(--champ-l); box-shadow: none; margin-top: 28px; }
.ch-btn.ch-btn-light:hover { background: var(--champ-l); color: var(--maroon-d) !important; }

/* ---------- Hero: silk drape arch ---------- */
.ch-hero { padding: 0 24px 80px; background: radial-gradient(circle at 50% 8%, #FFFFFF 0%, #F6F0E6 55%, #EDE3D3 100%); }
.ch-sec .ch-drape { display: block; position: relative; z-index: 1; height: auto; min-height: 150px; margin: 0 -24px; width: calc(100% + 48px); max-width: none; }
.ch-hero .ch-inner { margin-top: calc(-0.325 * min(100vw, 1600px)); padding-top: 0; }
.ch-hero-top { padding-top: calc(0.085 * min(100vw, 1600px)); min-height: calc(0.325 * min(100vw, 1600px)); }
.ch-hero-rings { width: clamp(64px, 7vw, 110px); margin: 0 auto 4px; display: block; filter: drop-shadow(0 6px 8px rgba(90, 60, 10, .25)); }
.ch-hero-names { font-family: var(--font-script); font-weight: 400; color: var(--maroon); font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: 1.1; }
.ch-hero-names i { font-style: normal; font-family: var(--font-display); font-weight: 400; color: var(--champ); font-size: .5em; padding: 0 .12em; }
.ch-hero-date { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--ink); }
.ch-hero-couple { position: relative; display: flex; justify-content: center; align-items: flex-end; margin: 26px auto 8px; }
.ch-hero-couple::before { content: ""; position: absolute; left: 50%; bottom: -8px; width: min(560px, 96%); height: 46px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(120, 90, 50, .28), transparent 70%); }
.ch-hero-couple img { position: relative; height: clamp(300px, 46vw, 460px); width: auto; margin: 0 -10px; filter: drop-shadow(0 12px 14px rgba(70, 40, 20, .25)); }
.ch-hero-place { font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: var(--maroon); margin: 18px 0 20px !important; font-weight: 500; }

/* ---------- Invitation card ---------- */
.ch-card { position: relative; max-width: 760px; margin: 0 auto; padding: 56px 46px 50px; background: #FFFFFF; border: 1px solid var(--maroon); box-shadow: 0 0 0 8px #FFFFFF, 0 0 0 9px var(--champ), 0 24px 40px rgba(74, 14, 29, .12); }
.ch-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--champ-l); pointer-events: none; }
.ch-cross { width: 38px; margin: 0 auto 12px; display: block; }
.ch-parents { font-family: var(--font-display); font-weight: 600; color: var(--maroon); font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.5; }
.ch-and { font-family: var(--font-script); font-size: 2.2rem; color: var(--champ); line-height: 1.2; }
.ch-verse { margin-top: 26px !important; font-family: var(--font-display); font-style: italic; color: var(--maroon); font-size: 1.05rem; }
.ch-verse span { display: block; font-family: var(--font-body); font-style: normal; font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--champ); margin-top: 6px; }

/* ---------- Couple ---------- */
.ch-couple-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 48px; }
.ch-bust { width: min(250px, 78%); aspect-ratio: 1; margin: 0 auto 22px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #FFFFFF, #E8DCC8); border: 6px solid #FFFFFF; box-shadow: 0 0 0 1px var(--champ), 0 0 0 9px #FFFFFF, 0 0 0 10px var(--champ-l), 0 18px 30px rgba(74, 14, 29, .18); }
.ch-bust img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.ch-name { font-family: var(--font-script); font-weight: 400; color: var(--maroon); font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1.1; }
.ch-fullname { font-family: var(--font-display); font-style: italic; color: var(--ink); margin-bottom: 8px !important; }
.ch-childof { font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--champ); }
.ch-pnames { font-weight: 500; color: var(--maroon); }
.ch-mid-rings { width: 110px; margin: 0 auto; display: block; }

/* ---------- Our story ---------- */
.ch-timeline { position: relative; max-width: 860px; margin: 52px auto 0; }
.ch-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--champ) 12%, var(--champ) 88%, transparent); }
.ch-step { position: relative; display: flex; width: 50%; margin-bottom: 44px; padding-right: 54px; justify-content: flex-end; text-align: right; }
.ch-step:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: 54px; justify-content: flex-start; text-align: left; }
.ch-step-dot { position: absolute; top: 4px; right: -34px; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9A2C45, #6D1A2C 70%); border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px var(--champ), 0 8px 16px rgba(74, 14, 29, .3); color: #FFF3DC; font-family: var(--font-display); font-weight: 600; }
.ch-step:nth-child(even) .ch-step-dot { right: auto; left: -34px; }
.ch-step-body { padding-top: 8px; max-width: 340px; }
.ch-step-title { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; color: var(--maroon); margin-bottom: 6px !important; }
.ch-step-text { opacity: .88; }

/* ---------- Schedule ---------- */
.ch-schedule { max-width: 820px; margin: 44px auto 0; border-top: 1px solid var(--champ); }
.ch-row { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: baseline; padding: 26px 8px; border-bottom: 1px solid rgba(184, 155, 106, .55); }
.ch-row-time { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--maroon); text-align: right; line-height: 1.3; }
.ch-row-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink); }
.ch-row-text { opacity: .85; margin-top: 2px !important; }

/* ---------- Countdown ---------- */
.ch-cd-date { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: #FFF3DC; margin-bottom: 8px !important; }
.ch-countdown { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 22px); flex-wrap: wrap; margin-top: 22px; }
.ch-countdown > div { width: clamp(84px, 19vw, 130px); padding: 22px 8px 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); border: 1px solid var(--champ-l); box-shadow: inset 0 0 0 5px rgba(74, 14, 29, .6), inset 0 0 0 6px rgba(228, 211, 174, .5); }
.ch-countdown b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.1; color: #FFF6E6; }
.ch-countdown span { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--champ-l); }

/* ---------- Venues ---------- */
.ch-venue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 46px; }
.ch-venue { padding: 46px 30px 40px; background: #FFFFFF; border: 1px solid var(--champ-l); box-shadow: 0 0 0 7px #FFFFFF, 0 0 0 8px var(--champ-l), 0 20px 34px rgba(74, 14, 29, .1); }
.ch-venue-ico { width: 60px; height: 70px; object-fit: contain; margin: 0 auto 12px; display: block; }
.ch-venue-name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--maroon); line-height: 1.35; }
.ch-address { line-height: 1.9; margin-bottom: 10px !important; }
.ch-venue-time { font-family: var(--font-display); font-style: italic; color: var(--champ); font-size: 1.2rem; margin-bottom: 20px !important; }

/* ---------- Wedding party ---------- */
.ch-party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 880px; margin: 44px auto 0; }
.ch-party-head { font-family: var(--font-script); font-weight: 400; font-size: 2.6rem; color: var(--maroon); text-align: center; line-height: 1.2; margin-bottom: 14px !important; }
.ch-pr { display: flex; justify-content: space-between; gap: 16px; padding: 13px 4px; border-bottom: 1px solid rgba(109, 26, 44, .22); }
.ch-pr-role { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--maroon); font-weight: 500; align-self: center; }
.ch-pr-name { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }

/* ---------- Details ---------- */
.ch-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; }
.ch-info { padding: 12px 32px; }
.ch-info + .ch-info { border-left: 1px solid var(--champ-l); }
.ch-info .ch-flourish { width: 150px; }
.ch-info-head { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--maroon); margin-bottom: 8px !important; }
.ch-info-text { opacity: .88; font-size: .98rem; }

/* ---------- RSVP ---------- */
.ch-rsvp { max-width: 760px; margin: 32px auto 0; padding: 40px 38px 34px; background: #FFFFFF; border: 1px solid var(--maroon); box-shadow: 0 0 0 7px #FFFFFF, 0 0 0 8px var(--champ), 0 22px 36px rgba(74, 14, 29, .14); }
.ch-rsvp .mt_popup_form_container { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.ch-rsvp .mt_form_input:last-child { grid-column: 1 / -1; }
.ch-rsvp input, .ch-rsvp textarea { display: block; width: 100%; padding: 14px 4px; font: 400 1rem var(--font-body); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--champ); border-radius: 0; }
.ch-rsvp input:focus, .ch-rsvp textarea:focus { outline: 0; border-bottom-color: var(--maroon); }
.ch-rsvp .mtdefaultformbtn { width: 100%; margin-top: 26px; }
.ch-form-note { text-align: center; color: var(--maroon); font-weight: 500; min-height: 1.5em; margin-top: 12px !important; }
.ch-rsvp-contact { margin-top: 22px !important; opacity: .85; }

/* ---------- Footer ---------- */
.ch-footer { padding-top: 110px; padding-bottom: 64px; background: radial-gradient(circle at 50% 0%, #8A2439 0%, transparent 65%), linear-gradient(180deg, #6D1A2C, #3E0B18); color: #F6ECDD; }
.ch-foot-pearls { position: absolute; top: 10px; left: 50%; width: min(760px, 90%); transform: translateX(-50%); opacity: .9; }
.ch-foot-rings { width: 110px; margin: 0 auto 6px; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.ch-thanks { font-size: .8rem; letter-spacing: .34em; text-transform: uppercase; color: var(--champ-l); }
.ch-big { font-family: var(--font-script); font-size: clamp(3.4rem, 9vw, 5.4rem); color: #FFF6E6; line-height: 1.15; }
.ch-hashtag { letter-spacing: .2em; color: var(--champ-l); font-weight: 500; }
.ch-tiny { font-size: .88rem; opacity: .75; margin-top: 4px !important; }

/* ---------- Back to top ---------- */
.ch-top { position: fixed; right: 24px; bottom: 24px; z-index: 20; width: 46px; height: 46px; border: 1px solid var(--champ-l); color: #FFF3DC !important; background: var(--maroon); font: 1.2rem/44px sans-serif; text-align: center; text-decoration: none; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s; box-shadow: 0 6px 14px rgba(74, 14, 29, .35); }
.ch-top.ch-show { opacity: 1; pointer-events: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ch-sec { padding-left: 18px; padding-right: 18px; }
  .ch-couple-grid { grid-template-columns: 1fr 1fr; }
  .ch-mid { grid-column: 1 / -1; grid-row: 2; }
  .ch-info-grid { grid-template-columns: 1fr; gap: 26px; }
  .ch-info + .ch-info { border-left: 0; border-top: 1px solid var(--champ-l); padding-top: 28px; }
  .ch-party-grid { gap: 36px; }
}
@media (max-width: 680px) {
  .ch-hero .ch-inner { margin-top: 0; }
  .ch-hero-top { padding-top: 24px; min-height: 0; }
  .ch-hero-names { font-size: clamp(3rem, 13vw, 4.4rem); }
  .ch-drape { min-height: 0; }
  .ch-venue-grid, .ch-party-grid { grid-template-columns: 1fr; }
  .ch-couple-grid { grid-template-columns: 1fr; }
  .ch-mid { grid-row: auto; }
  .ch-card { padding: 44px 22px 38px; }
  .ch-timeline::before { left: 34px; }
  .ch-step, .ch-step:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 0 92px; justify-content: flex-start; text-align: left; }
  .ch-step-dot, .ch-step:nth-child(even) .ch-step-dot { left: 0; right: auto; }
  .ch-row { grid-template-columns: 1fr; gap: 4px; text-align: center; }
  .ch-row-time { text-align: center; }
  .ch-rsvp { padding: 32px 20px 28px; }
  .ch-rsvp .mt_popup_form_container { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ch-sec *, .ch-sec *::before, .ch-sec *::after { animation: none !important; transition: none !important; } }