/*
Theme Name: ModernDH1
Theme URI: https://example.com/moderndh1
Author: DH
Description: Modern, clean neurology blogging theme with custom login, sticky sidebar, and Customizer color presets.
Version: 1.0.0
License: GPL v2 or later
Text Domain: moderndh1
*/

 :root{
  /* Primary accent colors (set via Customizer) */
  --teal:#6d28d9;
  --teal-dark:#4c1d95;

  /* Neutrals */
  --grey:#f4f6fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.10);

  /* Modern UI tokens */
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 16px 44px rgba(15,23,42,.12);
  --shadow-soft:0 10px 26px rgba(15,23,42,.10);
  --ring:0 0 0 4px rgba(109,40,217,.18);
}

*{box-sizing:border-box; min-width:0;}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";background:radial-gradient(1200px 600px at 20% -10%, rgba(109,40,217,.12), transparent 60%),radial-gradient(900px 500px at 90% 0%, rgba(109,40,217,.10), transparent 60%),var(--grey);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{text-decoration:none;color:var(--teal)}
img{max-width:100%;height:auto;display:block}
img{object-position:center;}

.container{max-width:1200px;margin:0 auto;padding:16px}
@media(max-width:520px){ .container{padding:12px} }

/* Layout: content + right sidebar on desktop */
.layout{
  display:grid;
  grid-template-columns: 4fr 1fr;
  gap:24px;
  align-items:start;
}
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
}

/* Sticky sidebar on desktop */
@media (min-width: 981px){
  .site-sidebar{
    position: sticky;
    top: 92px;
    align-self: start;
    max-width: 380px;
    /* Keep sidebar stuck while page scrolls; do not create an internal scroll area */
    height: auto;
    overflow: visible;
    padding-bottom: 24px;
  }
}

header,footer{background:#fff}
header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-brand{display:flex;align-items:center;gap:12px;min-width:240px}
.site-brand .custom-logo{max-width:54px;height:auto}
.site-titles h1{margin:0;font-size:20px;line-height:1.1}
.site-titles p{margin:4px 0 0 0;color:var(--muted);font-size:12px}

.primary-nav ul, .footer-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}
.primary-nav a, .footer-nav a{font-weight:650;color:var(--text)}
.primary-nav a:hover, .footer-nav a:hover{color:var(--teal)}

.card{
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  border:1px solid var(--border);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}

.card .card-body{padding:12px 14px}
.card .card-body h3{margin:0 0 8px 0;font-size:16px}
.card .card-body p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.card .card-image img{width:100%;height:200px;object-fit:cover}

.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px 0}
.section-head h2{margin:0;font-size:18px}

.section-action{text-align:center;margin-top:14px}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  background:var(--teal);
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 24px rgba(15,111,107,.22);
  max-width:100%;
  white-space:normal;
  text-align:center;
}
.btn-primary:hover{background:var(--teal-dark)}
@media(max-width:520px){ .btn-primary{width:auto; padding:10px 14px;} }

