/* ============================================================
   FOOTER (Top • Middle • Bottom)
   Clean, stable, no z-index or transform conflicts
   ============================================================ */

/* ======================================
   Footer Top – Cream Wave & Contact Form
   ====================================== */
.footer-top {
  --wave-offset: 16vw;   
  position: relative;
  overflow: hidden;
  background: none;
  color: var(--black);
  padding-block: clamp(100px, 12vw, 180px);
  margin-bottom: -8vw; /* overlaps red section below */
  z-index: auto; /* keeps wave behind */
}

/* Decorative wave background */
.footer-top::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--wave-offset);
  transform: translate(-50%);
  width: 160vw;
  height: clamp(420px, 48vw, 620px);
  background: url('../../assets/footer-top.svg') top center / cover no-repeat;
  filter: brightness(0.96);
  opacity: 0.75;
  z-index: -1;
  pointer-events: none;
}

/* Grid layout */
.footer-top__grid {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  top: clamp(100px, 10vw, 160px);
  grid-template-columns:
    minmax(260px, 1.2fr)
    minmax(420px, 1.8fr); /* maintain original form width */
}

@media (min-width: 1024px) {
  .footer-top__grid {
    column-gap: clamp(40px, 4vw, 60px);
  }
}

/* Left text block */
.footer-top__content {
  text-align: left;
  padding: clamp(24px, 3vw, 60px);  /* optional: gives breathing room */
  transform: translate(
    0,                                   /* default: stay fully in view */
    clamp(80px, 1.6vw, 100px)            /* keep the vertical drop */
  );
}

/* Only pull it left on wide desktops */
@media (min-width: 2000px) {
  .footer-top__content {
    transform: translate(
      clamp(-220px, -10vw, -160px),      /* matches your desktop position */
      clamp(80px, 1.6vw, 100px)
    );
  }
}


.footer-top__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--black);
  margin-bottom: var(--space-2);
}

.footer-top__title em {
  color: var(--primary-red);
  font-style: normal;
  font-weight: 600;
}

.footer-top__description {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  max-width: 520px;
  margin: 0;
}

/* Form wrapper (handles lateral positioning safely) */
.footer-top__form-wrap {
  display: flex;
  justify-content: flex-end;                /* optional so it hugs the right */
  padding-inline: clamp(24px, 4vw, 60px);   /* add space either side */
  transform: none;                          /* drop the 19% push */
  padding-left: clamp(24px, 4vw, 60px);
  padding-right: clamp(12px, 2vw, 24px); /* was the same as left */
}

/* add this */
@media (min-width: 1600px) {
  .footer-top__form-wrap {
    padding-right: clamp(0px, 1vw, 12px);   /* let the card hug the edge */
    padding-left: clamp(20px, 3vw, 48px);   /* keep some gap on the left */
  }

  .footer-top__form {
    max-width: clamp(560px, 44vw, 680px);   /* allow the form to grow with the track */
  }
}

/* Contact form card */
.footer-top__form {
  background: var(--yellow);
  border-radius: 20px;
  box-shadow: none;
  position: relative;
  z-index: 5; /* above wave and red footer */
  margin-left: clamp(10px, 1vw, 20px);
  width: 100%;
  max-width: clamp(480px, 46vw, 600px);
  margin: 0;
}




/* Inputs + textarea */
.footer-top__form input,
.footer-top__form textarea {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 1px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.footer-top__form input:focus,
.footer-top__form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-red) 25%, transparent);
}

/* Textarea height */
.footer-top__form textarea {
  max-height: 200px;
  resize: vertical;
}

/* Submit button */
.footer-top__form .wpcf7-submit {
  background: var(--primary-red);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: clamp(16px, 1.1vw, 18px);
  width: 100%;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.15s ease;
}

.footer-top__form .wpcf7-submit:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.footer-top__form,
.footer-top__form:hover,
.footer-top__form:focus-within {
  box-shadow: none !important;
  transform: none !important;
}


.footer-top__form p:last-of-type {
  margin-bottom: 0;
}

