/* =========================================================
   PARK INDUSTRIES | FOOTER SUBSCRIBE

   FEATURES
   - Original TeamViewer background animation
   - Right-to-left text color wipe
   - Native HubSpot form
   - Original form-wcontent theme hooks
   - Responsive popup
   ========================================================= */


/* =========================================================
   FOOTER SUBSCRIBE
   ========================================================= */

.footer-subscribe {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}


/* =========================================================
   SUBSCRIBE BUTTON
   ========================================================= */

.site-footer
.footer-subscribe
button.footer-subscribe__trigger.btn.btn--teamview {

  --fs-text-wipe-duration: 0.3s;
  --c-third: #ffffff;

  appearance: none;
  -webkit-appearance: none;

  position: relative;

  color: #ffffff !important;

  cursor: pointer;

  background-size:
    auto,
    4rem 100% !important;

}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.site-footer
.footer-subscribe
button.footer-subscribe__trigger.btn.btn--teamview:hover {

  color: #04173F !important;

  background-size:
    auto,
    100% 100% !important;

}


/* =========================================================
   ANIMATED TEXT WRAPPER
   ========================================================= */

.site-footer
.footer-subscribe
.footer-subscribe__trigger-text {

  position: relative;
  z-index: 1;

  display: inline-block;

  color: #ffffff !important;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;

}


/* =========================================================
   BASE TEXT

   White text remains underneath.
   ========================================================= */

.site-footer
.footer-subscribe
.footer-subscribe__trigger-text-base {

  position: relative;
  display: block;

  color: #ffffff !important;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;

}


/* =========================================================
   NAVY TEXT OVERLAY

   Starts hidden, reveals right to left.
   ========================================================= */

.site-footer
.footer-subscribe
.footer-subscribe__trigger-text-overlay {

  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  color: #04173F !important;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;

  clip-path: inset(0 0 0 100%);

  transition:
    clip-path var(--fs-text-wipe-duration) ease;

  pointer-events: none;

}


/* =========================================================
   RIGHT-TO-LEFT TEXT COLOR WIPE
   ========================================================= */

.site-footer
.footer-subscribe
button.footer-subscribe__trigger.btn.btn--teamview:hover
.footer-subscribe__trigger-text-overlay {

  clip-path: inset(0 0 0 0);

}


/* =========================================================
   BUTTON FOCUS / RESET
   ========================================================= */

.site-footer
.footer-subscribe
button.footer-subscribe__trigger.btn.btn--teamview:focus:not(:hover) {

  color: #ffffff !important;

  background-size:
    auto,
    4rem 100% !important;

}


.site-footer
.footer-subscribe
button.footer-subscribe__trigger.btn.btn--teamview:focus-visible:not(:hover) {

  color: #ffffff !important;

  background-size:
    auto,
    4rem 100% !important;

  outline: 2px solid #ffffff;
  outline-offset: 3px;

}


/* =========================================================
   MODAL
   ========================================================= */

.footer-subscribe__modal {

  width: min(
    calc(100% - 3rem),
    620px
  );

  max-width: 620px;

  max-height: calc(100% - 2rem);

  margin: auto;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: #ffffff;
  color: #04173F;

  overflow: auto;

}


/* =========================================================
   MODAL BACKDROP
   ========================================================= */

.footer-subscribe__modal::backdrop {

  background: rgba(
    4,
    23,
    63,
    0.78
  );

}


/* =========================================================
   MODAL INNER
   ========================================================= */

.footer-subscribe__modal-inner {

  position: relative;

  width: 100%;
  box-sizing: border-box;

  padding:
    2.8rem
    3.5rem
    1.8rem;

}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.footer-subscribe__close {

  position: absolute;

  top: 1rem;
  right: 1rem;

  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.6rem;
  height: 3.6rem;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: #04173F;

  font-family: Arial, sans-serif;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition: color 0.15s ease;

}


.footer-subscribe__close span {

  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 1;

}


.footer-subscribe__close:hover,
.footer-subscribe__close:focus-visible {

  color: #5494CC;

}


.footer-subscribe__close:focus-visible {

  outline: 2px solid #5494CC;
  outline-offset: 2px;

}


/* =========================================================
   MODAL CONTENT
   ========================================================= */

.footer-subscribe__modal-content {

  width: 100%;
  max-width: 520px;

  margin: 0 auto;

}


/* =========================================================
   MODAL HEADING

   Uses the global website heading font.
   ========================================================= */

