/* Added explicit width and overflow control to the root element */
html {
    width: 100%;
    overflow-x: hidden;
}
/* New dark green color scheme */
:root{
  --accent:#b66f6f; /* Retained accent color for contrast */
  --muted:#c0c0c0; /* Light gray for muted text */
  --bg:#005240; /* Primary background: rgb(0, 82, 64) */
  --card-bg:#003B2E; /* Darker green for containers/cards */
  --maxw:960px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:#fff; /* All general text white */
  background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x: hidden;
}
.container{max-width:var(--maxw);margin:0 auto;padding:20px;}

/* Hero */
.hero{
  position:relative;border-radius:12px;overflow:hidden;
  min-height:60vh;display:flex;align-items:center;justify-content:center;
  color:#fff;text-align:center;
  /* Placeholder image URL */
  background:linear-gradient(rgba(0,0,0,0.35),rgba(0,0,0,0.35));
}
.hero .inner{padding:48px 20px}

.footer{
  position:relative;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-align:center;
  /* Placeholder image URL */
  
}
.footer .inner{padding:48px 20px}
.names{font-family:'Great Vibes', cursive;font-size:54px;line-height:1;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.4); padding-bottom: 20px;}
.subtitle{margin-top:6px;font-weight:300;letter-spacing:1px}
.date-pill{display:inline-block;margin-top:16px;background:rgba(255,255,255,0.12);padding:8px 14px;border-radius:999px;font-weight:600}

/* Divider with Icon */
.divider {
    display: flex;
    align-items: center;
    width: 80%; /* Adjusted width for a nice break */
    max-width: 300px;
    margin: 20px auto 10px;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.4); /* Light line */
}
.divider .icon-wrapper {
    padding: 0 15px;
    line-height: 1;
}
.divider svg {
    width: 30px;
    height: 30px;
    fill: var(--accent);
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

/* Countdown */
.countdown{
  display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap;
}
.countdown .item{
  background:rgba(255,255,255,0.08);padding:14px 18px;border-radius:8px;min-width:72px;
}
.countdown .num{font-weight:700;font-size:20px}
.countdown .lbl{font-size:12px;color:var(--muted);opacity:0.9}

/* Info cards */
.grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:26px}
@media(min-width:760px){ .grid{grid-template-columns:1fr 1fr} }

/* Card Layout */
.card{
  background:var(--card-bg); /* Darker green */
  border-radius:10px;
  padding:14px; /* Restore padding to the card */
  box-shadow:0 6px 18px rgba(0,0,0,0.3); /* Darker shadow */
  color: #fff; /* Ensure text inside is white */
  overflow: hidden; 
}

/* Content wrapper for image and text (Flexbox for alignment) */
.card-content {
    display: flex;
    gap: 15px; /* Increased gap for better separation */
    align-items: stretch;
    margin-bottom: 12px; /* Space before map wrapper */
}

/* Fixed Image dimensions and styling (Desktop/Default) */
.card-content img{
    width: 120px; 
    height: 100%; 
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    max-width: none; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
}
.card-content > div {
    /* Allow text content to take remaining space */
    flex-grow: 1; 
    /* Crucial fix for flexbox overflow on narrow screens */
    min-width: 0;
}

/* === MOBILE OPTIMIZATION: Reduce Image Size for Narrow Screens === */
@media (max-width: 500px) {
    .card-content {
        gap: 10px; /* Slight reduction in gap */
    }
    .card-content img{
        width: 80px; /* Reduced width on mobile */
        height: 80px; /* Reduced height on mobile */
    }
}
/* =============================================================== */

.card .meta{font-size:14px;color:var(--muted)}
.card h3{margin:0 0 6px 0;font-size:18px;color:#fff} /* White heading */
.card p{color:var(--muted) !important; margin:8px 0 0;} /* Muted color for addresses/details */
.card p a{color:inherit; text-decoration:none;}

/* Responsive Map Wrapper Styles - Adjusted margins */
.map-wrapper {
    position: relative;
    width: 100%;
    /* Maintain a 3:2 aspect ratio (150% height relative to width) */
    padding-bottom: 66.66%; 
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* RSVP form */
.rsvp{background:var(--card-bg);border-radius:10px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,0.3)}
.form-row{display:flex;gap:8px;margin-bottom:8px}
.form-row input, .form-row textarea, .form-row select{
  flex:1;padding:10px;border-radius:8px;
  border:1px solid #004537; /* Darker border */
  font-size:14px;
  background: #003025; /* Even darker background for input fields */
  color: #fff; /* White text input */
  font-family: inherit;
}
.form-row select option {
  background: #003025;
}
.btn{
    display:inline-block;
    background:var(--accent);
    color:#fff;
    padding:10px 16px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    border:none;
    cursor:pointer;
    transition: background-color 0.2s;
}
.btn:hover {
    background: #9d5a5a; /* Slightly darker on hover */
}
.small{font-size:13px;color:var(--muted);margin-top:8px}

/* Bank & thanks */
.bank, .thanks{
  background:var(--card-bg); /* Darker green */
  border-radius:10px;padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.3)
}
.bank h3, .thanks h3{color: #fff;}
.bank pre{white-space:pre-wrap;margin:0;font-family:inherit;font-size:14px; color: #fff;}
footer{margin:28px 0 60px;text-align:center;color:var(--muted);font-size:13px}