/* MOMENTS IN FRAME — CONSOLIDATED FLORAL HEADER
   Replace the ENTIRE old floral-header-fix.css with this file.
   No HTML/PHP/booking/payment changes. Floral background is artwork only.
   Desktop header remains a controlled height; mobile menu stays governed by site CSS.
*/

.site-header {
  box-sizing: border-box !important;
  background-color: #fbf8f4 !important;
  background-image: url("/assets/images/floral-header-background.webp?v=20261025f") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}
.site-header .brand-image {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  /* Fade the edges of the existing JPG instead of stretching it. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
@media (min-width: 901px) {
  .site-header {
    display: flex !important;
    position: relative !important;
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
    padding: 8px clamp(24px, 4.5vw, 92px) !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(12px, 2vw, 36px) !important;
    overflow: hidden !important;
  }
  .site-header .brand {
    display: flex !important;
    flex: 0 0 clamp(220px, 22vw, 390px) !important;
    width: clamp(220px, 22vw, 390px) !important;
    min-width: 0 !important;
    align-items: center !important;
  }
  .site-header .brand-image { max-height: 130px !important; }
  .site-header nav {
    display: flex !important;
    position: static !important;
    flex: 0 1 auto !important;
    width: auto !important;
    height: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    padding: 0 !important;
    gap: clamp(10px, 1.25vw, 26px) !important;
    background: transparent !important;
    border: 0 !important;
  }
  .site-header nav a {
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    font-size: clamp(9px, .7vw, 13px) !important;
    letter-spacing: .1em !important;
    color: #2d2926 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }
  .site-header > .button.small {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 125px !important;
    padding: 14px 20px !important;
    background: #b08d79 !important;
    color: #fff !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  /* Avoid showing any old image-based button or duplicate header overlays. */
  .site-header::before, .site-header::after { content: none !important; }
}
@media (max-width: 900px) {
  .site-header {
    height: auto !important;
    min-height: 100px !important;
    max-height: none !important;
    background-position: center center !important;
  }
  .site-header .brand { max-width: 250px !important; }
  .site-header .brand-image { max-height: 94px !important; }
}

/* Remove the pasted-on rectangular botanical graphic in the hero.
   Keep the existing live wedding hero and text unchanged. */
.hero::after { content: none !important; display: none !important; }

/* Keep subtle botanical decoration in other sections. */
/* The supplied botanical image is a transparent PNG, not a solid background. */
.contact-banner{position:relative!important;overflow:hidden!important}
.contact-banner::before,.contact-banner::after{content:""!important;display:block!important;position:absolute!important;width:175px!important;height:300px!important;background:url('assets/images/mockup-botanical.png') center/contain no-repeat!important;opacity:.68!important;pointer-events:none!important;bottom:-80px!important;top:auto!important}
.contact-banner::before{left:-10px!important;transform:rotate(-20deg)!important}
.contact-banner::after{right:-10px!important;left:auto!important;transform:scaleX(-1) rotate(-20deg)!important}
.wedding-payment-feature{position:relative}
.wedding-floral{background:transparent url('assets/images/mockup-botanical.png') center/contain no-repeat!important;opacity:.8!important}
/* Preserve approved desktop logo position. */
@media (min-width: 901px) {
  .site-header .brand { transform: translateX(110px) !important; }
}

/* Wedding payment summary — keep the approved instalment layout. */
.payment-summary { min-width: 0; }
.payment-summary #planInstalment {
  display: block; margin-top: 10px; line-height: 1.9;
  font-size: 14px; font-weight: 500; color: #2d2926;
  overflow-wrap: break-word;
}
.payment-summary #planInstalment .payment-line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 5px 0;
}
.payment-summary #planInstalment .payment-line strong {
  white-space: nowrap; font-weight: 600;
}
@media (max-width: 600px) {
  .payment-summary #planInstalment { font-size: 13px; }
  .payment-summary #planInstalment .payment-line { gap: 10px; }
}

/* ABOUT ME — balanced photograph sizing */

.about .about-image {
  width: 100% !important;
  height: 460px !important;
  min-height: 0 !important;
  max-height: 460px !important;
  aspect-ratio: auto !important;

  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #fbf8f4 !important;
}

/* Keep photo and text neatly aligned */
.about {
  align-items: center !important;
}

/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
  .about .about-image {
    height: 400px !important;
    max-height: 400px !important;
  }
}

/* ABOUT ME — mobile */
@media (max-width: 600px) {
  .about .about-image {
    height: 380px !important;
    max-height: 380px !important;
  }
}

/* Portraits gallery — show more of her face */
.gallery-grid .gallery-card:nth-child(3) .photo {
  background-position: center 18% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}