.footer-subscribe__heading {

  width: 100%;

  margin:
    0
    auto
    2.5rem;

  padding: 0 3rem;

  box-sizing: border-box;

  color: #04173F;

  font-family: var(--font-heading);

  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;

  text-align: center;
  text-transform: uppercase;

  white-space: nowrap;

}


/* =========================================================
   FORM CONTAINER

   Structural sizing only.
   ========================================================= */

.footer-subscribe__form {

  width: 100%;
  max-width: 520px;

  margin: 0 auto;

}


/* =========================================================
   ORIGINAL FORM-WCONTENT THEME COMPATIBILITY

   Restore the classes used by the working
   form_wcontent module.

   Reset its original column-specific spacing so
   it can be used inside a centered popup.

   No form field or button colors are defined here.
   ========================================================= */

.footer-subscribe__theme-form.form-wcontent {

  position: relative;

  display: block;

  width: 100%;
  max-width: 100%;

  margin: 0;
  padding: 0;

  overflow: visible;

}


.footer-subscribe__theme-form
.form-wcontent__form-wrap {

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

}


.footer-subscribe__theme-form
.form-wcontent__form {

  display: block;

  width: 100%;
  max-width: 100%;

  margin: 0;
  padding: 0;

  overflow: visible;

}


/* =========================================================
   HUBSPOT FORM STRUCTURE

   Allow global CSS to style:
   - Labels
   - Text inputs
   - Dropdowns
   - Checkboxes
   - Radio groups
   - Validation messages
   - Submit buttons

   Only width limitations are addressed.
   ========================================================= */

.footer-subscribe__theme-form
.hbspt-form,

.footer-subscribe__theme-form
.hs-form,

.footer-subscribe__theme-form
form {

  width: 100%;
  max-width: 100%;

  margin-left: auto;
  margin-right: auto;

}


.footer-subscribe__theme-form
.hs-form fieldset {

  max-width: 100%;

}


.footer-subscribe__theme-form
iframe {

  display: block;

  width: 100%;
  max-width: 100%;

}


/* =========================================================
   FORM SPACING

   Minimal layout control.

   Fonts, colors, field backgrounds, and buttons
   remain controlled by the global website theme.
   ========================================================= */

.footer-subscribe__form
form {

  margin-bottom: 0;

}


.footer-subscribe__form
.hs-form-field {

  margin-bottom: 1.4rem;

}


.footer-subscribe__form
.hs-form
.hs-richtext:first-child {

  margin-top: 0;

}


.footer-subscribe__form
.hs-form
.hs-richtext:first-child p:first-child {

  margin-top: 0;

}


/* =========================================================
   SUBMIT BUTTON

   IMPORTANT:

   No custom submit button design.

   No forced color, background, padding, or class.

   The original HubSpot submit control is preserved,
   allowing the website theme to style it.
   ========================================================= */


/* =========================================================
   REMOVE EXTRA BOTTOM SPACE
   ========================================================= */

.footer-subscribe__modal-content > :last-child {

  margin-bottom: 0;

}


.footer-subscribe__modal-inner > :last-child {

  margin-bottom: 0;

}


/* =========================================================
   MOBILE
   ========================================================= */


@media screen and (max-width: 600px) {

  .site-footer .footer-subscribe {
    display: flex;
    width: 100%;

    justify-content: center;
    align-items: center;
  }

  .site-footer .footer-subscribe__trigger {
    margin-left: auto;
    margin-right: auto;
  }

}

  .footer-subscribe__modal {

    width: calc(100% - 1.5rem);

    max-height: calc(100% - 1.5rem);

  }


  .footer-subscribe__modal-inner {

    padding:
      2.8rem
      1.8rem
      1.5rem;

  }


  .footer-subscribe__modal-content {

    max-width: none;

  }


  .footer-subscribe__heading {

    margin-bottom: 2rem;

    padding: 0 1rem;

    font-size: 2.8rem;

    line-height: 1.15;

    white-space: normal;

  }


  .footer-subscribe__close {

    top: 0.6rem;
    right: 0.6rem;

  }


  .footer-subscribe__form
  .hs-form-field {

    margin-bottom: 1.2rem;

  }

}


/* =========================================================
   ACCESSIBILITY: REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .site-footer
  .footer-subscribe
  .footer-subscribe__trigger-text-overlay {

    transition: none !important;

  }

}