/*
Theme Name: DPDHRibbon
Theme URI: https://example.com/doctorprofiledh
Author: DH
Description: Doctor profile theme with banners, expertise section, happenings (events/news), custom login, sticky sidebar, and premium Customizer color presets.
Version: 1.1.3
License: GPL v2 or later
Text Domain: dpdhribbon
*/

 :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);

  /* Sticky sidebar offsets */
  --header-h:72px;
  --adminbar-h:0px;
}

*{box-sizing:border-box; min-width:0;}

/* === Fluid typography (auto-adjust across mobile/tablet/desktop) === */
html{
  /* Scales 15px → 18px depending on viewport width */
  font-size: clamp(15px, 0.9vw + 12px, 18px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  font-size: 1rem;
  line-height: 1.6;
}
/* Headings scale smoothly with screen size */
h1{font-size: clamp(1.85rem, 1.25rem + 2.3vw, 3rem); line-height: 1.15;}
h2{font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.4rem); line-height: 1.2;}
h3{font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.95rem); line-height: 1.25;}
h4{font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.3;}
h5{font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); line-height: 1.35;}
h6{font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.1rem); line-height: 1.4;}
/* Ensure form controls inherit the fluid base size */
button, input, select, textarea{font: inherit;}
/* === End fluid typography === */

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.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* heading letter-spacing (additive to fluid sizes defined above) */
h1{letter-spacing:-0.02em}
h2{letter-spacing:-0.015em}
p,li{font-size:clamp(0.95rem,0.3vw + 0.9rem,1.05rem)}
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 — sidebar = 25% */
.layout{
  display:grid;
  grid-template-columns: 3fr 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: 100%;
    /* 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,.site-titles .site-name{margin:0;font-size:clamp(18px,1vw + 14px,22px);line-height:1.1;font-weight:800;color:var(--text)}
.site-titles .site-name{display:block}
.site-titles p{margin:4px 0 0 0;color:var(--muted);font-size:0.75rem}

.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:1rem}
.card .card-body p{margin:0;color:var(--muted);font-size:0.8125rem;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:1.125rem}

.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:0.8125rem;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:1rem;
  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:1.375rem}
.banner-caption p{margin:0;opacity:.92;font-size:0.8125rem;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:0.9375rem}
.blog-card .card-body p{font-size:0.7812rem}
.blog-card .post-meta{margin-top:auto;font-size:0.75rem;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:1.125rem}
.list-meta p{margin:0;color:var(--muted);font-size:0.8125rem;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:0.75rem;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:1.125rem}
  .banner-caption p{font-size:0.75rem}
}


/* 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:0.75rem;color:var(--muted);margin:0 0 6px 0}
.sb-excerpt{font-size:0.75rem;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:0.75rem;
  line-height:1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.post-meta-bottom{
  display:flex; gap:10px; align-items:center;
  font-size:0.75rem; 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: 1.75rem;
  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:0.875rem; 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: none;
    overflow: visible;
    max-width: 100%;
  }
}

/* ==========================
   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: 1.375rem; 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; }


/* Category ribbon overlay (subtle + minimal) */
.card-image, .list-thumb, .post-featured { position: relative; overflow: hidden; }
.cat-ribbon{
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  font-size:0.5938rem;
  font-weight:700;
  letter-spacing:.3px;
  line-height:1.15;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  max-width:calc(100% - 16px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}
@media (min-width: 900px){
  .cat-ribbon{ top:10px; left:10px; padding:4px 10px; font-size:0.6875rem; background:rgba(0,0,0,.20); }
}


/* Ribbon sizing fix (desktop) */
.cat-ribbon{
  position:absolute !important;
  left:10px !important;
  bottom:10px !important;
  top:auto !important;
  right:auto !important;
  display:-webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow:hidden !important;
  max-width: calc(100% - 20px) !important;
  padding: 3px 8px !important;
  font-size: 0.625rem !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  height: auto !important;
  max-height: 34px !important;
  background: rgba(0,0,0,.14) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
@media (min-width: 900px){
  .cat-ribbon{
    max-width: 58% !important;
    padding: 3px 8px !important;
    font-size: 0.625rem !important;
    max-height: 34px !important;
  }
}


/* ==========================================================================
   FIX PACK v1.1.2 — Sidebar 25% + Responsive Post Typography + Bugfixes
   ========================================================================== */

/* ---- Post / page content: optimal fluid reading typography ---- */
.entry-content,
.post-content,
.page-content,
.card-body .entry-content,
article .card-body > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
  /* nothing — use inherited fluid base */
}
.entry-content p,
.post-content p,
.entry-content li,
.post-content li{
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.125rem);
  line-height: 1.75;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 72ch; /* optimal reading line length */
}
.entry-content h1, .post-content h1{ font-size: clamp(1.85rem, 1.2rem + 2.3vw, 2.75rem); margin: 1.6em 0 0.5em; }
.entry-content h2, .post-content h2{ font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);  margin: 1.4em 0 0.45em; }
.entry-content h3, .post-content h3{ font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem);    margin: 1.2em 0 0.4em; }
.entry-content h4, .post-content h4{ font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.35rem); margin: 1em 0 0.35em; }
.entry-content blockquote,
.post-content blockquote{
  border-left: 4px solid var(--teal);
  margin: 1.5em 0;
  padding: 0.75em 1.25em;
  background: rgba(109,40,217,.05);
  border-radius: 0 12px 12px 0;
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.1rem);
  font-style: italic;
  color: var(--muted);
}
.entry-content pre,
.post-content pre{
  font-size: clamp(0.82rem, 0.35vw + 0.78rem, 0.95rem);
  overflow-x: auto;
  background: #0f172a;
  color: #e2e8f0;
  padding: 1.25em 1.5em;
  border-radius: 14px;
  line-height: 1.6;
}
.entry-content img,
.post-content img{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 1em 0;
}
.entry-content a,
.post-content a{
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content a:hover,
.post-content a:hover{
  color: var(--teal-dark);
}

/* ---- The card-body that wraps single post content ---- */
article .card-body{
  padding: clamp(16px, 2vw, 32px) clamp(16px, 3vw, 40px);
}

/* ---- Skip to content (accessibility) ---- */
.skip-to-content{
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999;
}
.skip-to-content:focus{
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 18px;
  background: var(--teal);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  z-index: 99999;
  overflow: visible;
  outline: none;
}

/* ---- Responsive header nav: hamburger on mobile ---- */
.nav-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text);
}
@media (max-width: 768px){
  .nav-toggle{ display: flex; align-items: center; justify-content: center; }
  .primary-nav ul{ display: none; flex-direction: column; gap: 8px; width: 100%; padding: 12px 0; }
  .primary-nav ul.is-open{ display: flex; }
  header .container{ flex-wrap: wrap; }
}

