/* styles.css */

/* =========================
   Theme + Reset
========================= */
:root{
  --turf1:#0b5d2a;
  --turf2:#083f1c;
  --white:#ffffff;
  --muted: rgba(255,255,255,0.85);
  --card: rgba(10, 18, 12, 0.84);
  --card2: rgba(10, 18, 12, 0.72);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 20px 55px rgba(0,0,0,0.45);

  --input-bg: rgba(255,255,255,0.07);
  --input-border: rgba(255,255,255,0.14);
  --input-border2: rgba(255,255,255,0.22);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--white);
  background: linear-gradient(180deg, var(--turf1), var(--turf2));
  overflow-x:hidden;
}

/* =========================
   Field layers
========================= */
.field{ position:relative; min-height:100vh; }

.field::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(1200px 600px at 80% 20%, rgba(255,255,255,0.05), transparent 65%),
    radial-gradient(900px 520px at 50% 100%, rgba(0,0,0,0.38), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.12));
}

.field::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.16;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.40) 0px,
      rgba(255,255,255,0.40) 2px,
      transparent 2px,
      transparent 110px
    );
}

.hash{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.12;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.55) 0px,
      rgba(255,255,255,0.55) 12px,
      transparent 12px,
      transparent 70px
    );
  mask-image:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 32%,
      #000 32%,
      #000 36%,
      transparent 36%,
      transparent 64%,
      #000 64%,
      #000 68%,
      transparent 68%,
      transparent 100%
    );
}

/* =========================
   RSVP Banner (sticky + scrolling)
========================= */
.rsvp-banner{
  position: sticky;
  top: 0;
  z-index: 999;
  background: #d32f2f;
  border-bottom: 3px solid #ffffff;
  overflow: hidden;
}

.banner-track{
  white-space: nowrap;
  display: inline-block;
  padding: 10px 0;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1px;
  animation: scrollBanner 14s linear infinite;
}

@keyframes scrollBanner{
  from{ transform: translateX(100%); }
  to{ transform: translateX(-100%); }
}

/* =========================
   Stickers
========================= */
.stickers{
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 1;
  overflow: hidden;
}

.sticker{
  position:absolute;
  width: 120px;
  height: 120px;
  opacity: 0.95;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.35));
}

.small{ width: 78px; height: 78px; opacity: 0.82; }
.tiny{ width: 58px; height: 58px; opacity: 0.78; }

/* SVG stickers */
.trophy{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Crect width='160' height='160' fill='none'/%3E%3Cg%3E%3Cpath d='M55 22h50v14c0 20-12 36-25 36S55 56 55 36V22z' fill='%23f3b634' stroke='%23c7891d' stroke-width='6'/%3E%3Cpath d='M45 30h-14c0 22 10 40 30 44' fill='none' stroke='%23f3b634' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M115 30h14c0 22-10 40-30 44' fill='none' stroke='%23f3b634' stroke-width='10' stroke-linecap='round'/%3E%3Crect x='62' y='74' width='36' height='18' rx='6' fill='%23f3b634'/%3E%3Crect x='54' y='92' width='52' height='16' rx='6' fill='%23d3912b'/%3E%3Crect x='46' y='110' width='68' height='18' rx='6' fill='%234a2a15'/%3E%3Crect x='40' y='128' width='80' height='14' rx='6' fill='%23331c10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat:no-repeat;
}

.jersey{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Crect width='160' height='160' fill='none'/%3E%3Cpath d='M48 40l18-14h28l18 14 16-10 16 18-18 16v64H34V64L16 48 32 30l16 10z' fill='%232e6bd6' stroke='%23ffffff' stroke-width='6'/%3E%3Ctext x='80' y='102' text-anchor='middle' font-family='Arial' font-size='46' font-weight='900' fill='%23ffffff'%3E48%3C/text%3E%3C/svg%3E");
  background-size: cover;
  background-repeat:no-repeat;
}

.helmet{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Crect width='160' height='160' fill='none'/%3E%3Cpath d='M112 104c0 16-14 28-32 28H58c-14 0-26-10-28-24l-4-26c0-30 24-54 54-54h8c30 0 54 24 54 54l-20 8z' fill='%23d8352a' stroke='%23ffffff' stroke-width='6'/%3E%3Cpath d='M96 96h36' stroke='%23333' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M86 86c8 0 16 6 18 14' fill='none' stroke='%23333' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat:no-repeat;
}

.foam{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Crect width='160' height='160' fill='none'/%3E%3Cpath d='M62 28h36v20h18v54c0 18-14 32-32 32H62V28z' fill='%23f08c2a' stroke='%23ffffff' stroke-width='6'/%3E%3Ctext x='80' y='112' text-anchor='middle' font-family='Arial' font-size='34' font-weight='900' fill='%23ffffff'%3E%231%3C/text%3E%3C/svg%3E");
  background-size: cover;
  background-repeat:no-repeat;
}

.football{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Crect width='160' height='160' fill='none'/%3E%3Cellipse cx='80' cy='86' rx='64' ry='44' fill='%236b3f1f' stroke='%23ffffff' stroke-width='6'/%3E%3Cpath d='M38 86h84' stroke='%23ffffff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M64 76v20M78 76v20M92 76v20' stroke='%23ffffff' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat:no-repeat;
}

