/* ===============================
   Vars
   =============================== */
:root{
  --font-primary:"Frank Ruhl Libre",serif;
  --font-secondary:"Frank Ruhl Libre",serif;
  --colour-accent:#3B82F6;
  --colour-forest:#2E3A2E;
  --colour-cream:#F8F5F0;
  --colour-dark-cream:#e2dfdc;
  --curve-depth:clamp(60px, 10vw, 140px);
  --form-bg:#fff;
  --form-line:rgba(0,0,0,.12);
  --header-offset:80px;
  --chev-h:clamp(54px,9vw,120px);
  --rsvp-stroke:#222;
}

[id]{scroll-margin-top:var(--header-offset);}
.min-w-0{min-width:0;}

/* ===============================
   Base
   =============================== */
html{background:var(--colour-forest);}
body{
  font:16px/1.6 var(--font-secondary);
  background:var(--colour-cream);
  color:#222;
}
h1,h2,h3{font-family:var(--font-primary);letter-spacing:-.5px;}
h1{font-size:3.5rem;}
h2{margin-bottom:.75rem;}
strong{font-weight:700;}
a{transition:opacity .2s ease;color:#007740!important;}
a:hover{opacity:.85;}
section{padding:5rem 0;}
@media (max-width:640px){
  h1{font-size:2rem;}
  section{padding:3rem 0;}
}
.main-heading{font-size:4rem;}
@media (max-width:767px){.main-heading{font-size:3rem;}}
.mt-5{margin-top:50px;}
.medium-grey-border{border:1px solid #bbb;}

/* ===============================
   Header
   =============================== */
.u-blur-6{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.u-blur-10{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.u-blur-16{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.u-glass-dark{
  background:rgba(255,255,255,.45);
  color:#222;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 25px rgba(0,0,0,.10);
}
nav a{text-decoration:none!important;}
.header .monogram img{height:60px;margin-top:-6px;padding:8px 0;}
.header a{color:#222!important;}
.header .monogram .logo--light{display:none!important;}
.header .monogram .logo--dark{display:block!important;}
.on-hero .header .u-glass-dark{
  background:rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.on-hero .header a {color:#fff!important;}
.on-hero .header .monogram .logo--light{display:block!important;}
.on-hero .header .monogram .logo--dark{display:none!important;}

/* ===============================
   Hero
   =============================== */
.hero-container{height:100vh!important;}
.hero-overlay{background:rgb(0 0 0 / 60%);}
.hero-lock-up{padding-bottom:50px;}
.hero-rsvp-btn{
  padding:14px 20px!important;
  max-width:200px;width:100%;
  border-color:#ffffff80;
  color:#fff!important;
  transition:all .2s ease;
  font-size:20px!important;
  font-weight:500;
}
.header a.hero-rsvp-btn { color: #ffffff !important; }
.hero-rsvp-btn.btn:hover{
  background-color:var(--bs-btn-hover-bg);
  opacity:.85;
  color:#222!important;
}
.rsvp-btn{position:relative;border-color:transparent!important;padding:8px 16px;font-weight:500;color:#fff!important;}
.rsvp-btn:hover{color:var(--colour-forest)!important;}
.rsvp-btn .rsvp-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.rsvp-btn .rsvp-outline rect{
  fill:none;
  stroke:var(--rsvp-stroke);
  stroke-width:1.5;
  stroke-dasharray:0 100;
  stroke-dashoffset:0;
  animation:rsvp-draw-undraw 3.6s ease-in-out infinite;
}
@keyframes rsvp-draw-undraw{
  0%{stroke-dasharray:0 100;stroke-dashoffset:0;opacity:.9;}
  58%{stroke-dasharray:100 0;stroke-dashoffset:0;opacity:1;}
  78%{stroke-dasharray:100 0;stroke-dashoffset:0;opacity:1;}
  100%{stroke-dasharray:0 100;stroke-dashoffset:-100;opacity:.9;}
}
@media (prefers-reduced-motion:reduce){.rsvp-btn .rsvp-outline rect{animation:none;}}
.on-hero{--rsvp-stroke:rgba(255,255,255,.95);}

/* ===============================
   Helpers
   =============================== */
.text-left{text-align:left!important;}
.mb-8{margin-bottom:4rem!important;}
.pb-6 {padding-bottom: 60px !important;}
.pb-8 {padding-bottom: 8rem !important;}
.p-tight{line-height:1rem;}
.object-fit-cover{object-fit:cover;object-position:bottom;}

/* ===============================
   Section: Forest + top curve
   =============================== */
.section--forest{
  position:relative;
  background:#dce3dc;
  color:#222;
  /*padding-top:calc(var(--curve-depth) + 2.5rem);*/
  padding-top: 0;
  padding-bottom:0;
  overflow:visible;
  margin-top: 50px;
}
.section--forest .container{position:relative;z-index:1;}
.section-top-curve{
  position:absolute;top:-1px;left:0;right:0;
  width:100%;height:var(--curve-depth);
  pointer-events:none;z-index:0;
}
.section--cream{ 
  background-color: var(--colour-cream);;
}

/* ===============================
   Cards / Dividers
   =============================== */
a.standout-card,.standout-card{
  border:1px solid;
  padding:14px;
  border-radius:4px;
  background:#fefdfc;
  color:#222!important;
  text-decoration:none;
  display:block;
  border-right:3px solid;
  border-bottom:3px solid;
  transition:all .2s ease;
}
a.standout-card:hover{background:#fff;}
.standout-card a{color:#222!important;text-decoration:underline!important;}
.divider{border-top:1px solid #cdcdcd;margin:12px auto;width:100%;}

/* ===============================
   Hero → Next Section Chevron
   =============================== */
#rsvp.chevron-top{background:var(--colour-cream);padding-top:30px;padding-bottom:0;}
.chevron-band{
  position:absolute;left:0;right:0;
  top:calc(-0.5 * var(--chev-h));
  height:var(--chev-h);width:100%;
  display:block;pointer-events:none;z-index:1;
}
.chevron-top::after{
  content:"";
  position:absolute;left:0;right:0;
  top:calc(-0.5 * var(--chev-h));
  height:var(--chev-h);
  pointer-events:none;z-index:0;
}
.chevron-band.flip-up {
  transform: scaleY(-1);
  transform-origin: 50% 50%;
}


/* ===============================
   RSVP Form
   =============================== */
#rsvpForm{
  text-align:left;
  border-radius:12px;
  padding:.5rem 0 0 0!important;
  margin-top:30px;
  border:1px solid #222;
  border-right-width:3px;
  border-bottom-width:3px;
  font-size:16px;line-height:1.3rem!important;
}
@media (max-width:575px){#rsvpForm{margin-left:25px;margin-right:25px;}}
#rsvp h1{z-index:2;position:relative;}
#rsvpForm fieldset{
  position:relative;
  background:var(--form-bg,#fff);
  border:1px solid #bbb;
  border-radius:8px;
  padding:28px 16px 18px;
  margin:22px;
  overflow:visible;
}
#rsvpForm fieldset>legend{
  position:absolute;top:0;left:16px;
  transform:translateY(-50%);
  margin:0;padding:0 .5rem;
  background:var(--form-bg,#fff);
  line-height:1.1;font-weight:500;font-size:16px;
  display:inline-block;white-space:nowrap;z-index:1;width:inherit!important;
}
#rsvpForm .form-control,
#rsvpForm .form-check-label,
#rsvpForm .btn,
#rsvpForm .form-label{font-size:16px;}
#rsvpForm .form-floating>label{font-size:16px;}
#rsvpForm .form-label{font-weight:500;margin-bottom:.4rem;font-size:14px;}
#rsvpForm .form-check{margin-right:1rem;}
#rsvpForm .form-check-label{font-weight:400;}
#rsvpForm .d-flex.flex-wrap.gap-3{justify-content:flex-start;}
#rsvpForm .form-control{
  border-radius:8px;
  padding:.9rem .75rem;
  min-height:30px;
  padding-bottom:0;
  box-shadow:none;
  height:45px;
  background:#fefdfc;
}
#rsvpForm .form-control:focus{border-color:#0a7cff;box-shadow:0 0 0 .2rem rgba(10,124,255,.15);}
.form-floating>label{padding:.7rem .75rem .75rem;}
.att-row{margin:12px 0;}
#rsvpForm .row.g-2{--bs-gutter-x:.5rem;}
.bottom-section-form{
  background-color:#e9f2e9;
  border-top:1px dotted #cdcdcd;
  padding:18px 8px;
  border-radius:0 0 8px 8px;
}
.rsvp-form-btn{width:100%;padding:12px;font-size:18px!important;background:var(--colour-forest);}
#addGuestBtn{padding:8px 32px 8px 28px;}
.remove-guest-btn{padding:6px 20px 6px 16px;}
.error-messages,.success-message{margin:0 15px;}
#formError{margin-bottom:5px!important;}
#rsvpForm .is-invalid{border-color:#dc3545!important;box-shadow:0 0 0 .2rem rgba(220,53,69,.15)!important;}
#rsvpForm .att-row.invalid{border:1px solid #dc3545;border-radius:12px;padding:.5rem .75rem;background:rgba(220,53,69,.03);}
.form-check-input:checked{background-color:var(--colour-forest);border-color:var(--colour-forest);}

/* ===============================
   Anchors / Section Anchors
   =============================== */
.section-anchor-standard{padding-bottom:70px;background:var(--colour-dark-cream);}
.section-anchor-getting-there{padding-bottom:40px;}

/* ===============================
   Map + Equal Split
   =============================== */
.equal-split{min-height:0;}
.split-50{flex:0 0 50%;min-height:0;}
.map-wrap{height:100%;}
.map-fill{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
@media (max-width:767.98px){
  .equal-split{display:block;}
  .equal-split .split-50{flex:none;}
  .map-wrap{height:auto;}
  .map-fill{position:static;height:40vh;width:100%;}
}

/* ===============================
   Offcanvas (Mobile Menu)
   =============================== */
.offcanvas-right-full.offcanvas-end{
  --bs-offcanvas-width:100vw;
  width:var(--bs-offcanvas-width);
  background:var(--colour-forest);
  color:var(--colour-cream);
  min-height:100vh;
}
@supports (width:100dvw){.offcanvas-right-full.offcanvas-end{--bs-offcanvas-width:100dvw;}}
.offcanvas-right-full .offcanvas-body{background:var(--colour-forest);}
.offcanvas-right-full .menu-link{
  color:var(--colour-cream)!important;
  text-decoration:none;
  padding:.25rem .75rem;
  transition:opacity .2s ease;
}
.offcanvas-right-full .menu-link:hover,
.offcanvas-right-full .menu-link:focus{opacity:.85;}
.offcanvas-right-full .rsvp-btn{border-width:2px;}
.btn-close-white{filter:invert(1) grayscale(100%) brightness(200%);}
.offcanvas-backdrop.show{opacity:0;}
.header .menu-toggle{ color:#222; }
.on-hero .header .menu-toggle{ color:#fff; }
.header .menu-toggle svg{ display:block; }
.header .menu-toggle:focus-visible{
  outline:2px solid currentColor; outline-offset:2px;
}


/* ===============================
   Accordion (FAQs)
   =============================== */
.accordion{background:transparent!important;}
.accordion-item{background:transparent!important;border: var(--bs-accordion-border-width) solid #00000042;}
.accordion-button{background:transparent!important;font-size:18px;}
.accordion-button:not(.collapsed){color:#222!important;font-weight:700;}
.accordion-button:focus,.accordion-button:not(.collapsed){box-shadow:none!important;}
.accordion-body{
  text-align:left;
  background:#fefdfc;
  border-radius:8px;
  border:1px solid #222;
  border-right-width:3px;
  border-bottom-width:3px;
  margin:5px 15px 20px;
}

/* ===============================
   Headings Images
   =============================== */
.headings-img{
  max-width:120px;width:100%;
  margin:0 auto;position:relative;z-index:1;display:block;
}

/* ===============================
   Polaroid carousel (flex, square)
   =============================== */
.polaroid-wrap { --pc-gap: 1rem; --pc-cards: 1.5; }
@media (min-width: 768px){ .polaroid-wrap { --pc-cards: 3.5; } }
@media (min-width: 1200px){ .polaroid-wrap { --pc-cards: 4.5; } }

.polaroid-scroller{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding-inline: 1rem;
  cursor: grab;
}
.polaroid-scroller.dragging{ cursor: grabbing; }

.polaroid-track{
  display: flex;
  align-items: stretch;
  gap: var(--pc-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.polaroid-card{
  flex: 0 0 calc(100% / var(--pc-cards));
  user-select: none;
}

/* Polaroid frame */
.polaroid{
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.12);
  padding: 10px 10px 44px;  /* bottom lip */
  transform-origin: center center;
  display: block;
  height: 100%;
  text-decoration: none;
}

/* Square media wrapper */
.polaroid-media{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;      /* force perfect square */
  border-radius: 4px;
  overflow: hidden;
  background: #eee;
}

/* Image fills the square */
.polaroid-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #eee;
}

/* subtle random tilt */
.polaroid-card:nth-child(6n+1) .polaroid{ transform: rotate(-1.2deg); }
.polaroid-card:nth-child(6n+3) .polaroid{ transform: rotate(0.8deg); }
.polaroid-card:nth-child(6n+5) .polaroid{ transform: rotate(-0.6deg); }

/* hover/focus pop */
.polaroid:focus,
.polaroid:hover{
  box-shadow: 0 16px 28px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.14);
  outline: none;
}



/* ===============================
   Footer
   =============================== */
footer{color:var(--colour-forest)!important;position:relative;margin:0; background: var(--colour-forest); padding: 0px 0 60px}
footer img{width:100%;z-index:0;}
.footer-text-bottom{
  z-index:1;
  text-align:center;margin:0 auto;width:100%;
}
footer a{color:var(--colour-cream)!important;text-decoration:none;}
.dark-green-bg {
  background: var(--colour-forest);
}