/* Sidebar - lighter + no overflow */
.sidebar-wrap{position:sticky; top:92px; max-width:100%; overflow:visible; align-self:start; height:fit-content;}
.sidebar-card{padding:14px}
.sidebar-card h3{margin:0 0 10px 0;font-size:13px;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}
.sidebar-card form{max-width:100%}
.sidebar-card input[type="search"]{
  width:100%;
  max-width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  outline:none;
}
.sidebar-card input[type="submit"]{
  width:100%;
  max-width:100%;
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:0;
  background:var(--teal);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

/* Scroll-to-top */
.scrolltop{
  position:fixed;right:16px;bottom:16px;
  background:rgba(122,30,43,.70);color:#fff;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;font-size:16px;
  backdrop-filter: blur(6px);
  z-index:9999;
}

/* Banner slider */
.home-banners{padding:0;margin:0}
.banner-slider{position:relative;width:100%;overflow:hidden;background:transparent;border-radius:22px}
.banner-track{display:flex;will-change:transform;touch-action:pan-y}
.banner-slide{min-width:100%;position:relative}
.banner-slide img{
  width:100%;
  height:min(56vh, 520px);
  min-height:240px;
  object-fit:cover;object-position:center;
  display:block;
  background:transparent;
}
.banner-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 18px 22px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  color:#fff;
}
.banner-caption h2{margin:0 0 6px 0;font-size:22px}
.banner-caption p{margin:0;opacity:.92;font-size:13px;line-height:1.45;max-width:70ch}
.banner-dots{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:12px;display:flex;gap:8px;z-index:5;
}
.banner-dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.25);padding:0;}
.banner-dot.is-active{background:#fff}

/* Mobile: show full banner image (no cropping) + visible rounded corners */
@media (max-width: 720px){
  .banner-slider{margin:10px 10px 0; border-radius:22px;}
  .banner-track{height:auto; min-height:0;}
  .banner-slide{height:auto;}
  .banner-slide img{height:auto; width:100%; object-fit:contain; background:#0b2f2d;}
}


/* Horizontal carousels */
.hscroll{scrollbar-width:none;
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:4px 8px 14px 8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-padding-left:8px;
}
.hscroll::-webkit-scrollbar{height:0}
.hscroll::-webkit-scrollbar-thumb{background:rgba(15,111,107,.22);border-radius:999px}
.hscroll-item{scroll-snap-align:start; flex:0 0 320px;}
@media (max-width: 900px){ .hscroll-item{flex-basis:280px} }
@media (max-width: 560px){ .hscroll-item{flex-basis:78vw} }
.service-card .card-image img{height:170px}

/* Overlay arrow heads for desktop horizontal scroll (reference-style translucent chevrons) */
.hscroll-wrap{position:relative}
.hscroll-nav{display:none}
@media (min-width: 900px){
  .hscroll-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.06);
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(6px);
    box-shadow:0 10px 28px rgba(0,0,0,.10);
    cursor:pointer;
    z-index:10;
  }
  .hscroll-nav--left{left:6px}
  .hscroll-nav--right{right:6px}
  .hscroll-nav:hover{background:rgba(255,255,255,.85)}
  .hscroll-nav:active{transform:translateY(-50%) scale(.98)}
  .hscroll-nav:disabled{opacity:.35;cursor:default}
  .hscroll-nav__icon{width:18px;height:18px;display:block;position:relative}
  /* chevron */
  .hscroll-nav__icon:before{
    content:"";
    position:absolute;
    inset:0;
    margin:auto;
    width:10px;
    height:10px;
    border-right:3px solid rgba(32,32,32,.55);
    border-bottom:3px solid rgba(32,32,32,.55);
    transform:rotate(-45deg);
  }
  .hscroll-nav--left .hscroll-nav__icon:before{transform:rotate(135deg)}
}

