/* ===============================
   THEME TOKENS
================================= */
:root {
  --pink: #fce4ec;
  --green: #828d4f;
  --cream: #fdfdfd;
  --ink: #333;
  --muted: #666;
  --border: #eee;
  --card: #fff;
  --card-bg-subtle: #faf9f8;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ===============================
   BASE
================================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Playfair Display", serif; /* use your site font */
  font-size: 18px;
  background: var(--cream);
  color: var(--ink);
  text-align: center;
}

p { font-size: 20px; }

main {
  max-width: 1000px;
  margin: 0 auto;
}

/* ===============================
   HEADER / NAV
================================= */
header { position: relative; text-align: center; padding: 20px 20px 0 20px; }

.hand-drawn-img {
  max-width: 900px; width: 100%; height: auto;
  margin: 20px auto 5px auto;
}

.hand-drawn-img-bot {
  max-width: 900px;
  width: calc(100% - 40px);
  height: auto;
  margin: 0 auto 20px auto;
  padding: 0 10px;
}

.couple-name {
  font-size: 5em;
  margin: 0.2em 0;
  font-family: "Parisienne", cursive;
  font-weight: 500;
  line-height: 1.1;
}

.wedding-details { font-size: 1.3em; margin-bottom: 20px; }
.countdown { font-size: 1.3em; margin-bottom: 30px; }

header nav { display: flex; justify-content: center; padding: 30px 25px 25px; }

header nav ul {
  list-style: none; margin: 0; padding: 0;
  display: none;                   /* mobile default: hidden */
  flex-direction: column; gap: 0;  /* will open as a stack */
}
header nav ul.open { display: flex; }

