/* ===========================================================
   Hitha & Sritha — Half Saree Function
   One continuous flowing invitation — no boxes, no hard section
   breaks. Traditional South Indian palette: maroon / gold / jasmine.
   =========================================================== */

:root {
  --maroon: #7b1e3a;
  --maroon-dark: #5c1329;
  --gold: #c9a227;
  --gold-deep: #a67c1e;
  --gold-light: #e6c65c;
  --ivory: #fff8e7;
  --ivory-deep: #f6ecd2;
  --text: #3a1220;
  --green: #145a32;
  --white: #ffffff;
  --pink: #c2255c;
  --pink-soft: #f8dee7;
  --marigold: #e8912b;
  --purple: #5b3b8c;
  --max-width: 1000px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Prevents iOS Safari from auto-inflating short lines of text
     (like the stacked mobile nav links) to a much larger size than
     their CSS font-size -- the cause of the oversized, overlapping
     nav menu text on some phones. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Poppins", "Segoe UI", sans-serif;
  line-height: 1.7;
  /* One continuous backdrop for the whole page — a warm, vibrant wash
     of color blooms plus a faint repeating paisley texture, so nothing
     ever hard-cuts to a different background and the whole site reads
     as one festive, traditional canvas. */
  background:
    url("../images/decor/bg-texture.jpg"),
    radial-gradient(circle at 10% 0%, rgba(232, 145, 43, 0.22), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(91, 59, 140, 0.18), transparent 32%),
    radial-gradient(circle at 15% 45%, rgba(194, 37, 92, 0.13), transparent 32%),
    radial-gradient(circle at 90% 65%, rgba(201, 162, 39, 0.18), transparent 34%),
    radial-gradient(circle at 20% 92%, rgba(91, 59, 140, 0.14), transparent 32%),
    radial-gradient(circle at 60% 30%, rgba(123, 30, 58, 0.07), transparent 40%),
    var(--ivory);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 620px 620px, auto, auto, auto, auto, auto, auto;
}

h1, h2, h3, .display {
  font-family: "Cormorant Garamond", "Georgia", serif;
  color: var(--maroon);
  margin: 0 0 0.4em;
  font-weight: 600;
}

h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }

a {
  color: var(--maroon);
}

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Header / Nav ---------- */

.site-header {
  background: var(--maroon);
  color: var(--ivory);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.nav-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
}

.nav-brand-names {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.02em;
}

.nav-brand-tag {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ivory);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.9;
}

@media (max-width: 420px) {
  .nav-brand-names {
    font-size: 1.25rem;
  }
  .nav-brand-tag {
    font-size: 0.56rem;
  }
}

.nav-links {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--ivory);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--gold-light);
  color: var(--gold-light);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 680px) {
  .nav-toggle {
    display: block;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--maroon-dark);
    padding: 0.5rem 1.5rem 1rem;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ---------- Page header (used by every inner page) ---------- */

.page-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 1rem;
}

.flourish {
  margin: 0 auto 0.8rem;
}

.flourish img {
  height: 34px;
  margin: 0 auto;
}

.event-meta-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.2rem auto 1rem;
  font-weight: 600;
  color: var(--maroon-dark);
  font-size: 0.95rem;
}

.event-meta-line svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

/* ---------- Hero ---------- */
/* The hero showcases the couple's actual purchased invitation
   artwork as-is (all copy already set in it) rather than
   reconstructing that design in HTML/CSS. */

.hero {
  position: relative;
  padding: 2.25rem 1.25rem 1.5rem;
  text-align: center;
}

.invite-card {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}

.invite-bg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 22px 48px rgba(58, 18, 32, 0.28);
}

/* Real, responsive text laid directly over the blank invitation
   artwork -- no card or background behind it, so the illustration
   (including both girls) stays fully visible. Each line has its own
   width, sized to the actual clear space around the two figures at
   that height: wide up near the top where the frame is empty,
   narrow lower down where the girls stand closest together. */
.invite-text {
  position: absolute;
  inset: 0;
  text-align: center;
}

.invite-text p,
.invite-text h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  line-height: 1.25;
}

.it-host {
  top: 25.5%;
  width: 68%;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--purple);
}

.it-sub {
  top: 30.7%;
  /* Sized to sit inside the invitation artwork's own gold frame
     (its inner opening is ~48% of the card width) rather than
     running past the frame's side lines. */
  width: 46%;
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  color: var(--maroon-dark);
}

/* "Hitha & Sritha's Half Saree" -- a single title block (replacing
   the old separate names/occasion lines) so the couple's names and
   the occasion read as one line of thought instead of two crowded
   ones. Sized to clear the gold frame with a little room on every
   side. */
.it-title {
  position: absolute;
  left: 50%;
  top: 34.5%;
  width: 68%;
  transform: translateX(-50%);
  text-align: center;
}