/* Blogs smaller than services */
.hscroll--blog .hscroll-item{flex-basis:280px}
@media (max-width: 900px){ .hscroll--blog .hscroll-item{flex-basis:250px} }
@media (max-width: 560px){ .hscroll--blog .hscroll-item{flex-basis:72vw} }
.blog-card .card-image img{height:155px}
.blog-card .card-body{display:flex;flex-direction:column;gap:6px}
.blog-card .card-body h3{font-size:15px}
.blog-card .card-body p{font-size:12.5px}
.blog-card .post-meta{margin-top:auto;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.blog-card .post-meta .meta-sep{opacity:.6}

/* Doctors carousel */
.hscroll--doctor .hscroll-item{flex-basis:280px}
@media (max-width: 900px){ .hscroll--doctor .hscroll-item{flex-basis:250px} }
@media (max-width: 560px){ .hscroll--doctor .hscroll-item{flex-basis:72vw} }
.doctor-card .card-image img{height:155px}

/* Gutenberg spacing */
.home-editor-content{margin-top:12px}

/* List pages */
.list-row{display:flex;gap:14px;align-items:flex-start;padding:14px}
.list-thumb{width:120px;min-width:120px;height:92px;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.list-thumb img{width:100%;height:100%;object-fit:cover}
.list-meta h2{margin:0 0 6px 0;font-size:18px}
.list-meta p{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
@media (max-width: 520px){ .list-row{flex-direction:column} .list-thumb{width:100%;height:190px} }

/* Single post meta */
.post-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:12px;margin:10px 0 12px 0}
.post-meta a{color:var(--teal)}

@media (max-width: 768px){
  header .container{align-items:flex-start}
  .banner-caption h2{font-size:18px}
  .banner-caption p{font-size:12px}
}


/* Hard overflow guards */
.layout, main, aside {max-width:100%;}
.card, .card-body, .card-image {max-width:100%;}
.sidebar-wrap * {max-width:100%;}
input, textarea, select, button {max-width:100%;}


/* --- Single-tile sidebar layout --- */
.sidebar-wrap{position:sticky; top:92px; align-self:start; height:fit-content;}
.sidebar-stack{gap:14px;}
.sidebar-box{padding:14px;}
.sidebar-box h3{margin:14px 0 10px 0;}
.sidebar-box h3:first-child{margin-top:0;}
.sidebar-box .sidebar-divider{height:1px;background:var(--border);margin:12px 0;border:0;}

/* Latest posts mini cards in sidebar */
.sb-latest{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.sb-latest-item{display:flex;gap:10px;align-items:flex-start}
.sb-thumb{width:56px;min-width:56px;height:56px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#fff}
.sb-thumb img{width:100%;height:100%;object-fit:cover;object-position:center}
.sb-latest-body{flex:1;min-width:0}
.sb-title{font-weight:800;color:var(--text);display:block;line-height:1.2;margin:0 0 4px 0}
.sb-meta{font-size:12px;color:var(--muted);margin:0 0 6px 0}
.sb-excerpt{font-size:12px;color:var(--muted);margin:0;line-height:1.35}


/* --- Blog card meta + category ribbon --- */
.post-card{position:relative;}
.post-cat-ribbon{
  position:absolute; top:12px; right:12px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.post-meta-bottom{
  display:flex; gap:10px; align-items:center;
  font-size:12px; color:var(--muted);
  margin-top:10px;
}
.post-meta-bottom span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* --------------------------------------------------------------------------
   Banner: show full image (contain) with blurred background fill (no bars)
   -------------------------------------------------------------------------- */
.banner-slide{position:relative;}
.banner-slide .banner-media{position:relative;width:100%;height:clamp(240px,56vh,520px);border-radius:22px;overflow:hidden;background:transparent;}
.banner-slide .banner-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(18px);transform:scale(1.12);opacity:.55;}
.banner-slide .banner-img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;display:block;}

/* remove any solid background that causes bars */
.banner-wrap{background:transparent !important;}

@media (max-width:768px){
  .banner-slide .banner-media{height:clamp(200px,40vh,360px);border-radius:18px;}
}

/* --------------------------------------------------------------------------
   Doctor images: avoid cropping regardless of aspect ratio
   -------------------------------------------------------------------------- */
.card-image{background:#fff;}
.card-image img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}

/* Ensure consistent card image heights without cropping */
.doctors-grid .card-image{height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:18px 18px 0 0;}
@media (max-width:900px){
  .doctors-grid .card-image{height:200px;}
}
@media (max-width:560px){
  .doctors-grid .card-image{height:190px;}
}

/* Doctors list page thumbnails */
.doctor-list .list-thumb{background:#fff;border-radius:14px;overflow:hidden;}
.doctor-list .list-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}

/* Single doctor hero image */
.single .hero .card-image,
.single-doctor .card-image{height:clamp(240px,48vh,520px);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:22px;}

/* If services/blog cards should keep cover, scope contain only to doctor templates */
body:not(.post-type-archive-doctor):not(.single-doctor) .service-card .card-image img{object-fit:cover;}



/* =========================
   FIX PACK: banner blur on mobile + tile image optimization (no crop + blur fill)
   ========================= */

/* Banner: use a fixed viewport via aspect-ratio so blur fill works on mobile too */
.banner-slider{background:transparent !important;}
.banner-slide{background:transparent !important;}
.banner-media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:72vh;
  background:transparent;
  overflow:hidden;
  border-radius:22px;
}
@media (min-width: 992px){
  .banner-media{aspect-ratio:21/9; max-height:640px;}
}
.banner-blur{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:blur(22px);
  transform:scale(1.12);
  opacity:.55;
}
.banner-img{
  position:relative;
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center;
  background:transparent !important;
  display:block;
}

/* Hide any legacy fixed-height img rules (avoid conflicts) */
.banner-slide > img{height:auto !important;}

/* Doctor tiles + Doctors page tiles + single doctor image: full image visible with soft blur fill */
.doctor-media,
.post-thumb.media-contain,
.list-thumb.media-contain,
.card-image.doctor-media{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:transparent;
  contain:paint;
}
.media-blur{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:.40;
  /* Reduce blur flicker on desktop (GPU compositing) */
  filter:blur(22px);
  transform:translateZ(0) scale(1.14);
  will-change:transform, filter;
  backface-visibility:hidden;
  pointer-events:none;
  border-radius:inherit;
}

.media-img{
  position:relative;
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center;
  display:block;
  background:transparent;
  border-radius:inherit;
}


/* Ensure doctor image frames have a stable height */
.doctor-media{height:200px;}
@media (max-width: 560px){ .doctor-media{height:220px;} }

/* Blog tiles (all blogs page) frame height */
.post-thumb.media-contain{height:220px; border-radius:18px 18px 0 0;}
@media (max-width: 640px){ .post-thumb.media-contain{height:200px;} }

/* List thumbs (doctors/services list rows) */
.list-thumb.media-contain{height:92px;}
@media (max-width: 520px){ .list-thumb.media-contain{height:190px;} }

/* Remove any cover rules that may override contain for these specific cases */
.doctor-card .card-image img,
.post-thumb img,
.list-thumb img{
  object-fit:unset;
}


/* Single Service hero image (stable blur fill + full image visible) */
.service-media{height:360px; position:relative; overflow:hidden; border-radius:18px; isolation:isolate;}
@media (max-width: 920px){ .service-media{height:300px;} }
@media (max-width: 560px){ .service-media{height:240px;} }
/* Single post featured image: show full image + blurred fill background */
.post-featured{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  height:440px;
  margin:0;
  background: #111;
}
.post-featured::before{
  content:"";
  position:absolute;
  inset:-30px;
  background-image: var(--pf-bg);
  background-size: cover;
  background-position: center;
  filter: blur(28px);
  transform: scale(1.1);
}
.post-featured::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.18);
}
.post-featured-img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}
@media (max-width: 900px){
  .post-featured{ height:320px; }
}
@media (max-width: 520px){
  .post-featured{ height:240px; border-radius:14px; }
}