.star{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 10l13 28 31 4-23 21 6 31-27-15-27 15 6-31-23-21 31-4 13-28z' fill='%23f3b634' stroke='%23c7891d' stroke-width='6'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat:no-repeat;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.28));
}

/* Balloon PNG */
.balloon{
  background-image: url("./images/balloons.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
}

/* =========================
   Wrapper + Cards
========================= */
.wrap{
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 18px 44px;
  position:relative;
  z-index:2;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.soft{
  background: var(--card2);
  backdrop-filter: blur(10px);
}

/* =========================
   NEW Layout for your fixed HTML
   (top-grid + rsvp-section)
========================= */
.top-grid{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  align-items:start;
}

.rsvp-section{
  margin-top: 18px;
}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(145deg, #1a7c39, #0d5d2c);
  color: #fff;
  font-weight: 900;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}

.btn-wide{ width:100%; }

.label{
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 13px;
  opacity: 0.95;
}

/* =========================
   Slideshow
   - Uses cover by default (fills frame)
   - If you want no cropping, switch to contain
========================= */
.slideshow{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,0.35);
}

.slideshow img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;          /* change to contain if you never want cropping */
  object-position: center;
  background: rgba(0,0,0,0.45);
  transition: opacity 0.35s ease;
}

/* Fade helper for your JS */
.slideshow img.fade{
  opacity: 0.35;
}

.slideshow-bar{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding: 14px 16px;
  background: rgba(0,0,0,0.62);
  border-top: 1px solid rgba(255,255,255,0.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  z-index:2;
}

/* =========================
   Party info
========================= */
.info{
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.logo-hero{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.logo-hero img{
  width: 100%;
  max-width: 380px;
  height: auto;
  display:block;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,0.45));
}

.subtitle{
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 14px;
  text-align:center;
}

.info-list{
  display:grid;
  gap: 10px;
}

.row{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  flex: 0 0 38px;
  font-size: 18px;
}

.row strong{
  display:block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity:0.90;
  margin-bottom: 4px;
}

.row div{
  font-size: 15px;
  line-height:1.35;
  color: rgba(255,255,255,0.92);
}

/* =========================
   RSVP card + form
========================= */
.rsvp-card{
  padding: 16px;
}

.rsvp-head{ margin-bottom: 10px; }

.rsvp-title{
  margin: 0 0 6px 0;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.rsvp-note{
  margin:0;
  color: var(--muted);
  line-height: 1.45;
}

.rsvp-form{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-grid .full{
  grid-column: 1 / -1;
}

.rsvp-form label{
  display:flex;
  flex-direction:column;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea{
  width:100%;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--white);
  padding: 10px 12px;
  outline: none;
}

.rsvp-form textarea{
  resize: vertical;
  min-height: 90px;
}

.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder{
  color: rgba(255,255,255,0.55);
}

.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus{
  border-color: var(--input-border2);
  box-shadow: 0 0 0 4px rgba(26,124,57,0.25);
}

.fineprint{
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  text-align:center;
}

/* =========================
   Footer
========================= */
footer{
  padding: 22px 0 0;
  opacity:0.85;
  font-size: 13px;
}

.footer-card{
  text-align:center;
  padding: 14px 18px;
}

/* =========================
   Mobile
========================= */
@media (max-width: 940px){
  .top-grid{
    grid-template-columns: 1fr;
  }

  .form-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .slideshow{
    aspect-ratio: 4 / 3;
  }

  .logo-hero img{
    max-width: 320px;
  }

  .banner-track{
    font-size: 14px;
  }
}
/* =========================
   DESKTOP + MOBILE LAYOUT FIX
   Goal:
   Desktop:
     [ Slideshow ] [ Party Info ]
     [   RSVP   ] [ Party Info ]
   Mobile:
     Slideshow -> Party Info -> RSVP
========================= */

/* Replace your old .two-col / .left-stack / .top-grid rules with this */
.layout{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  align-items:start;
}

/* Force the exact desktop placement */
.slideshow{ grid-column: 1; grid-row: 1; }
.info{ grid-column: 2; grid-row: 1 / span 2; }
.rsvp-card{ grid-column: 1; grid-row: 2; }

/* =========================
   Slideshow sizing + "almost fit"
========================= */

/* Make box a bit bigger on desktop */
.slideshow{
  position: relative;
  width: 100%;
  height: 340px;              /* increase/decrease if you want */
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
}

/* "Almost fit" without cropping */
.slideshow img{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: contain;         /* no cropping */
  object-position: center;
  padding: 10px;               /* gives you that little extra breathing room */
  background: rgba(0,0,0,0.45);
}

/* Slideshow bar stays pinned to bottom */
.slideshow-bar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding: 14px 16px;
  background: rgba(0,0,0,0.62);
  border-top: 1px solid rgba(255,255,255,0.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  z-index:2;
}

/* =========================
   Mobile: keep your good order
========================= */
@media (max-width: 940px){
  .layout{
    grid-template-columns: 1fr;
  }

  /* Natural mobile order: slideshow, info, rsvp */
  .slideshow{ grid-column: 1; grid-row: 1; height: 280px; }
  .info{ grid-column: 1; grid-row: 2; }
  .rsvp-card{ grid-column: 1; grid-row: 3; }

  .form-grid{ grid-template-columns: 1fr; }
}