.it-title-names {
  display: block;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  /* Capped at the same size as "Dipti & Naresh" (.it-host) so no
     line in the invitation reads larger than the hosts' names. */
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--pink);
}

.it-title-occasion-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.55rem;
}

.it-title-occasion-wrap .it-title-rule {
  flex: 0 0 26px;
  height: 1px;
  background: var(--gold-deep);
}

.it-title-occasion {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--maroon);
  white-space: nowrap;
}

.it-row {
  width: 32%;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--maroon-dark);
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(255, 250, 240, 0.85), 0 0 8px rgba(255, 250, 240, 0.6);
}

.it-icon {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}

.it-icon svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.1em;
}

.hero-link {
  color: inherit;
  text-decoration: underline;
}

.hero-link:hover {
  color: var(--pink);
}

/* Space reserved below the invitation card for the grandparents'
   names — deliberately a plain DOM element (not overlaid on the
   artwork itself), so it never risks colliding with the illustration
   no matter how long the names run. */
.grandparents-line {
  max-width: 480px;
  margin: 1.1rem auto 0;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 0.95rem;
  color: var(--maroon-dark);
  line-height: 1.4;
}

.grandparents-line .gp-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  margin-bottom: 0.4rem;
}

.gp-columns {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

.gp-col {
  /* Don't grow to fill the row -- size to content so the two
     name blocks sit closer to the center instead of spreading
     out toward the edges of the box. */
  flex: 0 1 190px;
  max-width: 190px;
  text-align: center;
}

/* Family surname reads first, as a small prominent heading, then
   the two names below it -- both set in the same Cormorant
   Garamond serif used for "Dipti & Naresh" above, rather than a
   separate script/sans-serif pairing. */
.gp-col .gp-family {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 0.4rem;
}

.gp-col .gp-names {
  display: block;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--pink);
}

@media (max-width: 480px) {
  .gp-columns {
    gap: 1rem;
  }
  .grandparents-line {
    font-size: 0.85rem;
  }
  .gp-col .gp-names {
    font-size: 0.98rem;
  }
}

.it-date {
  top: 49%;
}

.it-venue {
  top: 60.5%;
  width: 29%;
  font-size: 0.66rem;
}

.it-rsvp {
  top: 73%;
}

.hero .btn {
  margin-top: 1.85rem;
}

@media (max-width: 680px) {
  .it-host {
    font-size: 1.1rem;
  }
  .it-sub {
    font-size: 0.48rem;
    top: 31%;
    width: 62%;
  }
  .it-title {
    top: 35.5%;
    width: 84%;
  }
  .it-title-names {
    /* Stay at/under .it-host's 1.1rem mobile size. */
    font-size: 1.05rem;
  }
  .it-title-occasion-wrap {
    margin-top: 0.35rem;
    gap: 0.35rem;
  }
  .it-title-occasion-wrap .it-title-rule {
    flex-basis: 16px;
  }
  .it-title-occasion {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
  .it-row {
    width: 38%;
    font-size: 0.6rem;
    line-height: 1.3;
  }
  .it-icon {
    font-size: 0.75rem;
  }
  .it-date {
    top: 48.5%;
  }
  .it-venue {
    top: 61.5%;
    width: 34%;
    font-size: 0.52rem;
  }
  .it-rsvp {
    top: 73.5%;
  }
}

/* Visually hidden but readable by screen readers / search engines,
   duplicating the key details baked into the invitation image so
   that information isn't locked away from assistive tech or SEO. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 680px) {
  .hero {
    padding: 1.5rem 1rem 1.25rem;
  }
  .invite-card {
    max-width: 340px;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  background: var(--maroon);
  color: var(--ivory);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-size: 1rem;
  font-family: inherit;
}

.btn:hover {
  background: var(--maroon-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(58, 18, 32, 0.22);
}

.btn-gold {
  background: var(--gold);
  color: var(--maroon-dark);
}

.btn-gold:hover {
  background: var(--gold-light);
}

.btn-outline {
  background: transparent;
  color: var(--maroon);
  border: 2px solid var(--maroon);
}

.btn-outline:hover {
  background: var(--maroon);
  color: var(--ivory);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- Sections — flowing, unboxed ---------- */

.section {
  padding: 2.5rem 1.5rem;
}

.section-narrow {
  max-width: 700px;
  margin: 0 auto;
}

.content-block {
  max-width: 640px;
  margin: 0 auto;
}

.divider {
  width: 90px;
  height: 2px;
  margin: 1.3rem auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.divider-flourish {
  text-align: center;
  margin: 2.5rem 0;
}

.divider-flourish img {
  display: block;
  height: 34px;
  margin: 0 auto;
}

/* Slim festive banner repeated under the header on every page */
.page-garland {
  display: block;
  width: 100%;
  height: 92px;
  object-fit: cover;
  object-position: center 30%;
  box-shadow: 0 4px 10px rgba(58, 18, 32, 0.15);
}

@media (max-width: 680px) {
  .page-garland {
    height: 62px;
  }

  /* Tighter vertical rhythm on phones so the page's own content
     starts reaching above the fold instead of opening on a tall
     stretch of empty space that has to be scrolled past first. */
  .page-intro {
    padding: 1.5rem 1.25rem 0.5rem;
  }
  .flourish img {
    height: 26px;
  }
  .divider {
    margin: 0.9rem auto;
  }
  .section {
    padding: 1.25rem 1.25rem;
  }
  .detail-row {
    gap: 0.8rem;
    margin: 0.75rem auto 1.5rem;
  }
  .detail-item {
    padding: 1.1rem 0.8rem 0.9rem;
  }
  .divider-flourish {
    margin: 1.5rem 0;
  }
  .divider-flourish img {
    height: 26px;
  }
  .schedule-list {
    margin: 1.1rem auto;
  }
}

/* Event Details (and RSVP): the two girls stand fixed in place at
   the edges of the screen while everything else scrolls past them,
   like living bookends framing the page. Shown only on screens wide
   enough to fit them beside the centered content with no overlap. */
.page-flank {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  height: 380px;
  width: auto;
  z-index: 4;
  filter: drop-shadow(0 16px 22px rgba(58, 18, 32, 0.28));
  pointer-events: none;
  user-select: none;
}

/* Positioned right up against the 640px-wide centered content column
   (half-width 320px) plus a small gap, instead of pinned way out at
   the screen edges -- so they read as part of the page, not stranded
   off in the margins. */
.page-flank-left {
  left: calc(50% - 320px - 195px - 1.25rem);
}

.page-flank-right {
  right: calc(50% - 320px - 195px - 1.25rem);
}

@media (min-width: 1180px) {
  .page-flank {
    display: block;
  }
}

/* Date / Time / Venue / Attire, as small festive cards instead of a
   plain hairline-divided row */
.detail-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  max-width: 560px;
  margin: 1.25rem auto 2.5rem;
}

.detail-item {
  position: relative;
  padding: 1.5rem 1rem 1.3rem;
  text-align: center;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-deep) 100%);
  border: 1px solid var(--gold-light);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(58, 18, 32, 0.1);
}