/* ======================================
   Footer Middle – Main Content
   ====================================== */
.footer-middle {
  position: relative;
  background: url('../../assets/footer-middle.svg') top center / cover no-repeat;
  color: var(--black);
  overflow: hidden;
  padding-top: clamp(100px, 12vw, 180px);
  padding-bottom: clamp(70px, 9vw, 110px);
  z-index: 1;
}

/* Grid layout */
.footer-middle__grid {
  display: grid;
  justify-content: center;
  align-items: start;
  gap: clamp(40px, 4vw, 60px);
  position: relative;
  top: clamp(40px, 6vw, 80px);

  /* New responsive sizing logic */
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 22vw, 320px), 1fr));
  max-width: min(100%, 1280px); /* prevents overflow past edges */
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 60px);
}

@media (min-width: 1024px) {
  .footer-middle__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .footer-middle__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .footer-middle__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) and (min-width: 1024px) {
  .footer-middle__cta.btn {
    font-size: clamp(14px, 0.95vw, 16px);
    padding-inline: clamp(20px, 2.2vw, 26px);
  }
}


@media (max-width: 1023.98px) {
  .footer-middle__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .footer-middle__grid { grid-template-columns: 1fr; }
}

/* Typography */
.footer-middle__heading {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}
.footer-middle__col p,
.footer-middle__col a:not(.btn) {
  color: var(--black);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Logo + tagline */
.footer-middle__logo {
  width: clamp(140px, 22vw, 220px);
  margin-bottom: var(--space-2);
  background: #fff;
  border-radius: 999px;
  padding: clamp(6px, 1vw, 10px) clamp(14px, 2vw, 20px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: inline-block;
}
.footer-middle__tagline {
  max-width: 280px;
  margin-inline: auto;
  font-style: italic;
  line-height: 1.5;
}

/* Social icon */
.footer-middle__social {
  margin-top: clamp(20px, 3.5vw, 40px);
  display: flex;
  align-items: center;
}
.footer-middle__facebook svg {
  width: clamp(36px, 2.8vw, 50px);
  height: auto;
  display: block;
  transition: transform 0.2s ease;
  transform: translateY(-16px);
}
.footer-middle__facebook:hover svg { transform: translateY(-18px); }

/* Decorative icons */
.footer-middle__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.25s ease;
}
.footer-middle__decor--1 {
  top: clamp(-40px, -6vw, -80px);
  left: clamp(0vw, 2vw, 4vw);
  width: clamp(80px, 12.6vw, 145px);
  transform: translate(-250%, -85%);
  z-index: 3;
}
.footer-middle__decor--2 {
  top: clamp(10px, 4vw, 60px);
  right: clamp(20px, 6vw, 100px);
  width: clamp(90px, 16vw, 180px);
  transform: translate(-380%, -200%);
  z-index: 5;
}
@media (hover: hover) and (pointer: fine) {
  .footer-middle__decor:hover { transform: scale(1.05); }
}
@media (max-width: 767.98px) {
  .footer-middle__decor--1 {
    left: clamp(12px, 5vw, 40px);
    bottom: clamp(12px, 5vw, 40px);
    width: clamp(60px, 20vw, 100px);
  }
  .footer-middle__decor--2 {
    right: clamp(12px, 5vw, 40px);
    top: clamp(12px, 5vw, 40px);
    width: clamp(70px, 22vw, 120px);
  }
}

/* Footer menu */
.footer-middle__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.footer-middle__menu a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color 0.2s ease;
}
.footer-middle__menu a:hover { color: var(--primary-red); }