/* =========================
   DH7: Tile media optimization (fit + blurred fill) + clickable title
   ========================= */

.site-title-link{display:block;color:inherit}
.site-title-link:hover{color:var(--teal)}
.site-title-link h1,.site-title-link p{color:inherit}

/* Unified blur-fill media container used across tiles + single pages */
.card-image.doctor-media,
.card-image.service-media{
  position:relative;
  overflow:hidden;
  background:#fff;
  border-radius:18px 18px 0 0;
}
.card-image.doctor-media .media-blur,
.card-image.service-media .media-blur{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:blur(18px);
  -webkit-filter:blur(18px);
  transform:scale(1.15);
  opacity:.55;
  will-change:transform;
}
.card-image.doctor-media .media-img,
.card-image.service-media .media-img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

/* Heights for home page tiles */
.blog-card .card-image.doctor-media{height:155px;}
.service-card .card-image.doctor-media{height:170px;}
.doctor-card .card-image.doctor-media{height:155px;}

/* Single Doctor / Service pages: larger hero media with same blur-fill */
body.single-doctor .card-image.doctor-media,
body.single-service .card-image.service-media{
  height:clamp(240px,48vh,520px);
  border-radius:22px;
}

/* Ensure inner rounding matches on large hero */
body.single-doctor .card-image.doctor-media,
body.single-service .card-image.service-media{
  border-radius:22px;
}

/* Remove older generic rules that could force crop/cover */
.service-card .card-image img,
.doctor-card .card-image img,
.blog-card .card-image img{
  height:auto;
}


