/* ==========================================================================
   THEME — change --main-color to match the site's brand color.
   Everything else derives from it.
   ========================================================================== */
:root {
  --main-color: #044b91;        /* Dr Prajna Singh brand blue (marketing-go-live-config.yaml) */
  --main-contrast: #ffffff;      /* text/icon color drawn ON TOP of --main-color */

  /* Fallback shades (used only if the browser lacks color-mix()) */
  --main-color-dark: #033c74;
  --main-color-light: #eaf1fb;
}

@supports (color: color-mix(in srgb, red, red)) {
  :root {
    --main-color-dark: color-mix(in srgb, var(--main-color) 82%, black);
    --main-color-light: color-mix(in srgb, var(--main-color) 12%, white);
  }
}

:root {
  /* Neutrals — adjust to match the site's palette if needed */
  --black: #1a1a1a;
  --white: #ffffff;
  --grey-100: #f2f2f2;
  --grey-300: #dcdcdc;
  --grey-600: #6b6b6b;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* Shape */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   Shared buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--main-color);
  color: var(--main-contrast);
}
.btn-primary:hover { background: var(--main-color-dark); }

.btn-outline {
  background: transparent;
  border-color: var(--grey-300);
  color: var(--black);
}
.btn-outline:hover { border-color: var(--main-color); color: var(--main-color); }

/* ==========================================================================
   WhatsApp — floating button
   A plain direct link straight to wa.me — replaces the old njt-whatsapp
   plugin, which opened an intermediate "Start a Conversation" popup/chat-box
   before the visitor ever reached WhatsApp. One click, no popup.
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  right: 30px;
  bottom: 60px;
  z-index: 1200;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2db742;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: background-color 0.15s ease, transform 0.15s ease, bottom 0.2s ease;
}
.whatsapp-fab:hover { background: #25a038; }
.whatsapp-fab svg { width: 30px; height: 30px; flex: 0 0 auto; }

/* While the Leave a Message panel is open (bottom:60px + max-height:400px,
   so its top edge sits around bottom:460px), move the WhatsApp button above
   it instead of letting the panel cover it. Toggled by assets/script.js. */
.whatsapp-fab.is-raised { bottom: 450px; }

@media (max-width: 560px) {
  .whatsapp-fab { right: 20px; bottom: 50px; width: 48px; height: 48px; }
  .whatsapp-fab svg { width: 26px; height: 26px; }
  /* Mobile panel: bottom:76px + max-height:400px -> top edge ~476px. */
  .whatsapp-fab.is-raised { bottom: 500px; }
}

/* ==========================================================================
   Leave a Message — floating action button
   Right side, under the WhatsApp button above.
   ========================================================================== */
.contact-fab {
  position: fixed;
  right: 24px;
  bottom: 0px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--main-color);
  color: var(--main-contrast);
  border: none;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.contact-fab:hover { background: var(--main-color-dark);}
.contact-fab svg { flex: 0 0 auto; }

@media (max-width: 560px) {
  .contact-fab {
    left: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 65px;
    font-size: 0.85rem;
  }
  .contact-fab:hover { transform: translateX(-50%); }
}

/* ==========================================================================
   Leave a Message — modal panel
   ========================================================================== */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
}

.contact-modal-backdrop {
  position: fixed;
  inset: 0;
  background: transparent; /* click-outside-to-close catcher, no dimming */
}

.contact-modal-dialog {
  position: fixed;
  right: 24px;
  bottom: 60px;
  width: min(380px, calc(100vw - 48px));
  max-height: 400px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px 26px;
  overflow-y: auto;
  transform-origin: bottom right;
  transform: translateY(12px) scale(0.96);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.contact-modal.is-open .contact-modal-dialog {
  opacity: 1;
}

@media (max-width: 560px) {
  .contact-modal-dialog {
    right: 12px;
    left: 12px;
    bottom: 76px;
    width: auto;
    padding: 22px 20px;
  }
}

.contact-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--grey-100);
  color: var(--black);
  border-radius: 50%;
  cursor: pointer;
}
.contact-modal-close:hover { background: var(--grey-300); }

.contact-modal-dialog h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin: 0 0 8px;
  padding-right: 30px;
  color: var(--black);
}

.contact-modal-intro {
  color: var(--grey-600);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 24px;
}

.form-group { margin-bottom: 14px; }

.form-group input,
.form-group textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--black);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px var(--main-color-light);
}
.form-group textarea { min-height: 110px; resize: vertical; }

.contact-modal-submit { width: 100%; margin-top: 6px; }

/* ==========================================================================
   Navbar phone number + Schedule An Appointment button
   Pinned to the top of the viewport, taken out of the header's own layout
   flow entirely — every attempt to make this sit inline inside the Divi
   header's column (which has broken/unreliable width behavior) produced a
   new layout bug (stacking, edge-crowding, horizontal scrollbar). Fixed
   positioning sidesteps the column's width altogether.
   ========================================================================== */
.site-navbar-cta-row {
  position: fixed;
  top: 26px;
  right: 16px;
  /* Divi's sticky-header script (js/sticky-elements.js) sets z-index:10010 on
     the header once it goes fixed on scroll, which otherwise covers this. */
  z-index: 10020;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

@media (max-width: 700px) {
  .site-navbar-cta-row {
    top: 22px;
    right: auto;
    left: 62%;
    transform: translateX(-50%);
    gap: 8px;
  }
  /* Just the phone number on mobile — the real "Schedule An Appointment"
     button (.et_pb_button_0_tb_header) is dropped to save space. */
  .site-navbar-cta-row .et_pb_button_0_tb_header { display: none; }
}

.site-navbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--main-color);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  border: 1.5px solid var(--main-color);
  border-radius: 999px;
  padding: 8px 16px;
}
.site-navbar-phone:hover { color: var(--main-color-dark); border-color: var(--main-color-dark); }
.site-navbar-phone svg { flex: 0 0 auto; }

@media (max-width: 560px) {
  .site-navbar-phone { font-size: 0.85rem; padding: 5px 14px; }
}

/* ==========================================================================
   Mobile nav — sticky
   The real header (Divi's own sticky-elements.js) targets desktop; on
   mobile the header just scrolls away with the page. position:sticky keeps
   it pinned to the top on mobile without needing to hand-calculate its
   height to offset page content (unlike position:fixed).
   ========================================================================== */
@media (max-width: 980px) {
  header.et-l--header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--white);
  }
}

.et_pb_module .mobile_menu_bar:before {
  top: 12px;
}