/* ==========================================================
   Hindu Wedding Template 1 – Traditional Saffron & Gold
   All selectors are prefixed with .hw- so nothing leaks into
   the page editor. Sections carry their own background so the
   editor's background tool can recolour each one.
   ========================================================== */
.hw-sec, .hw-top {
  --saffron: #E8731A;
  --gold: #D4A017;
  --gold-light: #FFD54A;
  --maroon: #8E1B1B;
  --maroon-dark: #5D1010;
  --kumkum: #C62828;
  --ink: #4A1F0A;
  --ink-soft: #7A4A22;
  --font-display: "Tiro Tamil", "Noto Serif Tamil", serif;
  --font-body: "Noto Serif Tamil", "Tiro Tamil", serif;
  --font-script: "Kavivanar", "Noto Serif Tamil", serif;
  --font-deva: "Noto Serif Tamil", serif;
  --font-tamil: "Noto Serif Tamil", serif;
}

.hw-sec, .hw-sec *, .hw-sec *::before, .hw-sec *::after { box-sizing: border-box; }

/* ---------- Section shell: yellow background + saffron/maroon side borders ---------- */
.hw-sec {
  position: relative; overflow: hidden;
  font-family: var(--font-body); font-size: 18px; line-height: 1.75; color: var(--ink);
  background-color: #FFE680;
  background-image:
    radial-gradient(circle at 50% 0%, #FFF3B0 0%, transparent 60%),
    linear-gradient(180deg, #FFE680, #FFD54A);
  border-left: 12px solid var(--saffron); border-right: 12px solid var(--saffron);
  box-shadow: inset 6px 0 0 #FFF3B0, inset -6px 0 0 #FFF3B0, inset 9px 0 0 var(--maroon), inset -9px 0 0 var(--maroon), inset 12px 0 0 #FFF3B0, inset -12px 0 0 #FFF3B0, inset 13px 0 0 var(--gold), inset -13px 0 0 var(--gold);
  padding: 84px 40px 40px;
}
.hw-sec.hw-alt {
  background-image: radial-gradient(circle at 50% 100%, #FFF3B0 0%, transparent 60%), linear-gradient(180deg, #FFD54A, #FFE680);
}
.hw-sec img { max-width: 100%; }
.hw-sec p, .hw-sec h1, .hw-sec h2, .hw-sec h3 { margin: 0; }
.hw-sec sup { font-size: .6em; }
.hw-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; }
.hw-center { text-align: center; }
.hw-script { font-family: var(--font-script); font-weight: 400; }
.hw-deva { font-family: var(--font-deva); }
.hw-tamil { font-family: var(--font-tamil); }
.hw-sec a { color: var(--maroon); }

/* ---------- Common type ---------- */
.hw-eyebrow { font-size: .95rem;  color: var(--saffron); font-weight: 700; margin-bottom: 10px !important; }
.hw-title { font-family: var(--font-display); font-size: clamp(1.7rem, 4.5vw, 2.5rem); line-height: 1.4; color: var(--maroon); margin-bottom: 6px !important; }
.hw-divider { display: block; width: min(340px, 70%); margin: 4px auto 14px; }
.hw-lead { font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.8; max-width: 760px; margin: 0 auto 6px !important; }
.hw-lead.hw-strong { color: var(--maroon); font-weight: 700; }
.hw-lead.hw-and { font-style: italic; }
.hw-lead.hw-soft { color: var(--ink-soft); font-style: italic; margin-top: 10px !important; }

/* ---------- Buttons ---------- */
.hw-btn {
  display: inline-block; cursor: pointer; font: 600 1rem/1 var(--font-body); 
  padding: 14px 30px; border: 2px solid var(--maroon-dark); border-radius: 40px; text-decoration: none;
  color: #FFF3B0 !important; background: linear-gradient(180deg, var(--kumkum), var(--maroon));
  box-shadow: 0 4px 0 var(--maroon-dark), 0 8px 18px rgba(93,16,16,.3); transition: transform .15s, box-shadow .15s;
}
.hw-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--maroon-dark), 0 4px 10px rgba(93,16,16,.3); }
.hw-btn.hw-btn-outline { background: transparent; color: var(--maroon) !important; box-shadow: none; margin-top: 22px; }
.hw-btn.hw-btn-outline:hover { background: var(--maroon); color: #FFF3B0 !important; }

/* ---------- Hero ---------- */
.hw-hero { min-height: 100vh; padding-top: 120px; padding-bottom: 60px; display: flex; flex-direction: column; justify-content: center; }
.hw-toran { position: absolute; top: 0; left: 0; width: 100%; height: 92px; object-fit: cover; object-position: top; z-index: 1; pointer-events: none; }
.hw-toran-bottom { top: 0; }
.hw-corner { position: absolute; width: clamp(70px, 11vw, 130px); z-index: 1; top: 100px; }
.hw-c-tl { left: 14px; } .hw-c-tr { right: 14px; transform: scaleX(-1); }
.hw-mantra { color: var(--maroon); font-size: 1.35rem; }
.hw-mantra.hw-tamil { font-size: 1.1rem; color: var(--saffron); margin-bottom: 4px !important; }
.hw-couple-hero { position: relative; display: flex; justify-content: center; align-items: flex-end; width: min(520px, 92%); margin: 6px auto 8px; z-index: 2; }
.hw-couple-hero::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,243,176,.95) 0%, rgba(255,193,7,.35) 45%, transparent 68%); z-index: -1;
}
.hw-couple-hero > img { width: 50%; margin: 0 -5%; filter: drop-shadow(0 12px 14px rgba(120,50,0,.32)); animation: hw-sway 6s ease-in-out infinite; transform-origin: 50% 100%; }
.hw-couple-hero > .hw-ch-bride { animation-delay: -3s; }
.hw-diya { position: absolute; bottom: 0; width: 50px; }
.hw-diya img { width: 100%; animation: hw-flicker 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.hw-d-l { left: -34px; } .hw-d-r { right: -34px; }
.hw-shloka { font-size: 1.15rem; color: var(--maroon); margin: 12px 0 2px !important; line-height: 1.8; }
.hw-shloka-en { font-style: italic; font-size: 1rem; color: var(--ink-soft); margin-bottom: 12px !important; }
.hw-wedding-title { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.4; margin-top: 10px !important; color: var(--maroon); font-weight: 700; text-shadow: 0 2px 0 #FFE680, 0 4px 10px rgba(140,60,0,.2); }
.hw-hero-names { font-size: clamp(2.8rem, 9vw, 5.2rem); color: var(--kumkum); line-height: 1.1; }
.hw-hero-names i { font-family: var(--font-body); font-size: .5em; color: var(--gold); padding: 0 .1em; }
.hw-hero-date {  font-weight: 700; color: var(--maroon); margin-top: 6px !important; }

/* ---------- Couple ---------- */
.hw-couple-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; gap: 10px; }
.hw-figure { position: relative; margin: 0; }
.hw-figure::before { content: ""; position: absolute; left: 50%; top: 52%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,243,176,.95) 0%, rgba(255,153,51,.25) 55%, transparent 70%); z-index: -1; }
.hw-figure img { display: block; width: 100%; max-width: 250px; margin: 0 auto; filter: drop-shadow(0 12px 14px rgba(120,50,0,.3)); animation: hw-sway 6s ease-in-out infinite; transform-origin: 50% 100%; }
.hw-name { font-size: clamp(2.8rem, 6vw, 4rem); color: var(--kumkum); line-height: 1.05; }
.hw-fullname { font-weight: 700; margin-bottom: 8px !important; color: var(--maroon); }
.hw-childof, .hw-place { color: var(--ink-soft); font-style: italic; }
.hw-parents { font-weight: 700; }
.hw-weds { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0; }
.hw-weds-line { flex: 1; max-width: 90px; height: 2px; background: linear-gradient(90deg, transparent, var(--saffron)); }
.hw-weds-line:last-child { background: linear-gradient(270deg, transparent, var(--saffron)); }
.hw-weds-text { font-size: 2rem; color: var(--gold); }