/* Contact + CTA */
.footer-middle__address p { margin: 0; }
.footer-middle__contact a:not(.btn) {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-middle__contact a:not(.btn):hover,
.footer-middle__contact a:not(.btn):focus-visible {
  color: var(--primary-red);
}
.footer-middle__cta { margin-top: var(--space-2); }
.footer-middle__cta.btn {
  color: #fff !important;
  text-decoration: none !important;
}
.footer-middle__cta.btn:hover,
.footer-middle__cta.btn:focus-visible { color: #fff !important; }

/* Map embed */


.footer-middle__map-embed {
  width: 100%;
  max-width: 420px;
  height: 300px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
}
.footer-middle__map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}



/* ======================================
   Footer Bottom – Final Pixel Alignment
   ====================================== */
.footer-bottom {
  background: #FF9595;
  color: var(--black);
  text-align: center;
  font-size: 0.95rem;
  padding-block: clamp(20px, 3vw, 36px);
}
.footer-bottom__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.footer-bottom__text { margin: 0; line-height: 1.6; }

/* Line 2: menu + credits inline, centered */
.footer-bottom__line2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.footer-bottom__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-bottom__menu li {
  display: flex;
  align-items: center;
}
.footer-bottom__menu li:not(:last-child)::after {
  content: "|";
  margin: 0 0.55rem;
  opacity: 0.65;
  color: var(--black);
}
.footer-bottom__menu::after {
  content: "|";
  margin: 0 0.45rem 0 0.55rem;
  opacity: 0.65;
  color: var(--black);
}
.footer-bottom__menu a,
.footer-bottom a {
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}
.footer-bottom__menu a:hover,
.footer-bottom__menu a:focus,
.footer-bottom a:hover,
.footer-bottom a:focus { opacity: 0.8; }

@media (max-width: 767.98px) {
  .footer-bottom__line2 {
    flex-direction: column;
    gap: var(--space-1);
  }
  .footer-bottom__menu::after { content: ""; }
}


/* ======================================
   Footer Responsive Styles
   ====================================== */

@media (max-width: 2450px) { .footer-top { --wave-offset: 21vw; } }
@media (max-width: 1900px) { .footer-top { --wave-offset: 25vw; }

.footer-middle__decor--1 {
  transform: translate(-150%, -85%);
}


}
@media (max-width: 1600px) { .footer-top { --wave-offset: 30vw; } 

.footer-middle__decor--1 {
  transform: translate(-50%, -130%);
}


}



@media (max-width: 1400px) {
.footer-middle__decor--1 {
  transform: translate(50%, -100%);
}

.footer-middle__decor--2 {
  transform: translate(-350%, -170%);
}

}

@media (max-width: 1300px) {
  .footer-middle__decor--1{
    height: 100px;
    transform: translate(50%, -130%);
}

  .footer-middle__decor--2 {
height: 100px;
transform: translate(-350%, -220%);
}
}


@media (max-width: 1200px) { .footer-top { --wave-offset: 35vw; 

  overflow-x: clip; /* hides horizontal overflow only (no scroll bar) */
  overflow-y: visible; /* still lets the wave show downward */
}
}
@media (max-width: 1100px) { .footer-top { --wave-offset: 45vw; } }



@media (max-width: 1023px) {
  .footer-middle__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(30px, 4vw, 50px);
    align-items: start;
    justify-items: center;
    text-align: left; /* keeps headings and text aligned cleanly */
  }

  /* --- Reorder the 4 blocks into new visual sequence --- */
  .footer-middle__col:nth-child(1) { order: 3; } /* Logo + tagline */
  .footer-middle__col:nth-child(2) { order: 1; } /* Links */
  .footer-middle__col:nth-child(3) { order: 2; } /* Contact */
  .footer-middle__col:nth-child(4) { order: 4; } /* Map */

  /* --- Optional alignment polish --- */
  .footer-middle__logo {
    margin-inline: auto;
    display: block;
  }

  .footer-middle__tagline {
    text-align: left;
    margin-inline: auto;
  }

  .footer-middle__menu {
    align-items: flex-start;
  }

  .footer-middle__map-embed {
    justify-self: center;
    max-width: clamp(300px, 45vw, 400px);
  }

    .footer-middle {
    padding-top: clamp(140px, 18vw, 200px);
  }

.footer-top { --wave-offset: 45vw; 
}
}

@media (max-width: 1000px) {
.footer-top { --wave-offset: 50vw; 
}
}

@media (max-width: 950px) {
.footer-top { --wave-offset: 55vw; 
}
}

