html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif}
.hero-bg{background-size:cover;background-position:center}
.service-card:hover .service-icon{transform:scale(1.1);background:#0077B6;color:white}
.service-icon{transition:all .3s ease}
.doctor-card:hover img{transform:scale(1.05)}
.doctor-card img{transition:transform .5s ease}
.fade-up{opacity:0;transform:translateY(30px);transition:all .6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.toast{animation:slideIn .4s ease,fadeOut .4s ease 3.6s forwards}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeOut{to{transform:translateX(100%);opacity:0}}
.stat-counter{font-variant-numeric:tabular-nums}
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#0077B6;transition:width .3s}
.nav-link:hover::after{width:100%}
.mobile-menu{max-height:0;overflow:hidden;transition:max-height .4s ease}
.mobile-menu.open{max-height:600px}

/* When logged in, WordPress's admin toolbar is fixed at the very top of
   the viewport (32px desktop, 46px on narrower screens/mobile). Our nav
   uses position:sticky with top:0, which sticks it flush to the viewport
   top too - once scrolled, both end up trying to occupy the same strip
   and the admin bar visually covers the nav. WordPress adds an
   `admin-bar` class to <body> whenever the toolbar is showing, so use
   that to push the sticky nav down by exactly the toolbar's height. */
body.admin-bar #navbar{top:32px}
@media screen and (max-width:782px){
    body.admin-bar #navbar{top:46px}
}
.dept-tab.active{background:#0077B6;color:white}
.dept-content{display:none}
.dept-content.active{display:block}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(0,119,182,.15);border-color:#0077B6}
.davmac-custom-logo img,.davmac-custom-logo-footer img{max-height:48px;width:auto;display:block}
.davmac-custom-logo a,.davmac-custom-logo-footer a{display:flex;align-items:center}

/* Hero stats bar positioning is defined entirely here (not via Tailwind
   utility classes in the markup) so there is no specificity race against
   Tailwind's own dynamically-injected stylesheet to worry about. Desktop:
   pinned to the bottom edge of the hero. Mobile: normal document flow,
   stacked below the rest of the hero content. */
.hero-stats-bar{position:absolute;bottom:0;left:0;right:0}
@media(max-width:640px){
    .hero-stats-bar{display:none}
}

/* Hero slider (Dynamic hero option). Backgrounds cross-fade via opacity;
   text swaps instantly on top (display:none/block) to avoid layout
   collapse issues that a height-animated fade would cause given each
   slide's text can be a different length. */
.hero-slider-track{position:absolute;inset:0;z-index:0}
.hero-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;}
.hero-slide-bg.active{opacity:1}
.hero-slide-text{display:none}
.hero-slide-text.active{display:block;animation:heroFadeIn .6s ease}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.hero-slider-btn{position:absolute;top:45%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .2s}
.hero-slider-btn:hover{background:rgba(255,255,255,0.3)}
.hero-slider-prev{left:20px}
.hero-slider-next{right:20px}
.hero-slider-dots{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.hero-slider-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.4);border:none;cursor:pointer;padding:0;transition:all .2s}
.hero-slider-dot.active{background:#fff;width:22px;border-radius:5px}
@media(max-width:640px){
    .hero-slider-btn{display:none}
    .hero-slider-dots{bottom:auto;position:static;transform:none;justify-content:center;margin-top:14px;margin-bottom:-4px}
}

/* Hero banner for individual Pages/Posts (page.php, single.php) - uses
   the post's Featured Image, uploadable from its normal wp-admin edit
   screen like any other WordPress content. */
.page-hero{min-height:280px}
@media(min-width:768px){
    .page-hero{min-height:360px}
}

/* Floating WhatsApp chat widget - site-wide (footer.php), number and
   all copy editable under Appearance > Customize > WhatsApp Chat Widget. */
#wa-widget{position:fixed;bottom:24px;right:24px;z-index:999}
.wa-widget-toggle{width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,0.4);animation:waPulse 3s ease-in-out infinite;transition:transform .2s}
.wa-widget-toggle:hover{transform:scale(1.08)}
@keyframes waPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.4)}50%{box-shadow:0 4px 20px rgba(37,211,102,0.4),0 0 0 12px rgba(37,211,102,0.12)}}

.wa-widget-popup{position:absolute;bottom:76px;right:0;width:320px;max-width:calc(100vw - 48px);background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,0.2);overflow:hidden;animation:waPopIn .25s ease}
.wa-widget-popup.hidden{display:none}
@keyframes waPopIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.wa-widget-popup-header{background:#075E54;padding:16px;display:flex;align-items:center;gap:12px;position:relative}
.wa-widget-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.15);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-widget-title{color:#fff;font-weight:600;font-size:14px}
.wa-widget-subtitle{color:rgba(255,255,255,0.75);font-size:11px;display:flex;align-items:center;gap:5px;margin-top:2px}
.wa-widget-dot{width:6px;height:6px;border-radius:50%;background:#4ADE80;display:inline-block}
#wa-widget-close{position:absolute;top:12px;right:12px;background:none;border:none;color:rgba(255,255,255,0.8);cursor:pointer;padding:4px}
#wa-widget-close:hover{color:#fff}

.wa-widget-body{background:#ECE5DD;padding:16px}
.wa-widget-bubble{background:#fff;border-radius:10px;border-top-left-radius:2px;padding:12px 14px;font-size:13.5px;line-height:1.6;color:#111;box-shadow:0 1px 2px rgba(0,0,0,0.08)}

.wa-widget-start-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#25D366;color:#fff;padding:14px;font-size:13.5px;font-weight:600;text-decoration:none;transition:background .2s}
.wa-widget-start-btn:hover{background:#1fb855}

@media(max-width:480px){
    #wa-widget{bottom:16px;right:16px}
    .wa-widget-toggle{width:54px;height:54px}
    .wa-widget-popup{bottom:68px;right:-8px}
}

/* Mobile hero: reduce the fixed 700px min-height and keep the two CTA
   buttons on a single row. Selectors are deliberately compound
   (#home .hero-cta-buttons a, not just .hero-cta-buttons a) so they
   reliably win specificity ties against Tailwind's utility classes -
   Tailwind CDN builds and injects its stylesheet client-side at runtime,
   so its rules can land later in the DOM than this stylesheet regardless
   of source order, and a plain class-vs-class tie would otherwise be
   unpredictable. */
@media(max-width:640px){
    #home{min-height:auto}
    #home .hero-content-wrap{padding-top:40px;padding-bottom:32px}
    #home h1{font-size:1.9rem;line-height:1.15;margin-bottom:14px}
    #home p{margin-bottom:20px}
    #home .hero-cta-buttons{flex-wrap:nowrap;gap:10px}
    #home .hero-cta-buttons a{flex:1 1 0;padding:12px 10px;font-size:0.78rem;white-space:nowrap}
    #home .mt-10{margin-top:20px}
    /* Keep all 4 stats on a single row rather than wrapping to 2x2 -
       tighten gap/padding/font-size so they fit comfortably even on
       narrow phones. */
    #home .hero-stats-grid{gap:6px;padding-left:12px;padding-right:12px}
    #home .hero-stats-grid .text-2xl{font-size:1.05rem}
    #home .hero-stats-grid .text-xs{font-size:0.62rem;line-height:1.2;margin-top:2px}
}
@media(max-width:400px){
    #home .hero-cta-buttons a{padding:10px 6px;font-size:0.7rem;gap:6px}
    #home .hero-stats-grid{gap:4px}
    #home .hero-stats-grid .text-2xl{font-size:0.95rem}
    #home .hero-stats-grid .text-xs{font-size:0.58rem}
}