/* DH8 services featured image fix */
.service-card .image,
.single-service .featured-image{
  position:relative;
  overflow:hidden;
  background:#f2f2f2;
}
.service-card .image img,
.single-service .featured-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  position:relative;
  z-index:2;
}
.service-card .image::before,
.single-service .featured-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:inherit;
  filter: blur(18px);
  transform: scale(1.1);
  z-index:1;
}

/* DH9 banner caption animation */
.banner-caption{z-index:4;}
.banner-caption.is-anim{animation:dh9CaptionIn 520ms ease both;}
@keyframes dh9CaptionIn{
  from{opacity:0; transform: translateY(10px);}
  to{opacity:1; transform: translateY(0);}
}

/* DH9 auto accent usage (service pages/cards) */
.single-service .card{border-top:3px solid var(--accent, var(--teal));}
.single-service .card a, .single-service .card .btn{color:var(--accent, var(--teal));}
.single-service .card .btn{border-color:color-mix(in srgb, var(--accent, var(--teal)) 60%, #fff 40%);}
.single-service .card .btn:hover{background:color-mix(in srgb, var(--accent, var(--teal)) 12%, #fff 88%);}


/* ===== DH10: Equal tile sizing within a row (desktop) ===== */
@media (min-width: 900px){
  .hscroll{align-items:stretch}
  .hscroll-item{display:flex;align-items:stretch}
  .hscroll-item > .card{height:100%}
  .card.blog-card,.card.doctor-card,.card.service-card{display:flex;flex-direction:column;height:100%}
  .card.blog-card a,.card.doctor-card a,.card.service-card a{display:flex;flex-direction:column;height:100%}
  .card.blog-card .card-body,.card.doctor-card .card-body,.card.service-card .card-body{
    display:flex;flex-direction:column;flex:1;min-height:0
  }
  .card.blog-card .card-body h3,
  .card.doctor-card .card-body h3,
  .card.service-card .card-body h3,
  .card.blog-card .card-body h2,
  .card.doctor-card .card-body h2,
  .card.service-card .card-body h2{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  .card.blog-card .card-body p,
  .card.doctor-card .card-body p,
  .card.service-card .card-body p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    margin-bottom:12px;
  }
  .card.blog-card .post-meta,
  .card.doctor-card .post-meta,
  .card.service-card .post-meta{
    margin-top:auto;
  }
}


/* ===== DH10: Services list thumb contain + blurred fill ===== */
.list-thumb{position:relative;overflow:hidden;background:#f2f2f2}
.list-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--thumb-bg);
  background-size:cover;
  background-position:center;
  filter:blur(18px);
  transform:scale(1.15);
  opacity:.85;
  z-index:1;
}
.list-thumb img{position:relative;z-index:2;background:transparent}


/* ===== DH11: Services list featured image match blur+contain style ===== */
.services-list .list-thumb{
  width:120px;
  height:120px;
  flex:0 0 120px;
  border-radius:18px;
}
.services-list .list-thumb img,
.services-list .list-thumb .service-thumb-img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.services-list .list-thumb::before{
  opacity:1;
}


/* ===== DH11: Force equal tile width/height per row (desktop + mobile) ===== */
.hscroll{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;align-items:stretch}
.hscroll-item{scroll-snap-align:start;display:flex;align-items:stretch}
.hscroll-item > .card{height:100%}

/* default widths */
.hscroll .hscroll-item{flex:0 0 320px;width:320px}
.hscroll--doctor .hscroll-item{flex:0 0 320px !important;width:320px !important}
.hscroll--service .hscroll-item{flex:0 0 320px !important;width:320px !important}
.hscroll--blog .hscroll-item{flex:0 0 340px !important;width:340px !important}

/* tablet */
@media (max-width: 899px){
  .hscroll .hscroll-item{flex:0 0 70vw;width:70vw}
  .hscroll--blog .hscroll-item{flex-basis:72vw !important;width:72vw !important}
}
/* mobile */
@media (max-width: 560px){
  /* Slightly narrower cards on mobile to hint horizontal scrolling */
  .hscroll .hscroll-item{flex:0 0 82vw;width:82vw}
}

/* Ensure cards stretch uniformly */
.card.blog-card,.card.doctor-card,.card.service-card{height:100%;display:flex;flex-direction:column}
.card.blog-card a,.card.doctor-card a,.card.service-card a{height:100%;display:flex;flex-direction:column}
.card.blog-card .card-body,.card.doctor-card .card-body,.card.service-card .card-body{flex:1;display:flex;flex-direction:column;min-height:0}


/* ===== DH12: hard-enforce uniform tile widths + full-width cards ===== */
.hscroll-item{min-width:0; box-sizing:border-box;}
.hscroll-item > a, .hscroll-item > .card, .hscroll-item > a > .card{width:100% !important; max-width:100% !important;}
.hscroll--doctor .hscroll-item{flex:0 0 340px !important; width:340px !important; min-width:340px !important; max-width:340px !important;}
.hscroll--service .hscroll-item{flex:0 0 340px !important; width:340px !important; min-width:340px !important; max-width:340px !important;}
.hscroll--blog .hscroll-item{flex:0 0 360px !important; width:360px !important; min-width:360px !important; max-width:360px !important;}

/* Override fixed desktop widths on small screens */
@media (max-width: 560px){
  .hscroll--doctor .hscroll-item,
  .hscroll--service .hscroll-item,
  .hscroll--blog .hscroll-item{
    flex:0 0 82vw !important;
    width:82vw !important;
    min-width:82vw !important;
    max-width:82vw !important;
  }
}

@media (max-width: 899px){
  .hscroll--doctor .hscroll-item,
  .hscroll--service .hscroll-item,
  .hscroll--blog .hscroll-item{flex:0 0 72vw !important; width:72vw !important; min-width:72vw !important; max-width:72vw !important;}
}
@media (max-width: 560px){
  .hscroll--doctor .hscroll-item,
  .hscroll--service .hscroll-item,
  .hscroll--blog .hscroll-item{flex:0 0 86vw !important; width:86vw !important; min-width:86vw !important; max-width:86vw !important;}
}


/* ===== DH12: Services page list-thumb uses contain + blur (no stretch) ===== */
body.page-template-page-services .list-thumb{
  width:120px;
  height:120px;
  flex:0 0 120px;
  border-radius:18px;
  position:relative;
  overflow:hidden;
}
body.page-template-page-services .list-thumb::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--thumb-bg);
  background-size:cover;
  background-position:center;
  filter:blur(14px);
  transform:scale(1.2);
  opacity:.9;
}
body.page-template-page-services .list-thumb img,
body.page-template-page-services .list-thumb .service-thumb-img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
}


