/* ==========================================================================
   Bellisse - static site additions

   1. Makes the rebuilt form controls (native <select> and native date input)
      match the original Metform widgets, which were React components.
   2. A few responsive safeguards.

   Everything else on the page is styled by the site's original stylesheets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Form controls
   -------------------------------------------------------------------------- */

/* native <select> replaces the old react-select widget */
.bl-static-form select.mf-input {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A2313' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
  cursor: pointer;
}
.bl-static-form select.mf-input::-ms-expand { display: none; }

/* keep the placeholder option looking like a placeholder */
.bl-static-form select.mf-input:invalid,
.bl-static-form select.mf-input option[value=""] { opacity: .75; }

/* native date / datetime input replaces the old flatpickr widget */
.bl-static-form input.mf-date-input {
  width: 100%;
  cursor: pointer;
}
.bl-static-form input[type="date"]::-webkit-calendar-picker-indicator,
.bl-static-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .6;
}
.bl-static-form input[type="date"]:hover::-webkit-calendar-picker-indicator,
.bl-static-form input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* validation message under each field */
.bl-static-form .mf-error-message {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #c0392b;
  margin-top: 6px;
}
.bl-static-form .mf-error-message:empty { display: none; }

/* form-level status message */
.bl-form__msg {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.bl-form__msg:empty { display: none; }
.bl-form__msg.is-error   { color: #c0392b; }
.bl-form__msg.is-success { color: #2e7d4f; }

.bl-static-form button[type="submit"]:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   2. Responsive safeguards
   -------------------------------------------------------------------------- */

/* never let media force a horizontal scrollbar */
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }

/* Long unbroken words (e.g. the @handle heading) would otherwise push the page
   sideways on narrow screens if a webfont fails to load. Note we deliberately
   do NOT use overflow-x:hidden on html/body, because that breaks the sticky
   header. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-heading-title a { overflow-wrap: break-word; word-break: normal; }

/* the map embed was a fixed-size iframe in the original markup */
iframe[src*="maps.google"],
iframe[src*="google.com/maps"] {
  width: 100%;
  border: 0;
  display: block;
}

@media (max-width: 767px) {
  iframe[src*="maps.google"],
  iframe[src*="google.com/maps"] { min-height: 320px; }

  /* 16px stops iOS Safari zooming in when a field is focused */
  .bl-static-form input.mf-input,
  .bl-static-form select.mf-input,
  .bl-static-form textarea.mf-input { font-size: 16px; }

  /* submit buttons go full width on phones */
  .bl-static-form .mf-btn-wraper .metform-btn { width: 100%; }
}

/* tables were never styled for small screens */
@media (max-width: 767px) {
  table { display: block; width: 100%; overflow-x: auto; }
}


/* --------------------------------------------------------------------------
   3. Lightbox (stands in for Elementor's, whose script was not in the capture)
   -------------------------------------------------------------------------- */
.bl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: rgba(38, 14, 8, .92);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.bl-lightbox.is-open { display: flex; }

.bl-lightbox__stage {
  margin: 0;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-lightbox__stage img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.bl-lightbox__close,
.bl-lightbox__nav {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  transition: background .2s ease;
}
.bl-lightbox__close:hover,
.bl-lightbox__nav:hover { background: rgba(255, 255, 255, .28); }

.bl-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 30px;
}
.bl-lightbox__nav {
  width: 48px;
  height: 48px;
  font-size: 32px;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .bl-lightbox { padding: 12px; gap: 4px; }
  .bl-lightbox__nav { width: 40px; height: 40px; font-size: 26px; }
  .bl-lightbox__close { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 26px; }
  .bl-lightbox__stage img { max-height: 76vh; }
}

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none !important; }
}

/* --------------------------------------------------------------------------
   4. Blog grid gutter fix
   The ElementsKit post grid uses a Bootstrap-style row with -15px side
   margins, but its parent has no matching padding, so the row is 30px wider
   than the viewport on phones. The columns stack on mobile anyway, so the
   negative gutter serves no purpose there.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ekit-wid-con .ekit-row.post-items { margin-left: 0; margin-right: 0; }
}