/* ---- Footer: copyright year + links ---- */
footer{
  padding: 16px 0;
  border-top: 1px solid var(--border);
  margin-top: 32px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---- Comments styling ---- */
.comments-area{
  margin-top: 24px;
  padding: 20px clamp(16px, 3vw, 32px);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
}
.comments-area h2.comments-title{
  font-size: clamp(1.1rem, 0.8rem + 1vw, 1.4rem);
  margin: 0 0 16px;
}
.comment-list{ list-style: none; padding: 0; margin: 0; }
.comment-list .comment{ padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment-list .comment:last-child{ border-bottom: 0; }
.comment-author .fn{ font-weight: 700; }
.comment-meta{ font-size: 0.75rem; color: var(--muted); margin-bottom: 6px; }
.comment-content p{ margin: 0; font-size: clamp(0.9rem, 0.3vw + 0.86rem, 1rem); line-height: 1.6; }
.comment-reply-link{
  display: inline-block;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--teal);
}
#respond{ margin-top: 20px; }
#respond h3{ font-size: clamp(1rem, 0.6rem + 0.8vw, 1.25rem); margin: 0 0 14px; }
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  font: inherit;
  font-size: clamp(0.9rem, 0.3vw + 0.86rem, 1rem);
  background: rgba(255,255,255,.85);
  outline: none;
}
#respond input:focus,
#respond textarea:focus{ border-color: var(--teal); box-shadow: var(--ring); }
#respond .submit{
  display: inline-flex;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  border: 0;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.9375rem;
}
#respond .submit:hover{ background: var(--teal-dark); }

/* ---- Pagination ---- */
.pagination,
.nav-links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 24px 0 8px;
}
.page-numbers,
.nav-links a,
.nav-links span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
}
.page-numbers.current,
.nav-links .current{
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.page-numbers:hover:not(.current),
.nav-links a:hover{
  background: rgba(109,40,217,.08);
  border-color: var(--teal);
  color: var(--teal);
}

/* ---- Sidebar search form ---- */
.search-form{ display: flex; flex-direction: column; gap: 8px; }
.search-field{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font: inherit;
  font-size: 0.9rem;
  outline: none;
}
.search-field:focus{ border-color: var(--teal); box-shadow: var(--ring); }
.search-submit{
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  background: var(--teal);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  font: inherit;
}

/* ---- Sidebar category list ---- */
.sidebar-card ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-card ul li a{
  color: var(--text);
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.sidebar-card ul li a:hover{ color: var(--teal); }

/* ---- Ensure sidebar fits perfectly at 25% ---- */
.site-sidebar{ width: 100%; min-width: 0; box-sizing: border-box; }
.sidebar-card, .sidebar-box{ word-break: break-word; overflow-wrap: break-word; }