/* ---------- Families ---------- */
.hw-family-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin-top: 30px; }
.hw-family-card { padding: 30px 30px 24px; background: linear-gradient(180deg, rgba(255,251,230,.92), rgba(255,243,176,.85)); border: 2px solid var(--saffron); border-radius: 10px; box-shadow: 0 0 0 5px rgba(255,243,176,.9), 0 0 0 6.5px var(--maroon), 0 14px 24px rgba(120,50,0,.2); }
.hw-fam-head { font-weight: 700;  color: var(--maroon); font-size: 1.5rem; text-align: center; margin-bottom: 14px !important; }
.hw-fam-label { font-size: .85rem;  color: var(--saffron); font-weight: 700; margin-top: 12px !important; }

/* ---------- Events ---------- */
.hw-timeline { margin: 34px auto 0; max-width: 780px; position: relative; }
.hw-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 69px; width: 3px; background: repeating-linear-gradient(180deg, var(--saffron) 0 8px, transparent 8px 14px); }
.hw-event { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 24px; position: relative; }
.hw-event-date { flex: 0 0 140px; width: 140px; min-width: 140px; text-align: center; position: relative; z-index: 1; background: linear-gradient(180deg, var(--kumkum), var(--maroon)); color: #FFF3B0; border: 2px solid var(--gold-light); border-radius: 12px; padding: 8px 6px 6px; box-shadow: 0 0 0 3px var(--maroon-dark), 0 8px 14px rgba(93,16,16,.25); }
.hw-event-date b { display: block; font-family: "Noto Serif Tamil", serif; font-weight: 700; font-size: 2.2rem; line-height: 1; }
.hw-event-date span { display: block; font-weight: 600; }
.hw-event-date small { display: block; opacity: .85;  font-size: .72rem; }
.hw-event-body { flex: 1; padding: 14px 22px; border-radius: 10px; background: rgba(255,251,230,.8); border: 1.5px solid var(--saffron); }
.hw-ev-name { font-size: 1.45rem; color: var(--maroon); font-weight: 700; }
.hw-tamil-sm { display: block; font-family: var(--font-tamil); font-size: .85rem; color: var(--ink-soft); }
.hw-time { font-weight: 700; color: var(--saffron); margin: 2px 0 4px !important; }
.hw-event-main .hw-event-body { background: linear-gradient(180deg, #FFF8D6, #FFE680); border: 2px solid var(--maroon); box-shadow: 0 0 0 4px rgba(255,153,51,.5); }
.hw-badge { display: inline-block; margin-top: 8px; padding: 3px 12px; font-size: .78rem;  font-weight: 700; color: #FFF3B0; background: var(--saffron); border-radius: 20px; }

/* ---------- Countdown ---------- */
.hw-cd-date { font-weight: 700; color: var(--maroon); margin-bottom: 6px !important; }
.hw-countdown { display: flex; justify-content: center; gap: clamp(10px, 3vw, 26px); flex-wrap: wrap; margin-top: 14px; }
.hw-countdown > div { width: clamp(76px, 18vw, 120px); padding: 16px 6px 12px; background: linear-gradient(180deg, var(--kumkum), var(--maroon)); color: #FFF3B0; border: 2px solid var(--gold-light); border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px; box-shadow: 0 0 0 4px var(--maroon-dark), 0 10px 18px rgba(93,16,16,.3); }
.hw-countdown b { display: block; font-family: "Noto Serif Tamil", serif; font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.1; }
.hw-countdown span { font-size: .78rem;  }

/* ---------- Venue ---------- */
.hw-venue-name { font-family: var(--font-display); color: var(--maroon); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.4; margin-bottom: 10px !important; }
.hw-address { font-size: 1.2rem; margin-bottom: 14px !important; }

/* ---------- RSVP ---------- */
.hw-rsvp { max-width: 760px; margin: 26px auto 0; padding: 30px; background: rgba(255,251,230,.9); border: 2px solid var(--saffron); border-radius: 12px; box-shadow: 0 0 0 5px rgba(255,243,176,.9), 0 0 0 6.5px var(--maroon); }
.hw-rsvp .mt_popup_form_container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.hw-rsvp .mt_form_input:last-child { grid-column: 1 / -1; }
.hw-rsvp input, .hw-rsvp textarea { display: block; width: 100%; padding: 11px 14px; font: 500 1.05rem var(--font-body); color: var(--ink); background: #FFFDF0; border: 1.5px solid var(--saffron); border-radius: 8px; }
.hw-rsvp .mtdefaultformbtn { width: 100%; margin-top: 18px; }
.hw-form-note { text-align: center; font-weight: 700; color: var(--maroon); min-height: 1.4em; margin-top: 10px !important; }
.hw-rsvp-contact { margin-top: 18px !important; font-style: italic; color: var(--ink-soft); }

/* ---------- Compliments ---------- */
.hw-compliments { max-width: 900px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 26px; }
.hw-comp { padding: 8px 10px 8px 26px; position: relative; border-bottom: 1px dotted var(--saffron); }
.hw-comp::before { content: "❁"; position: absolute; left: 2px; color: var(--saffron); }
.hw-note { max-width: 720px; margin: 34px auto 0 !important; padding: 16px 22px; background: rgba(255,251,230,.85); border: 1.5px dashed var(--maroon); border-radius: 10px; font-style: italic; }

/* ---------- Footer ---------- */
.hw-footer { padding-top: 130px; padding-bottom: 70px; }
.hw-big { font-size: clamp(2.4rem, 7vw, 3.6rem); color: var(--kumkum); }
.hw-hashtag { font-weight: 700; color: var(--saffron); }
.hw-tiny { font-size: .9rem; color: var(--ink-soft); }

/* ---------- Back to top ---------- */
.hw-top { position: fixed; right: 26px; bottom: 26px; z-index: 20; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold-light); color: #FFF3B0 !important; background: var(--maroon); font: 1.3rem/42px sans-serif; text-align: center; text-decoration: none; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s; }
.hw-top.hw-show { opacity: 1; pointer-events: auto; }

/* petals canvas (added by script after page load) */
.hw-petals { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

@keyframes hw-sway { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes hw-flicker { 0%,100% { transform: scale(1) rotate(0); filter: brightness(1); } 40% { transform: scale(1.04, .97) rotate(1.5deg); filter: brightness(1.12); } 70% { transform: scale(.98, 1.03) rotate(-1.5deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hw-sec { font-size: 18px; padding-left: 22px; padding-right: 22px; }
  .hw-couple-grid { grid-template-columns: 1fr 1fr; }
  .hw-couple-names { grid-column: 1 / -1; grid-row: 1; }
      .hw-d-l { left: -20px; } .hw-d-r { right: -20px; }
  .hw-rsvp .mt_popup_form_container { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hw-timeline::before { display: none; }
  .hw-event { flex-direction: column; gap: 10px; }
  .hw-event-date { flex: none; width: 100%; display: flex; gap: 10px; justify-content: center; align-items: baseline; }
  .hw-event-date b, .hw-event-date span, .hw-event-date small { display: inline; }
  .hw-corner { display: none; }
  .hw-toran { height: 64px; }
  .hw-sec { border-left-width: 8px; border-right-width: 8px; padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-sec *, .hw-sec *::before, .hw-sec *::after { animation: none !important; transition: none !important; }
}

/* ---------- Venue: one centred card (no map) ---------- */
.hw-venue-card {
  position: relative; max-width: 860px; margin: 30px auto 0; padding: 44px 40px 40px;
  background: linear-gradient(180deg, rgba(255,251,230,.95), rgba(255,243,176,.9));
  border: 2px solid var(--saffron); border-radius: 14px;
  box-shadow: 0 0 0 5px rgba(255,243,176,.9), 0 0 0 6.5px var(--maroon), 0 16px 26px rgba(120,50,0,.22);
}
.hw-vc { position: absolute; width: 74px; opacity: .9; pointer-events: none; }
.hw-vc-tl { top: 8px; left: 8px; }
.hw-vc-tr { top: 8px; right: 8px; transform: scaleX(-1); }
.hw-address { font-size: 1.2rem; line-height: 1.9; margin-bottom: 26px !important; }
.hw-facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 auto 30px; text-align: center; }
.hw-fact { padding: 14px 16px; background: rgba(255,255,255,.55); border: 1.5px dashed var(--saffron); border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hw-fact-k { color: var(--saffron); font-weight: 700; font-size: .95rem; }
.hw-fact-v { font-size: 1.02rem; line-height: 1.6; color: var(--ink); text-decoration: none; }
a.hw-fact-v { font-weight: 700; color: var(--maroon); }
@media (max-width: 640px) {
  .hw-venue-card { padding: 40px 18px 30px; }
  .hw-facts-grid { grid-template-columns: 1fr; }
  .hw-vc { width: 52px; }
}