/* ==========================================================================
   Doctor247 Elementor Widgets — Shared Stylesheet
   Matches the original HTML template exactly.
   ========================================================================== */

/* ── CSS Custom Properties ────────────────────────────────────────────────── */
:root {
  --d247-navy:      #253e5d;
  --d247-sky:       #59b7e0;
  --d247-green:     #80c422;
  --d247-green2:    #82c41e;
  --d247-white:     #ffffff;
  --d247-offwhite:  #f4f8fb;
  --d247-lightsky:  #e8f6fd;
  --d247-textdark:  #1a2d42;
  --d247-textmid:   #4a6070;
  --d247-textlight: #7a9ab0;
}

/* ── Keyframe Animations ──────────────────────────────────────────────────── */
@keyframes d247-pulse {
  0%,  100% { opacity: 1;   transform: scale(1);   }
  50%        { opacity: 0.6; transform: scale(1.3); }
}

@keyframes d247-float {
  0%,  100% { transform: translateY(0px); }
  50%        { transform: translateY(-14px); }
}

/* ── Header Wrapper ───────────────────────────────────────────────────────── */
.d247-header-wrap {
  position: relative;
}

/* ── Nav Bar ──────────────────────────────────────────────────────────────── */
.d247-nav {
  position: fixed;
  top:    0;
  left:   0;
  right:  0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  height: 72px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(37, 62, 93, 0.08);
  transition: box-shadow 0.3s ease, height 0.3s ease;
  box-sizing: border-box;
}

.d247-nav.scrolled {
  box-shadow: 0 4px 40px rgba(37, 62, 93, 0.10);
  height: 64px; /* overridden by inline style from widget settings */
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.d247-nav-logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  text-decoration: none;
  flex-shrink: 0;
}

.d247-nav-logo img {
  height: 42px;
  width: auto;
  display: block;
}

.d247-nav-logo-text {
  font-family: 'Sora', sans-serif;
  font-size:   1.3rem;
  font-weight: 800;
  color:       var(--d247-navy);
  white-space: nowrap;
}

.d247-nav-logo-text span {
  color: var(--d247-sky);
}