/* ===== NeoDH1: section header row (heading + View All button) ===== */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin: 6px 0 14px;
}
.section-head h2,
.section-head h3{
  margin:0;
}
.section-head .view-all-btn{
  margin:0;
  white-space:nowrap;
}

/* ===== NeoDH1: Login page ===== */
.neo-card{
  background:#fff;
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}
.neo-login-card{
  max-width: 520px;
  margin: 40px auto;
  padding: 26px 26px 22px;
}
.neo-title{
  font-size: 28px;
  margin: 0 0 6px;
}
.neo-muted{
  margin: 0 0 16px;
  opacity: .75;
}
.neo-form{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.neo-label{
  font-weight: 600;
  margin-top: 4px;
}
.neo-input{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,.14);
  outline:none;
}
.neo-input:focus{
  border-color: var(--primary, #6c2bd9);
  box-shadow: 0 0 0 4px rgba(108,43,217,.12);
}
.neo-check{
  display:flex;
  gap:10px;
  align-items:center;
  margin: 6px 0 2px;
}
.neo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0);
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.neo-btn:hover{transform:translateY(-1px);filter:saturate(1.05);box-shadow:var(--shadow);}
.neo-btn:focus-visible{outline:none;box-shadow:var(--shadow), var(--ring);}
.neo-btn-full{ width:100%; }
.neo-btn-outline{
  background: transparent;
  color: var(--primary, #6c2bd9);
  border: 1px solid rgba(108,43,217,.35);
}
.neo-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.neo-alert{
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .18);
  color: #7f1d1d;
  padding: 12px 14px;
  border-radius: 12px;
  margin: 10px 0 14px;
}
.neo-alert-item + .neo-alert-item{ margin-top:6px; }
.neo-links{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top: 10px;
}
.neo-links a{ text-decoration:none; color: var(--primary, #6c2bd9); font-weight:600; }
.neo-links a:hover{ text-decoration:underline; }

@media (max-width: 540px){
  .neo-login-card{ margin: 20px auto; padding: 20px; }
  .neo-links{ flex-direction:column; align-items:flex-start; }
}

/* --- NeoDH2 overrides --- */

/* Place "View All" button inline with section title */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.section-head .btn-inline{margin-left:auto}
.btn-inline{padding:10px 16px; border-radius:999px; font-size:14px; line-height:1; white-space:nowrap}

/* Ensure carousel tiles take a fixed width and equal height within a row */
.hscroll-track{align-items:stretch}
.hscroll-item{flex:0 0 var(--tile-w, 360px); width:var(--tile-w, 360px); scroll-snap-align:start}
.hscroll-item > a,
.hscroll-item > .blog-card,
.hscroll-item > .service-card,
.hscroll-item > .doctor-card{width:100%; height:100%; display:flex; flex-direction:column}

/* Per-section tile widths */
.home-blogs .hscroll{--tile-w: 360px}
.home-services .hscroll{--tile-w: 420px}
.home-doctors .hscroll{--tile-w: 360px}

@media (max-width: 980px){
  .home-services .hscroll{--tile-w: 360px}
}
@media (max-width: 768px){
  .home-blogs .hscroll,
  .home-services .hscroll,
  .home-doctors .hscroll{--tile-w: 320px}
}
@media (max-width: 420px){
  .home-blogs .hscroll,
  .home-services .hscroll,
  .home-doctors .hscroll{--tile-w: 280px}
}

/* Services list thumbnail: object-fit contain + blurred backdrop (consistent with other cards) */
.service-list .list-thumb{position:relative; overflow:hidden}
.service-list .list-thumb img{
  position:relative;
  z-index:2;
  width:100%; height:100%;
  object-fit:contain;
}
.service-list .list-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--thumb-bg, transparent) center/cover no-repeat;
  filter: blur(18px);
  transform: scale(1.15);
  opacity: .85;
  z-index:1;
}