.detail-item::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 10px;
  pointer-events: none;
}

.detail-item .icon {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}

.detail-item .icon svg {
  width: 1em;
  height: 1em;
}

.detail-item h3 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.detail-item p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--maroon-dark);
}

.detail-item p a {
  color: inherit;
  text-decoration: underline;
}

/* Schedule, as a small gold timeline instead of a plain list */
.schedule-list {
  list-style: none;
  position: relative;
  max-width: 460px;
  margin: 1.75rem auto;
  padding-left: 1.6rem;
}

.schedule-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--gold-light), var(--gold), var(--gold-light));
}

.schedule-list li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  padding: 0 0 1.3rem;
}

.schedule-list li::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 0.2rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4px var(--gold-light);
}

.schedule-list li:last-child {
  padding-bottom: 0;
}

.schedule-list .time {
  font-weight: 600;
  color: var(--maroon);
  min-width: 90px;
}

.map-embed {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(58, 18, 32, 0.12);
  filter: grayscale(15%);
}

/* ---------- RSVP ---------- */

.rsvp-card {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 2.1rem 1.8rem 2.2rem;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-deep) 100%);
  border: 1px solid var(--gold-light);
  border-radius: 22px;
  box-shadow: 0 20px 46px rgba(58, 18, 32, 0.16);
}

.rsvp-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 17px;
  pointer-events: none;
}

@media (max-width: 640px) {
  .rsvp-card {
    padding: 1.6rem 1.1rem 1.8rem;
  }
}

.rsvp-icon {
  display: block;
  height: 46px;
  width: auto;
  margin: 0 auto 0.6rem;
}

.rsvp-submit-row {
  text-align: center;
  margin-top: 1.6rem;
}

.rsvp-submit-row .btn {
  min-width: 220px;
  font-size: 1.05rem;
  padding: 0.95rem 2.4rem;
}

.rsvp-search {
  position: relative;
  margin-bottom: 1.5rem;
}

.rsvp-search input[type="text"] {
  width: 100%;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 24px rgba(58, 18, 32, 0.18);
  z-index: 10;
  overflow: hidden;
  display: none;
}

.search-results.open {
  display: block;
}

.search-result-item {
  padding: 0.8rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--ivory-deep);
}

.search-result-item:hover,
.search-result-item.active {
  background: var(--ivory-deep);
}

.search-result-item .name {
  font-weight: 600;
  color: var(--maroon);
}