/* ── Desktop Menu ─────────────────────────────────────────────────────────── */
.d247-nav-center {
  display:     flex;
  align-items: center;
  gap:         4px;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.d247-nav-center li {
  margin:  0;
  padding: 0;
}

/* Strip default WP menu wrappers */
.d247-nav-center .menu,
.d247-nav-center .sub-menu {
  display:     flex;
  align-items: center;
  gap:         4px;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.d247-nav-center a {
  font-family:     'Sora', sans-serif;
  font-size:       0.875rem;
  font-weight:     500;
  color:           var(--d247-textmid);
  text-decoration: none;
  padding:         8px 14px;
  border-radius:   10px;
  transition:      color 0.2s ease, background 0.2s ease;
  display:         block;
  white-space:     nowrap;
}

.d247-nav-center a:hover,
.d247-nav-center li.current-menu-item > a,
.d247-nav-center li.current-menu-ancestor > a {
  color:      var(--d247-navy);
  background: var(--d247-offwhite);
}

/* ── Right-side Controls ──────────────────────────────────────────────────── */
.d247-nav-right {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-shrink: 0;
}

/* Phone Button */
.d247-nav-phone {
  display:         flex;
  align-items:     center;
  gap:             7px;
  font-family:     'Sora', sans-serif;
  font-size:       0.82rem;
  font-weight:     600;
  color:           var(--d247-navy);
  text-decoration: none;
  padding:         8px 14px;
  border:          1.5px solid rgba(37, 62, 93, 0.15);
  border-radius:   50px;
  transition:      border-color 0.2s ease, color 0.2s ease;
  white-space:     nowrap;
}

.d247-nav-phone:hover {
  border-color: var(--d247-sky);
  color:        var(--d247-sky);
}

.d247-nav-phone-dot {
  display:       block;
  width:         7px;
  height:        7px;
  background:    var(--d247-green);
  border-radius: 50%;
  flex-shrink:   0;
  animation:     d247-pulse 2s ease-in-out infinite;
}

/* CTA Button */
.d247-btn-nav-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  background:      linear-gradient(135deg, var(--d247-green), #6aaa18);
  color:           var(--d247-white);
  padding:         10px 22px;
  border-radius:   50px;
  font-family:     'Sora', sans-serif;
  font-weight:     700;
  font-size:       0.85rem;
  text-decoration: none;
  transition:      transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow:      0 4px 16px rgba(128, 196, 34, 0.35);
  white-space:     nowrap;
}

.d247-btn-nav-cta:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 24px rgba(128, 196, 34, 0.45);
  color:      var(--d247-white);
}

.d247-btn-nav-cta svg {
  display:     inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Hamburger Button ─────────────────────────────────────────────────────── */
.d247-nav-hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  cursor:         pointer;
  padding:        4px;
  background:     none;
  border:         none;
  outline:        none;
}

.d247-nav-hamburger span {
  display:       block;
  width:         24px;
  height:        2px;
  background:    var(--d247-navy);
  border-radius: 2px;
  transition:    transform 0.3s ease, opacity 0.3s ease;
}

.d247-nav-hamburger.open span:nth-child(1) { transform: rotate(45deg)  translate(5px, 5px);  }
.d247-nav-hamburger.open span:nth-child(2) { opacity: 0; }
.d247-nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile Overlay Menu ──────────────────────────────────────────────────── */
.d247-mobile-menu {
  display:        none;
  position:       fixed;
  top:            72px; /* matches nav height; JS updates on scroll */
  left:           0;
  right:          0;
  z-index:        9998;
  background:     var(--d247-white);
  padding:        24px 5vw 32px;
  border-bottom:  1px solid rgba(37, 62, 93, 0.08);
  box-shadow:     0 20px 50px rgba(37, 62, 93, 0.10);
  flex-direction: column;
  gap:            4px;
}

.d247-mobile-menu.open {
  display: flex;
}

/* Plain <a> tags rendered by mobile walker */
.d247-mobile-menu > a,
.d247-mobile-menu li a {
  font-family:     'Sora', sans-serif;
  font-size:       1rem;
  font-weight:     600;
  color:           var(--d247-navy);
  text-decoration: none;
  padding:         14px 16px;
  border-radius:   12px;
  transition:      background 0.2s ease;
  display:         block;
}

.d247-mobile-menu > a:hover,
.d247-mobile-menu li a:hover {
  background: var(--d247-offwhite);
}

.d247-mobile-menu .d247-mobile-cta {
  margin-top:   12px;
  background:   var(--d247-green);
  color:        var(--d247-white) !important;
  text-align:   center;
  border-radius: 50px;
  padding:      14px 24px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  gap:          8px;
}

.d247-mobile-menu .d247-mobile-cta:hover {
  background: var(--d247-navy) !important;
}

.d247-mobile-menu .d247-mobile-cta svg {
  display:    inline-block;
  flex-shrink: 0;
}

/* Strip WP default <ul> styling inside mobile menu */
.d247-mobile-menu ul {
  list-style: none;
  margin:     0;
  padding:    0;
}

/* ── Responsive Breakpoints ───────────────────────────────────────────────── */

/* Tablet (≤ 1024px): hide desktop menu */
@media (max-width: 1024px) {
  .d247-nav-center {
    display: none;
  }

  .d247-nav-hamburger {
    display: flex;
  }
}

/* Mobile (≤ 768px): hide phone button label, shrink CTA */
@media (max-width: 768px) {
  .d247-nav {
    padding: 0 16px;
  }

  .d247-nav-phone {
    display: none; /* fully hidden on small screens — use mobile menu */
  }

  .d247-btn-nav-cta {
    padding:   9px 16px;
    font-size: 0.78rem;
  }

  .d247-mobile-menu {
    top: 72px;
  }
}

/* Very small (≤ 480px) */
@media (max-width: 480px) {
  .d247-nav {
    height: 64px;
  }

  .d247-nav-logo img {
    height: 34px;
  }

  .d247-nav-logo-text {
    font-size: 1.1rem;
  }

  .d247-mobile-menu {
    top: 64px;
  }
}

/* ── Elementor Editor helpers ─────────────────────────────────────────────── */
.elementor-editor-active .d247-nav {
  position: relative !important; /* prevent nav from covering the editor panel */
  top: auto !important;
}

.elementor-editor-active .d247-mobile-menu {
  position: relative !important;
  top: auto !important;
  box-shadow: 0 4px 12px rgba(37, 62, 93, 0.08);
  border: 1px dashed rgba(89, 183, 224, 0.4);
}