/* Sticky sidebar on desktop */
@media (min-width: 981px){
  .site-sidebar{
    position: sticky;
    top: calc(var(--header-h) + var(--adminbar-h) + 12px);
    align-self: start;
    max-height: calc(100vh - (var(--header-h) + var(--adminbar-h) + 24px));
    overflow: auto;
    max-width: 360px;
  }
}

/* ==========================
   Auth / Login page (NeoDH5 style)
   ========================== */

.neo-auth-wrap{ min-height: calc(100vh - 160px); display:flex; align-items:center; justify-content:center; padding: 30px 0; }
.neo-auth-card{ width: min(520px, 100%); padding: 26px; }
.neo-auth-title{ margin:0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.neo-auth-sub{ margin:0 0 18px; color: var(--muted); }

.neo-auth-card label{ display:block; font-weight:700; margin-bottom:6px; }
.neo-auth-card input[type="text"],
.neo-auth-card input[type="password"],
.neo-auth-card input[type="email"]{
  width:100%; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.85);
  outline: none;
}
.neo-auth-card input:focus{ border-color: color-mix(in srgb, var(--primary) 45%, rgba(2,6,23,.12)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }

.neo-auth-actions{ display:flex; gap: 12px; align-items:center; justify-content: space-between; margin-top: 14px; }
.neo-auth-actions .rememberme{ display:flex; align-items:center; gap: 8px; color: var(--muted); }
.neo-auth-actions .neo-btn{ white-space: nowrap; }

.neo-auth-links{ margin-top: 14px; display:flex; gap: 14px; flex-wrap: wrap; }
.neo-auth-links a{ color: var(--primary); font-weight: 700; }
.neo-auth-error{ background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22); color: #991b1b; padding: 10px 12px; border-radius: 12px; margin: 0 0 14px; }