.search-result-item .meta {
  font-size: 0.85rem;
  color: #7a5560;
}

.search-empty-hint {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: #7a5560;
}

.welcome-banner {
  text-align: center;
  padding: 0.6rem 1rem 1.4rem;
  display: none;
}

.welcome-banner.visible {
  display: block;
}

.welcome-banner .wb-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  color: var(--maroon);
}

.guest-hint {
  border-top: 1px solid var(--gold-light);
  border-bottom: 1px solid var(--gold-light);
  padding: 0.8rem 0;
  margin-bottom: 1.4rem;
  font-size: 0.95rem;
  text-align: center;
  display: none;
}

.guest-hint.visible {
  display: block;
}

form .field {
  margin-bottom: 1.3rem;
}

form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--maroon-dark);
}

form input[type="text"],
form input[type="email"],
form input[type="number"],
form select,
form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--gold-light);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form select {
  cursor: pointer;
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.22);
  background: var(--white);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.radio-group label {
  display: flex;
  flex: 1 1 170px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--maroon-dark);
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--gold-light);
  border-radius: 999px;
  background: var(--white);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.radio-group input[type="radio"] {
  accent-color: var(--maroon);
}

.radio-group label:has(input:checked) {
  background: var(--maroon);
  border-color: var(--maroon);
  color: var(--ivory);
}

.form-status {
  margin-top: 1rem;
  padding: 0.9rem 0;
  display: none;
  text-align: center;
  border-top: 1px solid var(--gold-light);
}

.form-status.visible {
  display: block;
}

.form-status.success {
  color: var(--green);
}

.form-status.error {
  color: #8a2432;
}

/* ---------- Gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem;
}

.gallery-grid img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 6px;
}

.gallery-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #7a5560;
}

/* ---------- Updates ---------- */

.updates-list {
  display: flex;
  flex-direction: column;
}

.update-item {
  padding: 1.4rem 0;
  border-top: 1px solid var(--gold-light);
}

.update-item:first-child {
  border-top: none;
}

.update-item .update-date {
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  padding: 3rem 1.5rem 3.5rem;
  color: var(--ivory);
  font-size: 0.9rem;
  margin-top: 2rem;
  background:
    linear-gradient(rgba(58, 12, 24, 0.62), rgba(58, 12, 24, 0.74)),
    url("../images/decor/footer-diyas.jpg");
  background-size: cover;
  background-position: center;
}

.site-footer .gold-rule {
  width: 60px;
  height: 2px;
  background: var(--gold-light);
  margin: 0 auto 1rem;
}

/* ---------- Falling-flowers welcome animation (home page only) ---------- */

.petal-fall {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 60;
  pointer-events: none;
}

.petal {
  position: absolute;
  top: -10vh;
  display: inline-block;
  line-height: 1;
  animation-name: petal-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  filter: drop-shadow(0 3px 4px rgba(58, 18, 32, 0.18));
}

@keyframes petal-fall {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--drift), 120vh) rotate(var(--spin));
    opacity: 0.9;
  }
}

/* ---------- Admin page (site/admin.html) ---------- */

.admin-card {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: 2.1rem 1.8rem 2.2rem;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-deep) 100%);
  border: 1px solid var(--gold-light);
  border-radius: 22px;
  box-shadow: 0 20px 46px rgba(58, 18, 32, 0.16);
}

.admin-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 17px;
  pointer-events: none;
}

@media (max-width: 640px) {
  .admin-card {
    padding: 1.6rem 1.1rem 1.8rem;
  }
}

.admin-lock-label {
  text-align: center;
  margin: 0 0 1.2rem;
  color: var(--maroon-dark);
}

.admin-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.admin-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--maroon);
  text-decoration: underline;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.admin-link-btn:hover {
  color: var(--maroon-dark);
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

@media (max-width: 520px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.admin-stat-card {
  position: relative;
  padding: 1rem 0.6rem;
  text-align: center;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-deep) 100%);
  border: 1px solid var(--gold-light);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(58, 18, 32, 0.08);
}

.admin-stat-value {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--maroon);
  line-height: 1.1;
}

.admin-stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--maroon-dark);
  margin-top: 0.25rem;
}

.admin-refresh-row {
  text-align: center;
  margin-top: 0.8rem;
}

.admin-action-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 480px;
  margin: 1.5rem auto 0;
}

.admin-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--gold-light);
  border-radius: 14px;
  flex-wrap: wrap;
}

.admin-action-text h4 {
  margin: 0 0 0.2rem;
  font-family: "Cormorant Garamond", serif;
  color: var(--maroon);
  font-size: 1.05rem;
}

.admin-action-text p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text);
}

.admin-action-btn {
  flex-shrink: 0;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
}

.admin-action-btn-pair {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}