@media (max-width: 850px) {
.footer-top { --wave-offset: 60vw; 
}

  .footer-middle__decor--1{
    height: 100px;
    transform: translate(50%, -110%);
}

  .footer-middle__decor--2 {
height: 100px;
transform: translate(-350%, -200%);
}

}



@media (max-width: 768px) {
  .footer-middle__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 60px);
    justify-items: center;
    text-align: center;
    padding-inline: clamp(20px, 6vw, 40px);
  }

  /* Ensure each column takes full width */
  .footer-middle__col {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }

  /* Logo + tagline */
  .footer-middle__logo {
    margin-inline: auto;
    display: block;
  }
  .footer-middle__tagline {
    margin-inline: auto;
    text-align: center;
  }

    /* ----- ORDER (mobile flow) ----- */
  .footer-middle__col:nth-child(1) { order: 1; } /* Logo + tagline */
  .footer-middle__col:nth-child(2) { order: 2; } /* Links */
  .footer-middle__col:nth-child(3) { order: 3; } /* Contact */
  .footer-middle__col:nth-child(4) { order: 4; } /* Map */

  /* Links */
  .footer-middle__menu {
    align-items: center;
  }

  /* Contact */
  .footer-middle__contact,
  .footer-middle__address {
    text-align: center;
  }

  /* CTA button */
  .footer-middle__cta {
    margin-inline: auto;
  }

  /* Map */
  .footer-middle__map-embed {
    max-width: clamp(300px, 80vw, 420px);
    justify-self: center;
  }

  .footer-middle__social {
  margin-top: clamp(20px, 3.5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-middle__facebook svg {
  transform: translateY(0px);
}

.footer-top { --wave-offset: 95vw; 
}

  .footer-middle__decor--1{
    height: 100px;
    transform: translate(50%, -30%);
}

  .footer-middle__decor--2 {
height: 100px;
transform: translate(-50%, -180%);
}

}

@media (max-width: 700px) {
.footer-top { --wave-offset: 100vw; 
}
}


@media (max-width: 620px) {
.footer-top { --wave-offset: 110vw; 
}
}

@media (max-width: 550px) {
.footer-top { --wave-offset: 135vw; 
}

  .footer-middle__decor--1{
    height: 80px;
    transform: translate(50%, -70%);
}

  .footer-middle__decor--2 {
height: 80px;
transform: translate(-50%, -200%);
}

}

@media (max-width: 450px) {
.footer-top { --wave-offset: 160vw; 
}
}

@media (max-width: 400px) {
.footer-top { --wave-offset: 180vw; 
}
}

@media (max-width: 350px) {
.footer-top { --wave-offset: 210vw; 
}
}

/* Move title + description down gradually with smaller screens */
@media (max-width: 1100px) {
  .footer-top__content {
    transform: translateY(8vw);
  }
}

@media (max-width: 950px) {
  .footer-top__content {
    transform: translateY(15vw);
  }
}

@media (max-width: 768px) {
  /* Switch to single column layout */
  .footer-top__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: clamp(24px, 5vw, 40px);
    top: auto; /* reset any vertical offset */
    padding-inline: clamp(20px, 6vw, 40px);
  }

  /* Reorder elements */
  .footer-top__content {
    order: 1;
    transform: translateY(0); /* reset previous transforms */
    padding: 0;
     text-align: center; /* ✅ centers title + description */
  }

  .footer-top__title {
    font-size: clamp(28px, 5vw, 36px);
    margin-bottom: clamp(12px, 3vw, 20px);
  }

  .footer-top__description {
    order: 2;
    font-size: clamp(16px, 1.4vw, 18px);
    max-width: 520px;
    margin-inline: auto;
    line-height: 1.6;
  }

  .footer-top__form-wrap {
    order: 3;
    justify-content: center;
    padding-inline: 0;
    width: 100%;
  }

  .footer-top__form {
    max-width: clamp(420px, 90vw, 520px);
    margin-inline: auto;
  }
}


body.page-id-12 .footer-top {
  margin-top: calc(-1.75 * clamp(60px, 6vw, 120px)) !important;
}