/* hero-tweaks.css
 *
 * Deliberate departures from the mirrored original: tighter hero padding and
 * slightly smaller hero type.
 *
 * Kept in its own file (rather than edited into the mirrored Elementor CSS) so
 * a future re-capture of the live site does not silently wipe these changes.
 * Loaded last, after the mirrored stylesheets.
 *
 * Original values, for reference:
 *   padding top/bottom   desktop 300/150   tablet 250/100   mobile 200/80
 *   headline             desktop 140px     tablet 90px      mobile 60px
 *   subtitle             desktop 24px      tablet 18px      mobile 16px
 *   section margin-top   -150px (pulls the hero under the header)
 */

/* ---------- desktop ---------- */
.elementor-4645 .elementor-element.elementor-element-3c812de {
  --padding-top: 210px;      /* was 300px */
  --padding-bottom: 110px;   /* was 150px */
}

.elementor-4645 .elementor-element.elementor-element-3eebad6 .elementor-heading-title {
  font-size: 118px;          /* was 140px */
  line-height: 102px;        /* was 120px */
}

.elementor-4645 .elementor-element.elementor-element-51e3eb9 {
  font-size: 21px;           /* was 24px */
}

/* ---------- tablet (theme breakpoint: 1024px) ---------- */
@media (max-width: 1024px) {
  .elementor-4645 .elementor-element.elementor-element-3c812de {
    --padding-top: 175px;    /* was 250px */
    --padding-bottom: 75px;  /* was 100px */
  }

  .elementor-4645 .elementor-element.elementor-element-3eebad6 .elementor-heading-title {
    font-size: 76px;         /* was 90px */
    line-height: 68px;       /* was 80px */
  }

  .elementor-4645 .elementor-element.elementor-element-51e3eb9 {
    font-size: 17px;         /* was 18px */
  }
}

/* ---------- phone (theme breakpoint: 767px) ---------- */
@media (max-width: 767px) {
  .elementor-4645 .elementor-element.elementor-element-3c812de {
    --padding-top: 205px;    /* original 200px; raised to clear the fixed header */
    --padding-bottom: 60px;  /* was 80px */
  }

  .elementor-4645 .elementor-element.elementor-element-3eebad6 .elementor-heading-title {
    font-size: 64px;         /* original 60px; enlarged for presence on phones */
    line-height: 61px;
  }

  .elementor-4645 .elementor-element.elementor-element-51e3eb9 {
    font-size: 15px;         /* was 16px */
    line-height: 24px;       /* was 26px */
  }
}

/* ---------------------------------------------------------------------------
   Elementor popup fallback (BOOK A TABLE).
   Elementor's popup module normally supplies the modal chrome; it never boots
   in the mirror, so assets/mirror-shim.js wraps the popup content in
   .mirror-popup-overlay and toggles .is-open. These are the modal styles.
   --------------------------------------------------------------------------- */
.mirror-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .7);
  padding: 24px;
  overflow-y: auto;
}

.mirror-popup-overlay.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mirror-popup-overlay > .elementor-location-popup {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  background: #330f03;
  max-width: 620px;
  width: 100%;
  padding: 46px 38px;
  border-radius: 10px;
  position: relative;
}

/* close affordance, since Elementor's own close button is not rendered */
.mirror-popup-overlay.is-open::after {
  content: "\00d7";
  position: absolute;
  top: 18px;
  right: 26px;
  font-size: 42px;
  line-height: 1;
  color: #fff;
  opacity: .85;
  pointer-events: none;
}

/* the popup's own containers carry Elementor sizing that collapses when the
   popup module never runs; restore normal flow inside the modal only */
.mirror-popup-overlay .elementor-location-popup .e-con,
.mirror-popup-overlay .elementor-location-popup .e-con-inner,
.mirror-popup-overlay .elementor-location-popup .elementor-element {
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------------------------------------------------------------------------
   Formspree form states (see assets/forms.js)
   --------------------------------------------------------------------------- */
.field-error label,
.field-error .elementor-field-label { color: #c0392b !important; }

.field-error input,
.field-error select,
.field-error textarea {
  border-color: #c0392b !important;
  box-shadow: inset 0 -2px 0 #c0392b;
}

.elementor-field-group label .req {
  color: #c0392b;
  letter-spacing: 0;
  margin-left: 2px;
}

.form-thanks {
  padding: 46px 30px;
  text-align: center;
}
.form-thanks h3 {
  font-family: "Forum", Georgia, serif;
  font-size: 34px;
  color: #fff;
  margin: 0 0 10px;
}
.form-thanks p {
  color: rgba(255, 255, 255, .85);
  font-size: 17px;
  margin: 0;
}
/* the newsletter band sits on cream, so invert there */
.elementor-4620 .form-thanks h3,
section[class*="54d7a54"] .form-thanks h3 { color: #330f03; }
.elementor-4620 .form-thanks p,
section[class*="54d7a54"] .form-thanks p { color: #5b5b5b; }