header nav a {
  text-decoration: none; color: inherit; font-weight: 500;
  position: relative; transition: color .3s ease, transform .3s ease;
  cursor: pointer; font-size: 1.3em;
}
header nav a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 2px; background-color: currentColor;
  transition: width .3s ease;
}
header nav a:hover { transform: translateY(-3px); color: #97a45d; }
header nav a:hover::after, header nav a.active::after { width: 100%; }
header nav a.active { font-weight: 700; color: #97a45d; }

/* hamburger */
.menu-toggle {
  appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
  width: 56px; height: 56px; background: var(--cream);
  border: 2px solid #000; border-radius: 8px;
  position: absolute; top: 0.6rem; right: 0.6rem;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px;
  cursor: pointer;
}
.menu-toggle span { width: 34px; height: 4px; background: #000; border-radius: 1px; display: block; }
.menu-toggle:active { transform: scale(0.94); }

/* desktop nav */
@media (min-width: 768px) {
  .menu-toggle { display: none; }
  header nav ul {
    display: flex !important;
    flex-direction: row;
    gap: 50px;
  }
}

/* mobile nav padding tidy */
@media (max-width: 768px) {
  header nav { padding: 0; }
  header nav ul { padding: 0; }
  header nav ul.open { padding: 15px 0; }
}

/* ===============================
   GLOBAL BUTTON (for links styled as buttons)
================================= */
.button {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid #d6d3d1;
  background: #f9f8f7;
  color: var(--ink);
  font-size: 0.95rem;
  transition: transform .04s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover {
  background: #f1efee;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.button.primary {
  border-color: #c9b9ab;
  background: #dedcdb; /* your neutral */
  font-weight: 600;
}

/* ===============================
   FOOTER
================================= */
footer {
  padding: 20px 0; text-align: center;
  border-top: 1px solid #ccc; font-size: 0.9em; color: #555;
  margin-top: 40px;
}

/* ===============================
   GALLERY
================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 10px; margin: 20px 0;
}
.gallery-grid img { width: 100%; border-radius: 5px; }

/* Hero image sizing (smaller, responsive) */
.hero-photo {
  max-width: 880px;         /* tighter than main’s 1000px */
  margin: 0 auto 20px auto; /* center + a little breathing room */
  padding: 0 10px;          /* same side padding as your bottom illustration */
}

.hero-photo img {
  display: block;
  width: 100%;              /* fill the hero container, not the whole page */
  height: auto;
  border-radius: 10px;
  max-height: none;         /* ensure no inherited max-height is forcing scale */
}

/* Optional: on very large screens, keep it modest */
@media (min-width: 1200px) {
  .hero-photo { max-width: 820px; }
}

/* ===============================
   RSVP (kept single, modern block)
================================= */
.rsvp-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 40px 30px;
  margin: 40px auto;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: left;
}
.rsvp-container h2 { font-size: 1.8em; margin-bottom: 10px; text-align: center; }
.rsvp-container p { font-size: 1em; margin-bottom: 20px; line-height: 1.4; }
.inline-input-label { display: inline-flex; align-items: center; gap: 5px; }
.rsvp-container label { display: block; font-weight: 600; }
.rsvp-container input[type="text"], .rsvp-container textarea {
  width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 1em; margin-bottom: 20px;
}
.rsvp-container textarea { resize: vertical; }
.rsvp-container input[type="radio"] { margin-right: 5px; vertical-align: middle; }
.rsvp-container .food-options { margin-top: 8px; margin-left: 5px; }
.rsvp-container .food-options label { display: inline-block; margin-right: 15px; font-weight: normal; }
.rsvp-container button {
  display: block; margin: 20px auto; padding: 12px 30px;
  font-size: 1em; font-weight: 700; font-family: inherit;
  background: transparent; color: var(--green); border: 2px solid var(--green);
  border-radius: 8px; cursor: pointer; text-decoration: none;
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.rsvp-container button:hover, .rsvp-container button:focus-visible {
  background: var(--green); color: #fff; transform: translateY(-2px); outline: none;
}
.rsvp-container button:active { transform: translateY(0); }
.rsvp-list > div {
  background-color: var(--cream); border: 1px solid #ccc; border-radius: 6px;
  padding: 15px; margin-bottom: 20px;
}
.rsvp-complete {
  background-color: #fff; border-radius: 8px; padding: 40px 30px;
  margin: 40px auto; max-width: 500px; text-align: left;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.calendar-links a { display: block; margin-bottom: 10px; text-decoration: none; color: var(--green); font-weight: bold; }
.calendar-links a:hover { text-decoration: underline; }

/* ===============================
   INFO SECTIONS (home/other)
================================= */
.info-section { margin-top: 50px; }
.info-block { margin-bottom: 40px; }
.info-title { font-size: 1.8em; font-weight: bold; margin-bottom: 5px; }
.info-subtitle { font-size: 1.3em; margin-bottom: 10px; }
.error { color: #e75b5b; }

/* ===============================
   HOTELS (FAQ) – CARDS
================================= */
.hotel-section {
  max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 3rem;
}
.section-title {
  font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  text-align: center; margin: 0 0 0.25rem;
}
.section-intro { text-align: center; color: var(--muted); margin: 0 0 2rem; }

.hotel-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
@media (min-width: 820px) {
  .hotel-grid { grid-template-columns: 1fr 1fr; }
}

.hotel-card {
  background: var(--card);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow);
  display: grid; grid-template-rows: auto 1fr auto; /* image | body | map */
  border: 1px solid var(--border);
}

.hotel-media { margin: 0; line-height: 0; background: #f6f4f3; }
.hotel-img { width: 100%; height: 220px; object-fit: cover; display: block; }

.hotel-body { padding: 1rem 1.1rem 1.2rem; }

.hotel-title {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem; margin: 0 0 0.75rem;
}
.hotel-name { font-weight: 700; font-size: 1.15rem; }
.hotel-city { font-weight: 400; font-size: 0.95rem; color: #777; }

/* aligned key–value list (shared with maps below) */
.info-list { margin: 0 0 0.6rem; }
.info-row {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 0.75rem; padding: 0.28rem 0; align-items: baseline;
  border-bottom: 1px dashed var(--border);
}
.info-row:last-child { border-bottom: 0; }
.info-row dt {
  color: #6d6d6d; min-width: 120px; font-weight: 600; letter-spacing: 0.01em;
}
@media (min-width: 820px) { .info-row dt { min-width: 150px; } }
.info-row dd { margin: 0; color: #2f2f2f; }
.info-row a { text-decoration: underline; text-underline-offset: 2px; }

/* blurb (no "Why we like it:" label) */
.hotel-note { margin: 0.5rem 0 0.6rem; color: #4b4b4b; line-height: 1.45; }

/* contact buttons row (primary pushed to right) */
.hotel-contacts {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.6rem;
}
.hotel-contacts .button.primary { margin-left: auto; }

/* map inside card */
.hotel-map {
  border-top: 1px solid var(--border);
  padding: 0.75rem 0.9rem 1rem;
  background: var(--card-bg-subtle);
}
.map-label { font-size: 0.95rem; color: var(--muted); margin: 0 0 0.5rem; }
.hotel-map iframe {
  width: 100%; height: 240px; border: 0; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* ===============================
   CEREMONY / RECEPTION – CARDS
================================= */
.map-section {
  max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 3rem;
}
.map-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 820px) { .map-grid { grid-template-columns: 1fr 1fr; } }

.map-card {
  background: var(--card);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  display: grid; grid-template-rows: auto 1fr auto; /* image | body | map */
}

.map-media { margin: 0; line-height: 0; background: #f6f4f3; }
.map-img { width: 100%; height: 220px; object-fit: cover; display: block; }

.map-body { padding: 1rem 1.1rem 1.1rem; }
.map-title { margin: 0 0 0.75rem; font-weight: 700; }
.map-title a { text-decoration: underline; text-underline-offset: 2px; }

/* reuse .info-list / .info-row / dt / dd from hotels */

.map-embed {
  border-top: 1px solid var(--border);
  padding: 0.75rem 0.9rem 1rem;
  background: var(--card-bg-subtle);
}
.map-embed iframe {
  width: 100%; height: 240px; border: 0; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* ===============================
   MEDIA TWEAKS
================================= */
@media (max-width: 600px) {
  header nav ul { gap: 10px; }
}

/* ===== Date / Location + RSVP (hero band) ===== */
.details-container {
  margin-top: 30px;
  text-align: center;
}

.date-location {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  letter-spacing: 0.03em;
  margin-bottom: 18px;
}

.date-location .half {
  padding: 0 12px;
  white-space: nowrap;
}

.date-location .divider {
  width: 2px;
  height: 36px;
  background: #ccc;
  border-radius: 1px;
}

@media (min-width: 900px) {
  .date-location .divider { height: 50px; }
}

/* Standalone RSVP button style (for <a class="rsvp-button">) */
.rsvp-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1.1em;
  font-weight: 700;
  font-family: inherit;
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.rsvp-button:hover,
.rsvp-button:focus-visible {
  background: var(--green);
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}

.rsvp-button:active {
  transform: translateY(0);
}

:root{
  --faq-accent:#828d4f;      /* matches your palette */
  --faq-text:#2a2a2a;
  --faq-muted:#6b6b6b;
  --faq-bg:#fff;
  --faq-card:#ffffffee;
  --faq-shadow:0 6px 24px rgba(0,0,0,.08);
}

.faq{
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

.faq .hand-drawn-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow: var(--faq-shadow);
  border:1px solid #eee;
  margin: 0 0 1rem 0;
}

/* Each Q/A block sits in a “card” */
.faq-item{
  background: var(--faq-card);
  border:1px solid #eee;
  border-radius:16px;
  box-shadow: var(--faq-shadow);
  padding:1.1rem 1.2rem;
  margin: 1rem 0;
  position: relative;
}

/* A slim accent at the top of each card */
.faq-item::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  background: linear-gradient(90deg, var(--faq-accent), #a2b15c);
}

/* Question line */
.faq-item .q{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin: .2rem 0 .4rem;
  color: var(--faq-text);
  font-family: "Playfair Display", serif;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height:1.4;
  font-style: italic;
}

/* Circle “Q” marker */
.faq-item .q::before{
  content:"Q";
  flex: none;
  display:inline-grid;
  place-items:center;
  width:28px;height:28px;
  font-family: serif;
  font-weight:700;
  color:#fff;
  background: var(--faq-accent);
  border-radius:50%;
  margin-top: 2px;
}

/* Answer */
.faq-item .a{
  color: var(--faq-text);
  font-size: 16px;
  line-height: 1.7;
  margin: .2rem 0 0;
}

/* Optional muted notes inside answers */
.faq-item .note{
  display:block;
  margin-top:.5rem;
  font-size: 14px;
  color: var(--faq-muted);
}

/* Compact spacing on mobile */
@media (max-width: 600px){
  .faq-item{ padding: .9rem 1rem; border-radius:14px; }
  .faq-item::before{ height:3px; }
}