/* Global reset + animations, extracted from the original design prototype. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#1c1009;-webkit-font-smoothing:antialiased}
::selection{background:#c99a5a;color:#231206}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes softScale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes glowPulse{0%,100%{opacity:.4}50%{opacity:.72}}
@keyframes petalFall{0%{transform:translate3d(0,-10vh,0) rotate(-20deg);opacity:0}9%{opacity:.95}88%{opacity:.9}100%{transform:translate3d(90px,110vh,0) rotate(320deg);opacity:0}}
@keyframes introUp{0%,55%{transform:translateY(0)}100%{transform:translateY(-101%)}}
@keyframes sealIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes dotPulse{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes checkPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes scrollDot{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes slideR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes popDot{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@keyframes growLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ---- RSVP attendance checkbox (works without JS via :checked) ------------ */
.rsvp-row{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;background:rgba(255,252,244,.55);border:1px solid rgba(122,90,60,.18);cursor:pointer;transition:.3s}
.rsvp-row input{position:absolute;opacity:0;width:0;height:0}
.rsvp-box{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:.22s;flex:none;border:1.5px solid rgba(122,90,60,.5);background:rgba(255,255,255,.45);color:transparent;font-size:15px;line-height:1}
.rsvp-row:has(input:checked) .rsvp-box{border:1px solid #6f8a4c;background:#6f8a4c;color:#f4e8d2}
.rsvp-row:has(input:not(:checked)){opacity:.5}
.rsvp-name{flex:1}
.rsvp-status-off{display:none}
.rsvp-row:has(input:not(:checked)) .rsvp-status-on{display:none}
.rsvp-row:has(input:not(:checked)) .rsvp-status-off{display:inline}

/* Plus-one name field reveals when the plus-one box is checked (no-JS friendly) */
.po-name-wrap{margin-top:14px;padding-left:40px;display:none}
.po-block:has(.po-check:checked) .po-name-wrap{display:block}
/* Mirror the guest-row checked style for the plus-one box (its own .po-block scope). */
.po-block:has(.po-check:checked) .po-box{border:1px solid #6f8a4c;background:#6f8a4c;color:#f4e8d2}

button:hover{filter:brightness(1.05)}
a{color:inherit}

/* ---- Active nav item (desktop top nav) ----------------------------------- */
/* Highlights the section currently in view (class toggled by app.js). Brighter
   + bold reads clearly on the dark bar — a darker tone would lose contrast.
   !important is needed because the links carry inline font/color. The RSVP pill
   keeps its dark-on-gold text and shows a ring instead of a colour change. */
.topnav-links a.is-active{color:#f4e3c4!important;font-weight:600!important}
.topnav-links a.is-active[href="#rsvp"]{color:#231206!important;box-shadow:0 0 0 2px rgba(244,227,196,.7)}

/* ---- Admin tabs ---------------------------------------------------------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;border-bottom:1px solid rgba(201,154,90,.2);padding-bottom:0}
.tab-btn{appearance:none;border:1px solid transparent;border-bottom:none;background:transparent;color:#b39c7c;font:500 12px/1 Marcellus;letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;border-radius:12px 12px 0 0;cursor:pointer;transition:.2s;margin-bottom:-1px}
.tab-btn:hover{color:#e6c896;filter:none}
.tab-btn.is-active{color:#f6ead0;background:rgba(246,234,208,.08);border-color:rgba(201,154,90,.28);border-bottom:1px solid #1a0f07}
.tab-panel[hidden]{display:none}

/* ---- Mobile bottom tab bar (hidden on desktop) --------------------------- */
/* The bar itself only appears inside the phone media query below; this base
   rule keeps it out of the desktop layout entirely. */
.tabbar{display:none}

/* ---- Mobile-first adjustments (phones only) ------------------------------ */
/* Everything mobile lives here. There are no other width media queries in the
   project, so at ≥601px none of this matches and desktop renders unchanged. */
@media (max-width:600px){
  /* Top bar collapses to just the brand; section links move to the tab bar. */
  .topnav-links{display:none!important}

  /* Fixed bottom tab bar: icon above a short label, thumb-reachable. */
  .tabbar{
    display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:60;
    justify-content:space-around;align-items:stretch;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg,rgba(28,16,9,.97),rgba(28,16,9,.82));
    backdrop-filter:blur(10px);border-top:1px solid rgba(201,154,90,.22);
  }
  .tabbar a{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:5px;
    min-height:52px;justify-content:center;padding:4px 2px;
    text-decoration:none;color:#d8c1a0;
    font:500 10px/1.1 Marcellus;letter-spacing:.08em;text-transform:uppercase;
    text-align:center;transition:color .2s;
  }
  .tabbar a svg{width:22px;height:22px;flex:none}
  .tabbar a.is-active{color:#e7c493;font-weight:600}   /* current section — set by app.js */

  /* Keep page content clear of the fixed bar. */
  body{padding-bottom:66px}

  /* Hero: shrink the arched photo a touch so the section sits comfortably in
     one screen without clipping. */
  .hero-photo{height:min(26vh,240px)!important}

  /* Quote band: don't spend a whole swipe on one line; and drop the
     background-attachment:fixed that iOS Safari renders janky. */
  .quote-band{min-height:auto!important;padding:64px 22px!important;
              background-attachment:scroll!important}

  /* Program timeline: tighten the fixed columns so content isn't squeezed. */
  .timeline-row{grid-template-columns:52px 24px 1fr!important}
  .timeline-line{left:64px!important}

  /* Prevent iOS Safari from auto-zooming when a sub-16px field gains focus. */
  #rsvp-form input,#rsvp-form textarea,.po-name-wrap input,
  form input[type=text],form input[type=password],form textarea{font-size:16px!important}

  /* Larger tap target for the RSVP "edit response" link. */
  .rsvp-edit{padding:14px 26px!important}
}